/* ======================================= Шрифты ================================================= */
/* @font-face {
      font-family:"Epilogue-Bold";
      src: url("../fonts/Epilogue-Bold.ttf");
}*/

@font-face {
    font-family: 'Play';
    src: local('Play Regular'), local('Play-Regular'), url('../fonts/playregular.woff2') format('woff2'), url('../fonts/playregular.woff') format('woff'), url('../fonts/playregular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Play';
    src: local('Play Bold'), local('Play-Bold'), url('../fonts/playbold.woff2') format('woff2'), url('../fonts/playbold.woff') format('woff'), url('../fonts/playbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
/* ======================================= Обнуление ================================================= */
* { 
	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:Play, 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:40px;
    margin: 2px 0 10px 0;
    line-height:43px; 
}
h4{
    font-size:20px;
    line-height:30px;  
	margin: 2px 0 10px 0;
}
img{
	width:100%;
}
/* ======================БИБЛИОТЕКА========================== */
.width_1170{
    width: 1170px;
    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:80%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_25{
	width:80%;
	padding:0 12px;
	box-sizing:border-box;
}
.width_20{
	width:80%;
	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_flex_between{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.d_flex_around{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}
.d_none{
	display:none;
}
/*=====================================СТИЛИ ГЛАВНОЙ==========================*/
header{
    background-color: #32507D;
	padding: 20px 0;			/* внутрненние отступы сверху и снизу по 20 и по бокам по 0 */
	border-bottom: 5px solid #FF00D6;
}
header .width_1170{
	display: flex;
    justify-content: space-between;
	align-items:center;
}
header nav ul{
	display: flex;
}
header nav a{
    color: #ffffff;
	margin-left:75px;
}
/* ===============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);
}

/* ===============MOBILE MENU END=================== */
#preview{
	padding: 40px 0;
	color: #fff;
	text-align: center;	/* содержимое блочного єлемента по центру */
}
#preview .width_1170{
	background: url(../img/glavnaya.png) no-repeat center center;
	background-size: cover;
	border: 5px solid #FF00D6;
	border-radius: 50px;
}
.zatenenie{
	background: #00000061;
	padding: 50px 30px 70px 30px;
    border-radius: 50px;
}
.button_call{
	padding: 20px 50px;
	display: inline-block;
	background: #FFFFFF;
	border-radius: 40px;
	border: 3px solid #FF00D6;
	color: #32507D;
	font-size: 45px;
}
.button_call:hover{
	background: #FF00D6;
	color: #ffffff;
	text-decoration:none;
}
#uslugi{
	padding: 40px 0;
}
#uslugi .width_40, #uslugi .width_60{
	margin-bottom:40px;
}
#uslugi .width_40 img{
	border: 5px solid #FF00D6;
	border-radius: 35px;
}
#uslugi .width_1170{
	display: flex;
	flex-wrap: wrap;
}
#uslugi li{
	font-size: 27px;
	background: url(../img/list-checkmark.png) no-repeat left 12px;
	padding-left: 20px;
	margin-bottom: 12px;
}
#ikonki{
 	background-color: #32507D;
}
#ikonki .width_30{
	background-color: #FFFFFF; 
	border-radius: 50%; 
	width: 320px; 
	height: 320px; 
	border: 5px solid #FF00D6;
	display: flex;
	justify-content: center;
	align-items: center;
}
#ikonki .width_30 img{
	width:63%;
}
#sorevnovaniya .width_80 img{
	width: 50%;
}
#ikonki{
	padding: 15px 0;
}
#sorevnovaniya{
	padding: 50px 10px;
	margin: 0 auto;
	text-align: center;
}
#sorevnovaniya .width_80{
	background-color: #32507D;
	border-radius: 20px; 
	color: #FFFFFF; 
	padding: 30px 50px;
}
#sorevnovaniya .width_80 img{
	border: 9px solid #46BA4A;
	border-radius: 20px;
}
#sorevnovaniya h5{
	font-size: 25px;
}
#komandy{
	padding: 40px 0;
	margin: 0 auto;
	font-weight: bold
}
#komandy .width_30{
	background-color: #F2F2F2;
	border: 4px solid #69AD99;
	border-radius: 20px; 
	text-align: center;
	width: 32%;
	padding: 40px 0;
}
#komandy .width_1170 h2{
	text-align: center;
	font-size: 38px;
}
#komandy .width_30 h2{
	color: #46BA4A;
}
#komandy .width_30 img{
	width: 90%;
}
#komandy p{
	font-size: 23px;
}
#forma{
	padding: 40px 0;
}
#forma .width_50{
	display: flex;
	justify-content: center;
	align-items: center;
}
#forma .width_1170 h2{
	text-align: center;
}
#krugi{
	padding: 40px 0;
}
#krugi img{
	width:5%;
}
#sbornye{
	padding: 40px 0;
}
#sbornye li{
	font-size: 27px;
	background: url(../img/ua2.png) no-repeat left 8px;
	padding-left: 43px;
	margin-bottom: 12px;
}
#sbornye h2{
	text-align: center;
}
#contacts{
	padding: 40px 0;
	margin-right: 7px;

}
#contacts p{
	font-size: 23px;
}
#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;
}
#contacts .form{
	padding: 40px 10px;
}
.submit{
	padding: 20px 50px;
	display: inline-block;
	background: #FF00D6;
	border-radius: 40px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	font-size: 30px;
}
.submit:hover{
	background: #FFFFFF;
	color: #FF00D6;
	border: 3px solid #FF00D6;
}
footer{
	padding: 20px 0;
	background: url(../img/fon-abstraktsiia.png) repeat-x center center;
	background-size: contain;
	color: #FFFFFF;
	text-align: center;
	font-size: 24px;}


