@media only screen and (min-width:601px)
{
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
    input[type="number"] {-moz-appearance: textfield; }
}

@media screen and (max-width:980px) 
{
    #wrapper
    {
        border:none;
    }
    #content div.formInfo, #content div.formFields
    {
        float:none;
    }
    
    #content div.formFields, #content > h2, #content div.formInfo
    {
        width: 100%;
        padding: 0;
    }
    
    .horizontal div.productOverview, .summaryBox
    {
          width: 95%;
          padding: 10px 2.5%;
          margin-left:0;
    }
}

@media screen and (max-width:850px) 
{
    
    #header
    {
        height:115px;
    }
    
    #header.login-header
    {
        height:auto;
    }
    
    #header #branding, ol.progress-bar
    {
       width: 100%;
    }
    
    #header #branding h1 a 
    {
        width:100%;
    }
    
    
    div#progress-bar
    {
        padding-left: 0;
        margin-top: -47px;
    }
    
    div#progress-bar ol.progress-bar
    {
        border: none;
        border-top: solid 1px rgb(29,51,86);
        border-bottom: solid 1px rgb(29,51,86);
      
    }
    div#progress-bar ol.progress-bar li a
    {
        height:20px;
        line-height:20px;
    }
    
    div#progress-bar ol.progress-bar li a.visited
    {
        border-right: solid 1px #fff; 
    }
    
    div#progress-bar ol.progress-bar li.visited,
    div#progress-bar ol.progress-bar li.unvisited
    {
        width:15%;
    }
    
     div#progress-bar ol.progress-bar li.current
     {
         width:40%;
     }
    
    
    div#progress-bar ol.progress-bar li a.unvisited strong,
    div#progress-bar ol.progress-bar li a.visited strong
    {
        display:none;
    }
    
    div#progress-bar ol.progress-bar li a.unvisited .step-no,
    div#progress-bar ol.progress-bar li a.visited .step-no
    {
        display:block;
    }
}

@media screen and (max-width:700px) 
{

}

