@import "//fonts.googleapis.com/css?family=Nunito:400,300,700";


html {
    height: 100%;
    width: 100%;
}

body {
  background-image: url("/images/03-0000153/1_BACKGROUND.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
    background-color: #dbd9d9;
    font-family: Arial,Helvetica,sans-serif;
            font-weight: lighter;
    font-size: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

html body div.welcomeContainer.questionContainer.active div.logo {
    background-color: white;
    display: block;
    left: 0;
    margin-top: -274px;
    height: 140px;
    position: fixed;
    text-align: left !important;
    width: 100%;
    z-index:9999;
}

.welcomeContainer, .thankYouBox {
    background-color: #ffffff;
    float: right;
    padding: 34px 34px 20px;
    text-align: left;
    width: 700px;
}
.thankYouBox{
	margin-top: -34px;
}

.welcomeText {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 20px;
}

.welcomeContainer.active, .plannerContainer.active, .rangeContainer.active, .thankyouContainer.active{
        opacity: 1;
        transition: opacity 0.2s, visibility 0.2s;
        overflow:none;       
}
.welcomeContainer.inactive, .plannerContainer.inactive, .rangeContainer.inactive, .thankyouContainer.inactive{
        visibility:hidden;
        overflow:hidden;
        height:1px;
        margin:0px;
        padding:0px;
        display:none;
}

html body div.rangeContainer.active h1.heading {
    background-color: #cccccc;
      font-family: Arial,Helvetica,sans-serif;
              font-weight: lighter;
    font-size: 34px;
    font-weight: 500;
    margin: auto;
    padding: 31px 18px;
    text-align: left;
}

html body div.rangeContainer.active button.nextButton {
    background-color: #818281;
    border: 0 none;
    clear: both;
    color: white;
    cursor: pointer;
    float: right;
    font-size: 16px;
    margin-bottom: 1px;
    margin-right: 22px;
    margin-top: -40px;
    padding: 6px 12px;
    
}

html body div.rangeContainer.active div.rangeSelection div.rangeButton:hover div.rangeText {
         transition-duration: 0.4s;
     background-color: #00a6eb;
}


html body div.rangeContainer.active button.nextButton:hover {
    background-color: #00a6eb;
}

.rangeContainer {
  background-color:rgba(255, 255, 255, 0.882353);
  margin:0 20%;
  padding-bottom:35px;
  position:relative;
}

html body div.rangeContainer.active div.logo {
    background-color: white;
    display: block;
    left: 0;
    margin-top: -113px;
    height:118px;
    position: fixed;
    text-align: left !important;
    width: 100%;
    z-index:9999;
}

.plannerContainer .logo {
    text-align: left;
    height:118px;
}


.logoImage {

}

.questions {
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: left;
}
.questionCaption {
    clear: left;
    float: left;
    font-weight: 900;
    padding: 13px 3px 3px;
    text-align: left;
    width: 96px;
}
.questionInput {
    float: left;
    padding: 3px;
    text-align: left;
    width: 240px;
}
.questionInput input {
    background-color: #e5e5e5;
    border: 0 none;
    border-radius: 0;
    color: #000000;
    font-size: 12px;
    height: 16px;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 8px 6px 8px 10px;
    width: 240%;
    border: 1px solid #ccc;
}

.questionInput:after {
    clear: both;
    content: "";
    display: table;
}
.nextButton {
    background-color: #818281;
    border: 0 none;
    clear: both;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 6px 12px;
    float:right;
    text-transform:uppercase;
}
.nextButton:hover {
    background-color: #00a6eb;
         transition-duration: 0.4s;
}
.clearfix {
    clear: both;
    display: block;
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
h2 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: lighter;
    margin-left: 20px;
    margin-top: 25px;
}
.rangeButton {
    float: left;
    height: 238px;
        position:relative;
}
.rangeImage img {
    height: 194px;
    margin-left: -20px;
    margin-top: -20px;
    width: 295px;
}
.rangeButton:hover {
    cursor: pointer;
}
.rangeButton.selected {
}
.rangeImage {
    border: 4px solid white;
    box-shadow: 3px 5px 20px 0 #b8b3b3;
    height: 154px;
    margin: 20px;
    padding: 20px;
    width: 255px;
}
.rangeText {
    background-color: rgba(119, 112, 112, 0.68);
    color: white;
    display: inline-block !important;
    font-size: 13px;
    font-weight: lighter;
    margin-left: 24px;
    margin-top: -54px;
    padding: 8px 5px 7px 13px;
    position: absolute;
    text-transform: uppercase;
    width: 277px;
}

.rangeText:hover {
        background-color: #00a6eb;
    display: inline-block;
}


.plannerContainer {
    height: 100%;
    text-align: left;
    width: 100%;
}
#plannerFrame {
    box-sizing: border-box;
    width: 100%;
}
h1 {
    color: black;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 34px;
    font-weight: 500;
    margin: 0 0 0.67em;
    text-transform: uppercase;
}
.copyright {
    border-top: 0;
    clear: both;
    display: block;
    padding: 10px 0px;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #fff;
	height: 20px;
}
.copyrightLink {
    color: #fff;
}
.page_1_section_1 {
    background-color: white;
    padding: 18px 0;
    text-transform: uppercase;
    width: 100%;
}
.page_1_section_2 {
    bottom: 16%;
    height: auto;
    padding: 34px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    width: 50%;
}

html body div.rangeContainer.inactive div.rangeSelection h2.selectedRange {
    font-family: lato;
    padding: 13px 0 0 20px;
    text-align: left;
}

.rangeSelection {
    margin: auto;
    width: 1030px;
}

html body div.rangeContainer.active button.nextButton {
    margin-left: 34px;
}

.plannerContainer.active {
    background-color: white;
    display: block;
}

.plannerContainer .logoImage {
 
}


.thankyouContainer.active {
position:relative;
padding: 34px 0px 0px;
text-align: left;
}


html body div.thankyouContainer.active div.logo {
    background-color: white;
    display: block;
    left: 0;
    margin-top: -34px;
       height:118px;
    position: fixed;
    text-align: left !important;
    width: 100%;
    z-index:9999;
}


.thankyouText {
    font-size: 14px;
}
.address{
        float:right; 
        font-size: 13px;
        padding-right:14px; 
        padding-top:14px;
        position:absolute; 
        right:10px; 
        text-align:right;
}
.plannerContainer .logo .address{
        padding-top:16px;
}
/*.thankYouBox{
	background-color:white;
	position:absolute;
	top:240px;	
	right:1px;
	padding:36px;
	width:700px;	
}*/
.error{
        border-left-color:red !important;
        border-bottom-color:red !important;
        background-color:#ffeeee !important; 
             
}





.select-style {
    padding: 3px 2px 3px 2px;
    margin: 0;
    border: 1px solid #ccc;
    width: 588px;
    border-radius: 0px;
    overflow: hidden;
    background: #e5e5e5 url("/images/arrowdown.gif") no-repeat 570px 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}
.leftPad{
        padding-left:17px;       
}

.bodySection {
  height: calc(100% - 180px);
  margin-top: 0;
  position: relative;
}

.logo{
	height: 140px;
}