@charset "UTF-8";

/*html, body {
    height: 100%;
    min-height: 100%;
}
  MP  */
body.review-garage {
    margin: 0;
    padding: 0;
    border: 0;
    font: 100%;
    font-family: 'Open Sans', sans-serif;
    background-color: #1c75b3;
    line-height: 21px
}

body.tyWhite {
  background-color: #fff !important;
}
p {
    font-family: 'Open Sans', sans-serif;
    line-height: 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    display: block;
    margin: 0;
    border: none;
}

ul {
    font-family: 'Open Sans', sans-serif;
}

img {
    border: 0px none;
}

form, fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
/* *{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} */
.form_hint, .required_notification {
    font-size: 11px;
}

nav.bcMenu {
    box-shadow: 0 6px 6px rgba(0,0,0,0.2);
}

#headerOuter {
    width: 100%;
    height: 80px;
    padding: 0;
    background-color: #fff;
    box-shadow: 0px 6px 6px rgba(0,0,0,0.2);
    z-index: 2;
}

#headerLogo {
    width: 100%;
    max-width: 270px;
    height: auto;
    padding: 15px 0 0;
    margin: 0 auto;
}

    #headerLogo img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border: none;
        display: block
    }


#headerOuter,
#headerOuter * {
  transition: all 0.3s ease;
}

/* form error style */

.rating:not(:checked)>label#rating-error::before {
  content: '' !important;
}

.rating:not(:checked)>label#rating-error {
  float: none;
  display: block;
  width: 100%;
  padding: 0 .1em;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5em;
  color: red !important;
  font-weight: normal;
  text-shadow: none;
  border: none !important;
  top: 0;
  left: 0;
}

select.error {
  border: 2px solid #F00!important
}

.error {
  color: #F00!important;
  font-weight: 600 !important;
}

/*div.carQBox label.error {
    position: relative;
    top: -12px;
    left: 13px;
    font-size: .75em !important;
}*/

label#practical-error,
label#reliable-error,
label#runningcosts-error,
label#goodtodrive-error,
label#recommendfamily-error {
  position: relative;
  top: -12px;
  left: 13px;
  font-size: .75em!important
}

label#recommend-error,
label#repairs-error {
    font-size: 12px !important;
    top: -33px;
    position: relative;
    margin: 0 auto;
    left: 50%;
    right: 50%;
}

label#garageChoice-error {
    font-size: 12px !important;
    top: 20px;
    position: relative;
    margin: 0 auto;
}

label#reviewComment-error {
  font-size: 12px !important;
}
#garageReviewOuter {
    min-height: 100%;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color:inherit; /*MP*/
}

#titleBlock {
    width: 100%;
    max-width: 800px;
    height: auto;
    background-color: #fff;
    text-align: center;
    margin: 0 auto 20px;
    border-radius: 0 0 20px 20px;
    position: relative;
    z-index: 1;
    padding: 20px 10px;
    box-sizing: border-box
}

#garageReviewInner {
    width: 95%;
    max-width: 1000px;
    /*margin: 0 auto 10px;MP */
	margin: 0 auto;
    padding-bottom: 10px; /* MP*/
}

    #garageReviewInner h1 {
        font-size: 2em;
        line-height: 1.25em;
        font-weight: 300;
        color: #00ab04;
        margin: 0px;
        text-align: center;
    }

.firstQ {
    text-align: left;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

.pushRight {
    margin: 0 45px;
}


.greyOut {
    background-color: #e8e8e8 !important;
    color: #d3d3d3 !important;
}


.transition {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
}

#garageImage {
    width: 200px;
    height: auto;
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 8px;
    float: right;
}

    #garageImage img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border: none;
        display: block;
    }

/*img.clipCircle {clip-path: circle(80px at center);}*/
.leftFloat {
    float: left;
    margin: 0 0 10px 0;
}

#uploadWrap {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px 0 20px 0;
    padding: 10px;
    box-sizing: border-box;
}

.review_form h2 {
    width: 82%;
    font-size: 1em;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.25em;
    display: inline-block;
    vertical-align: middle;
}

.review_form h3 {
    font-size: 0.75em;
    font-weight: 600;
    color: #000;
  margin-bottom: 5px;
    line-height: 1em;
  padding: 0;
}

