/*
Theme Name: Времена Года
Theme URL:
Description: Времена Года 
Version: 1.0
Author: Ivanov Ivan
Author URL:
*/

@charset "utf-8";
/* CSS Document */

/* reset  начало  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* reset  конец  */


body {
   font-family: Verdana, Geneva, sans-serif;
   min-width: 300px;
   font-size: 16px;
	cursor: default;
	background-color: #ffffff;
   overflow-x: hidden;
}
.wrapper {
	min-width: 300px;
	max-width: 1360px;
	padding: 0 2%;
	margin: 0 auto;
}
.clear {
	clear: both;
}
a {
   transition: all 0.5s ease;
   text-decoration: none;
}
sup {
  vertical-align: super;
  font-size: smaller;
}
sub {
  vertical-align: sub;
  font-size: smaller;
}
div {
   box-sizing: border-box;
}





/* ------------ общие элементы - начало -------------- */

/* ------------ общие элементы - конец --------------- */




/* --------------- index-1.php начало ---------------- */
/* линия Меню - начало */
.line-top {
   overflow: hidden;
   background-color: #3C221B;
   padding: 5px 0;
}
.line-top .menu-btn {
   display: none;
   float: left;
   font-size: 18px;
   color: #cccccc;
   border-radius: 6px;
   padding: 5px 20px;
   margin: 0px 0px 0px 0px;
   transition: all 0.5s ease;
}
.line-top .menu-btn:hover {
   color: #ffffff;
}
.line-top .nav {
   overflow: hidden;
   position: relative;
}
.line-top .nav ul {
   float: left;
   position: relative;
   left: 50%;
}
.line-top .nav li {
   float: left;
   position: relative;
   right: 50%;
}
.line-top .nav li a {
   display: inline-block;
   color: #c0c0c0;
   padding: 5px 10px;
   margin: 0 5px;
}
.line-top .nav li a:hover {
   color: #ffffff;
}
@media screen and (min-width: 300px) and (max-width: 800px) {
   .line-top .menu-btn {
      display: block;
   }
   .line-top .nav {
      display: none;
   }
}
/* линия Меню - конец */


/* линия Контакты - начало */
.line-cont {
   background-color: #ffffff;
   padding: 8px 0;
}
.line-cont .cont-box {
   float: left;
   width: 31.3%;
   margin: 0 1%;
}
.line-cont .cont-box.n3 {
   text-align: right;
   padding: 10px 0 0 0;
}
.line-cont .cont-box .adr {
   color: #292D32;
   line-height: 120%;
   padding: 5px 0;
   margin: 20px 0 0 0;
}
.line-cont .cont-box .adr span {
   white-space: nowrap;
}
.line-cont .cont-box .tel {
   font-size: 30px;
   color: #3C221B;
   line-height: 120%;
   padding: 3px 0;
}
.line-cont .cont-box .tel:hover {
   color: #81858A;
}
.line-cont .cont-box .time {
   color: #292D32;
   line-height: 120%;
}
.line-cont .cont-box .adr2 {
   display: none;
   color: #292D32;
   line-height: 120%;
}
.line-cont .cont-box .logo {
   display: block;
   width: 250px;
   height: 75px;
   background: url(pic/logo-w.png) no-repeat center center;
   margin: 0 auto;
}

@media screen and (min-width: 300px) and (max-width: 600px) {
   .line-cont .cont-box.n1 {
      display: none;
   }
   .line-cont .cont-box.n2 {
      float: none;
      width: 250px;
      margin: 0 auto;
   }
   .line-cont .cont-box.n3 {
      float: none;
      width: 280px;
      text-align: center;
      padding: 0 0 0 0;
      margin: 5px auto;
   }
   .line-cont .cont-box .adr2 {
      display: block;
   }
}
@media screen and (min-width: 601px) and (max-width: 920px) {
   .line-cont .cont-box.n1 {
      display: none;
   }
   .line-cont .cont-box.n2 {
      float: left;
      width: 250px;
   }
   .line-cont .cont-box.n3 {
      float: right;
      width: 280px;
      padding: 0 0 0 0;
   }
   .line-cont .cont-box .adr2 {
      display: block;
   }
}
/* линия Контакты - конец */



