﻿:root:before {
    content: url('../img/DBL-Gas-Logo-Plate-700.jpg')
             url('../Modified-Atmosphere-Analyzers/img/Modified-Atmosphere-Analyzer-AtmoCheck-Combo-700.jpg')
             url('../Modified-Atmosphere-Analyzers/img/Modified-Atmosphere-Analyzer-AtmoCheck-Laborer-700.jpg')
             url('../Ripening-Degreening-Systems/img/Scenty-Ripening-Control-700.jpg');
    visibility: hidden;
    position: absolute;
    left: -999em;
}
body {
    background-image: url(img/gas_bottles.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    box-sizing:border-box;
}
.wrapper {
    width:90%;
    max-width: 1180px;
    margin: auto;
}
header {
        max-width: 90%;
        margin: auto;
        text-align: center;
        font-weight: bold;
        font-variant: small-caps;
}
h1 {
    margin: 0;
    font-size: 2.5em;
}
h2 {
    max-width: 90%;
    text-align: center;
    margin: auto;
    color: black;
    background-color: #f2f2f2;
    border: solid thin;
}
h3 {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}
nav {
    width: 100%;
    margin: 0 auto;
}
    nav h2 {
        box-sizing:border-box;
        width: 100%;
        margin-bottom: 0;
        font-size: .7em;
        }
    nav ul {
        width:90%;
        display: flex;
        flex-flow: wrap;
        margin: 0 auto;
    }
    nav li {
        box-sizing: border-box;
        border-style: solid;
        border-width: thin;
        border-bottom: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width: 20%;
        display:inline-block;
        text-align:center;
        font-size: .5em;
        background-color: white;
        background-color: rgba(255, 255, 255, .9);
    }
    nav ul.dropdown {
        display: none;
        position: absolute;
        z-index: 999;
        top: 75px;
    }
    nav li:hover {
            background-color: #DDDDDD;
            background-color: rgba(221, 221, 221, 0.95);
        }   
    nav li:hover ul.dropdown {
            display: block;
        }
    nav ul.dropdown li {
        display: block;
        padding:5px 0 10px;
        text-align: center;
        margin-top: -4px;
        font-size: 1em;
        }
    nav ul.dropdown .last {
            border-bottom: thin;
            border-style: solid;
            border-bottom-color: black;
            border-radius: 10px;
            vertical-align:middle;
        }
a {
    text-decoration: none;
    color: black;
}
.headerBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    background-color: rgba(255, 255, 255, .9);
    font-variant:small-caps;
}
.socialBar {
    box-sizing:border-box;
    /*width:80%;*/
    margin:auto;
    background-color:lightgray;
    background-color: rgba(165, 165, 165, 0.70);
    clear:both;   
}
.socialBar ul {
    display:flex;
    margin:auto;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    padding:5px;
    font-size:1.2em;
}
.socialBar li {
    padding-left:10px;
    /*padding-top:5px;*/
    vertical-align:middle;
}
.socialBar a {
    padding:0;
}
.socialBarForms {
    clear: both;
    box-sizing: border-box;
    background-color: white;
    border-radius: 15px;
    border-width: thin;
    border-style: solid;
    border-color: black;
    display: block;
    text-align: center;
    font-size: 1em;
    /*margin: 10px auto 0;*/
    max-width: 95%;
}
/*.socialBar img {
    width:32px;
    height:32px;
}*/
.footerWrapper {
    margin:auto;
    background-color:white;
    background-color:rgba(255,255,255,0.7);
    clear:both;
}
.footerMenuGroups {
    display:flex;
    justify-content:center;
}
.footerMenu {
    width:30%;
    display:inline-block;
    vertical-align:top;
    padding-left:10px;
}
.footerMenu ul {
    margin:5px;
}
.footerMenu li {
    font-size: .7em;
    display:block;
    text-align:left;
    padding-bottom:5px;
}
.footerMenuTitle {
    padding-top:10px;
}
.rotater div {
    display:flex;
    margin:70px auto 10px;

}
#box {
        display: flex;
        flex-flow: column;
        margin: 20% auto;
        padding: 20px;
        width: 40%;
        border-style: double;
        text-align: center;
        vertical-align: middle;
        background-color: white;
    }