p.introText {
    font-size: 1em;
    color: #78838a;
    line-height: 1.5em;
    margin: 0;
    text-align: center;
    letter-spacing: -0.015em;
}

p.captureSupText {
    font-size: 11px;
    color: #00295b;
    margin: -23px 0 15px 48px;
    padding: 0;
}

.sectionWrap {
    width: 100%;
    height: 63px;
    margin: 10px auto;
}

.tallerSection2 {
    margin-bottom: 40px;
    padding-left: 45px;
    padding-right: 45px;
    box-sizing: border-box;
}

.tallerSection {
    padding-left: 45px;
    padding-right: 45px;
    box-sizing: border-box;
}


.sectionSurround {
    width: 100%;
    height: auto;
    background-color: rgb(230,230,230);
    border-radius: 15px 0 0 0;
    padding: 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/*.sectionSurround:hover {background-color: #1E90FF;}*/

.optionsSurround {
    width: 100%;
    height: auto;
    background-color: rgb(230,230,230);
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-bottom-right-radius: 15px;
}

.garageChoice {
    text-align:center;
}

#garageChoice {    
    width: 100%;
    border-radius: 8px;
}

.lifestyleComment {
    padding-left: 45px;
    padding-right: 45px;
}

.lifestyleComment h2 {
    padding-left: 0;
    width: 100%;
}

.showHide {
    width: 100%;
    height: auto;
    background-color: rgb(230,230,230);
    border-radius: 0 0 15px 0;
    padding: 20px 65px 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    float: left;
}

/* textarea */
textarea.reviewComment {
    width: 100%;
    min-height: 100px;
    border: 2px solid #d3d3d3;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 0.82em;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54
}

    textarea.reviewComment::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #666;
    }

    textarea.reviewComment::-moz-placeholder { /* Firefox 19+ */
        color: #666;
    }

    textarea.reviewComment:-ms-input-placeholder { /* IE 10+ */
        color: #666;
    }

    textarea.reviewComment:-moz-placeholder { /* Firefox 18- */
        color: #666;
    }




/* Car review textarea */
textarea.carComment {
    width: 100%;
    height: 155px;
    border: 2px solid #d3d3d3;
    border-radius: 4px 4px 15px 4px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 0.82em;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54;
    margin: 0 1% 25px 0;
}

textarea.carComment::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #666;
}

textarea.carComment::-moz-placeholder { /* Firefox 19+ */
    color: #666;
}

textarea.carComment:-ms-input-placeholder { /* IE 10+ */
    color: #666;
}

textarea.carComment:-moz-placeholder { /* Firefox 18- */
    color: #666;
}


/* star rating */
.rating_selection {
  margin: 5px 0 10px 0;
}

.rating {
  float: left;
}


/* :not(:checked) is a filter, so that browsers that don?t support :checked don?t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn?t make the test unnecessarily selective */

.rating:not(:checked)>input {
  position: absolute;
  /*top: -9999px;*/
  clip: rect(0, 0, 0, 0);
}

