/*
Colors:
Blue: #12398e
Grey: #444444
Dark Grey: #333333
Red: #D92626;

Footer Grey: #9b9b9b
Box Grey: #e5e4e4

Font: 
Clarendon LT
Source Sans Pro

*/

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
     -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    *behavior: url(boxsizing.htc);  
}
@viewport {
    width: device-width;
}

html,body{ 
  height: 100%; 
  font-family: "Source Sans Pro",sans-serif;
  font-size:1em;    
  background-color:#efefef;
  color:#12398e;
} 
input,textarea{
   font-family: 'AkkuratLightOfficeRegular';
   color:#000000;
}
/* Webkit */
::-webkit-input-placeholder { color: #12398e; }

/* Firefox 4-18 */
:-moz-placeholder { color: #12398e; }

/* Firefox 19+ */
::-moz-placeholder { color: #12398e; }

/* IE10+ */
:-ms-input-placeholder { color: #12398e; }

a{
    color:#333;
    text-decoration:underline;
}
.clear{
    clear: both;
}
header{
    padding:60px 0 50px 0;
    background-color: #12398e;
    text-align:center;
}
.content{
    max-width:600px;
    width:100%;
    margin:auto;
    padding:0 45px;
}
p{
    margin-bottom:1em;
    font-size:0.875em;
    clear:left;
}
section.top .content{
    line-height:0;
    fonmt-size:0;
    padding:0;
}
section.top img{
    width:100%;
    height:auto;    
}
section.headline .content{
    background:#e5e3e4;
    padding:35px 45px;
}
section.headline .content h1{
    color:#12398e;
    font-size:38px;
    font-weight:700;
    margin:0;
}
section.form .content{
    padding:35px 45px;
    background:#fff;
}
section.form .content input[type="text"],section.form .content input[type="email"]{
    border:1px solid #ccc;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:10px 10px;
    color:#12398e;
    font-family: "Source Sans Pro",sans-serif;
    width:100%;
}
section.form .content input[type="text"].inputError,section.form .content input[type="email"].inputError{
    border:1px solid #D92626;
}
section.form .content button{
    background-color:#12398e;
    border: medium none;
    border-radius: 2px;
    box-shadow: none;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    float: none;
    display:block;
    font-size: 18px;
    height: 42px;
    margin-bottom:1em;    
    outline: medium none;
    padding: 0;
    width: 100%;
    font-family: "Source Sans Pro",sans-serif;
    font-weight:bold;
    margin:1em auto 0em auto;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#zipcode{
    width:25%;
    margin-right:2%;
    float:left;
}
#city{
    width:73%;
}
#street{
    width:80%;
    margin-right:2%;
    float:left;
}
#streetnumber{
    width:18%;
}
.formRow{
    clear:both;
    padding-top:10px;
}
.formRowError{
    position:relative;
}
.formRowError span{
    margin:10px 0 -10px;
    padding:10px 10px 10px 30px;;
    color:#D92626;
    display:block;
    position:relative;
}

.formRowError img{
    position:absolute; 
    top:10px;
    left:0;
}


section.offers .content{
    background:#ffffff;
    padding:35px 0px 0px 25px;
}


footer{
    background: #9b9b9b none repeat scroll 0 0;
    color:#fff;
    font-size:13px;
    text-align:center;
    line-height:1.5em;
    text-align:left;
}
footer a{
    text-decoration: none;
    color:#fff;
   
}
footer .content{
    padding:10px 10px 45px;
}
section.box .content{
    background:#e5e4e4 url(../images/bottom.jpg) bottom right no-repeat;   
    background-size:210px 420px;
    padding:55px 240px 45px 45px;
    color:#333;
    line-height:25px;
}
section.thankyou .content{
    background:#ffffff;   
    padding:45px;
    color:#333;
    line-height:25px;
}
input[type="checkbox"],input[type="radio"]{
    /*position:absolute;
    top:100000px;
    left:100000px;*/
    display:none;
}
.lblTerms i{
    width:20px;
    height:20px;
     -moz-border-radius: 4px; 
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    top:4px;
    left:0;
}
.lblTerms.radioError i{
    border:2px solid #D92626;   
}
label{
    cursor:pointer;
    
    position:relative;
    display:block;
}
.lblTerms{
    padding-left:30px;
    font-size:14px;
}
input[type="checkbox"]:checked + label i::before{
    content:'';
     width:8px;
    height:8px;
     -moz-border-radius: 4px; 
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    top:2px;
    left:2px;
    background:#12398e;
}
label.lblRadio{
    float:left;
    width:100px;
    padding-left:30px;
    margin-bottom:10px;
}
label.lblRadio i{
    width:20px;
    height:20px;
     -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    top:0px;
    left:0;
}
label.lblRadio.radioError i{
    border:2px solid #D92626;   
}
input[type="radio"]:checked + label i::before{
    content:'';
     width:8px;
    height:8px;
     -moz-border-radius: 8px; 
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    top:2px;
    left:2px;
    background:#12398e;
}
.offers label{
    float:left;
    width:275px;
    color:#333;
    padding:200px 0 0 40px;
   
}
.offers label.offer_1{
    background:transparent url(../images/offer_1.jpg) top left no-repeat;
     background-size:108% auto;
  
}
.offers label.offer_2{
    background:transparent url(../images/offer_2.jpg) top left no-repeat;
     background-size:108% auto;
}



.offers label h3{
    color:#12398e;
}
.offers label i{
    width:20px;
    height:20px;
     -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    right:20px;
    top:20px;    
}
.offers label.radioError i{
    border:2px solid #D92626;   
}
.img-logo{
    width:80%;
    max-width:385px;
    height:auto;
}

@media (max-width: 480px) { 
    .offers label i{
    width:30px;
    height:30px;
     -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    border-radius: 15px;
    right:30px;
    top:30px;    
}

.offers  input[type="radio"]:checked + label i::before{
    content:'';
     width:14px;
    height:14px;
     -moz-border-radius: 14px; 
    -webkit-border-radius: 14px;
    border-radius: 14px;
    border:2px solid #12398e;
    display:block;
    position:absolute;
    top:4px;
    left:4px;
    background:#12398e;
}

    
    .offers label{
        width:100%;
        max-width:340px;
        margin:auto;
        float:none;
        padding:240px 0 0 40px;
    }
section.form .content {
    padding: 35px 20px;
}
section.thankyou .content{
     padding: 35px 20px;
}
section.box .content {
    padding: 35px 20px 450px 20px;        
}
header{
    padding: 30px 0 25px 0;
}
section.headline .content {    
    padding: 35px 20px;
}
section.headline .content h1 {
    font-size: 28px;
text-align:center;      
}
footer .content span{
    display:none;
}
footer .content{
  text-align:center;  
}
footer .content a{
    display:block;
    width:100%;
    line-height:30px;
    
}
footer .content div{
    float:none;
    width:100%;
}
footer .content div:first-child{
    margin-bottom:10px;
}
#zipcode{
    width:30%;
}
#city{
    width:68%;
}
#street{
    width:73%;
}
#streetnumber{
    width:25%;
}
}
@media (max-width: 320px) { 
   section.form .content {
    padding: 25px 10px;
}
section.box .content {
    padding: 20px 10px 450px 10px;        
}
header{
    padding: 20px 0 10px 0;
}
section.headline .content {    
    padding: 20px 10px;
}
section.headline .content h1 {
    font-size: 24px;
      
}
section.thankyou .content{
     padding: 20px 10px;
}
 .offers label{
        padding:220px 0 0 40px;
    }
}