@media screen and (max-width:600px) 
{
     #customerAcceptance { width: 40px !important; height: 40px; float: left;}
    .customerAcceptanceCheckbox label { float: left; line-height: 40px; margin-left: 5px;}
    
    .popout       
    {
        margin: 2.5% 5%;
        height: auto;
        width: 80%;
        padding: 5% 5%;
        font-size: 15px;
        max-height: 80%;
        background-color:#fff;
        overflow:auto;
        font-size:12px;
    }
    
    
    #view-as, #fade-as .close, #view-dd, #fade-dd .close, #view-ddo, #fade-ddo .close {display: block;}
    #view-as, #view-dd, #view-ddo { text-align: center; font-size:15px; margin:30px 0;}
    #view-dd {margin:20px 0 30px;}
    .fade { display:none; bottom:0; height:100%; left:0; margin:0 auto; position:fixed; right:0; top:0; background:rgba(0,0,0,0.6); width:100%; z-index:1; }
    .close { cursor:pointer;     background-color: rgb(29,51,86); border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; color:#FFF; font-size:25px; font-weight:bold; height:28px; padding-left:0; position:absolute; right:2%; text-align:center; top:5px; width:28px;display: block; line-height:24px;}

    
    #content
    {
       width:90%;
       padding: 10px 5%;
       background: url(/images/volvo-warranty/ver-repeat-bg.gif) bottom repeat-x; 
       min-height: 0px;
    }
    
    #sub-content
    {
        width:90%;
        padding:10px 5%;
    }
    
    .sub-contentItem
    {
        padding:0;
    }
    
    input[type="submit"] , div.third,div.third:last-of-type, div.third .thirdInput, .purchase-btn-wrapper, select, .back-btn-wrapper input, .continue-btn-wrapper input, #purchaseByCard, #purchaseByDirectDebit, #password, #username
    {
        width:100%;
    }
    
      input[type="submit"].helpButton
    {
        width:auto;
    }
    
    input[type="checkbox"], input[type="radio"]
    {
        width:30px;
        height:30px;
    }
    
    #usernameField, #passwordField
    {
        margin-right:0;
        width:100%;
    }
    
    #vehicleSelection .productOverview, .dd-back
    {
        margin-top:15px;
    }
    
     #vehicleRegistrationLookup, #postcodeLookup, .receipt #btnPrint
     {
         margin-bottom:15px;
     }
   

    #sortCode1, #sortCode2,#sortCode3 {
        display: inline-block;
        float: left;
        width: 32.3% !important;
        margin-right: 1%;
        clear: none;
        text-align: center;
    }
    .sort-code span {
        display: none;
    }
    
    p.sort-code {
        display: block;
        width: 100%;
        height: 60px;
    }

    #links li
    {
        display:none;
    }
    
   #links li.links-header
   {
       display:block;
       cursor:pointer;
   }  
   
   #links li.links-header h4
   {
       text-decoration: underline;
   }
   
   .marketting-option > input, .terms-conditions-wrapper input, .dd-authorised input
   {
       float:left;
   }
   
   .marketting-option label, .terms-conditions-wrapper label, .dd-authorised label
   {
       height: 30px;
    line-height: 30px;
    margin-left: 5px;
   }
   
   .back-btn-wrapper, .back-btn-wrapper p, .continue-btn-wrapper, .continue-btn-wrapper p
   {
       float:none;
   }
   
   .summaryBox div.productDetails > *
   {
        width: 100%;
        float:none;
        padding: 0;
       
   }
   
   .summaryBox div.productDetails .rightList
   {
        margin-top: -10px;
   }
   
   .summaryBox input[type="submit"]
   {
       margin: 5px 0;
   }
   
   #globalSelect
   {
           margin: 10px 0;
   }
   
   .payment-options .payment-option-btn
   {
      float:none;
   }
   .payment-options .payment-option-desc{
    margin-right: 0; 
        height: 15px;
    line-height: 15px; 
   }
   
   .summary-back-btn
   {
       margin-top:15px;
   }
   form .doubleDigit
   {
       width:100%;
   }
   
   .dd-continue, .dd-print, .dd-back
    {
        float:none;
        width:100%;
    }
    
    .dd-continue p, .dd-print p, .dd-back p
    {
        float:none;
        width:100%;
        margin-right:0;
    }
    
    input[type="submit"]
    {
            padding: 10px 10px;
    }
    
    .dd-authorised {display:none;}
.dd-slider {display:block;}

    input[type="submit"]:hover{background-color: rgb(29,51,86);}

    
    
           .checkbox { position:relative; float:left; margin-bottom:5px; clear:both;}
     .checkLabel {float:left;}
     .checkbox input[type="checkbox"] {display:none;}
.checkbox input[type="checkbox"]:checked + label span.option, .checkbox input[type="checkbox"]:checked + span.option {   background-position: -3px 0;-webkit-animation-name: checkbox-switch-on; content:"";   background-image: url("/images/volvo-warranty/checkboxslider.png"); }
.checkbox span.option {
      border:1px solid rgba(0,0,0,0.2);
      height: 25px;
      width: 73px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      -webkit-border-radius:15px;
      -moz-border-radius:15px;
      -ms-border-radius:15px;
      -o-border-radius:15px;
      border-radius:15px;
      background-image: url("/images/volvo-warranty/checkboxslider.png");
      background-position: -53px 0;
      background-repeat: no-repeat;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-duration: 400ms;
      -webkit-animation-name: checkbox-switch-off;
      margin-right: 10px;
      display:block;
      }

    
    @-webkit-keyframes checkbox-switch-on {
      from {
        background-position: -53px 0;
      }
      to {
        background-position: -3px 0;
      }
    }
    

    @-webkit-keyframes checkbox-switch-off {
      from {
        background-position: -3px 0;
      }
      to {
        background-position: -53px 0;
      }
    }
   
   
}

@media screen and (max-width:450px) 
{
  
      div#progress-bar ol.progress-bar li a
      {
          padding:12px 10px;
      }
    
    
        div#progress-bar ol.progress-bar li.visited,
    div#progress-bar ol.progress-bar li.unvisited
    {
        width:12.5%;
    }
    
     div#progress-bar ol.progress-bar li.current
     {
         width:50%;
     }
     
    #sortCode1, #sortCode2,#sortCode3 {
        display: inline-block;
        float: left;
        width: 32.8% !important;
        margin-right: 1px;
        clear: none;
        text-align: center;
    }
     
}

@media screen and (max-width:350px) 
{
    
        div#progress-bar ol.progress-bar li.visited,
    div#progress-bar ol.progress-bar li.unvisited
    {
        width:10%;
    }
    
     div#progress-bar ol.progress-bar li.current
     {
         width:60%;
     }
     

     
}