/*  ------------------------------------------------------------------------------------------------------------------------------------  */
/*  ----------------------------------------------------------------------------------------------------------------------- STYLE RESET   */
/*  ------------------------------------------------------------------------------------------------------------------------------------  */
/* -------------------------------------------------------------------------------------------------------------------------------------
    Credit to this bnch, plus my own tweaks:; 
    
    Eric Meyer                  :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com
------------------------------------------------------------------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}                                   

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {
    clear: both;
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 4px solid rgba(100,100,100,0.2); 
    margin: 30px 0; 
    padding: 0;
}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font-size: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }


/* Roxy Adds
-------------------------------------------------------------------------------*/

div, header, nav, main, footer, input, label, textarea, a, section, article {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    cursor: default;
}

.clear {
    clear: both;
    display: block;
    height: 0;
}

.nowrap {
    white-space: nowrap !important;
}

.shout{
    text-transform: uppercase;
}



/*  --------------------------------------------------------------------------  */
/*  -------------------------------- For wide screen browsers (wider than 1024) */
/*  --------------------------------------------------------------------------  */


 h1:after { /*  toggle inline/none for checking responsive stylesheets  */
    display:  none;
    color: red;
 }

html, body {
  height: 100%;
}

body {
    position: relative;
    font: 400 11pt Roboto, Arial, Verdana, sans-serif;
    background: #cfe4dc url('../images/bg-body.png') center top repeat-x;
    color: #2b2f40;
}

body { /* -- Grid Container  */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

a {
    color: #2ca387; 
    text-decoration: none; 
    outline: 0;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
    }
a:hover {
    color: #006969;
    text-decoration: none;
    }
a img {
    border: none;
}

button:focus {
    outline: 0;
    text-decoration: none;
}

.clear {clear: both;}

h1 {
    margin: 0;
    padding: 0 0 20px;
    font: 900 30pt Roboto, Arial, Verdana, sans-serif;
    line-height: 100%;
    letter-spacing: -1px;
    color: #3a4050;
}


h2 {
    margin: 0;
    padding: 10px 0 20px;
    font: 700 18pt Roboto, Arial, Verdana, sans-serif;
    line-height: 120%;
    letter-spacing: 0;
    color: #3a4050;
}


h3 {
    margin: 0;
    padding: 10px 0 10px;
    font: 500 13pt Roboto, Arial, Verdana, sans-serif;
    line-height: 120%; 
    color: #3a4050;
}



p {
    margin: 10px 0 20px;
    line-height: 150%;
    text-align: left;
}

p.intro {
    margin: 10px 0 80px;
    font-weight: 300;
    font-size: 18pt;
}
p.intro + p {
    margin: -70px 0 80px;
}

p.intro + h2 {
    margin: -70px 0 80px;
}

strong {
    font-weight: 700;
}


ul {
    overflow: hidden; /*  fixes float edge bug  */
    }
ol {
    margin: 0 0 0 18px;
    }
ul li, ol li {
    margin: 0 0 10px;
    line-height: 140%;
    text-align: left;
}
ol li {
    background: none;
}

.content {
    margin: auto;
    padding: 0;
    width: 100%;
    max-width: 1750px;
}




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

header {
    position: relative;
    display: block;
    margin: auto;
    width: calc(100% - 150px);
    height: 180px;
    flex-shrink: 0;
    border-bottom: #2ca387 7px solid;
    }
header .content {
    position: relative;
    z-index: 500;
    padding: 0; 
}

.bannerimage {
    position: absolute;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    left: -450px;
    right: 0;
    width: 100%;
    height: 320px;
    background:  url('../images/bg-banner.png') center top no-repeat;
    background-size: contain;
}


a#logo {
    position: absolute;
    top: 52px;
    left: 0;
    width: 337px;
    height: 92px;
    background: url('../images/bg-logoG.svg') no-repeat left top;
    background-size: contain;
    z-index: 200;
}


/*  -- Main Navigation */

.banner {
    position: absolute;
    bottom: 0;    
    width: 100%;
    z-index: 100;
    padding: 0;
}

.navigation {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 10px;
}


form.smart .tab input, 
form.smart .tab label  {
    display: none;
    }
form.smart nav {
    padding: 0;
    }
form.smart nav ul {
    margin: 0;
    text-align: right;
    }
form.smart nav li {
    margin: 0;
    display: inline-block;
    }
form.smart nav li a {
    display: inline-block;
    margin: 0;
    margin: 0 0 0 50px;
    color: #2ca387;
    font-size: 11pt;
    font-weight: 700;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    }
