h1, h2, h3 {
	font-family: 'Roboto Slab', serif;
	color: inherit;
}

p, h4, h5, h6, li, a, span, label, input, textarea, select
{
	font-family: 'Roboto', sans-serif; 
	color: inherit;
}



/*****************************************************************************************************
									GENERAL
*****************************************************************************************************/
a{-webkit-tap-highlight-color: rgba(0,0,0,0); /* Prevent touch highlight ios/ Android*/}

p
{
	font-weight: 300;
	line-height: 150%;
	font-size: 1em;
	color: #FFF ;
}

p.mb{margin-bottom: 1em;}

h2,
h1
{
	font-size: 3.25em;
	line-height: 140%;
	color: #FFF;
	font-weight: 100;
}

h3
{
	font-size: 2em;
	line-height: 140%;
	color: #FFF;
	font-weight: 100;
}

h3.bold{font-weight: 300;}

h2.grey,
h3.grey{color: #808285;}

h4
{
	font-size: 2em;
	line-height: 140%;
	color: #FFF;
	font-weight: 100;
}

h5
{
	font-size: 1.375em;
	font-weight: 100;
	color: #fff;
	line-height: 140%;
}

.outer
{
	width: 100%;
	position: relative;
}

.inner
{
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
}

.half
{
	width: 49%;
	position: relative;
}

.half.left{float: left;}
.half.right{float: right;}




/*****************************************************************************************************
									POPUP 
*****************************************************************************************************/
.popup-content {
	display: none;
}

.popup {
	position: fixed;
	background: url(../images/misc/popup-bg.png);
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	z-index: 100;
	cursor: pointer;
}

.popup--hidden {
	display: none;
}

.popup .popup-content {
	display: block;
}

.popup__table {
	display: table;
	width: 90%;
	margin: 0 auto;
	position: relative;
	height: 100%;
	padding: 35px 0;
}

.popup__table-cell {
	display: table-cell;
	vertical-align: middle;
}

.popup__close {
	display: block;
	position: absolute;
	right: 0;
	width: 40px;
	height: 40px;
	background: url(../images/misc/close_icon_black.png);
	background-image: url(../images/misc/close_icon_black.svg), none;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.popup__content {
	cursor: default;
	margin-top: 55px;
}

.no-scroll {
	overflow: hidden;
}

#privacy-policy {
	background: #FFF;
	padding: 30px;
}

#privacy-policy h2 {
	font-size: 1.625em;
	margin-bottom: 20px;
	color: #333;
	text-align: center;
	font-weight: 300;
}

#privacy-policy p {
	color: #333;
}



/*****************************************************************************************************
									HEADER 
*****************************************************************************************************/
#header
{
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../images/header/header_bg.png);
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#logo
{
	width: 150px;
	line-height: 0px;
	float: left;
	padding: 20px 0 20px 0;
}

#menu
{
	position: relative;
	float: right;
	padding-top: 50px;
}

#menu li
{
	display: block;
	float: left;
	margin-right: 25px;
}

#menu li a
{
	font-family: 'Roboto Slab', serif;
	position: relative;
	text-decoration: none;
	display: block;
	padding: 10px 0;
	color: #fff;
	font-size: 1em;
	line-height: 100%;
	font-weight: 300;
}

/* Not done using :hover to avoid ios conflict*/
#menu li a.active,
#menu li a.hover
{
	font-weight: 400;
}

#menu li:last-child{margin-right: 0;}

#menu li:last-child a {
	font-weight: 300;
	color: #9ACA3C
}




/*****************************************************************************************************
									HERO IMAGE
*****************************************************************************************************/
.hero_image
{
	position: relative;
	width: 100%;
	padding: 15% 0;
	background-size: 100% auto;
	-webkit-background-size: cover;
	background-size: cover;
	ms-behavior: url(/js/backgroundsize.min.htc);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 380px;
}