.rating:not(:checked)>label {
  float: right;
  width: 1em;
  padding: 0 .1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 50px;
  line-height: 1.2;
  color: white;
  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

.rating:not(:checked)>label:before {
  content: '\2605 ';
    margin-right: 20px;
}

.rating:not(:checked)>label:hover {
  text-shadow: none !important;
}

.rating:not(:checked)>label:hover~label:before {
  text-shadow: none !important;
}

.rating>input:checked~label {
  color: #fd9e26;
  text-shadow: none !important;
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: #fd9e26;
}

.rating>input:checked+label:hover,
.rating>input:checked+label:hover~label,
.rating>input:checked~label:hover,
.rating>input:checked~label:hover~label,
.rating>label:hover~input:checked~label {
  color: #fd9e26;
  text-shadow: none !important;
}

/* Custom radio */
/* The container */
.container {
    display: inline-block;
    width: 47%;
    position: relative;
    float: left;
    cursor: pointer;
    /*font-size: 24px;
    font-weight: 300;*/
    color: #00ab04;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    padding-top: 12px;
    background-color: #fff;
    box-sizing: border-box;
    height: 64px;
    border-radius: 32px;
}

.flRight {
    float: right !important;
}

/*p.containerSmalltext {position:absolute; top:20px; left:0; right:0; margin:0 auto; font-size:11px; color:#8c979e; margin:5px 0 0; padding:0;}*/

p.answerText {
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 24px;
  font-weight: 300;
  color: #00ab04;
  margin: 5px 0 0;
  padding: 0;
}

p.answerTextSmall {
  position: absolute;
  top: 33px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 11px;
  font-weight: 400;
  color: #8c979e;
  margin: 5px 0 0;
  padding: 0;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
}
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    border-radius: 30px;
    border: 2px solid #a9a9a9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* On mouse-over, add a green border color */
.container:hover input ~ .checkmark {
  border-color: #00ab04/* #00c904 */
  ;
  background-color: #00ab04;
}
/* When the radio button is checked, add a green border */

.container input:checked~.checkmark {
  border-color: #00ab04/* #00c904 */
  ;
  background-color: #00ab04;
}

.container:hover input~.answerText {
  color: white !important;
}

.container:hover input~.answerTextSmall {
  color: white !important;
}

.container input:checked~.answerText {
  color: white !important;
}

.container input:checked~.answerTextSmall {
  color: white !important;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
    border-color: #1E90FF;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}



.inputText {
    font-size: 13px;
    width: 100%;
    height: 32px;
    padding: 2px 10px;
    border: 1px solid #9AC0CD;
    box-sizing: border-box;
}

    .inputText:focus {
        border: 1px solid #E0EEE0;
        background-color: #E0EEE0;
    }

.floating-label {
    font-size: 13px;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 5px;
    transition: 0.25s ease all;
    color: #838B8B;
}

.selectText {
    pointer-events: cursor;
    color: #838B8B;
    width: 100%;
    height: 34px;
    padding: 2px 10px;
    font-size: 13px;
    border: 1px solid #9AC0CD;
}

    .selectText:focus {
        border: 1px solid #E0EEE0;
        background-color: #E0EEE0;
    }

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
    top: -20px;
    left: 10px;
    font-size: 11px;
}

.captureBtn {
    width: 100% !important;
    height: 40px !important;
    background-color: none !important;
}

.sendPartOne {
    width: 100%;
    margin: 10px auto;
    height: 46px;
    display: inline-block;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 23px;
    border: 0;
    color: #fff;
    cursor: pointer;
    background: url(https://images.blackcircles.com/img_home/search-arrow.png) no-repeat 80% center #00ab04;
    background-size: auto auto;
    background-size: 15px 13px;
}

#contWrap {
    width: 100%;
    height: auto;
    padding: 0 55px;
    box-sizing: border-box
}

.sendPartTwo {
    width: 48%;
    margin: 10px 10px 10px 0;
    height: 46px;
    display: inline-block;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 23px;
    border: 0;
    color: #fff;
    cursor: pointer;
    background: url(https://images.blackcircles.com/img_home/search-arrow.png) no-repeat 80% center #00ab04;
    background-size: auto auto;
    background-size: 15px 13px;
    float: right;
}

/* styling file input */
input[type="file"] {
    display: none;
}

.custom-upload {
    border: 1px solid #b8b8b8;
    display: inline-block;
    cursor: pointer;
    background-color: #fff;
    width: 100%;
    height: 40px;
    text-align: center;
    margin: 0 auto 10px;
    line-height: 42px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #303030;
    font-weight: 600;
    font-size: 0.875em;
}

.cropper-canvas {
  top: 0 !important;
}

.blue-big {
    color: #1E90FF;
    font-size: 16px !important;
}


/*.page {
            margin: 1em auto;
            max-width: 768px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            height: 100%;
        }*/

.box {
    /* padding: 0.5em; */
    width: 100%;
    /* margin:0.5em; */
}

.box-2 {
    /* padding: 0.5em 0; */
    width: calc(100%/2 - 1em);
    /*100%;
            88vh*/
}

.options label,
.options input {
    width: 4em;
    padding: 0.5em 1em;
}

.zoomIn {
    width: 22px;
    height: 22px;
    color: #fff;
    background-color: #00ab04;
    border-radius: 11px;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin: 3px 10px 0 0;
}

.zoomOut {
    width: 18px;
    height: 18px;
    color: #00ab04;
    background-color: #fff;
    border-radius: 11px;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin: 3px 0 0 0;
    border: 2px solid #00ab04;
}

.btn {
    background: white;
    color: black;
    border: 1px solid black;
    padding: 0.5em 1em;
    text-decoration: none;
    margin: 0.8em 0.3em;
    display: inline-block;
    cursor: pointer;
}

.save {
    border: 2px solid #00ab04;
    color: #00ab04;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    padding: 0 0 0 10px;
    font-size: 14px;
    line-height: 14px;
    background-color: #fff;
    margin: 5px 0 20px 0;
}

.hide {
    display: none;
}

img {
    max-width: 100%;
}

#Images img {
    width: 70px;
    height: 70px;
    display: inline-block;
    text-align: left;
    margin: 0 2px 5px 10px;
}

a.deleteBtn {
    width: 22px;
    height: 22px;
    color: #fff;
    background-color: #00ab04;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    margin: 2px 0 0 -31px;
    vertical-align: top;
    border-radius: 13px;
    border: 2px solid #fff;
}

/* full screen crop viewer */

/*.cropFullWrap {
        width: 100%;
        height: 100vh;
        padding: 40px 10px 10px;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        background-color: #F00;
        left: 0;
        z-index: 9998 !important;
        display: table;
    }*/

.cropFullWrap {
    width: 100%;
    height: 100%;
    background-color: #333;
    /* opacity: 0.8;
    filter: alpha(opacity=80); */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    /* border: solid black; */
    z-index: 9999
}

.cropper-bg {
    width: 100% !important;
    height: 71vh !important;
}

/*
    #cropViewer .box-2 {
        width:100% !important;
        height:88vh !important;
    }
    */

.fullHeight {
    width: 100% !important;
    height: 77vh !important;
}

.cropperFull {
    width: 100% !important;
    height: 85vh !important;
}






/* -/--/-/-/-/-/-/-/-/-/-//-/-/-/-/-/-//-/-/-/-/-/-/-/
FORM - PART 2 STYLES
-/--/-/-/-/-/-/-/-/-/-//-/-/-/-/-/-//-/-/-/-/-/-/-/*/

#carReviewOuter {
    height: 100%;
    min-height: 100%;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto
}

