/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

html{
	height:100%;
}
body{
	min-height:100%;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    background: #a90000;
    color: #fff;
    z-index: 99999;
    position: absolute;
    margin: 0;
    width: 100%;
    padding: 10px 10px;
    font-size: 14px;

}
/* ==========================================================================
   PERFECT SCROLLBAR
   ========================================================================== */

.ps-container {
  overflow: hidden !important; }
  .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
    display: block; }
  .ps-container.ps-in-scrolling {
    pointer-events: none; }
    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
      background-color: #eee;
      opacity: 0.9;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      filter: alpha(opacity=90); }
      .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
        background-color: #999; }
    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
      background-color: #eee;
      opacity: 0.9;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      filter: alpha(opacity=90); }
      .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
        background-color: #999; }
  .ps-container > .ps-scrollbar-x-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    -o-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
    bottom: 3px;
    /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px; }
    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
      position: absolute;
      /* please don't change 'position' */
      background-color: #aaa;
     /* background-color: #515250;*/

      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      border-radius: 4px;
      -webkit-transition: background-color .2s linear;
      -moz-transition: background-color .2s linear;
      -o-transition: background-color .2s linear;
      transition: background-color .2s linear;
      bottom: 0;
      /* there must be 'bottom' for ps-scrollbar-x */
      height: 8px; }

  .ps-container > .ps-scrollbar-y-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    -o-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
    right: 3px;
    /* there must be 'right' for ps-scrollbar-y-rail */
    width: 8px; }
    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
      position: absolute;
      /* please don't change 'position' */
      background-color: #aaa;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      border-radius: 4px;
      -webkit-transition: background-color .2s linear;
      -moz-transition: background-color .2s linear;
      -o-transition: background-color .2s linear;
      transition: background-color .2s linear;
      right: 0;
      /* there must be 'right' for ps-scrollbar-y */
      width: 8px; }
  .ps-container:hover.ps-in-scrolling {
    pointer-events: none; }
    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
      background-color: #eee;
      opacity: 0.9;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      filter: alpha(opacity=90); }
      .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
        background-color: #999; }
    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
      background-color: #eee;
      opacity: 0.9;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      filter: alpha(opacity=90); }
      .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
        background-color: #999; }
  .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60); }
  .ps-container:hover > .ps-scrollbar-x-rail:hover {
    background-color: #eee;
	background-color:transparent;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90); }
    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
      background-color: #999; }
  .ps-container:hover > .ps-scrollbar-y-rail:hover {
    background-color: #eee;
	background-color:transparent;

    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90); }
    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
      background-color: #999; }


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body{
	font-family:'Lato';
	background:#fff;
}
a{
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	color:#fff;
	color:rgba(255,255,255,0.8);
}
p a{
	text-decoration:none;
	border-bottom:#fff;
	border-bottom:1px solid rgba(255,255,255,0.4);
}

.btn{
	border: 1px solid #fff;
	border: 1px solid rgba(255,255,255,0.4);
	text-transform: uppercase;
	padding: 16px 0 14px;
	color:#fff;
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	font-size: 12px;
	font-weight: 300;
	letter-spacing:1px
}
.btn:hover{
	background: rgba(255,255,255,0.05);
}

#scrollBox{
	position:fixed;
	width:100%;
	top:0;
	bottom:50px;
	overflow:hidden;
}
#grandContainer{
	overflow:hidden;
}
#workbox{
	position:relative;
}
#workbox #mainImg img{
	float:left;	
	width:1000px;
	min-height:100px;
}
#workbox #mainImg img:last-child{
	width:auto;
}
#workbox a.fancybox{
	width:20px;
	height:20px;
	position:absolute;
	background:transparent;
	text-decoration:none;
	text-indent:-9999px;
	overflow:hidden;
	top:0;
	left:0;
	z-index:20;
	margin:-10px;
	border-radius:20px;
	
}

#workbox a.fancybox span{
	width:6px;
	height:6px;
	margin:7px;
	background:#FFC600;
	display:block;
	border-radius:3px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	
	
}
#workbox a.fancybox:hover span{
	margin-top:5px;
}


#workbox .year2011 a span, dt.year2011 span{background:#FFC600;}
#workbox .year2012 a span, dt.year2012 span{background:#ff4bec;}
#workbox .year2013 a span, dt.year2013 span{background:#a4ff4b;}
#workbox .year2014 a span, dt.year2014 span{background:#ff500b;}
#workbox .year2015 a span, dt.year2015 span{background:#d97889;}
#workbox .year2016 a span, dt.year2016 span{background:#a14723;}


#workbox a.wormhole{
	width:30px;
	height:30px;
	border-radius:50px;
	position:absolute;
	background:transparent;
	text-decoration:none;
	text-indent:-9999px;
	overflow:hidden;
	top:0;
	left:0;
	z-index:20;
	margin:-15px;
	border:3px solid #A14723;
	background:transparent center center no-repeat;
	border:3px solid #A14723;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	
	background-size:200% 200%;
	
}
#workbox a.wormhole:hover{
	width:100px;
	height:100px;
	border:0;
	margin:-50px;
	background-image:url('https://s3-eu-west-1.amazonaws.com/hilltops/panoramas/cnoc_na_clocha/cnoc_na_clocha_06.jpg');
	-webkit-box-shadow: inset 0px 0px 36px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0px 0px 36px 0px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 36px 0px rgba(0,0,0,0.75);
	
	
}