#what
{
	padding: 20% 0;
	min-height: 450px;
}

@media screen and (min-width: 1766px) {	
.hero_image{padding: 0; height: 530px;}
}

@media screen and (min-width: 1875px) {	
#what{padding:0; height: 750px;}
}

#what{background-image: url(../images/hero/what.jpg);}
#why{background-image: url(../images/hero/why.jpg);}
#when{background-image: url(../images/hero/when.jpg);}
#where{background-image: url(../images/hero/where.jpg);}
#how{background-image: url(../images/hero/how.jpg);}

.hero_image .transparent {
	display: block;
	position: absolute;
	width: 50%;
	bottom: 0;
	left: 0;
}

.hero_image .outer
{
	position: absolute;
	width: 50%;
	left: 0;
	bottom: 0;
	padding: 135px 0 110px 0;
	background-position: 100% 0;
	background-repeat: no-repeat;
}
#what .outer {background-image: url(../images/hero/transparent/turq-small.png)}
#why .outer {background-image: url(../images/hero/transparent/green-small.png)}
#when .outer {background-image: url(../images/hero/transparent/orange-small.png)}
#where .outer {background-image: url(../images/hero/transparent/blue-small.png)}
#how .outer {background-image: url(../images/hero/transparent/purple-small.png)}

@media screen and (max-width: 1500px) {	
#what .outer {background-image: url(../images/hero/transparent/turq-large.png)}
#why .outer {background-image: url(../images/hero/transparent/green-large.png)}
#when .outer {background-image: url(../images/hero/transparent/orange-large.png)}
#where .outer {background-image: url(../images/hero/transparent/blue-large.png)}
#how .outer {background-image: url(../images/hero/transparent/purple-large.png)}
}

.hero_image .inner {
	max-width: 550px;
	float: right;
}

.hero_caption h2
{
	margin-bottom: 0.3em;
}

.hero_caption h3 {
	font-family: 'Roboto', sans-serif;
}


/*****************************************************************************************************
									INFO TEXT
*****************************************************************************************************/
.info {
	margin-top: -30px;
}

.info_top
{
	overflow: hidden;
	width: 100%;
	position: relative;
	height: 30px;
	background: none !important;
}

.info_top .left
{
	width: 50%;
	float: left;
	position: relative;
	left: -23px;
	height: 30px;
}

.info_top .right
{
	width: 50%;
	float: right;
	position: relative;
	right: -23px;
	height: 30px;
}

.info_top span{
	position: absolute;
	display: block;
	height: 30px;
	width: 46px;
	left: 50%;
	margin-left: -23px;
	background: url(../images/hero/separator.png);
	background-image: url(../images/hero/separator.svg), none;
}

