/* ======================================= Шрифты ================================================= */
@font-face {
      font-family:"Epilogue";
      src: url("../fonts/Epilogue-Regular.ttf");
}
/* ======================================= Обнуление ================================================= */
* { 
	box-sizing: border-box;
    padding: 0; 
    margin: 0;  
  } 
fieldset, img, abbr { 
    border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
ul { 
  list-style: none; 
  } 
caption, th { 
  text-align: left; 
  } 
h1, h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  }
/* ======================================= Основные стили ================================================= */
body{
    font-family:'Epilogue', Helvetica, sans-serif;
    font-size:17px;  
    color:#242323; 
    background-color:#ffffff;
}
a{
    color:#009379; 
}
a:hover{             
    text-decoration: underline;
}
p{
    line-height:27px; 
}
h1{
    font-size: 100px;
    line-height: 103px;
}
h2{
    font-size: 50px; 
    line-height: 60px;  
    margin: 2px 0 25px 0;  
	font-weight: bold;
	text-transform: uppercase;	
}
h3{
    font-size:30px;
    margin: 2px 0 10px 0;
    line-height:43px; 
}
h4{
    font-size:20px;
    line-height:30px;  
	margin: 2px 0 10px 0;
}
img{
	width:100%;
}
/* ======================БИБЛИОТЕКА========================== */
.width_1080{
    width: 1080px;
    margin: 0 auto; 
}
.width_100{
	width:100%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_80{
	width:80%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_60{
	width:60%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_50{
	width:50%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_40{
	width:40%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_33{
	width:33.33333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_30{
	width:30%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_25{
	width:25%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_20{
	width:20%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_16{
	width:16.333333%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_8{
	width:8.666666%;
	padding:0 12px;
	box-sizing:border-box;
}
.d_flex{
	display:flex;
	flex-wrap:wrap;
}
.d_nflex{
	display:flex;
	flex-wrap:nowrap;
	margin-bottom: 30px;
	align-items: start;
}
.d_flex_between{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.d_flex_between_center{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
.d_flex_around{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items: center;
}
.d_none{
	display:none;
}
/*=====================================СТИЛИ ГЛАВНОЙ==========================*/
header{
	padding: 20px 40px;
	background: #FF6250;
	display: flex;
    justify-content: space-between;
    align-items: center;
}
header img{
	width: 199px;
	height: 40px;
}
header nav ul {
    display: flex;
}
header nav a {
    color: #ffffff;
    margin-left: 75px;
}
#preview{
	padding: 110px 0px;
}
#preview .width_40{
	justify-content: space-between;
}
}
#brendy{
	padding: 40px 0;
}
#brendy img{
	width: auto;
}
#brendy socseti_brendy{
	display: flex;
	justify-content: center;
	align-items: center;
}
#design{
	padding: 80px 30px;
	background: #009379;
	margin-top: 30px;
}
#design img{
	margin-bottom: 40px;
	width: 40%;
}
#design .width_30{
	padding: 60px 15px;
	background: #FFFFFF;
	border-radius: 10px;
	text-align: center;
}
#design .width_30 h3{
	font-size: 30px;
}
#kartinki{
	padding: 40px 0;
}
#kartinki img{
	padding: 30px 0;
}
#kartinki h2{
	width: 100%;
	text-align: center;
	font-size: 35px;
}
#clients{
	background: #FF6250;
	padding: 120px 30px;
}
#clients .width_30{
	background: #F3F3F3;
	padding: 30px 20px;
}
#clients .width_30 img{
	width: 50px;
	margin-right: 20px;
}
#clients .width_30 h4{
	margin-bottom: 150px;
}
#clients h2{
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-size: 35px;
}
#clients .zeleniy{
	color: #009379;
}
#contacts{
	padding: 50px 0;
}
#contacts .width_30{
    justify-content: space-between;
}
}
#contacts .socseti_contacts{
	font-size: 30px;
	margin-top: 30px;
}
#contacts input[type='text']{
	background-color: #F3F3F3;
	width: 100%; 
	padding: 20px 22px;
	font-size: 20px;
	margin-bottom: 15px;
	border: none;
}
#contacts input[type='email']{
	background-color: #F3F3F3;
	width: 100%; 
	padding: 20px 22px;
	font-size: 20px;
	margin-bottom: 15px;
	border: none;
}
#contacts textarea[name='text_comment']{
	background-color: #F3F3F3;
	width: 100%; 
	height: 215px;
	font-size: 20px;
	padding: 20px 22px;
	border: none;
}
.submit{
	padding: 20px 50px;
	display: inline-block;
	background: #009379;
	border: 3px solid #009379;
	color: #FFFFFF;
	font-size: 20px;
	margin-top: 20px;
}
.submit:hover{
	background: #006654;
	color: #D1D1D1;
	border: 3px solid #006654;
	cursor: pointer;
}
footer{
	padding: 20px 0;
	background: #070707;
	text-align: center;
	color: #FFFFFF;
}
/* ===============MOBILE MENU=================== */
.wrapper{
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: 100%;
  background: #000;
  transition: all 0.6s ease-in-out;
}
#active:checked ~ .wrapper{
  /*left: 0;*/
  right:0;
}
.menu-btn{
  position: absolute;
  z-index: 2;
  right: 20px;
  /*left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid #000;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before{
  transform: translateY(-8px);
}
.menu-btn:after{
  transform: translateY(8px);
}


.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}

/* closing animation */
#active:checked + .menu-btn span {
	transform: scaleX(0);
}
#active:checked + .menu-btn:before {
	transform: rotate(45deg);
  border-color: #fff;
}
#active:checked + .menu-btn:after {
	transform: rotate(-45deg);
  border-color: #fff;
}
.wrapper ul{
  position: absolute;
  top: 60%;
  left: 50%;
  height: 90%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  height: 10%;
  margin: 15px 0;
}
.wrapper ul li a{
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  border-radius: 50px;
  position: absolute;
  line-height: 50px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* .wrapper ul li a:after{
  position: absolute;
  content: "";
  background: #fff;
   /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
  /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
} */
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #1a73e8;
}
input[type="checkbox"]{
  display: none;
}

