* {margin: 0;padding: 0;}
html *, html:after, html:before {box-sizing: inherit;}
html {overflow: hidden;}
.hidden {display: none!important;}

body {width: 100%;height: 550px;min-height: 550px;max-height: 550px;max-width:800px;display: inline-block;box-sizing: border-box;font-size: 15px;font-family: 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow: hidden;}
body.scmp-m-ios{width:100vw;}

.container{ position: relative;display: inline-block;width: 100%;max-width:800px;min-width: 290px;height: 100%;margin: 0 auto;border-top: 5px solid #f2f2f2; }
.noborder .container{ border-top: 0px solid #f2f2f2; }

.title {width: 100%;font-size: 17px;font-family: 'Merriweather', serif;color:#000;font-weight: 600;top: 0;left: 1px;position: relative;border-radius: 3px 3px 0 0;letter-spacing: 0.2px;padding-top: 12px;}
.subtitle {position: relative;width: 98%;color: #848484;font-size: 15px;font-family: Roboto-light, sans-serif;top: 6px;left: 3px;z-index: 10;font-weight: 300;}
.source {position: absolute;left: 3px;bottom: 1px;font-weight:300;font-size: 12px;color: #848484;border-top: 0.6px solid #f2f2f2;width: 100%;padding-top: 4px;text-transform:uppercase;}
.source.noborder{border-top:0px solid #f2f2f2;}
.source a {text-decoration: none;color: #848484;font-weight:600;text-transform:none;}
.source a:hover {text-decoration: none;color: #000;}
.source .noLink {text-decoration: none;color: #848484;font-weight:600;text-transform:none;cursor:default;}
.source .noLink:hover{text-decoration: none;color: #000;} 
.source .clear{opacity:0; pointer-events:none;cursor:default;}
.logo{position: absolute;right: 3px;bottom: 1px;font-size: 12px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;}
.navigation {position: absolute;bottom: 18px;width: 100%;height: 40px;}
.swiper-pagination { position: relative;margin: 0 auto;bottom: -4px; }
.swiper-pagination-bullet {margin: 0 4px;width: 12px;height: 12px;cursor:pointer; }
.swiper-pagination-bullet-active { background:#000;opacity:1;cursor:default; }
.scroll .swiper-pagination { position: relative; bottom: -38px; width:100%; height:1.2px; }
.scroll .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#888;}
#frames { top: 20px;height:455px;margin: 2px 0;width:100%;}
.scroll #frames {position:absolute !important; top:86px !important;}
.staticFrame {position: relative;top: 14px;width: 100%;height: 445px;display: inline-flex;overflow:hidden;}
.staticFrame.mapOn{ height:518px;top:4px; }
.scrollFrame {position:absolute; top:85px;width:100%;height:442px;overflow-x:overlay;overflow-y:hidden;cursor: grab; }

.scrollFrame::-webkit-scrollbar { height: 4px; }
.scrollFrame::-webkit-scrollbar-track { background: #eee; }
.scrollFrame::-webkit-scrollbar-thumb { background: #666; }
.scrollFrame::-webkit-scrollbar-thumb:hover { background: #333; }

.scrollFrame .desktopImg{display:block;max-width: none;width: auto;height: calc(100% - 8px);margin: 0 auto;position: relative;object-fit: cover;}
.scrollFrame .mobileImg{display:none;width: auto;height: calc(100% - 8px);margin: 0 auto;position: relative;object-fit: cover;}

/* .scrollFrame.active .desktopImg, .scrollFrame.active .mobileImg{transform:scale(1.01);} */

.desktopImg{width: 100%;max-width: 660px;height: 400px;margin: 0 auto;position: relative;object-fit: contain;display: block;}
.mobileImg{display:none;width: 100%;height: 400px;margin: 0 auto;position: relative;object-fit: contain;}

.staticFrame .desktopImg{width: 100%;height: 440px;margin: 0 auto;position: relative;object-fit: contain;}
.staticFrame .mobileImg{display:none;width: 100%;height: 440px;margin: 0 auto;position: relative;object-fit: contain;}
.staticFrame.mapOn .desktopImg, .staticFrame.mapOn .mobileImg{ height: auto;max-height: 100%;position: absolute;top: 0;left: 0;right: 0;}

#frames .imgContainer { position: absolute; display:inline-block;top: 0;width: 100%;height:auto;max-height: 400px;overflow: hidden; }
#frames .imgContainer.active { display:block; }
.scroll #frames .imgContainer { position: absolute; display:block !important;top: 0;width: 100%;height:auto;max-height: 400px;overflow: hidden; }

.controls { position: absolute; bottom: 1px; width: 100%; z-index: 300; text-shadow:none; cursor: pointer;}
.controls .control {display: block;box-sizing: border-box;width: 48px;font-size: 3em;text-align: center;line-height: 48px;background: rgba(255,255,255,0.1);cursor: pointer;color: #848484;  }
.controls:hover { color: #000; }
.controls .left.carousel-control { border-left:2px; border-color:#000;}
.controls .control.prev-button { color:#000; }
.controls .control.next-button { color:#000; }
#control-next {bottom: 0;right: 2px;position: absolute;transition:all 0.4s ease;}
#control-prev {bottom: 0;left: 2px;position: absolute;transition:all 0.4s ease;}
.controls.btnNav{bottom: 10px;display: inline-block;height: -webkit-fill-available;cursor:default;}

.navbtn{border-radius: 0px;background:#fff;width: auto;height: auto;text-align: center;margin: 0 12px;display: inline-block;padding: 8px 12px;color: #000;border: 1px solid #000;cursor:pointer;}

.controls.btnNav:focus,
.controls.btnNav .swiper-pagination:focus{border:none;outline:none;}

.scrollIco{ position: absolute;width: 100%;height: 100%;bottom: 0;right: 0;background: rgba(255,255,255,0.85);display: block; }
.scrollIco span{ position: relative;top: calc(45% - 40px);left: calc(100% + 19px);text-align: center;font-size: 15px;font-weight: 600;animation: cursor-animation 1.2s cubic-bezier(0.23, 1, 0.72, 1); animation-iteration-count: 3; }
.scrollIco .scrollInd{position: relative;top: 0;left: 34px;object-fit: contain;width: 60px;height: 60px;}

.menu-indicator {position: absolute;top: 40%;left: 50%;margin-left: -150px;z-index: 4;width: 300px;height:100px;text-align: center;animation: cursor-animation 1.2s cubic-bezier(0.23, 1, 0.72, 1); animation-iteration-count: 3;}
.menu-indicator .indicator-wrapper {transform: translate3d(0, 0, 0);width: 150px;margin: 0 auto;}
.menu-indicator .indicator-wrapper .indicator-cursor {width: 25px;position: absolute; top: 1.75em; z-index: 5;}

.notfound{ position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);padding-left: 15px;padding-right: 15px;padding-top: 110px;width: 70%; }
.notfound .notfound00 { position: absolute;left: 0;top: 0;display: inline-block;width: 108px;height: 108px;background-image: url(../img/errface.png);background-size: cover; }
.notfound .notfound00:before {content: '';position: absolute;width: 100%;height: 100%;-webkit-transform: scale(2.1);-ms-transform: scale(2.1)transform: scale(2.1);border-radius: 50%;background-color: #f2f5f8;z-index: -1; }
.notfound h1 { font-family: Merriweather, serif;font-size: 34px;font-weight: 700;margin-top: 0;margin-bottom: 10px;color: #151723;text-transform: uppercase; }
.notfound h2 { font-family: Roboto ,sans-serif;font-size: 21px;font-weight: 400;margin: 0;text-transform: uppercase;color: #151723; }
.notfound p { font-family: Roboto,sans-serif;color: #999fa5;font-weight: 400; }
.notfound a { font-family: Roboto,sans-serif;display: inline-block;font-weight: 700;border-radius: 40px;text-decoration: none;color: #388dbc; }

/*------------------------- | KEYFRAMES | -----------------------------*/
@keyframes box-animation { 0% { left: 32px;} 100% { left: -100px;} }
@keyframes cursor-animation { 0% { transform: translate(10px); } 100% { transform: translate(-20px); }}
@keyframes sideBounce {0% {transform:translate3d(0, 0, 0);}50%{transform:translate3d(4px, 0, 0);}100%{transform: translate3d(0, 0, 0);}}
@keyframes sideBounce2 {0%{transform:translate3d(0, 0, 0);}50%{transform:translate3d(-4px, 0, 0);}100%{transform:translate3d(0, 0, 0);}}

/*------------------------- | MEDIA QUERIES | -----------------------------*/
@media screen and (min-width:381px) { #frame-xx{display:none !important; width:0px !important;} }
@media screen and (min-width:361px) { #frame-yy{display:none !important;width:0px !important;} }
@media screen and (max-width: 518px) { #frames .imgContainer{max-height:400px;} .desktopImg, .mobileImg{height:400px;} }
@media screen and (max-width: 430px) { .staticFrame {height: 440px;} }
@media screen and (max-width: 425px) {.scrollFrame .desktopImg{display:none;}.scrollFrame .mobileImg{display:inline-block;}.staticFrame .desktopImg{display:none;}.staticFrame .mobileImg{display:inline-block;}.desktopImg{display:none;}.mobileImg{display:inline-block;}#frames .imgContainer {max-height: 400px;}.scroll #frames {top: 110px !important;} }
@media screen and (max-width: 362px) { .mobileImg{height:400px;} .staticFrame .mobileImg{height:452px;}}
@media screen and (max-width: 300px) { .staticFrame {height: 440px;} }