#workbox a.pano{
	width:auto;
	height:auto;
	background:transparent;
	position:absolute;
	text-decoration:none;
	text-indent:-9999px;
	overflow:hidden;
	top:0;
	left:0;
	z-index:20;
	
}
#workbox a.pano span{
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 12px solid red;
	background:transparent;
	
	margin:2px;
	display:block;
	border-radius:0;
	
	
}


#workbox a.peak{
	width:auto;
	height:auto;
	background:transparent;
	position:absolute;
	text-decoration:none;
	text-indent:-9999px;
	top:0;
	left:0;
	z-index:20;
	width:16px;
	height:13px;
	margin:-8px 0 0 -6px;
	overflow:visible;
}
#workbox a.peak img{
	display:block;
	width:100%;
	height:100%;
}


.launcher {
  float:left;
  margin: 50px;
  display:block;
  overflow:hidden;
}
.anystretch img {
  cursor: pointer;
}
#fullscreen {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: red;
  z-index: 200;
}
#fullscreen .anystretch{
	background:#262724 url('../img/camera-flash-no-background_2.gif') center center no-repeat;
	background:rgba(38,39,36,1) url('../img/camera-flash-no-background_2.gif') center center no-repeat;
	background-size:200px 200px;
}

#fullscreen .close{
	position:absolute;
	top:0;
	right:10px;
	width:40px;
	height:40px;
	background:#262724 url(../img/close_me_white.png) center center no-repeat;
	background:rgba(38,39,36,1) url(../img/close_me_white.png) center center no-repeat;
	background-size:16px 16px;
	top:-40px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	cursor: pointer;
  
	
}
#fullscreen .close.visible{
	top:0;
}

.bar{
	position:fixed;
	bottom:0;
	left:0;
	height:50px;
	width:100%;
	background:#262724;
	background:rgba(38,39,36,1);
	z-index:100;
/*	border-top:1px solid rgba(255,255,255,0.4);*/
}
.bar h1{
	float:left; 
	display:inline;
	font-size:12px;
	line-height:50px;
	font-weight:300;
	font-family:'Lato';
	color:#fff;
	color:rgba(255,255,255,0.7);
	margin:0;
	padding:0 20px;
	letter-spacing:3px;
	text-transform:uppercase;
}
.bar ul{
	float:right;
	margin:0;
	padding:0;
	height:100%;
}
.bar ul li{
	float:left;
	display:inline;
	margin:0;
	padding:0;
	height:100%;
}
.bar ul li a{
	float:left;
	display:block;
	height:100%;
	margin:0;
	border-left:1px solid #fff;
	border-left:1px solid rgba(255,255,255,0.4);
	overflow:hidden;
	width:60px;
	color:#fff;
	font-size:24px;
	text-align:center;
	padding-top:9px;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	transition: all 0.35s ease;
	text-indent:-9999px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:60px 50px;
	cursor:pointer;
	
}
.bar ul li a:hover{
}
.bar ul li a#tab1{background-image:url(../img/icon_compass.png);}
.bar ul li a#tab2{background-image:url(../img/icon_mountains.png);}
.bar ul li a#tab3{background-image:url(../img/icon_about.png);}
.bar ul li a#tab4{background-image:url(../img/icon_home.png);}

.bar ul li a.active{
	background-color:#262724;
	background-color:rgba(38,39,36,1);
	margin-top:-1px;
	
}
.bar ul li a.active span{
	margin-top:-3px;
}
.bar ul li:first-child a{
	/*border:0;*/
}

.scrollblock{
	background:transparent; 
	position:fixed; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	z-index:1; 
	display:none;
}

.pano_preloader{
	position:fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:#262724;
	background:rgba(38,39,36,1);
	color:#fff;
	z-index:199;
	text-align:center;
	font-family:'Lato';
	
}
.pano_preloader .preloader_info{
	overflow:auto;
	padding:50px 5%;
	margin:0;
	position:relative;
	height:100%;
	color:#fff;
	color:rgba(255,255,255,0.7);
	
	
}
.pano_preloader .preloader_info h3{
	font-size:12px;
	line-height:18px;
	text-transform:uppercase;
	font-weight:300;
	letter-spacing:3px;
	margin:7% 0 -2%;
	
}
.pano_preloader .preloader_info h3 .name{
	clear:left;
	display:block;
	font-size:18px;
	line-height:48px;
	letter-spacing:4.5px;
	
}
.pano_preloader .preloader_info p{
	font-size:14px;
	line-height:21px;
	font-weight:300;
	margin:0 auto;
	max-width:340px;
	padding:0 30px;
	
}	
.pano_preloader .preloader_info img.preloader{
	margin:0 auto;
	width:200px;
	height:200px;
	opacity:0.6;
	
}

.pano_preloader .preloader_info p.exit{
	margin-top:3%;
	opacity:0;
}
.pano_preloader .preloader_info a.home, .pano_preloader .preloader_info a.lowRes{
	width: 200px;
	display: block;
	margin: 20px auto;
	opacity:0;
}
.pano_preloader .preloader_info a.home:hover, .pano_preloader .preloader_info a.lowRes:hover{
	background:#fff;
	background: rgba(255,255,255,0.05);	
}