#active:checked ~ .wrapper ul li a{
  opacity: 1;
}
.wrapper ul li a{
  transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateX(100px);
}
#active:checked ~ .wrapper ul li a{
	transform: none;
	transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
   transition-delay: .6s;
  transform: translateX(-100px);
}
/* ================================ВТОРАЯ СТРАНИЦА======================= */
#preview_about{
	background: #433B3B;
	color: #fff;
}
#preview_about .width_40{
	text-align: center;
	margin-top: ;
}
#preview_about .width_40 h2{
	margin-top: 20%;
}
.d_flex {
    justify-content: space-between;
}
#design_about .width_30{
	background: #009379;
	color: #fff;
	margin-top: 140px;
	border-radius: 10px;
	padding: 70px 20px;
	text-align: center;
}
#design_about .width_30 img{
	width: 50%;
	margin-bottom: 60px;
}
#contacts{
	margin-top: 30px;
}
.socseti_contacts{
	margin-top: 40px;
    font-size: 25px;
}
/* ================================ТРЕТЬЯ СТРАНИЦА======================= */
#thanks h1{
	font-size: 50px;
    margin-bottom: 15%;
    margin-top: 10%;
    text-align: center;
}
/*=================================АДАПТИВКА=========================*/
@media screen and (max-width: 1024px){
	.width_1080{
		width: 100%;
	}
	#preview .width_40{
		margin-right: 90px;
	}
	#clients .width_30 h4{
		margin-bottom: 80px;
	}
	#contacts .width_30{
		margin-right: 150px;
	}
	
}
@media screen and (max-width: 768px){
	#preview .width_40{
		margin-right: 60px;
	}
	#preview h1{
		font-size: 75px;
		line-height: 75px;
	}
	#design .width_30{
		padding: 40px 10px;
	}
	#design .width_30 h3{
		font-size: 25px;
	}
	#clients .width_30{
		padding: 30px 10px;
	}
	#clients .width_30 h4{
		margin-bottom: 150px;
	}
	#contacts .width_30{
		margin-right: 130px;
	}
/* =====================2cт==================== */
	#design_about .width_30 h3{
		font-size: 25px;
	}
}
@media screen and (max-width: 426px){
	.d_none{
		display:block;
	}
	.m_none{
		display:none;
	}
	header{
		background: none;
	}
	header nav ul{
		display: none
	}
	#preview{
		padding: 40px 0px;
	}
	#preview .width_40{
		width: 100%;
		text-align: center;
		margin-right: 0px;
	}
	#preview .width_40 img{
		margin-top: 70px;
	}
	#preview h1{
		font-size: 70px;
		line-height: 70px;
	}
	#brendy ul{
		line-height: 90px;
	}
	#design{
		margin-top: 50px;
		padding: 70px 0px;
	}
	#design .width_30{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 40px;
	}
	#kartinki .width_30{
		width: 100%;
	}
	#clients{
		background: none;
	}
	#clients .width_30{
		width: 100%;
		margin-bottom: 50px;
	}
	#clients h2{
		color: black;
	}

	#contacts .width_30{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 40px;
	}
	#contacts .width_50{
		width: 100%;
	}
	#contacts h2{
		font-size: 30px;
		line-height: 40px;
		text-align: center;
	}
	.submit{
		background: black;
		border: none;
	}
	footer{
		background: none;
	}
	footer p{
		display: none;
	}
/* ===========2 cт=============== */
	#preview_about .width_40{
		width: 100%;
	}
	#preview_about .width_40 img{
		margin-top: 50px;
	}
	#brendy .width_1080 div{
		width: 50%;
		text-align: center;
		line-height: 50px;
	}
	#design_about .width_30{
		width: 90%;
		margin-top: 50px;
		margin-left: 5%;
	}
	#design_about .width_30 h3 {
		font-size: 30px;
	}
}
/* ===========3 cт=============== */
	#thanks h1{
		font-size: 40px;
		line-height: 50px;
	}
@media screen and (max-width: 376px){
	
	
}
@media screen and (max-width: 321px){
	
}