/*************************************
		CHASE CARS
        Developed 27/05/2020
        Justin Kercher
        Apollo Internet Media

        COLOUR REF:
        Red: #d82828
	*************************************/

    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap');

    /*************************************
		Convenience Styling
	*************************************/
    html, body, form { height: 100%; }
    body, form { display: flex; flex-direction: column; }
    #site-wrap { flex: 1 0 auto; padding-bottom: 30px }
    #site-footer { flex-shrink: 0; }

    body { font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.5; font-weight: 400; color:  #888888; }
    
    b, strong, label, th { font-weight: 700; }

    h1, h2, h3 { margin-top: 0px; font-weight: 700; margin-bottom: 30px }
    h1 { font-size: 40px; margin-top: 0px; text-transform: uppercase; color: #000; }
    h2 { font-size: 1.4em; }
        h2 span { display: inline-block; margin: 0px 15px;}
    h3 { font-size: 1.6em;  }
    
    p { margin-top: 0px; margin-bottom: 30px; }
    a { color: #000; text-decoration: none; }
        a:hover { color: #b26e29; text-decoration: none; }
    
    section + section { margin: 30px 0px; }

    input[type=checkbox] { margin-right: 15px; }
    input[type=checkbox] + label { font-weight: inherit; font-size: inherit; margin-left: 5px; top: 0px; font-weight: 400 !important; }
    .validate-error + label { color: red; font-weight: 400; }

    a.alert { display: block; }

    
    /*************************************
		Classes
	*************************************/

    .padding { padding: 30px; }
    .padding-tb { padding-top: 30px; padding-bottom: 30px; }

    /* Boxes */
    .boxes { }
        .boxes .box { display: block; overflow: hidden; position: relative; margin-top: 15px; margin-bottom: 15px; border-radius: 24px; background-color: #d82828; color: #fff; 
                      background-size: cover; }
            .boxes .box:before { content: ""; opacity: 1; background-color: #d82828; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
            .boxes .box:after { content: ""; opacity: 0; background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
                .boxes .box.cruise { background-image: url(../images/cruise.jpg); }
                .boxes .box.gatwick { background-image: url(../images/airport.jpg); }
                .boxes .box.southampton { background-image: url(../images/airport2.jpg); }
            .boxes .box  .box-content { display: block; z-index: 3; position: absolute; top: 50%; left: 0px; right: 0px; color: #fff; 
                                        -webkit-transform: translateY(-50%); transform: translateY(-50%); }
                .boxes .box .box-title { position: relative; z-index: 3; padding: 30px; margin-top: 0px; font-weight: inherit; text-transform: none; }
                        .boxes .box .box-title h2 span { margin: 0px !important; }
                    .boxes .box .box-title p:last-child {  font-weight: 900; }
                .boxes .box .box-content { opacity: 0; padding: 30px; }
                    .boxes .box .box-content h2 { margin-bottom: 0px; }

                .boxes .box:hover:before { opacity: 0; }
                .boxes .box:hover:after { opacity: 1; }
                .boxes .box:hover .box-title { opacity: 0; }
                .boxes .box:hover .box-content { opacity: 1; }


    /* Transition all 5s */
    .btn, .boxes .box, .boxes .box .box-title, .boxes .box .box-content, .boxes .box .img-wrap:after, .boxes .box:before, .boxes .box:after
          { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

    /* Validation */
    input.validate-error,  textarea.validate-error, select.validate-error { border: solid 1px red !important; color: red; }
    
    /* For Jquery Validate */
    label.validate-error { position: absolute !important; right: 10px; top: 10px; height: auto; width: auto;  background-color: transparent !important; border: 0px none !important; border-radius: none; padding: 0px; color: red; }
    select + label.validate-error { right: 30px; }

    .form-group { position: relative !important; }
    .form-control { height: 50px; border-radius: 0px; box-shadow: none; -moz-box-shadow: none; }
    .form-control:focus { outline: none !important; }

    /*************************************
		Main Layout Styles
	*************************************/
    #site-header { background-color: #000; color: #fff; font-size: 22px; }
        #site-header a { color: inherit; }

        .home #site-header {  position: sticky; top: 0px; z-index: 0;  }

    #content-wrap { background: #fff; margin: 0px; padding-top: 60px; position: relative; z-index: 100; }
    #site-content { }
        #site-content h1 { margin-bottom: 30px;  }

    #site-footer { background-color: #000; color: #ffffff; }
        #site-copyright a, #site-footer a { color: inherit; }
        #site-footer p { margin-bottom: 0px; }


    #site-copyright { padding: 15px }
        #site-copyright p { margin: 0px; }
    

    /************************************
	    BOOTSTRAP RESPONSIVE OVERRIDES
    ************************************/
    .btn { display: inline-block; position: relative; border-radius: 25px; text-transform: uppercase; height: 50px; line-height: 12px; padding: 15px 30px; font-size: 20px; margin: 10px 0px; }
        .btn + .btn { margin: 10px; }

    #site-banner .carousel-caption .btn-outline-secondary, #testimonial .btn-outline-secondary, .boxes .box .btn-outline-secondary { border-color: #ffffff; color: #ffffff; }
    
    .btn-slidedown { background-color: #d82828 !important; border: solid 2px #fff; color: #fff; z-index: 1; overflow: hidden; position: relative }
        .btn-slidedown:hover { border-color: #d82828; background-color: #fff; color: #d82828 !important; }
        .btn-slidedown:before { content: ""; background-color: transparent; position: absolute; left: -5px; top: -2px; right: -5px; bottom: -2px; 
                                -webkit-transition: all 0.3s cubic-bezier(.17,.67,.83,.67); transition: all 0.3s cubic-bezier(.17,.67,.83,.67);
                                -webkit-transform: translateY(-100%); transform: translateY(-100%); z-index: -1; }
            .btn-slidedown:hover:before { background-color: #fff; -webkit-transform: none; transform: none; }

    input[type=submit].btn-slidedown:hover { background-color: #fff !important; color: #d82828 !important; }

    .blockquote { font-style: italic; font-size: 20px; }
    
    .card-header { background-color: rgba(0,0,0,.4); color: #fff;  }
    .card-body { background-color: rgba(0,0,0,.03); }


    /*.form-group > span:first-child { display: none; }*/

    .g-recaptcha > div { margin: 15px auto; }

    /* SM */
    @media (min-width: 576px) {

    }
    
    /* MD */
    @media (min-width: 768px) {

        /* Convenience */
        section + section { margin: 60px 0px; }

        /* Classes */
        .button { display: inline-block; }
        .button + .button { margin-left: 5px; }

        .box { height: 100%; }


        #home-about { background: url(../images/about-bg.jpg) no-repeat top center fixed; background-size: cover; padding: 60px; color: #fff; }
        #home-about h1 { font-size: 1.6em; color:inherit; }
            #home-about article { background-color: rgba(0,0,0,0.6); padding: 30px; }

    }

    /* LG */
    @media (min-width: 992px) {

        
        /* Banner */
        .carousel-caption { border: 0px none; padding: 0px; position: absolute; top: 50%; bottom: auto; left: 30%; right: auto; background-color: transparent; color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: left; }
            .carousel-caption p { margin: 30px 0px; }
    }

    /* XL */
    @media (min-width: 1200px) {
        

        /* Classes */
        .padding-l-xl { padding-left: 100px;  }

        /* Banner */
        .carousel-caption h1 { font-size: 3em; }
    }