@font-face {
    font-family: 'gt_walsheim_probold';
    src: url('../fonts/gt-walsheim-pro-bold-webfont.eot');
    src: url('../fonts/gt-walsheim-pro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gt-walsheim-pro-bold-webfont.woff2') format('woff2'),
         url('../fonts/gt-walsheim-pro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

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

}

@font-face {
    font-family: 'Opale';
    src: url('../fonts/Opale-Regular.woff2') format('woff2'), url('../fonts/Opale-Regular.woff') format('woff');
    font-weight: normal;    
    font-style: normal
}


body,td,th {
    font-family: 'gt_walsheim_proregular', sans-serif;
    font-size:16px;
	line-height:1.5;
    margin:0;
    padding:0;
    background:#000;
	color:#fff;
	text-align:left;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

b, strong, h1, h2 {font-family: 'Opale','gt_walsheim_probold', sans-serif;font-weight: normal;}
h1 {font-size:48px;line-height: 1.2;padding:0;margin:0 0 1em;font-weight: normal;}
h2 {font-size:32px;line-height: 1.2;padding:0;margin:0 0 1em;font-weight: normal;}

h1.intro {margin-bottom:0px;}

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

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

#main {margin-top:100vh;min-height: 100vh;font-size:18px;line-height: 1.3;position: relative;z-index: 777;}
#main .inner {padding:6.5vw;}
#main p {max-width:750px;}
#main .block {display:block;max-width:750px;margin-bottom: 3em;font-size:0;}
#main .block .item {display: inline-block; width:25%;line-height: 1.3;margin-bottom:2em;font-size:18px;vertical-align: middle;}
#main .block .item img {-webkit-filter: invert(1);filter: invert(1);width:100%;height: auto;max-width: 100px;max-height: 60px;}

#logo {position: fixed;top:0px;left:0;right:0;bottom:0;z-index: 666;}

#bk {position: fixed;top:0;bottom:0;left:0;right:0;z-index: -1;opacity: 0.8;}
#bk video {object-fit: cover;height: 100%;width:100%;}

.meta {position: fixed;bottom:2vw;left:0;right:0;z-index: 888;opacity: 1;text-align: center;opacity: 0.5;}

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






.t {display: table;height: 100%;width: 90%;margin: 0 auto;padding:0 auto;text-align: center;}
.tc {vertical-align: middle;display: table-cell;}
    
p {margin: 0 0 1.5em;}

/* 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:1s;

	-webkit-animation-delay:0;
	-moz-animation-delay:0;
	-o-animation-delay:0;
	animation-delay:0;

}


@media screen and (max-width: 1023px) {
    h1, h2 {font-size:32px;}
    #main .block .item {width:33.333%;}
}

@media screen and (max-width: 767px) {
    h1, h2 {font-size:24px;}
    #main .block {margin-bottom:2em;margin-top:2em;}
    #main .block .item img {max-width: 80px;max-height: 45px;}
    #main .block .item:nth-child(1) {margin-bottom:1em;}
}