form.smart nav li a:hover {
    color: #006969;
}

.pg-home form.smart nav ul li.btn-home a,
.pg-about form.smart nav ul li.btn-about a,
.pg-info form.smart nav ul li.btn-info a,
.pg-contact form.smart nav ul li.btn-contact a {
    color: #006969;
    background: transparent;
}



/*  ------------------------------------------------- CONTENT  */

main {
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
    margin: auto;
    width: calc(100% - 150px);
    padding: 100px 0;
    }
main ul li {
    margin: 0 0 5px;
    padding: 0 0 0 18px;
    background: url('../images/bullet.gif') no-repeat 0 3px;
}


/*  home - section 1  */


.serviceteasergrid { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr 1fr 1fr;
    }
.serviceteasergrid a {
    display: block;
    }
.serviceteasergrid a span.teaserimage {
    display: block;
    padding: 250px 0 0;
    border-radius: 5px 5px 0 0;
    }
.serviceteasergrid a.serv-industrial span.teaserimage {
    background: url(../images/bg-industrial-cleaning.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a.serv-professional span.teaserimage {
    background: url(../images/bg-professional-cleaners.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a.serv-home span.teaserimage {
    background: url(../images/bg-home-cleaning.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a span.teaserlink {
    display: block;
    padding: 15px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 0 0 5px 5px;
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    }
.serviceteasergrid a:hover span.teaserlink {
    background: #006969;
}




/*  home - section 2  */

.pg-home .section2 {
    margin: 100px 0 0;
    }
.pg-home .section2 .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.pg-home .section2 img {
    border-radius: 5px;
}
.about {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}

/*  home - section 3  */

.pg-home .section3 {
    margin: 100px 0 0;
    }
.pg-home .section3 .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  auto 35%;
    }


.pg-home .section3 .areagrid {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr 1fr;   
}

/*  information - section 1  */

.pg-info .section1 .productblock { /* -- Grid Container  */
    display: grid; 
    grid-template-columns: 330px auto; 
    grid-gap: 30px;
    margin: 0 0 50px;
    padding: 0;
    }
.pg-info .section1 img {
    border-radius: 5px;
}

.pg-info .section1 .productblockcontent{
    padding: 40px 50px 20px;
    background: #e1f3f9;
    border-radius: 5px;
}

.pg-info .section1 .productblockcontent h3 {
    padding: 0;
}

p.cta {
    display: block;
    text-align: right;
    }
p.cta a {
    display: inline-block;
    padding: 15px 30px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    }
p.cta a:hover {
    background: #006969;
}


/*  home - Info Detail Page  */

.infodetailgrid {
    margin: 0;
    }
.infodetailgrid .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.infodetailgrid img {
    border-radius: 5px;
    margin: 0 0 10px;
}
.infopanel p.sub a {
position: relative;
    display: block;
    margin: 0 0 5px;
    padding: 10px 15px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 5px;
    text-align: left;
    font-weight: 700;
}
.infopanel p.sub a:hover,
.pg-info-industrial .infopanel p.sub a.serv-industrial,
.pg-info-professional .infopanel p.sub a.serv-professional,
.pg-info-home .infopanel p.sub a.serv-home {
    background: #006969;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.infopanel p.sub a span {
    position: absolute;
    right: 10px;
    line-height: 22px;
    font-size: 80%;
}


.infointro {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}


/*  contact  */

.pg-contact .section1 {
    margin: 0;
    padding: 0;
}

.pg-contact .section1 .content { /* -- Grid Container  */
    display: grid; 
    grid-template-columns: auto 400px; 
    grid-gap: 30px;
    }
.pg-contact .section1 .content h3 {
    padding: 0 0 20px;
}

.contacts {
    padding: 0;
    }
.contacts .contactgrid { /* -- Grid Container & Item  */
    display: grid; 
    grid-template-columns: 20px auto; 
    grid-gap: 20px;
    }

.contacts .contacticon {
    margin: 6px 0 0;
    height:  20px;
    width: 20px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    }
.contacts .ci-address  { background-image: url('../images/ci-address.png');  }
.contacts .ci-landline { background-image: url('../images/ci-landline.png'); }
.contacts .ci-mobile   { background-image: url('../images/ci-mobile.png');   }
.contacts .ci-email    { background-image: url('../images/ci-email.png');    }
.contacts .ci-facebook { background-image: url('../images/ci-facebook.png'); }
.contacts .ci-instagram { background-image: url('../images/ci-instagram.png'); }
.contacts p {
    margin: 0 0 10px;
    }
.contacts strong {
    display: block;
}



/*  Feedback Form  */

form#ValidatedForm {
    position: relative;
    margin: 0;
    padding: 50px;
    background: rgba(44,163,135,0.3);
    border-radius: 5px;
    }
form#ValidatedForm .textfield,
form#ValidatedForm .valid {
    display: block;
    margin: 0 0 10px;
    padding: 10px;
    width: 100%;
    height: 40px;
    border: none;
    background-color: #fff !important;
    border-bottom: #2ca387 3px solid;
    border-radius: 5px;
    color: #1b1f1d !important;   
    }
form#ValidatedForm .textarea {
    height: 200px; 
    }
form#ValidatedForm .g-recaptcha {
    display: block;
    float: right;
    margin: 0 0 10px;
    }
form#ValidatedForm .submit {
    clear: both;
    display: inline-block;
    float: right;
    margin: 0;
    padding: 18px 50px;
    background: #2ca387;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 9pt;
    color: #f6f6f7;
    text-transform: uppercase;
    }
