@font-face {
font-family: 'Avenir';
font-style: normal;
font-weight: normal;
src: local('Avenir LT Std 65 Medium'), url('/resources/fonts/AvenirLTStd-Medium.woff') format('woff');
}

@font-face {
font-family: 'Avenir';
font-style: normal;
font-weight: bold;
src: local('Avenir LT Std 85 Heavy'), url('/resources/fonts/AvenirLTStd-Heavy.woff') format('woff');
}

*, *:before, *:after { 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; 
	-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
	font-family: Avenir;}
	
* { -webkit-transition:  all 0.5s ease; -moz-transition:  all 0.5s ease; -ms-transition:  all 0.5s ease; 
	-o-transition:  all 0.5s ease; transition:  all 0.5s ease;
	font-family: Avenir; -webkit-appearance: none; outline: none; }

html{ height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; max-width: 100%; margin: 0; padding: 0;}	
body { font-size: 100%; font-family: Avenir; background: none;  margin: 0; padding:0; background-color: #FFFFFF; height: 100%; max-width: 100%; }	
textarea { resize: none; }
a, a:hover, a:visited, a:active { text-decoration: none; color: #FF9100; }
img { border: 0; }

input[type=text],
input[type=email],
textarea { border: 2px solid #555; width: 100%; padding: 3px 5px; background-color: transparent; margin-top: 10px; height: 30px; font-size: 110%; color: #FFF; }
textarea { height: auto; }

input[type=text]:focus,
input[type=email]:focus,
textarea:focus { border-color: #ff9600; }

::-webkit-input-placeholder { text-transform: initial; }
::-moz-placeholder { text-transform: initial; } 
:-ms-input-placeholder { text-transform: capitalize !important; }
::-ms-input-placeholder { text-transform: initial; }
::placeholder { text-transform: initial; }
	
/********************* HEADER ****************/
header{ margin: 0px auto; width: 100%; top: 0px; height: 55px; background-color: rgba(0, 0, 0, 0.8);
		position: fixed; z-index: 3;  box-shadow: none; }

.headerIcon { position: relative; display: inline-block; }
.headerIcon img { margin-left: 15px; margin-top: 3px; height: 40px; cursor: pointer; }

.optionsMenuContainer{  float: right; margin-right: 10px; height: 50px; margin-top: 5px; }
.optionsMenuArrow { border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.9); border-style: dashed dashed solid; border-width: 0 8.5px 8.5px; 
					position: absolute; top: -8px; right: 17px; z-index: 1; height: 0; width: 0; display: none; }
.optionsMenuArrowShadow { border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.2); border-style: dashed dashed solid; border-width: 0 8.5px 8.5px; 
					position: absolute; top: -9px; right: 17px; z-index: 1; height: 0; width: 0; display: none; }
.menu { list-style: none; margin: 0; padding: 0; line-height: 50px; }
.menu li { display: inline; font-size: 112%; margin-right: 25px; text-align: center; }
.menu li a, 
.menu li a:visited { text-decoration: none; color: #027bb4; }
.menu li a:hover{ text-decoration: none; color: #1E90FF; }
.menu li a.selected { color: #ff9600 !important; }


/**** MENU ICON ****/
.menuIcon {
	display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 50px; height: 50px; font-size: 0; text-indent: -9999px;
	appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s;
}
.menuIcon { position: absolute; right: 5px; top: 2px; display: none;}

.menuIcon:focus { outline: none; }
.menuIcon span { display: block; position: absolute; top: 22px; left: 10px; right: 10px; height: 5px; background: white; }
.menuIcon span::before,
.menuIcon span::after { position: absolute; display: block; left: 0; width: 100%; height: 5px; background-color: #fff; content: ""; }
.menuIcon span::before { top: -10px; }
.menuIcon span::after { bottom: -10px; }

/*.menuIconCross { background-color: #ff3264; }*/
.menuIconCross { background-color: transparent; }
.menuIconCross span { transition: background 0s 0.3s; }
.menuIconCross span::before,
.menuIconCross span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; }
.menuIconCross span::before { transition-property: top, transform; }
.menuIconCross span::after { transition-property: bottom, transform; }

/* active state, i.e. menu open */
.menuIconCross.active { background-color: #cb0032; }
.menuIconCross.active span { background: none; }
.menuIconCross.active span::before { top: 0; transform: rotate(45deg); }
.menuIconCross.active span::after { bottom: 0; transform: rotate(-45deg); }
.menuIconCross.active span::before,
.menuIconCross.active span::after { transition-delay: 0s, 0.3s; }
/********************* END HEADER ****************/


/********************* FOOTER ****************/
footer { 
	position: absolute; bottom: 0px; width: 100%; margin: 0; height: 60px; background-color: #027bb4; display: block; 
	background-image: url('/web/resources/images/imgFooterLogo.png'); background-repeat: no-repeat; background-position: center right 5px;
}

footer .legalLinks { margin-top: 10px; margin-left: 10px; text-align: left;  line-height: 20px; }
footer .legalLinks a { color: white;}

.poweredBy{ display: inline-block; margin-left: 20px; color: #FFFFFF; font-size: 90%; line-height:60px;  }	
/********************* END FOOTER ****************/


/********************* BREADCRUMB *********************/
#breadcrumb { margin: 0; margin-top: -25px; background-color: rgba(249, 172, 68, 0.9); box-shadow: 0px 4px 7px 0px #636363; position: fixed; width: 100%; z-index: 2; }
#breadcrumb * { -webkit-transition:  none; -moz-transition:  none; -ms-transition:  none; -o-transition:  none; transition:  none; }	
#breadcrumb ul { margin: 0; padding: 0;}
#breadcrumb ul li { list-style:none; }
#breadcrumb ul li a { display: block; float: left; height: 30px; line-height: 30px; background: #027bb4; text-align: center; padding: 0px 20px 0 20px;
					   position: relative; margin: 0 35px 0 0; font-size: 100%; text-decoration: none; color: #fff; }
#breadcrumb ul li a:hover{ background: #039CF9; }
#breadcrumb ul li a:after { content: ""; border-top: 15px solid rgba(0, 0, 0, 0); border-bottom: 15px solid rgba(0, 0, 0, 0); 
							border-left: 30px solid #027bb4; position: absolute; right: -30px; top: 0; }
#breadcrumb ul li a:before content: ""; position: absolute; border-width: 15px 0 15px 30px; border-style: solid; 
							 border-color: #027bb4 #027bb4 #027bb4 rgba(0, 0, 0, 0); left: -30px; }
/* Hover Effects */
#breadcrumb ul li a:hover::before { border-color: #039CF9 #039CF9 #039CF9 transparent; }
/* Hover Effects */
#breadcrumb ul li a:hover::after{ border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 30px solid #039CF9; }
/* Hide the Before Pseudo Element */
#breadcrumb ul li:first-child a:before { display: none; }
/********************* END BREADCRUMB *********************/


/********************* SHARED *********************/
#wrapper { min-height: 100%; width: 100%; max-width: 100%; padding-top: 1px; padding-bottom: 60px; position: relative; }

.parallaxImage { 
	position:fixed; width: 100%; z-index:0; top: 0px; left: 0px; min-height: 600px; height: 100vh;
	background-image: url('/web/resources/images/webBG.jpg'); background-position: center top;
	background-size: cover;
}

.section { width: 100%; margin: 0px; display: inline-table; padding: 20px 0px; background-color: #FFF; position: relative; }
.sectionTitle { width: 100%; text-align: center; font-weight: bold; margin: 20px 0px 30px; color: white; font-size: 250%; }
.sectionTitleMedium { width: 100%; margin-top: 0px; margin-bottom: 10px; font-weight: bold; font-size: 150%; text-align:center; }
.lineHighlight { color: white; text-align: left; font-size: 150%; }
.sectionLines { font-size: 110%; line-height: 30px; text-align: left; color: #027bb4; margin: 0 auto; width: 100%; max-width: 900px; padding: 0px 15px; }
.sectionLines ul { margin-left: 20px; font-size: 130%; }
.sectionLines ul li { margin-top: 15px; }

.formTable { width: 90%; max-width: 900px; display: block; margin: 10px auto; }
.formTable > div { overflow: hidden; }
.formCell { width: 100%; float: left; padding: 2px; }
.formCell.cell50 { width: 50%;  }
.formCell span.captchaTextContainer { display: block; overflow: hidden; padding-left: 10px; vertical-align: middle; line-height: 35px; }
.formCell span.captchaTextContainer input { margin-top: 0px;}

.slideCheck input[type=checkbox] {visibility: hidden;}		
.slideCheck { width: 65px; height: 26px; background: #E7E7E7; position: relative; display: inline-block;
			 -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
			 -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
			 -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
			 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); }
.slideCheck:after { content: 'NO'; font: 12px/26px Arial, sans-serif; color: #db352b; position: absolute; right: 10px;
					z-index: 0; font-weight: bold; text-shadow: 1px 1px 0px rgba(255,255,255,.15); top: 0px;}
.slideCheck:before { content: 'SI'; font: 12px/26px Arial, sans-serif; color: #4fa1d2; position: absolute; left: 10px;
					 z-index: 0; font-weight: bold; }
.slideCheck label { display: block; width: 32px; height: 20px;
				  -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
				  -webkit-transition: all .4s ease; -moz-transition: all .4s ease; 
				  -o-transition: all .4s ease; -ms-transition: all .4s ease;
				  transition: all .4s ease; cursor: pointer; position: absolute; 
				  top: 3px; left: 3px; z-index: 1;
				  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
				  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
				  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
				  
				  background: #fcfff4;
				  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
				  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
				  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
				  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
				  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
				  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); }
.slideCheck input[type=checkbox]:checked + label { left: 30px; }


#play, #pause { width:15px; height: 15px; position: relative; display: inline-block; cursor: pointer; }

#play:before { 
	content: ""; position: absolute; top: -2px; left: 0px; width: 0px; height: 0px; 
	border-width: 10px; border-style: solid; border-color: transparent transparent transparent #FFF;
}
#play.active:before { border-color: transparent transparent transparent #444; }

#pause { margin-left: 20px;}
#pause:before { content: ""; position: absolute; top: 0px; left: 0px; width: 5px; height: 15px; background: #FFF; }
#pause:after { content: ""; position: absolute; top: 0px; right: 0px; width: 5px; height: 15px; background: #FFF; }
#pause.active:before,
#pause.active:after { background: #444; }
/********************* END SHARED *********************/


/********************* COOKIES *********************/
#cookiesBanner { border-top: 2px solid #A3A6A2; bottom: 0; background-color: rgba(0, 119, 191, 0.9); font-size: 90%;
				 position: fixed; text-align: left; width: 100%; z-index: 9999; display: none; padding: 10px 30px 10px 5px; }
#cookiesBanner .cookiesClose { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; 
							   position: absolute; top: 2px; right: 8px; font-size: 25px; font-weight: 900; line-height: 1; color: #000; 
							   text-shadow: 0 2px 0 #fff; filter: alpha(opacity=40); opacity: .4; }
#cookiesBanner .cookiesText { line-height: 20px; color: white;}
#cookiesBanner .cookiesTitle { font-size: 112%; margin:0; }
#cookiesBanner a { color: #FF9100; text-decoration: none; }

.cookiesSection .sectionLines a { font-weight: bold; }
.cookiesSection .sectionLines a:hover { text-decoration: underline; }
/********************* END COOKIES *********************/


/********************* INDEX *********************/
	
/************* INITIAL *************/
#Initial { background-color: rgba(0, 0, 0, 0.8); padding: 0px 0px 0px; min-height: 100vh; height: 100vh; }
#Initial > div { display: table-cell; vertical-align: middle; padding-bottom: 80px; }
#Initial .logoBig { width: 90%; max-width: 430px; display: block; margin: 10px auto }
#Initial .slogan { width: 100%; text-align: center; margin-top: 10px; font-size: 250%; color: #027bb4; }
.knowMoreButton { 
	padding: 0px 15px; border: none; color: #fff; background-color: #ff9600; 
	line-height: 30px; margin: 10px auto; display: block; font-size: 150%; cursor: pointer; 
}		
.bigNoose { width: 90%; max-width: 800px; display: block; left: 0px; right: 0px; margin: 0px auto; padding: 0; position: absolute; bottom: 0px;}


/************* WHAT WE DO *************/
#WhatWeDo { background-color: #007bb3; text-align: left; font-size: 100%; }
#WhatWeDo .sectionLines { color: white; }

#WhatWeDo .imageContainer { position: absolute; top: 0px; right: 55%; min-width:45%;  min-height: 100%; }
#WhatWeDo .sectionTitle { margin-left: 50%; width: 50%; text-align: left; }
#WhatWeDo .sectionLines { margin-left: 50%; width: 50%; padding: 0; }
				

/************* WHAT DO YOU GAIN *************/
#WhatDoYouGain { 
	background-image: url('/web/resources/images/imgWhatDoYouGainBG.png'); background-repeat: no-repeat; background-position: left top;  
	-webkit-box-shadow: inset 0px 0px 20px 1px #000; -moz-box-shadow: inset 0px 0px 20px 1px #000; -o-box-shadow: inset 0px 0px 20px 1px #000; box-shadow: inset 0px 0px 20px 1px #000;
}
#WhatDoYouGain .sectionTitle { margin-left: 8%; width: 50%; text-align: left; padding: 0; }
#WhatDoYouGain .sectionLines { margin-left: 8%; width: 50%; padding: 0; }
#WhatDoYouGain .imageContainer { position: absolute; bottom: 0px; right: 0px; height: 100%; display: block; }
#WhatDoYouGain .imageContainer img { height: 100%; display: block; float: right;  }
							

/************* HOW IT WORKS *************/
#HowItWorks { 
	height: 400px; background-image: url('/web/resources/images/imgHowItWorksBG.jpg'); background-repeat: no-repeat; background-position: center top; 
}
#HowItWorks .lineHighlight { text-align: center; }
#HowItWorks * { -webkit-transition:  none; -moz-transition:  none; -ms-transition:  none; -o-transition:  none; transition:  none; }	
#HowItWorks ul { margin: 0; padding: 0; width: 100%; font-size: 100%;}
#HowItWorks ul li { list-style:none; width: 27%; display: inline-block; margin-right: 35px; }
#HowItWorks ul li a { display: block; height: 50px; line-height: 50px; text-align: center; padding: 0px 10px 0 10px; background-color: #FFF;
					   position: relative; font-size: 110%; font-weight: bold; text-decoration: none; color: #ff9600; width: 100%; }							   
#HowItWorks ul li a:before { 
	content: ""; position: absolute; top: 0px; left: -30px;
	border-width: 25px 0px 25px 30px; border-style: solid; border-color: #FFF #FFF #FFF transparent;  
}
#HowItWorks ul li a:after { 
	content: ""; position: absolute; top: 0px; right: -30px;
	border-width: 25px 0px 25px 30px; border-style: solid; border-color: transparent  transparent transparent #FFF; 
}

/* Hide the Before Pseudo Element */
#HowItWorks ul li:first-child a:before { display: none; }
				
/* Hover Effects */
#HowItWorks ul li a:hover { background-color: #039CF9; color: white;}
#HowItWorks ul li a:hover::before { border-color: #039CF9 #039CF9 #039CF9 transparent; }
#HowItWorks ul li a:hover::after{ border-color: transparent transparent transparent #039CF9; }

/* Selected */
#HowItWorks ul li a.selected { background-color: #ff9600; color: white; }
#HowItWorks ul li a.selected:before { border-color: #ff9600 #ff9600 #ff9600 transparent; }
#HowItWorks ul li a.selected:after { border-color: transparent transparent transparent #ff9600; }

#HowItWorks .sectionLines.stepsContainer { max-width: 75%; margin: 40px auto; height: 250px; position: relative; }
	
#HowItWorks .howItWorksTable { display: table; border-collapse: collapse; width: 100%; height: 100%; position: absolute; }
#HowItWorks .howItWorksTable .HowItWorksStepTableRow { display: table-row; }
#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell { display: table-cell; text-align: center; vertical-align: middle; }
#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell.cellSeparator { 
	min-width: 80px; max-width: 80px; background-image: url('/web/resources/images/imgStepSeparator.png'); background-repeat: no-repeat; 
	background-position: center center; background-size: 80px 80px; }