#carReviewInner {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto 10px;
}

    #carReviewInner h1 {
        font-size: 2em;
        line-height: 1.25em;
        font-weight: 300;
        color: #00ab04;
        margin: 0px;
        text-align: center;
    }

#carTitleBlock {
    width: 100%;
    max-width: 800px;
    height: auto;
    background-color: #fff;
    text-align: center;
    margin: 0 auto 20px;
    border-radius: 0 0 20px 20px;
    position: relative;
    z-index: 1;
    padding: 30px 10px;
    box-sizing: border-box;
    border-bottom: 3px solid #02a039;
}

#carFormWrap {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px 0 20px 0;
    padding: 10px;
    box-sizing: border-box;
}

.carQBox {
    width: 49%;
    height: 176px;
    position: relative;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    /* border: 2px solid #e3e3e3; */
    padding: 10px;
    background: rgb(230,230,230);
    box-sizing: border-box;
    text-align: left;
    float: left;
    margin: 0 1% 10px 0;
}

.carQBox:hover {background-color: #1E90FF;}
.carQBox:hover.carQBox label {color: #fff;}
.carQBox:hover.carQBox .labelText {color:#fff;}

/* On mouse-over, add a green border color */

.container:hover input~.checkmark {
  border-color: #00ab04/* #00c904 */
  ;
  background-color: #00ab04;
}


/* When the radio button is checked, add a green border */

.container input:checked~.checkmark {
  border-color: #00ab04/* #00c904 */
  ;
  background-color: #00ab04;
}

.container:hover input~.answerText {
  color: white !important;
}

.container:hover input~.answerTextSmall {
  color: white !important;
}

.container input:checked~.answerText {
  color: white !important;
}

.container input:checked~.answerTextSmall {
  color: white !important;
}

.boxRight {
    float: right !important;
    margin-right: 0 !important;
}

#box1 {
    border-radius: 15px 0 0 0;
}

#box2 {
    border-radius: 0 0 0 0;
}

#box3 {
    border-radius: 0 0 0 0;
}

#box4 {
    border-radius: 0 0 0 0;
}

#box5 {
    border-radius: 0 0 0 0;
}

#box6 {
    border-radius: 0 0 15px 0;
}


.carQBox label {
    width: 100%;
    height: 35px;
    font-family: 'Open Sans',sans-serif;
    font-weight: 700;
    font-size: 1em;
    color: #000;
}

