/*
GTC Emissions Calculator CSS
Created: 13/4/21
Updated: 8/6/21
Developed by: a-m-w.net
*/

/* ovrerides for other styles */
.breadcrumb {
    margin-bottom:5px !important;
}
.text-green {
    color:#35564b;
}
.text-black {
    color:#292b2c;
}

/* emissions calc pages */
#emissionsIntroCopy {
    padding-top:30px
}
#emissionsBG {
    position: relative;
    /*min-height:150vh;*/
    min-height:1000px;
    /*
    background-size:cover;
    */
    background-size: 120%;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url('../images/emissions-bg.png');
}
#emissionsCarSpace {
    position: relative;
    /*
    padding-top:80vh;
    */
    padding-top:520px;
    padding-bottom: 40px;
}
#calcDisclaimer {
    bottom:0px;
    position: absolute;
    padding: 20px 0px;
    font-size: 14px;
    width:100%;
}
#calcDisclaimerInner {
    font-size: 14px;
    max-width: 1200px;
    width:80%;
    text-align: center;
    margin: 0 auto;
}


.emissionsCar {
    position: absolute;
    height:150px;
    width:330px;
    background-repeat: no-repeat;
    background-size:contain;
}


#emissionsResultsWrap {
    float:left;
    z-index: 999;
    margin-top:0px;
    background-color:rgba(182,223,150,0.9);
    width:100%;
}
#emissionsResults {
    width:880px;
    margin:0 auto;
    padding:24px 0px;
    text-align: center;
}
#resultsIntro {
    font-size:20px;
}
#resultsMain {
    margin:15px 0px 20px 0px;
    font-size:30px;
}
#resultsMinor {
    font-size:20px;
}
.resultG {
    display:none;
}

#emissionsLinksWrap {
    float:left;
    z-index: 999;
    margin-top:12px;
    background-color:rgba(243,243,243,0.9);
    width:100%;
}
#emissionsLinks {
    text-align: center;
    font-size:22px;
    width:880px;
    margin:0 auto;
    padding:24px 0px;
}
#emissionsLinksBtnWrap {
    margin-top:25px
}
#emissionsLinksBtnWrap a {
    display: inline-block;
}


#emissionsFormWrap {
    float:left;
    z-index: 999;
    margin-top:50px;
    background-color:rgba(206,206,206,0.5);
    width:100%;
}
#emissionsForm {
    width:880px;
    margin:0 auto;
    padding:24px 0px;
}
#emissionsForm #eForm1, #emissionsForm #eForm2, #emissionsForm #eForm3, #emissionsForm #eForm4 {
    width:29%;
    display:inline-block;
}
#emissionsForm #eForm2 {
    width:10%;
    text-align: center;
}
#emissionsForm #eForm4 {
    text-align: right;
}
.eFormLabel {
    font-size:18px;
    margin-bottom:14px;
}
.eFormInputs {
    position: relative;
}
.eFormInputs select, .eFormInputs input {
    font-size:15px;
    font-weight: 600;
    border: 2px solid #73c92d;
    border-radius: 3px;
    background-color: #fff !important;
}
.eFormPrefix {
    position: absolute;
    left: 10px;
    top: 11px;
    font-size:15px;
    font-weight: 600;
}
.eFormInputs input {
    width:120px;
    padding:8px 10px 8px 20px;
}
.eFormInputs select {
    width:120px;
    padding:8px;
    cursor: pointer;
    background: url('../images/emissions-select-arrow.png') no-repeat 96% 50%;
}
.eFormInputs select:hover {
    opacity:0.9;
}
.eFormBtn, .resultsCTABtn {
    color: #fff;
    background-color: #73c92d;
    font-size:14px;
    font-weight: 600;
    padding: 8px 12px;
}
.eFormBtn:hover, .resultsCTABtn:hover {
    background-color: #5b9f24;
    cursor: pointer;
    color: #fff;
}
.resultsCTABtn {
    z-index: 999;
    text-transform: uppercase;
    font-size:16px;

    position: relative;
    top:-5px;
}
.resultsCTAFloat {
    float:right;
}

#car1 {
    /* gtc light car */
    left:-1200px;
    top:120%;
    /* background-image: url('../images/emissions-car1.png'); */
}
#car2 {
    /* vw sharan car */
    left:-1200px;
    top:80%;
    /* background-image: url('../images/emissions-car2.png'); */
}
#car3 {
    /* tx4 */
    left:2200px;
    top:83%;
    /* background-image: url('../images/emissions-car3.png'); */
}
#car4 {
    /* gtc zero emission car */
    left:2200px;
    top:130%;
    /* background-image: url('../images/emissions-car4.png'); */
}


