html {height: 100%;}
body {background: linear-gradient(#00000070,#ffffff4f), url(/images/gazon.jpg) no-repeat center; background-size: 100%; min-width:360px; width:100%; height: 100%; margin: 0; font-family: 'Manrope';}
h1, h2 {font-family: 'Oranienbaum'; text-transform: uppercase; }
.wrapper {height: 100%; display: flex; flex-direction: column;}
.navi{display:flex; color:#fff; align-items: center; justify-content: space-evenly; backdrop-filter: sepia(50%); padding: 1em 0;}
.navi .logo{display:flex; font-family: oranienbaum; color: #fff; font-size: 3em; text-decoration: none;}
.navi .logo img{max-height: 115px; padding: 0 0.5em;}
.navi ul{list-style: none; font-size:1.3em;}
.navi ul li{display:inline-block; margin: 0 0.5em; text-transform: uppercase;}
.navi ul li a{text-decoration: none; color:#fff;}
.navi .contact{font-size: 2em; text-wrap: nowrap; font-family: oranienbaum; text-transform: uppercase;}

.welcome{text-align: center; color:#fff; max-width: 1024px; margin: 10em auto 0; }
.welcome h1{font-size: 4em; margin: 0;}
.welcome h2{font-family: 'Manrope'; font-weight: 400;}
.welcome .logo{height:150px; display:none;}
.main-button{border: 2px solid #958636; line-height: 130%; text-align: center; display: inline-block; text-transform: uppercase;  padding: 13px 45px; margin: 2em; color:#fff; background: #5555;}
.main-button a{color:white; text-decoration:none;}

 .fast-bronirovka{width: 100%; background:linear-gradient(#fff, #fff) no-repeat 0px 6em; padding-bottom:4em;}
 .fast-bronirovka .form {max-width: 990px; background: #F5F5F5; text-align: center; margin: 0 auto; box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25);}
 .fast-bronirovka .form h2{font-weight: 400; font-size: 2em; color: #0D0802; padding: 1em; margin: 0;}
 .fast-bronirovka .form form {width:50%; margin: 0 auto;}
 .fast-bronirovka .form form .inputcontainer {display:flex; justify-content: space-between;}
 .fast-bronirovka .form input, .fast-bronirovka .form textarea{border-style: solid; border-width: 1px; border-color: #dddddd; font-size: 15px;  margin: 0.5em 0; padding: 0; text-indent: 1em; line-height: 3em;}
 .fast-bronirovka .form input {width:49%; height: 3em;}
 .fast-bronirovka .form textarea{width:100%}

 .fast-bronirovka .attention{color:#9b0f2c; font-weight: 500;}
#popup {background:none;}
#popup.fast-bronirovka .form form {width:90%;}

 .action {width: 100%; text-align: center; background: gray; padding: 0; background-image: url(/images/actions.jpg); background-size: cover; background-position:center;}
 .action .angles{background-image: linear-gradient(65deg, #49081a 10%, #fff0 10%), linear-gradient(65deg, #fff0 90%, #49081a 90%); padding: 2em 0;}
 .action .container25{margin-left: 25%; width: 25%; border-radius: 0.5em; padding: 2em 0; background-color: #bbbb;}
 .action h1{color:#FFEAB5; font-size: 3em; margin: 0;}
 .action p{color:#fff; text-transform: uppercase; font-size: 1.5em;}

 .rooms {text-align:center; margin:0 auto; max-width: 90vw; }
 .slide {margin-bottom: -4em;}
 .room-img{height:350px; background-size:cover;}
 .room-price{padding: 2em; background: #F5F5F5; box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25); display: inline-block;}
 .slide .room-price{position: relative; top: -6em; padding: 2em; background: #F5F5F5; box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25); display: inline-block;}
.button{display: inline-block; text-decoration: none; font-weight: 500; font-size: 0.8em; text-transform: uppercase; color: #FFFFFF; padding: 13px 45px; background: #484848; border:none; line-height: 130%; margin: 0 auto;}
.button:hover{cursor:pointer;}

.slide a{text-transform: uppercase; color:#0D0802; text-decoration: none; font-size:1.3em;}

 .data {width: 100%; text-align: center; padding: 1em 0; background:#fff; flex: 1 0 auto;}
 .data h2, .rooms h2{font-size:2.5em; color: #0D0802; font-weight: 400;}
 .page.data{min-height:80vh;}

 .flex{display:flex; width:100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2em;}
 .triggers {flex-wrap:nowrap;}
 .triggers span{flex:1 1;}
 .triggers img{max-width:100px;}
 .flex div{flex:0 0 40%;}

 .page{text-align:justify; padding: 1em 5em; width:unset; margin: 20% 5em 0;} 
 .page h2{text-align:center;}

 #otzyvy-list li{display:flex;}
 .otzivy {background: #0D0802; padding:3em 0;}
 .otzivy .line{background:url(/images/reviews-line.png) top center no-repeat; width:100%; height:2px; margin: 1em 0;}
 .otzivy h2{color:#fff;}
 .otzivy p{color:#fff; padding:0 10em; margin:auto;}


 .container {display:flex;justify-content: center; padding: 0 10%;}
 .container div{flex:1 0; margin: 0 1em; padding:2em;}
 .container .text{background: #F5F5F5;  box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25); font-weight: 400; font-size: 0.9em; color: #0D0802; text-align: justify;}
 .container .image{background:url(/images/reception.jpg); background-size: cover; background-position:center;}
 
 .map {position: relative; padding:0;}
 .contact p{margin:0;}
 .map .contact{position: absolute; top:11%; left:11%; width: 35%; background: #F5F5F5; box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25); text-align: center; min-width:285px;}
 .map .button{background: none; border:solid 2px #0D0802; color:#0D0802; margin: 2em auto;}

 .footer {display:flex;justify-content: space-evenly; align-items: center; padding: 0 10%; background:#fff; flex: 0 0 auto;}

 .review {padding: 1em 2em; background: #F5F5F5; box-shadow: 0px 3px 8px rgba(92, 87, 87, 0.25); margin: 2em auto; max-width:1024px;}
 .review p, .flex ol li{text-align:left;}
 .review .name{font-size: 1.3em;}

 .room-flex{display:flex; width:100%; justify-content: center; max-width: 1024px; margin: 0 auto; gap: 2em}
 .room-flex .room-info{flex:2 0;}
 .room-flex .room-info2{flex:1 0;}

 .room-info2>div{width: 100%; box-sizing: border-box;}
 .room-more{padding: 2em;}
 .room-description{text-align:left; max-width:1024px; margin: 0 auto;}
 #photos .room-img{background-size:cover; min-height:350px; background-position: bottom;}

 .accreditation{display: flex; justify-content: space-evenly; align-items: center; margin: 3em auto; background: #fff; flex: 0 0 auto; border: #6fc3b3 4px solid; border-radius: 1em; max-width: 800px;} 

 @media screen and (max-width: 820px){
	body {background-size:820px; background-position: top center;}
	.navi .contact {display:none;}
	.main-button {margin:1em;}
	.welcome h2{font-size:1.2em;}
	.action .container25 {margin-left: 15%; width: 60%;}
	.container{padding: 0;}
	.triggers {flex-wrap:wrap;}
	.cont {flex-direction: column; align-items:stretch;} 
}

 @media screen and (max-width: 580px){
	.welcome h1{display: none;}
	.navi ul{margin: 0;}
	.fast-bronirovka .form form {width: 95%;}
	.container .image{display: none;}
	.room .slide{width:100%; flex:1;}
	.page{margin:0; padding:1em;}
 .otzivy p{color:#fff; padding:0 2em;}
 }
 
  @media screen and (max-width: 480px){
	.navi .logo div{display:none;}
 }