.carQBox select {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border: 1px solid #acacac;
    border-radius: 8px;
    padding-left: 10px;
    margin: 5px 0 10px;
    cursor:pointer;
}


.carQBox select:focus {
    border: 2px solid #1E90FF;
}

.part2Title {
    margin-bottom: 0 !important;
}

#carDetails {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e3e3e3;
    margin: 0 auto 20px;
    text-align: center
}

    #carDetails p {
        font-size: 11px;
        text-align: center;
        font-weight: 400;
        display: inline-block;
    }

span.detailSplit {
    color: #1E90FF !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    vertical-align: text-bottom;
}

#carImage {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

    #carImage img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border: none;
        display: block;
    }

div.qNumber {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #00ab04;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 30px;
    margin: 0 5px 0 0;
    border: 4px solid white;
    vertical-align: text-bottom;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* span.qNumber {font-weight:600; display:inline-block; width:30px; height:30px; background-color: #00ab04; color:#fff; text-align: center; line-height: 30px; border-radius:30px; margin:0 5px 0 0; border:4px solid white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} */

span.qCarNumber {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #00ab04;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    margin: 0 5px 10px 0;
    border: 5px solid white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

span.firstOption {
    color: #000 !important;
}

.labelText {
    width: auto;
    height: auto;
    border-radius: 8px;
    padding: 5px 10px 10px;
    margin: 0;
  font-size: 11px;
  color: #000;
    line-height: 1.5em;
}

i.fa-info-circle {
    font-size: 16px !important;
    color: #8c979e;
}

.shiftLeft {
    margin-left: -45px !important;
}


/* -/--/-/-/-/-/-/-/-/-/-//-/-/-/-/-/-//-/-/-/-/-/-/-/
FORM - Thank you page
-/--/-/-/-/-/-/-/-/-/-//-/-/-/-/-/-//-/-/-/-/-/-/-/*/

#tyOuter {
    width: 100%;
    height: auto;
    position: relative;
    padding: 80px 0 60px;
    background-color: white;
}

#tyInner {
  width: 95%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

#tyInner h1 {
  font-size: 2em;
  color: #8c979e;
  font-weight: 300;
  text-align: center;
  margin-bottom: 5px;
  line-height: 1.25em;
}
#tyInner h1.final {
    padding-top: 30px;
}

#tyInner h2 {
  color: #00c904;
  font-weight: 600;
  text-align: center;
  font-size: 1em;
}

#splitLine {
    background-color: #bac9d1;
    width: 90%;
    max-width: 450px;
    height: 2px;
    border-radius: 5px;
    margin: 40px auto;
}

#tyInner h3 {
  color: #4d4d4d;
  font-weight: 700;
  text-align: center;
  font-size: 1em;
  margin-bottom: 3px;
}

p.tyNumber {
  font-size: 2.25em;
  color: #00c904;
  font-weight: 300;
  text-align: center;
  margin: 0 0 10px
}

p.tySmall {
  color: #78838a;
  font-size: 0.75em;
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5em;
}

span.heavyWeight {
  font-weight: 800 !important
}

@media only screen and (max-width:667px) {
  #tyInner h1 {
    font-size: 1.75em;
  }
}

@media only screen and (max-width:480px) {
  #tyInner h1 {
    font-size: 1.5em;
  }
  #tyInner h2 {
    font-size: 0.875em;
  }
  #tyInner h3 {
    font-size: 0.875em;
  }
  p.tyNumber {
    font-size: 1.75em;
  }
  span.heavyWeight {
    display: block;
    margin: 0 auto 5px;
    font-size: 35px;
  }
}


/* MEDIA QUERIES */


/* Above iPad landscape */

@media only screen and (min-width:1025px) {
  .showHide {
    display: none;
  }
}

@media only screen and (max-width:1024px) {
    .showHide {
        display: block !important;
    }
    #headerOuter {
        height: 50px;
    }

    #headerLogo {
        max-width: 170px;
        padding: 8px 0 0;
    }
    #tyInner h1.final {
        padding-top: 0;
    }
}

@media only screen and (max-width:880px) {
    .carQBox {
        width: 100%;
        height: auto;
        text-align: left;
        float: none;
        margin: 0 auto 10px;
    }

    .boxRight {
        float: none !important;
    }

    textarea.carComment {
        width: 100%;
        min-height: 125px;
        height: auto;
        float: none;
        margin: 0 auto;
    }

    .sendPartTwo {
        width: 100%;
        margin: 10px auto 10px;
        float: none;
    }
}