body#home .background, body#home .backgroundBackground{
	background-size: cover;
	background-position: 50% 50%, 50% 50%;
	background-repeat: no-repeat;	
	position:fixed;
	bottom:0;
	top:0;
	left:0;
	right:640px;
	opacity:0;
	
	-webkit-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
	
}
body#home .backgroundBackground{
	opacity:1;
	border-right:1px solid #fff;
	border-right:1px solid rgba(255,255,255,0.4);
	background:#262724 url('../img/camera-flash-no-background_2.gif') center center no-repeat;
	background:rgba(38,39,36,1) url('../img/camera-flash-no-background_2.gif') center center no-repeat;
	background-size:200px 200px;
	
}
body#home a.close{
	display:none !important;
}
.frontpage_tab{
	position:relative;
	background:#262724;
	background:rgba(38,39,36,1);
	color:#fff;
	z-index:1000;
	text-align:center;
	font-family:'Lato';
	max-width:640px;
	overflow:auto;
	width:100%;
    height: 100%;
    position: absolute;
    right: 0;

}
.frontpage_tab .frontpage_info{
	/*overflow:auto; this is interfering with bottom border? */
	margin:50px;
	position:relative;
	float:left; 
	padding:0;
	color:#fff;
	color:rgba(255,255,255,0.7);

	min-height: -moz-calc(100% - 100px);
	min-height: -webkit-calc(100% - 100px);
	min-height: -o-calc(100% - 100px);
	min-height: calc(100% - 100px);
	
	padding-bottom:200px;
	
	width: -moz-calc(100% - 100px);
	width: -webkit-calc(100% - 100px);
	width: -o-calc(100% - 100px);
	width: calc(100% - 100px);
	
	padding:0 20px 200px;
	
}

.frontpage_tab .frontpage_info h1{
	width: 328px;
    height: 61px;
    background-image: url(../img/HILLTOPS_logo_dot.png);
    background-position: top left;
    background-size: 328px 61px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    margin: 60px auto;
	opacity:0.9;
}
.frontpage_tab .frontpage_info p{
	font-size:14px;
	line-height:21px;
	font-weight:300;
	margin:0 auto;
	max-width:328px;
	text-align:center;
}	
.frontpage_tab .frontpage_info p img{
	width:14px;
	height:auto;
	margin:-3px 2px 0;
}


.frontpage_tab .frontpage_info p span.dot{
	width:6px;
	height:6px;
	margin:1px 3px;
	background:#FFC600;
	border-radius:5px;
	display:inline-block;
	float:none;
	
}


.frontpage_tab .frontpage_info a.random{
	width: 230px;
	display: block;
	margin: 40px auto 0;
}

.frontpage_tab .tab_open_panel{
	position:absolute;
	float:left;
	width:100%;
	bottom:0;
	top:auto;
	margin:0;
	padding:0;
	text-align:left;
	border-bottom:0;
}
.frontpage_tab .tab_open_panel .panorama_info{
	margin:0;
	border:0;
}
.frontpage_tab .tab_open_panel .panorama_info h4{
	display:none;
}
.frontpage_tab .tab_open_panel .panorama_graph_container{
	height:150px;
}

.frontpage_tab .tab_open_panel .panorama_graph{
	height:80px;
	overflow:hidden;
}



