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


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




h1:after {
    content: " 5";
}


body {
    font-size: 10pt;
}

header {
    height: auto;
    min-height: 150px;
    background-position: -100px bottom;    
    }
header .content {
    padding: 0;
}
.bannerimage {
    background-position: right top;
    background-size: auto 225px;
    padding: 20px 0 0;
}

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

.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;
    color: #b3afa1;
    width: 100%;    
    font-size: 13pt;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    color: #ccc6b8;
    cursor: pointer; 
    text-align: right;
    -webkit-transition: all .35s; 
    -o-transition: all .35s; 
    transition: all .35s; 
}
form.smart label:hover {
    color: #ccc6b8;    
}

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

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

form.smart input:checked ~ label { 
    color: #fff; 
    background-color: transparent; !important;     
} 



/* + Icon */

form.smart label::after { 
    position: absolute; 
    right: 0; 
    top: 0; 
    display: block; 
    width: 50px; 
    height: 40px; line-height: 40px; 
    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: #ccc6b8;
    background-color: #e40011;
    border-top: 1px dotted #ccc6b8;
    font-size: 10pt;
    text-align: left;
    }
form.smart nav li a:hover {
    background-color: #ccc6b8;
    color: #1156be;
}

body.pg-home form.smart nav ul li.btn-home a,
body.pg-about form.smart nav ul li.btn-about a,
body.pg-stock form.smart nav ul li.btn-stock a,
body.pg-contact form.smart nav ul li.btn-contact a {
    background-color: #e40011;
    color: #ccc6b8;
    /* --cursor: default; */
}


body.pg-home form.smart nav ul li.btn-home a:before,
body.pg-about form.smart nav ul li.btn-about a:before,
body.pg-stock form.smart nav ul li.btn-stock a:before,
body.pg-contact form.smart nav ul li.btn-contact a:before {
    content: 'You Are Here:  ';
    color: #010101;
    font-weight: 300;
}



form#ValidatedForm label {
    float:  none;
    width: 100%;
    text-align: left;
}

form#ValidatedForm .textfield,
form#ValidatedForm .valid {
    float:  none;
    width: 100%;
}


.aboutsections {
    grid-template-columns: auto;
}

.contactsections {
    grid-template-columns: auto;
}

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

footer ul.credits li {
text-align: center;
}

footer ul.socials {
    text-align: center;
    }
footer ul.socials li {
    display: inline-block;
}


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