@media only screen and (max-width:767px) {
    #garageReviewInner h1 {
        font-size: 1.5em;
    }

    #carDetails {
        border-bottom: 0px;
    }

        #carDetails p {
            display: block;
            border-bottom: 1px solid #e3e3e3;
            width: 100%;
            margin: 0 auto;
            padding: 5px 0;
        }

    span.detailSplit {
        display: none;
    }
  #headerOuter {
    height: 50px;
  }
  #headerLogo {
    max-width: 170px;
    padding: 9px 0 0;
  }

    #carReviewInner h1 {
        font-size: 1.5em;
    }
}

@media only screen and (max-width:680px) {
    #garageImage {
        width: 150px;
    }

    .review_form h2 {
        font-size: 0.875em;
        font-weight: 700;
    }

    .review_form h3 {
        font-size: 0.6875em;
    }
}

@media only screen and (max-width:550px) {
    span.qNumber {
        display: inline-table;
        margin-top: -3px;
    }

    .circleSpace {
        margin-right: 7px !important;
    }

    .showHide {
        padding: 20px 20px 10px;
    }

    .shiftLeft {
        margin-left: 0 !important;
    }

    .tallerSection2, .tallerSection {
        padding-left: 0;
        padding-right: 0;
    }

    .pushRight {
        margin: 0;
    }

    #contWrap {
        padding: 0 20px;
    }
}

.loadingIcon {
    display: none;
    position: fixed;
    left: 47%;
    top: 50%;
    width: 82px;
    height: 82px;
    z-index: 9999;
    background: url(https://images.blackcircles.com/images/general/color-circle20.gif) center no-repeat #fff;
    background-size: 80px;
    border-radius: 41px;
}

/* Progress Bar */

#progressbar {
    display: none;
    position: fixed;
    top: 50%;
    z-index: 9999;
    width: 90%;
    max-width: 670px;
    height: 50px;
    background: white;
    border-radius: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 2px solid #3ed6ff;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    line-height: 50px;
    color: #424953;
    font-size: 90%;            
}

#progressbarvalue {
    display: none;
    position: absolute;
    z-index: 9999;
    width: 100%;
}

#progressbarOverlay {
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .6;
    filter: Alpha(Opacity=1);
    z-index:9998;
    display: none;
}

.ui-progressbar-value
{
   background: #3ed6ff;
   border: 2px solid #3ed6ff;
}

@media only screen and (max-width: 600px) {
    .loadingIcon {left: 43%;}
}

@media only screen and (max-width: 420px) {
    .loadingIcon {left: 42%;}
}

@media only screen and (max-width:480px) {
    p.introText {
        font-size: 0.75em;
        line-height: 1.25em;
    }

    .sendPartOne {
        width: 100%;
        float: none;
    }

    .review_form h2 {
        margin-bottom: 10px;
    }

    .firstQ {
        margin-bottom: 20px !important;
    }
}

@media only screen and (max-width:425px) {
    p.captureSupText {
        margin: -10px 0 15px 45px;
    }
}

@media only screen and (max-width:420px) {
    #garageReviewInner h1 {
        font-size: 1em;
    }

    #carReviewInner h1 {
        font-size: 1em;
    }
}

@media only screen and (max-width:390px) {
  .rating:not(:checked)>label {
    font-size: 45px;
  }
}

@media only screen and (max-width:380px) {
  .review_form h2 {
    font-size: 0.75em;
  }
}

@media only screen and (max-width:374px) {
  #Images img {
    width: 65px;
    height: 65px;
  }
}

@media only screen and (max-width:369px) {
    .tallerSection {
        height: 65px;
    }
}

@media only screen and (max-width:355px) {
  .rating:not(:checked)>label {
    font-size: 40px;
  }
}
@media only screen and (max-width:350px) {
    .tallerSection2 {
        height: 64px;
    }
}


@media only screen and (max-width:335px) {
    p.introText {
        font-size: 0.6875em;
    }
}


/* retina display 
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
}*/

/* Maintenance Reviews  */
#bcCarMaintenanceReviews .carQBox {
    width: 100%;
    height: auto;
    padding: 20px 25px 10px;
    margin: 0 0 10px 0;
}