.dturquoise.info_top div, .dturquoise {background: #007C89;}
.dturquoise.info_top span{background-position: -1px 0;}

.dgreen.info_top div, .dgreen{background: #74B13B;}
.dgreen.info_top span{background-position: -49px 0;}

.dorange.info_top div, .dorange{background: #F47932;}
.dorange.info_top span{background-position: -97px 0;}

.dblue.info_top div, .dblue{background: #13588F;}
.dblue.info_top span{background-position: -145px 0;}

.dpurple.info_top div, .dpurple, .mixpurple.info_top div.right{background: #6E0F6C;}
.dpurple.info_top span{background-position: -193px 0;}

.lpurple.info_top div, .lpurple{background: #92278F;}
.lpurple.info_top span{background-position: -241px 0;}

.info_content
{
	padding-bottom: 60px;
}

.info h3.bold
{
	height: 100%;
	margin-bottom: 0.5em;
}
#what_info h3.bold {color: #70C0CD;}
#why_info h3.bold {color: #C1DC89;}
#when_info h3.bold {color: #FDC177;}
#where_info h3.bold {color: #7D9FD3;}
#how_info h3.bold,
.how_slide_content h3.bold {color: #B37AB5;}

.info p
{
	line-height: 200%;
}



/*****************************************************************************************************
									ICONS
*****************************************************************************************************/
.icons
{
	padding: 55px 0;
}

.lturquoise{background: #00A3B5;}

.lgreen{background: #9ACA3C;}

.lorange{background: #F7941E;}

.lblue{background: #1C75BC;}

.lpurple, .mixpurple.info_top div.left{background: #92278F;}

.icon
{
	width: 25%;
	float: left;
	text-decoration: none;
}

.icon span
{
	display: block;
	width: 100px;
	height: 100px;
	position: relative;
	background: url(../images/misc/icons.png);
	margin: 0 auto 25px auto;
	background-image: url(../images/misc/icons.svg), none;
	-webkit-background-size: 400px 500px;
	background-size: 400px 500px;
}

#what_icons .icon1 span{background-position: 0px 0px;}
#what_icons .icon2 span{background-position: -100px 0px;}
#what_icons .icon3 span{background-position: -200px 0px;}
#what_icons .icon4 span{background-position: -300px 0px;}

#why_icons .icon1 span{background-position: 0px -100px;}
#why_icons .icon2 span{background-position: -100px -100px;}
#why_icons .icon3 span{background-position: -200px -100px;}
#why_icons .icon4 span{background-position: -300px -100px;}

#when_icons .icon1 span{background-position: 0px -200px;}
#when_icons .icon2 span{background-position: -100px -200px;}
#when_icons .icon3 span{background-position: -200px -200px;}
#when_icons .icon4 span{background-position: -300px -200px;}

#where_icons .icon1 span{background-position: 0px -300px;}
#where_icons .icon2 span{background-position: -100px -300px;}
#where_icons .icon3 span{background-position: -200px -300px;}
#where_icons .icon4 span{background-position: -300px -300px;}

#how_icons .icon1 span, .get_in_touch .icon1 span{background-position: 0px -400px;}
#how_icons .icon2 span, .get_in_touch .icon2 span{background-position: -100px -400px;}
#how_icons .icon3 span, .get_in_touch .icon3 span{background-position: -200px -400px;}
#how_icons .icon4 span{background-position: -300px -400px;}

.icon h5
{
	position: relative;
	font-family: 'Roboto Slab', serif;
	text-align: center;
	padding-top: 20px;
}
.icon h5:after {
	content: " ";
	display: block;
	width: 54px;
	border-bottom: 1px solid #FFF;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -27px;	
}

a.icon
{
	display: block;
	text-decoration: none;
	color: #fff;
}

a.icon:hover
{
	text-decoration: underline;
}

.icon a{
	text-decoration: none; /* For ios generated links */	
}

/*****************************************************************************************************
									TRY IT NOW
*****************************************************************************************************/
#how_info {
	width: 100%;
	margin-top: -30px;
	position: relative;
}
#how_info:after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #6E0F6C;
	height: 50%;
	z-index: -1;
}

#how_info h4 {
	margin-bottom: 0;
}

#how_info {
	padding-bottom: 55px;
}

#how_info .info {margin-top: 0;}

.how_slide_content {
	background: #6E0F6C;
}
.how_slide_content.lpurple {
	background: #92278F;
}


.slide__half {
	width: 49%;
	position: relative;
	padding: 30px 0 60px 0;
}
.slide__half--left {float: left;}
.slide__half--right {float: right;}

.template-slide .img {
	line-height: 0;
	text-align: center;
}

.how_slide h4 {
	margin-bottom: 20px;
}

.how_slide .prev_step {
	color: #C7A0CA;
	text-decoration: none;
	font-size: 0.875em;
}
.how_slide .prev_step:hover {text-decoration: underline;}

.how_slide .prev_step:before {
	content: " ";
	margin-right: 10px;
	display: inline-block;
	width: 5px;
	height: 10px;
	background: url(../images/misc/arrows/prev_step.png);
	background-image: url(../images/misc/arrows/prev_step.png), none;
}

.form_wrapper {
	margin-top: 70px;
}

.form_wrapper input,
.form_wrapper button,
#send_vrvemail ,
#send_another{
	display: block;
	color: #FFF;
	border: 1px solid #FFF;
	background: none;
	width: 100%;
	padding: 15px 12px;
	font-size: 1em;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.select-wrapper {
	margin-top: 25px;
	border: 1px solid #FFF;
}

.select-wrapper select {
	outline: none;
	color: #FFF;
	margin: 0px;
	height: 50px;
	padding: 0 35px 0 15px;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	border: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	border-radius: 0px;
	background: url(../images/misc/select-arrow.png);
	background-image: url(../images/misc/select-arrow.svg), none;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	font-size: 1em;
	line-height: 120%;
}
.select-wrapper label.error {
	position: absolute;
}

.form_wrapper input.mt,
.form_wrapper button.mt {
	margin-top: 25px;
}

.form_wrapper button[type="submit"],
#send_vrvemail,
#send_another {
	font-weight: 300;
	text-align: left;
	background: #92278F;
	cursor: pointer;
}
#send_another {background: #6E0F6C;}

.form_wrapper label.error {
	color: #FFF;
	line-height: 140%;
	display: block;
	font-size: 0.875em;
	margin-bottom: -10px;
	font-weight: 300;
}

::-webkit-input-placeholder {color: #C7A0CA;}
:-moz-placeholder {color: #C7A0CA;}
::-moz-placeholder {color: #C7A0CA;}
:-ms-input-placeholder {color: #C7A0CA;}

.get_in_touch .icon h5 {
	font-size: 1em;
}

#preview_template > div,
#review_template > div {
	border: 1px solid #B37AB5;
}

#send_vrvemail,
#send_another {
	margin-top: 25px;
}

#send_vrvemail span {
	width: 5px;
	height: 10px;
}


/*****************************************************************************************************
									GET IN TOUCH
*****************************************************************************************************/
#get_in_touch {
	padding: 45px 0;
	border-top: 2px solid #FFF;
	background: #333;
}

#get_in_touch .inner {
	max-width: 780px;
	text-align: center;
}

#get_in_touch h3 {
	font-size: 1.5em;
	margin-bottom: 25px;
}

#get_in_touch p {
	font-size: 1.25em;
	margin-bottom: 25px;
	line-height: 180%;
}

#get_in_touch p a {
	text-decoration: none;
	color: inherit;
}

#contact_form .form-row {
	margin-bottom: 15px;
}

#contact_form label {
	color: #FFF;
	font-size: 1.25em;
	display: inline-block;
	font-weight: 300;
}

#contact_form input {
	display: inline-block;
		width: 100px;
		min-width: 100px;
		max-width: 500px;
		height: 30px;
		background: none;
		border: none;
		border-bottom: solid 1px #FFF;
		font-family: 'Roboto Slab', serif;
		font-size: 1.25em;
		font-weight: 300;
		line-height: 150%;
		color: #FFF;
		outline: none;
		padding: 0;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
}

