body {
  color: #000;
  background: #fff;
  font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
:root {
  --weekend-color: #980549;
  --tour-color: #ed7d00;
  --child-color: #a5ae6b;
  --news-color: #ffa922;
  --sauna-color: #00294f;
  --sauna-link: #64a0d6;

}
#footer span:nth-child(2){
   font-size: 24px;
}

.rooms{
   background-color: var(--tour-color);
   padding: 20px;
}
.rooms h2{
   color: white;
}
#main-nav{
   margin: 0 auto;
   background-color: #838c3d;
}
#main-nav > ul > li{
   display: inline-block;
}
#main-nav .menu a{
   color: #fff;
}
.section{
margin: 0 auto;
}  
#pagewrap {
    margin: 0 auto;
    background-color: #eae8e4;
   
    background-repeat: no-repeat;
}
#pagecontent .layout-content .node__content p, .node__content h4 {
   padding: 10px;
}
.image-style-_25width{
   width: 100%;
   height: auto;
}
.views-field-field-shorttext .field-content{
   margin: 20px;
   font-size: 36px;
   line-height: 1.5;
   font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
   color: #1f4e74;
}
.views-field-field-shorttext > .field-content:before, .views-field-field-shorttext > .field-content:after {
content: '"';
}
.block-system-main-block{
padding: 10px;
}
.sauna .left h2{
   color: #fff;
      font-size: 3em;
      font-weight: 200;
}
.sauna .left p{
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
}
.sauna .left p a{
color: var(--sauna-link);
text-transform: lowercase;
font-size: 11px;
text-decoration: none;
}

@media screen and (min-width: 1400px) {
#pagewrap {
    width: 1000px;
     background-image: url("../../images/bg.jpg");
    background-position: center 180px;
}
#header {
   height: 180px;
}
#head{
   width: 725px;
   margin: 0 auto;
}

.l,.address,.phone{
  padding-top: 15px
}
.l{
  display: inline-block;
  width: 191px;
  height: 59px;
}
.address{
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  width: 320px;
  margin-top: 31px;
}
.address span{
  font-size: 14px;
  color: #a36308;
  font-weight: bold;
}
.phone{
  display: inline-block;
  vertical-align: top;
  width: 200px;
  font-size: 20px;
  margin-top: 36px;
  font-weight: bold;
  text-align: right;
  float: right;
}
.phone a{
  font-size: 11px;
  font-weight: normal;
}
.phone .book{
   text-decoration: none;
   background-color: var(--news-color);
   padding: 3px;
   text-decoration: none;
   color: #fff;
   font-weight: bold;
}

#main-nav{
   width: 725px;
   height: 55px;
}

#content {
   width: 100%;
}

.section{
width: 725px;
}
.section:not(:first-child){
   padding-top: 20px;
}

.first{
  margin: 100px auto 0; 
}
.left{
  
}
.article .left{
   background-image: url("../../images/newsbg.jpg");
   background-repeat: no-repeat;
   background-size: cover;
}
.secondpage{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: 363px;
}

.secondpage > .right{
   background-color: #cc0;
   display: flex;
   justify-content: center;
   align-items: top;
}
.secondpage > .right > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.secondpage h2{
        margin: 10px;
        font-size: 35px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
        text-align: center;
        line-height: 1.5em;
}

.rest{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: repeat(2, auto);
}
.rest > .lefttop{
   padding: 20px;
}
.rest > .leftbot{
   padding: 20px;
}
.rest > .right{
   grid-row: span 2;
   background-color: #cc0;
}
.rest > .right > img , .left > img, .image-style-square{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rest h2, #block-zalet-ostanovkabronirovaniya h2{
        margin: -31px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}

.child{
   display: grid;
   grid-template-columns: auto 250px;
    grid-template-rows: 445px;
}

.child > .left{
   grid-row: span 2;
   background-color: var(--child-color);
}
.child > .right > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.child h2{
        margin: -12px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}
.child  .left p {
   margin: 10px;
}

.sauna{
   display: grid;
   grid-template-columns: auto 200px;
    grid-template-rows: 121px;
}

