@font-face {
	font-family: 'roboto-light';
	src: url('../fonts/roboto-light.eot');
	src: local('../fonts/roboto-light.ttf'), 
	url('../fonts/roboto-light.woff') format('woff'), 
	url('../fonts/roboto-light.ttf') format('truetype'), 
	url('../fontsroboto-light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'roboto-regular';
	src: url('../fonts/roboto-regular.eot');
	src: local('../fonts/roboto-regular.ttf'), 
	url('../fonts/roboto-regular.woff') format('woff'), 
	url('../fonts/roboto-regular.ttf') format('truetype'), 
	url('../fonts/roboto-regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'roboto-medium';
	src: url('../fonts/roboto-medium.eot');
	src: local('../fonts/roboto-medium.ttf'), 
	url('../fonts/roboto-medium.woff') format('woff'), 
	url('../fonts/roboto-medium.ttf') format('truetype'), 
	url('../fonts/roboto-medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.hero{
	position: relative;

	width: 100%; 
	height: 364px;

	background: url(../images/hero.jpg) right center;
	background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;

   -webkit-transition: all .2s ease-in-out;


}
.hero-content{

	position: absolute;
	top: 20%;
	left: 20%;
	-webkit-transition: all .2s ease-in-out;
}
.hero-txt{

	font-family: 'roboto-light', sans-serif;
	font-size: 38px;
	line-height: 38px;
	-webkit-transition: all .2s ease-in-out;
}
a.hero-download-btn{

	padding:12px 24px;
	background: #39b54a;

	line-height: 100px;
	text-decoration: none;
	border-radius: 3px;
	text-align: center;
	color:white;

	font-size: 1.2em;
	font-family: 'roboto-regular', sans-serif;

	-webkit-transition: all .2s ease-in-out;
}
.heading-strip{

	width: 100%;
	height: 75px;

	background: #f4f4f4;
	-webkit-transition: all .2s ease-in-out;
}
.logo-title{
	width: 410px;
	height: 32px;
	
	padding:15px 0 0 0;
	margin:0 auto;

	font-family: 'roboto-light';
	font-size: 2.3em;
	color: #2f2f2f;
	
	-webkit-transition: all .2s ease-in-out;
}
.logo-title img{
	width: auto;
	height: 23px;
	
	margin-bottom:2px;
	-webkit-transition: all .2s ease-in-out;

} 

/*///////////////////////////// Page Body ////////////////////////////////////*/


.download-page-container{

	position: relative;

	max-width:550px;
	height: auto;

	padding: 0;
	margin:70px auto 0 auto;
	-webkit-transition: all .2s ease-in-out;
}
.pos{
	max-width: 550px;
	height: 270px;

	margin: 0 auto;
	-webkit-transition: all .2s ease-in-out;
}
.pos-lower{
	max-width: 550px;
	
	padding:0;
	margin: 20px auto;
	-webkit-transition: all .2s ease-in-out;
}
.content-title{

	font-family: 'roboto-light';
	font-size: 2.1em;
	color: #3d3d3d;
	
	-webkit-transition: all .2s ease-in-out;
}
.content-txt {

	margin: 20px 0 0 0;

	font-style: normal;
	font-family: 'roboto-light';
	font-size: 1.3em;
	color: #3d3d3d;
	
	
	-webkit-transition: all .2s ease-in-out;
}
.hex-right{
	float: right;
	-webkit-transition: all .2s ease-in-out;
}
.hex-left{
	float: left;
	-webkit-transition: all .2s ease-in-out;
}
.txt-right{
	float: right;
	-webkit-transition: all .2s ease-in-out;
}
.txt-left{
	float: left;
	-webkit-transition: all .2s ease-in-out;
}
.line-diag-140{

	position: absolute;
	top: 230px;
	left: 160px;

	width: 238px;
	height: 1px;
	background: #d1d1d1;

	transform: rotate(140deg);
	-webkit-transition: all .2s ease-in-out;
}
.line-diag-40{

	position: absolute;
	top: 500px;
	left: 160px;

	width: 238px;
	height: 1px;
	background: #d1d1d1;

	z-index: 0;

	transform: rotate(40deg);
	-webkit-transition: all .2s ease-in-out;
}

.btn-pos{
	
	width: 170px;
	height: 50px;
	padding: 0;
	margin:0 auto;
}
a.download-btn {

	padding:12px 24px;

	background: #ef6665;

	text-decoration: none;
	border-radius: 3px;
	text-align: center;
	color:white;

	font-size: 1.2em;
	font-family: 'roboto-regular', sans-serif;

	-webkit-transition: all .2s ease-in-out;
}
.info-pos{
	width:650px;
	margin: 0 auto;

	border:1px solid #d5d5d5;
	-webkit-transition: all .2s ease-in-out;
}
.app-download-info{

	max-width: 675px;

	padding:22px 30px;

	font-family: 'roboto-light';
	font-size: 1em;
	color: #3d3d3d;
	-webkit-transition: all .2s ease-in-out;
}
.app-img{
	max-width: 668px;
	margin:0 auto;

}

.border-line{
	height:3px; 
	width:100%; 
	background:#ececec;
}

/*///////////////////////////// Page Lower Styles ///////////////////////////////////*/

.download-page-container-lower{

	position: relative;

	width:100%;
	height: auto;
	padding:0 0 60px 0;

	background: #f2f2f2;
	-webkit-transition: all .2s ease-in-out;
}
.lower-title{
	width: 310px;
	height: 25px;
	padding: 0 0 0 0;
	margin:10px auto 40px auto;

	color: #ef6665;
	font-size: 2.5em;
	font-family: 'roboto-regular';
}
.numbers-circular{
	width: 38px;
	height: 38px;
	padding: 10px;
	margin: 0 auto;

	font-family:'roboto-light';
	font-size: 1em;
	color: white;
	text-align: center;

	border-radius: 20px;
	background: #ef6665;
}
.sml-txt{
	font-size: 15px;
}
.txt-center{text-align: center;}
.v-line{

	width: 1px;
	height: 18px;
	margin: 0 auto;

	background: #d5d5d5;
}

.line-35{
	height:35px;
}
.v-line-white{

	width: 1px;
	height: 35px;
	margin: 0 auto;

	background: #fff;
}

/*///////////////////////////// How It Works Page  ////////////////////////////////////*/


.box-full {
    max-width: 100%;
}

    .box-full .content-title {
        margin-top: 25px;
        padding: 0px 10px;
        text-align: center;
        font-family: 'roboto-light';
        font-size: 1.8em;
        color: #3d3d3d;
        -webkit-transition: all .2s ease-in-out;
    }

    .box-full .content-txt {
        margin: 20px 0 0 0;
        font-style: normal;
        font-family: 'roboto-light';
        font-size: 1.9em;
        color: #3d3d3d;
        -webkit-transition: all .2s ease-in-out;
    }

.line-arrow {
    position: absolute;
    top: 0px;
}

.line-diag-140 {
    position: relative;
    top: 146px;
    left: 532px;
    width: 100px;
    height: 3px;
    background: #000000;
    transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    -webkit-transition: all .2s ease-in-out;
}
.arrow-up {
	position: relative;
    top: 110px;
    left: 611px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid black;
    transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -webkit-transition: all .2s ease-in-out;
}
.howItWorks-page-container{

	position: relative;

	max-width:860px;
	height: auto;

	padding: 40px 0 0 0;
	margin:70px auto 0 auto;
	-webkit-transition: all .2s ease-in-out;
}

.hiw-title-box{
	max-width: 550px;

	padding: 40px 0;
	margin: 0 auto;
	text-align: left;

	background: #fff;
}

.msg-complete{
	position: relative;
	max-width: 850px;
	height: auto;

	margin: 0 auto;
	padding: 30px 0 30px 0;

	text-align:center;

	-webkit-transition: all .2s ease-in-out;
}


.hiw-band-1{
	position: relative;
	max-width: 850px;
	height: 400px;

	margin: 0 auto;
	padding: 30px 0 0 0;
	-webkit-transition: all .2s ease-in-out;
}

.band-1-content{

	position: absolute;
	top:130px;
	right: 0px;

	max-width:355px;
	height: auto;

}


.band-img{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 453px;
	height: 226px;

	-webkit-transition: all .2s ease-in-out;
}


.hiw-band-2{
	position: relative;

	padding: 50px 0 0 0;

	background: #d4d4d4;
}

.hiw-band-3{
	position: relative;

	min-height: 600px;
	width: 100%;
	background: url(../images/hiw-gray-bg.gif) repeat-x top center ;
    
}

.band-3-bg{
	max-width: 860px;
	height: auto;
	
	padding: 164px 80px 100px 80px;
	margin: 0 auto;

	background: url(../images/hiw-browser-bg.png) no-repeat top right ;
}

.hiw-band-4{
	position: relative;
	
	width: 100%;
	min-height: 283px;

	padding: 43px 0;
	background: #ececec;
}

.hiw-band-5{
	position: relative;
	
	width: 100%;
	min-height: 283px;

	padding: 70px 0 30px 0;
	background: #fff;
}

.title-med{

	padding:26px 0 0px 0; 

	color: #505050;
	font-size: 1.3em;
	font-family: 'roboto-medium', sans-serif;
}

.faq-question{
	padding: 15px 40px 35px 40px;

	color: #e84c3d;
	font-style: italic;

	border-top: 2px solid #eeeeee;
	/*border-bottom: 2px solid #eeeeee;*/
}

.red{color:#e84c3d;}

.cnbox-100{
	width: 100%;
}
.box-500{
	max-width: 500px;
}
.box-600{
	max-width: 600px;
}
.box-700{
	max-width: 700px;
	height: auto;
	margin: 0 auto;
}
.box-800{
	max-width: 800px;
	height: auto;
	margin: 0 auto;
}

.spacer40{height: 40px;}

a.portal-btn {

	padding:12px 24px;

	background: #ef6665;

	text-decoration: none;
	border-radius: 3px;
	text-align: center;
	color:white;

	font-size: 1.2em;
	font-family: 'roboto-regular', sans-serif;

	-webkit-transition: all .2s ease-in-out;
}

/*///////////////////////////// Media Queries //////////////////////////////////////*/

@media all and (max-width: 481px) {

 .hero-content{
	position: absolute;
	top: 10%;
	left: 7%;
 }

 .hero-txt{

	font-family: 'roboto-light', sans-serif;
	font-size: 23px;
	line-height: 23px;
	color: white;
}

a.hero-download-btn{

	padding:10px 18px;
	background: #39b54a;

	line-height: 70px;
	text-decoration: none;
	border-radius: 3px;
	text-align: center;

	font-size: 1.0em;
}
.logo-title {
	width: 300px;

	padding:10px 0 0 0;
	margin:0 auto;

	font-size: 1.6em;
	text-align: center;
}

.logo-title img{
	width: auto;
	height: 17px;
	
	padding-bottom:2px;
}
.heading-strip{

	width: 100%;
	height: 55px;

 }
.download-page-container{

	position: relative;

	max-width:1000px;
	height: auto;

	margin:0;
}
.pos{
	max-width: 320px;
	height: 270px;

	margin:60px auto;
}
.content-title{

	margin-top: 15px;

	font-size: 1.8em;
}
.content-txt {

	margin: 10px 0 0 0;
	font-size: 1.3em;
}
.hex-right, .hex-left{
	float: none;
	width: 167px;
	height: 193px;
	margin: 0 auto;

}
#first-hex{
	margin-top: 20px;
}
.txt-right, .txt-left{
	float:none;
	text-align: center;
}
.line-diag-140, .line-diag-40{
	display: none;
 }
.btn-pos{
	
	width: 170px;
	height: 40px;
	padding: 20px 0 0 0;
	margin:0 auto 30px auto;
 }
 .info-pos{
	width:100%;
	padding:10px;
	margin: 0 auto 0 0;
	border-bottom: none;
	
}
.app-download-info{text-align:center;}
.app-img{
	max-width: 320px;
	margin:0 auto;

}
.lower-title{
	width: 250px;
	font-size: 1.8em;
	text-align: center;
}

.hiw-title-box{
	
	padding:0 0px;
}


/* howItWorks-page */


.box-500{

	width: 100%;
	padding:0 20px;
}

.band-3-bg{
	width: 100%;
	padding: 164px 20px 100px 20px;

	text-align: left;

}
.mq-title{
	font-size: 3em;
	line-height: 40px;
	text-align: left;
}

.mq-title-med{
	font-size: 1.4em;
	text-align: left;
}

.mq-txt{
	font-size: 1.2em;
	text-align: left;
}

.hiw-band-1 {
	position: relative;
	width: 320px;
	height: 600px;

	margin: 0 auto;
	padding: 30px 0 0 0;

}


.band-1-content{

	position: absolute;
	top:165px;
	left: 0px;

	height: auto;

	padding:30px 0px;


}
.band-img img{
	position: absolute;
	bottom: 0;
	width: 320px;
	height: auto;

	margin: auto;
}


}


/*///////////////////// Tablets ///////////////////////////*/


@media all and (max-width: 1001px) {

    .line-diag-140 {
        position: relative;
        top: 146px;
        left: 444px;
        width: 100px;
        height: 3px;
        background: #000000;
        transform: rotate(140deg);
        -webkit-transform: rotate(140deg);
        -webkit-transition: all .2s ease-in-out;
    }

    .arrow-up {
	    position: relative;
        top: 110px;
        left: 523px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid black;
        transform: rotate(50deg);
        -webkit-transform: rotate(50deg);
        -webkit-transition: all .2s ease-in-out;
    }

.hero {
	height: 200px;
  }
 .hero-txt{

	font-family: 'roboto-light', sans-serif;
	font-size: 32px;
	line-height: 32px;
}
a.hero-download-btn {

	padding:10px 18px;
	background: #39b54a;

	line-height: 70px;
	text-decoration: none;
	border-radius: 3px;
	text-align: center;

	font-size: 1.0em;
}
.hero-content{
	position: absolute;
	top: 13%;
	left: 7%;
 }
.hiw-title-box{

	text-align: left;
}
.hiw-band-1 {
	position: relative;
	max-width: 450px;
	height: 600px;
	margin: 0 auto;
	padding: 30px 0 0 0;

}
.band-img{
	width: 100%;

}
.band-1-content {
	position: absolute;
	top: 130px;
	right: 0px;
	max-width: 450px;
	height: auto;
}
.band-1-content > .content-txt{ 

	text-align: left;
	font-size: 1.3em;

}

.band-1-content > .title-med{
	text-align: left;
}



}


/* Smartphones (portrait and landscape) ----------- 
@media all and (min-device-width : 320px) and (max-device-width : 480px) {

		.hero{
		height: 200px;
	}

}
*/
/* iPads (portrait and landscape) ----------- */
/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}*/
/* Styles */


/*
@-ms-viewport{
  width: device-width;
}*/