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





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


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

h1 {
    font-size: 20pt;
}

.introp {
    font-size: 14pt;
}

h2 {
    font-size: 14pt;
}


header {
    height: 150px;
}

a#logo {
    top: 20px;
    right: 30px;
    width: 170px;
    height: 91px;
}

.page {/* -- Grid Container  */
    grid-template-columns: auto;
    grid-template-rows: 60px auto;
    margin: -25px 0 30px;
}

.menubar { /* -- Grid Item  */   
    border-radius: 10px 10px 0 0;
}

.navigation {
    margin: 10px 0;
}

form.smart nav li {
    display: inline-block;
    border-bottom: 0;
    }
form.smart nav li:hover {
    background: transparent;
}

form.smart nav li a {
    padding: 0 5px;
    font-size: 11pt;
    }
form.smart nav li a:hover {
    color: #fff;
}

.maincontent {  
    border-radius: 0 0 10px 10px;
    padding: 35px;    
}

form#ValidatedForm {
    padding: 25px;
}

form#ValidatedForm label {
    width:  35%;
}

form#ValidatedForm .textfield,
form#ValidatedForm .valid {
    width: 65%;
}


.modelcols {
    padding: 20px 0;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: auto auto;
}
.modelcols div {
    padding: 15px;
    background: rgba(0,0,0,0.1);
}


.contactgrid1 { /* -- Grid Container  */
    margin: 0 0 20px;
    grid-template-columns: 341px auto; 
}
.contactgrid2 { /* -- Grid Container  */
    margin: 0 0 20px;
    grid-gap: 20px;
    grid-template-columns: 341px auto; 
}

.contacts { /* -- Grid Container & Item  */
    padding: 20px;
    grid-gap: 15px;
}









footer ul.socials li a {
    background-size: cover;
    height: 30px;
    width: 30px;
}



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



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





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


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

header {
    background-size: contain;
    background-position: -50px bottom;
}

.homesections {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
}

.stocksections {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}

form#ValidatedForm label {
    width:  30%;
}

form#ValidatedForm .textfield,
form#ValidatedForm .valid {
    width: 70%;
}









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