.content {
    box-sizing:border-box;
    float: left;
    width: 69%;
    border-style: solid;
    border-width: thin;
    padding: 1%;
    margin: 120px 1% 10px 0;
    background-color: white;
    background-color: rgba(255, 255, 255, .85);
}
    .content img {
        float: left;
        max-width: 100px;
        margin: 5% 2% 5% 2%;
    }
    .content p {
        text-align: justify;
        margin: 2% 5% 1% 125px;
        font-size:.9em;
    }
    .content ul {
        margin: 1% auto 1% 30%;
    }
    .content li {
        text-align: left;
        display: list-item;
        list-style: disc;
    }
    .content h2 {
        margin: 1% auto 1%;
        clear:both;
        width:100%;
    }
    .content h3 {
        margin: 2% 5% 1% 110px;
        text-align: justify;
        font-size:1em;
    }
    .content h4 {
        margin: 0 auto 1%;
        width:80%;
        text-align: center;
        font-size: 1em;
    }
    .content caption {
        margin-bottom: 1%;
    }
    .content table {
        margin: 0 auto;
        font-size: smaller;
        table-layout: auto;
        border-collapse: separate;
        width: 100%;
        background-color: #595959;
        background-color: rgba(89, 89, 89, 0.45);
        border-spacing: 1px;
        color: black;
    }
    .content th {
        background: #EEE;
        padding: 5px;
        text-align: left;
    }
    .content td {
        background: #EEE;
        padding: 5px;
    }
.content-header {
    border-bottom-left-radius: 15px;
    border-bottom-style: solid;
    border-width: thin;
    border-left-style: solid;
    margin-bottom: 2%;
    padding: 5px;
}
    .content-header p {
        margin: auto;
        padding: 0 6%;
        text-indent: 25px;
    }
.content-detail {
    border-bottom-left-radius: 15px;
    border-bottom-style: solid;
    border-width: thin;
    border-left-style: solid;
    margin-bottom: 10px;
    padding: 5px;
}
    .content-detail p {
        margin: auto;
        margin-left:150px;
        padding: 0 6%;
        text-indent: 25px;
    }
    .content-header a, .content-detail a, .content-sensors a {
        font-size: .9em;
        max-width: 50%;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .content-detail img {
        margin:2% 5%;
    }
.content-sensors {
    border-bottom-left-radius: 15px;
    border-bottom-style: solid;
    border-width: thin;
    border-left-style: solid;
    margin-bottom: 10px;
    padding: 5px;
    min-height:230px;
}
    .content-sensors h3 {
        margin-left:220px;
        text-align:center;
    }
    .content-sensors p {
        margin: auto;
        margin-left: 200px;
        padding: 0 6%;
    }
    .content-sensors img {
        margin: 0 0 0 20px;
        max-width:200px;
    }
    .content-sensors a {
        clear:none;
        margin-left:240px;
        font-size:.8em;
        max-width:55%;
    }
    .content-sensors ul {
        margin-left:240px;
        font-size:.8em;
    }
.content-privacy {
    display: block;
    float: none;
    max-width: 60%;
    border-style: solid;
    border-width: thin;
    padding: 1%;
    margin: 130px auto 10px;
    background-color: white;
    background-color: rgba(255, 255, 255, .8);
}
.ripen-header p {
    margin:auto;
}
.ripen {
    display:inline-block;
    align-content:center;
}
    .ripen p {
    box-sizing:border-box;
    min-width:40%;
    max-width:49%;
    padding:1%;
    float:right;
    margin:auto;
}
    .ripen img {
    box-sizing:border-box;
    float:none;
    min-width:40%;
    max-width:45%;
    margin:2% 1%;
}
    .ripen-header ul {
        margin:0 auto 1%;
        padding:unset;
        display:flex;
        flex-flow:wrap;
    }
    .ripen-header li {
    min-width:40%;
    list-style-position:inside;
    margin:0 0 0 10%;
}
    #privacy div {
        margin-top: 10px;
    }
    #privacy p {
        text-align: justify;
        margin: auto;
    }
    #privacy h2 {
        color: black;
        margin: 10px 145px 10px 145px;
    }
    #privacy h3 {
        margin: 10px 10px 10px 10px;
        text-align: center;
    }
    #privacy ul {
        margin: 10px 200px 40px 200px;
    }
    #privacy li {
        text-align: left;
        display: list-item;
        list-style: disc;
    }
ul {
        padding: 0;
        list-style: none;
    }
    table {
        width: 80%;
        padding: 1%;
        text-align: center;
    }
    th {
        color: black;
        background-color: #f2f2f2;
        border: double;
        font-size: 1.5em;
    }
    td {
        background-color: white;
        background-color: rgba(255, 255, 255, 0.3);
        padding-bottom: 1%;
    }
    cite {
        float: right;
        margin: 0 155px;
    }
