﻿/*	================================================
1.	Nav Menu for Anchors in First Page Promotion
	A DIV within the page sxPromotion.asp
	================================================ */
.sxNavPromotionAnchors {
	position: fixed; top: 44px; right: 0;
	background:#96706A; 
	padding: 3px;
	width: auto;
	text-align: left;
	display:block;
	z-index: 10;
	max-height: 80%;
	overflow: auto;
}
.sxNavPromotionAnchors div {
	font-size: 2.4em;
	font-weight: normal;
	color: #FEF1EF;
	cursor: pointer;
	padding: 0 6px 4px 6px;
	line-height: 100%;
}

.sxNavPromotionAnchors ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	display: block;
}
.sxNavPromotionAnchors li {
	display: block;
	margin-top: 4px;
	padding: 0; 
	background-color: #fff;
}

.sxNavPromotionAnchors li span {
	display: block; 
	font-family: "Open Sans", "Open Sans", Tahoma, sans-serif;
	font-size: 0.8em;
	font-weight: 400;
	padding: 5px; 
	text-align: left;
	color: #96706A;
	cursor: pointer;
}
.sxNavPromotionAnchors li span:hover {color: #4B3835}

/*	================================================	
2.	Styles For separate promotions in first page
	Obs! Start from Mobile devices
	================================================*/
#promotion .row {margin: 0 !important; padding: 20px 0 10px 0 !important;}
#promotion .row .row {padding: 0 !important;}
#promotion [class*="col-"] {padding: 20px 0 !important; position: relative !important; border: 0 !important;}

#promotion h1 {
	text-align:center;
	padding: 0;
	margin-top: 20px;
	color: #666;
	border-bottom: 5px #666 solid;
	border-radius: 5px;
}
#promotion h1 span {
	display: inline-block;
	padding: 10px 25px ;
	background: #fff;
	border-bottom: 15px #bbb solid;
	border-radius: 15px;
	margin-bottom: -15px
}
#promotion h2,
#promotion h3,
#promotion h4 {text-align: center;}
#promotion form {margin-top: 12px;}

#promotion .boxes {padding: 10px 5px; margin: 0;}

#promotion .textNormal {font-size: 1em; line-height: 140%; text-align: center;}
#promotion .divTextHeader .textNormal {font-size: 1.1em; text-align: center;}

#promotion figure {background: transparent;}
#promotion figure img {
	display: block;
	border-radius: 3px;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

#promotion figcaption {margin-top: 20px}
#promotion .divText {background: rgba(255,255,255,1); border-radius: 7px;}

#promotion .bgColorRowOne {background:#fff;}
#promotion .bgColorRowOne div {background: transparent;}
#promotion .bgColorRows {background:transparent; padding: 0; border-radius:7px;
}

#bodyDefault .section {padding: 0 !important;; margin: 0 !important; border: 0 !important;}

/* Special styles for selected Rows 4B3835
=================================================== */
#promotion #row-1 {padding-top: 50px !important;}
#promotion #row-1 figcaption  {color: #fff; font-size: 1.15em; font-weight: bold;}
#promotion #row-8 {padding-top: 80px !important; padding-bottom: 80px !important;}

@media only screen and (min-width: 768px) {
	#promotion .boxes {padding: 0 10px; margin: 0 5px;}
}

@media only screen and (min-width: 1024px) {
	#promotion .fixedNotes img {opacity: 1; transition: opacity 0.6s linear;}
	#promotion .fixedNotes {position: relative; cursor: pointer;}
	#promotion .fixedNotes figcaption {
		position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 5px;
		opacity: 0; transition: opacity 0.4s linear;
	}
	#promotion .fixedNotes:hover img {opacity: 0; transition: opacity 0.6s linear;}
	#promotion .fixedNotes:hover figcaption {opacity: 1; transition: opacity 0.4s linear;}

	#promotion .divText {background: rgba(255,255,255,0.9); border-radius: 7px;}
	#promotion .divText:hover {background: rgba(255,255,255,1);}

	#promotion .row {padding: 10px 8% !important;}
}
@media only screen and (min-width: 1364px) {
	#promotion .row {padding: 10px 12% !important;}
}

@media only screen and (min-width: 1600px) {
	#promotion .row {padding: 10px 16% !important;}
}

/*
	box-shadow: 2px 3px 4px rgba(0,0,0,0.2), 1px 1px 2px rgba(0,0,0,0.4);

	background: repeating-linear-gradient(35deg, rgba(0,102,221,0.6), #f3f3f3 4%, rgba(0,102,221,0.6) 12%);
	background: repeating-radial-gradient(circle 75% 75%, rgba(0,102,221,0.8), rgba(0,102,221,0.2), rgba(0,102,221,0.8));
	background: radial-gradient(circle, rgba(0,102,221,1), rgba(0,102,221,0.5), rgba(0,102,221,1));
	background: linear-gradient(-15deg, rgba(0,102,221,1) 0%,rgba(0,102,221,0.8) 20%,rgba(0,102,221,1) 40%,rgba(0,102,221,0.8) 50%,rgba(0,102,221,1) 60%,rgba(0,102,221,0.8) 80%,rgba(0,102,221,1) 100%);
	background: linear-gradient(135deg, rgba(0,102,221,1) 0%,rgba(0,102,221,0.5) 27%,rgba(0,102,221,1) 46%,rgba(0,102,221,0.98) 47%,rgba(0,102,221,0.5) 67%,rgba(0,102,221,1) 100%);
*/

/*	END
	*/