html, body{
margin:0;
padding:0;
width:100%;
height:100%;
background-color:#fff;
font-family:helvetica, helvetica neue, arial; 
font-weight:100;    
}
.wrapper{
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
background-color:#fff;

display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
}
header{
position: fixed;
top:0;
left:0;
z-index:100;
background:inherit;
background-color:rgba(255, 255, 255, 1.0);
margin:0;
padding:0;
width:100%;
height:10%;

display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
.head{
margin:0;
padding:0;
width:60%;
height:100%;
background-color:rgba(255, 255, 255, 0.0);
display:flex;

flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
h1{
margin:0;
padding:0;
font-size:1.4em;
font-weight:100; 
color:#000;
}
h1 a{ 
font-size:1.0em;
color:#fff;
}
h1 span{
margin:0;
padding:0;
font-size:1.9em;
font-weight:normal;
font-family:mistral;
color:brown;
}
nav{
margin:0% 0 0 0;
padding:0;
width:65%;
height:100%;
background-color:rgba(255, 255, 255, 0.5);
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-content:center;

}
nav ul{
margin:1.5% 0 0 0;
padding:0;
width:100%;
background-color:rgba(255, 255, 255, 0.5);
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-content:flex-end;
}
 a{
text-decoration:none;
font-size:0.8em;
font-family: helvetica;   
color:#000;
}
a:hover{
color:brown;
}
.plashka{
position:fixed;
top:10%;
left:0;
width:100%;
height:4%;
z-index:5;
background-color:rgba(0, 0, 0, 0.0);
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
align-items:center;
border:1px solid black;
border-radius:0px;
box-sizing:border-box;
}
.plashka a{
margin-left:5%;
text-decoration:none;
font-size:0.8em;
font-family: helvetica;   
color:#fff;

}
.button_1{

border:1px solid black;
border-radius:5px;
box-sizing:border-box;
padding:10px 15px 10px 15px;
margin-top:0px;
background:rgba(0, 0, 0, 0);
}


.box{
position:fixed;
top:10%;
left:0;
overflow: hidden;
margin:0;
padding:0;
width:100%;
height:80%;
background:rgba(255, 255, 255, 0.0);
border:0px solid black;
box-sizing:border-box;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:space-between;
}
.slide{
position:fixed;
top:10%;
left:0;
overflow: hidden;
background-color:#fff;
width:100%;
height:80%;
border:0px solid black;
opacity:0;
-webkit-transition: opacity 10s;
    -moz-transition: opacity 10s;
    -o-transition: opacity 10s;
    transition: opacity 10s;
}
.showing {
    opacity: 1;
    z-index: 2;
	width:100%;
}
 .zaglushka{
position:fixed;
top:10%;
left:0;
overflow: hidden;
width:100%;
height:80%;
background:linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3), rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.0), 
rgba(0,0,0,0.0), rgba(0,0,0,0.0), rgba(0,0,0,0.3), rgba(0,0,0,0.8));
border:0px solid black;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
align-items:center;
z-index:5;
}
.zaglushka p{
margin:0;
padding:0%;
color:#fff;
font-size:2.9em;
font-family:impact;
z-index:5;
}
.yakor {
position:fixed;
bottom:0%;
left:0%;
width:100%;
height:10%;
border:0px solid black;
background:rgba(0, 0, 0, 0.0);
text-align:center;
padding:0 0 0% 0;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
z-index:5;
}
.yakor img{
width: 70%;
z-index:6;
}
.box_2{
position:absolute;
top:100%;
left:0;
margin:0;
padding:0;
width:100%;
height:auto;
background-color:#fff;
z-index:20;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
.line{
position:relative;
width:100%;
height:20%;
z-index:200;
margin:0.4% 0 0.4% 0;
padding:0% 0 0% 0;
background-color:#fff;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
.line h2{
margin:1.5% 0 1.5% 0;
padding:0;
font-size:1.3em; 
font-family:helvetica, helvetica neue, arial;
font-weight:100;
}
.row_1{
width:75%;
height:auto;
margin:0;
padding:0px;
background-color:#fff;
display:flex;
flex-direction:row;
    flex-wrap: wrap;
justify-content:space-between;
align-items:space-between;
}
.pict_0{
position:relative;
 width:24.6%;
 height:auto;
 margin:0px; 
border:0px solid black;    
 border-radius:5px;  
}
.pict_0 img{   
width:100%;
 border-radius:5px; 
}
.pict_0 span{
    opacity:1.0;
}

.pict_0:hover span{
    opacity:0.8;
}
.text_0{
 position:absolute;
 width:100%;
 height:100%;
top:-1%;
left:0%; 
background-color:#fff;
background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.5) 80%);
border-radius:5px;

}
.text_0 p{
color:#fff;
margin:0;
padding-top:90%;
padding-left:5%;
padding-right:10%; 
}
.pict_1{
position:relative;
 width:24.6%;
 margin:0px; 
border:0px solid black;    
 border-radius:5px;  
   
}


