@charset "UTF-8";
@import url("animate.css");
/* CSS Document */
html {width:100%; height:auto;}
body {width:100%; height:auto; padding:0px; margin:0px; background-color:#E5E6EB; font-family:Helvetica, Arial,  sans-serif }
a {text-decoration:none; color:rgba(31,46,68,1); cursor: pointer;}
a:hover {color:rgba(31,46,68,1);}
a:active {color:rgba(31,46,68,1);}
a:visited {color:rgba(31,46,68,1);}

.content_body {max-width:1600px; width:100%; height: auto; margin:auto; background-color:#fff; }
.main_content {height:auto; width:auto; padding: 0 7% 0 7%;  margin:auto;  overflow:hidden; clear:both; position:relative;}

@media (min-width:870px) {
.main_content_half {width: 50%; float: left; display: inline-block; }
}

@media (max-width:870px) {
.main_content_half {width: 100%;}
}








/*---------texts----------*/
.text_bigger { font-family:'Gilroy-Light'; line-height: 1.5; font-size:20px; color: rgba(31,46,68,1); text-align:left;}
.text_subtl_italic {font-size:18px; font-family:'Baskerville-Italic'; line-height: 1.6;  text-align:left;}
.text_huge {font-size:100px; padding: 180px 0 0 0; color: rgba(31,46,68,1); font-family:'Gilroy-Black'; line-height: 0.9; text-align:left; float: left;  text-transform: uppercase; display: inline-block}
.text_descr_bold {font-size:28px; padding: 30px 0 0 0; font-family:'Gilroy-Bold'; line-height: 1.3; text-align:left; }
.text_descr_bold_link { border-bottom: solid rgba(185,113,209,1.00) 2px; cursor: pointer;}
.text_descr_bold_link:hover { color:limegreen; border-bottom: solid limegreen 2px; cursor: pointer;}
.text_brand_name{ font-size:20px;font-family:'Gilroy-Bold'; line-height: 1; text-align:left;} 


.text_color_black {color: rgba(31,46,68,1);}
.text_color_purple {color: rgba(185,113,209,1);}





/*-------anim------*/
.later_load_12 { animation: later_load-animation 1.2s ease forwards; }
		@keyframes later_load-animation {
			0% { opacity: 0}
			50% { opacity: 0}
			100% { opacity: 1 }
		}











/*--------Menu-------*/
@media (min-width:700px) {
.menu {position: fixed; background-color:#fff; height:100px; width:100%; max-width:1600px; font-size:16px; z-index:100; margin:auto; color:rgba(31,46,68,1); }
.logo {padding:36px 20px 20px 7%; float: left; cursor: pointer;}
.menu_points {float: right; margin: 0 7.1% 0 0; width: auto}
.menu_point { margin: 0 0 0 40px; padding:42px 0 10px 0; float:left; font-family:'Gilroy-Light'; transition: all 0.2s ease; border-bottom: solid #fff 1px; cursor: pointer; } 
.menu_point_active {border-bottom: solid rgba(31,46,68,1) 1px;}
.menu_point:hover {border-bottom: solid rgba(31,46,68,1) 1px; color:rgba(31,46,68,1);}
.menu_point:active {border-bottom: solid rgba(31,46,68,1) 1px;color:rgba(31,46,68,1);}
.menu_point:visited {border-bottom: solid rgba(31,46,68,1) 1px;color:rgba(31,46,68,1);}
.e-mail {padding:42px 7% 20px 20px; float:right; font-family:'Gilroy-Light'; }
#trigger-overlay {display:none}
}

@media (max-width:700px) {
.menu { position: fixed; background-color:#fff; height:80px; width:100%; z-index:100; margin:auto; color:rgba(31,46,68,1);  }
.logo {padding:26px 20px 20px 7%; font-family:'Gilroy-Semibold'; float:left; font-size:20px;}
.menu_point { display:none} 
.menu_point_active {display:none}
.menu_point:hover {display:none}
.menu_point:active {display:none}
.menu_point:visited {display:none}
.e-mail {display:none }
#trigger-overlay {display:block; float: right; padding: 22px 7% 20px 20px;  z-index: 104; cursor: pointer;}
}

.menu.scrolled {background-color:white; color:rgba(31,46,68,1); }





/*-----Big screen joke----*/


@media (min-width:2170px) {
	.big_screen_joke {padding-left: 30px; padding-top: 10px; position: fixed; font-size:30px; color: rgba(199,208,211,1.00);  font-family:'Gilroy-Semibold';  }
	.big_screen_joke { animation: big_screen_joke-animation .6s ease forwards; animation-delay:0s;}
		@keyframes big_screen_joke-animation {
			0% { color: rgba(199,208,211,0.00); padding-top: 10px; }
			100% { color: rgba(199,208,211,1.00); padding-top: 40px;  }
		} 
}
	
@media (max-width:2170px) {
	.big_screen_joke {display: none;}	
}






/*-----Button------*/
.bt { width: 100px; color:rgba(31,46,68,1); padding:0px 4px 10px 4px; margin:auto; text-align: center; font-size:20px; font-family:'Gilroy-Semibold'; transition: all 0.2s ease; border-bottom: solid rgba(255,255,255,1) 2px; cursor: pointer;}
.bt:hover {border-bottom: solid rgba(31,46,68,1) 2px; cursor: pointer;}
.bt:active {border-bottom: solid rgba(31,46,68,1) 2px; cursor: pointer;}




/*-----Home----
.home_top_bg {background-image:url(../img/home/top_bg.jpg); background-position: right; background-size: 80%; background-repeat: no-repeat;}
.home_top {height:95vh; }


.home_banner {width: 49%; height: auto; float: left; transition: all .3s ease; color: rgba(31,46,68,1); cursor: pointer; background-image: url(../img/eschool/big_top_bg.jpg)}

.home_project_name_bg {background-color: cadetblue; margin: 400px 20px 20px 20px;}
.home_project_name_bg:hover {background-color: cadetblue; }
.home_project_name {font-size:22px;  padding: 20px 0px 0px 0px; font-family:'Gilroy-Semibold';  text-align:left;}
.home_project_subname { font-size:16px;  padding: 10px 0px 80px 0px; font-family:'Gilroy-Light'; text-align:left;}*/




/*--------Main page---------*/
@media (min-width: 870px) {
.main_page_top {height:400px; }
	.main_page_top { animation: main_page_top-animation .8s ease forwards; animation-delay:0s;}
		@keyframes main_page_top-animation {
			0% { height:300px }
			100% { height:550px }
		} 
.italic_padding { padding: 180px 0 0 0;}
}


@media (max-width: 870px) {
.main_page_top {height:400px; }
	.main_page_top { animation: main_page_top-animation .8s ease forwards; animation-delay:0s;}
		@keyframes main_page_top-animation {
			0% { height:300px }
			100% { height:800px }
		} 
.italic_padding {padding: 420px 0 0 0;}
}






@media (min-width: 870px) {
.main_top_descr_block {width: 49%; float: right}
}
@media (max-width: 870px) {
.main_top_descr_block {width: 100%; display: block}
}



/*.main_skills {width: 10%; margin: auto; font-family:'Gilroy-Light'; font-size: 16px; display: inline-block; height: 40px; padding: 0px 10px 0px 10px; transition: all 0.3s ease; border-bottom: solid #fff 1px;}
.main_skills:hover {border-bottom: solid rgba(75,199,139,1) 1px;}
.main_skills_active {border-bottom: solid rgba(75,199,139,1) 1px;}
.main_skills_all { width: 100%;    margin: 80px auto 20px auto;  display:block; text-align: center; padding: 10px 0px 30px 0px;}  */

.main_project_preview_left:hover {  opacity: .9; cursor: pointer;}
.main_project_preview_right:hover {  opacity: .9;cursor: pointer;}

@media (min-width: 870px) {
	.main_project_preview_left {width: 49%; height: auto; float: left; transition: all .3s ease; cursor: pointer; }
	.main_project_preview_right {width: 49%; height: auto; float: right;transition: all .3s ease; cursor: pointer;}
}

@media (max-width: 870px) {
	.main_project_preview_left {width: 100%; height: 30%; margin: auto; transition: all .3s ease; cursor: pointer;}
	.main_project_preview_right {width: 100%; height: 30%; margin: auto; transition: all .3s ease; cursor: pointer; padding-top: 2vw}
}

/* backgrounds for projects*/
.main_pic_ringtonium {background: url(../img/Ringtonium/main_preview.jpg);  }
.main_pic_vrec {background: url(../img/vrec/main_preview.jpg); }
.main_pic_rbt {background: url(../img/rbt/main_preview.jpg); }
.main_pic_skoda {background: url(../img/Skoda/main_preview.jpg);  }
.main_pic_liver {background: url(../img/Liver/main_preview.jpg); }
.main_pic_vqr {background: url(../img/vqr/main_preview.jpg); }
.main_pic_schoolos {background: url(../img/schoolos/main_preview.jpg); }
.main_pic_cards {background:url(../img/cards/main_preview.jpg) }
.main_pic_wallet {background:url(../img/wallet/main_preview.jpg) }
.main_pic_eschool {background:url(../img/eschool/main_preview.jpg) }
.main_pic_walls {background:url(../img/walls/main_preview.jpg) }


/*project names*/
.main_project_name {font-size:22px;  padding: 20px 0px 0px 0px; font-family:'Gilroy-Semibold';  text-align:left; color: rgba(31,46,68,1);}
.main_project_subname { font-size:16px;  padding: 10px 0px 80px 0px; font-family:'Gilroy-Light'; text-align:left; color: rgba(181,185,189,1.00);}




/*picture sizes*/
@media (min-width: 870px) {
	.main_project_preview_pic {width: 100%; height: auto;  background-repeat:no-repeat; border-collapse: separate; background-position: center; background-size: 100%; transition: all .3s ease; cursor: pointer;}
	.main_project_preview_pic:hover { background-size: 105%;cursor: pointer; }
}

@media (max-width: 870px) {
	.main_project_preview_pic {width: 100%; background-repeat:no-repeat; background-position: center; background-size: 100%; transition: all .3s ease; cursor: pointer;}
	.main_project_preview_pic:hover { background-size: 105%;cursor: pointer; }
}












/*------About----*/
@media (min-width:870px) {
	.portrait { width: 90%; display: inline-block; margin: auto; }	
	.brand_name_block { width: 250px;  display: inline-block; padding: 40px 0 0 0; margin: 0 90px 0 0; } 		
}

@media (max-width:870px) {
	.portrait { width: 100%; display: inline-block; margin: auto; }	
	.brand_name_block { width: 200px;  margin: 0 90px 0 0;  display: inline-block; padding: 30px 0 0 0; } 
	
}

.clients_block { display: inline-block; }

.text_about_title_italic {font-size:18px; padding: 180px 0 0 0; font-family:'Baskerville-Italic'; line-height: 0.9;  text-align:left;}

.logos {margin:100px auto 100px auto; text-align: justify}
.logo_clients {width: 190px; display: inline-block; float: left;}
.logos:after {  display: inline-block;  content: "";  width: 100%;}


@media (min-width:870px) {
	.portrait { width: 90%; display: inline-block; margin: auto; }	
	.brand_name_block { width: 250px;  display: inline-block; padding: 40px 0 0 0; margin: 0 90px 0 0; } 		
}

@media (max-width:870px) {
	.portrait { width: 100%; display: inline-block; margin: auto; }	
	.brand_name_block { width: 200px;  margin: 0 90px 0 0;  display: inline-block; padding: 30px 0 0 0; } 
	
}













/*-------contacts-------*/
.contacts_content {margin: 20%auto; width: 30%; }
.contacts_text {font-size:18px; font-family:'Gilroy-Regular'; line-height: 1; text-align:left;} }
.contacts_email {font-size:22px; font-family:'Gilroy-Bold'; line-height: 1; text-align:left; } 



















/* -------Project page---------*/


.project_top {height:400px; }
	.project_top { animation: project_top-animation .8s ease forwards; animation-delay:0s;}
		@keyframes project_top-animation {
			0% { height:200px }
			100% { height:450px }
		} 

@media (min-width:700px) {
.project_page_name { font-size:50px; color: rgba(31,46,68,0); padding: 200px 7.1% 0px 7.1%; font-family:'Gilroy-Bold'; text-align:left; width: 80%; max-width: 900px; }
	.project_page_name { animation: project_page_name-animation .6s ease forwards; animation-delay:.6s;}
		@keyframes project_page_name-animation {
			0% { color: rgba(31,46,68,0);}
			100% { color: rgba(31,46,68,1); }
		}  
}

@media (max-width:700px) {
.project_page_name { font-size:40px; color: rgba(31,46,68,0); padding: 160px 7.1% 0px 7.1%; font-family:'Gilroy-Semibold';  text-align:left; width: 80%; max-width: 900px; }
	.project_page_name { animation: project_page_name-animation .6s ease forwards; animation-delay:.6s;}
		@keyframes project_page_name-animation {
			0% { color: rgba(31,46,68,0);}
			100% { color: rgba(31,46,68,1); }
		}  
}

@media (min-width:700px) {
.project_page_subname { font-size:40px; color: rgba(178,180,188,0); padding: 0px 7.1% 0px 7.1%; font-family:'Gilroy-Light';  text-align:left; width: 80%; max-width: 900px; }
	.project_page_subname { animation: project_page_subname-animation .6s ease forwards; animation-delay:.6s;}
		@keyframes project_page_subname-animation {
			0% { color: rgba(178,180,188,0);}
			100% { color: rgba(178,180,188,.8); }
		}  
}

@media (max-width:700px) {
.project_page_subname { font-size:32px; color: rgba(178,180,188,0); padding: 0px 7.1% 0px 7.1%; font-family:'Gilroy-Light';  text-align:left; width: 80%; max-width: 900px; }
	.project_page_subname { animation: project_page_subname-animation .6s ease forwards; animation-delay:.6s;}
		@keyframes project_page_subname-animation {
			0% { color: rgba(178,180,188,0);}
			100% { color: rgba(178,180,188,.8); }
		}  
}
			

/*-------Responsibilities----*/

@media (min-width:870px) {
.project_page_responsibilities_all { max-width:760px; width:70%; margin:auto; padding: 0 0 60px 0; }	
.project_page_responsibilities_block {display: inline-block; width: 30%; margin: 0 0 0 0; vertical-align: top}
.project_page_responsibilities_name {  font-family:'Gilroy-Semibold'; color: rgba(31,46,68,1); font-size: 16px; padding: 0 0 10px 0;    }
.project_page_responsibilities_text {  font-family:'Gilroy-Light'; color: rgba(31,46,68,1); font-size: 16px;  }
}

@media (max-width:870px) {
.project_page_responsibilities_all {  width:85%; margin:auto; padding: 0 0 60px 0;}	
	.project_page_responsibilities_block {display: inline-block; width: 190px; margin: 0 0 0 0;}
.project_page_responsibilities_name {  font-family:'Gilroy-Semibold'; color: rgba(31,46,68,1); font-size: 16px; display: block; padding: 40px 0 10px 0;   white-space: nowrap; }
.project_page_responsibilities_text {  font-family:'Gilroy-Light'; color: rgba(31,46,68,1); font-size: 16px; display: block;  white-space: nowrap; }
}

	
.project_top_banner { background-repeat:no-repeat; background-size:cover; background-position: center; }


.project_text_line { max-width:760px; width:70%; height: 1px; margin:auto; background-color: #C3C3C3; margin: 40px auto 40px auto; display: block;}
.project_project_line { width:86%; height: 1px; margin:auto; background-color: #C3C3C3; margin: 40px auto 40px auto; display: block;}


@media (min-width: 870px) {	
.text_760 { max-width:760px; width:70%;  margin:auto; padding: 100px 0px 100px 0px; }
.img_content {width: 86%; height: auto;}
.img_content_phone_alone {display:none}
	
.project_page_bigger_text { max-width:760px; width:70%; margin:auto; padding: 100px 0px 100px 0px; }
	
.project_preview_left {width: 49%; height: auto; float: left; transition: all .3s ease; cursor: pointer; }	
.project_preview_right {width: 49%; height: auto; float: right;transition: all .3s ease; cursor: pointer;}	
.project_2_pic_left {width: 49%; float: left; height: 40vw; max-height: 400px; background-position: center; min-width: 263px; background-size: cover; }
.project_2_pic_right {width: 49%; float: right; height: 40vw; max-height: 400px; background-position: center; min-width: 263px; background-size: cover; }
	
.project_pic_full_width { width: 100%; float: left; height: 40vw; max-height: 400px; background-position: center; min-width: 263px; background-size: cover; margin-top: 2vw;}
}

@media (max-width: 870px) {	
.text_760 { margin:auto; padding: 50px 0px 50px 0px;}
.img_content {display:none}
.img_content_phone_alone {width: 86%; height: auto; }
	
.project_page_bigger_text {  width:85%; margin:auto; padding: 80px 0px 80px 0px; }
	
.project_preview_left {width: 100%; height: 30%; margin: auto; transition: all .3s ease; cursor: pointer; }	
.project_preview_right {width: 100%; height: 30%; margin: auto; transition: all .3s ease; cursor: pointer; padding-top: 2vw}
.project_2_pic_left {width: 100%; float: left; height: 50vw; max-height: 400px; background-position: center; background-size: cover; margin-top: 2vw;}
.project_2_pic_right {width: 100%; float: left; height: 50vw; max-height: 400px; background-position: center; background-size: cover; margin-top: 2vw; }
	
.project_pic_full_width { width: 100%; float: left; height: 50vw; max-height: 400px; background-position: center; background-size: cover; background-size: 170%; margin-top: 2vw;}
}

	
/*Next project */
.next_project_preview { width:86%; height: auto; margin:0px auto 0 auto; display: block;  background-repeat: no-repeat; background-position: center;  background-size: auto 100%; background-color: #000; opacity: 1; color: #fff; cursor: pointer; transition: .6s;}
.next_project_preview:hover { opacity: .9; background-size:auto  110%; }
.next_project_name { font-size:44px;  padding: 10px 7.1% 100px 7.1%; font-family:'Gilroy-Semibold';  text-align:center; }
.next_project_subname { font-size:20px; padding: 100px 7.1% 10px 7.1%; font-family:'Gilroy-Light'; text-align:center; } 




/*-----Video-----*/ 
 .is_overlay{ display: block;  }
#trailer {
	position:relative;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden; 
}

#trailer > video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-aspect-ratio: 16/9) {
     #trailer > video { height: 300%; top: -100%; }
 }
 @media (max-aspect-ratio: 16/9) {
     #trailer > video { width: 300%; left: -100%; }
 }
 /* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
 @supports (object-fit: cover) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: cover;
     }
 }