@charset "UTF-8";
/* CSS Document */

html {margin: 0; padding: 0;}
body {margin: 0; padding: 0;}
@media {{min-width:1600px}
a {text-decoration:none; color:black; cursor: pointer;}
a:hover {color:black;}
a:active {color: black;}
a:visited {color:black;}
}
img {max-width: 100%; height: auto;}







/*------boxes------*/
.box_1_third {width: 33%; }
.box_quarter {width: 50%; }

@media (min-width:1024px) {
	.box_main {margin: 0 auto; width: 76%; max-width: 1400px; display: flex; }
	.box_full {width: 100%; padding: 0 20px; }
	.box_half {width: 50%; padding: 0 20px; display: flex; }
	.box_2_third_right {width: 66%; margin-left: 32%;   }
	.box_2_third_left {width: 66%; padding: 0 20px; }
	.mood_pic_big{display: flex}
	.mood_pic_small{display: none}
	.box_project_top { display: flex; padding: 200px 0 140px 0;}
}

@media (min-width:768px) and (max-width:1023px)  {
	.box_main {margin: 0 auto; width: 89%; display: flex; }	
	.box_full {width: 100%; padding: 0 20px; }
	.box_half {width: 50%; padding: 0 20px; display: flex;}
	.box_2_third_right {width: 100%; padding: 0 20px; }
	.box_2_third_left {width: 100%; padding: 0 20px;}
	.mood_pic_big{display: flex}
	.mood_pic_small{display: none}
	.box_project_top { display: flex; padding: 150px 0;}
}

@media (max-width:767px) {
	.box_main {margin: 0 auto; width: 86%; }
	.box_2_third_right {width: 100%; }
	.box_2_third_left {width: 100%; }
	.box_full {width: 100%; }
	.box_half {width: 100%;  }
	.mood_pic_big{display: none}
	.mood_pic_small{display: flex}
	.box_project_top { display: flex; padding: 100px 0;}
}



/*-----spaces-----*/
@media (min-width:1024px) {
	.space_main {height: 150px; }
	.space_medium {height: 90px}
	.space_mini {height: 40px}
	.space_mini_hidden {display: none}
	.space_micro {height: 20px}
}
@media (min-width:768px) and (max-width:1023px)  {
	.space_main {height: 150px;}
	.space_medium {height: 60px}
	.space_mini {height: 40px}
	.space_mini_hidden {height: 40px}
}
@media (max-width:767px) {
	.space_main {height: 70px;}
	.space_medium {height: 40px}
	.space_mini {height: 20px}
	.space_mini_hidden {height: 20px}
}

.project_preview_skoda {height: 80vh; background-image: url("../img/project_skoda/skoda-bg.jpg"); background-position: center;  background-size:cover;}
/*.project_preview_osram {height: 80vh; background-image: url("../img/project_osram/mood_pic.png"); background-position: center;  background-size:100%;}*/
.project_preview_rinspeed_2019 {height: 80vh; background-image: url("../img/project_rinspeed_2019/mood_pic.png"); background-position: center;  background-size:100%;}




.vertical_align {margin: auto 0;}