a.home_link{
	width:60px;
	text-align:center;
	color:#b1b1b1;
	text-decoration:none;
}
.about a.home_link{
	position:relative;
	right:auto;
	bottom:auto;
	float:right;
	display:inline;
	margin:15px 0 30px 20px;
}
a.home_link img{
	display:inline;
	width:100%;
}
a.home_link span{
	font-family: 'Raleway', sans-serif;
	text-transform:uppercase;
	font-size:14px;
	line-height:14px;
	font-weight:300;
	padding:0 0 7px;
	display:block;
	opacity:0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.about a.home_link span{
	padding:7px 0 0;
}
a.home_link:hover span, html.touch a.home_link span{
	opacity:1;
}



.tab_open_panel{
	position:fixed;
	bottom:50px;
	left:0;
	width:100%;
	background:#262724;
	background:rgba(38,39,36,1);
	
	z-index:90;
	color:#fff;
	color:rgba(255,255,255,0.7);
	border-bottom:1px solid #fff;
	border-bottom:1px solid rgba(255,255,255,0.4);
	display:none;
	
	display:block;
	bottom:-500px;
	-webkit-transition: all 0.35s ease-in;
	-moz-transition: all 0.35s ease-in;
	transition: all 0.35s ease-in;
	
	font-weight:300;
	max-height: -moz-calc(100% - 100px);
	max-height: -webkit-calc(100% - 100px);
	max-height: -o-calc(100% - 100px);
	max-height: calc(100% - 100px);
	
	
	
}
.tab_open_panel.wee{
	width:25%;	
	right:0;
	left:auto;
	
	
}
.tab_open_panel.up{
	bottom:50px;
	-webkit-transition: all 0.35s ease-out;
	-moz-transition: all 0.35s ease-out;
	transition: all 0.35s ease-out;
	
}
.tab_open_panel a.close{
	width:20px;
	height:20px;
	position:absolute;
	display:block;
	top:10px;
	right:10px;
	text-indent:-9999px;
	overflow:hidden;
	background-image:url(../img/close_me_white.png);
	background-size:16px 16px;
	background-position:center center;
	background-repeat:no-repeat;
	opacity:0.7;
}

.tab_open_panel h4{
	font-size:12px;
	line-height:18px;
	text-transform:uppercase;
	letter-spacing:3px;
	font-family:'Lato';
	font-weight:600;
	margin:0;
	padding:0;
}
.tab_open_panel h4.adrift{
	margin:20px 30px;
	text-align:center;
}
.tab_open_panel.hide{
	display:none;
}
.tab_open_panel .panorama_graph_container{
	margin:3% 5% 10px;
	width:90%;
	height:180px;
	position:relative;
}
.tab_open_panel .panorama_graph{
	float:left;
	height:30%;
	height:110px;
	position:relative;
	border-bottom:1px solid #fff;
	border-bottom:1px solid rgba(255,255,255,0.4);
	padding:0;
	width:100%;
	margin:20px 0 0;
	
	
	overflow:hidden;
}
.tab_open_panel .panorama_graph a{
/*	background-image:url(../img/hilltop_triangle_graph.png);
	background-width:100%;
	background-position:top center;
	background-repeat:no-repeat;
OLDE IMAGE BASED MOUNTAIN	
*/
	
	float:left;
	display:inline;

	position:absolute;
	bottom:0;
	
	overflow:visible;
	text-decoration:none;
	
	opacity:1;
	
	-webkit-transition: bottom 1.2s ease;
	-moz-transition: bottom 1.2s ease;
	transition: bottom 1.2s ease;
	bottom:-100px;
}
.tab_open_panel .panorama_graph a span.triangle{
	overflow:hidden;
	display:block;
	width:100%;
	height:100%;
	position:relative;
}
.tab_open_panel .panorama_graph a span.triangle:after{
	content:" ";
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background:#fff;
	background:rgba(255,255,255,0.6);
	position:absolute;

	bottom:-142%;
	left:0;
	width:100%;
	height:200%;
	
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	transition: all 0.35s ease;
	
	background-color:rgba(38,39,36,1);
	border:1px solid rgba(255,255,255,0.4);
	
}
.tab_open_panel .panorama_graph a:hover span.triangle:after{
	background:#fff;
	background:rgba(255,255,255,0.2);
	
/*	background:#d4d4d3;*/
	background:#515250;
}
.tab_open_panel .panorama_graph a.month052011:after{background:rgba(255,75,236,0.2);}
.tab_open_panel .panorama_graph a.year2012:after{background:rgba(255,198,0,0.2);}
.tab_open_panel .panorama_graph a.year2013:after{background:rgba(164,255,75,0.2);}
.tab_open_panel .panorama_graph a.year2014:after{background:rgba(255,80,11,0.2);}
.tab_open_panel .panorama_graph a.year2015:after{background:rgba(217,120,137,0.3);}
.tab_open_panel .panorama_graph a.year2016:after{background:rgba(161,71,35,0.2);}


.tab_open_panel .panorama_graph a span.name{

	color: #fff;
	color: rgba(255,255,255,0.7);
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
	padding-top: 15px;	
	margin-top:-34px;
	position:absolute;
	width:100%;
	opacity:0;
	visibility:hidden;
	
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	
		
}
html.touch .tab_open_panel .panorama_graph a span.name{
	opacity:1;
}
.tab_open_panel .panorama_graph a:hover span{
	opacity:1;
}
.tab_open_panel .panorama_graph .area{
	float:left;
	display:inline;
	position:relative;
	height:100%;
	/*try this for chrome?*/
	height:99.999%;
	top:0;
}
.tab_open_panel .panorama_graph .area + .area{
	
}



.tab_open_panel .panorama_graph .area h3{
	float:left; 
	display:inline;
	font-size:11px;
	line-height:18px;
	letter-spacing:2px;
	font-weight:400;
	font-family:'Lato';
	text-align:center;
	text-transform:uppercase;
	margin:0;
	padding:0;
	position:absolute;
	bottom:-30px;
	width:100%;
	opacity:0;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	transition: all 0.6s ease;
	
}

.tab_open_panel .panorama_info{
	/*border:1px solid rgba(255,255,255,0.4);*/
	overflow:auto;
	margin:3.1% 5%;
	position:relative;
	

}
.tab_open_panel.wee .panorama_info{
	margin:9.3% 15%;
}

.tab_open_panel .text_info{
	overflow:auto;
	padding:20px 30px 100px;
	float:left;
	width:78%;
	height:100%;
	min-height:230px;

}
.tab_open_panel .text_info h3{
	text-transform:uppercase;
	font-weight:100;
	font-size:18px;
	line-height:24px;
	margin:0;
}
.tab_open_panel .text_info p{
	font-size:12px;
	line-height:18px;
	max-width:50%;
	margin-left:10px;
	margin-bottom:20px;
}
.tab_open_panel .text_info a.mountain{
	width:200px;
	height:140px;
	position:absolute;
	bottom:100px;
	right:23%;
	right: -moz-calc(22% + 20px);
	right: -webkit-calc(22% + 20px);
	right: -o-calc(22% + 20px);
	right: calc(22% + 20px);
	
	overflow:hidden;
	color:#fff;
	color:rgba(255,255,255,0.7);
	text-align:center;
	text-decoration:none;
	font-size:12px;
	line-height:18px;
	text-transform:uppercase;
	padding-top:15px;
	
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
	
	
}
.tab_open_panel .text_info a.mountain + a.mountain{
	right: -moz-calc(22% + 200px);
	right: -webkit-calc(22% + 200px);
	right: -o-calc(22% + 200px);
	right: calc(22% + 200px);

}
.tab_open_panel .text_info a.mountain span.peak{
	width:140px;
	height:140px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background:rgba(255,198,0,0.6);
	position:absolute;
	bottom:-71px;
	left:30px;
	
	-webkit-transition: background-color 0.35s ease;
	-moz-transition: background-color 0.35s ease;
	transition: background-color 0.35s ease;
	
}

.tab_open_panel .text_info a.mountain.year2011 span.peak{background:rgba(255,198,0,0.6);}
.tab_open_panel .text_info a.mountain.year2012 span.peak{background:rgba(255,75,236,0.6);}
.tab_open_panel .text_info a.mountain.year2013 span.peak{background:rgba(164,255,75,0.6);}
.tab_open_panel .text_info a.mountain.year2014 span.peak{background:rgba(255,80,11,0.6);}
.tab_open_panel .text_info a.mountain.year2015 span.peak{background:rgba(217,129,137,0.6);}

.tab_open_panel .text_info a.mountain.year2011:hover span.peak{background:rgba(255,198,0,0.8);}
.tab_open_panel .text_info a.mountain.year2012:hover span.peak{background:rgba(255,75,236,0.8);}
.tab_open_panel .text_info a.mountain.year2013:hover span.peak{background:rgba(164,255,75,0.8);}
.tab_open_panel .text_info a.mountain.year2014:hover span.peak{background:rgba(255,80,11,0.8);}
.tab_open_panel .text_info a.mountain.year2015:hover span.peak{background:rgba(217,129,137,0.8);}



.tab_open_panel .text_info a.mountain span.weather{
	width:50px;
	height:50px;
	border-radius:50px;
	position:absolute;
	top:55px;
	left:40px;
	z-index:1;
	text-align:center;
	font-size:32px;
	line-height:30px;
	padding:10px 0px;
	background:#262724;
	background:rgba(38,39,36,1);
	color:#fff;
	/*border:1px solid rgba(255,255,255,0.4);*/
}	

.tab_open_panel .statistics{
	overflow:auto;
	position:relative;
	float:left;
	width:78%;
	position:absolute;
	bottom:0;
	height:101px;
	border-top:1px solid #fff;
	border-top:1px solid rgba(255,255,255,0.5);
	
}
.tab_open_panel .statistics h4{
	margin:20px 30px 10px;
}


.tab_open_panel .statistics div{
	float:left;
	border-right:1px solid #fff;
	border-right:1px solid rgba(255,255,255,0.4);
	width:22%;
	height:100%;
	
}
.tab_open_panel .statistics div:last-child{
	border-right:0;
}
.tab_open_panel .statistics div > span{
	font-size:14px;
	line-height:18px;
	margin:0 0 20px 40px;
	
}
.tab_open_panel .statistics div span span{
	font-size:10px;
}
#legend{
	z-index:100;
	overflow:auto;
	float:right;
	border-left:1px solid #fff;
	border-left:1px solid rgba(255,255,255,0.4);
	width:22%;
	padding:20px 30px;
	min-height:160px;
}
#legend dt span.label{
	font-size:11px;
	line-height:11px;
	color:#fff;
	background:#20110f;
	text-transform:uppercase;
	padding:8px 10px 0;
	margin:0;
	overflow:hidden;
	display:inline-block;
	height:19px;
	float:left;
}
#legend dl{
	font-size:12px;
	line-height:18px;
	text-transform:uppercase;
}
#legend dt{
	width: 10px;
	height: 10px;
	text-indent:-9999px;
	position:relative;
	clear:left;
	padding:10px;
	overflow:hidden;
	float:left;
	display:inline;
	width:10%;
	
}
#legend dt span{
overflow: hidden;
text-indent:-9999px;
border-radius:5px;
width:10px;
height:10px;
position:absolute;
top:7px;
left:4px;
}

