/*	Resets
	------	*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Hide Link Highlighting */
a { outline : none; }
a img { outline : none; }
img { border : 0; }

/* Custom Fonts */

@font-face {
    font-family: "Circular-Pro-Black";
    src:url("../fonts/lineto-circular-pro-black.eot");
    src:url("../fonts/lineto-circular-pro-black.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-black.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-black.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Circular-Pro-Book";
    src:url("../fonts/lineto-circular-pro-book.eot");
    src:url("../fonts/lineto-circular-pro-book.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-book.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(0,0,0,0); border: 0; }
::-moz-selection 	{background: rgb(0,0,0,0); border: 0; }
img::selection 		{background: transparent; border: 0; }
img::-moz-selection	{background: transparent; border: 0; }
body {
	-webkit-tap-highlight-color: rgb(0,0,0,0); 
	font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif;
	  line-height: 1; background: #000;
}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */ 

#vframe { width: 100%; margin: 0 auto; position: relative; font-family: 'helvetica neue', helvetica, arial, sans-serif; overflow: hidden; }

#viewer { width:100%; height: auto; margin: 0 auto; clear: both; position: relative; } 

#viewer .vr img { width: 100%; }


/* Vertical Align Viewer */
.outer { display: table; position: absolute; height: 100%; width: 100%; }
.middle { display: table-cell; vertical-align: middle; }
.inner { margin-left: auto; margin-right: auto;  width: 100%; }

/* Logos */
img.threedeep {display: block; width: 50px; position: absolute; z-index: 100; top: 10px; right: 10px; border: 0; }

.logos { position: absolute; right: 10px; bottom: 5px; z-index: 100; display: block; overflow: hidden; }
.logos a { float: left; width: 60px; margin-left: 10px; display: block; cursor: pointer !important; }
.logos a img { width: 100%; height: auto; cursor: pointer !important; border: 0; }

/* Old Browser Warnings */

#noscript {width: 50%; left: 25%; top: 40%; background: #EEE; font-size: 80%; line-height: 120%; text-transform: uppercase; text-align: center; color: #666; padding: 10px 15px; border-radius: 6px; -webkit-border-radius: 6px; position: absolute; z-index: 200; }

#ie-upgrade { position: absolute; z-index: 9999; display: none; width: 260px; left: 50%; top: 50%; margin: -110px 0 0 -150px; background: #EEE; line-height: 120%; text-align: center; padding: 20px;  }
#ie-upgrade h3 { color: #333; text-transform: uppercase; margin-bottom: 10px; }
#ie-upgrade p { color: #666; font-size: 14px; }
#ie-upgrade p a { color: #666; } 
#ie-upgrade a.btn { display: block; background: #336699; color: #FFF; padding: 8px 10px; text-align: center; width: 100px; margin: 15px auto 0 auto; text-decoration: none; text-transform: uppercase; font-size: 14px; } 

/* Toggles */

#toggle-wrap { position: absolute; z-index: 8000; left: 0; top: 0; overflow: hidden; display: block; height: 100%; pointer-events: none; }

.toggle-switch { display: block; width: 35px; padding: 8px; margin: 0; position: relative; float: left; overflow: hidden; }

#toggle-btns {  position: relative; float: left; overflow: hidden; height: 100%; background-color: rgba(0,0,0,0.3);  }
#toggle-btns a { width: 35px; height: 35px; display: block; overflow: hidden; padding: 8px 8px 0 8px; clear: both; pointer-events: auto; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;  }
#toggle-btns a img, #toggle-btns a svg { width: 100%; height: auto; display: block; position: relative !important; }

#toggle-btns a:hover { background-color: #212121; }

#toggle-btns a.toggle-content { opacity: 0.5; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
#toggle-btns a.toggle-content.active { opacity: 1; }

#toggle-btns a.toggle.active { background-color: #212121; }

/* Sidebars */

.sidebar { padding: 0 10px; position: relative; float: left; height: 100% !important; overflow: hidden; display: none; background-color: #212121; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; direction: rtl; }
.sidebar p { color: #CCC; font-size: 10px; text-align: center; margin: 0 0 10px 0; }
.sidebar a { 
	display: block; width: 30px; overflow: hidden; padding: 8px; border: 1px solid #999; margin: 0 auto 10px auto; text-decoration: none; 
	-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.sidebar a img, .sidebar a svg { display: block; width: 30px; height: 30px; margin: 0 auto; opacity: 0.5; position: relative !important; }
.sidebar a span { display: none; font-size: 10px; line-height: 10px; color: #999; text-decoration: none; text-align: center; padding: 5px 5px 0 5px; }

.sidebar a:hover img, .sidebar a:hover svg { opacity: 1; }
.sidebar a:hover { border: 1px solid #FFF; }
.sidebar a:hover span { color: #FFF; }

.sidebar a.active { border: 1px solid #FFF; }
.sidebar a.active img, .sidebar a.active svg { opacity: 1; }
.sidebar a.active span { color: #FFF; }

.sidebar-inner { display: block; padding: 20px 0 20px 0; direction: ltr; }

#views, #tours, #info { display: none; }

#tours a { padding: 0; display: block; width: 80px; height: 80px; overflow: hidden; }
#tours a img { position: relative; width: 100%; height: auto; display: block; margin: 0; opacity: 1; }
#tours a.active { border: 1px solid #FFF; }
#tours span { display: block; color: #CCC; font-size: 10px; line-height: 10px; margin-bottom: 10px; text-align: center; text-transform: uppercase; }

#info { width: 40%; text-align: left; height: 100%; padding: 0px 20px 0px 20px; cursor: default !important; pointer-events: auto;  }
/*#info:hover { overflow-y: auto; -webkit-overflow-scrolling: touch; }*/
#info ul { margin: 10px 0; padding: 0; color: #CCC; text-transform: uppercase; font-size: 11px; }
#info ul li { text-align: left; margin: 0 0 3px 0; font-size: 11px; line-height: 16px; color: #FFF; }
#info ul li span { color: #CCC; margin-left: 10px; text-align: right; }
#info h1 { color: #FFF; font-size: 16px; text-transform: uppercase; font-style: italic; font-weight: bold; text-align: left; margin: 0 0 15px 0; }
#info p { color: #CCC; font-size: 12px; line-height: 18px; font-weight: normal; text-align: left; margin: 0 0 15px 0; }
#info img { width: 100%; margin-bottom: 15px; position: relative !important; }


/* Plan and Profile Views  */

.views { position: absolute; top: 0; left: 0; z-index: 100; display: none; overflow: hidden; width: 100%; height: 100%; background: rgba(0,0,0,0.8); cursor: default; }
.views img { width: 100%; height: auto; display: block; }

/* View 360  */

#view-360 { position: absolute; top: 0; left: 0; z-index: 100; display: none; overflow: hidden; width: 100%; height: 100%; background: rgba(0,0,0,0.8); cursor: default; }
#view-360 iframe { width: 100%; height: 100%; display: block; }

/* Markers and Labels */

.mpos { width: 0px; height: 0px; position: absolute; }
.marker { position: absolute; width: 30px; height: 30px; margin-bottom: -100%; bottom: 0; margin: 30px 0 0px 0; cursor: pointer !important; }
.marker:hover, .marker:focus { cursor: pointer !important; }
.inactive { display: none !important; }

.photo { background: url(../images/icons/icon-photos.svg) 0 0 no-repeat; background-size: 100%; cursor: pointer;  }
.photo:hover { margin-top: 2px; cursor: pointer !important; } 

.info { background: url(../images/icons/icon-360.png) 0 0 no-repeat; background-size: 90%; }
.info:hover { margin-top: 2px; cursor: pointer !important; }

.video { background: url(../images/icons/icon-videos.svg) 0 0 no-repeat; background-size: 100%; cursor: pointer;  }
.video:hover { margin-top: 2px; cursor: pointer !important; }

.mkr-360 { background: url(../images/icons/icon-360.png) 0 0 no-repeat; background-size: 100%; cursor: pointer;  }
.mkr-360:hover { margin-top: 2px; cursor: pointer !important; } 

/* Popup Inline Content */

.popup { width: 100%; height: 100%; min-height: 100px; padding: 0px; overflow: hidden; float: left; font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif; }
.popup.portrait img { width: 50%; margin: 0 auto; float: none; }

/* Popups - Non Flexbox */

.popup-content { display: block; }
.popup-content .content { display: block; }
.popup-content .content.text { display: block; position: absolute; z-index: 100; background: #333; display: block; bottom: 0; left: 0;}
.popup-content .content.text p { display: none; }

.popup-content .content.image img { width: 100%; height: 100%; }

.popup-content .content-inner { padding: 12px; }

.popup-content h5 { font-size: 12px; line-height: 12px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0; font-weight: 400; font-family: "Circular-Pro-Black", "helvetica nenu", helvetica, arial, sans-serif; }
.popup-content p { color: #CCC; font-size: 12px; line-height: 14px; margin: 0; padding: 0; }

.popup.information .caption h5 { padding: 20px; }
.popup.information .caption p { padding: 0px 20px 20px 20px; }

.flowplayer { width: 100% !important; }
.flowplayer iframe { width: 100%; height: 100%; }
.flowplayer video { width: 100%; height: 100%; }

.fancybox-title { display: none !important; }
.flowplayer { overflow: hidden !important; }
.fp-ui { overflow: hidden !important; }
.fancybox-inner { overflow: hidden !important; }
.flowplayer .fp-speed { display: none !important; }
.flowplayer	.fp-embed { display: none !important; }
.flowplayer	.fp-fullscreen { display: none !important; }
.prompt {  }
.fp-help { display: none !important; }

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.button { padding: 10px 20px; text-transform: uppercase; text-decoration: none; background-color: #666; text-align: center; font-size: 12px; }
.button:hover { background-color: #333; }

.sonar { 
	position: absolute; z-index: 2000; top: 20px; right: 20px; 
	color: #FFF; border-radius: 100px; -webkit-border-radius: 100px; padding-left: 45px; 
	background: url(../images/icons/icon-video-button.png) no-repeat left 15px center; background-size: 20px; background-color: #666;
}




/* Orientatation Hint */
@media screen and (orientation: portrait) and (max-width: 767px) {
  #orientation { display: none; }
}

@media screen and (orientation: landscape){
	#orientation { display: none; }
}



/* Mobile Screen Styles */
@media screen and (min-width: 1px) and (max-width: 700px) {

	#vframe { margin-top: 0; }

	.marker {-webkit-transform: scale(0.7); transform: scale(0.7); margin: 0 0 8px -15px !important; }

	.logos a { width: 60px; margin-left: 10px; }
	.hide-mobile { display: none !important; }
}


/* //////////////////////////////// ipad //////////////////////////////// */  

@media screen and (min-width: 480px) and (max-width: 767px) {

	.marker {-webkit-transform: scale(0.9); transform: scale(0.9); margin: 0 0 13px -10px !important; }

	#vframe { margin-top: 0%; }

	img.threedeep {width: 60px; position: top: 15px; right: 15px;  }

	.logos { right: 10px; bottom: 5px; }
	.logos a { width: 80px; margin-left: 10px; }

	.flowplayer iframe { width: 100%; height: 100%; }

	#noscript { top: 45%; }

}

/* Medium Screen Styles */ 
@media screen and (min-width: 768px) { 

	#vframe { width: 100%; height: 100%; max-width: 1920px;}
	#viewer { width: 100%; height: 100%; }

	img.threedeep {display: block; width: 80px; position: absolute; top: 15px; right: 18px; border: 0; }
	.logos { position: absolute; right: 20px; bottom: 10px; }
	.logos a { width: 100px; margin-left: 20px; }
	
	.flowplayer { width: 100% !important; }
	.flowplayer iframe { width: 100%; height: 100%; }

	.hide-mobile { display: block !important; }	

	#orientation { display: none; }

	#noscript { top: 48%; }

	/* Markers */
	.marker { width: 35px; height: 35px; margin: 0px 0 30px 0; }

	/* Toggles */
	#toggle-wrap {  }
	#toggle-btns { margin-top: 20px; display: block; height: auto; background-color: rgba(0,0,0,0.3); }
	#toggle-btns a { width: 35px; height: 35px; padding: 8px; }
	
	/* Sidebars */
	
	.sidebar { padding: 15px; height: 100%; }
	.sidebar p { font-size: 10px; margin: 0 0 10px 0; }
	.sidebar a { width: 50px; padding: 8px; margin: 0 auto 10px auto; }
	.sidebar a img, .sidebar a svg { width: 40px; height: 40px; }
	.sidebar a span { display: block; font-size: 10px; padding: 5px 0 0 0; }
	
	#tours a { width: 90px; height: 90px; }
	
	#info { width: 30%; padding: 0 20px; text-align: left; }
	#info ul { margin: 10px 0; font-size: 12px; }
	#info ul li { margin: 0 0 5px 0; }
	#info h1 { font-size: 18px; margin: 0 0 15px 0; }
	#info p { font-size: 12px; line-height: 18px; margin: 0 0 15px 0; }
	      
}

/* Big Screen Styles */ 
@media screen and (min-width: 1200px) { 

	#vframe { width: 100%; height: 100%; max-width: 1920px;}
	#viewer { width: 100%; height: 100%; }

	img.threedeep {display: block; width: 80px; position: absolute; top: 15px; right: 18px; border: 0; }
	.logos { position: absolute; right: 30px; bottom: 30px; }
	.logos a { width: 120px; }
	
	.flowplayer { width: 100% !important; }
	.flowplayer iframe { width: 100%; height: 100%; }

	.marker { width: 40px; height: 40px; margin: 0px 0 30px 0; }
	.marker.info { margin: 0px 0 40px 0; }

	.hide-mobile { display: block !important; }	

	#orientation { display: none; }

	#noscript { top: 48%; }

	/* Toggles */

	#toggle-btns { margin-top: 20px; }
	#toggle-btns a { width: 45px; height: 45px; padding: 8px; }
	
	/* Sidebars */
	
	.sidebar { padding: 15px; }
	.sidebar p { font-size: 10px; margin: 0 0 10px 0; }
	.sidebar a { width: 50px; padding: 8px; margin: 0 auto 10px auto; }
	.sidebar a img, .sidebar a svg { width: 40px; height: 40px; }
	.sidebar a span { display: block; font-size: 10px; padding: 5px 0 0 0; }
	
	#tours a { width: 100px; height: 100px; }
	
	#info { width: 30%; padding: 0 20px; text-align: left; }
	#info ul { margin: 10px 0; font-size: 12px; }
	#info ul li { margin: 0 0 10px 0; }
	#info h1 { font-size: 18px; margin: 0 0 15px 0; }
	#info p { font-size: 12px; line-height: 18px; margin: 0 0 15px 0; }

	/* Popups - Flexbox */

	.popup-content { 
		display: -webkit-flex;
  		display: -ms-flexbox;
  		display: flex;
  		overflow: hidden;
  	}
	.popup-content .content { flex: 1;  }
	.popup-content .content:nth-child(1) { flex: 1; background-color: #333; }
	.popup-content .content:nth-child(2) { flex: 2; }
	/* .popup-content .content:nth-child(1) { -webkit-order: 1; -ms-flex-order: 1; order: 1; }
	.popup-content .content:nth-child(2) { -webkit-order: 2; -ms-flex-order: 2; order: 2; } */

	.popup-content .content-inner { padding: 15px; }

	.popup-content .content.text { display: block; position: relative; bottom: auto; left: auto;}

	.popup-content .content.text h5 { font-size: 18px; line-height: 22px; color: #FFF; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; }
	.popup-content .content.text p { color: #CCC; font-size: 12px; line-height: 14px; margin: 0 0 10px 0; padding: 0; display: block; }
	      
}

/* Big Screen Styles */ 
@media screen and (min-width: 1500px) { 

	.popup-content .content-inner { padding: 20px; }

	.popup-content .content.text h5 { font-size: 20px; line-height: 25px; margin: 0 0 20px 0; padding: 0; }
	.popup-content .content.text p { font-size: 14px; line-height: 18px; }

}

/* Toggle Functionailty */

/* control show/hide marker by css *//* hide by default */ 
#threesixty .photo, #threesixty .video, #threesixty .info { display: none; }

/* if we have any enable -> show it up */ 
.en-photo #threesixty .photo, .en-video #threesixty .video, .en-info  #threesixty .info { display: block; }

/* control switch between sequences *//* hide by default */
#threesixty .seq1, #threesixty .seq2, #threesixty .seq3 { display: none; }

.en-seq1 #threesixty .seq1, .en-seq2 #threesixty .seq2, .en-seq3 #threesixty .seq3 { display: block; }