@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

body {	
	text-align: center;
	border: none;
	margin: 0px;
    padding: 0px;
    background:rgb(15,15,15);    
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

img {
	border: none;
}

a {
	/*color: rgb(135, 135, 135);*/
	font-family: 'Teko', sans-serif;
	font-size:24px;
	/*color: rgb(150,30,30);*/
	color: rgb(234,66,82);
}

a:link, a:visited, a:active, a:focus {	
	text-decoration: none;
}

a:hover {	
	text-decoration: underline;
}

.block-header {
	position:relative;		
}

.logo {
	position:fixed;
	width: 100%;
	margin:auto;
	/*text-align:left;*/
	/*left: 40%;*/
	top: 30px;
}

.logo p {
	font-family: 'Teko', sans-serif;
	font-size:30px;
	/*color: rgb(0,0,0);*/
	/*color: rgb(150, 30, 30);*/
	color: rgb(234,66,82);
	text-shadow:1px 1px 1px rgb(0,0,0);	
}

/*
.dot {
	border-top: dashed 3px rgb(255, 255, 255);
	max-width: 450px;
	margin:auto;
}
*/

.main-header {	
	width: 100%;	
	padding-top:50px;
	padding-bottom:50px;
	margin-top:40%;
	margin-bottom:250px;
}

.main-header h1 {
	/*display: inline-block;*/
	font-family: 'Teko', sans-serif;
	font-size: 80px;
	color: rgb(255, 255, 255);
	font-weight:400;
	font-style:italic;	
	margin:auto;
	text-shadow:2px 2px 3px rgb(0,0,0);	
	border-top: dashed 3px rgb(255, 255, 255);
	border-bottom: dashed 3px rgb(255, 255, 255);
	max-width: 470px;
}

.main-header h2 {
	font-family: 'Teko', sans-serif;
	font-size:44px;
	font-weight:normal;	
	color: rgb(234,66,82);
	text-shadow:2px 2px 3px rgb(0,0,0);	
}

.dropping-texts {	
	text-align: center;
	height: 86px;	
}

.dropping-texts > div {
	font-size:90px;
	opacity:0;
	position:absolute;
	top: 132px;
	color: rgb(234,66,82);
	width:470px;
}

.dropping-texts > div:nth-child(1) {
	animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
	animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
	animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
	animation: roll 5s linear infinite 3s;
}
.dropping-texts > div:nth-child(5) {
	animation: roll 5s linear infinite 4s;
}

@keyframes roll {
  0% {
    opacity:0;
    margin-left:5px;
    margin-top:-30px;
  }
  5% {
    opacity:1;
    margin-left:0px;
	margin-top:0px;
  }
  20% {
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  23% {
    opacity:0;
    margin-left:-5px;
    margin-top:30px;
  }  
  100% {
    opacity:0;
    margin-top:0px;
  }
}

.block-intro {
	position:relative;
	/*padding-top: 200px;*/
	padding-bottom: 70px;
	z-index:1;
	background-size:cover;	
}

.block-intro h2 {	
	max-width: 260px;
	font-size: 36px;
	line-height:42px;
	/*color: rgb(98, 14, 14);*/	
	/*color: rgb(200, 200, 200);*/
	/*color: rgb(150, 30, 30);*/
	color: rgb(234,66,82);
	font-weight: normal;
	/*font-family: 'Patua One', cursive;*/
	/*font-family: 'Roboto Slab', serif;*/
	font-family: 'Teko', sans-serif;
	text-shadow:2px 2px 2px rgb(0,0,0);
	text-align:right;	
	margin:auto;
	display: inline-block;
	padding-right: 50px;
	padding-bottom:150px;
	border-right: solid 2px rgba(255,255,255,0.3);
	/*text-shadow:1px 1px 3px rgb(0,0,0);*/	
}

.block-intro h3 {	
	max-width: 260px;
	font-size: 30px;
	line-height:36px;
	color: rgb(180, 180, 180);
	font-weight: normal;
	font-family: 'Teko', sans-serif;
	/*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
	/*font-family: 'Patua One', cursive;*/
	/*padding-top:30px;
	padding-top:240px;*/
	margin:auto;
	text-align:left;
	vertical-align:bottom;
	padding-left: 50px;
	display: inline-block;
	text-shadow:1px 1px 1px rgb(0,0,0);
} 

@media only screen and (max-width: 650px) {
    .block-intro h2 {
        border-right: none;
		padding-right: 0px;
		padding-bottom: 40px;
		text-align:center;
		border-bottom: solid 2px rgba(255,255,255,0.3);
		display:block;	
    }
	.block-intro h3 {
        text-align:center;
		padding-left: 0px;
		padding-top:30px;
		display:block;		
    }
	.main-header h1 {
		font-size: 60px;
	}
	.main-header h2 {
		font-size:34px;
	}
	.dropping-texts > div {
		font-size:40px;
		width:300px;
	}
}

.block-intro h4 {
	font-weight:lighter;
	font-size: 26px;
	font-family: 'Patua One', cursive;	
	/*color: rgb(98,14,14);*/	
	/*color:rgb(204,0,0);*/
	/*color: rgb(150,30,30);*/
	color: rgb(234,66,82);
	text-shadow:2px 2px 2px rgb(0,0,0);
}

.block-intro h5 {
	font-weight: lighter;
	color: rgb(180, 180, 180);
	/*color:rgb(180,180,180);*/	
	/*font-family:"Courier New", Courier, monospace;*/
	/*font-family: 'Teko', sans-serif;*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-size: 17px;
	line-height: 25px;
	line-height: 20px;
	text-shadow: 1px 1px 1px rgb(0,0,0);
	letter-spacing: 0px;
}

.main {	
	border-top: 1px solid rgb(98, 14, 14);	
	width: 100%;
	margin: auto;
	padding-top: 70px;
	/*padding-top:100px;
	padding-bottom:100px;*/
	/*background:url(../images/30-20-25-08.png) repeat;*/
	/*margin-bottom: 300px;	*/
	/*background-color:rgba(30, 20, 25, 0.8);*/
	/*background-color:rgba(200, 200, 200, 0.95);*/
	/*background-color:rgba(80, 50, 50, 0.7);*/
	/*background-color:rgba(200, 200, 200, 0.4);*/
	/*border:1px solid rgb(255,255,255);*/
    background-color:rgba(30, 20, 25, 0.8);
	background:url(../images/30-20-25-08.png) repeat;
}

.story {
	padding-top: 200px;
	background:url(../images/visual.jpg) no-repeat;
	background-size:cover;	
}

.technical {
	padding-top: 200px;
	background:url(../images/technical.jpg) no-repeat right;
	background-size:cover;	
}

.budget {
	padding-top: 200px;
	background:url(../images/budget.jpg) no-repeat bottom;
		background-size:cover;	
}

.pitch {
	padding-top: 200px;
	background:url(../images/pitch.jpg) no-repeat center;
		background-size:cover;	
}

.box-intro {
	border: 1px solid rgb(30, 30, 30);
	position:relative;
	max-width: 340px;
	padding: 15px 25px 10px 25px;	
	/*background-color:rgba(0, 0, 0, 0.4);*/
	background:url(../images/0-0-0-04.png) repeat;			
}

.block-service {
	border-top: 1px solid rgb(98, 14, 14);		
	position:relative;
	padding:70px 100px 100px 100px;
	z-index:1;
	/*background-color:rgba(30, 30, 30, 0.95);
	background:url(../images/30-30-30-095.png) repeat;	*/
    background-color:rgba(30, 20, 25, 0.8);
	background:url(../images/30-20-25-08.png) repeat;
}

.block-title h1 {
	font-family: 'Teko', sans-serif;
	font-size:44px;
	font-weight:normal;	
	/*color: rgb(150, 30, 30);*/
	color: rgb(250, 250, 250);
	text-shadow:2px 2px 3px rgb(0,0,0);
	border-bottom: dashed 2px rgb(255, 255, 255);
	max-width: 342px;
	margin:0px auto 35px auto;	
}

.box-service {
	/*border: 1px solid rgb(40, 40, 40);*/
	position:relative;	
	max-width: 340px;
	min-width: 220px;
	display: inline-block;
	vertical-align:top;	
	/*width: 250px;
    height: 250px;*/
	padding: 25px 15px 0px 15px;
	margin:15px;	
	/*background-color:rgba(30, 20, 25, 0.8);
	background:url(../images/30-20-25-08.png) repeat;*/
	/*background-color:rgba(0, 0, 0, 0.2);*/
	/*background:url(../images/0-0-0-04.png) repeat;	*/		
}

@media only screen and (max-width: 500px) {
    .box-service {
        margin:0px;
		padding: 25px 5px 0px 5px;
		min-width: 180px;
    }
	.block-service {
		padding:70px 30px 50px 30px;	
	}
}

.box-service h4 {
	font-weight:lighter;
	font-size: 22px;
	font-family: 'Patua One', cursive;	
	/*color: rgb(98,14,14);*/
	margin-top:10px;
	/*color: rgb(150,30,30);*/
	/*color:rgb(204,0,0);*/
	color: rgb(234,66,82);
	text-shadow:2px 2px 2px rgb(0,0,0);
}

.box-service h5 {
	font-weight: lighter;
	color: rgb(180, 180, 180);
	/*font-family:"Courier New", Courier, monospace;*/
	/*font-family: 'Teko', sans-serif;*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 19px;
	text-shadow: 1px 1px 1px rgb(0,0,0);
	letter-spacing: 0px;
}

.box-service a {
	text-decoration:underline;
}

.clear-both {
	clear:both;
}

/*
.box-intro:hover {
	background-color:rgba(255, 255, 255, 0.15);
}

.box-intro:hover h4 {
	color:rgb(204,0,0);
}

.box-intro:hover h5 {
	color:rgb(255,255,255);
}
*/

/* Phone & Small Tablets */
/*
@media screen and (max-width: 767px) {
	.box-intro {
		width:70%;
	}
}*/

.block-works {
	border-top: 1px solid rgb(98, 14, 14);
	position:relative;
	width:100%;
	padding: 70px 0px 100px 0px;
	background-color:rgb(30, 20, 25);	
	z-index:1;
	display: inline-block;
}

.box-works {
	position:relative;
	display: table;
	/*vertical-align: middle;	*/
	text-align: center;
	/*padding: 0px;
	margin: 0px;	***/
	/*max-width: 800px;
	max-height: 400px;*/
	min-width: 150px;
	width: 100%;
	height: auto;
	/*border: 1px solid white;*/
	outline: 0px;
	/*margin-bottom: -10px;*/
	line-height: 0px;
	/*-webkit-column-count: 2;*/
	-webkit-column-gap:   0px;
	/*-moz-column-count:    2;*/
	-moz-column-gap:      0px;
	/*column-count:         2;*/
	column-gap:           0px;
}

.box-works img {	
	width: 100%;
	height: auto;	
}
/*
.box-works img:hover {	
	background-color: black;	
}
*/

* {
  box-sizing: border-box;
}

.text-works {
	position: absolute;
	z-index:2;
	/*background-color: black;*/
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
	width: 96%;
}

.text-works h4 {
    font-weight:lighter;
	font-size: 22px;
	font-family: 'Patua One', cursive;	
}

.text-works h5 {
    font-weight:lighter;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 0px;
	top: -10px;
}

@media only screen and (max-width: 420px) {
    .text-works h4 { font-size: 18px; }
	.text-works h5 { font-size: 14px; line-height: 16px; margin-top: -14px; }
}

/* Clear floats after the columns */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

.responsive {
  padding: 0 0px;
  float: left;
  width: 33.33333%;
}

@media only screen and (max-width: 1700px) {
  .responsive {
    width: 49.99999%;
    margin: 0px 0;
  }
}
/*
@media only screen and (max-width: 1400px) {
  .responsive {
    width: 74.99999%;
    margin: 0px 0;
  }
}
*/
@media only screen and (max-width: 1100px) {
  .responsive {
    width: 100%;
  }
}

.colorbox-video {
	text-decoration:underline;
}

.block-partners {
	border-top: 1px solid rgb(98, 14, 14);
	position:relative;
	width:100%;
	padding: 70px 0px 100px 0px;
	background-color:rgb(30, 20, 25);	
	z-index:1;
	display: inline-block;
}

.partner-icon img{
    padding: 0px 20px 40px 20px;
}

.block-footer {
	visibility: hidden;		
	width: 100%;
	height:591px;
	margin: auto;	
	position:fixed;
	text-align:center;
	z-index:0;
	bottom:0px;
	padding-top:50px;
	background-color:rgba(30, 20, 25, 0.8);
	background:url(../images/30-20-25-08.png) repeat;
}

.footer-space {
	height:590px;
	background:url(../images/drop_shadow.png) repeat-x;
	z-index:-3;
}

.footer-icons {
	width:260px;	
	margin: auto;	
}

.footer-icons img {
	position:relative;
	top:9px;
	right:8px;	
}

.phone-icon {
	left:-20px;
	position:relative;
}

.footer-logo {
	padding-top:0px;
	padding-bottom:0px;	
}

.contact-icon {
	margin: 20px 10px 20px 10px;
	/*font-size:15px;*/
	/*float:left;*/
	display: inline-block;
	width:40px;
	height:40px;	
}

.copyright {	
	padding-top:50px;
	font-size:18px;	
	font-family: 'Teko', sans-serif;
	color:rgb(135, 135, 135);
}

.video-screen {	
	z-index:-2;
	position:fixed;
	top:-50px;
	width:100%;
	height:100%;
	background:url(../images/bg.jpg) center;
	background-size:cover;
}

.left {
	margin: auto auto auto 10%;		
}

.right {	
	margin: auto 10% auto auto;		
}

.fade-control:hover .fade-out {
	opacity: 0.1;
}

.fade-control:hover .fade-in {
	opacity: 1;
}

.fade-out {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}

.fade-in {
	opacity: 0;    
	transition: opacity .5s ease-in-out;
	/*transition-delay: 1s;*/
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	/*-webkit-transition-delay: 1s;*/ /* Safari */
	
}

.icon-vimeo { background: url(../images/icon_vimeo_.jpg) no-repeat; }
.icon-linkedin { background: url(../images/icon_linkedin_.jpg) no-repeat; }
.icon-facebook { background: url(../images/icon_facebook_.jpg) no-repeat; }

.icon-linkedin a, .icon-facebook a, .icon-vimeo a { display: block }
.icon-linkedin a:hover img, .icon-facebook a:hover img, .icon-vimeo a:hover img { visibility:hidden }