/* div * */
div{
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none} /* IE 10+ */

::-webkit-scrollbar-track{
-webkit-box-shadow:none !important;
background-color:transparent}

::-webkit-scrollbar{
width:0 !important;
background-color:transparent}
 
::-webkit-scrollbar-thumb{
background-color:transparent}

.on-scrollbar{
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none} /* IE 10+ */

.on-scrollbar::-webkit-scrollbar-track{
-webkit-box-shadow:none !important;
background-color:transparent !important}

.on-scrollbar::-webkit-scrollbar{
width:0 !important;
background-color:transparent}

.on-scrollbar::-webkit-scrollbar-thumb{
background-color:#acacac}


html{height:100%}  /* check */

body{
position:relative;
background:#cacaca;
height:225vw;
padding:0;
margin:0;
font-family:'Open Sans';
text-align:center}

.tps-section{
width:100%;
height:41.6vw;
-webkit-perspective:13.33vw;
-moz-perspective:13.33vw;
-ms-perspective:13.33vw;
-o-perspective:13.33vw;
perspective:13.33vw;
-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%}

.tile-flipper{
overflow:hidden;
height:auto !important;
height:100%; /* NOTE: doubled */
margin:0 auto;
margin-top:8.33vw !important}

a{text-decoration:none}

h1,h2{float:left;width:100%}

h1{
margin-top:8.33vw;
margin-bottom:.45vw;
color:#999;
font-size:5.875vw;
font-weight:100}

h2{
color:#888;
margin-top:.85vw;
margin-bottom:0;
padding:0 1.8vw 2.5vw 1.8vw;
font-size:1.8vw;
font-weight:100;
letter-spacing:0;
line-height:160%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}

.pointer,.pointer2{
position:absolute;
top:10.85vw;
right:-3.33vw;
margin-top:1.25vw;
color:#00B0FF;
font-family:'Pacifico';
font-size:2vw}

/*
.pointer2{
color:#00B0FF;
font-family:'Pacifico';
font-size:2vw;
margin-top:1.25vw;
position:absolute;
top:10.85vw;
right:-3.33vw} */

pre{margin:6.8vw auto}

pre code{
background:rgba(0,0,0,.1);
max-width:41.6vw;
border:rgba(0,0,0,.05) .45vw solid;
border-radius:.45vw;
padding:3vw;
font-size:1.25vw}

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

.main-show h1{
float:left;
width:100%;
margin:0;
padding:1.8vw 4.2vw .85vw;
padding-top:4.55vw;
font-family:'Open Sans';
font-size:5vw;
font-weight:100;
letter-spacing:-.85vw;
text-transform:capitalize;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box}

.main-show h1.demo1{background:#1ABC9C}

.reload.bell{
width:3.75vw;
height:4vw;
padding:1.8vw;
font-size:1vw;
text-align:center;
-webkit-border-radius:1.8vw;
-moz-border-radius:1.8vw;
border-radius:1.8vw}

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

.reload,.btn{
display:inline-block; /* NOTE: doubled */
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);
width:8.33vw;
padding:.9vw;
border:.085vw solid #3079ED;
-webkit-border-radius:.25vw;
-moz-border-radius:.25vw;
border-radius:.25vw;
color:#FFF;
font-family:'Open Sans';
font-size:1.45vw;
font-weight:bold;
line-height:100%;
line-height:140%; /* NOTE: doubled */
text-decoration:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none}

.reload:hover{background:#317af2}

.btn{
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);
width:16.6vw;
color:#FFF;
border:.085vw solid #3079ED;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none}

.clear{width:auto}

.btn:hover,.btn:hover{background:#317af2}

.btns{
float:left;
width:100%;
margin:.17vw auto}

.credit{
background:#f5f5f5;
width:100%;
float:left;
color:#888;
margin:0 0 0 0;
padding:.85vw .85vw;
text-align:center;}

.credit a{
color:black;
font-weight:bold;
text-decoration:none}

.back{
display:block;
position:absolute;
background:#f5f5f5;
width:100%;
top:0;
left:0;
padding:.65vw;
color:#888;
font-weight:bold;
font-size:1.085vw;
text-align:center;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-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{
position:relative;
float:left;
width:100%;
margin:0 auto 25vw}

.panorama{
width:100%;
height:58.3vw;
float:left;
margin-top:-4.5vw;}

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

.main-show {
overflow:hidden;
margin-bottom:29.3vw}

.tps-section{
width:100% !important;
height:41.6vw;
max-width:83.2vw;
margin:0 auto}

.tps-section .tps-wrapper{border-radius:.75vw}

.tps-section .tps-wrapper h1{
position:absolute;/*
position:relative;*/
height:100%}

.tps-section .tps-wrapper h1 a{
position:absolute;
background:rgba(0,0,0,.25);
width:100%;
height:100%;
left:0;
top:0;
padding-top:10.35vw;
color:white;
font-weight:bold;
font-size:1.8vw;
font-size:1.17vw;
letter-spacing:.33vw;
line-height:190%;
text-transform:uppercase;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box}

.tps-section .tps-wrapper h1 a small{
font-family:'noto serif'; /* ?????? */
font-size:1.17vw;
font-style:italic;
font-weight:400;
letter-spacing:.085vw;
text-transform:none}

.tps-section:nth-child(1n+1) .tps-wrapper{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/demo7.jpg) center center;
background-size:cover}

.tps-section:nth-child(2n+1) .tps-wrapper{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/demo6.jpg) center center;
background-size:cover}

.tps-section:nth-child(3n+1) .tps-wrapper{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/demo5.jpg) center center;
background-size:cover}

.tps-section:nth-child(4n+1) .tps-wrapper{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/151734/demo8.jpg) center center;
background-size:cover}

.header{
overflow:hidden;
clear:both}