/* reset */
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:bolder}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}summary{display:list-item}[hidden],template{display:none}


/* core */
*,*::before,*::after {-webkit-box-sizing: inherit;box-sizing: inherit;}
@-ms-viewport {width: device-width;}
html {box-sizing: border-box; font-size: 20px;line-height: 1.4; font-weight: 400; -ms-overflow-style: scrollbar;-webkit-tap-highlight-color: transparent;}
body {font-family: "futura-pt",sans-serif;color: rgba(255,255,255,.7);background-color: #18151a;}
h1 {line-height: 20px; font-size: 20px; margin: 100px 0 }
a {color: rgba(255, 255, 255, .7);text-decoration: none;}
ul {list-style: none;position: relative;margin: 0 10px 50px;padding: 0;}

footer {padding-bottom: 50px;}
header {width: 100vw;height: 80vh;position: relative;overflow: hidden}
video {display: none;}
#m-video-background {background: #fefcfe url(../img/intro.gif) no-repeat center bottom; background-size: 100% auto; position: absolute;display: block;  z-index: -1;margin: 0 auto;object-fit: cover;width: 100vw;height: 35vh;padding-top: 30vh;}
header .intro-text {position: absolute;z-index: -1;mix-blend-mode: exclusion; font-size: 24px; left: 0; right: 0; padding: 0 50px}

.title {font-weight: 700;margin-bottom: 30px;}
.title:after {content: "";width: 4px;height: 4px;background: red;position: absolute;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;top: 42px;left: 0}
.clients {margin-bottom: 100px;}

/* layout */
.container {margin-left: auto;margin-right: auto;padding-left: 50px;padding-right: 50px;position: relative;z-index: 9999;}
.container::after {content: "";display: table;clear: both;}
.row {margin-right: -10px; margin-left: -10px;}
.row::after {content: "";display: table;clear: both;}


h2 {border-top: 1px solid rgba(255, 255, 255, .05);font-size: 15px;line-height: 15px;font-weight: 700;letter-spacing: 10px; margin: 0 0 40px; padding-top: 40px;}
.col {position: relative;float: left;width: 50%;padding: 0 10px;}
.col img {width: 100%;height: auto;display: block;margin-bottom: 20px;border: 1px solid rgba(255, 255, 255, .05);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}


@media (min-width: 992px) {
	h1 {margin: 200px 0 250px}
	body {text-align: left; font-size: 15px}
	#m-video-background {display: none}
	header video {background: #fefcfe;position: absolute;display: block;  z-index: -1;margin: 0 auto;object-fit: cover;width: 100vw;height: 100vh;padding-top: 30vh;}	.container {padding-left: 10px;padding-right: 10px;}
	.container {width: 960px;max-width: 100%;}
	ul {width: 25%;float: left;margin: 0 0 50px; padding-left: 10px; padding-right: 10px}
	.col {width: 20%;}
	.title:after {left: 12px;top:33px}
	header .intro-text {left: auto; right: auto; padding: 0}
	header {height: 100vh;}
	h2 {margin: 0 0 100px; padding-top: 100px;}
	section {padding-bottom: 50px;}
}