/* =============================================================================
   BASIC + DESKTOP STYLES 
   ========================================================================== */

/* Template overrides ------- */

body { font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important; background: #000; }

section { border-top: none !important;} /* removes 5px border set by single-fs_immersive.php line 261 */
header a:hover {
	color: #00AEFF;
}
.link-out {
	color: #fff;
	margin: 0;
	padding: 10px 0 0 20px;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	transition: all .3s ease-in;
}
.fsm-link:hover {
    background-position: left bottom;
}
.start-nav, nav {
	display: none;
}


/* Taste Intro Titles */
section.intro {
	z-index: 110;
}
#top {
	overflow: visible;
}
#top .the-content {
	width: 50%;
	top: 75px;
	margin-left: 25px;
	position: absolute !important;
	opacity: 1;
}
#top h1 {
	color: #000;
	top:0 !important;
	line-height: 1.5em;
	padding-top: 0 !important;
	margin: 0;
}

.line1 {
	font-size: 0.75em;
	text-transform: uppercase;
	font-weight: normal;
}
.line2 {
	font-weight: bold !important;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.taste-desc {
	text-align: left;
	margin: 10px !important;
}
.taste-hashtag {
	text-align: left;
	float: left;
	opacity: 1;
}
#top .the-content p {
	margin: 0;
}


/* Taste Food Truck Panel ----------- */
#map {
	top:40px;
	padding-bottom: 40px;
}

.marker {
	border: none;
    border-radius: 0;
    height: 32px;
    line-height: 1;
    opacity: 1;
    padding: 0.5em;
    transition: all 0.3s linear 0s;
    width: 32px;
    z-index: 9;
	background: url(../images/icon-truck-white-right-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;
}

#pin-1 .marker, #pin-4 .marker, #pin-5 .marker {border: none;
    border-radius: 0;
    height: 32px;
    line-height: 1;
    opacity: 1;
    padding: 0.5em;
    transition: all 0.3s linear 0s;
    width: 32px;
    z-index: 9;
	background: url(../images/icon-truck-white-left-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;}

.marker:hover, .marker:focus {
	border: none;
    border-radius: 0;
    height: 32px;
    line-height: 1;
    opacity: 1;
    padding: 0.5em;
    transition: all 0.3s linear 0s;
    width: 32px;
    z-index: 9;
	background: url(../images/icon-truck-yellow-right-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;
}
#pin-1 .marker:hover, #pin-1 .marker:focus, #pin-4 .marker:focus, #pin-4 .marker:hover, #pin-5 .marker:focus, #pin-5 .marker:hover {border: none;
    border-radius: 0;
    height: 32px;
    line-height: 1;
    opacity: 1;
    padding: 0.5em;
    transition: all 0.3s linear 0s;
    width: 32px;
    z-index: 9;
	background: url(../images/icon-truck-yellow-left-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;
}

.marker-icon, .marker:hover .marker-icon, .marker:focus .marker-icon { background: none;}

p.pin-title {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #fedab3 !important;
    left: 55px !important;
    text-shadow: 0 0 1px #ffffff !important;
    top: 10px !important;
    width: auto !important;
    text-transform: uppercase;
    font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important;
    font-size: 1em !important;
}

p.pin-title span {
    font-family: 'adobe-garamond-pro',Georgia,Times,serif !important;
}
#pin-1 p.pin-title {
	left:-180px !important;
}
#pin-2 p.pin-title {
	left:-225px !important;
}
#pin-3 p.pin-title {
	left:-260px !important;
}


/* Color box overlays ---------- */
#cboxWrapper {
	padding-bottom:0 !important;
}

#cboxContent {
	border:none !important;
}

#cboxContent h3 {
	font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important; font-weight:normal !important;
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 0 0 0 5px;
}

#cboxContent .wp-caption img {
    margin: 0 !important;
}

#cboxContent .wp-caption {
	background: #fff;
	margin-bottom:0 !important;
}