#contact_form button {
	background: none;
	border: none;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 150%;
	margin-top: 25px;
	outline: none;
	text-align: center;
}
#contact_form button:disabled {
	 cursor: default;
}

#contact_form button i {
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#contact_form button:focus i,
#contact_form button:hover i{
	-webkit-transform: translate(5px, 0);
	-ms-transform: translate(5px, 0);
	-o-transform: translate(5px, 0);
	transform: translate(5px, 0);
}

#contact_form .error {
	color: #FF0000;
	padding: 0 0 0 5px;
}

#contact_form input.detect {
	display: none;
}

/*****************************************************************************************************
									FOOTER
*****************************************************************************************************/
#footer
{
	background: #000;
	padding: 20px 0;
}

#footer p
{
	color: #999;
	font-size: 0.8125em;
	font-weight: 300;
	position: relative;
}

#footer p a {text-decoration: none;}
#footer p a:hover {text-decoration: underline;}

#footer .left {
	float: left;
}

#footer .right {
	color: #FFF;
	float: right;
	padding-right: 15px;
	padding-top: 19px;
}
#footer .right:after {
	content: " ";
	display: block;
	width: 37px;
	height: 27px;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../images/misc/footer-bubble.png);
	background-image: url(../images/misc/footer-bubble.svg), none;
}