#legend dd {
margin: -3px 0 6px 0;
padding:7px 5px 3px 7px;
float:left;
display:inline;
width:80%;
}

#legend p.info{
	clear: left;
	padding: 10px 0 0; 
	clear: left;
	text-transform:none;
	opacity:0.8;
}
#legend p.info a{
	color:#fff;
}


.tab_open_panel .panorama_info .half{
	float:left;
	width:36%;
	margin:0 0 0 17%;
	padding:20px 5%;
	width:50%;
	margin:0;
	padding:20px 30px;
	border-right:1px solid #fff;
	border-right:1px solid rgba(255,255,255,0.4);
	
}
.tab_open_panel .panorama_info .half + .half{
	margin-left:0;
	border-right:0 solid rgba(255,255,255,0.4);
}


.icon_legend dl{
	font-size:14px;
	line-height:18px;
	overflow:auto;
}
.icon_legend dt{
	width: 6%;
	height: 10px;
	position:relative;
	clear:left;
	padding:5px 2px;
	overflow:visible;
	float:left;
	display:inline;
}
.icon_legend dt img{
	width:16px;
	height:auto;
	float:left;
}
.icon_legend dt span{
overflow: hidden;
text-indent:-9999px;
border-radius:5px;
width:10px;
height:10px;
position:absolute;
top:7px;
left:4px;
}