#cboxContent .wp-caption p.wp-caption-text {
	text-align:left !important;
	font-size:1em !important;
	font-family: 'proxima-nova', Helvetica, Arial, sans-serif !important; 
	font-weight:normal !important;
	line-height:1.4em !important;
	margin-top: 15px;
}

#cboxContent h3 span {
	font-family: 'adobe-garamond-pro',Georgia,Times,serif !important;
}

#cboxClose {
	background: url(../images/overlay-close-2.png) center top no-repeat !important;
	width: 30px !important;
	height: 30px !important;
	top: -10px !important;
	right: -10px !important;
}

#cboxClose:hover {
	background: url(../images/overlay-close-2.png) center bottom no-repeat !important;
}

.wp-caption {
	text-align: left;
}
.wp-caption .photo-credits {
	text-align: left;
	margin-top: 5px;
	font-size: 13px;
	margin-left: 0;
	display: block;
}

/* Footer ---------- */
#continuation {
	background: #000;
}
.share-wrapper {
	margin: 0 auto;
	text-align: center;
}
.share-wrapper h6 {
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	margin: 26px 20px 0 0;
	display: inline-block;
	float: left;
}
#continuation ul.share {
	text-align: center;
}
.taste-logo {
	text-align: center;
}
.taste-logo a {
	background: url(../images/logo-taste-food-truck.jpg) center top no-repeat;
	display: inline-block;
	height: 114px;
	width: 218px;
	text-align: center;
}
.taste-logo a:hover, .taste-logo a:focus {
	background: url(../images/logo-taste-food-truck.jpg) center bottom no-repeat;
	opacity: .9;
}



/* =============================================================================
   MOBILE STYLES + OVERRIDES 
   ========================================================================== */

@media (min-width: 1400px) {
	#pin-7 {
		top:64% !important;
	}
}

@media (min-width: 1240px) {
	p.pin-title {
		left: 65px !important;
	}
}

@media (max-width: 1025px) {
	#cboxWrapper {
		min-height: 460px !important;
		overflow: visible !important;
	}
	.truck-icon img {
		width: 60px;
	}
	#top .the-content {
		width: 62%;
		top: 60px;
		margin-left: 10px;
	}
}

@media (max-width: 979px) {
	#top .the-content {
		width: 62%;
		margin-left: 15px;
		top: 60px;
	}
	.wp-image-93022 {
		width: 55px;
		height: 55px;
	}
	.taste-desc {
		font-size: .95em;
	}
	#map .row-fluid {
		background-color: #000;
	}	
	.fadeInRight { 
		-webkit-animation-name: none;
		-moz-animation-name: none;
		-o-animation-name: none;
		animation-name: none;
	}

	#colorbox {
		margin-top: 30px !important;
	}
	#cboxClose {
		top: 0 !important;
	}
	#map .row-fluid {
		background-image: url('../images/taste-map-underlay-091714.jpg') !important;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 101.75%;
		padding-top: 56.25%;
	}
	.pin {
		position:relative !important; 
		top:0 !important; 
		left: 0 !important; 
		display:inline-table; 
		margin:0 !important;
		cursor:pointer; 
		transition: none; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none;
		width:100%;
	}
	.pin:hover {
		width: 100%;
	}
	#pin-1 {
		padding-top:10px !important;
		border-top: 1px solid #777;
	}
	p.pin-title {
		top:0 !important; 
		left:0 !important; 
		transform:none !important; -webkit-transform:none !important; -moz-transform:none !important; -o-transform:none !important; -ms-transform:none !important;
		opacity:1 !important; 
		width:100% !important; 
		text-align:left !important; 
		text-shadow:none !important; 
		color:#fedab3 !important;
		border-bottom:1px solid #777 !important;
		width:95% !important;
		padding:  0 1em 1em 1em !important;
		background: url('../images/icon-arrow-white.gif') 95% top no-repeat;
		margin: 0 !important;
		position:relative !important;
	}
	p.pin-title:hover {
		color: #aa4547 !important;
	}
	.marker {
		border-radius: 0; 
		border:none; 
		background:none !important;
		opacity:1; 
		width:100%; 
		position:relative !important;
		height:inherit !important; 
		margin: .5em 0 !important; 
		padding: 0 !important; 
		transition: none !important; -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; -ms-transition:none !important;
	}
	.marker:hover {background-color:transparent !important; border:none; border-radius:none; transition: none; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none;}
	.marker-icon {display:none !important;}
	#pin-1 p.pin-title {
		left:0 !important;
	}
	#pin-2 p.pin-title {
		left:0 !important;
	}
	#pin-3 p.pin-title {
		left:0 !important;
	}
	#pin-1 .marker, #pin-4 .marker, #pin-5 .marker, #pin-1 .marker:hover, #pin-4 .marker:hover, #pin-5 .marker:hover {
		width: 100%;
	}
}

