@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);

@font-face { font-family: Phorssa; src: url('Phorssa.ttf'); } 

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);
}

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: 'Phorssa', sans-serif;
	font-size:80px;
	color: #ff4457;
	margin-top: 20%;
	/*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:450px;
	padding-bottom:50px;
	margin-top:400px;
	margin-bottom:250px;
}

.main-header h1 {
	font-family: "Henny Penny", system-ui;
	font-weight: 400;
	/*font-style: normal;*/
	font-size: 60px;
	color: #d32424;
	font-style:italic;	
	margin:auto;
	text-shadow:2px 2px 3px rgba(0,0,0, 0.7);	
	border-top: dashed 3px rgb(255, 255, 255);
	border-bottom: dashed 3px rgb(255, 255, 255);
	max-width: 450px;
}
.main-header h2 {
	font-family: "Creepster", system-ui;
	font-size:60px;
	/*font-weight:normal;*/
	font-weight: 400;
	font-style: normal;
	/*color: rgb(150, 30, 30);*/
	/*text-shadow:2px 2px 3px rgb(0,0,0);*/
	/*
	background: -webkit-linear-gradient(#2782ff, #e62f2f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
	background-image: linear-gradient(#2782ff, #e62f2f);
    color: transparent;
    background-clip: text;	
	filter: drop-shadow(2px 2px 2px #333);
}

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

.block-intro h2 {	
	max-width: 520px;
	font-size: 40px;
	line-height:48px;
	/*color: rgb(98, 14, 14);*/
	color: #ff4457;
	/*color: rgb(200, 200, 200);*/
	font-weight: normal;
	/*font-family: 'Patua One', cursive;*/
	/*font-family: 'Roboto Slab', serif;*/
	font-family: "Henny Penny", system-ui;
	/*text-shadow:2px 2px 2px rgba(0,0,0, 0.7);*/
	text-align:right;	
	margin:auto;
	display: inline-block;
	padding-right: 50px;
	padding-bottom:100px;
	/*border-right: solid 2px rgba(255,255,255,0.3);*/
	/*text-shadow:1px 1px 3px rgba(255,255,255,0.3);*/
	-webkit-text-stroke: 0.01em rgba(255,255,255,0.3);
}

.block-intro h3 {	
	background-image: linear-gradient(#2782ff, #e62f2f);
    color: transparent;
    background-clip: text;	
	/*filter: drop-shadow(2px 2px 2px #333);*/
	font-size: 60px;
	font-family: "Creepster", system-ui;
	/*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;
	display: inline-block;
	-webkit-text-stroke: 0.004em rgba(255,255,255,0.3);
} 

@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;		
    }
}

.block-intro h4 {
	font-weight:lighter;
	font-size: 26px;
	font-family: 'Patua One', cursive;	
	/*color: rgb(98,14,14);*/
	color: rgb(150,30,30);
	/*color:rgb(204,0,0);*/
	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);*/
	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:740px;
	margin: auto;	
	position:fixed;
	text-align:center;
	z-index:0;
	bottom:0px;
	padding-top:55px;
	background-color:rgba(30, 20, 25, 0.8);
	background:url(../images/30-20-25-08.png) repeat;
}

.footer-space {
	height:740px;
	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;
	margin-bottom:100px;	
}

.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-youtube { background: url(../images/icon_youtube_.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, .icon-youtube a { display: block }
.icon-linkedin a:hover img, .icon-facebook a:hover img, .icon-vimeo a:hover img, .icon-youtube a:hover img { visibility:hidden }