/*  --------------------------------------------------------------------------  */
/*  --------------------------------------------- In between 1080px and laptops */
/*  --------------------------------------------------------------------------  */


@media screen 
and (max-width: 1600px){

h1 span:after {
    content: " 1";
}

.content {
    padding: 0 50px;
}

body {
    background-size: 350px;
}

header {
    height: 75px;
}


form.smart nav li a {
    margin: 0 0 0 40px;
    font-size: 10pt;
}

h1 {
    margin: 0 0 50px;
    font-size: 28pt;
    }
h1 span.intro {
    font-size: 13pt;
}

h2 {
    font-size: 16pt;
}

h3 {
    font-size: 13pt;
}

body {
    font-size: 11pt;
}

main {
    padding: 50px 0;
}
footer {
    margin: 50px 0 0;
}

.pg-home .homeabout {
    grid-template-columns: 250px auto;
    margin: 0 0 75px;
}

.serviceteasergrid { /* -- Grid Container  */
    grid-gap: 25px;
}

.partnergrid { /* -- Grid Container  */
    grid-gap: 25px;
}

.teamgrid { /* -- Grid Container  */
    grid-gap: 25px;
    margin: 25px 0 0;
}

.pg-contact .contactpagegrid .content { /* -- Grid Container  */
    grid-template-columns: auto 344px 280px; 
    grid-gap: 25px;
}

form#ValidatedForm,
.formconfirmation {
    padding: 20px;
}

a#footerlogo {
    width: 148px;
    height: 148px;
}

.footernav ul li a {
    padding: 0 50px 5px 10px;
}

footer ul.socials li {
    margin: 0 5px 0 0;
}

/*  ---end---  */
}




/*  --------------------------------------------------------------------------  */
/*  --------------------------------------------------------------- For laptops */
/*  --------------------------------------------------------------------------  */


@media screen 
and (max-width: 1400px){
   
 

h1 span:after {
    content: " 2";
}


.service-teaser {
    padding: 0 0 75px;
}

.teaser-image {
    height: 250px;
}

.partnercontentgrid { /* -- Grid Container  */
    grid-template-columns: 100px auto; 
}

.teamgrid { /* -- Grid Container  */
    grid-template-columns: 1fr 1fr 1fr; 
}

form.faq label {
    line-height: 130%;
    grid-template-columns: 30px auto;
}

a#footerlogo {
    width: 120px;
    height: 120px;
}



/*  ---end---  */
}





/*  --------------------------------------------------------------------------  */
/*  -------------------------- For square screens and tablets in landscape mode */
/*  --------------------------------------------------------------------------  */


@media screen 
and (max-width: 1247px){
   

h1 span:after {
    content: " 3";
}


.aboutgrid {
    grid-template-columns: 35% auto; 
    grid-gap: 30px;
}


.abouticonsgrid {
    grid-template-columns: 75px auto; 
    grid-gap: 20px;
    margin: 0 0 15px;
}

.serviceteasergrid {
    grid-gap: 20px;
    }
.teaser-image {
    height: 200px;
}

.pg-contact .contactpagegrid .content { /* -- Grid Container  */
    grid-template-columns: auto 344px 240px; 
}



/*  ---end---  */
}





/*  --------------------------------------------------------------------------  */
/*  ------------------------------------ IN BETWEEN LANDSCAPE & PORTRAIT TABLET */
/*  --------------------------------------------------------------------------  */





@media only screen 
and (max-width: 1100px) {


h1 span:after {
    content: " 4a";
}

body {
    background-size: 300px;
}

.content {
    padding: 0 25px;
}


.banner {
    position: relative;
    bottom: auto; 
}

.topbar {
    padding: 0;
}

a#logo {
    float: none;
    position: absolute;
    top: 14px;
    width: 117px;
    height: 35px;
}

.navigation {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 100;
    background: transparent;
    width: 100%;
}

form.smart .tab input, 
form.smart .tab label  {
    display: block;
}

form.smart .tab { 
    position: relative; 
    width: 100%;
    overflow: hidden;
}


form.smart input { 
    position: absolute; 
    opacity: 0; 
    z-index: -1; 
}

form.smart label { 
    position: relative; 
    display: inline-block; 
    padding: 0;
    width: 100%;    
    font-size: 12pt;
    line-height: 50px;
    text-transform: uppercase;
    color: rgba(86,155,67,1);
    cursor: pointer; 
    text-align: right;
    -webkit-transition: all .35s; 
    -o-transition: all .35s; 
    transition: all .35s; 
    }
form.smart label:hover {
    color: rgba(86,155,67,1);
}
.material-symbols-outlined {
    margin: 0;
    padding: 20px 0 0;
}

form.smart .tab-content { 
    max-height: 0; 
    overflow: hidden;
}

form.smart input:checked ~ .tab-content { 
    max-height: 1000px; 
}

form.smart input:checked ~ label { 
    color: rgba(86,155,67,1);
   
} 



form.smart nav {
    margin: 0;
    padding: 0;
    }
form.smart nav ul {
    margin: 0;
}
form.smart nav li {
    display: block;
    margin: 0;
    padding: 0;
    }
form.smart nav li:last-child {
    margin: 0 0 25px;
}
form.smart nav li a {
    margin: 0;
    padding: 0 20px;
    width: 100%;
    line-height: 40px;
    color: #eef4e5;
    background-color: rgba(86,155,67,0.9);
    border-bottom:  1px solid rgba(68,120,56,1);
    font-size: 10pt;
    text-align: right;
    }
