@media only screen and (min-width:651px)
{
    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; }
    
    .faq-question p {display:none !important;}
    
    #fade-ddo, 
    #fade-dd, 
    #directDebitOriginator, 
    #directDebitGuarantee, 
    .policy-cost-duration, 
    .booklet-copy,
    .links-and-contact {display:block !important;}
}

@media only screen and (max-width:990px) 
{
    .wrapper {width:100%; padding-left:1.5%; padding-right:1.5%;}
    
    .progress-bar li {width:20%;}
    .progress-bar li .progress-step {width:auto;}
    
    #content {margin-top: 150px;width: 69%;margin-right: 1%;}
    #sidebar {margin-top: 150px;width: 29%;margin-left: 1%;}
    
    legend {width:100%; padding:15px 2.5%;}
    
    .formRowBlock,
    #directDebitGuarantee  {width:100%; padding:15px 2.5% 10px 2.5%;}
    
    .groupedRequiredField,
    .formRowMultipleFields, .groupedField   {width:100%; padding: 0 2.5%;}
    
    .error-message,
    .help-message
    .summaryBox { width: 100%;padding: 10px 2.5%;}
    
    fieldset,
    #formButtons,
    #dealerPassword,
    #dealerUsername,
    #username,
    #password,
    .formRowBlockContainer,
    .formGroupedTitle,
    #addressSelector, 
    #vehicleType,
    #SummaryForm .formRow .value,
    .formRadioTitle,
    #directDebitGuarantee h2,
     #guaranteeDetails,
     .help-message,
     .summaryBox   { width:100%;}
     
     #directDebitGuarantee h2{width: 100%; padding: 15px 2.5%;}
       
    .formGroupedTitle { margin:15px 0 0; }
    
    .formInputsInline {margin-left:5px;}
    
    #DealerLoginForm .formRowInline,
    #KnownProspectLoginForm .formRowInline {width:50%;}

    
    .formRowInlineLeft {margin-left:0px;}
    
    .formRowInline { padding:15px 0 10px; }
    .formRowInline.second { padding-left:10px; }
    #sidebar > h2 {padding:15px 2.5%;}

    .formGroupedTitle + .formInputsInline  { margin-left:0; }
    
    .groupedRequiredField.three-even .formInputsInline, .groupedField.three-even .formInputsInline {width:33%; margin-left:0;}
    .groupedRequiredField .error-message,
    .groupedRequiredField .help-message, .groupedField .help-message, .groupedField .error-message {margin: 0 0 15px;}
      
    .basket-item-pricing {width: 50%;}
  
    .visited .progressBarNumber {background-size: 35px 35px;margin: -4px -2px 0;width: 43px;}
    
    #personalDetailsSummary .formRowInline,
    #paymentDetailsSummary .formRowInline{ width:50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
   #formButtons > .right > div {clear:both; margin-bottom:10px;}
       
}

@media only screen and (max-width:830px)
{
  
  #product-tabs li a p {font-size:1.2em;}
}

@media only screen and (max-width:780px) 
{
    .progress-bar li .progressBarText { display: table-cell;vertical-align: middle; height: 30px;}
    .progress-bar li .progress-step-action { display:none; }
    
     #outerLightbox   {width: 600px;}
}

@media only screen and (max-width:680px) 
{
  .progress-bar li {width:15%;}
  .progress-bar li .progressBarText {display:none;}
  .progress-bar li .progressBarNumber {width:100%; text-align:center;}
  
  .progress-bar li.current {width:40%;}
  .progress-bar li.current .progressBarText {display:table-cell;}
  .progress-bar li.current .progressBarNumber {width:auto; }
  
  .progress-bar li.visited .progressBarNumber {margin: -4px 25% -2px;}
  
  #vehicleRegistration {width:200px;}
  
  #btnPrint {clear:both; margin-right:0;}
  #PayByDirectDebitForm #back,
  #btnPrint {margin-top:15px;}

}