/*****************************************************************************************************
									RESPONSIVE
*****************************************************************************************************/
/* SCALE DOWN HERO TEXT ––––––––––––––– */
@media screen and (max-width: 1200px) {	
h1,
h2{font-size: 2.8em;}
h3{font-size: 1.8em;}
h4{font-size: 1.6em;}

}/* END SCALE DOWN HERO TEXT ––––––––––––––– */


/* STEP-4 ICONS SMALL ––––––––––––––– */
@media screen and (max-width: 1070px) {	
.get_in_touch .icon{width: 100%; float: none;}
.get_in_touch .icon1, .get_in_touch .icon2{margin-bottom: 25px;}
.get_in_touch .icon span{width: 75px; height: 75px; float: left; margin: 0; -webkit-background-size: 300px 375px; background-size: 300px 375px;}
.get_in_touch .icon1 span{background-position: 0px -300px;}
.get_in_touch .icon2 span{background-position: -75px -300px;}
.get_in_touch .icon3 span{background-position: -150px -300px;}

.get_in_touch .icon h5{float: left; margin: 25px 0 0 25px;}
}


/* iPad Landscape ––––––––––––––– */
@media screen and (max-width: 1024px) {	

}/* End iPad Landscape ––––––––––––––– */




/* iPad Landscape -1px ––––––––––––––– */
@media screen and (max-width: 1023px) {	
/* HERO ––––––––––––––– */
.hero_image .outer {padding: 100px 20px 80px 0;}
.hero_caption{font-size: 0.7em;}

/* ICON ––––––––––––––– */
.icon h5{font-size: 1.1em;}

/* SLIDER –––––––––––––*/
.mixpurple.info_top span {
	background-position: -276px 0;
}

.slide__half {
	width: 100%;
	float: none;
}
.slide__half--left {
	padding-bottom: 0;
}

.form_wrapper {
	margin-top: 20px;
}

}/* End iPad Landscape -1px ––––––––––––––– */



/* MENU SHRINK ––––––––––––––– */
@media screen and (max-width: 880px) {
#menu li{margin-right: 30px;}
#menu li {margin-right: 20px;}
}/* END MENU SHRINK ––––––––––––––– */




/* iPad Portrait ––––––––––––––– */
@media screen and (max-width: 768px) {	
/* INFO TEXT ––––––––––––––– */
.info_text div{width: 100%; float: none;}
.info_text div.left{margin-bottom: 20px;}

}/* End iPad Portrait ––––––––––––––– */




