@font-face {
    font-family: 'avertaregular';
    src: url('../fonts/averta-regular-webfont.eot');
    src: url('../fonts/averta-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/averta-regular-webfont.woff2') format('woff2'),
         url('../fonts/averta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body,td,th {
    font-family: 'avertaregular', sans-serif;
    font-size:16px;
	line-height:1.5;
    margin:0;
    padding:0;
    background:#ffffff;
	color:#353535;
	text-align:left;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

::selection {color:#fff;background:#353535;}
::-moz-selection {color:#fff;background:#353535;}

b, strong {font-family: 'avertaregular', sans-serif;font-weight: normal;}

a {color:#9a9a9a;text-decoration:none;border-bottom:0px solid #9a9a9a;opacity: 1;}
a:hover {color:#353535;text-decoration:none;border-bottom:0px solid #DC3A09;opacity: 1;}

a {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
transition: color 0.2s linear;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

p {margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}

.t {display: table;height: 100%;width: 50%;margin: 0 auto;}
.tc {vertical-align: middle;display: table-cell;}

.inner {padding: 100px 0;}

#main {position: fixed;top:0px;left:0;right:0;bottom:0;z-index: 0;font-size: 25px;line-height:1.3;overflow: auto;}
#visuals {position: absolute;top:37.5%;left:37.5%;width:25vw;height: 25vh; z-index: -1;}
#visuals img {object-fit: contain;height: 100%;width: 100%;position: absolute;top: 0;bottom: 0;right: 0;left: 0;opacity: 0;}
#visuals img.current {opacity: 1;}

body.touch {padding:5vw;}
body.touch #visuals {position: relative;width: 100%;left:0!important;top:0!important;height:inherit;padding-top:66.67%;}
body.touch #main {position: relative;margin-top:1em;}
body.touch #main .t {width: 100%;}
body.touch #main .tc {display: block;}

body.link-hover #visuals {opacity: 0.1!important;}
#visuals {-webkit-transition: opacity 0.2s ease-in-out;
  	-moz-transition: opacity 0.2s ease-in-out;
  	-o-transition: opacity 0.2s ease-in-out;
  	-webkit-transition: opacity 0.2s ease-in-out;
  	-ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.4s ease-in-out;}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:0.5s;

}


@media screen and (max-width: 1280px) {
    .t {width:60%;}
}


@media screen and (max-width: 1023px) {
    #main {font-size: 22px;}
    .t {width:70%;}
}

@media screen and (max-width: 767px) {
    .inner {padding:0;}
     #main {font-size: 18px;}
    .t {width:90%;}
    body {overflow: auto;}
}