@media only screen and (max-width:650px)
{
     
    input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
    
    .wrapper {width:100%; padding-left:3%; padding-right:3%;}
    #content {width: 100%; }
       
       
    #sidebar {width: 100%; margin-top:0;}
    #sidebar > .additional-info {text-decoration:underline; cursor:pointer; text-align:center;text-transform: uppercase;}
    #sidebar > .additional-info:hover {text-decoration:none; }
    #sidebar .links-and-contact {display:none;}
    #sidebar #links li a {padding: 12px 10px 12px 22.5px; }
    
    #DealerLoginForm .formRowInline, #KnownProspectLoginForm .formRowInline, .button,.formInputsInline,
    #dealerUsername,  #dealerPassword, #username, #password, #addressLine1, #addressLine2, 
    #addressCity,  #addressCounty, #email, #vehicleRegistration,  #vehicleMake,  #vehicleModel, #vehicleFuelType,  
    #vehicleEnbgineSize, #cardHolder, #accountHolder, #bankName, #accountNumber,#firstname, #surname, 
    #cardNumber,#title,#telephone, #postcode,#policyStartDateDay, #policyStartDateMonth, #vehicleRegistrationDateDay, 
    #vehicleRegistrationDateMonth, #vehiclePurchaseDateDay, #vehiclePurchaseDateMonth, #introductionDateDay, 
    #introductionDateMonth, #startDateMonth, #expiryDateMonth, #issueNumber, #sortCode1, #sortCode2, 
    #sortCode3, #securityNumber, .groupedRequiredField.three-even .formInputsInline, .groupedField.three-even .formInputsInline,  #policyStartDateYear, 
    #vehicleRegistrationDateYear, #vehiclePurchaseDateYear, #introductionDateYear, #startDateYear, #expiryDateYear,
    #vehicleCurrentMileage, #vehicleValuePrice, #addressSelector, #vehicleType,#vehicleEngineSize,
    #vehiclePurchasePrice, #VehicleCurrentMileage, .basket-item-pricing,.basketNote,
    #dealerAdminCurrentPassword, #dealerAdminNewPassword, #dealerAdminConfirmNewPassword,
    #dealerAdminConfirmEmailAddress, #dealerAdminEmailAddress, #formButtons > .right,
    #personalDetailsSummary strong, #paymentDetailsSummary strong {width:100%;}
    
    #sortCode1, #sortCode2,#sortCode3 {
        display: inline-block;
        float: left;
        width: 33% !important;
        margin-right: 1px;
        clear: none;
        text-align: center;
    }
    .sort-code span {
        display: none;
    }
    
    input[type="text"], input[type="number"], input[type="password"] {height:36px !important; text-indent:5px;}
    select {height:34px !important; text-indent:5px;} 
    input[type="radio"] {width:35px; height:35px;}   
    
    input[type=number]::-webkit-inner-spin-button { opacity: 1}

    
    .formInputsInline  { margin-left:0; margin-bottom:10px; }
    
    #postcodeLookup, #vehicleRegistrationLookup {margin-left:0; margin-top:15px;}
    
    #continue {margin-bottom:15px;}
    
    .policy-duration-cost {float:none; width:100%;}
    
    .add-to-basket,
    .basket-item-remove,
    .summary-payment-options,
    #btnPrint,
    .form-radio-wrapper  {float:none;}
    
    #nextProduct,
    #continueForButton > .purchaseQuoteButton  {margin-right:0;}
    
    form > input[type=submit] {margin:0;}
    
    #back,
    #CheckoutForm > .purchaseQuoteButton,
     Next .purchaseQuoteButton,
    #btnPrint,
    #dealerAdminSave { margin-top:0; margin-bottom:15px;}
    
    #outerLightbox {max-width: 95%; max-height:95%; overflow-y:auto; overflow-x:hidden;  }

   .basketNote {text-align:right;}
   
    #product-tabs li a p {font-size:1em;}
    
    #editCustomer, #editVehicle, #editProduct { position:static; margin: 10px 0;}
    
    .paymentOptionText {margin: 15px 10px 15px 0px;}
    
    #btnPrint {margin-left:0;}
    #PayByDirectDebitForm #back {margin-top:0;}
    
    #acceptanceSummary, #directDebitGuarantee, #directDebitOriginator {width: 90%;margin: 10% 5%; max-height: 80%; height: auto; overflow-y:auto;}
    
    #view-as, #fade-as .close, .view-popout {display: block;text-align: center;padding: 0;}
    #view-as,#view-ddo,#view-dd { text-align: center;  font-size: 1.4em;display: block;padding: 20px 10px;}
    .fade { display:none; bottom:0; height:100%; left:0; margin:0 auto; position:fixed; right:0; top:0; background:rgba(0,0,0,0.8); width:100%; z-index:1; }
    #fade-as .close, #fade-ddo .close ,#fade-dd .close  { cursor:pointer; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px;  font-size:25px; font-weight:bold; height: 26px; padding-left:0; position:absolute; right: 2%; text-align:center; top: 4px; width: 26px;display: block;font-family: Arial;}
  
    #nextProduct {margin-top:0; margin-bottom:15px;}
         
    .purchaseQuoteButton  { float:none; margin:20px 0 0; }
    
    #innerLightbox .purchaseQuoteButton {margin:0;}
    
    #checkoutFormButton .purchaseQuoteButton {margin-bottom:15px;}
        
     .dd-slider { display:block;}
     .form-radio-wrapper,
     .faq-answer { display:none;}  
     
     .faq-question {padding: 5px 10px;width: 100%;/* margin: 0 2.5%; */ text-indent: 5px; border-left:none;}
     .faq-question a {display:block; padding:10px; font-size:14px; text-transform:uppercase;  font-size: 14px;}
     
     .faq-question p {display:none; margin-left: 10px;}
             
      fieldset.product-tab {margin-bottom:10px;}
            
  .single-product .policy-cost-duration, 
     .single-product .booklet-copy,
     .standard-display.policy-cost-duration, 
     .standard-display.booklet-copy {display:none;}     
     .single-product .booklet-description, 
     .standard-display.booklet-description {padding:0 2.5%; border-top:1px solid #efefef;}
     .single-product .booklet-description h2, 
     .standard-display.booklet-description h2 {background: url(/images/inchcape/menu-arrow.gif) 0 center no-repeat; display:block; padding:15px 15px 10px; cursor: pointer;text-decoration: underline;line-height: 20px;}
     .single-product .booklet-description.active h2, 
     .standard-display.booklet-description.active h2 {background: url(/images/inchcape/menu-arrow-down.gif) 0 center no-repeat; }
     .single-product .booklet-description h2:hover, 
     .standard-display.booklet-description h2:hover {text-decoration:none;} 
     
      .sort-code input, .sort-code span { float:left; clear:both;}
      
        .quote-results-product-type {display:inline;}
      
     .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:"";  }