form#ValidatedForm .submit:hover {
    background: #006969;
    }
form#ValidatedForm label.error {
    display: block;
    margin: 0 0 15px 5px;
    width: 100%;
    color: #7f0000;
    font-weight: 700;
    text-shadow: 0 0 1px #000;
    }
.formconfirmation {
    margin: 0 0 70px;
    padding: 70px;
    background: #f6f6f7;
    border-radius: 5px;
    }
.fc-win h2 {
    padding: 0 0 20px;
    color: #135626;
    }
.fc-fail h2 {
    color: red;
}


.pg-contact .section2 {
    padding: 0;
    }
.pg-contact .section2 iframe {
    display: block;
    width: 100%;
    height: 500px;
}

/*  -- Page: About  */

.aboutgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    margin: 0 0 50px;
    }
.aboutgrid img {
border-radius: 5px 5px 0 0;   
}

.block {
    border-radius: 5px;
    background: #e1f3f9;
}
.block-content {
    padding: 40px 50px 30px;
}

.aboutcta {
    margin: 50px 0 0;
    }
.aboutcta .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.aboutcta img {
    border-radius: 5px;
}
.about {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}


/*  -- Page: Landing1  */

.landing1grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    margin: 0 0 50px;
}

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

footer {
    flex-shrink: 0;
    margin: 0;
    padding: 50px 75px;
    background: #2ca387;
}

.footergrid{ /* -- Grid Container   */
    display: grid;
    grid-gap: 50px;
    grid-template-columns: 350px auto 220px;
    margin: 0;
    padding: 0;
}

a#footerlogo {
    display: block;
    margin: 15px 0 0;
    width: 337px;
    height: 92px;
    background: url('../images/bg-logoW.svg') no-repeat left top;
    background-size: contain;
}

footer ul {
    margin: 0;
    padding: 0;
    }
footer .footercenter ul li {
    display: block;
    margin: 0 0 2px;
    padding: 0;
    font-weight: 400;
    font-size:  9pt;
    background: none;
    text-align: left;
    color: #f6f6f7;
    }
footer .footercenter ul li.copyright {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 11pt;
    border: none;
    }
footer .footercenter ul li.copyright a,
footer .footercenter ul li.copyright a:hover {
    border: none;
}
footer .footercenter ul li a {
    display: inline-block;
    padding: 5px 0;
    color: #f6f6f7;
    border-bottom: #f6f6f7 dotted 2px;
    }
footer .footercenter ul li a:hover {
    color: #f6f6f7;
    border-bottom: #f6f6f7 solid 2px;
}

footer .footercenter span.footerlinkdiv {
    display: inline-block;
    padding: 0 10px;
}

footer ul.credits {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footerright p {
    text-align: right;
    color: #f6f6f7;
}

footer ul.socials {
    text-align: right;
    }
footer ul.socials li {
    display: inline;
    margin: 0 0 10px 10px;
    padding: 0;
    text-align: right;
    }
footer ul.socials li a {
    display: inline-block;
    padding: 0;
    height: 40px;
    width: 40px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 40px;
    -webkit-transition: none .35s;
    -o-transition: none .35s;
    transition: none .35s;
    }
footer ul.socials li a:hover {
    background-position: left bottom;    
}

footer ul.socials li a.facebook {
    background-image: url('../images/bg-social-facebook.png');
}

footer ul.socials li a.instagram {
    background-image: url('../images/bg-social-instagram.png');
}

footer ul.socials li a.linkedin {
    background-image: url('../images/bg-social-linkedin.png');
}

footer ul.socials li a.whatsapp {
    background-image: url('../images/bg-social-whatsapp.png');
}