@import url('https://fonts.googleapis.com/css?family=Cutive');

.loader {background-size:auto;}
#map_zoom, .keyBtn, .map_buttons, .slide h1, .ssp-play, .ssp-pause, .ssp-control, #locate, .bubble, .bubblePerm, counter, .bubble-select h1, .bubble-select a, .vt-button {font-family:'Cutive', sans-serif; text-transform: uppercase; font-weight:normal; letter-spacing:1pt;}
#map_zoom li, #map_zoom li #zoom_in, #map_zoom li #zoom_out {line-height:1.45;}
.bubble, .bubblePerm, .bubble-select, .bubble-select a {color:rgb(25,42,96); background:transparent; text-shadow:3px 3px 12px #FFF, -3px -3px 12px #FFF, -3px 3px 12px #FFF, 3px -3px 12px #FFF;}
.bubble, .bubblePerm {margin-left:0 !important;}
.bubblePerm b {top:-8px;}
.bubble-select {background:rgba(255,255,255,0.6); border-radius:10px; padding:5px; text-align:center;}
.bubble-select h1 {font-size:0.8em; display:block; margin:5px auto 10px; text-align:center; font-family:Arial, sans-serif; text-transform: none; letter-spacing:0;}
.bubble-select a {display:block; margin:5px auto; text-align:center;}
.bubble-select a:hover {color:#2aa7c6;}
.bubble-select .close {width:28px; right:-17%; top:-4%; background:#FFF; padding:8px 0 4px; border-radius:20px; text-shadow:none; text-align:center;}
#map_zoom li #zoom_in, #map_zoom li #zoom_out, .map_buttons, .keyBtn, .counter {background:rgba(25,42,96,0.8); color:#FFF;}
.slide {background:#192a60;}
.vt-button {display:block; width:90%; text-align:center; text-decoration: none; font-size:0.8em; font-weight:bold; margin-top:2em;}
.ssp-play, .ssp-pause, .ssp-control, .vt-button {background:rgb(255,206,0); color:#192a60; line-height:1.5; padding:8px 0 0;}
.ssp-play:hover, .ssp-pause:hover, .ssp-control:hover, .vt-button:hover {background:#FFF;}
#locate {background:url(../img/ui/svg/locate-on-map.svg) no-repeat left 5px; background-size:20px 20px; padding:10px 0 10px 30px; bottom:15px; line-height:1;}
.slide .close {background:rgb(255,206,0); width:50px; height:50px; font-size:40px; margin-top:-10px; line-height:50px; border-radius:50px; text-decoration:none; color:#192a60; text-align:center;}
.keyBtn {padding:10px 0 0;}
.map_buttons li, .map_buttons li:hover, .map_buttons li:active, .map_buttons li:focus {background:transparent;}

@media (max-width:767px){
.slide h1 {line-height:1.5; font-size:5vw;}
.slide .description {margin-top:0; font-size:4vw; line-height:1.5;}
.keyBtn {padding:10px 0 0;}
.map_buttons li {float:none;}
.map_buttons li.hdr strong {font-size:5.5vw; white-space:normal; line-height:1.5;}
.map_buttons li.hdr {margin:6vw 0; width:100%;}
.map_buttons li.hdr:last-child {margin-bottom:20vw;}
.map_buttons li li.hdr:last-child {margin-bottom:0;} 
.map_buttons li li {width:100%;}
.map_buttons a {font-size:3.6vw; line-height:2;}
}

@media (min-width:767px) {
#locate, .ssp-play, .ssp-pause, .ssp-control {font-size:20px;}
.slide #ssp-i, .slide #ssp-v, .slide .singleImg {background:transparent; padding:0; margin:0; width:100%;}
.slide h1 {font-size: 26px;
    line-height: 1.2;
    margin: 100px 20px 8px; z-index:2; position:relative;}
.slide .description {margin-top:0; z-index:2; position:relative;}
.slide .description .inner {max-height:490px;}
.counter {display:block; top:10px; left:10px; padding:5px 10px; position:absolute;}
.slide .close {bottom:8px; right:8px;}
#locate {bottom:5px; padding-bottom:12px; left:3%;}

.slide::after {display: block;
    content: "";
    width: 40%;
    height: 66%;
    background: url(/wp-content/themes/pine-forest-camp/img/pine-forest-camp-logo.png) no-repeat;
    background-size: 110%;
    position: absolute;
    z-index: 1;
    bottom: -13%;
    right: -4%;
    transform: rotate(15deg); opacity:0.15;}

.slide::before {display:block; content:""; width:100%; height:100%; background:url(/wp-content/themes/pine-forest-camp/img/hdr-wood-bg.jpg) repeat; position:absolute; z-index:0; top:0; left:0;}

.keyBtn {padding:10px 40px 0; line-height:1.5;}

.map_buttons li.hdr {width:24.7%; font-size:14px; line-height:1.5; padding:26px 0 5px; color:#FFF;}
.map_buttons li.hdr strong {font-size:14px; border-bottom:1px dotted; display:inline-block; margin-bottom:10px;}
.map_buttons li li, .map_buttons li li.hdr {width:100%; margin:0;}
.map_buttons a {font-size:11px; padding:6px 0 0; line-height:1.3; display:inline-block; width:100%; margin:1px 0 0;}
.map_buttons a:hover {background:rgba(255,255,255,0.3);}
}

/* Tablet Landscape, desktop small (or in frame on desktop) */
@media (min-width:767px) and (orientation: landscape) {
#content {width:1000px !important; height:672px !important;}
.slide #ssp-i, .slide #ssp-v, .slide .singleImg {background:transparent; padding:5px; margin:5px 10px 0 5px; width:71%;}
.slide h1 {margin-left:0; margin-right:0; float:left; float:left; width:26%;}
.slide .description {float:left; width:26%; margin-left:0; margin-right:0;}
}

@media (min-width:767px) and (max-width:980px){
.map_buttons li.hdr {width:31.7%;}
.map_buttons li.hdr strong {white-space:normal; display:inline-block; width:75%;}
.map_buttons a {padding:10px 0 3px;}
.slide h1 {font-size:32px; margin-top:40px;}
.slide .description {font-size:20px;}
.keyBtn {padding:10px 0 0;}
}

/* Desktop general
@media screen and (min-width:1025px) {
.slide #ssp-i, .slide #ssp-v, .slide .singleImg {margin:0 auto; text-align:center; width:78%; float:none;}
.ssp-play, .ssp-pause, .ssp-control {padding:0 0 2px 0;}
.slide h1 {width:78%; float:none; margin:-105px 0 0 11%; text-align:center; position:absolute; z-index:10; background:rgba(25,42,96,0.5); font-size:40px; padding:0 0 10px 0;}
.slide .description {width:78%; float:none; margin:0 auto; text-align:center; height:115px; overflow:auto; background:rgba(255,255,255,0.4); padding:10px;}
.slide .close {bottom:8px; right:8px;}
#locate {bottom:8px; left:8px;}
.read-less, .read-more {left:auto; right:7%;}
.read-more {margin-top:-40px;}
}
 */