/*=================================АДАПТИВКА=========================*/
@media screen and (max-width: 1024px){
	.width_1170{
		width: 98%;
	}
	header .width_1170{
		flex-direction: column;
	}
	#logo{
		margin-bottom: 20px;
	}
	header nav{
		width: 100%;
	}
	#sorevnovaniya .width_80 img{
		width: 50%;
	}
}
@media screen and (max-width: 768px){
	header nav ul{
		justify-content: space-around;
	}
	header nav a{
		margin-left: 0;
	}
	#sorevnovaniya .width_80 img{
		width: 60%
	}
	#ikonki .width_30{
		width: 220px;
		height: 220px;
	}
	
}
@media screen and (max-width: 426px){
	.d_none{
		display:block;
	}
	.m_none{
		display:none;
	}
	.wrapper{
		background-color: #32507D;
	}
	.wrapper ul{
		left: 40%;
	}
	.menu-btn span, .menu-btn:before, .menu-btn:after{
		border-bottom: 2px solid #fff;
	}
	#active:checked ~ .wrapper ul li a{
		line-height: 30px;
		text-align: left;
	}
	header nav ul{
		font-size: 12px;
	}
	h1{
		font-size: 90px;
	}
	#zatenenie h3{
		font-size: 30px;
	}
	.button_call{
		font-size: 40px;
	}
	#uslugi .width_40, #uslugi .width_60{
		width: 100%;
	}
	#sorevnovaniya h2{
		font-size: 36px;
		line-height: 38px;
	} 
	#sorevnovaniya h5{
		font-size: 20px;
		margin-bottom: 40px;
	}
	#sorevnovaniya .width_60{
		width: 100%;
	}
	#sorevnovaniya .width_80 img{
		width: 98%;
	}
	#sorevnovaniya .width_80{
		width: 100%;
	}
	#forma .width_1170 h2{
		font-size: 40px;
		line-height: 39px;
	}
	#komandy .width_30 h2{
		font-size: 35px;
	}
	#komandy .width_30{
		width: 100%;
		margin-bottom: 19px;
	}
	#komandy p{
		font-size: 20px;
	}
	#sbornye li{
		font-size: 17px;
	}
	#sbornye h2{
		font-size: 40px;
	}
	#ikonki .width_30{
		width: 130px;
		height: 130px;
	}
	#contacts .width_50{
		width: 100%;
		margin-top: 30px;
	}
	#contacts .socseti_contacts{
		font-size: 26px;
	}
	footer p{
		font-size: 18px;
	}
}
@media screen and (max-width: 376px){
	header nav ul{
		font-size: 10px;
	}
	#preview h1{
		font-size: 87px;
	}
	.button_call{
		font-size: 30px;
	}
	#sorevnovaniya h2{
		font-size: 30px;
	}
	#sorevnovaniya .width_60{
		width: 100%;
	}
	#sorevnovaniya .width_80 img{
		width: 98%;
	}
	#sbornye li{
		font-size: 17px;	
	}
	#sbornye h2{
		font-size: 30px;
	}
	#ikonki .width_30{
		width: 115px;
		height:115px;
	}
	.submit{
		font-size: 20px;
	}
	#forma .width_1170 h2{
		font-size: 30px;
	}
	#contacts .width_50{
		width: 100%;
		margin-top: 30px;
	}
	#contacts h2{
		font-size: 30px;
	}
}
@media screen and (max-width: 321px){
	#preview h1{
		font-size: 68px;
	}
	#preview h3{
		font-size: 30px;
	}
	.button_call{
		font-size: 26px;
	}
	#sorevnovaniya h2{
		font-size: 24px;
	}
	#contacts .width_50{
		width: 100%;
		margin-top: 30px;
	}
	#ikonki .width_30{
		width: 100px;
		height: 100px;
	}
	#preview h1{
		line-height: 60px;
	}
}