@font-face {
	font-family: 'GOTHIC' ;
	/*src: url('../font/GOTHIC.TTF') format('truetype');*/
	src: url('../font/14539.ttf') format('truetype');
	} 
	
@font-face {
	font-family:  "asd";
	src: url('../font/Adventure.ttf') format('truetype');
	} 
	
*{
	margin:0;
	padding:0;
}
body{
	/* background: linear-gradient(to top, #1e1f24 80%, #1e1f249e 30%);background-repeat:no-repeat;*/
	background-color: #1e1f24;
background-image:url(../image/fon1.png);
 
/*background-size:cover;*/
	font-family: GOTHIC;
}
.wriper{
	flex:1;
	display:flex;
	 
	flex-direction:column;
	max-width:100%;
	/*height:100vh;
	background:#00000094;;*/
	
}
.wriper .head{
	display:flex;
	justify-content: space-between;
	flex-direction:column;
	 
}
.wriper .head .top{
	flex:1;
	display:flex;
	 flex-wrap:wrap;
	justify-content: space-between;
	flex-direction:rows;
	
}
.wriper .head .top .logo p{
	 color:#ffffff;
	 
	 padding-left:30px;
	font-size:18px;
	text-align:left;
	
}
.wriper .head .top .logo .cl{
	 color:#ffce14;
	    font-family:asd;
		font-size:30px;
}
.wriper .head .top .phone p{
	 color:#ffffff;
	  padding:10px;
	   padding-right:30px;
	   font-size:18px;
}
.wriper .head .top .phone .cl{
	 color:#ffce14;
	   
}

.wriper .head .menu{
	display:flex;
	
 background:#6b6868;
 max-width:100%;
}
.wriper .head .menu ul{
	display:flex;
 /*flex-direction:rows;*/
 display:none;
}
  @media screen and (min-width: 640px) {
    
	.wriper .head .menu ul{
      /* label скрыт */
	  display:flex;
      /*display: block;*/
    }
   
    
  }
   @media screen and (max-width: 640px) {
 .wriper .head .menu ul li {
    flex: 1;
    display: flex;
    padding: 10px;
    list-style-type: none;
    cursor: pointer;
    /* color: black; */
    text-align: left;
    font-size: 18px;
} 

   }

.wriper .head .menu ul li{
	flex:1;
	display:flex;
	
  padding:10px;
 list-style-type:none;
 cursor:pointer;
}
.wriper .head .menu ul li:hover{
	background:#16171b;
}
.wriper .head .menu ul li a{
	color:#ffffff;
	text-decoration:none;
 width:120px;
}
.wriper .galer{
	display:flex;
	height:325px;
	/* box-shadow: 0px -1px 14px 5px #000000 inset; */
}
.wriper  .lookWork{
	display:flex;
	justify-content: center;
	padding:10px;
}
.wriper .lookWork h1{
	color:#ffffff; 
}
.wriper .center{
	display:flex;
	min-height:400px;
	flex-direction:rows;
	justify-content: center;
	flex-wrap:wrap;
	align-items: flex-start;
}

 @media screen and (max-width: 640px) {
	 
	 .wriper .center{
	display:flex;
	min-height:300px;
	flex-direction:rows;
	justify-content: center;
	flex-wrap:wrap;
padding:10px;
 

}
.wriper .galer{display:none;}
 }
.wriper .center .smolFoto{
	/*flex:1;*/
	cursor:pointer;
	margin-top:20px;
	display:flex;	
	max-width:350px;
	min-width:350px;
	min-height:150px;
	 	padding-left:10px;
	 	padding-right:10px;
	  flex-direction:column;
	

	 
}
.wriper .center .smolFoto a{
	 text-decoration:none;
}
.wriper .center .smolFoto:hover{
	 /* background: #1212125c;
	  border:1px solid #1212125c;*/
	   -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}