@media (max-width: 801px) {
	.fsm-link {
		margin-left: 0 !important;
	}
	#top .the-content {
		width: 90%;
	}
	.flourish {
		display: none;
	}
	.line1 {
		font-size: 0.75em !important;
	}
	.the-content {
		top: 100px !important;
	}
	.truck-icon {
		width: 60%;
	}
	.post-title {
		width: 60%;
	}
	.taste-desc {
		font-size: 1em;
		position: relative;
		top: 220px;
		width: 100%;
		color: #fff;
		line-height: 1.5em;
	}
	.taste-hashtag {
		text-align: center;
		float: left;
		opacity: 1;
		position: relative;
		top: -125px;
		left: 120px;
	}
	#pin-1 {
		margin-top: 155px !important;
	}
	.line2 {
		font-weight: bold !important;
		font-size: 1.2em !important;
		text-transform: uppercase !important;
	}
}

@media (max-width: 700px) {
	.taste-desc {
		top: 170px;
	}
}

@media (max-width: 640px) {
	.taste-desc {
		top: 150px;
	}
}

/**** FOR SAMSUNG 8INCH TABLET IN PORTRAIT VIEW ****/
@media (max-width: 602px) {
	.line1 {
	font-size: 0.7em !important;
	}
	.line2 {
		font-size: 1.1em !important;
	}
	.post-title {
		width: 70%;
	}
	.truck-icon {
		width: 70%;
	}
	#top .the-content {
		margin-left: 5px;
	}
	.taste-hashtag {
		top: -160px;
		left: 90px;
	}
	.taste-desc {
		top: 135px;
	}
	.the-content {
		top: 80px !important;
	}
}

@media (max-width: 600px) {
	header.nav.navbar-fixed-top {
		border-bottom: #000;
	}
	.fsm-link {
		width: 165px !important;
	}
	section.intro {
		height: auto !important;
		min-height: 0 !important; 
	}
	#top .the-content {
		top: 75px !important;
	}
	#top h1 {
		width: 60% !important;
		text-shadow: none;
		margin-top:15px;
	}
	.line1 {
		font-size: 1.2em !important;
	}
	.line2 {
		font-size: 1.9em !important;
	}
	.taste-hashtag {
		top: -85px;
		left: 70px;
	}
	.taste-desc {
		font-size: .9em;
		top: 160px;
	}
}

@media (max-width: 568px) {
	.truck-icon img {
		width: 50px;
	}
	#top .the-content {
		top: 65px !important;
		margin-left: 5px;
	}
	#top h1 {
		margin-top: 10px;
		width: 70% !important;
	}
	.taste-hashtag {
		top:-115px;
	}
}

