/* EcoFirm World CSS */

* {box-sizing: border-box;margin:0;padding:0}
body {background-color: #050a24;color:white;font-family:verdana;}
@font-face {font-family: "Roboto"; src: url("../fonts/Roboto/Roboto-Medium.ttf")}
@font-face {font-family: "Aldrich"; src: url("../fonts/Aldrich/Aldrich-Regular.ttf")}
body {font-family: Roboto, sans-serif;color:white;font-family:verdana;}

/* Structure */

.container {max-width: 960px;margin:auto}

.hero {background:url(../img/hdr-bgdark-full.jpg);position: relative;height: 290px;width:100%;background-size: cover;background-repeat: no-repeat;background-position-y: bottom;background-position-x: center;}

.hero .hero-text {top: 30px;position: relative;background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));}
.hero .hero-text .container {display: flex;align-items: center;}
.hero .hero-text h1 {background: url(../img/ecofirmworld-logo-wleafdark.png);text-indent: -99999px;background-size: contain;background-repeat: no-repeat;width: 500px;height: 200px;}

.hero-text .tag {text-align: center;color: rgba(51, 57, 62, 0.75);font-size: 1rem;line-height: 1.4rem;flex: 2;font-family: aldrich;}
.hero-text .tag-brand {font-family: Aldrich,sans-serif;font-weight: bold;color: #000;}

.category-selector {position: relative;top: 21px;}    
.category-selector ul {list-style-type: none;display:flex;text-decoration: none;color:white;flex-direction: row-reverse;}
.category-selector  a.btn {background: linear-gradient(#356e96, #003052);text-decoration:none;color: #fff;margin-left: 6px;padding: 6px 8px;border: 2px solid #0b4975;box-shadow: 2px 3px 6px #000000a8;}
.category-selector  a.btn:hover {background: linear-gradient(#82b7dc, #0088e8);box-shadow: 1px 1px 5px #0000007a;} 
.category-selector  a.btn.active {background: linear-gradient(#82b7dc, #0088e8);box-shadow: 1px 1px 5px #000000bd;border-color: #00dfff;} 

#products {font-family:Aldrich, sans-serif;background: url(/img/body-bgdark.jpg);min-height: 80vh;background-repeat: no-repeat;background-color: #050924;background-size: contain;}
#products .container {margin-top: 0;}
#products section {border-bottom: 1px solid rgb(24 45 103);margin-bottom: 20px;display:none;}
#products section.is-visible {display: block}
#products ul {list-style-type: none;display: flex;flex-wrap: wrap;}
#products li {width:200px}
#products img {width: 100%;border: 2px solid #a0a0a0;display: block;}
#products h2 {color: #ffffffde;padding: 15px 0 7px 0;}
#products a {border:2px solid transparent;color: white;text-decoration: none;margin: 0px 10px 20px 0;display: block;}
#products li p {margin-top: 10px;width: 100%;text-align: left;color: #bbbbbb;}


footer {padding:20px 0;}
footer p {margin: 4px 0;}
footer a {color: #9ecefd;text-decoration: none;}
footer a:hover {text-decoration:underline}
.container > footer {padding:0}


.modal {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.8);}
.modal.is-visible {display:block}
.modal-content {background: linear-gradient(#00365d, black);margin: 5vh auto; border: 1px solid #fff; width: 600px; max-height: 90vh; position: relative; overflow-y:auto}
.modal .close {color: #aaa; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 10px;}
.modal .close:hover, .close:focus {color: black; text-decoration: none; cursor: pointer;}
.modal img {width:100%}
.modal p{padding:20px;line-height: 1.5rem;}
.modal-content ul {padding-left: 50px}
.modal a.btn {color:white;text-decoration: none;padding: 10px 20px;background: linear-gradient(#82b74f, #608a37);margin-right: 20px;border: 2px solid #bdf389;border-bottom: 2px solid #346b00;border-right: 2px solid #346b00;}
.modal a.btn:hover {background:#527b2b}


/* Mobile */
.mobile-only {display:none}

/* ====== Media Queries ====== */
/* Normal Desktop and below */
@media only screen and (min-width: 1400px){
    .container {max-width: 1200px;}
    .hero {height:245px}
    .hero .hero-text h1 {width: 472px;height: 184px;margin-left: 50px;}
    .hero .hero-text .tag {font-size: 1.2rem;line-height: 1.8rem;color: rgba(121, 115, 115, 0.8);}
    .category-selector {top: 13px;}
    .category-selector a.btn {padding: 4px 4px;}
    #products li {width:200px;}
}

/* Normal Desktop and below */
@media only screen and (max-width: 999px){
    .container {max-width:800px}

    .hero .hero-text h1 h1 {width: 400px;height: 159px;}
    .hero .hero-text .tag {font-size:0.8rem}
    .category-selector {top: 44px;}
    .category-selector a.btn {padding: 4px 4px;}
    #products li {width:200px}
}

/* Smaller Desktop / Tablet and below */
@media only screen and (max-width: 850px){
    .container {max-width:700px;font-size: 0.8em;}
    .hero .hero-text .tag {font-size: -0.3rem;}
}

/* Small Tablet and below */
@media only screen and (max-width: 700px){
    .container {max-width:600px}
    .hero {height:190px}
    .hero .hero-text h1 {width: 300px;height: 118px;}
    .hero .hero-text .tag {font-size:0.5rem;line-height:1rem}
    .category-selector a.btn {font-size:0.7rem;padding: 4px 6px;}
    #products li {width:100%;}
    #products li p {font-size:1 rem}
}

/* Mobile */
@media only screen and (max-width: 600px){
    body {background-color: #011e31;background-color:#000}
    header {position: fixed;width: 100%;top: 0;}
    main {margin-top: 140px;padding-bottom:70px}
    footer {}
    .desktop-only {display:none !important}
    .container {max-width: 345px;}
    header.mobile-only {display: block}
    .mobile-only {display:block}

    a {text-decoration:none;color: #079eef;}

    #products {min-height: unset}
    #products ul {display:flex;justify-content: space-between;}
    #products a {margin:0;margin-bottom:10px}
    #products img {width: 100%;}

    .hero {background-image: url(../img/hdr-bgdark-small.jpg);height: 138px;background-position-y: 0px;background-position-x: 0;box-shadow: 0px 4px 6px #000;position: fixed;z-index: 2;}
    .hero .hero-text {background:transparent}
    .hero .hero-text h1 {position: absolute; top: -26px; left: 53px;z-index:2}
    .hero .hero-text .tag {background: rgba(255, 255, 255, 0.80);position: relative;top: 58px;text-align: right;padding-right: 20px;font-weight: bold;font-size: 0.7rem;padding-top: 2px;color: rgba(0, 0, 0, 0.61);}

    .mobile-header-bar {position: absolute;top: 0px;left:0;width:100%;height:50px;background: #000;}
    .mobile-header-bar .menu-btn {position: absolute; z-index: 3; left: 17px; top: 16px; cursor: pointer;}
    .mobile-header-bar .menu-btn .btn-line {width: 28px;height: 3px;margin: 0 0 5px 0;background-color: #bbe4ff;transition: all .3s;}
    .mobile-header-bar .menu-btn.close .btn-line:nth-child(1) {transform: rotate(45deg) translate(5px,5px);}
    .mobile-header-bar .menu-btn.close .btn-line:nth-child(2) {opacity:0}
    .mobile-header-bar .menu-btn.close .btn-line:nth-child(3) {transform: rotate(-45deg) translate(7px,-6px)}

    .mobile-header-bar nav.menu{position: absolute;height: 100vh;background-color: #000;z-index: 2;width: 100%;transition: all .5s;}
    .mobile-header-bar nav.menu {transform: translate(0,-100vh);}
    .mobile-header-bar.menu-active nav.menu{transform: translate(0,138px);}
    .mobile-header-bar.menu-active .btn-line {background-color:#ffb9b9}

    .mobile-tagline {background-color: #001850d4;padding: 8px;text-align: center;line-height: 19px;color: #7f99ab;font-size: 0.8rem;}

    a.btn-mobile {text-decoration:none;padding: 9px;color:#fff;text-align: center;display:block;font-family:Aldrich, sans-serif;font-size: 1.6rem;padding-top: 18px;}

    .view-cat-option {text-align: center;opacity: 0;}
    .view-cat-option.is-visible {opacity: 1;}
    a.btn-cat-all {text-decoration: none;color: #278af0;padding:10px;}

    .col1 {background-color: #0480C1;}
    .col2 {background-color: #016fa9;}
    .col3 {background-color: #01679c;}
    .col4 {background-color: #015a88;}
    .col5 {background-color: #015079;}
    .col6 {background-color: #023c5a;}
    .col7 {background-color: #01334c;color: #347da2 !important;}

    .contact-us {text-align: center;padding: 20px;color: #ccc;line-height: 18px;padding-top: 30px;}
    .contact-us h3 {color:#ececec;border-bottom:1px solid #4e4d4d;margin-bottom:5px;padding-bottom:5px}

    footer {text-align: left;position:absolute;width:100%;bottom:0;position:fixed;padding: 7px;background-color: #030719;box-shadow: 0px -1px 6px 5px #000000a8;}
    footer a {color:#a9d5f7;text-decoration: none;}
    footer p {margin:3px 0}

    .modal {background-color: #000;}
    .modal a.btn {width:100%;display:block;text-align: center;margin-bottom: 8px;}
    .modal-content {width:100%;margin: 0;margin-top: 0;height: auto;max-height: 100vh;border: navajowhite;}

}
/* Tiny Phones */
@media only screen and (max-width: 350px){
    main {margin-top:100px}
    .container {max-width: 285px;}
    .mobile-tagline {display: none}
    .hero {height:100px}
    .hero .hero-text h1 {width:243px;height:100px}
    .hero .hero-text .tag {display: none}

    #products img {width: 132px;}
}