/* --- 

font-family: 'Dosis', sans-serif;
font-family: 'Encode Sans Expanded', sans-serif;

Theme
-----
Light blue:     21bde2
Very light blue: #21bde2
Blue:           #0057b3
Red:            ed1c24
Orange:	        #f7931e
Grey:           #8c8c8c

background: linear-gradient(#00b3fd, #383795);
background-image: linear-gradient(#f7931e, #ed1c24);

--- */

/* -------- GENERAL */

body {
    background: #fff;
    color:#8c8c8c;
    font-family: 'Dosis', sans-serif;
    font-size:20px;
}

.extents {max-width:1500px; margin:auto;}
.img-block {display: block; width:100%;}
.img-bordered {padding:5px; background: linear-gradient(#00b3fd, #383795);}


.bg-dark-blue {background-color:#0057b3;}
.bg-grey {background-color:#f4f4f4;}

.bg-gradient {background-color:#0057b3; background: linear-gradient(#00b3fd, #383795);}
.bg-1 {background-image:url(images/ripples.png);}

.cta a {color:#fff; text-decoration:none;}
.cta a:hover {color:#fff; text-decoration:none;}

.padding-bg {padding: 50px 0;}

.divider {width:100px; height:4px; background-color:#0057b3; /* background: linear-gradient(to right, #383795, #00b3fd);*/}

@media only screen and (min-width : 768px) {
    .padding-bg {padding: 110px 0;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}

/* -------- TYPE */

.encode-sans {font-family: 'Encode Sans Expanded', sans-serif;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Encode Sans Expanded', sans-serif;}

h1, .h1 {font-size:30px; font-weight:600;}
h2, .h2 {font-size:29px; font-weight:600;}
h3, .h3 {font-size:26px; font-weight:600;}
h4, .h4 {font-size:22px; font-weight:600;}
h5, .h5 {font-size:20px; font-weight:400;}
h6, .h6 {font-size:20px; font-weight:400;}


.subhead {font-size:20px;}

.text-small {font-size:17px;}
.text-large {font-size:22px;}
.text-light-blue {color:#00b3fd;}
.text-dark-blue {color:#0057b3;}
.text-orange {color:#f7931e;}
.text-format {text-align: justify;}

@media only screen and (min-width : 768px) {
h1 {font-size:38px;}
h2 {font-size:34px;}
h3 {font-size:28px;}
h4 {font-size:25px;}
h5 {font-size:20px;}
h6 {font-size:24px;}
    
p {font-size:23px;}
    
.text-format {text-align: center;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}

/* -------- HEADER */

header {background:#fff; padding:30px 0;}
header .call-us {font-family: 'Encode Sans Expanded', sans-serif; font-size:20px; font-weight:400; margin-bottom:6px;}
header .big-tel {color:#f7931e;font-family: 'Encode Sans Expanded', sans-serif; font-size:28px; font-weight:600;} 
header .big-email {color:#f7931e; font-family: 'Encode Sans Expanded', sans-serif; font-size:15px; font-weight:400;}
header .big-email a {color:#f7931e; text-decoration:none;}

.topbar {text-align: center; background:#f4f4f4; margin-bottom:10px; color:#8c8c8c; font-family: 'Encode Sans Expanded', sans-serif; font-size:15px; font-weight:400;}
.topbar a.lang { color:#8c8c8c; font-family: 'Encode Sans Expanded', sans-serif; font-size:15px; font-weight:400;}
.topbar a.lang:hover {text-decoration: none;}

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {
    .topbar {background:#f4f4f4; padding:6px 12px;}
    .topbar a.lang {border-radius: 0; padding:0;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
    .topbar a.lang {display:inline;}
}
  
/* -------- NAV */

.menubar {background-color:#fff;}
.navbar {font-family: 'Encode Sans Expanded', sans-serif; font-size:16px; font-weight:400; text-align: center;}
.navbar .navbar-brand img {max-width:180px;}
.navbar .navbar-toggler {background-color:#fff; color:#0057b3; cursor:pointer; border-radius: 0; padding:1rem;}
.navbar .navbar-collapse {padding:20px 0;}
.navbar .dropdown-menu {background-color:#fff; padding:20px 0; margin:0; font-size:inherit; border:0; text-align: center;}
.navbar .dropdown-menu .dropdown-item {color:#0057b3;}
.navbar .dropdown-menu .dropdown-item:hover {background:0;}
.navbar .navbar-nav .nav-item .nav-link {color:#0057b3;}
.navbar .navbar-nav .nav-item.dropdown {cursor:pointer;}

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
.menubar {background-color:#0057b3; border-bottom:5px solid #00b3fd;}
.navbar .navbar-nav .nav-item {
    margin-right:12px;
    padding-right:10px;
    border-right:1px solid #00b3fd;}
    
.navbar .navbar-nav .nav-item .nav-link {color:#fff;}
.navbar .navbar-collapse {padding:0;}
.navbar .dropdown-menu {background-color:#0057b3; padding:10px 0; margin:0; font-size:inherit; border:0; text-align: center;}
.navbar .dropdown-menu .dropdown-item {color:#fff; margin-bottom:5px;}

}


/* ---- ---- BUTTONS & LINKS */

.btn {font-family: 'Encode Sans Expanded', sans-serif; font-size:13px; letter-spacing: 1px; font-weight:500; padding:7px 14px;}

.btn-blue {border:0; color:#fff; background-color:#f7931e; background-image: linear-gradient(#00b3fd, #383795); border-radius:5px;}
.btn-blue:hover{color:#fff;background:#0057b3;}

.btn-orange {border:0; color:#fff; background-color:#f7931e; background-image: linear-gradient(#f7931e, #ed1c24); border-radius:5px;}
.btn-orange:hover{color:#fff;background:#f7931e;}

.btn-primary{color:#fff;background-color:#0057b3;border-color:#0057b3; background-image: linear-gradient(#00b3fd, #383795);}
.btn-primary:hover{color:#fff;background-color:#0057b3;border-color:#0057b3; background-image:none;}
.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#0057b3;border-color:#0057b3}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0057b3;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}

.btn-secondary{color:#fff;background-color:#f7931e;border-color:#f7931e; background-image: linear-gradient(#f7931e, #ed1c24);}
.btn-secondary:hover{color:#fff;background-color:#f7931e;border-color:#f7931e; background-image:none;}
.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(247,147,30,.5)}
.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#f7931e;border-color:#f7931e}
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#f7931e;border-color:#f7931e}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(247,147,30,.5)}

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
    .btn {padding:10px 20px; font-size:15px;}
}


/* -------- CAROUSEL */

.carousel {background:#0057b3;}
.carousel-item {color:#fff; text-align: center;}
.carousel-control-next, .carousel-control-prev {width:30px;}
.carousel-content {padding:30px; min-height:350px; background-size:auto 120%; background-repeat: no-repeat; background-position: center;}
.carousel-content .prehead {color:#33f3ff; font-family: 'Encode Sans Expanded', sans-serif; font-size:12px; font-weight:600; text-transform:uppercase;}
.carousel .carousel-content h1 {font-family: 'Encode Sans Expanded', sans-serif; font-size:30px; padding:0;}
.carousel .carousel-content p {font-size:18px;}
.carousel .carousel-content .button-container {padding-top:10px;}

#carousel-content-1 {background-image:url('/assets/css/images/carousel/carousel-content-010.jpg');}
#carousel-content-2 {background-image:url('/assets/css/images/carousel/carousel-content-009.jpg');}
#carousel-content-3 {background-image:url('/assets/css/images/carousel/carousel-content-008.jpg');}
#carousel-content-4 {background-image:url('/assets/css/images/carousel/carousel-content-011.jpg');}

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {
.carousel-content {min-height:0; padding:100px 0; background-size:cover; background-position: center; }
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
.carousel-content {padding:150px 0; background-size:cover; background-position: top; }
.carousel .carousel-content .prehead {font-size:18px; font-weight:600; text-transform:uppercase;}
.carousel .carousel-content h1 {font-size:60px; padding:10px 0 20px 0;}
.carousel .carousel-content p {font-size:28px;}
.carousel .carousel-content .button-container {padding-top:20px;}

}  


/* -------- BODY */

/* Van Section */
.bg-van {padding:50px 0 300px 0; min-height:800px; background-image:url(/assets/css/images/sunshine-coast-supreme-clean-branded-van.png); background-repeat: no-repeat; background-position: bottom right; background-size:300px;}
.expertise-list {margin:0; padding:0; font-size:16px;}
.expertise-list li {margin-bottom:10px;}


@media only screen and (min-width : 768px) {
    .bg-van {padding:80px 0 300px 0; background-size:500px;}
    .expertise-list {margin:0; padding:0; font-size:20px;}
    .expertise-list li {display:inline-block; margin-bottom:15px; width:45%}  
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
    .bg-van {padding:100px 0 200px 0; background-size:600px;}
    .expertise-list li {display:block; margin-bottom:15px; width:100%}
}
@media only screen and (min-width : 1800px) {
    .bg-van {padding:140px 0; background-size:1000px;}
    .expertise-list li {display:inline-block; margin-bottom:15px; width:45%}
}

/* Van Section Ends */
/* Masthead */

.masthead {padding:60px 0; background-color:#0057b3; background-size: cover; background-repeat: no-repeat;}
.masthead .prehead {color:#fff;}
.masthead h1 {font-weight:300; font-weight:30px;}
.masthead .subhead {color:#f7931e; text-transform:uppercase; font-weight: 600;}

.bg-mast-1 {background-image:url(images/testimonials.jpg);}
.bg-mast-2 {background-image:url(images/mission-statement.jpg);}
.bg-mast-3 {background-image:url(images/brick-and-stonework.jpg);}
.bg-mast-4 {background-image:url(images/roof-cleaning.jpg);}
.bg-mast-5 {background-image:url(images/deck-cleaning.jpg); background-position:center;}
.bg-mast-6 {background-image:url(images/driveway-cleaning.jpg); background-position:bottom;}
.bg-mast-7 {background-image:url(images/patio-cleaning.jpg); background-position:bottom;}
.bg-mast-8 {background-image:url(images/marble-polishing-2.jpg);background-position:center;}
.bg-mast-9 {background-image:url(images/exterior-painting.jpg);background-position:center;}
.bg-mast-10 {background-image:url(images/terracotta-cleaning.jpg);}
.bg-mast-11 {background-image:url(images/terracotta-cleaning.jpg);}

.bg-pw-marbella {background-image:url(images/pressure-washing-marbella.jpg);background-position:center;}

@media only screen and (min-width : 768px) {
    .masthead h1 {font-size:60px;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {
    .masthead {padding:120px 0;}
    .bg-mast-1 {background-position: bottom;}
}
/* Masthead ends*/

.washlist {list-style: none;}
.washlist li {margin-bottom:6px;}

.locations-list {list-style: none; font-size:18px; margin:0; padding:0;}
.locations-list li {display:block; margin-bottom:10px;
background-image: url(images/bubble.png); background-repeat: no-repeat;
background-position: left center; background-size:12px; padding-left:30px;
}

.locations-list li a {color:#21bde2;}
.locations-list li a:hover {color:#0057b3; text-decoration: none;}

.deck-list {list-style-position: inside; margin:0; padding:0;}

@media only screen and (min-width : 768px) {
.washlist {font-size:23px;}
.washlist li {margin-bottom:15px;}
    
.locations-list {font-size:22px;}
.locations-list li {display:inline-block; width:32%; margin-bottom:14px;}

.deck-list {padding:20px 0; font-size:22px; font-weight:bold;}
.deck-list li {margin-bottom:15px;}
}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}

/* -------- FOOTER */

footer {background: linear-gradient(#383795,#00b3fd,#383795); padding: 50px 0 40px 0; border-top:10px solid #fff;}
    
footer {color:#fff;}
footer a {color:#fff;}
footer a:hover {color:#00b3fd;}
    
footer ul.footer-locations {list-style: none; margin:0; padding:0;}
footer ul.footer-locations li {display: inline; padding:0 0.5rem;}

footer .footer-nav ul li {margin-bottom:12px;}
footer .footer-nav ul li a:hover {color:#dedede; text-decoration: none;}

.footer-links {padding:50px 0;}
.footer-links .media img {max-width:70px; border:2px solid #fff; border-radius:50%; margin-right:20px;}
    
@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {
    footer {background: linear-gradient(#00b3fd,#383795); padding: 70px 0 50px 0;}
    .footer-links {padding:80px 0;}
}
@media only screen and (min-width : 992px) {
    footer ul.footer-locations li {display: inline-block; margin-right:16px;}
    .media img {max-width:100px;}
}
@media only screen and (min-width : 1200px) {
    footer {padding: 100px 0 60px 0;}
}





@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}