﻿/* COLOURS 
#008da9 (Turquise) > #00aacc (lighter)
#00535e (Teal) > #009eb3 (lighter)
#4c5b52 (Grey) > #6b8073 > #a1b0a7 (lighter)
#F7F7F7 (Grey BG)
#00C851 - low co2
#2ED270 - ultra low co2
*/

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* MDB Forms Don't support ASP.NET therefore have to make default checkbox and radio visible again */ 
/*[type=checkbox], [type=radio] {
     position:unset; 
     left:unset; 
     visibility:visible !important; 
}*/

/* HEADINGS */

h1 {
    color: #008da9;
    font-size:2.3em;
}

h2 {
    color: #00535e;
    font-size:2em;
}

.header-white {
    color:#FFFFFF !important;
    padding:0;
    margin:0;
    text-align:center;
}

.header-white-left {
    color: #FFFFFF !important;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

/* HEADER */

.logo {
    text-align:center;
}

.social {
    text-align:center;
}

.brand {
    width:80px;
    margin:5px;
}

.phone {
    margin:5px;
}

/* MENU */

.navbar {
    font-size:1.1em;
    font-weight: 500;
    padding-right: 1rem !important;
}

    .navbar li:hover {
        background-color:#008da9;
    }

/* MAIN NAV DROPDOWN HOVER */
.navbar .dropdown-menu a:hover {
     background-color: #00aacc !important; 
}

/* DROPDOWN FILTERS HOVER */
.dropdown .dropdown-menu.dropdown-primary .dropdown-item:active, .dropdown .dropdown-menu.dropdown-primary .dropdown-item:hover {
    background-color: #a1b0a7 !important; 
}

/* TABS */
.nav-tabs {
    border: 0;
    padding: .7rem;
    /*margin-left: 1rem;
    margin-right: 1rem;*/
    margin-left: 0;
    margin-right: 0;
    /*margin-bottom: -10px;*/
    margin-bottom: 0;
    background-color: #2E849F;
    font-size:1.2em;
    font-weight:bold;
    z-index:0;
}

.tab-content {
    padding: 1rem 1rem 1rem;
    /*z-index: 1;*/
    border-radius: 0 0 .3rem .3rem;
}

.panel-plain{
    padding: 1rem 1rem 1rem;
    margin-bottom: 1rem;
    /*z-index: 1;*/
    border-radius: 0 0 .3rem .3rem;
    background-color:#F7F7F7;
}

/* FORMS */
.dropdownlist {
    display:block !important;
    max-width:280px;
}

.chkboxlist td 
{
    padding:5px;
    margin:5px;
    font-weight:bold;
}

.chkboxlist input 
{
    padding:5px;
    margin:5px;
}

.form-control {
    border-radius: .25rem;
}

/* CAROUSEL */

.carousel .carousel-indicators li {
    height: 20px;
    max-width: 20px;
    background-color: #00aacc;
    margin-bottom: -10px;
}

.carousel .carousel-indicators .active {
    height: 25px;
    max-width: 25px;
    background-color: #008da9;
}

#carousel-blog .card-header{
    height:6rem;
}

#carousel-blog .card-image{
    height:15rem;
}

#carousel-blog .card-body{
    height:6rem;
    padding:1rem;
}

#carousel-cars .card-image{
    height:15rem;
}

#carousel-cars .card-body {
    height: 12.5rem;
    padding: 1rem;
}

#carousel-cars .card-body h4{
    height:4rem;
}

#carousel-vans .card-image{
    height:15rem;
}

#carousel-vans .card-body {
    height: 12.5rem;
    padding: 1rem;
}

#carousel-vans .card-body h4{
    height:4rem;
}

.testimonial-carousel .testimonial {
    margin-right: 10%;
    margin-left: 10%;
}

#card-specials .card-image{
    height:15rem;
}

#card-specials .card-body {
    height: 13.5rem;
    padding: 1rem;
}

#card-specials .card-body h4{
    height:4rem;
}

#card-dealhub .card-image{
    height:15rem;
}

#card-dealhub .card-body {
    height: 8rem;
    padding: 1rem;
}

#card-dealhub .card-body h4{
    height:4rem;
}

/* CARD */
.card {
    margin-bottom:20px !important;
}

.card-inline{
    display:inline;
    float:left;
}

a:hover .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #008da9;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #008da9;
}

.carousel-caption a {
    text-decoration:none;
    color:#000;
}

/*.card-body {
    background-color:#fff;
    opacity: 0.7;
}*/

/*.card h4, .card p {
    background-color:#fff;
    opacity: 0.7;
}*/

.card h4 {
    color:#00535e;
    margin-bottom: 0rem;
}

.card .card-body p {
    margin-bottom: 0.5rem;
}

.card-title-sm {
    margin-bottom: .5rem !important;
    font-size: 1.2em;
}

.turquise {
    background-color: #008da9 !important;
}

