* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html { overflow: hidden; }
html *, html *:before, html *:after { box-sizing: inherit; }
body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'Roboto', sans-serif; background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
.hidden { display: none !important; opacity: 0; }

.container { position: relative; width: 1px; min-width: 100%; max-width: 800px; height: 100%; margin: 0 auto; border-top:5px solid #f2f2f2;}
.frame-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.frames { width: auto; height: 100%; }
.frames .frame { position: relative; width: 100%; height: 100%; background: #fff;}
.frames .frame .image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.frames #frame-1 .image-container{ top:32px;height:calc(100% - 32px); }
.frames .frame .image-container .images { position: relative; height: 100%; }
.frames .frame .image-container .images .image { position: relative; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
.frames .frame .title { position: absolute; top: 0; left: 0; width: 100%; background:#fff; z-index: 10; }
.frames .frame .text { position: absolute; bottom: 0; left: 0; box-sizing: border-box; width: 100%; padding: 8px; line-height: 1.4; background: #ffffff; z-index: 10; transition: background .5s ease, padding-top 0.4s ease, padding-bottom 0.4s ease, height 0.4s ease; }
.frames .frame .text p { font-size: 1.05em; line-height: 1.2; color: #001246; }
.frames .frame .text .text-toggle { position: absolute; top: -26px; right: 20px; width: 36px; height: 26px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 1.2em; text-align: center; line-height: 28px; color: #000; background: #ffffff; cursor: pointer; transition: all .5s ease;opacity: 0;display: none; }
.frames .frame .text .text-toggle:hover { color: #001246; }
.frames .frame .text .text-link { display: block; position: absolute; top: -26px; right: 62px; height: 26px; padding: 0 8px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: .85em; font-weight: 600; text-decoration: none; text-transform: uppercase; line-height: 28px; color: #fff; background: #FFCF00; cursor: pointer; transition: all .5s ease; }
.frames .frame .text .text-link:hover { background: #FF8E44; }
.frames .frame .text .text-credit { position: absolute; bottom: calc(100% + 5px); left: 20px; width: calc(100% - 175px); font-size: .85em; text-shadow: 0 0 7px rgba(0, 0, 0, .3), 1px 1px 3px rgba(0, 0, 0, .7); line-height: 1.15; color: #ffffff !important; }
.frames .frame .text.text-collapse { height: 0; padding: 8px 20px 0 20px; transition:padding-top 0.4s ease, padding-bottom 0.4s ease, height 0.4s ease }
.frames .frame .text.text-collapse .text-toggle { top: -20px; height: 20px; line-height: 23px;  }
.frames .frame .text.text-collapse .text-link { top: -20px; height: 20px; line-height: 23px; }
.frames .frame .text.text-empty { padding: 8px 20px 0 20px; }
.frames .frame .text.text-empty .text-link { right: 20px; }
.frames .frame .text.text-empty .text-credit { width: calc(100% - 135px); }
.frames .frame.frame-last .image-container .images .image:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); z-index: 1; }
.frames .frame.frame-last .title { font-size: .85em; }

.frame-controls {  padding: 4px 5px; border-radius: 0; background: rgba(0,0,0,0.3); z-index: 10; transition: background .5s ease; }
.frame-controls:after { content: ""; display: table; clear: both; }
.frame-controls .frame-button { display: inline-block;background: rgba(0,0,0,0); position: absolute; width: 40px; height: 40px; font-size: 42px; text-align: center; color: rgba(255, 255, 255, 1); background: none; cursor: pointer; transition: color .5s ease, padding .5s ease; }

.frame-controls #frame-next{right:0;}
.frame-controls #frame-prev{left:0;}
.frame-controls .frame-button:hover { color: #eee;background: rgba(0,0,0,0.3) !important;transition:all 0.3s ease; }
.frame-controls .frame-button.prev-button { margin-right: 2px; }
.frame-controls .frame-button.swiper-button-disabled { opacity: 0; }
.frame-controls .frame-progress { display: inline-block; float: right; font-size: .85em; font-weight: 600; line-height: 2; color: rgba(255, 255, 255, 1); }

.frames .frame .title p { color: #000;font-size: 1.5em; font-family: 'Roboto', sans-serif; font-weight: 400;line-height: 1.15;  }

body.scmp {  font-family: 'Roboto', sans-serif; }
.scmp .frame-controls { background: rgba(0,0,0,0.3); font-family: 'Roboto', sans-serif; } 
.scmp .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #000; font-family: 'Roboto', sans-serif; }
.scmp .frames .frame .title p { font-size: 1.5em; font-family: 'Roboto', sans-serif; font-weight: 400;line-height: 1.15; }
.scmp .frames .frame .text p span{ color:#757170;display: inline-block;}

.slidesProgress{ position: absolute;display: inline-block;height: 2px;background: #ccc;width: 0px;transition: width 0.4s ease;}

body.pm {  font-family: 'Open Sans', sans-serif; }
.pm .frame-controls { background: #f5811f; font-family: 'Open Sans', sans-serif; } 
.pm .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #666; font-family: 'Open Sans', sans-serif; }
.pm .frames .frame .title p { font-size: 2em; font-family: 'Yeseva One', serif; font-weight: 400;line-height: 1.15; }
.pm .frame-controls .frame-button:hover { color: #333; }
.pm .slidesProgress{background:#f5811f;}

body.twia {  font-family: 'Roboto ', sans-serif; }
.twia .frame-controls { background: #FFE850; font-family: 'Roboto', sans-serif; color: #586b75; } 
.twia .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #586b75; font-family: 'Roboto', sans-serif; }
.twia .frames .frame .title p { font-size: 1.5em; font-family: 'Farnham', 'Georgia', serif; font-weight: 700;line-height: 1.15; }
.twia .frame-controls .frame-button:hover { color: #333; }
.twia .frame-controls .frame-progress, .twia .frame-controls .frame-button { color: #fff; }
.twia .slidesProgress{background:#586b75;}

body.yp {  font-family: 'Open Sans ', sans-serif; }
.yp .frame-controls { background: #efd631; font-family: 'Open Sans', sans-serif; color: #444; } 
.yp .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #444; font-family: 'Open Sans', sans-serif; }
.yp .frames .frame .title p { font-size: 1.5em; font-family: 'Open Sans', sans-serif; font-weight: 700;line-height: 1.15; }
.yp .frame-controls .frame-button:hover { color: #333; }
.yp .frame-controls .frame-progress, .yp .frame-controls .frame-button { color: #fff; }
.yp .slidesProgress{background:#444;}

body.style {  font-family: 'Roboto ', sans-serif; }
.style .frame-controls { background: #b58f32; font-family: 'Roboto', sans-serif; color: #fff; } 
.style .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #444; font-family: 'Roboto', sans-serif; }
.style .frames .frame .title p { font-size: 1.5em; font-family: 'Roboto Condensed', sans-serif; font-weight: 400;line-height: 1.15; }
.style .frame-controls .frame-button:hover { color: #fff; }
.style .frame-controls .frame-progress, .style .frame-controls .frame-button { color: #fff; }
.style .slidesProgress{background:#b58f32;}

body.ab {  font-family: 'Roboto ', sans-serif; }
.ab .frame-controls { background: #18ffff; font-family: 'Roboto', sans-serif; color: #222; } 
.ab .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #444; font-family: 'Roboto', sans-serif; }
.ab .frames .frame .title p { font-size: 1.5em; font-family: 'Roboto Condensed', sans-serif; font-weight: 700;line-height: 1.15; }
.ab .frame-controls .frame-button:hover { color: #fff; }
.ab .frame-controls .frame-progress, .ab .frame-controls .frame-button { color: #fff; }
.ab .slidesProgress{background:#18ffff;}

body.ink {  font-family: 'Roboto ', sans-serif; }
.ink .frame-controls { background: #3ab6d0; font-family: 'Roboto', sans-serif; color: #1c2129; } 
.ink .frames .frame .text p { font-size: .9em; line-height: 1.2; color: #1c2129; font-family: 'Roboto', sans-serif; }
.ink .frames .frame .title p { font-size: 1.5em; font-family: 'Roboto Condensed', sans-serif; font-weight: 400;line-height: 1.15; }
.ink .frame-controls .frame-button:hover { color: #fff; }
.ink .frame-controls .frame-progress, .ink .frame-controls .frame-button { color: #fff; }
.ink .slidesProgress{background:#3ab6d0;}

@keyframes thumbs-up {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes arrow-forward {
  0% { transform: translateX(0); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@media screen and (min-width: 660px) {
  .container { min-width: 660px; }
  .frames .frame .text .text-toggle { right: calc(50% - 310px); }
  .frames .frame .text .text-link { right: calc(50% - 268px); }

}
@media screen and (max-width: 420px) {
  .frames .frame .image-container .images .image.image-desktop { display: none; }
  .frames .frame .image-container .images .image.image-mobile { display: block; }
  .frames .frame .title p { font-size: 2em; }
  .frames .frame .title.title-small p { font-size: 1.4em; }

  .frames .frame.frame-last .redirects .redirect { padding: 15px 12px; }
  .frames .frame.frame-last .redirects .redirect.redirect-share { padding: 9px 12px; }
  .frames .frame.frame-last .redirects .redirect.redirect-share .redirect-share-buttons { display: block; float: none; margin-bottom: 5px; margin-left: 17px; }
}
@media screen and (max-width: 380px) {
  .frames .frame .text { font-size: .9em; }
}
@media screen and (max-width: 330px) {
  .frames .frame .title p { font-size: 1.7em; }
  .frames .frame .title.title-small p { font-size: 1.3em; }
}
@media screen and (max-width: 320px) {
  .frames .frame.frame-last .redirects { font-size: .9em; }
}
@media screen and (max-width: 270px) {
  .frames .frame .title p { font-size: 1.4em; }
}