.pict_1 img{   
width:100%;
border-radius:5px;
opacity:1.0;
}
.pict_1 span{
    opacity:1.0;
}
.pict_1:hover span{
    opacity:0.8;
}
.pict_1 span{
    opacity:1.0;
}
.pict_1:hover span{
    opacity:0.8;
}
.text_1{
 position:absolute;
 width:100%;
 height:100%;
top:-1%;
left:0%; 
background-color:#dcdcdc;
background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.5) 80%);
border-radius:5px;

}
.text_1 p{
color:#fff;
margin:0;
padding-top:85%;
padding-left:10%;
padding-right:10%; 
}
.text_1 a p{ 
display:block;
width:80%;
   height:25%; 
opacity:1.0;
color:#fff;
}
.text_1 a p:hover{
color:#fff;
opacity:1.0;
}
.row_line{
background-color:fff;
margin-top:0%;
width:100%;
display:flex;
flex-direction:row;
    flex-wrap: wrap;
justify-content:center;
align-items:center;
}
.button{

border:1px solid black;
border-radius:5px;
box-sizing:border-box;
padding:10px 15px 10px 15px;
margin:1% 0 1% 0;
background:rgba(0, 0, 0, 0);
}

.button h2{
margin:0;
padding:0;
font-size:1.2em; 
}
.button h2 a{ 
font-size:0.9em;
font-family:helvetica, helvetica neue, arial; 
font-weight:100;    
color:#000;
}
.button h2 a:hover{
color:brown;
}
.row_2{
width:75%;
height:600px;
margin-bottom:50px;
padding:0px;
background-color:#fff
}
.pict_2{
width:24.6%;
position:relative; 
border-radius:5px;
border:0px solid black;
box-sizing:border-box;
}
.pict_2 img{
width:100%;

border-radius:5px;
}
.pict_2 .text_2{
 position:absolute;
 width:100%;
 height:100%;
top:-1%;
left:0%; 
background-color:#dcdcdc;
background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.5) 80%);
border-radius:5px; 
    opacity:0;
}
.pict_2 .text_2:hover{
    opacity:1.0;
}

.pict_2 .text_2 p{
color:#fff;
margin:0;
padding-top:55%;
padding-left:10%;
padding-right:10%; 
}
.text_2 a p{ 
display:block;
width:80%;
   height:25%; 
opacity:0;
color:#fff;
}
.text_2 a p:hover{
color:#fff;
opacity:1.0;
}

footer{
margin:7% 0 3% 0;
width:100%;
height:auto;
background-color:#fff;
border-top:0px solid black;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
footer p{
font-size:1.0em;
margin:0;
padding:0;
}
footer h1{
  color:#000;  
}




@media all and (max-width:1000px){
nav{

margin:0% 0 0 0;
padding:0;

display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-end;
align-content:center;



margin:0;
padding:0;
width:50%;
}


nav ul{
display:none;

}
.pict_0{
width:49.5%;
}
.pict_1{
width:49.5%;
}
.line hr {

	width:30%;
   }
.pict_2{
width:49.5%;
}


}
@media all and (max-width:700px) {
nav{
margin:0;
padding:0;
width:55%;
}
.head{
margin:0;
padding:0;
width:90%;
height:100%;

}
.line{
width:90%;
}
.pict_0{
width:100%;
}

.pict_1{
width:100%;
}
.line hr {

	width:30%;
   }
.pict_2{
width:100%;
}


}
@media all and (max-width:500px) {
.head{
margin:0;
padding:0;
width:90%;
height:100%;

}
.line hr {

	width:0;
   }

nav{
margin:0;
padding:0;
width:24%;
}
.line{
width:43%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}

}