@font-face {
    font-family: 'robotomedium';
    src: url('roboto-medium-webfont.woff2') format('woff2'),
         url('roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'robotoregular', sans-serif;
    font-size: 14px;
}
        
.box {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.2em;
}

.black { color: #333; text-decoration: underline #ccc; }

.none { text-decoration: none; }

p {
    margin-bottom: 1.5em;
}

hr {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #ccc;
	margin: 1.5em 0;
}

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #a9a9a9;
  border-right: 2px solid #a9a9a9;
  margin-right: .25em;
}

.arrow-top {
  transform: rotate(-45deg);
}

.arrow-right {
  transform: rotate(45deg);
}

.row {
  display: flex;
  margin-top: 1em;
}

.column {
  flex: 50%;
}