/* проявляющийся блок при скроллинге - начало */
.back-top {
	display: none;
   position: fixed;
	width: 100%;
	top: 0px;
	overflow: hidden;
	z-index: 100;
	display: none;
	background-color: #151515;
	padding: 8px 0;
   box-sizing: border-box;
}
.back-top .menu-btn {
   float: left;
	width: 80px;
	color: #cccccc;
	text-align: center;
	background: #151515;
	padding: 6px;
	margin: 0px 10px 0px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}
.back-top .menu-btn:hover {
	color: #ffffff;
}
.back-top .contact  {
   float: right;
   display: inline-block;
   overflow: visible;
   white-space: nowrap;
}
.back-top .contact .tel {
   float: left;
   display: block;
   font-size: 20px;
   color: #cccccc;
   text-decoration: none;
   padding: 4px 8px;
}
.back-top .contact .tel:hover {
   color: #ffffff;
}

@media screen and (min-width: 300px) and (max-width: 800px) {
   .back-top {
      display: block;
   }
}
/* проявляющийся блок при скроллинге - конец*/


/* мобильное меню - начало */
.big-nav {
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 1px;
}
.big-nav ul {
	padding: 0px 10px 0px 10px;
}
.big-nav ul li ul {
	padding: 5px 0 10px 0;
}
.big-nav li a {
	display: block;
	font-size: 14px;
	color: #2D302C;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 120%;
	padding: 14px 0 12px 10px;
	border-bottom: 1px solid #eeeeee;
	-webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
           transition: all 0.3s ease;
}
.big-nav li a:hover {
	color: #778174;
}
.big-nav li.current-menu-item a {
	color: #45B242;
}
.big-nav li.current-menu-item a:hover {
	color: #66C664;
}
.big-nav li ul li a, 
.big-nav li.current-menu-item ul li a {
	display: block;
	font-size: 12px;
	color: #2D302C;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 0 8px 20px;
	border-bottom: none;
}
.big-nav li ul li a:hover {
	color: #778174;
}
.big-nav li ul li.current-menu-item a {
	color: #45B242;
}
.big-nav li ul li.current-menu-item a:hover {
	color: #66C664;
}
.big-nav li.current-menu-item ul li a:hover {
	color: #778174;
}
/* мобильное меню - конец */
/* --------------- index-1.php конец ---------------- */





/* --------------- index-2.php начало --------------- */
/* Блок УТП - начало */
.utp {
   background-color: #3C221B;
   padding: 50px 0;
}
.utp .utp-box {
   float: left;
   width: 23%;
   text-align: center;
   border: 2px solid #DC842E;
   border-radius: 20px;
   padding: 40px 20px;
   margin: 1% 1%;
}
.utp .utp-box .cept {
   font-size: 24px;
   color: rgba(255,255,255,0.7);
   line-height: 120%;  
}
.utp .utp-box .sep {
   font-size: 30px;
   color: #DC842E;
   line-height: 120%;  
}
.utp .utp-box .mark {
   font-size: 24px;
   color: rgba(255,255,255,1);
   line-height: 120%;  
}
.utp .utp-box br {
   display: none;
}

@media screen and (min-width: 300px) and (max-width: 440px) {
   .utp .utp-box {
      width: 96%;
      padding: 40px 20px;
      margin: 2% 2%;
   }
}
@media screen and (min-width: 441px) and (max-width: 740px) {
   .utp .utp-box {
      width: 46%;
      padding: 40px 20px;
      margin: 2% 2%;
   }
}
@media screen and (min-width: 741px) and (max-width: 860px) {
   .utp .utp-box br {
      display: block;
   }
}
/* Блок УТП - конец */

/* Блок Цены - начало */
.price {
   background-color: #ffffff;
   padding: 40px 0;
}
/*  для блоков анимации - начало  */
.price .animation-wr {
   position: relative;
}
.price .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.price .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */

.price .wrapper {
   display: flex;
}
.price .block {
   float: left;
   width: 48%;
   flex: 1;
   margin: 1% 1%;
}
.price .block.pic {
   border-radius: 25px;
   background: url(/pic/bg-price.jpg) no-repeat center center;
   background-size: cover;
   box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}
.price .text .item { 
   width: 100%;
   text-align: center;
   border-radius: 25px;
   box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
   padding: 30px 20px;
}
.price .text .item.n1 { 
   background-color: #f8f8f8; 
}
.price .text .item.n2 { 
   background-color: #e0e0e0; 
   margin: 4% 0;
}
.price .text .item.n3 { 
   color: #ffffff;
   background-color: #292D32; 
}
.price .text .item p {
   font-size: 24px;
   line-height: 130%;
}
.price .text .item span {
   white-space: nowrap;
   font-weight: bold;
}