.checkbox span.option {  
      border:1px solid rgba(0,0,0,0.2);
      height: 27px;
      width: 75px;
      -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-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 only screen and (max-width:560px)
{
.progress-bar li.visited .progressBarNumber {margin: -4px 15% -2px;}
}

@media only screen and (max-width:500px)
{
    .progress-bar li {width:12.5%;}
    .progress-bar li.visited {width:12.5%;}
    .progress-bar li.current {width:50%;}
    
    #basket {width:45px;}
       
    .progress-bar li.visited .progress-step {padding:0;}
    .progress-bar li.visited .progressBarNumber { background-size: 25px 25px; margin: 11px 27% -2px; padding:0; }
    
    .basket-wrapper .basket-items-count { height:25px; width:25px; line-height:25px; left:-30px; }
}

@media only screen and (max-width:460px)
{ 
     .progress-bar li.visited .progressBarNumber {margin: 11px 20% 0;}
}

@media only screen and (max-width:400px)
{      
    #basket {width:40px;}
    .basket-wrapper {right: 10px;}
        
    .progress-bar li.visited .progressBarNumber {background-size: 20px 20px; margin: 15px 25% 0;}
    
    #sortCode1, #sortCode2,#sortCode3 {
        display: inline-block;
        float: left;
        width: 32.8% !important;
        margin-right: 1px;
        clear: none;
        text-align: center;
    }
}