#HowItWorks .circleContainer { 
	width: 250px; height: 250px; border-radius: 50%; background-color: white; margin: 0px auto; padding: 10px;  position: relative;
	-webkit-box-shadow: 0px 0px 10px 1px #444; -moz-box-shadow: 0px 0px 10px 1px #444; -ms-box-shadow: 0px 0px 10px 1px #444; -o-box-shadow: 0px 0px 10px 1px #444;
	box-shadow: 0px 0px 10px 1px #444; background-repeat: no-repeat; background-size: cover; 
}

#HowItWorks .circleContainer.circle1 { background-image: url('/web/resources/images/imgStepCircle1BG.png'); } 
#HowItWorks .circleContainer.circle2 { background-image: url('/web/resources/images/imgStepCircle2BG.png'); } 
#HowItWorks .circleContainer.circle3 { background-image: url('/web/resources/images/imgStepCircle3BG.png'); } 

#HowItWorks .step1 { left: 0px; }
#HowItWorks .step2,
#HowItWorks .step3 { left: 0px; display: none; }

#HowItWorks .circleTitle { display: block; margin-top: 20px; font-size: 120%; font-weight:bold; }
#HowItWorks .circleInfo { display: block; margin-top: 20px; font-size: 120%; font-weight:bold; color: #444; }
#HowItWorks .circleContainer .circleResource { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 100% 100%; background-position: top left; }
#HowItWorks .step1 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep1Resource.png');}
#HowItWorks .step2 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep2Resource.png');}
#HowItWorks .step3 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep3Resource.png');}