.store {
    box-sizing: border-box;
    margin: 120px auto 0;
    border-style: solid;
    border-width: thin;
    width:95%;
}
.store iframe {
    width:100%;
}
.storeButton {
    clear: both;
    box-sizing: border-box;
    background-color: white;
    border-width:medium;
    border-style:outset;
    border-color:gray;
    display: block;
    text-align: center;
    font-size: 1em;
    margin: 10px auto 0;
    max-width: 95%;
}
.sidebar {
    box-sizing:border-box;
    float: right;
    width: 30%;
    font-size: 0.9em;
    margin: 120px auto 10px;
    border-style: solid;
    border-width: thin;
    background-color: white;
    background-color: rgba(255, 255, 255, .85);
}
    .sidebar h3 {
        margin: 15px 25px 0 25px;
        font-size: 1em;
        text-align: center;
        padding-bottom:10px;
    }
    .sidebar h4 {
        text-align: center;
        margin:-30px 5% 10px;
        max-width:100px;
        font-size:.65em;
    }
    .sidebar ul {
        width: 90%;
        margin: 1% 10%;
    }
    .sidebar li {
        text-align: left;
        display: list-item;
        list-style: disc;
        padding-bottom: 3px;
    }
    .sidebar video {
        float: left;
        max-width: 90%;
        margin: 4% 5% 1% 5%;
    }
    .sidebar img {
        float: left;
        max-width: 90%;
        margin: 10px 5%;
    }
    .sidebar p {
        margin: 2% 5% 0 120px;
        font-size:.8em;
        
    }
    .sidebar p .logo {
        font-size: .65em;
        padding: 0;
    }
.logo {
        background-color: white;
        background-color: rgba(255, 255, 255, 0.7);
        border-width: thin;
        border-style: solid;
        border-radius: 15px;
        margin-top: 25%;
        padding: 2px 6px;
        line-height: 22px;
}
.socialButtons {
        display: flex;
        justify-content: space-around;
        margin: 2% auto 0;
    }
.atmocheck {
        color: #039;
        font-weight: bold;
    }
.double {
        color: #C33;
    }
.one {
        color: #99C;
    }
.weld {
        color: #390;
    }
.learnMore {
    display:block;
    border: thin solid black;
    border-radius:15px;
    text-align:center;
    margin:10px auto;
    width:40%;
    clear:left;
}
.locations {
        display: inline-block;
        width: 40%;
        margin: 0 0 1% 5%;
    }
.membership {
        display: inline-block;
        width: 20%;
        margin: 0 0 1% 20%;
    }
    .membership a img {
            margin: 1%;
            width: 120px;
        }
    .contact h2 {
        margin: 1% auto;
    }
    .contact h3 {
        margin: auto;
        text-align:center;
    }
    .contact p {
        margin: auto;
        text-align: center;
    }
    .contact img, .contact video {
        max-width: 80%;
        margin: 1% 0 0 20%;
        float: none;
    }
.partners {
        display: inline-block;
        width: 80%;
}
.inquiry {
        clear: both;
        box-sizing:border-box;
        background-color: white;
        border-radius: 15px;
        border-width: thin;
        border-style: solid;
        border-color: black;
        display: block;
        text-align: center;
        font-size: 1em;
        margin:10px auto 0;
        max-width:95%;
}
#amazonBanner {
    width:300px;
    margin-left:40%;
}
/*#serviceDetail {
        margin: 10px 10px;
        padding: 10px 0 0 0;
    }
#itemDetail img {
        float: left;
        max-width: 15%;
        margin: 1% 0 0 10%;
    }
.itemHeader {
        background-color: white;
        background-color: rgba(255, 255, 255, 0.5);
        border: double;
        max-width: 90%;
        margin: auto;
        margin-bottom: 1%;
        padding: 1% 1% 1% 1%;
    }
    #itemHeader p {
            font-weight: 600;
            margin: 1% 10% 0 10%;
            text-align: center;
        }
#itemDetail {
        background-color: white;
        background-color: rgba(255, 255, 255, 0.5);
        border: double;
        max-width: 80%;
        margin: 0 auto 1% auto;
        padding: 1% 1% 1% 1%;
    }
    #itemDetail p {
            font-weight: 600;
            margin: 1% 20% 0 30%;
            text-align: center;
        }*/
@media (min-width:540px) {
    nav h2 {
        font-size: .9em;
    }

    nav li {
        font-size: .6em;
        height: 36px;
        padding-top: 3px;
    }
}
@media (min-width:899px) {
    nav h2 {
        font-size: 1.3em;
    }

    nav li {
        font-size: .8em;
        padding-top: 6px;
        height: 42px;
    }

    nav ul.dropdown {
        display: none;
        position: absolute;
        z-index: 999;
        top: 85px;
    }
    .sidebar p .logo {
        font-size: .75em;
        padding: 2px;
    }
}
