/* Header */
#header {height: 80px; z-index: 110; position:fixed; top: 0;}
#header .logo {height: 80px; position: relative; width: 49%;}
#header .logo img {position: absolute; margin: auto; top: 0; bottom: 0; max-width: none;}
#header .logo a:hover {border-bottom: none; font-style: normal;}
#header .right-top-corner {position: relative; height: 80px; width: 49%;}
#header .right-top-corner img {position: absolute; margin: auto; top: 0; bottom: 0; max-width: none; right: 0;}

/* Banner */
#header { height: 80px; z-index: 110; position:fixed; top: 0;}
#banner .cycle-pager {text-align: center; position: absolute; width: 100%; bottom: 0; z-index: 150; margin-bottom: 15px;}
#banner .cycle-pager span {font-size: 27px; color: #fff; opacity: .5;letter-spacing: 6px;cursor: pointer;}
#banner .cycle-pager span.cycle-pager-active {opacity: 1;}

/* Footer */
#footer {height: 88px;}
#footer .footer-container {margin: auto; padding-bottom: 0;}
#footer .footer-container p {float: left; margin-top: 40px; font-size: 12px; color: #fff;}
#footer .left-bottom-corner {position: relative; height: 88px; width: 49%;}
#footer .left-bottom-corner img {position: absolute; margin: auto; top: 0; bottom: 0; max-width: none;}
#footer .right-bottom-corner {position: relative; height: 88px; width: 49%;}
#footer .right-bottom-corner img {position: absolute; margin: auto; top: 0; bottom: 0; max-width: none; right: 0;}

