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


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

 h1:after {
    content: " 1";
}

header {
    height: 160px;
}

.bannerimage {
    height: 264px;
}


a#logo {
    top: 53px;
    width: 264px;
    height: 70px;
}

form.smart nav li a {
    margin: 0 0 0 30px; /* DIFFERS FROM ENGLISH CSS */
    font-size: 10pt;
}

main {
    padding: 75px 0;
}

h1 {
    font: 900 28pt Roboto, Arial, Verdana, sans-serif;
}

h2 {
    font: 700 16pt Roboto, Arial, Verdana, sans-serif;
}

h3 {
    font: 500 12pt Roboto, Arial, Verdana, sans-serif;
}

body {
    font: 400 11pt Roboto, Arial, Verdana, sans-serif;
}

p.intro {
    font-size: 16pt;
}

.serviceteasergrid a span.teaserlink {
    font-size: 100%;
}

.footergrid{ /* -- Grid Container   */
    grid-template-columns: 280px auto 220px;
}

a#footerlogo {
    width: 264px;
    height: 70px;
}


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




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


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

 h1:after {
    content: " 2";
}


header {
    height: 140px;
}

.bannerimage {
    height: 210px;
}


a#logo {
    top: 44px;
    width: 220px;
    height: 60px;
}

form.smart nav li a {
    margin: 0 0 0 20px;  /* DIFFERS FROM ENGLISH CSS */
}

p.intro { 
    margin: 0 0 50px;
}
p.intro + p {
    margin: -40px 0 50px;
}
p.intro + h2 {
    margin: -40px 0 50px;
}

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

.footergrid{ /* -- Grid Container   */
    grid-template-columns: 230px auto 220px;
}

a#footerlogo {
    width: 220px;
    height: 60px;
}




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





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


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

h1:after {
    content: " 3";
}

header {
    width: calc(100% - 80px);
    height: auto;
    }
header .content {
    padding: 0;
}

.banner {
    position: relative;
    bottom: auto; 
    padding: 50px 0 0;
}

.bannerimage {
    left: 0;
}

a#logo {
    top: 24px;
}

.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 35px 0 0;
    width: 100%;    
    font-size: 12pt;
    line-height: 50px;
    text-transform: uppercase;
    color: #2ca387;
    cursor: pointer; 
    text-align: right;
    -webkit-transition: all .35s; 
    -o-transition: all .35s; 
    transition: all .35s; 
}
form.smart label:hover {
    color: #006969; 
}

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

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

form.smart input:checked ~ label { 
    color: #2ca387; 
   
} 



/* + Icon */

form.smart label::after { 
    position: absolute; 
    right: 0; 
    top: 0; 
    display: block; 
    width: 45px; 
    height: 50px; line-height: 47px; 
    text-align: center; 
    -webkit-transition: all .35s; 
    -o-transition: all .35s; 
    transition: all .35s; 
    } 
form.smart input[type=checkbox] + label::after { 
    font-size: 17pt;   
    content: "+"; 
    }
form.smart input[type=checkbox]:checked + label::after { 
    transform: rotate(315deg); 
}

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 a {
    margin: 0;
    padding: 0 20px;
    width: 100%;
    line-height: 40px;
    color: #f5f5f6;
    background-color: rgba(44,163,135,0.8);
    border-bottom:  1px solid #2ca387;
    font-size: 10pt;
    text-align: right;
    }
form.smart nav li a:hover {
    background-color: #006969;
    color: #f5f5f6;
}

.pg-home form.smart nav ul li.btn-home a,
.pg-info form.smart nav ul li.btn-info a,
.pg-contact form.smart nav ul li.btn-contact a {
    background-color: rgba(44,163,135,0.8);
    color: #006969;
}

main {
    padding: 80px 0;
    width: calc(100% - 80px);
}

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

.serviceteasergrid {
    grid-gap: 20px;
}

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

.pg-contact .section1 .content {
    grid-template-columns: auto 300px; 
}

.pg-home .section2 .content {
    grid-gap: 20px;
}