.sauna > .right{

}
.sauna > .left {
   background-color: var(--sauna-color);
   padding-left: 40px;

}

.tours{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: auto;
}

.tours > .left{
   background-color: var(--tour-color);
}
.tours > .righttop{
   padding: 20px;
   background-color: var(--tour-color);
}

.tours > .left > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tours h2{
        margin: -23px 0 0px;
        font-size: 49px;
        color: white;
        line-height: 49px;
        text-transform: uppercase;
        opacity: 0.5;
}
.menu--menyu-baza-otdyha ul>li>a, .menu--turistam ul>li>a, .menu--menyu-marshruty ul>li>a{
   color: #fff;
}
.menu--turistam .menu-item--active-trail > a.is-active, .menu--menyu-baza-otdyha .menu-item--active-trail > a.is-active, .menu--menyu-marshruty .menu-item--active-trail > a.is-active{
 color: #fff;
 text-decoration: none;
 opacity: 0.5;
}

.section12{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: repeat(2, auto);
}
.section12 > .left{
   grid-row: span 2;
   background-color: #ccc;
}
.section12 > .righttop{
   background-color: white;
}
.section12 > .rightbot{
   background-color: var(--tour-color);
}
.wedding{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: auto;
}
.wedding h2 {
        margin: -11px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}
.wedding > .right{
   background-color: var(--weekend-color);
}
.wedding .right p{
   color: white;
   margin: 50px 10px 10px;
   font-size: 18px;
   line-height: 26px;
}
.wedding .more{
   text-align: center;
}
.wedding .more a{
   color: white;

}
.rest .more a{
   color: white;
}
#pagecontent{
   background-color: white;
}
.pagesimple .section .right{
   background-color: var(--weekend-color);
}
.news{
   display: grid;
   width: 725px;
   height: 280px;
   background: url(../../images/aim1.jpg) no-repeat;

   margin-top: 20px;
   grid-template: 1fr/1fr;
}
.news > .left{
place-content: end;
}
.news h2{
   font-size: 100px;
   padding: 0 0;
   margin: 0 0 24px; 
   color: #eae8e4;

}
.newsdate{
   font-weight:bold;
   font-size: smaller;
}
#footer {
   clear: both;
      width: 725px;
   margin: 0 auto;
}
}


@media screen and (max-width: 1399.98px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей,
    но больше 990 пикселей.
    Эти стили подойдут для некоторых мобильных устройств и планшетов
    */

   #pagewrap {
    width: 100%;
     background-image: none;
    background-position: center 180px;
}

#header {
   height: auto;

}
#head{
   max-width: 725px;
   margin: 0 auto;
   text-align: center;
}

.l,.address,.phone{
  padding-top: 15px
}
.l{
  display: inline-block;
  width: 191px;
  height: 59px;
}
.address{
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  width: 320px;
  margin-top: 41px;
}
.address span{
  font-size: 14px;
  color: #a36308;
  font-weight: bold;
}
.phone{
  display: inline-block;
  vertical-align: top;
  width: 200px;
  font-size: 24px;
  margin-top: 36px;
  font-weight: bold;
}
.phone a{
  font-size: 11px;
  font-weight: normal;
}
#main-nav{
   max-width: 725px;
   height: 55px;
}
.section{
max-width: 725px;
}
.rest{
   display: inline-grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: repeat(2, auto);
}
.rest > .lefttop{
   padding: 20px;
}
.rest > .leftbot{
   padding: 20px;
}
.rest > .right{
   grid-row: span 2;
   background-color: #cc0;
}
.rest > .right > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rest h2{
        margin: -31px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}
.tours{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: auto;
}

.tours > .left{
   background-color: var(--tour-color);
}
.tours > .righttop{
   padding: 20px;
   background-color: var(--tour-color);
}
.tours > .rightbot{
   padding: 20px;
   background-color: var(--tour-color);
}
.tours > .left > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tours h2{
        margin: -23px 0 0px;
        font-size: 49px;
        color: white;
        line-height: 49px;
        text-transform: uppercase;
        opacity: 0.5;
}
.sauna > .right{
display: none;
}

