html {
   height: 100%;
}
body {
   background: #f1f1f2;
   padding: 0;
   text-align: center;
   font-family: "open sans";
   position: relative;
   margin: 0;
   height: 100%;
}

.wrapper {
   height: auto !important;
   height: 100%;
   margin: 0 auto;
   overflow: hidden;
}

a {
   text-decoration: none;
}

h1,
h2 {
   width: 100%;
   float: left;
}
h1 {
   margin-top: 100px;
   color: #999;
   margin-bottom: 5px;
   font-size: 170px;
   font-weight: 100;
}
h2 {
   padding: 00px 20px 30px 20px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   letter-spacing: 0px;
   color: #888;
   font-size: 20px;
   line-height: 160%;
   font-weight: 100;
   margin-top: 10px;
   margin-bottom: 0;
}

.pointer {
   color: #00b0ff;
   font-family: "Pacifico";
   font-size: 24px;
   margin-top: 15px;
   position: absolute;
   top: 130px;
   right: -40px;
}
.pointer2 {
   color: #00b0ff;
   font-family: "Pacifico";
   font-size: 24px;
   margin-top: 15px;
   position: absolute;
   top: 130px;
   left: -40px;
}
pre {
   margin: 80px auto;
}
pre code {
   padding: 35px;
   border-radius: 5px;
   font-size: 15px;
   background: rgba(0, 0, 0, 0.1);
   border: rgba(0, 0, 0, 0.05) 5px solid;
   max-width: 500px;
}

.main {
   float: left;
   width: 100%;
   margin: 0 auto;
}

.main h1 {
   padding: 20px 50px 10px;
   float: left;
   width: 100%;
   font-size: 60px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   font-weight: 100;
   margin: 0;
   padding-top: 55px;
   font-family: "Open Sans";
   letter-spacing: -1px;
   text-transform: capitalize;
}

.main h1.demo1 {
   background: #1abc9c;
}

.reload.bell {
   font-size: 12px;
   padding: 20px;
   width: 45px;
   text-align: center;
   height: 47px;
   border-radius: 50px;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
}

.reload.bell #notification {
   font-size: 25px;
   line-height: 140%;
}

.reload,
.btn {
   display: inline-block;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   display: inline-block;
   line-height: 100%;
   padding: 0.7em;
   text-decoration: none;
   width: 100px;
   line-height: 140%;
   font-size: 17px;
   font-family: Open Sans;
   font-weight: bold;
   -webkit-box-shadow: none;
   box-shadow: none;
   background-color: #4d90fe;
   background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
   background-image: -webkit-moz-gradient(top, #4d90fe, #4787ed);
   background-image: linear-gradient(top, #4d90fe, #4787ed);
   border: 1px solid #3079ed;
   color: #fff;
}
.reload:hover {
   background: #317af2;
}
.btn {
   width: 200px;
   -webkit-box-shadow: none;
   box-shadow: none;
   background-color: #4d90fe;
   background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
   background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
   background-image: linear-gradient(top, #4d90fe, #4787ed);
   border: 1px solid #3079ed;
   color: #fff;
}
.clear {
   width: auto;
}
.btn:hover,
.btn:hover {
   background: #317af2;
}
.btns {
   float: left;
   width: 100%;
   margin: 50px auto;
}
.credit {
   text-align: center;
   color: #888;
   padding: 10px 10px;
   margin: 0 0 0 0;
   background: #f5f5f5;
   float: left;
   width: 100%;
}
.credit a {
   text-decoration: none;
   font-weight: bold;
   color: black;
}

.back {
   position: absolute;
   top: 0;
   left: 0;
   text-align: center;
   display: block;
   padding: 7px;
   width: 100%;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   background: #f5f5f5;
   font-weight: bold;
   font-size: 13px;
   color: #888;
   -webkit-transition: all 200ms ease-out;
   -moz-transition: all 200ms ease-out;
   -o-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
}
.back:hover {
   background: #eee;
}

.page-container {
   float: left;
   width: 100%;
   margin: 0 auto 300px;
   position: relative;
}
.panorama {
   width: 100%;
   float: left;
   margin-top: -5px;
   height: 700px;
}

.panorama .credit {
   background: rgba(0, 0, 0, 0.2);
   color: white;
   font-size: 12px;
   text-align: center;
   position: absolute;
   bottom: 0;
   right: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   float: right;
}

.main {
   margin-bottom: 350px;
   overflow: hidden;
   background: #dbdbdb;
}
.tps-section {
   width: 100% !important;
   max-width: 1000px;
   margin: 0 auto;
   height: 500px;
}

.tps-section .tps-wrapper {
   border-radius: 5px;
}
.tps-section .tps-wrapper h1 {
   position: relative;
   height: 100%;
   position: absolute;
}
.tps-section .tps-wrapper h1 a {
   color: white;
   position: absolute;
   background: rgba(0, 0, 0, 0.25);
   width: 100%;
   height: 100%;
   top: 0;
   padding-top: 225px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   left: 0;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 4px;
   font-size: 50px;

   line-height: 190%;
}

.tps-section .tps-wrapper h1 a small {
   text-transform: none;
   font-style: italic;
   font-weight: 400;
   font-family: noto serif;
   letter-spacing: 1px;
   font-size: 14px;
}

.tps-section:nth-child(1n + 1) .tps-wrapper {
   background: url(https://veresort.ru/wp-content/uploads/2025/03/VE-%D0%9E%D0%B1%D1%89%D0%B8%D0%B9-%D0%B2%D0%B8%D0%B4-%D1%81%D0%B2%D0%B5%D1%80%D1%85%D1%83-%E2%80%94-%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F_19-1024x678.webp)
      center center;
   background-size: cover;
}

.tps-section:nth-child(2n + 1) .tps-wrapper {
   background: url(https://veresort.ru/wp-content/uploads/2024/05/frame-8-1-1024x641.jpg)
      center center;
   background-size: cover;
}

.tps-section:nth-child(3n + 1) .tps-wrapper {
   background: url(https://veresort.ru/wp-content/uploads/2025/05/IMG_0395_11zon-1536x1016.webp)
      center center;
   background-size: cover;
}

.tps-section:nth-child(4n + 1) .tps-wrapper {
   background: url(https://veresort.ru/wp-content/uploads/2025/03/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82-%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%E2%80%94-%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F-2_12-1-1536x1152.webp)
      center center;
   background-size: cover;
}
.tps-section:nth-child(5n + 1) .tps-wrapper {
   background: url(https://veresort.ru/wp-content/uploads/2024/04/akv1-prudik-leto-noch-1024x685.webp)
      center center;
   background-size: cover;
}

.header {
   overflow: hidden;
   clear: both;
}

.tps-section {
   width: 100%;
   height: 500px;
   -webkit-perspective: 10em;
   -moz-perspective: 10em;
   -ms-perspective: 10em;
   -o-perspective: 10em;
   perspective: 10em;
   -webkit-perspective-origin: center bottom;
   -moz-perspective-origin: center bottom;
   -ms-perspective-origin: center bottom;
   -o-perspective-origin: center bottom;
   perspective-origin: center bottom;
   -webkit-perspective-origin: 50% 50%;
   -moz-perspective-origin: 50% 50%;
   -ms-perspective-origin: 50% 50%;
   -o-perspective-origin: 50% 50%;
   perspective-origin: 50% 50%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
}

.tps-wrapper {
   float: left;
   width: 100%;
   height: 100%;
}