.bbot{
	padding-top:50px;
	
}
.wriper .center .smolFoto .ft{
	/* flex:1;*/
	background:#000000;
}
.wriper .center .smolFoto .ftText{
	 flex:1;
	 height:50px;
	 background:#2726268a;
	 
}
.wriper .center .smolFoto .ftText .name{
	/* padding :10px;*/
	 font-size:20px;
	 text-align:left;
	 color:#ffce14;
	 padding-left:10px;
	 
}.wriper .center .smolFoto .ftText .pdr{
	   text-align:left;
	/*  padding :10px;*/
	 font-size:15px;
	 color:#ffffff;
	  padding-left:10px;
}
.wriper .center .smolFoto img{	max-width:100%; max-height:300px;}
.wriper .foot{
	display:flex;
	justify-content: center;
	padding:30px;
}
.wriper .foot a{ 
width:200px;
	display:block;
	padding:10px;
	text-decoration:none;
	color:#000000;
	background:#d6ad17b5; 
}
.wriper .foot a:hover{ 
 
	background:#efefef;
}
/* Menu  */
#menu-checkbox {
  /* чекбокс скрыт */
  display: none;
}
.main-menu {
  /* пункты меню скрыты */
  display: none;
  padding: 0;
  margin: 0;
}
.main-menu li {
  /* пункты меню расположены вертикально */
  /* каждый имеет ширину 100% */
  font-size: 1em;
  display: block;
  width: 100%;
}
.main-menu a {
  /* немного стилизуем ссылки */
  display: block;
 /* border-bottom: 1px solid #ffffff;*/
  color: #ffffff;
  /*padding: .5em;*/
  text-decoration: none;
 /* background:#771a15;*/
}
.main-menu a:hover {
  text-decoration: underline;
}
.toggle-button {
  text-align: center;
  display: block;
  /* не забываем явно указать каким должен быть курсор */
  cursor: pointer;
 /* background-color: #771a15;*/
  color: #fff;
  width:100%;
 
}
.toggle-button:after {
  /* получаем данные из атрибута data-open в html */
  content: attr(data-open);
  display: block;
  margin: 10px 0;
  padding: 10px 30px;
}
#menu-checkbox:checked + nav[role="navigation"] .main-menu {
  /* когда чекбокс активен меню становится видимым */
  display: block;
}
#menu-checkbox:checked + nav[role="navigation"] .toggle-button:after {
  content: attr(data-close);
}
@media screen and (min-width: 640px) {
    .toggle-button,.main-menu {
      /* label скрыт */
      display: none;
    }
    
  }
  @media screen and (max-width: 640px) {
    
	.head .menu {
      /* label скрыт */
      display: none;
    }
    
  }
	/*************************************************/
.ban{
	width:100%;
	
}
.ban img{
	/*width:100%;*/
}
div{
	/*border:1px solid #cccccc;*/
}



.mosaicflow__column {
	float:left;
	 
	}

.mosaicflow__item {
	position:relative;
	z-index:10;
	padding:10px;
	}
	.mosaicflow__item:hover {
	position:relative; 
	z-index:100;
	}
	.mosaicflow__item img {
		display:block;
		width:100%;
		
		/*max-width:500px;*/
		height:auto;
		 box-shadow: 0px 0px 16px 1px #000000;
		}
		.mosaicflow__item img:hover{
		 box-shadow: 0px 0px 5px 10px #000000;
		}
	.mosaicflow__item p {
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		margin:0;
		padding:5px;
		background:hsla(0,0%,0%,.5);
		color:#fff;
		font-size:14px;
		text-shadow:1px 1px 1px hsla(0,0%,0%,.75);
		opacity:0;
		-webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		   -moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		     -o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		        transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		}
	.mosaicflow__item:hover p {
		opacity:1;
		}
#wrap{
	width:90%;
	height:100vh;
}
.cont{
	max-width:90%;
	padding:20px;
	font-size:18px;
}
.cont p{
	text-align:justify;
	color:#ffffff;
}
.onas{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.onas p{
	padding: 20px;
	font-size: 25px;

}
.divVideo{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.divVideo video{
	margin: 10px;
}