/* smoke exact position */
#car1 .smoke {
    position:absolute;
    left:10px;
    top:-60px;
}
#car2 .smoke {
    position:absolute;
    left:10px;
    top:-65px;
}
#car3 .smoke {
    position:absolute;
    left:290px;
    top:-40px;
    float:right;
}
#car4 .smoke {
    position:absolute;
    left:330px;
    top:-65px;
    float:right;
}
/* smoke effect */
.smoke {
	position: absolute;
	z-index: 3;
	width: 1px; height: 160px;
	left: 50%; bottom: 30px;
}
/* smoke balls */
.smoke span {
    display: block;
	position: absolute;
	bottom: -25px; left: 50%; margin-left:-20px;
	height: 0px; width: 0px;
	border: 25px solid #4b4b4b;
	border-radius: 35px;
	left: -14px; opacity: 0;
	transform: scale(0.2);
}
/* colours overrides */
#car1 .smoke span, #car4 .smoke span {
    border: 25px solid #2e6ca4;
}
/* Smoke animation */
@keyframes smokeL {
	0%   { transform: scale(0.2) translate(0, 0) }
	10%  { opacity: 1; transform: scale(0.2) translate(0, -5px) }
	100% { opacity: 0; transform: scale(1) translate(-20px, -130px) }
}
@keyframes smokeR {
	0%   { transform: scale(0.2) translate(0, 0) }
	10%  { opacity: 1; transform: scale(0.2) translate(0, -5px) }
	100% { opacity: 0; transform: scale(1) translate(20px, -130px) }
}
.smoke .s0 { animation: smokeL 10s 0s infinite }
.smoke .s1 { animation: smokeR 10s 1s infinite }
.smoke .s2 { animation: smokeL 10s 2s infinite }
.smoke .s3 { animation: smokeR 10s 3s infinite }
.smoke .s4 { animation: smokeL 10s 4s infinite }
.smoke .s5 { animation: smokeR 10s 5s infinite }
.smoke .s6 { animation: smokeL 10s 6s infinite }
.smoke .s7 { animation: smokeR 10s 7s infinite }
.smoke .s8 { animation: smokeL 10s 8s infinite }
.smoke .s9 { animation: smokeR 10s 9s infinite }



/* pins */
.pin1 {
    background-image: url('../images/emissions-tag-blue.png');
    font-size:18px;
}
.pin2 {
    background-image: url('../images/emissions-tag-grey.png');
    font-size:16px;
}
.pin3 {
    background-image: url('../images/emissions-tag-darkgrey.png');
    font-size:18px;
}
.pins {
    z-index: 999;
    background-size: contain;
    background-repeat: no-repeat;
    width:100px;
    height:141px;
    display:inline-block;

    text-align: center;
    padding:25px 10px;
    color:#fff;

    position: absolute;
    top:-150px;
    left:80px;
}

@media only screen and (max-width: 1060px) {
    #car1, #car2, #car3, #car4 {
        left: 0 !important;
        margin: 0 auto 120px auto;
        position: relative;
        width: fit-content;
        text-align: center;
        background-position: center;
    }
}

@media only screen and (max-width: 1000px) {
    #emissionsResults, #emissionsLinks {
        width:100%;
    }
    #emissionsResults {
        padding:20px;
    }
    #resultsIntro {
        padding:20px 20px 0px 20px;
    }
    #resultsMinor  {
         padding:0px 20px 20px 20px;
     }
    #resultsMain {
        padding:0px 20px;
    }
    .emissionsCar {
        height:120px;
    }
    #car1, #car2, #car3, #car4 {
        width:250px;
    }
    #car1 .smoke {
        left:0px;
        top:-80px;
    }
    #car2 .smoke {
        left:0px;
        top:-80px;
    }
    #car3 .smoke {
        left:260px;
        top:-80px;
    }
    #car4 .smoke {
        left:250px;
        top:-110px;
    }
}
@media only screen and (max-width: 920px) {
    #emissionsForm {
        width:auto;
        padding:30px;
    }
    #emissionsForm #eForm4 {
        width:auto;
    }
    #averageNumBookings, #typicalSpend {
        margin-bottom:20px;
    }
}
@media only screen and (max-width: 850px) {
    .emissionsCar {
        height:100px;
    }

    /* hide big markers */
    .pins {
        background-image:none;

        position: relative;
        top:0px;
        width:auto;
        height:auto;
        display:block;
        text-align: center;
        padding:0px;
        color:#000;


        width:100% !important;
        background-position: center;
        left:inherit !important;
    }
    .pinLabel {
        width:80px;
        display: inline-block;
    }


    #car1, #car2, #car3, #car4 {
        width:200px;
    }
    #car1 .smoke {
        left:0px;
        top:-100px;
    }
    #car2 .smoke {
        left:0px;
        top:-100px;
    }
    #car3 .smoke {
        left:200px;
        top:-80px;
    }
    #car4 .smoke {
        left:200px;
        top:-120px;
    }
}
@media only screen and (max-width: 560px) {
    #emissionsForm #eForm1, #emissionsForm #eForm2, #emissionsForm #eForm3, #emissionsForm #eForm4 {
        width:100%;
    }
    #emissionsLinks {
        padding:20px;
        font-size:18px;
    }
    #emissionsLinksBtnWrap a {
        font-size:14px;
    }
    #resultsIntro, #resultsMinor {
        font-size:18px;
        padding:20px;
    }
    #resultsMain {
        font-size:22px;
        font-weight: bold;
        margin:0px 20px;
    }
    #averageNumBookings, #typicalSpend {
        margin-bottom:0px;
    }
    #emissionsForm #eForm2 {
        margin:20px;
    }
    #emissionsForm #eForm4 {
        text-align: center;
        margin:30px 0px 0px 0px;
    }
    #emissionsFormWrap {
        margin-top:0px;
    }
}



/* switch to single car at a time */
@media only screen and (max-width: 600px), screen and (max-height: 700px) {
    .carWrap {
        padding: 0 60px;
    }
    #car1 .smoke {
        left:auto;
        top:-100px;
        position: absolute;
    }
    #car2 .smoke {
        left:auto;
        top:-95px;
        position: absolute;
    }
    #car3 .smoke {
        left:auto;
        top:-80px;
        right: 0px;
        margin-left:15px;
        position: absolute;
    }
    #car4 .smoke {
        left:auto;
        top:-110px;
        right: 0px;
        margin-left:10px;
        position: absolute;
    }
    #emissionsCarSpace {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 500px) {
    #emissionsCarSpace {
        padding-bottom: 150px;
    }
}
@media only screen and (max-width: 350px) {
    #emissionsCarSpace {
        padding-bottom: 200px;
    }
}