.ovlgrey {
    background-color: #6b8073 !important;
}

.ovlturquise {
    color: #008da9 !important;
}

.ovlteal {
    color: #00535e !important;
}

.card-header {
    z-index: 5;
    position: inherit;
    padding:1rem;
}

.testimonial-card .avatar {
    border-radius: 3%;
    /*height: 120px;*/
    width: 60%;
    margin: -85px auto 0;
    overflow: hidden;
    border: 5px solid #fff;
}

/* BUTTONS */
.btn-primary {
    background-color:#008da9;
}

.btn-primary:hover {
    background-color:#00aacc !important;
}

.btn-primary.dropdown-toggle {
    background-color: #4c5b52 !important;
    text-transform:none !important;
    font-size:1em;
}

.btn-primary.dropdown-toggle:hover {
    background-color: #6b8073 !important;
}

.btn-primary.dropdown-toggle:focus, .btn-primary.dropdown-toggle:hover {
    background-color: #6b8073 !important;
}

.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #6b8073;
    border-color: #4c5b52;
    box-shadow: 0 0 0 0.2rem rgb(161, 176, 167);
}

.btn-secondary {
    background-color: #959595;
}

.btn-secondary:hover {
    background-color: #bfbfbf !important;
}

.btn-fb {
    background-color: #008da9;
}

.btn-ins {
    background-color: #008da9;
}

.btn-tw {
    background-color: #008da9;
}

.btn-gplus {
    background-color: #008da9;
}

.btn-li {
    background-color: #008da9;
}

.btn-email {
    background-color: #008da9;
}

.btn-success {
    background-color: #008da9;
}

/* PAGINATION */

.pagination .page-link {
    color: #000000;
    font-size:1.2em;
}

.pagination.pg-blue .active .page-link {
    background-color: #008da9;
}

/* PADDING */

.pt-minus-2 {
    margin-top: -2rem !important;
}

.pb-minus-4 {
    margin-bottom: -4rem !important;
}

.pt-minus-4 {
    margin-top: -4rem !important;
}

/* GENERAL STYLES */

.bold{
    font-weight:bold;
}

.pricebox2 {
    background-color: #F6F6F6;
    padding: 5px;
    margin-bottom:2px;
    border-radius: .3rem;
}

.co2-label::before{
    font-size:0.8em;
    content:"CO2\00a0";
}
.co2-label::after{
    font-size:0.8em;
    content:"\00a0g/km";
}

.co2-green {
    color:#FFF;
    background-color: #00C851 !important;
}
.lowco2-green{
    color:#FFF;
    background-color: #2ED270 !important;
    -webkit-box-shadow: 0 2px 5px 0 rgba(92,220,144,.6), 0 2px 10px 0 rgba(92,220,144,.5);
    box-shadow: 0 2px 5px 0 rgba(92,220,144,.6), 0 2px 10px 0 rgba(92,220,144,.5);
}

.label-in-stock {
    font-size: 1.0em;
    margin-top: 0.5rem;
    position: absolute;
    right: 1rem;
}

.label-special-offer{
    font-size:0.9em;
}

label {
    /*margin-bottom: .5rem;*/
    margin-bottom: 0;
    font-weight:bold;
}

.text-turquise {
    color: #008da9 !important;
}

#PanelSearch ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFFFFF;
}
#PanelSearch ::-moz-placeholder { /* Firefox 19+ */
  color: #FFFFFF;
}
#PanelSearch :-ms-input-placeholder { /* IE 10+ */
  color: #FFFFFF;
}
#PanelSearch :-moz-placeholder { /* Firefox 18- */
  color: #FFFFFF;
}

.bg1 {
    background:#F7F7F7;
}

.bg2 {
    background:#F7F7F7;
    border-radius: .3rem .3rem .3rem .3rem;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.bg3 {
    background: rgba(255, 255, 255, 0.7);
    border-radius: .3rem .3rem .3rem .3rem;
    border-left: 5px solid #00abc0;
}

.bg4 {
    background: rgba(255, 255, 255, 0.7);
    border-radius: .3rem .3rem .3rem .3rem;
}

.price {
    font-size:1.1em;
    font-weight:bold;
    color:#00535e;
}

.overlay-logo {
    position:relative;
    z-index: 999;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.vertical-align {
    display: flex;
    align-items: center;
}

.text-large {
    font-size: 1.6em;
}

/*.search {
    justify-content: center !important;
}*/

/* FOOTER */
footer {
    color:#FFFFFF;
}

footer a {
    color:#00aacc;
}

footer a:hover {
    color:#008da9;
}

.media {
    margin-top:15px;
}

.media-heading {
    font-size:1em;
    padding: 15px;
}

.footer2-text {
    color:#008da9;
    margin-top:15px;
}

/*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .logo {
        text-align:left;
    }
    .social {
        text-align:right;
    }
    .search {
        justify-content:unset;
        float:right;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}
