/*Home Page*/

.bodyarea.home {margin: 20px auto 10px auto;} @media (max-width: 750px) {.bodyarea.home {margin: 0 auto 10px auto;}}
	
/*-----------------------------------------------*/

/*Blocks*/

#blocks {border-spacing: 20px 0; display: table; margin: 30px auto 0 auto; padding: 0 5px; text-align: center; max-width: 1500px;}
.block {position: relative; display: table-cell; vertical-align: top; margin: auto; width: 25%; text-align: left; margin: 0 15px; line-height: 1.5; padding: 15px 20px;  background-color: #174677; color: #FFF; border-radius: 8px;}
.blockin {margin-bottom: 60px;}
.block .blkhead {font-size: 1.8em; line-height: 1.2; font-weight: 600; color: #F1B000;}
@media (max-width: 1150px) {#blocks {border-spacing: 15px 0; margin: 15px auto 0 auto;}}
@media (max-width: 1150px) and (min-width: 751px) {.block .blkhead {font-size: 2.7vw;}}
@media (max-width: 900px) {.block {padding: 15px 15px;}}
@media (max-width: 750px) {
.block {display: inline-block; width: 40%; margin: 8px; min-height: 350px;} #blocks {border-spacing: 0;} .block .blkhead {font-size: 1.6em;}
}
@media (max-width: 600px) {.block {min-height: 400px;}}
@media (max-width: 500px) {.block {display: block; width: auto; min-height: auto;}}

.checks ul {position: relative; list-style: none; margin: 0; padding: 0 0 0 1.4em;}
.checks li {padding-bottom: 5px; margin-left: -5px; font-size: .9em; line-height: 1.5;}
.checks li:last-child {padding-bottom: 0;}
.checks li:before {content: "\2713"; position: absolute; left: 0; /*line-height: 1;*/ color: #F1B000; font-size: 1.2rem; font-weight: 600;}
/*  \2713 & \2714 are checkboxes, \2022 is bullet, \2753 is question mark */
.checks span {display: inline-block; padding-left: 6px; margin-top: 3.5px; font-weight: normal;}  /*inline-block allows aligning of text under bullets*/


.blkbtn {position: absolute; bottom: 0; left: 0; right: 0; bottom: 15px; width: 90%; text-align: center; margin: 30px auto 0 auto; -webkit-transition: 0.4s; border-radius: 6px;}
.blkbtn a {display: block; padding: 8px 0 7px 0; font-size: 18px; font-weight: 500; line-height: 1.4; text-decoration: none !important; background-color: #F1B000; -webkit-transition: 0.4s; white-space: nowrap; border-radius: 6px; /*border: 2px solid #FFF;*/}

@media (max-width: 800px) and (min-width: 751px) {.blkbtn span span {display: none;}}
.blkbtn, .blkbtn a {color: #174677;} .blkbtn a:hover {background-color: #FFDC51;}

/*-----------------------------------------------*/

/*What Is and Differences*/

.sec1 {background-color: #DDD;} .sec1 .heading {padding-top: 30px;}

#diffs {display: table; border-spacing: 30px 0; text-align: center;}
.diff {position: relative; display: table-cell; vertical-align: top; margin: auto; width: 33%; text-align: center; margin: 0 15px; line-height: 1.5; padding: 55px 20px 25px 20px; background-color: #174677; color: #FFF; border-radius: 8px; border: 3px solid #FFF;}

@media (min-width: 361px) {
.diff div:before {content: url("images/starburst.png"); position: absolute; top: -41px; left: 0; right: 0; text-align: center; margin: auto; -webkit-filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px 1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px -1px 0 #FFF); color: #FFF !important;}
}
.diff:before {content:"\2714"; position: absolute; top: -25px; left: 0; right: 0; font-size: 35px; color: #FFF !important; text-align: center; margin: auto; height: 45px; width: 45px; line-height: 45px; z-index: 1; background-color: #2765A6; border-radius: 50%; border: 2px solid #FFF;}
@media (max-width: 1150px) {#diffs {border-spacing: 15px 0;}}
@media (min-width: 1091px) {#diffs {margin: 70px 10vw 50px 10vw;}} @media (max-width: 1090px) {#diffs {margin: 60px -15px 50px -15px;}}
@media (max-width: 900px) {.diff {padding: 55px 15px 25px 15px;}}
@media (max-width: 750px) {
#diffs {margin: 50px 15px 50px 10px; border-spacing: 0;}
.diff {display: block; width: 100%; box-sizing: border-box; padding: 25px 15px 25px 60px; text-align: left;}
.diff:nth-child(2) {margin-top: 35px; margin-bottom: 35px;}
.diff div:before, .diff:before {right: auto;} .diff div:before {top: -30px; left: -30px;} .diff:before {top: -14px; left: -14px;}
}
@media (max-width: 480px) {#diffs {margin: 50px 20px 50px 10px;} .diff {padding: 20px 15px 20px 60px;}}
@media (max-width: 360px) {
.diff {padding: 15px 15px 15px 25px;} .diff:nth-child(2) {margin-top: 30px; margin-bottom: 30px;}
.diff:before {top: -25px; left: -25px; background-color: #F1B000;}
}

/*-----------------------------------------------*/

/*#valueswrap, #valueswrap * {border: 1px solid red}*/

#valsection {margin: 0 auto; background-color: #F1B000;}
#valsection .bodyhead {padding-top: 40px; color: #174677;}

#valueswrap {width: 100%; max-width: 1600px; margin: auto; text-align: center; padding: 30px 0 40px 0; box-sizing: border-box;}
.value {vertical-align: top; font-size: 20px; padding: 15px; box-sizing: border-box;}
.value img {display: block; vertical-align: middle; margin: auto; width: 106px; height: 106px; height: auto;}
.valhead {margin: 15px auto 10px auto; font-weight: 700; text-transform: uppercase; font-size: 1.2em; line-height: 1.4;}
.valtxt {color: #222; font-size: .85em; line-height: 1.5; font-weight: 400;}

@media (max-width: 1080px) and (min-width: 706px) {.valhead {font-size: 1.1em; letter-spacing: -.4px;}}
@media (max-width: 965px) and (min-width: 706px) {.valhead {font-size: 1.05em; letter-spacing: -.5px;}}
@media (max-width: 960px) and (min-width: 706px) {.valtxt {font-size: .85em;}}
@media (min-width: 706px) {
.value {width: 31%; display: inline-block; text-align: center;} .valueimg {vertical-align: middle; display: table-cell; width: 1%;}
}
@media (max-width: 705px) {
#valsection {padding: 0 5% 30px 5%;} #valueswrap {padding: 20px 0;}
.value {display: block; width: auto; text-align: left; margin: 0; padding: 20px 0;}	
.valueimg {float: left; vertical-align: top; text-align: left; margin-right: 15px;}
.valhead {margin: 0 auto 10px auto;} .valtxt {display: table-cell;}
}
@media (max-width: 500px) and (min-width: 401px) {.value img {width: 95px; height: 95px;}}
@media (max-width: 400px) {
.value {text-align: center; padding: 15px 0;} 
.valueimg {display: table-cell; float: none; height: auto; width: 1%; vertical-align: middle; margin: auto; padding-bottom: 10px;}	
}

/*-----------------------------------------------*/

#rvwback, #rvwback .bodyarea {background-color: #999;} #rvws {width: 100%; margin: 30px auto 40px auto;}
.rvw {vertical-align: top; text-align: center; font-size: 20px; padding: 30px; background-color: #FFF; border-radius: 8px;}
.rvwimg {display: inline-block; position: relative; width: 100%; max-width: 265px; background-image: url("images/5-stars.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; margin-bottom: 20px;}
.rvwimg div {padding-top: 48px;} .rvwtxt {color: #193C90; font-size: 1.1em; line-height: 1.7; margin-bottom: 20px;}
.rvw span {display: block; line-height: 1.5; color: #666; font-size: .8em;}

@media (max-width: 1180px) {#rvws {margin: 20px auto 30px auto;} .rvw {padding: 20px;} .rvwtxt {font-size: 1.05em;}}
@media (min-width: 901px) {#rvws {display: table;} .rvw {display: table-cell; width: 31%;}}
@media (max-width: 900px) {#rvws {margin: 0 auto 20px auto;} .rvw {display: block; width: auto;}}
@media (max-width: 480px) {.rvw {padding: 20px;}}
@media (max-width: 380px) {.rvwtxt {font-size: 1em;}} @media (max-width: 330px) {.rvwimg {margin-bottom: 10px;}}