.icon_legend dd {
margin: -5px 0 8px 0;
padding:7px 5px 3px 7px;
float:left;
display:inline;
width:94%;
font-weight:300;
font-size:14px;
line-height:18px;
}
.about p, .wee p{
	font-size:14px;
	line-height:21px;
	font-weight:300;
	margin-left:10px;
	margin:14px 10px 0;
}
.wee p{
	text-align:center;
}
a.homelink{
	width: 70%;
	display: block;
	margin: 40px auto;
}

.retinaOptions{
	display:none;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 40px;
  height: 20px;
  background-color:#fff;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50px;
  transition: background 0.2s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
  background-color:#262724;
  background-color: rgba(38,39,36,1);
  border-radius: 60px;
  transition: background 0.2s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 12px;
  background-color:#fff;
  background-color: rgba(255,255,255,0.4);
  border-radius: 12px;
  transition: margin 0.2s, background 0.2s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: rgba(255,80,11,0.6);
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 20px;
  background-color: rgba(255,80,11,0.6);
}
.retinaSwitch{
	margin:10px;
}
.retinaSwitch div{
	float:left;
	display:inline;
	margin:0 10px;
}
.retinaSwitch span{
	  font-size: 14px;
	  line-height: 18px;
	float:left;
	display:inline;
}




/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
	border-radius: 0; 
	background: #262724;
	background:rgba(38,39,36,1);
	color: #fff;
	color:rgba(255,255,255,0.7);
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
	font-family: 'Raleway', sans-serif;
	font-size: 11px;
	line-height: 16px;
	text-transform:uppercase;
	letter-spacing:1px;
	padding: 12px 15px;
	overflow: hidden;
	
	padding: 7px 10px 5px;
	
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
	/* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
	cursor: help;
	margin-left: 4px;
}








/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
	padding: 0;
	font-size: 0;
	line-height: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999999;
	pointer-events: none;
	width: auto;
	overflow: visible;
}
.tooltipster-base .tooltipster-content {
	overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
	display: block;
	width: 0; 
	height: 0;
	position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-top: 8px solid;
	bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-top: 9px solid;
	bottom: -7px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-bottom: 8px solid;
	top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	border-left: 9px solid transparent !important;
	border-right: 9px solid transparent !important;
	border-bottom: 9px solid;
	top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
	left: 0;
	right: 0;
	margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
	left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
	left: 5px;
}
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
	right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
	right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-left: 8px solid;
	top: 50%;
	margin-top: -7px;
	right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-left: 9px solid;
	margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 8px solid transparent !important;
	border-bottom: 8px solid transparent !important; 
	border-right: 8px solid;
	top: 50%;
	margin-top: -7px;
	left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
	border-top: 9px solid transparent !important;
	border-bottom: 9px solid transparent !important; 
	border-right: 9px solid;
	margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
	opacity: 0;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	-ms-transition-property: opacity;
	transition-property: opacity;
}
.tooltipster-fade-show {
	opacity: 1;
}

.tooltipster-grow {
	-webkit-transform: scale(0,0);
	-moz-transform: scale(0,0);
	-o-transform: scale(0,0);
	-ms-transform: scale(0,0);
	transform: scale(0,0);
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
	opacity: 0;
	-webkit-transform: rotateZ(4deg);
	-moz-transform: rotateZ(4deg);
	-o-transform: rotateZ(4deg);
	-ms-transform: rotateZ(4deg);
	transform: rotateZ(4deg);
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
}
.tooltipster-swing-show {
	opacity: 1;
	-webkit-transform: rotateZ(0deg);
	-moz-transform: rotateZ(0deg);
	-o-transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
	top: 0;
	-webkit-transition-property: top;
	-moz-transition-property: top;
	-o-transition-property: top;
	-ms-transition-property: top;
	transition-property: top;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	transition-property: all;
	top: 0px !important;
	opacity: 0;
}

.tooltipster-slide {
	left: -40px;
	-webkit-transition-property: left;
	-moz-transition-property: left;
	-o-transition-property: left;
	-ms-transition-property: left;
	transition-property: left;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	transition-property: all;
	left: 0px !important;
	opacity: 0;
}


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
	opacity: 0.5;
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.fancybox-title-over-wrap span a{
	display:none;
}



/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

@media only screen and (max-width: 1100px) {
	.tab_open_panel .statistics div{
		width:32%;
	}
	
	
	.tab_open_panel .text_info p{
		max-width:90%;
		margin-bottom:1em;
	}
	.tab_open_panel .text_info{
		padding-bottom:240px;
		border-right:1px solid #fff;
		border-right:1px solid rgba(255,255,255,0.4);
	}
	#legend{
		border-left:0;
	}
	
	.tab_open_panel.wee{
		width:33%;
	}

}

@media only screen and (max-width: 850px) {
	
	.tab_open_panel{
		bottom:-1000px;
	}
	
	.tab_open_panel .statistics h4{
		margin:19px 20px 10px;
	}
	.tab_open_panel .text_info{
		padding:20px 20px 240px;
	}
	#legend{
		padding:20px;
	}
	#legend dl{
		font-size:11px;
	}
	.tab_open_panel .statistics div > span{
		margin:0 0 20px 30px;
	}

	.tab_open_panel.wee{
		width:40%;
	}


}
@media only screen and (max-width: 800px) {



	.tab_open_panel .panorama_info{
		margin:20px;
		border:0;
	}
	.tab_open_panel .text_info h4{
		display:none;
	}

	.tab_open_panel .text_info a.mountain{
		width:150px;
		height:105px;
		padding-top:10px;
		bottom:125px;
	}
	.tab_open_panel .text_info a.mountain + a.mountain{
		right: -moz-calc(22% + 150px);
		right: -webkit-calc(22% + 150px);
		right: -o-calc(22% + 150px);
		right: calc(22% + 150px);
	}
	.tab_open_panel .text_info a.mountain span.peak{
		width:105px;
		height:105px;
		bottom:-53px;
		left:22px;
		
	}
	.tab_open_panel .text_info a.mountain span.weather{
		width:37px;
		height:37px;
		top:41px;
		left:30px;
		font-size:24px;
		line-height:22px;
	}
	.tab_open_panel .statistics{
		height:auto;
		padding:20px 0;
	}
	.tab_open_panel .statistics div{
		width:100%;
		border:0;
		
	}
	.tab_open_panel .statistics h4{
		float:left;
		margin:10px 10px 0px 20px;
	}
	.tab_open_panel .statistics div > span{
		float:left;
		margin:10px 0px 0px;
		font-size:12px;
	}
	.tab_open_panel .text_info p{
		margin-left:0;
	}
	
	.tab_open_panel .panorama_info .half{
		width:100%;
		border-right:0;
	}
	.tab_open_panel .panorama_info .half + .half{
		border-top:1px solid #fff;
		border-top:1px solid rgba(255,255,255,0.4);
	}
	.tab_open_panel.wee{
		width:50%;
	}
	
	
	
	.bar h1{
		display:none;
		
		position: fixed;
	  display: block;
	  /* height: 50px; */
	  top: 0;
	  background:#262724;
	  background: rgba(38,39,36,1);
	  width: 100%;
	  overflow: auto;
	  line-height: 20px;
	  padding: 15px 20px;
	}
	.bar ul{
		float:none;
		width:100%;
	}
	.bar ul li{
		width:25%;
	}
	.bar ul li a{
		width: -moz-calc(100% - 1px);
		width: -webkit-calc(100% - 1px);
		width: -o-calc(100% - 1px);
		width: calc(100% - 1px);
	}
	.bar ul li:first-child a{
		border-left:0;
	}
	
	.frontpage_tab{
		margin-bottom:0;
		height:auto;
		max-width:100%;
	}
	.frontpage_tab .frontpage_info{
		margin:30px;
		width: -moz-calc(100% - 60px);
		width: -webkit-calc(100% - 60px);
		width: -o-calc(100% - 60px);
		width: calc(100% - 60px);
		min-height:auto;
	}
	body#home{
		position:relative;
		
	}
	body#home .background, body#home .backgroundBackground{
		right:0;
		position:relative;
		height:65vh;
		margin-top:-65vh;
		border-right:0;
	}
	body#home .backgroundBackground{
		margin-top:0;
		border-bottom:1px solid #fff;
		border-bottom:1px solid rgba(255,255,255,0.4);
		
	}
	

	
}