@media (max-width: 480px) {
	.wp-image-93022 {
		width: 40px;
		height: 40px;
	}
	#top h1, .truck-icon {
		width: 70% !important;
	}
	.taste-hashtag img {
		width: 150px;
		height: auto;
	}
	.taste-hashtag {
		top: -120px;
		left: 60px;
	}
	.taste-desc {
		top: 98px;
		line-height: 1.4em;
	}
	#colorbox, #cboxWrapper {
		max-width:300px !important;
	}
	#cboxTopCenter, #cboxContent, #cboxBottomCenter, #cboxLoadedContent {
		max-width:272px !important;
	}
	
	#cboxContent .wp-caption {
		max-width:272px !important;
		float:left;
		padding: 0 !important;
	}
	
	#cboxContent h3 {
		max-width:250px !important;
		line-height: 1.2em;
		margin: 0 0 10px 5px;
	}
	
	#cboxContent .wp-caption img {
		max-width:272px !important;
		overflow:hidden;
		height:auto;
		float:left;
		padding-bottom: 10px;
	}
	#cboxContent .wp-caption-text {
		max-width:272px !important;
		margin: 15px 0 0 0 !important;
		float:left;
	}
}

@media (max-width: 360px) {
	.truck-icon img {
		width: 40px;
		height:40px;
	}
	.truck-icon {
		width: 80% !important;
	}
	#top .the-content {
		top: 50px !important;
		margin-left: 5px;
	}
	#top h1 {
		margin-top: 5px;
	}
	#top h1 {
		width: 80% !important;
	}
	.line1 {
		font-size: .9em !important;
	}
	.line2 {
		font-size: 1.3em !important;
	}
	.wp-image-93022 {
		width: 30px;
		height: 30px;
	}
	.taste-hashtag img {
		width: 130px;
		height: auto;
	}
	.taste-hashtag {
		top: -113px;
		left: 22px;
	}
	.taste-desc {
		top: 120px;
		line-height: 1.3em;
	}
	#pin-1 {
		margin-top: 205px !important;
	}
	#cboxWrapper, #colorbox {
		box-shadow: none !important
	}
}

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 568px) 
and (orientation : portrait) {
	.taste-hashtag {
		top: -205px;
	}
	.taste-desc {
		top: 70px;
		line-height: 1.3em;
	}
}


@media only screen 
and (min-device-width : 720px)
and (max-device-width : 1280px) 
and (orientation : portrait) {
	.taste-hashtag {
		top: -105px !important;
		left: 110px;
	}
	.taste-desc {
		top: 185px !important;
	}
}

@media only screen 
and (min-device-width : 720px)
and (max-device-width : 1280px) 
and (orientation : landscape) {
	.line2 {
		font-size: 1.0em !important;
	}
	.taste-hashtag {
		top: -155px !important;
		left: 110px;
	}
}

/* =============================================================================
   IE 8 FIXES - ported from ie-immersive.css - 2/24/14 - nlong 
   ========================================================================== */

.lt-ie9 .container-fluid .row-fluid {
 z-index: 1;
 background-size:cover !important;
 behavior: url(../images/backgroundsize.min.htc);
}
.lt-ie9 .row-fluid .mediaboard-item { margin-left:0; }
.lt-ie9 .row-fluid .mediaboard-item.span1 { width:8.33333333333%; }
.lt-ie9 .row-fluid .mediaboard-item.span2 { width:16.66666666666%; }
.lt-ie9 .row-fluid .mediaboard-item.span3 { width:25%; }
.lt-ie9 .row-fluid .mediaboard-item.span4 { width:33.33333333333%; }
.lt-ie9 .row-fluid .mediaboard-item.span5 { width:41.66666666666%; }
.lt-ie9 .row-fluid .mediaboard-item.span6 { width:50%; }
.lt-ie9 .row-fluid .mediaboard-item.span7 { width:58.33333333333%; }
.lt-ie9 .row-fluid .mediaboard-item.span8 { width:66.66666666666%; }
.lt-ie9 .row-fluid .mediaboard-item.span9 { width:75%; }
.lt-ie9 .row-fluid .mediaboard-item.span10 { width:83.3333333333%; }
.lt-ie9 .row-fluid .mediaboard-item.span11 { width:91.6666666666%; }
.lt-ie9 .row-fluid .mediaboard-item.span12 { width:100%; }
.lt-ie9 .row-fluid [class*="span"] { margin:0; }

.lt-ie9 #cboxWrapper {
	min-height:450px !important;
}