#bcCarMaintenanceReviews .carQBox label {
    font-weight: 400;
}
#bcCarMaintenanceReviews option {
    font-weight: normal;
}

#bcCarMaintenanceReviews label.share {
    width: 100%;
    font-weight: 400;
    font-size: 0.75em;
    padding: 0 0 5px;
    margin: 0 !important;
}

#carTitleBlock h1 {
    font-size: 1.5em;
    line-height: 1.25em;
    font-weight: 600;
    color: #000;
    margin: 0px;
    text-align: center;
    max-width: 65%;
    margin: 0 auto;
    letter-spacing: -0.035em;
}

#bcCarMaintenanceReviews span.qCarNumber {
    display: block;
    position: absolute;
    left: -26px;
    top: 10px;
}
input#shareWhyNot {
    width: 100%;
    height: 48px;
    border: 1px solid #00ab04;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54;
    margin: 3px 0 10px;
}

input#whichGarage {
    width: 100%;
    height: 48px;
    border: 1px solid #00ab04;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54;
    margin: 3px 0 10px;
}

input#hsNotAGain {
    width: 100%;
    height: 48px;
    border: 1px solid #00ab04;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54;
    margin: 3px 0 10px;
}

input#shareWhyNoExtras {
    width: 100%;
    height: 48px;
    border: 1px solid #00ab04;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
    color: #3a4a54;
    margin: 3px 0 10px;
}

.tandcSurround {
    float: left;
    width: 100%;
    height: auto;
    padding: 20px 0;
    box-sizing: border-box;  
}
.tandcSurround #useComments {
    padding-left: 40px;
    margin: 0 10px;
    min-height: 85px;
}

/* MEDIA QUERIES */


@media only screen and (max-width:880px) {
    #bcCarMaintenanceReviews .carQBox {
        width: 100%;
        height: auto;
        text-align: left;
        float: none;
        margin: 0 auto 10px;
    }

    #bcCarMaintenanceReviews .boxRight {
        float: none !important;
    }

    #bcCarMaintenanceReviews .sendPartTwo {
        width: 100%;
        margin: 10px auto 10px;
        float: none;
    }
}

@media only screen and (max-width:800px) {
    #garageReviewInner h1.part2Title {
        font-size: 1.15em;        
    }
}

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

    #bcCarMaintenanceReviews span.qCarNumber {
        display: inline-block;
        width: 26px;
        height: 26px;
        background-color: #00ab04;
        color: #fff;
        text-align: center;
        line-height: 26px;
        border-radius: 16px;
        margin: 0;
        border: 2px solid white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        font-size: 12px;
        position: absolute;
        left: -18px;
        top: 17px;
    }

    #bcCarMaintenanceReviews .carQBox label {
        font-size: 0.875em;
    }
}

@media only screen and (max-width:650px) {
    #bcCarMaintenanceReviews .carQBox label {
        display: block;
        height: auto;
        line-height: 1.25em;
        margin-bottom: 5px
    }

    #bcCarMaintenanceReviews span.qCarNumber {
        display: none;
    }

    #bcCarMaintenanceReviews .carQBox {
        padding: 10px 10px 0;
    }
}


#useComments, #followUp {
    width: 100%;
    height: auto;
    line-height: 1.5em;
}
#useComments, #followUp {
    position: relative;
    padding-left: 40px;
    min-height: 75px;
    line-height: 1.5em;
    text-align: left;
}

    #useComments input:checked ~ .checkmark, #followUp input:checked ~ .checkmark {
    background-color: #00ab04;
}

    #useComments .checkboxselect label, #followUp .checkboxselect label {
    position: relative;     
    margin-left: -40px;
}

    #useComments .checkmark:after, #followUp .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

    #useComments input:checked ~ .checkmark:after, #followUp input:checked ~ .checkmark:after {
    display: block;            
}

#agreetandc, #followup-optin {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    float: none;
    clear: left;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    z-index: 2;
    margin: 0;
}
#useComments span.checkmark, #followUp span.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: 28px;
    background-color: #fff;
    border: 1px solid #bcc2c6;
    -ms-border-radius: 0;
    border-radius: 0;
}



/*!
 * Cropper.js v1.3.4
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2015-2018 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2018-03-31T06:49:06.196Z
 */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}