.about {
    padding: 20px 30px 10px;
}

.pg-info .section1 .productblock {
    grid-template-columns: 200px auto; 
    grid-gap: 20px;
    margin: 0 0 30px;
}

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

.aboutgrid {
    grid-gap: 35px;
}
.landing1grid {
    grid-gap: 35px;
}
.block-content {
    padding: 20px 30px 10px;
}

.aboutcta .content {
    grid-gap: 20px;
}

form#ValidatedForm {
    padding: 30px;
}

footer {
    padding: 40px;
}

.footergrid{
    grid-gap: 30px;
}



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





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





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


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


.bannerimage {
    left: 100px;
    height: 180px;
}





main {
    padding: 50px 0;
}


h1 {
    font: 900 24pt Roboto, Arial, Verdana, sans-serif;
}

h2 {
    font: 700 14pt Roboto, Arial, Verdana, sans-serif;
    padding: 10px 0 0;
}

h3 {
    font: 500 11pt Roboto, Arial, Verdana, sans-serif;
    padding: 10px 0 0;
}

p.intro {
    font-size: 14pt;
    margin: 0 0 25px;
}
p.intro + p {
    margin: -25px 0 40px;
}
p.intro + h2 {
    margin: -25px 0 80px;
}

.serviceteasergrid {
    margin: 10px 0;
    grid-gap: 15px;
}
.serviceteasergrid a span.teaserimage {
    padding: 180px 0 0;
    }
.serviceteasergrid a span.teaserlink {
    font-size: 90%;
    padding: 10px;
}

.pg-home .section2 .content {
    grid-gap: 15px;
}

.pg-home .section2 {
    margin: 30px 0 0;
}

.aboutgrid {
    grid-gap: 30px;
}
.landing1grid {
    grid-gap: 20px;
}

.aboutcta .content {
    grid-gap: 15px;
}

p.cta a {
    padding: 10px 20px;
    font-weight: 700;
    font-size: 100%;
}

.pg-info .section1 .productblock {
    margin: 20px 0 0;
    grid-gap: 20px;
}


.footergrid{ /* -- Grid Container   */
    grid-template-columns: 220px auto 220px;
}

a#footerlogo {
    width: 200px;
    height: 53px;
}


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



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





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


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

.serviceteasergrid { /* -- Grid Container  */
    grid-template-columns:  1fr 1fr 1fr;
}
.teaserlink span {
    display: block;
}

.pg-home .section2 .content {
    grid-template-columns:  1fr;
}


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

.footergrid{
    grid-template-columns: 1fr;
}

footer .footercenter ul li a {
    display: block;
}

footer .footercenter span.footerlinkdiv {
    display: none;
}

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

.aboutgrid {
    grid-gap: 20px;
}

.block-content {
    padding: 5px 20px 0;
}

p.cta a {
    margin: 5px 0 0;
    min-width: 200px;
}

.landing1grid {
    grid-template-columns: 1fr;
}


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





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


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




h1:after {
    content: " 5";
}

h1 {
    font: 900 22pt Roboto, Arial, Verdana, sans-serif;
    padding: 0 0 10px;
    line-height: 100%;
}


body {
    font: 400 10pt Roboto, Arial, Verdana, sans-serif;
}

.bannerimage {
    display: none;
}

p.intro {
    font-size: 12pt;
    line-height: 120%;
    font-weight: 400;
}

.pg-info .section1 .productblock { /* -- Grid Container  */
    grid-template-columns: 1fr; 
    grid-gap: 10px;
}

form#ValidatedForm {
    padding: 20px;
}

.aboutgrid,
.aboutcta .content {
    grid-template-columns: auto;
}




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



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


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


h1:after {
    content: " 6";
}





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

main {
    min-width: 320px;
}

a#logo {
    top: 43px;
    width: 150px;
    height: 40px;
}

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

.teaserlink span {
    display: inline;
}

form#ValidatedForm {
    padding: 0px;
    background: transparent;
}




















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