@media screen and (min-width: 300px) and (max-width: 520px) {
   .price .wrapper {
      display: block;
   }
   .price .block {
      width: 98%;
      margin: 2% 1%;
   }
   .price .block.pic {
      aspect-ratio: 8/5;
   }
}
/* Блок Цены - конец */


/* Блок Преимущества - начало */
.advantages {
   background-color: #f8f8f8;
   padding: 40px 0;
}
/*  для блоков анимации - начало  */
.advantages .animation-wr {
   position: relative;
}
.advantages .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.advantages .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */
.advantages .wrapper {
   display: flex;
}
.advantages .block {
   float: left;
   width: 31.3%;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-radius: 25px;
   padding: 5px 10px;
   margin: 1% 1%;
}
.advantages .block p {
   font-size: 18px;
   color: #292D32;
   line-height: 130%;
   padding: 8px 0;
}
.advantages .block.pic {
   background: url(/pic/bg-advantage.jpg) no-repeat center center;
   background-size: cover;
}
.advantages .block .item {
   overflow: hidden;
   margin: 15px 0;
}
.advantages .block .item .icon {
   float: left;
   width: 50px;
   height: 50px;
   background-image: url(/pic/icon-adv-1.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   margin: 0 15px 0 0;
}
.advantages .block .item .n1 { background-image: url(/pic/icon-adv-1.jpg); }
.advantages .block .item .n2 { background-image: url(/pic/icon-adv-2.jpg); }
.advantages .block .item .n3 { background-image: url(/pic/icon-adv-3.jpg); }
.advantages .block .item .n4 { background-image: url(/pic/icon-adv-4.jpg); }

.advantages .block .item p {
   padding: 15px 0 0 65px;
}
.advantages .btn {
   display: block;
   width: 150px;
   font-size: 16px;
   color: rgba(255,255,255,0.8);
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: all 0.5s ease;
   border: 1px solid rgba(255,255,255,0.4);
   border-radius: 16px;
   background-color: #292D32;
   padding: 18px 35px;
   margin: 15px auto 0 auto;
}
.advantages .btn:hover {
   background-color: #474d55;
}

@media screen and (min-width: 300px) and (max-width: 520px) {
   .advantages .wrapper {
      display: block;
   }
   .advantages .block {
      display: block;
      width: 98.0%;
      margin: 2% 1%;
   }
   .advantages .block.pic {
      aspect-ratio: 8/5;
   }
}
@media screen and (min-width: 521px) and (max-width: 720px) {
   .advantages .block {
      width: 48.0%;
      margin: 1% 1%;
   }
   .advantages .block.pic {
      display: none;
   }
}
/* Блок Преимущества - конец */
/* --------------- index-2.php конец ---------------- */




/* --------------- index-3.php начало --------------- */
/* Блок Мы предлагаем - начало */
.we-offer {
   background-color: #ffffff;
   padding: 40px 0;
}
/*  для блоков анимации - начало  */
.we-offer .animation-wr {
   position: relative;
}
.we-offer .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.we-offer .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */
.we-offer h2 {
   font-size: 36px;
   color: #292D32;
   text-align: center;
   line-height: 100%;
   padding: 0 0 10px 0;
}
.we-offer .offer {
   position: relative;
   float: left;
   overflow: hidden;
   width: 23%;
   aspect-ratio: 8/5;
   box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
   border-radius: 15px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   margin: 1% 1%;
}
.we-offer .offer img  {
   width: 100%;
   transition: all 1.0s ease;
}
.we-offer .offer:hover img  {
   transform: scale(1.2);
}
.we-offer .offer .layer {
   position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
   background-color: rgba(0,0,0,0.4);
}
.we-offer .offer p {
   position: absolute;
   left: 0; bottom: 0;
   width: 100%;
   font-size: 18px;
   color: #ffffff;
   text-align: center;
   line-height: 130%;
   box-sizing: border-box;
   padding: 20px 15px;
}

@media screen and (min-width: 300px) and (max-width: 440px) {
   .we-offer .offer {
      width: 98%;
      margin: 2% 1%;
   }
}
@media screen and (min-width: 441px) and (max-width: 720px) {
   .we-offer .offer {
      width: 48%;
   }
}
@media screen and (min-width: 721px) and (max-width: 940px) {
   .we-offer .offer {
      width: 31.3%;
   }
   .we-offer .offer.n16 {
      display: none;
   }
}
/* Блок Мы предлагаем - конец */


/* Блок Для кого подходит - начало */
.for-whom {
   background-color: #f5f5f5;
   padding: 40px 0;
}
/*  для блоков анимации - начало  */
.for-whom .animation-wr {
   position: relative;
}
.for-whom .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.for-whom .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */
.for-whom h2 {
   font-size: 36px;
   color: #292D32;
   text-align: center;
   line-height: 100%;
   padding: 0 0 10px 0;
}
.for-whom .block-wh {
   position: relative;
   float: left;
   overflow: hidden;
   width: 31.3%;
   box-shadow: 5px 5px 20px rgb(0 0 0 / 10%);
   border-radius: 15px;
   margin: 1% 1%;
}
.for-whom .block-wh img {
   width: 100%;
   transition: all 1.0s ease;
}
.for-whom .block-wh:hover img {
   transform: scale(1.2);
}
.for-whom .block-wh .layer {
   position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
   background-color: rgba(0,0,0,0.1);
}
.for-whom .block-wh p {
   position: relative;
   z-index: 2;
   width: 100%;
   font-size: 20px;
   color: #292D32;
   text-align: center;
   line-height: 130%;
   box-sizing: border-box;
   background-color: rgba(255,255,255,1);
   padding: 10px 15px;
}

@media screen and (min-width: 300px) and (max-width: 800px) {

}
@media screen and (min-width: 300px) and (max-width: 440px) {
   .for-whom .block-wh {
      width: 98%;
      margin: 2% 1%;
   }
}
@media screen and (min-width: 441px) and (max-width: 680px) {
   .for-whom .block-wh {
      width: 48%;
   }
}
/* Блок Для кого подходит - конец */
/* --------------- index-3.php конец ---------------- */






/* --------------- index-4.php начало --------------- */
/* Блок Развлечения для детей - начало */
.children {
   background: url(pic/bg-children.jpg) no-repeat center center;
   background-size: cover;
   padding: 80px 0;
}
/*  для блоков анимации - начало  */
.children .animation-wr {
   position: relative;
}
.children .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.children .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */
.children h2 {
   font-size: 36px;
   color: #ffffff;
   text-align: center;
   line-height: 100%;
   padding: 0 0 10px 0;
}
.children .child-wr {
   width: 100%;
   max-width: 1000px;
   text-align: center;
   margin: 0 auto;
}
.children .child-wr .title {
   font-size: 26px;
   color: rgba(255,255,255,0.7);
   text-align: center;
   line-height: 130%;
   padding: 10px 5% 20px 5%;
}
.children .child-wr .list {
   display: inline-block;
   font-size: 24px;
   color: #DC842E;
   line-height: 130%;
   padding: 5px 10px;
}
.children .btn {
   display: block;
   width: 150px;
   font-size: 16px;
   color: rgba(255,255,255,0.8);
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   transition: all 0.5s ease;
   border: 1px solid rgba(255,255,255,0.4);
   border-radius: 16px;
   background-color: #292D32;
   padding: 18px 35px;
   margin: 20px auto 0 auto;
}
.children .btn:hover {
   background-color: #474d55;
}

@media screen and (min-width: 300px) and (max-width: 680px) {
   .children {
      padding: 40px 0;
   }
   .children .child-wr .title {
      font-size: 22px;    
   }
   .children .child-wr .list {
      font-size: 20px;
   }
}
@media screen and (min-width: 681px) and (max-width: 800px) {
   .children {
      padding: 60px 0;
   }
   .children .child-wr .title {
      font-size: 24px;    
   }
   .children .child-wr .list {
      font-size: 22px;
   }
}
/* Блок Развлечения для детей - конец */


/* Блок Галерея - начало */
.gallery {
   background-color: #ffffff;
   padding: 40px 0;
}
/*  для блоков анимации - начало  */
.gallery .animation-wr {
   position: relative;
}
.gallery .animation-wr {
	transform: translateX(0%) translateY(30%);
	opacity: 0;
   transition: transform 0.8s ease, opacity 0.8s ease;
}
.gallery .animation-wr.show {
   transform: translateX(0) translateY(0);
	opacity: 1;
}
/*  для блоков анимации - конец  */
.gallery h2 {
   font-size: 36px;
   color: #292D32;
   text-align: center;
   line-height: 100%;
   padding: 0 0 10px 0;
}
.gallery h3 {
   font-size: 24px;
   color: #777777;
   line-height: 130%;
   padding: 10px 0 0 2%;
}
.gallery .img-wr {
   float: left;
   overflow: hidden;
   width: 23%;
   aspect-ratio: 8/5;
   border-radius: 15px;
   box-shadow: 5px 5px 20px rgb(0 0 0 / 15%);
   margin: 1% 1%;
}
.gallery .img-wr img {
   width: 100%;
   transition: all 0.9s ease;
}
.gallery .img-wr:hover img {
   transform: scale(1.2);
}

@media screen and (min-width: 300px) and (max-width: 440px) {
   .gallery .img-wr {
      width: 98%;
      margin: 2% 1%;
   }
}
@media screen and (min-width: 440px) and (max-width: 540px) {
   .gallery .img-wr {
      width: 48%;
   }
}
@media screen and (min-width: 541px) and (max-width: 800px) {
   .gallery .img-wr {
      width: 31.3%;
   }
}
/* Блок Галерея - конец */
/* --------------- index-4.php конец ---------------- */





/* --------------- footer.php начало ---------------- */
/* Блок Футера - начало */ 
.footer-1 {
   background-color: #292D32;
   padding: 40px 0 20px 0;
}
.footer-1 h2 {
   font-size: 36px;
   color: #ffffff;
   text-align: center;
   line-height: 100%;
   padding: 0 0 10px 0;
}
.footer-1 .block {
   float: left;
   overflow: hidden;
   border-radius: 15px;
   padding: 0 0 10px 0;
   margin: 1% 1%;
}
.footer-1 .block.n1 {
   width: 350px;
}
.footer-1 .block.n2 {
   width: calc(96% - 350px);
   height: 300px;
   opacity: 0.7;
}
.footer-1 .block .logo {
   width: 250px;
   height: 75px;
   background: url(/pic/logo-b.png) no-repeat center center;
}
.footer-1 .block .slogan {
   font-size: 22px;
   color: #9B9FA5;
   line-height: 120%;
   padding: 12px 0 20px 0;
}
.footer-1 .block .adr,
.footer-1 .block .time {
   font-size: 18px;
   color: #9B9FA5;
   line-height: 120%;
   padding: 5px 0;
}
.footer-1 .block .adr span {
   white-space: nowrap;
}
.footer-1 .block .time span {
   font-size: 18px;
   color: #C6CAD0;
   line-height: 120%;
   padding: 5px 0;
}
.footer-1 .block a {
   font-size: 18px;
   color: #C6CAD0;
   line-height: 120%;
   padding: 5px 0;
}
.footer-1 .block a.tel {
   font-size: 24px;
   color: #C6CAD0;
   line-height: 120%;
   padding: 5px 0;
}
.footer-1 .block a:hover {
   color: #ffffff;
}

@media screen and (min-width: 300px) and (max-width: 800px) {
   .footer-1 .block.n1 {
      width: 98%;
   }
   .footer-1 .block.n2 {
      width: 90%;
      margin: 20px 0 0 0;
   }
}
/* Блок Футера - конец */ 


/* Блок Нижняя линия - начало */ 
.footer-2 {
   background-color: #171B20;
   border-top: 1px solid rgba(255,255,255,0.2);
   padding: 20px 0;
}
.footer-2 p {
   color: rgba(255,255,255,0.3);
   text-align: center;
   line-height: 120%;
   padding: 2px 0;
}
.footer-2 a {
   color: rgba(255,255,255,0.3);
}
.footer-2 a:hover {
   color: rgba(255,255,255,0.7);
}
/* Блок Нижняя линия - конец */ 
/* --------------- footer.php конец ----------------- */





#scroller {
   display: none;
	position: fixed;
   overflow: hidden;
	right: 25%;
	bottom: 10px;
	width: 80px;
	height: 50px;
	cursor: pointer;
	opacity: 0.6;
	transition: 0.3s linear;
   border-radius: 8px;
   background-color: #DC842E;
}
#scroller .img {
   position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
	background: url(pic/up-down.png) no-repeat center center;
}
#scroller:hover {
	opacity: 0.9;   
}