@media only screen and (max-width: 750px) {
	.tab_open_panel .text_info{
		width:100%;
		border-right:0;
		position:relative;
		padding:20px 20px 120px;
		min-height:0;
	}
	.tab_open_panel .text_info a.mountain{
		right:20px;
		bottom:0;
		
	}
	.tab_open_panel .text_info a.mountain + a.mountain{
		right:150px;
	}

	.tab_open_panel .statistics{
		width:100%;
		position:relative;
	}
	#legend{
		width:100%;
		border:0;
		border-top:1px solid #fff;
		border-top:1px solid rgba(255,255,255,0.4);
		float:left;
		clear:left;
		min-height:0;

	}
	#legend dt{
		width:auto;
		clear:none;
	}
	#legend dt+dd+dt+dd+dt+dd+dt{
		/*clear:left;*/
	}
	#legend dt+dd+dt+dd+dt+dd+dt+dd+dt{
		clear:none;
	}
	
	#legend dd{
		width:auto;
		padding:7px 5px 3px 0;
	}
	
	
	.pano_preloader .preloader_info{
		margin:30px;
		height:100%;
	}
	
	.tab_open_panel.wee{
		width:100%;
	}
	
}
@media only screen and (max-width: 500px) {
	#legend dt+dd+dt+dd+dt+dd+dt{
		clear:left;
	}
	#legend dt+dd+dt+dd+dt+dd+dt{
		clear:none;
	}
	#legend dt+dd+dt+dd+dt+dd+dt+dd+dt+dd+dt{
		clear:none;
	}
	
	.frontpage_tab .frontpage_info h1{
		width:100%;
		background-size:100%;
		min-height:70px;
	}
	
	.tab_open_panel .panorama_info .half{
		padding:20px;
	}
	.about p, .wee p{
		margin:14px 0 0;
	}
	.retinaSwitch{
		margin:10px 0;
	}
	
	
}