.lt-ie9 .body-content {
 clear:both !important;
}
.lt-ie9 .spotlight .close-btn-k {
 background: transparent url('../images/close-btn-k.gif') center center no-repeat;
 text-indent:-9999px;
}
.lt-ie9 .spotlight.open .close-btn-k {
 width:30px;
 height:30px;
 display:block;
}
.lt-ie9 .carousel-control.left {
 background: url('../images/arrow-lf.gif') center center no-repeat;
 display:none !important;
}
.lt-ie9 .carousel-control.right {
 background: url('../images/arrow-rt.gif') center center no-repeat;
 display:none !important;
}

/* Hotspots Panel */
 .lt-ie9 .pin-title {
	width: auto;
	z-index: 9999;
	background: #046380;
	color: #fff !important;
	left: 78px !important;
	top: 15px !important;
}

.lt-ie9 .pin:hover {
	z-index: 9999;
}

.lt-ie9 .marker {
	border: none;
    border-radius: 0;
    height: 80px !important;
    line-height: 1;
    opacity: 1;
    padding: 0.5em !important;
    transition: all 0.3s linear 0s;
    width: 80px !important;
    z-index: 9;
	background: url(../images/icon-truck-white-right-60-shad.png) center center no-repeat;
	background-size:auto;
	background-color: transparent !important;
}

.lt-ie9 #pin-1 .marker, .lt-ie9 #pin-4 .marker, .lt-ie9 #pin-5 .marker {border: none;
    border-radius: 0;
    height: 80px !important;
    line-height: 1;
    opacity: 1;
    padding: 0.5em !important;
    transition: all 0.3s linear 0s;
    width: 80px !important;
    z-index: 9;
	background: url(../images/icon-truck-white-left-60-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;}

.lt-ie9 .marker:hover, .lt-ie9 .marker:focus {
	border: none;
    border-radius: 0;
    height: 80px !important;
    line-height: 1;
    opacity: 1;
    padding: 0.5em !important;
    transition: all 0.3s linear 0s;
    width: 80px !important;
    z-index: 9;
	background: url(../images/icon-truck-yellow-right-60-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;
}
.lt-ie9 #pin-1 .marker:hover, .lt-ie9 #pin-1 .marker:focus, .lt-ie9 #pin-4 .marker:focus, .lt-ie9 #pin-4 .marker:hover, .lt-ie9 #pin-5 .marker:focus, .lt-ie9 #pin-5 .marker:hover {border: none;
    border-radius: 0;
    height: 80px !important;
    line-height: 1;
    opacity: 1;
    padding: 0.5em !important;
    transition: all 0.3s linear 0s;
    width: 80px !important;
    z-index: 9;
	background: url(../images/icon-truck-yellow-left-60-shad.png) center center no-repeat;
	background-size: contain;
	background-color: transparent !important;
}

.lt-ie9 #pin-1 {top:3% !important; left:80% !important;}
.lt-ie9 #pin-2 {top:14% !important;}
.lt-ie9 #pin-3 {top:13% !important;}
.lt-ie9 #pin-4 {top:24% !important;}
.lt-ie9 #pin-5 {top:28% !important; left:69% !important;}
.lt-ie9 #pin-6 {top:54% !important;}
.lt-ie9 #pin-7 {top:75% !important; left:64% !important;}
.lt-ie9 #pin-8 {top:77% !important;}
.lt-ie9 #pin-9 {top:88% !important;}

/* =============================================================================
   IE 9 FIXES - ported from ie-immersive.css - 3/10/14 - jdalton 
   ========================================================================== */
.pin:hover {
	z-index: 9999 !important;
}

.lt-ie10 .pin:hover p.pin-title {
	opacity: 1;
	z-index: 9999 !important;
	left: 45px !important;
	width: auto;
}
.lt-ie10 .pin {
	overflow: visible;
}

.lt-ie10 #pin-1 p.pin-title {
	left:-190px !important;
}
.lt-ie10 #pin-2 p.pin-title {
	left:-235px !important;
}
.lt-ie10 #pin-3 p.pin-title {
	left:-235px !important;
}