form.smart nav li a:hover {
    background-color: rgba(68,120,56,1);
    color: #cce0ca;
}

.pg-home form.smart nav ul li.btn-home a,
.pg-about form.smart nav ul li.btn-about a,
.pg-partners form.smart nav ul li.btn-partners a,
.pg-facility form.smart nav ul li.btn-facility a,
.pg-team form.smart nav ul li.btn-team a,
.pg-contact form.smart nav ul li.btn-contact a {
    background-color: rgba(68,120,56,1);
    color: #cce0ca;
}


.pg-home .slogan {
    padding: 0 25px 25px 0;
    font-size: 20pt;
}

.pg-home .homeabout {
    padding: 50;
    margin: 0 0 50px;
}


h1 span {
    font-size: 24pt;
}

h2 {
    font-size: 15pt;
    padding: 10px 0 0;
}

h3 {
    font-size: 13pt;
    padding: 10px 0 0;
}

p.intro {
    margin: 0 0 30px;
}

.serviceteasergrid {
    grid-gap: 15px;
    grid-template-columns: 1fr;
}

.teaser-image {
    float: left;
    margin: 15px;
    height: 150px;
    width: 30%;
    border-right: 3px;
}

.service-teaser p.blurb {
    float: right;
    width: calc(70% - 50px);
    padding: 5px 20px 5px 0;
}

p.readmore {
    margin: 0 20px 20px;
    }
p.readmore a {
    padding: 10px 30px;
    }
p.readmore a:hover {
    background: #447838;
}

.partnercontentgrid { /* -- Grid Container  */
    grid-template-columns: 1fr;
    margin: 15px;
    }
.partnercontentgrid img {
    height: 100px;
}

.slider, .facilityvideo {
    float: none;
    width: auto;
    margin-right: 0;
    margin-bottom: 25px;
}

.facilityblurb {
    float: none;
    padding: 0;
    width: auto;
}

.team-member .blurb {
    padding: 5px 15px 15px;
}

.service-teaser p.readmore {
    margin: 0 15px 15px;
}

.team-member p.linkedin {
    margin: 0 15px 15px;
}

.pg-contact .contactpagegrid .content { /* -- Grid Container  */
    grid-template-columns: 1fr; 
}

footer {
    padding: 25px 0;
}

.footergrid{
    flex-direction: column;
}

.vr {
    width: auto;
    height: 1px;
    margin: 25px 0;
}





/*  ---end---  */
}



/*  --------------------------------------------------------------------------  */
/*  ---------------------------------------------- For tablets in portrait mode */
/*  --------------------------------------------------------------------------  */





@media only screen 
and (max-width: 810px) {


h1 span:after {
    content: " 4b";
}

body.pg-home header {
    height: auto;
    aspect-ratio: 270/127;
}

body.pg-home header .banner {
    background:  #000 url('../images/bg-banner-smart.jpg') center top no-repeat;
    background-size: contain;
    aspect-ratio: 270/127;
    width: 100%;
}

.pg-home .slogan {
    font-size: 15pt;
    letter-spacing: 0;
}

.pg-home .homeabout {
    grid-template-columns: 100%;
    padding: 30px 40px;
    margin: 0 0 25px;
    grid-gap: 25px;
}
.pg-home .homeabout img {
    max-height: 100px;
}

.teaser-image {
    height: 100px;
}

.aboutgrid {
    grid-template-columns: 1fr; 
    grid-gap: 50px;
}
.aboutintro .aboutintropic {
    height: 400px;
}


.teamgrid { /* -- Grid Container  */
    grid-template-columns: 1fr 1fr; 
}

/*  ---end---  */
}





/*  --------------------------------------------------------------------------  */
/*  -------------------------------------- For smart phones (in landscape mode) */
/*  --------------------------------------------------------------------------  */


@media only screen 
and (max-width: 667px) {




h1 span:after {
    content: " 5";
}

body {
    background-size: 250px;
}

.pg-home .slogan {
    padding: 0 15px 15px 0;
    font-size: 10pt;
}

.partnergrid { /* -- Grid Container  */
    grid-template-columns: 1fr;
}

.footernav ul li a {
    padding: 0 10px 5px 10px;
}

/*  ---end---  */
}



/*  --------------------------------------------------------------------------  */
/*  --------------------------------------- For smart phones (in portrait mode) */
/*  --------------------------------------------------------------------------  */


@media only screen 
and (max-width: 459px) {


h1 span:after {
    content: " 6";
}

body {
    background-size: 200px;
}

.teaser-image {
    float: none;
    margin: 0 0 5px;
    width: auto;
    height: 150px;
    border-radius: 3px 3px 0 0;
}

.service-teaser p.blurb {
    float: none;
    width: auto;
    padding: 5px 20px 5px 20px;
}

.abouticonsgrid {
    grid-template-columns: 1fr; 
    grid-gap: 20px;
}
.abouticonsgrid img {
    width: 50px;
}

.teamgrid { /* -- Grid Container  */
    grid-template-columns: 1fr; 
}

.team-member h3 {
    min-height: auto;
}




/* --------------------------------------------------------- MAIN SECTION  */

main {
    min-width: 320px;
}






















/*  ---end---  */
}