@media only screen and (max-height: 600px) {
	.pano_preloader .preloader_info{
		padding:20px 5%;
	}
	.pano_preloader .preloader_info h3{
		margin:4% 0 -2%;
		
	}
}
@media only screen and (max-height: 500px) {
	.pano_preloader .preloader_info{
		padding:20px 5%;
	}
	.pano_preloader .preloader_info h3{
		margin:2% 0 -2%;
		
	}
}
@media only screen and (max-height: 480px) {
	.pano_preloader .preloader_info img.preloader{
		width:140px;
		height:140px;
	}
	.pano_preloader .preloader_info h3 .name{
		font-size:14px;
		line-height:30px;
		letter-spacing:2.5px;
	}
}


@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { 
	.retinaOptions{
		display:block;
	}
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


@font-face {
	font-family: 'Pe-icon-7-weather';
	src:url('../fonts/Pe-icon-7-weather.eot?-ujaud2');
	src:url('../fonts/Pe-icon-7-weather.eot?#iefix-ujaud2') format('embedded-opentype'),
		url('../fonts/Pe-icon-7-weather.woff?-ujaud2') format('woff'),
		url('../fonts/Pe-icon-7-weather.ttf?-ujaud2') format('truetype'),
		url('../fonts/Pe-icon-7-weather.svg?-ujaud2#Pe-icon-7-weather') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="pe-7w-"], [class*=" pe-7w-"] {
	display: inline-block;
	font-family: 'Pe-icon-7-weather';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pe-7w-wind:before {
	content: "\e600";
}
.pe-7w-wind-sun:before {
	content: "\e601";
}
.pe-7w-wind-moon:before {
	content: "\e602";
}
.pe-7w-upload:before {
	content: "\e603";
}
.pe-7w-umbrella:before {
	content: "\e604";
}
.pe-7w-thermometer-full:before {
	content: "\e605";
}
.pe-7w-thermometer-3-4:before {
	content: "\e606";
}
.pe-7w-thermometer-1-4:before {
	content: "\e607";
}
.pe-7w-thermometer-1-2:before {
	content: "\e608";
}
.pe-7w-thermometer-0:before {
	content: "\e609";
}
.pe-7w-sunset:before {
	content: "\e60a";
}
.pe-7w-sunrise:before {
	content: "\e60b";
}
.pe-7w-sun:before {
	content: "\e60c";
}
.pe-7w-snow:before {
	content: "\e60d";
}
.pe-7w-snow-sun:before {
	content: "\e60e";
}
.pe-7w-snow-moon:before {
	content: "\e60f";
}
.pe-7w-snow-alt:before {
	content: "\e610";
}
.pe-7w-snow-alt-sun:before {
	content: "\e611";
}
.pe-7w-snow-alt-moon:before {
	content: "\e612";
}
.pe-7w-rain:before {
	content: "\e613";
}
.pe-7w-rain-sun:before {
	content: "\e614";
}
.pe-7w-rain-moon:before {
	content: "\e615";
}
.pe-7w-rain-alt:before {
	content: "\e616";
}
.pe-7w-rain-alt-sun:before {
	content: "\e617";
}
.pe-7w-rain-alt-moon:before {
	content: "\e618";
}
.pe-7w-moon:before {
	content: "\e619";
}
.pe-7w-lightning:before {
	content: "\e61a";
}
.pe-7w-lightning-sun:before {
	content: "\e61b";
}
.pe-7w-lightning-rain:before {
	content: "\e61c";
}
.pe-7w-lightning-rain-sun:before {
	content: "\e61d";
}
.pe-7w-lightning-rain-moon:before {
	content: "\e61e";
}
.pe-7w-lightning-moon:before {
	content: "\e61f";
}
.pe-7w-light:before {
	content: "\e620";
}
.pe-7w-hurricane:before {
	content: "\e621";
}
.pe-7w-hail:before {
	content: "\e622";
}
.pe-7w-hail-sun:before {
	content: "\e623";
}
.pe-7w-hail-moon:before {
	content: "\e624";
}
.pe-7w-fog:before {
	content: "\e625";
}
.pe-7w-fog-sun:before {
	content: "\e626";
}
.pe-7w-fog-moon:before {
	content: "\e627";
}
.pe-7w-drizzle:before {
	content: "\e628";
}
.pe-7w-drizzle-sun:before {
	content: "\e629";
}
.pe-7w-drizzle-moon:before {
	content: "\e62a";
}
.pe-7w-drizzle-alt:before {
	content: "\e62b";
}
.pe-7w-drizzle-alt-sun:before {
	content: "\e62c";
}
.pe-7w-drizzle-alt-moon:before {
	content: "\e62d";
}
.pe-7w-download:before {
	content: "\e62e";
}
.pe-7w-degree-farenheit:before {
	content: "\e62f";
}
.pe-7w-degree-celcius:before {
	content: "\e630";
}
.pe-7w-compass:before {
	content: "\e631";
}
.pe-7w-compass-west:before {
	content: "\e632";
}
.pe-7w-compass-south:before {
	content: "\e633";
}
.pe-7w-compass-north:before {
	content: "\e634";
}
.pe-7w-compass-east:before {
	content: "\e635";
}
.pe-7w-cloud:before {
	content: "\e636";
}
.pe-7w-cloud-wind:before {
	content: "\e637";
}
.pe-7w-cloud-wind-sun:before {
	content: "\e638";
}
.pe-7w-cloud-wind-moon:before {
	content: "\e639";
}
.pe-7w-cloud-sun:before {
	content: "\e63a";
}
.pe-7w-cloud-moon:before {
	content: "\e63b";
}