/*------button-----*/
.bt {border-bottom: 2px black solid; width: fit-content;  color: black; padding: 0 0 10px 0;  font-size:20px; font-family:'Gilroy-Semibold'; transition: all 0.2s ease; cursor: pointer;}
.bt:hover {border-bottom: solid #a755bd 2px; cursor: pointer; color: #a755bd}
.bt:active {border-bottom: solid #a755bd 2px; cursor: pointer; color: #a755bd}





/*----portfolio----*/
@media (min-width:1024px) {
.portfolio_block {margin: 0 auto; width: 74%; max-width: 1400px; display: flex; flex-wrap: wrap; align-items:center; justify-content: space-between; }
.portfolio {width: 47%; }
.portfolio_in_pic {width: 100%; transition: all .2s ease; outline: solid 0 white; outline-offset: 0; }
}
@media (min-width:768px) and (max-width:1023px) {
.portfolio_block {margin: 0 auto; width: 86%; max-width: 1400px; display: flex; flex-wrap: wrap; align-items:center; justify-content: space-between; }
.portfolio {width: 46%;}
.portfolio_in_pic {width: 100%; }
}
@media (max-width:767px) {
.portfolio_block {margin: 0 auto; width: 86%; max-width: 1400px; display: block; }
.portfolio {width: 100%;}
.portfolio_in_pic {width: 100%; }
}
.portfolio_in_pic:hover { outline: solid 8px white; outline-offset: -7px}



#sizer { height: 100%; background-color: #34495e; resize: horizontal; overflow: hidden; // width: 100%; width: 200px; margin: 0 auto; position: relative;
  &::before {
    position: absolute; bottom: 0; left: 0; right: 0; height: 20px; text-align: center; content: "Resize me!"; color: white; background-color: black; text-shadow: 0 0 2px black;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); z-index: 2;}
}

#square { width: 100%; padding-bottom: 100%; position: relative;background-color: #2980b9; }

#circle { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; border-width: 4px; border-color: #27ae60;border-style: solid; border-radius: 50%; }



/*------fonts------*/
/*sup {vertical-align: super; font-size: smaller;} */
@media (min-width:1024px) {
	.text_big {font-size: 80px; font-family:'Gilroy-Semibold'; line-height: 1;}
	.text_project_name {font-size: 60px; font-family:'Gilroy-Medium'; line-height: 1.2;}
	.text_bigger {font-size: 50px; font-family:'Gilroy-Medium';}
}
@media (min-width:768px) and (max-width:1023px) {
	.text_big {font-size: 90px; font-family:'Gilroy-Semibold'; line-height: 1;}
	.text_project_name {font-size: 60px; font-family:'Gilroy-Medium'; line-height: 1.2;}
	.text_bigger {font-size: 40px; font-family:'Gilroy-Medium';}
}
@media (max-width:767px) {
	.text_big {font-size: 30px; font-family:'Gilroy-Semibold'; line-height: 1;}
	.text_project_name {font-size: 50px; font-family:'Gilroy-Medium'; line-height: 1.2;}
	.text_bigger {font-size: 30px; font-family:'Gilroy-Medium'; line-height: 1.5}
}
.text_subname {font-size: 24px; font-family: 'Gilroy-Regular'; margin-bottom: 20px}
.text_body {font-size: 20px; font-family: 'Gilroy-Regular'; line-height: 30px}
.text_body_bold {font-size: 20px; font-family: 'Gilroy-Semibold'; line-height: 30px}
.text_header_4 {font-size: 26px; font-family: 'Gilroy-Medium'; }



/*--------Menu-------*/
@media (min-width:768px) {
.menu {position: fixed; background-color:#fff; height:100px; width:100%;  font-size:16px; z-index:100; margin:auto; color:rgba(31,46,68,1); }
.logo {padding:36px 20px 20px 0; float: left; cursor: pointer;}
.menu_points {float: right; margin: 0 0 0 0; width: auto}
.menu_point { margin: 0 0 0 40px; padding:42px 0 10px 0; float:left; font-family:'Gilroy-Semibold'; transition: all 0.2s ease;  cursor: pointer; } 
.menu_point_active { margin: 0 0 0 40px; padding:42px 0 10px 0; float:left; font-family:'Gilroy-Semibold'; cursor: pointer; color: }
.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:767px) {
.menu { position: fixed; background-color:#fff; height:70px; width:100%; z-index:100; margin:auto; color:rgba(31,46,68,1);  }
.logo {padding:20px 20px 20px 0; 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: 0 0 20px 20px;  z-index: 104; cursor: pointer;}
}
.menu.scrolled {background-color:white; color:rgba(31,46,68,1); }



/*-----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;
     }
 }