@charset "utf-8";
/* CSS Document */
html
{
	height:100%;
	width:100%;
}

body {
height:100%;
width: 100%;
padding:0px;
margin:0px;
}

.big {	
height:620px;
width:1220px;
margin:-290px 0 0 -610px;
top:50%;
left:50%;
position:absolute;
display:block;
background-color:#af1b1b;
}

.big_red{
height: 500px;
width:100%;
background-color:#af1b1b;
color:#fff; /* цвет текста */
font-family:'Montserrat', sans-serif;
font-weight: 700;
padding:0px;
}

.big_white{
height: 500px;
width:100%;
background-color:#FFF;
}


/*anim*/
.image.first,.image.second {
border:0px solid transparent;
margin:0;
padding:0;
}

.image.first {
opacity:0px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.2s;
-webkit-transition-duration:0.2s;
-moz-transition-duration:0.2s;
-o-transition-duration:0.2s;
-ms-transition-duration:0.2s;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}

.menu{
height:60px;
width:50%;
margin:0px;
background-color: rgba(0, 0, 0, 0.2);
display:compact;
z-index:130;
position:absolute;
}

.menu_pic{
	padding: 20px 10px 10px 100px;
	float:left;
}


a.menu_point
{
	color:#903; /* цвет текста */
	font-family:'Montserrat', sans-serif;
	font-weight: 700;
	float:left;
	font-size:18px;
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
    /* фон кнопки */
  padding: 20px 10px 10px 20px;
  outline: none; /* убирать контур в Mozilla */
}
a.menu_point:hover { color:#03C; } /* при наведении курсора мышки */
a.menu_point:active { color:#0F3; } /* при нажатии */


/*why*/
.big_left{
	width:50%;
	height:100%;
	background-color:#831baf; 
	float:left;
	padding:0px;
}

.big_right{
	float:left;
	width:50%;
	height:100%;
	background-color:#73119c;
	z-index:8;
}	

.why_text{
	color:#fff;
	font-family:'Montserrat', sans-serif;
	font-weight: 700;
	margin: 100px;
	font-size:14px;
}

.big_fiol {	
	height:600px;
	width:400px;
	margin:-300px 0 0 -200px;
	top:55%;
	left:25%;
	position:absolute;
	display:block;
	background-color:#831baf;
}

/*video bg*/
.is_overlay{ display: block; width: 50%; height: 100%; }

#trailer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}

#trailer > video {
position: absolute;
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;
     }
 }
 
@media (max-aspect-ratio: 15/19){
	/*why*/
	.big_left{
		width:100%;
		height:50%;
		background-color:#090; 
		float:left;
		padding:0px;
	}
	
	.big_right{
		float:left;
		width:100%;
		height:50%;
		background-color:#00C;
		z-index:8;
	}
	
	.is_overlay{ display: block; width: 100%; height: 50%; }
	
	
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
	.why_text{
	color:#F00;
	font-family:'Montserrat', sans-serif;
	font-weight: 700;
	font-size:36px;
	margin: 100px;
	}
}