.howItWorksStepsIndicatorBottom{ display: table; margin: 0px auto; border-collapse: collapse; }
.howItWorksStepsIndicatorBottom > div { display: inline-block; width: 15px; height: 15px; margin-left: 40px; }
.howItWorksStepsIndicatorBottom > div:first-child { margin-left: 0px; }
.howItWorksStepsIndicatorBottom a { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #444;}
.howItWorksStepsIndicatorBottom a.selected { background-color: #FFF; }


/************* PROMOTIAL TYPES *************/
#PromotialTypes { padding: 0px; font-size: 100%;}
.promotialTypeFullTitle { 
	width: 200px; height: 200px; border-radius: 50%; position: absolute; left: 0px; right: 0px; margin: -100px auto; top: 50%; background-color: #FFF;
	display: block; font-size: 150%; color: #027bb4; text-align: center; z-index: 1;
	-webkit-box-shadow: 0px 0px 10px 1px #444; -moz-box-shadow: 0px 0px 10px 1px #444; -ms-box-shadow: 0px 0px 10px 1px #444; -o-box-shadow: 0px 0px 10px 1px #444;
	box-shadow: 0px 0px 10px 1px #444;
}
.promotialTypeFullTitle > div { display: table; height: 100%; vertical-align: middle; }
.promotialTypeFullTitle span { display: table-cell; vertical-align: middle; font-weight: bold; }

.promotialTypeSmallTitle { display: none; position: absolute; top: 10px; font-size: 80%; width: 100%; text-align: center; color: #FFF; }
.promotialTypesTable .promotialTypesTableRow:nth-child(1) .promotialTypesTableCell:nth-child(2) .promotialTypeSmallTitle,
.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(1) .promotialTypeSmallTitle { color: #027bb4; }

.promotialTypesTable { width: 100%; display: table; border-collapse: collapse; }
.promotialTypesTable .promotialTypesTableRow { display: table-row; }
.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell { 
	display: table-cell; width: 50%; height: 300px; vertical-align: top; color: #FFF; background-color: #027bb4; 
	background-repeat: no-repeat; background-position: top left; background-size: cover; padding-top: 1px; position: relative;
}
.promotialTypesTable .promotialTypesTableRow:nth-child(1) .promotialTypesTableCell:nth-child(2),
.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(1) { color: #027bb4; background-color: #FFF; }
.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell .promotialTypeTitle { margin-top: 30px; font-weight: bold; font-size: 250%; text-align: center; }
.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell .promotialTypeDecription { margin-top: 20px; font-size: 200%; text-align: center; padding: 0px 20%; }

.promotialTypesTable .promotialTypesTableRow:nth-child(1) .promotialTypesTableCell:nth-child(1) { 
	background-image: url('/web/resources/images/imgPromotialTypes1.png');
}

.promotialTypesTable .promotialTypesTableRow:nth-child(1) .promotialTypesTableCell:nth-child(2) { 
	background-image: url('/web/resources/images/imgPromotialTypes2.png');
}

.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(1) { 
	background-image: url('/web/resources/images/imgPromotialTypes3.png');
}

.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(2) { 
	background-image: url('/web/resources/images/imgPromotialTypes4.png');
}


/************* WORK WITH US *************/
#WorkWithUs { background-color: black; display: none; }
#WorkWithUs .sectionLines { max-width: 1230px; margin-top: 40px;}
#WorkWithUs img { width: 100%; }


/************* CONTACT *************/
#Contact { background-color: #27292b; min-height: 300px; padding-bottom: 55px;}
.captchaImage { float: left; }
.reloadCaptcha { float: left; font-size: 200%; padding: 0px 10px; cursor: pointer; display: block; vertical-align: top; color: #ff9600; }
.captchaAnimation { 
	-webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; 
	-webkit-animation-duration:0.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:linear;
					 
	-moz-transform:rotate(0deg) translateZ(0); -moz-transition-duration:0ms; -moz-animation-name: loading;
	-moz-animation-duration: 0.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear;
	 
	transform:rotate(0deg) translateZ(0); transition-duration:0ms; animation-name: loading;
	animation-duration: 0.5s; animation-iteration-count: 1; animation-timing-function: linear;}
					
.smallNoose { width: 112px; height: 55px; display: block; left: 0px; right: 0px; margin: 0px auto; padding: 0; position: absolute; bottom: 0px;}

/********************* END INDEX *********************/


/********************* MESSAGES BOX *********************/
.messagesBox { 
	width: 90%; max-width: 900px; line-height: 25px; margin: 10px auto; padding: 20px 15px;
	border-radius: 10px; border: solid 2px transparent; color: white; display: none;
}
.messagesBox ul { width: 100%; margin: 0; padding: 0px 10px;}				
.messagesBox.errorBox { background-color: #B10000; border: solid 2px #790909; }				
.messagesBox.successBox { background-color: #007500; border: solid 2px #054605; }
/********************* END MESSAGES BOX *********************/


/********************* MVSALERTS *********************/
#mvsAlert.dg .mvsAlertTitle { background-color: #007bb3;  }
/********************* END MVSALERTS *********************/


/******************** ERROR PAGE ********************/
.errorPage { width:100%; max-width: 600px; padding: 20px; margin: 50px auto; display: block; }
.errorPage img { display: block; margin: 0px auto; width: 100%; max-width: 374px; }
.errorPage .errorPageText { font-size: 300%; color: #007AB3; text-align: center; font-weight: bold; }
/******************** END ERROR PAGE ********************/


/********************* COOKIES POLICY **************************/
.cookiesBrowsers li:visited{ color:  #027bb4; }
.cookiesBrowsers li a { color:  #027bb4; }
/********************* END COOKIES POLICY **************************/


/********************* MODS **************************/
.textCentered { text-align: center; }
.vAlignTop { vertical-align:top; }
.marginTop30 { margin-top: 30px; }
.marginLeft25 { margin-left: 25px; }
.blackText { color: #000000; }
.blueText { color: #027bb4; }
.darkGrayText { color: #444; }
.orangeText { color: #FF9100; }
.invalidField { border: solid 2px #D60000 !important; }
.blackTextShadow { text-shadow: 2px 2px 2px #000; }
.blackBoxShadow {  -webkit-box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; box-shadow: 0px 0px 10px 2px #000; }
/********************* END MODS **************************/


/********************* BUTTONS **************************/
.defaultButton { 
	font-size: 100%; margin: 10px auto; position: relative; width: 95%; max-width: 300px; cursor: pointer; text-align: center; 
	border: solid 1px #043A66; line-height: 30px; color: #FFFFFF; display: block; padding: 0; background-color: #027bb4; 
	-webkit-text-shadow: 1px 1px 1px #000; -moz-text-shadow: 1px 1px 1px #000; -o-text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px #000; 
	-webkit-transition:  all 0.3s ease-in-out;  -moz-transition:  all 0.3s ease-in-out;
	-ms-transition:  all 0.3s ease-in-out; -o-transition:  all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.defaultButton:hover,
.defaultButton:focus { 
	color: #FFFFFF; background-color: #039CF9; border-color: #043A66; 
	-webkit-text-shadow: 0px 0px 10px #FFF; -moz-text-shadow: 0px 0px 10px #FFF; 
	-o-text-shadow: 0px 0px 10px #FFF; text-shadow: 0px 0px 10px #FFF; }
.defaultButton:active { color: #FFFFFF; background-color: #043A66;
						-webkit-text-shadow: 0px 0px 10px #FFF; -moz-text-shadow: 0px 0px 10px #FFF; 
						-o-text-shadow: 0px 0px 10px #FFF; text-shadow: 0px 0px 10px #FFF; }
.defaultButton:disabled { background: #dddddd; }

.closeButton { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; position: absolute; top: 2px; right: 8px;
				font-size: 25px; font-weight: 900; line-height: 1; color: #000; text-shadow: 0 2px 0 #fff; filter: alpha(opacity=40); opacity: .4; }
/********************* END BUTTONS **************************/


/********************* ANIMATIONS ****************/
@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}

@-moz-keyframes loading {  
	from { -moz-transform:rotate(0deg) translateZ(0); }
	to { -moz-transform:rotate(360deg) translateZ(0); }
}

@keyframes loading {  
	from { transform:rotate(0deg) translateZ(0); }
	to { transform:rotate(360deg) translateZ(0); }
}
/********************** END ANIMATIONS *************/


/********************* RESPONSIVE ****************/
@media (max-width: 1240px) {
	#HowItWorks .sectionLines.stepsContainer { height: 200px; }
	#HowItWorks ul li { margin-right: 30px; }
	#HowItWorks ul li a { height: 40px; line-height: 40px; padding: 0px 5px 0 5px; font-size: 100%; }
	#HowItWorks ul li a:before { left: -25px; border-width: 20px 0px 20px 25px; }
	#HowItWorks ul li a:after { right: -25px; border-width: 20px 0px 20px 25px; }
	
	#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell.cellSeparator { 
		min-width: 70px; max-width: 70px; background-size: 70px 70px;
	}
	#HowItWorks .circleContainer { width: 200px; height: 200px; line-height: 25px; }
	#HowItWorks .circleTitle { margin-top: 15px; font-size: 110%; }
	#HowItWorks .circleInfo {  margin-top: 15px; font-size: 110%; }
}				

@media (max-width: 1220px) {
	#WhatWeDo .imageContainer { display: none; }
	#WhatDoYouGain .imageContainer { height: 250px; right: 0px; }
	
	#WhatWeDo .sectionTitle,
	#WhatDoYouGain .sectionTitle { width: 100%; text-align: center; margin: 20px 0px 30px; }
	
	#WhatWeDo .sectionLines,
	#WhatDoYouGain .sectionLines { text-align: left; margin: 0 auto; width: 100%; max-width: 900px; padding: 0px 15px; }
}

@media (max-width: 1040px) {
	#HowItWorks .sectionLines.stepsContainer { height: 170px; }
	#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell.cellSeparator { 
		min-width: 60px; max-width: 60px; background-size: 60px 60px;
	}
	#HowItWorks .circleContainer { width: 170px; height: 170px; line-height: 20px; }
	#HowItWorks .circleTitle { margin-top: 10px; font-size: 95%; }
	#HowItWorks .circleInfo {  margin-top: 10px; font-size: 95%; }
}

@media (max-width: 1000px) {
	.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell{ height: 250px; }
	.promotialTypeFullTitle { width: 150px; height: 150px; font-size: 120%; }
	.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell .promotialTypeTitle { font-size: 200%; }
	.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell .promotialTypeDecription  { font-size: 150%; }
}

@media (max-width: 900px) { 
	#WhatDoYouGain .imageContainer { display: none; }
}

@media (min-width: 871px) {
	.optionsMenuContainer { display: block !important; }
}

@media (max-width: 870px) {
	.menuIcon { display: block; }
	.menu li { font-size: 90%; }	
	.optionsMenuContainer{ 
		position: absolute; right: 1px; top: 65px; background-color: rgba(255,255,255,0.9); display: none; height: auto; margin-top: auto;
	   -webkit-transition:  none; -moz-transition:  none; -ms-transition:  none; -o-transition:  none; transition:  none; margin-right:auto; 
	   -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: solid 1px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); -moz-box-shadow: 0 0 10px rgba(0,0,0,.2); -o-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2);
	}
	.optionsMenuArrow { display: block; border-bottom-color: rgba(255, 255, 255, 0.9); }
	.optionsMenuArrowShadow { display: block; }
	.menu { margin: 0; padding: 0; display: block; line-height: normal; }	
	.menu li { display: block; padding: 10px 20px; text-align: left; margin: 0; }
}

@media (max-width: 860px) {	
	#HowItWorks .sectionLines.stepsContainer { height: 150px }
	#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell.cellSeparator { 
		min-width: 50px; max-width: 50px; background-size: 50px 50px;
	}
	#HowItWorks .circleContainer { width: 150px; height: 150px; line-height: 18px; }
	#HowItWorks .circleTitle { margin-top: 10px; font-size: 85%; }
	#HowItWorks .circleInfo {  margin-top: 10px; font-size: 85%; }
}

@media (max-width: 760px) {
	#WhatWeDo,
	#WhatDoYouGain { font-size: 80%; }
	#HowItWorks .sectionTitle { font-size: 200%; }
	#HowItWorks .lineHighlight { font-size: 120%; }
	
	#HowItWorks .sectionLines.stepsContainer { height: 120px; max-width: 100%; }
	#HowItWorks ul li { margin-right: 25px; }
	#HowItWorks ul li a { height: 30px; line-height: 30px; padding: 0px 5px 0 5px; font-size: 90%; }
	#HowItWorks ul li a:before { left: -20px; border-width: 15px 0px 15px 20px; }
	#HowItWorks ul li a:after { right: -20px; border-width: 15px 0px 15px 20px; }
	
	#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell.cellSeparator { display: none; }
						
	.howItWorksStepsIndicatorBottom > div { display: inline-block; width: 10px; height: 10px; margin-left: 30px; }
}

@media (max-width: 710px) {
	.promotialTypeFullTitle { display: none; }
	.promotialTypeSmallTitle { display: block; }
	.promotialTypesTable .promotialTypesTableRow .promotialTypesTableCell { display: block; width: 100%; }
	
	
	.promotialTypesTable .promotialTypesTableRow:nth-child(2) { display: block; -webkit-transform: scale(-1); -moz-transform: scale(-1); -ms-transform: scale(-1); transform: scale(-1); }
	.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(1),
	.promotialTypesTable .promotialTypesTableRow:nth-child(2) .promotialTypesTableCell:nth-child(2) { 
		-webkit-transform: scale(-1); -moz-transform: scale(-1); -ms-transform: scale(-1); transform: scale(-1);  
	}
}

@media (max-width: 660px) {
	#Initial .slogan { font-size: 200%; }
	#Initial .knowMoreButton { font-size: 100%; }
	
	.formCell.cell50 { width: 100%; }
}

@media (max-width: 590px) {
	#WhatWeDo,
	#WhatDoYouGain { font-size: 70%; }
	#HowItWorks .sectionTitle { font-size: 175%; }
	#HowItWorks .lineHighlight { font-size: 105%; }
	
	#PromotialTypes { font-size: 85%; }
	
	.sectionLines ul { margin-left: 0px; padding: 0px 0px 0px 30px;}
}

@media (max-width: 520px) {
	#HowItWorks .circleContainer { width: 120px; height: 120px; line-height: 18px; }
	#HowItWorks .circleTitle { margin-top: 5px; font-size: 80%; }
	#HowItWorks .circleInfo {  margin-top: 10px; font-size: 50%; }
}

@media (max-width: 490px) {
	#HowItWorks ul li { width: 25%; margin-right: 20px;}
	#HowItWorks ul li a { padding: 0px 0px 0px 0px; font-size: 80%; }
}

@media (max-width: 380px) {
	#HowItWorks ul li a { padding: 0px 0px 0px 0px; font-size: 70%; }
	#HowItWorks .sectionLines.stepsContainer { height: 300px; margin-top: 20px; }
	#HowItWorks .howItWorksTable { position: relative; }
	#HowItWorks .howItWorksTable .HowItWorksStepTableRow .HowItWorksStepTableCell { display: block; }
	#HowItWorks .circleContainer { 
		background-color: transparent; width: 100%; height: auto; color: white; 
		-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
	#HowItWorks .circleContainer.circle1,
	#HowItWorks .circleContainer.circle2,
	#HowItWorks .circleContainer.circle3 { background-image: none; }
	#HowItWorks .circleContainer.circle3 { height: 150px; }
	
	#HowItWorks .circleTitle { margin-top: 10px; font-size: 100%; }
	#HowItWorks .circleInfo {  margin-top: 10px; font-size: 90%; }
	
	#HowItWorks .circleContainer .circleResource { right: 0px; width: 150px; margin: 10px auto;}
	
	
	
	#HowItWorks .step1 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep1Resource_White.png');}
	#HowItWorks .step2 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep2Resource_White.png');}
	#HowItWorks .step3 .circleContainer .circleResource { background-image: url('/web/resources/images/imgHowItWorksStep3Resource_White.png');}
}
/********************* END RESPONSIVE ****************/