.sauna .left{
   background-color: var(--sauna-color);
   padding: 1px 10px;
}
.sauna .left a{
   color: var(--sauna-link);
}
.sauna .left h2{
   font-size: 2em;
   line-height: 1.5em;
}
.wedding{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: auto;
}
.wedding h2 {
        margin: -11px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}
.wedding > .right{
   background-color: var(--weekend-color);
}
.wedding .right p{
   color: white;
   margin: 50px 10px 10px;
   font-size: 18px;
   line-height: 26px;
}
.wedding .more{
   text-align: center;
}
.wedding .more a{
   color: white;

}
.rest .more a{
   color: white;
}
.child{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    grid-template-rows: repeat(2, auto);
}

.child > .left{
   grid-row: span 2;
   background-color: var(--child-color);
}
.child > .right > img , .left > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.child h2{
        margin: -12px 0 0px;
        font-size: 69px;
        color: white;
        line-height: 80px;
        text-transform: uppercase;
        opacity: 0.5;
}
.child  .left p {
   margin: 10px;
}

}

 @media screen and  (max-width: 990px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей,
    но больше 770 пикселей.
    Эти стили подойдут для некоторых мобильных устройств и планшетов
    */
   .sauna .right {
   display: none;
   }
  }

  @media screen and (min-width: 576px) and (max-width: 770px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей.
    Это множество мобильных устройств
    */
#head{
   max-width: 725px;
   margin: 0 auto;
   text-align: center;
}
.l,.address,.phone{
  padding-top: 15px;
  margin: 0 auto;
  text-align: center;
}
.l{
  display: inline-block;
  width: 100%;
  height: 59px;
}
.address{
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  width: 100%;
  margin-top: 31px;
}
.address span{
  font-size: 14px;
  color: #a36308;
  font-weight: bold;
}
.phone{
  display: inline-block;
  vertical-align: top;
  width: 100%;
  font-size: 20px;
  margin-top: 36px;
  font-weight: bold;
}
.phone a{
  font-size: 11px;
  font-weight: normal;
}
#main-nav{
   max-width: 725px;
   height: 55px;
}
.sauna .right {
   display: none;
}
.sauna .left {
   background-color: var(--sauna-color);
}
.sauna{
   display: block;
}
.rest .right{
   display: none;
}
.tours .left{
   display: none;
}
.wedding .left{
   display: none;
}
.secondpage .left{
   display: none;
}

}

/* Очень маленькие устройства (вертикальные смартфоны, меньше 576px) */
@media screen and (max-width: 575.98px) {
  /* Стили для очень маленьких экранов */
.l,.address,.phone{
  padding-top: 15px;
  margin: 0 auto;
  white-space: nowrap;
}
.rest .right{
   display: none;
}
.tours .left{
   display: none;
}
.wedding .left{
   display: none;
}
.child .right{
   display: none;
}
.sauna .right {
   display: none;
}
}

.tbl{
   border-collapse: collapse;
   border: solid 1px #ccc;
}
.tbl td{
   border: 1px solid #ccc;
   padding: 5px;
}
.view-page-gallery{
   text-align: center;
}
.zform div label{
   display: block;
}
.zform div input, .zform div select {
   height: 30px;
}
.views-field-field-pagedesc{
color: #fff;
}
.block-views-blockpage-desc-block-1 .views-row{
 width: 80%;
 margin: 0 auto;
}
.zform .webform-type-radios label{
   display: inline-block;
   position: relative;
   top: -10px;
}
.zform div.form-type-webform-terms-of-service label{
   position: relative;
   top: -30px;
   margin-left: 20px;
}
#block-zalet-knopkabronirovaniya .bookbutton{
   display: block;
   float: right;
   padding: 10px;
   background-color: var(--tour-color);
   color: white;
   text-transform: uppercase;
   text-decoration: none !important;
}
.field--name-field-room-photo .field__item img{
   width: 100% !important;
}
.tours .righttop a{
   color: #fff;
}
.wlink{
   color: #fff;
   margin-top:50px;
   text-align: center; 
}
#block-zalet-ostanovkabronirovaniya{
   padding: 10px;
   margin: 10px;
   background-color: var(--tour-color);
   color: #fff;
}