/* Warranty Services */
.warranty-services .content {padding-top: 115px; margin-bottom: 30px;}
.warranty-services .content .divider {margin-bottom: 30px;}
.warranty-services .content h1 {margin-bottom: 15px; text-align: center;}
.warranty-services .content .container {background-color: #fff; width: 960px;}
.warranty-services .content .container .additional_info{width: 60%; text-align: center; margin: 0 auto 20px;}
.warranty-services .content .container .dform {width: 50%; margin: 0 auto 20px;}
.warranty-services .content .container h4 {text-align: center; margin-top: 20px;}
.warranty-services .dform_container input.text, .warranty-services .dform_container textarea {width: 100%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.warranty-services .dform_container input[disabled], .warranty-services .dform_container textarea[disabled] {background: #e5e5e5;}
.warranty-services .content label.error, .warranty-services .content .field-validation-error{margin-bottom:5px; font-weight:bold; color:red; display: block; text-align: justify; font-family: Montserrat, sans-serif;}
.warranty-services .content .validation-summary-errors {margin-bottom: 10px;}
.warranty-services .content .validation-summary-errors ul li {font-weight:bold; color:red; display: block; font-family: Montserrat, sans-serif; text-align:center;}

.warranty-services .content .container .confirmation {text-align: center; padding-top: 80px;}
.warranty-services .content .container .confirmation h2 {margin-bottom: 30px; font-size: 40px;}
.warranty-services .content .container .confirmation p {font-size: 25px; margin-bottom: 10px;}
.warranty-services .content .container .confirmation p#confirmationNumber {color: #d39035; font-weight: bold;}

.warranty-services .content .container .claim-checkbox input[type="checkbox"] {visibility: hidden;}
.warranty-services .content .container .claim-checkbox .checkbox-label {margin-bottom: 0; position: relative; color: #000; border: 2px solid #ABABAB; background: #e5e5e5; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 38px 20px 10px;}
/*.warranty-services .content .container .claim-checkbox .checkbox-label:after {text-align: left; content: url('../content/site/blog_archive_arrow.png'); display: block; position: absolute; width: 6px; height: 3px; top: 20px; right: 23px;}
.warranty-services .content .container .claim-checkbox .checkbox-label.active:after {-ms-transform: rotate(90deg); /* IE 9 */ /*-webkit-transform: rotate(90deg);*/ /* Chrome, Safari, Opera */ /*transform: rotate(90deg); top: 28px; right: 15px;}*/
.warranty-services .content .container .claim-checkbox .checkbox-label .check_mark_icon {display:inline-block; width: 19px; height: 19px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; background: #fff; border: 1px solid #ABABAB;  }
.warranty-services .content .container .claim-checkbox .checkbox-label.active .check_mark_icon { background-size: cover; background-image: url('../content/site/checkmark_icon.png'); border-color: #d39035;}
.warranty-services .content .container .claim-checkbox .checkbox-container {text-align: justify; display: none; border-left: 2px solid #ABABAB; border-right: 2px solid #ABABAB; border-bottom: 2px solid #ABABAB; margin: 0 15px; padding: 10px 20px;}
.warranty-services .content .container .claim-checkbox .checkbox-container .dform_element {margin-top: 0;}
.warranty-services .content .container .claim-checkbox .checkbox-container input.text {padding: 10px 6px;}
.warranty-services .content .container .claim-checkbox .checkbox-container label {margin-left: 5px;}
.warranty-services .content .container .claim-checkbox .checkbox-container textarea {padding: 10px 6px; margin: 0 5px; border: 2px solid #ABABAB; -ms-overflow-style: none; -webkit-appearance: none;}
.warranty-services .content .container .claim-checkbox .checkbox-container td{text-align: justify;}
.warranty-services .content .container .claim-checkbox .checkbox-container blockquote {text-align: justify; margin: 15px 20px;}
.warranty-services .content .container .claim-checkbox .checkbox-container blockquote p {margin-bottom: 10px;}

/* Calendar */
.ui-datepicker { width: 300px; height: auto; border-bottom: 2px solid #ABABAB; border-right: 2px solid #ABABAB; border-left: 2px solid #ABABAB; display: none; background: #e5e5e5;}
#forms_field_incidentDate .dform_container{display:table; position: relative; width: 100%;}
#forms_field_incidentDate .dform_container input {display: table-cell;}
#forms_field_incidentDate .dform_container label {display: table-cell; width: 30px; padding: 0 6px; text-align: center; vertical-align: middle; background-color: #e5e5e5; border-top: 2px solid #ababab; border-right: 2px solid #ababab; border-bottom: 2px solid #ababab;}
#forms_field_incidentDate label .calendar-icon  {background: url(../content/site/calendar-icon.png) no-repeat; width: 30px; height: 30px; background-size: cover; display: block;}
.ui-datepicker a {text-decoration: none;}
.ui-datepicker a:hover {border-bottom: none;}
.ui-datepicker table {width: 100%;}
.ui-datepicker-header {background: #3D3834; color: #ffffff; font-weight: bold; position: relative; padding: 5px 0;}
.ui-datepicker-title {text-align: center; margin: 0 2em; line-height: 1.8em;  }
.ui-datepicker-prev, .ui-datepicker-next {width: 30px; height: 30px; cursor: pointer; line-height: 600%; overflow: hidden; position: absolute; top: 2px;}
.ui-datepicker-prev {background: url('../content/site/arrow-prev.png') no-repeat center center;left: 0;  }
.ui-datepicker-next {background: url('../content/site/arrow-next.png') no-repeat center center; right: 0;  }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {border: none; opacity: 0.8;}
.ui-datepicker thead {background: #f7f7f7; border-bottom: 1px solid #bbb;}
.ui-datepicker th {font-size: 12px; padding: 5px 0; color: #000;}
.ui-datepicker tbody tr {border-bottom: 1px solid #ABABAB;}
.ui-datepicker tbody tr:last-child {border-bottom: 0;}
.ui-datepicker tbody td {padding: 0; border-right: 1px solid #ABABAB; text-align: center;}
.ui-datepicker tbody td:last-child {border-right: 0;}
.ui-datepicker td span, .ui-datepicker td a {display: inline-block; font-weight: bold; text-align: center; width: 42px; height: 35px; line-height: 35px; color: #666666; text-shadow: 1px 1px 0 #fff; filter: dropshadow(color=#fff, offx=1, offy=1);}
.ui-datepicker-calendar .ui-state-default {background: #ededed;}
.ui-datepicker-unselectable .ui-state-default {background: #f4f4f4; color: #b4b3b3;}
.ui-datepicker-calendar .ui-state-hover {background: #f7f7f7; text-shadow: none;}
.ui-datepicker-calendar .ui-state-active {background: #d39035; color: #fff; text-shadow: none;}

/* FancySelect */
.warranty-services .fancy-select {width: 100%; height: 62px; margin-right: 0; position: relative; right: 0; bottom: 0; float: none; font-weight: 400; text-transform: none; font-size: 14px; color: #4f4f4f; font-family: 'Montserrat', sans-serif; text-align: left; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.warranty-services .fancy-select .archive_drop {width: 1px; height: 1px; display: block; position: absolute; top: 0; left: 0; opacity: 0;}
.warranty-services .fancy-select div.trigger {width: 100%; height: 62px; border: 2px solid #ABABAB; padding: 20px 38px 20px 10px; margin-top: 0; margin-bottom: 0; background-color: #fff; color: #000; font-family: "verdana","helvetica",sans-serif; font-size: 13px; font-weight: normal; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; transition: all 0ms ease-out; -webkit-transition: all 0ms ease-out; -moz-transition: all 0ms ease-out; -ms-transition: all 0ms ease-out; -o-transition: all 0ms ease-out; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
.warranty-services .fancy-select div.trigger:after {text-align: left; content: url('../content/site/blog_archive_arrow.png'); display: block; position: absolute; width: 6px; height: 3px; top: 20px; right: 23px;}
.warranty-services .fancy-select div.trigger.open {background-color: #fff; color: #989898; border: 2px solid #d39035;}
.warranty-services .fancy-select div.trigger.open:after {-ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); top: 28px; right: 15px;}
.warranty-services .fancy-select ul.options {list-style: none; margin: 0; position: relative; top: 0; left: 0; visibility: hidden; opacity: 0; z-index: 50; max-height: 200px; background: #F9F9F8; width: 100%;  transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.warranty-services .fancy-select ul.options.open {min-width: 250px; top: 0; border: none; visibility: visible; opacity: 1; transition: opacity 300ms ease-out, top 300ms ease-out; -webkit-transition: opacity 300ms ease-out, top 300ms ease-out; -moz-transition: opacity 300ms ease-out, top 300ms ease-out; -ms-transition: opacity 300ms ease-out, top 300ms ease-out; -o-transition: opacity 300ms ease-out, top 300ms ease-out;}
.warranty-services .fancy-select ul.options li {border-right:2px solid #e5e5e5; border-left:2px solid #e5e5e5; width: 100%; max-width: 100%; font-style: normal; cursor: pointer; background-color: #e5e5e5; color: #4f4f4f; position: relative; display: list-item; padding: 15px 10px; margin: 0; transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}
.warranty-services .fancy-select ul.options li.hover, .warranty-services .fancy-select ul.options li:hover {color: #4f4f4f; background-color: #fff;}
.warranty-services .fancy-select ul.options li.selected {background: #d39035; color: #fff; border-right:2px solid #d39035; border-left:2px solid #d39035;}
.warranty-services .fancy-select ul.options li:last-child {border-bottom:2px solid #e5e5e5;}
.warranty-services .fancy-select ul.options li.selected:last-child {border-bottom:2px solid #d39035;}

/* 1. Mobile and teblete  responsive css 767px
-----------------------------------*/
@media (max-width:767px) {
    #header .logo img {max-width: 100%;}
    #header .right-top-corner img {max-width: 100%;}

    #footer {min-width: 100%;}
    #footer .footer-container {width: 100%;}
    #footer .footer-container p { margin-top: 20px;}
    #footer .left-bottom-corner img {max-width: 100%;}
    #footer .right-bottom-corner img {max-width: 100%;}

    /* warranty services page */
    .warranty-services .content {padding-top: 95px}
    .warranty-services .content .container {width: 92%}
    .warranty-services .content .container .dform {width: 100%; max-width: 487px;}
    .warranty-services .content .container .additional_info {width: 100%;}
    .warranty-services .content .container .confirmation {padding-top: 60px;}
    .warranty-services .content .container .claim-checkbox .checkbox-label {padding-top: 10px; padding-bottom: 10px;}
    .warranty-services .content .container .claim-checkbox .checkbox-label:after {top: 12px; right: 20px;}
    .warranty-services .content .container .claim-checkbox .checkbox-label.active:after {top: 18px;}
    .warranty-services .content .container .claim-checkbox .checkbox-label .check_mark_icon {width: 16px; height: 16px;}

    /* Calendar */
    #forms_field_incidentDate .dform_container label {width: 20px;}
    #forms_field_incidentDate label .calendar-icon  {width: 20px; height: 20px;}

    /* FancySelect */
    .warranty-services .fancy-select{height: 40px;}
    .warranty-services .fancy-select div.trigger {height: 40px; padding-top: 10px; padding-bottom: 10px;}
    .warranty-services .fancy-select div.trigger:after {top: 12px; right: 20px;}
    .warranty-services .fancy-select div.trigger.open:after {top: 17px;}
    .warranty-services .fancy-select ul.options {width: 100%;}
    .warranty-services .fancy-select ul.options li {padding: 10px;}
}

/* 2. iPad responsive css 768px to 1024px
-----------------------------------------*/
@media (min-width:768px) and (max-width:1024px) {
    /* warranty services page */
    .warranty-services .content .container {width: 96%}
    .warranty-services .content .container .dform {width: 60%;}
    .warranty-services input.submit {border: 2px solid rgb(233, 114, 0);}
    .warranty-services .dform_container input.text, .warranty-services .dform_container .checkbox-container textarea {width: calc(100% - 10px); width: -webkit-calc(100% - 10px); max-width: 100%;}
    .warranty-services .dform_container input#incidentDate {width: calc(100% - 5px); width: -webkit-calc(100% - 5px); max-width: 100%;}
    .warranty-services .content label.error, .warranty-services .content .field-validation-error, .warranty-services .content .validation-summary-errors ul li {margin-left: 5px;}

    /* FancySelect */
    .warranty-services .fancy-select {margin: 0 5px;}
    .warranty-services .fancy-select div.trigger {width: calc(100% - 10px); width: -webkit-calc(100% - 10px); max-width: 100%;}
    .warranty-services .fancy-select ul.options {width: 100%;}
    .warranty-services .fancy-select ul.options.open {width: calc(100% - 10px); width: -webkit-calc(100% - 10px); max-width: 100%;}
}

/* 3.  mobile responsive css 320px to 480px
----------------------------------------------------*/
@media (min-width:320px) and (max-width:480px) {
    .warranty-services .fancy-select div.trigger:after {top: 10px;}
    .warranty-services .fancy-select div.trigger:after {top: 10px;}

}

/* 4. Other media-query
------------------------------------------------*/
@media (min-width:320px) and (max-width:480px) {
    .warranty-services .content h1 {padding: 0 15px; -webkit-box-sizing: border-box; box-sizing: border-box;}
}

.clearfix:before,
.clearfix:after{
    display: table;
    content: " ";
}
.clearfix:after{
    clear: both;
}