/* iPad Portrait -1px ––––––––––––––– */
@media screen and (max-width: 767px) {
/* MENU ––––––––––––––– */
#logo{width: 100%; float: none; text-align: center; padding-bottom: 0;}
#menu{width: 100%; float: none; padding-top: 20px;}
#menu li{width: 16.6666%; margin-right: 0;}
#menu li a{text-align: center; font-size: 0.875em;}

/* HERO IMAGE ––––––––––––––– */
.hero_image{min-height: 195px; padding: 25% 0px;}
#what{min-height: 300px; padding: 30% 0;}
#what{background-image: url(../images/hero/mobile/what.jpg);}
#why{background-image: url(../images/hero/mobile/why.jpg);}
#when{background-image: url(../images/hero/mobile/when.jpg);}
#where{background-image: url(../images/hero/mobile/where.jpg);}
#how{background-image: url(../images/hero/mobile/how.jpg);}
.hero_image .outer{display: none;}

/* INFO ––––––––––––––– */
.info_content{padding-bottom: 30px;}

/* ICONS ––––––––––––––– */
.icons{padding: 5% 0px;}
.icon span, .get_in_touch .icon span{margin-bottom: 20%; width: 75px; height: 75px; -webkit-background-size: 300px 375px; background-size: 300px 375px;}
#what_icons .icon1 span{background-position: 0px 0px;}
#what_icons .icon2 span{background-position: -75px 0px;}
#what_icons .icon3 span{background-position: -150px 0px;}
#what_icons .icon4 span{background-position: -225px 0px;}

#why_icons .icon1 span{background-position: 0px -75px;}
#why_icons .icon2 span{background-position: -75px -75px;}
#why_icons .icon3 span{background-position: -150px -75px;}
#why_icons .icon4 span{background-position: -225px -75px;}

#when_icons .icon1 span{background-position: 0px -150px;}
#when_icons .icon2 span{background-position: -75px -150px;}
#when_icons .icon3 span{background-position: -150px -150px;}
#when_icons .icon4 span{background-position: -225px -150px;}

#where_icons .icon1 span{background-position: 0px -225px;}
#where_icons .icon2 span{background-position: -75px -225px;}
#where_icons .icon3 span{background-position: -150px -225px;}
#where_icons .icon4 span{background-position: -225px -225px;}

#how_icons .icon1 span{background-position: 0px -300px;}
#how_icons .icon2 span{background-position: -75px -300px;}
#how_icons .icon3 span{background-position: -150px -300px;}
#how_icons .icon4 span{background-position: -225px -300px;}

.get_in_touch .icon span {margin-bottom: 0px;}

.icon h5, .get_in_touch .icon h5{font-weight: 300; font-size: 0.9em;}

/* HOw SLIDER ––––––––––––––– */
#how_info{height: 780px;}
.full_half{height: 350px;}
.full_half.right{height: 400px;}
.full_half p{line-height: 140%;}
	/* STEP 1 ––––––––––––––– */
	.template_preview_wrapper{width: 100%; float: none;}
	.template_preview_wrapper h5{text-align: center;}
	.template_preview{max-width: 320px; margin-left: auto; margin-right: auto;}
	/* STEP 2 ––––––––––––––– */
	.form_wrapper input{width: 100%; float: none;}
}/* End iPad Portrait -1px ––––––––––––––– */







/* iPhone Landscape ––––––––––––––– */
@media screen and (max-width: 568px) {
.no-csstransforms3d.no-csstransforms #header.hide{margin-top: -70px;}
.no-csstransforms3d.csstransforms #header.hide{-webkit-transform: translate(0, -70px); -ms-transform: translate(0, -70px); -o-transform: translate(0, -70px); transform: translate(0, -70px);}
.csstransforms3d #header.hide{-webkit-transform: translate3d(0, -70px, 0); -ms-transform: translate3d(0, -70px, 0); -o-transform: translate3d(0, -70px, 0); transform: translate3d(0, -70px, 0);}
#logo{width: 120px;float: none; margin: 0 auto 5px auto; text-align: center; pt}
#menu{padding-top: 0;}

/* MENU ––––––––––––––– */
#menu li{width: 33.33%;}
#menu li a{padding: 13px 0;}

/* ICONS ––––––––––––––– */
.icon{width: 50%;}
.icon1, .icon2{margin-bottom: 25px}
.icon span{margin-bottom: 15px}

/* FOOTER ––––––––––––––– */
#footer{padding: 5% 0px;}
#footer .inner{text-align: center;}
#footer p.left {float: none;}
#footer p.right {float: none; display: inline-block;}
}/* END iPhone Landscape ––––––––––––––– */


@media screen and (max-width: 450px) {
#footer br{display: block;}
}