@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins|Roboto');

/* IE10+            */
@-ms-viewport { 
    width: device-width; 
    zoom: 1;
}

/* Opera 11.10+     */
@-o-viewport { 
    width: device-width; 
    zoom: 1;
}

/* W3C              */
@viewport { 
    width: device-width; 
    zoom: 1;
}

/* FF3.6+, Chrome, Safari4+, Konqueror 3+ still require the meta tag */

/*----------------------------------------------------------------------------*/

html,
body {
    width: 100%;
    /*height: 100%;*/ /* do not use as it causes window.scroll to not fire */
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    
    background-color: #000000; 
    color: #606060; /* 049B24  526CFD  5767FF  13CCD9  8CD61C */
    
    font-family: "Poppins", sans-serif;
    font-size: 12pt;
    font-weight: normal;
}
            

/* used to tell the browser what the sizing properties (width and height) should include */
/* border-box = includes content, padding and border, but not the margin                 */
html {
    -webkit-box-sizing: border-box;    /* Chrome, Safari4+ */
    -khtml-box-sizing:  border-box;    /* Konqueror 3+     */
    -moz-box-sizing:    border-box;    /* FF3.6+           */
    -ms-box-sizing:     border-box;    /* IE10+            */
    -o-box-sizing:      border-box;    /* Opera 11.10+     */
    box-sizing:         border-box;    /* W3C              */
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;    /* Chrome, Safari4+ */
    -khtml-box-sizing:  inherit;    /* Konqueror 3+     */
    -moz-box-sizing:    inherit;    /* FF3.6+           */
    -ms-box-sizing:     inherit;    /* IE10+            */
    -o-box-sizing:      inherit;    /* Opera 11.10+     */
    box-sizing:         inherit;    /* W3C              */
}

.clear-fix:before,
.clear-fix:after {
    content: " ";
    display: block;
}

.clear-fix:after {
    clear: both;
}

.clear-fix {
    *zoom: 1;
}

/* -----------------------------------------------------------------------------
 *
 * Section Structure
 *
 */
#header-wrapper,
div.section-heading,
div.section-1,
div.section-2,
#footer-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    
    /*border: 1px dashed red;*/
}

div.section-heading {
    background: #333333;
}

div.section-1 {
    background: #FFFFFF;
}

div.section-2 {
    background: #F3F3F3;
}

#footer-wrapper {
    background: #16365C; /* 16365C  333333  049B24  151F30  049B24 */
}

div.header,
div.content,
div.footer {
    max-width: 800px;
    margin: 0;
    padding: 10px 0;
    
    /*border: 0px dashed purple;*/
}

/*----------------------------------------------------------------------------*/

/* HEADER */

div.header {
    position: relative;
    /*max-height: 400px;*/
}

img.header-bkgnd,
img.header-logo {
    max-width: 100%;
    height: auto;
}

img.header-bkgnd {
    top: 0;
}

img.header-logo {
    position: absolute;
    top: 0;
    left: 0;
}

/*----------------------------------------------------------------------------*/

/* NAVIGATION */

nav {
    width: 100%;
    height: auto;
    margin-top: -15px;
    padding: 5px 0 6px 0;
    
    background: #000000;
    
    /*border: 0px dashed green;*/
}

nav.fixed-top {
    position: fixed;
    top: 0;
    margin-top: 0;
    
    /*border-top: 1px solid #FFFFFF;*/
    
    z-index: 1;
}

nav a#nav-open,
nav a#nav-close {
    display: none;
} 

nav ul.nav {
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    list-style: none inside none;
    
    /*border: 0px dashed blue;*/
    
    z-index: 2;
}

nav li.nav,
nav li.nav > a {
    display: inline-block;
}

nav li.nav > a {
    padding: 4px 10px 0px 10px;
    
    color: #FFFFFF;
    
    font-family: inherit;
    font-size: 100%;
    
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    
    /*border: 0px dashed green;*/
}

nav li.nav > a:hover {
    background: #049B24;
}

/*----------------------------------------------------------------------------*/

/* CONTENT */

div.content {
    padding: 20px 0;
    
    text-align: left;
    
    /*border: 1px dashed purple;*/
}

h1 {
    margin: 0;
    padding: 0;
    
    font-family: inherit;
    font-size: 150%;
    font-weight: bold;
    
    text-transform: uppercase;
}

h2 {
    margin: 0;
    padding: 20px 0 10px 0;
    
    font-family: inherit;
    font-size: 120%;
    font-weight: bold;
}

h2.rewards {
    color: #C5A149;
}

h2.membership {
    padding-bottom: 20px;
}

h3 {
    margin: 0;
    padding: 0 0 0 5px;
    
    text-align: left;

    color: #FFFFFF;
    
    font-family: inherit;
    font-size: 100%;
    font-weight: bold;
}
    
h3.membership-hdr {
    height: 60px;
    margin: 0 5px 5px 5px;
    padding-top: 20px;
}

p, 
li, 
.p {
    font-family: inherit;
    font-size: 90%;
    font-weight: normal;
}

hr.brown,
hr.black,
hr.blue,
hr.green,
hr.red {
    margin: 0 0 30px 0;
    padding: 0;
}

hr.brown {
    border: 0.5px solid #9E7A23;
}

hr.black {
    border: 0.5px solid #000000;
}

hr.blue {
    border: 0.5px solid #0080FF;
}

hr.green {
    border: 0.5px solid #049B24;
}

hr.red {
    border: 0.5px solid #C80815;
}

.brown-bkgnd,
.black-bkgnd,
.blue-bkgnd,
.green-bkgnd,
.red-bkgnd {
    color: #FFFFFF;
}

.brown {
    color: #9E7A23;
}

.brown-bkgnd {
    background-color: #9E7A23;
}

.brown-bkgnd:hover {
    background-color: #0F52BA; 
}

.black {
    color: #616161;
}

.black-bkgnd {
    background-color: #000000;
}

.black-bkgnd:hover {
    background-color: #333333; 
}

.blue {
    color: #0080FF;
}

.blue-bkgnd {
    background-color: #0080FF; /* Azure */
}

.blue-bkgnd:hover {
    background-color: #0F52BA; /* Sapphire */
}

.green {
    color: #049B24;
}

.green-bkgnd {
    background-color: #049B24; /* Green */
}

.green-bkgnd:hover {
    background-color: #008000; /* Office Green */
}

.red {
    color: #C80815;
}

.red-bkgnd {
    background-color: #C80815; /* Venetian Red */
}

.red-bkgnd:hover {
    background-color: #A91101; /* Turkey Red */
}

/*----------------------------------------------------------------------------*/

div.features,
div.why-us {
    max-width: 900px;
    
    /*border: 0px dashed blue;*/
}

div.membership {
    max-width: 950px;
    
    /*border: 0px dashed blue;*/
}

p.membership {
    padding: 0 10px 20px 10px;
}

div.benefit {
    margin-top: 20px;
}

div.news-img,
div.news-link {
    float: left;
}

div.news-img {
    width: 20%;
    padding: 15px 25px 0 0;
    
    /*border: 0px dashed blue;*/
}

div.news-link {
    width: 80%;
    padding: 15px 0 0 0;
    
    /*border: 0px dashed red;*/
}

img.news {
    width: 100%;
    height: auto;
}

ul.features,
ul.why-us,
ol.privacy,
ul.membership,
ol.exclusions-sd {
    margin: 0;
    padding: 0;
    
    /*border: 0px dashed fuchsia;*/
}

ul.features,
ul.why-us {
    list-style-type: none;
    list-style-position: inside;
}

ul.features {
    float: left;
    width: 50%;
}

ul.why-us {
    
}

ol.privacy {
    
}

ul.membership {
    padding: 0 5px;
}

ol.exclusions-sd {
    padding-left: 20px;
    
    list-style-position: outside;
}

li.features,
li.why-us,
li.membership,
li.exclusions {
    height: auto;
    margin: 0;
    
    /*border: 0px dashed red;*/
}

li.features,
li.why-us,
li.membership {
    padding: 5px 0 30px 40px;
}

li.privacy {
    margin: 0;
    padding: 15px 0 0 0;
    
    color: #C80815;
    
    font-weight: bold;
    
    text-align: left;
}

li.exclusions {
    padding: 5px;
}

li.brown-bullit {
    background: url('../../images/gleamcc/brown.png') no-repeat left top;
    vertical-align: baseline;
}

li.black-bullit {
    background: url('../../images/gleamcc/black.png') no-repeat left top;
    vertical-align: baseline;
}

li.blue-bullit {
    background: url('../../images/gleamcc/blue.png') no-repeat left top;
    vertical-align: baseline;
}

li.green-bullit {
    background: url('../../images/gleamcc/green.png') no-repeat left top;
    vertical-align: baseline;
}

li.red-bullit {
    background: url('../../images/gleamcc/red.png') no-repeat left top;
    vertical-align: baseline;
}

/*----------------------------------------------------------------------------*/

div.tbl-popup, 
div.tbl-contact,
div.tbl-rewards,
div.tbl-membership {
    display: table;
    margin: 0;
    padding: 0;
    
    /*border: 0px dashed fuchsia;*/
}

div.tbl-popup, 
div.tbl-contact {
    width: 100%;
}

div.tbl-rewards {
    float: left;
    width: 50%;
    margin-bottom: 30px;
}

div.tbl-membership {
    float: left;
    width: 33%;
    margin: 0 1px 20px 1px;
    
    border: 1px solid #F0F0F0;
}

div.row {
    display: table-row;
    width: 100%;
    
    /*border: 0px dashed blue;*/
}

div.col-1-1,
div.col-1-2,
div.col-1-3,
div.col-2-3,
div.col-1-4,
div.col-3-4,
div.col-1-5,
div.col-4-5 {
    display: table-cell;
    margin: 0;
    padding: 10px 0;
    overflow: hidden;
    
    vertical-align: middle;
    
    /*border: 0px dashed green;*/    
}

div.col-1-1 {
    width: 100%;
}

div.col-1-2 {
    width: 50%;
    
    text-align: center;
}

div.col-1-3 {
    width: 33%;
    padding-left: 15%;
}

div.col-1-4 {
    width: 25%;
    padding: 0;
}

div.col-3-4 {
    width: 75%;
    padding: 0;
}

div.col-2-3 {
    width: 67%;
}

div.col-1-3,
div.col-2-3 {
    text-align: left;
}

div.col-membership {
    height: 1025px;
    vertical-align: top;
}

div.col-1-5 {
    width: 20%;
    text-align: right;
}

div.col-4-5 {
    width: 80%;
    text-align: left;
}

/* -----------------------------------------------------------------------------
 *
 * Set Popup Window
 *
 */
div#popupBackdrop,
div.popupBox {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    z-index: -1; /*hide it in the back of the page*/    
}

div#popupBackdrop {
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    width: 102%;
    height: 102%;
    
    background-color: rgba(0,0,0,0.5);
}

div.popupBox {
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;

    transform: scale(0);
    
    /*make it smooth*/  
    -webkit-transition: all .5s ease-in-out; /* Chrome, Safari4+ */
    transition: all .5s ease-in-out;   
    
    background-color: #FFFFFF;
    border: 1px solid #666666;
}

div#popupBackdrop.show,
div.popupBox.show {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}    

div.popupBox.show {
    transform: scale(1);
}

div.popupHeader,
div.popupContent {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    
    background-color: #FFFFFF;
}

div.popupHeader {
    height: 70px;
    margin: auto;
    padding: 10px 0 0 0; /*  0 2% 2% 2%; */
}

div.popupContent {
    height: auto;
    margin-top: 80px;  /* must be >= to .popupHeader->height + .popupHeader->padding-top + .popupHeader->padding-bottom */
    padding: 0 10px 10px 10px; /*  0 2% 2% 2%; */
    
    text-align: left;
}

div.popupTitle {
    margin: 0;
    padding: 0 10px;
    
    font-family: inherit;
    font-size: 100%;
    font-weight: bold;
}

div.popupClose img,
div.popupClose img:hover {
    cursor: pointer;
    margin: 9px 19px 0 0;
    padding: 0;
}

div.popupClose img {
    opacity: 0.4;
}

div.popupClose img:hover {
    opacity: 1.0;
}

/*----------------------------------------------------------------------------*/

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

/* -----------------------------------------------------------------------------
 *
 * FORMS
 *
 */
input[type=text],
textarea,
select {
    font-family: inherit;
    font-size: 90%;
}

select:purchase:invalid {
  color: gray;
}

option[value=""][disabled] {
  display: none;
}

option {
  color: black;
}

input[type=text].purchase,
select.purchase,
input[type=text].contact,
textarea.contact {
    background-color: #E1E1DB;
    border: 0;
}

input[type=text].purchase,
select.purchase {
    margin: 0;
    padding: 0;
}

input[type=text].contact,
textarea.contact {
    margin: 5px 0;
    padding: 5px;
}

input[type=text].purchase:hover,
select.purchase:hover,
input[type=text].contact:hover,
textarea.contact:hover {
    background-color: #FFFFC8;
}

input[type=text].purchase:focus,
select.purchase:focus,
input[type=text].contact:focus,
textarea.contact:focus {
    background-color: #D5FFD5;
}

input[type=text].purchase,
input[type=text].contact {
    width: 100%;
}

textarea.contact {
    width: 100%;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.news-btn-wrapper {
    margin-top: 15px;
    text-align: left;
}

div.contact-btn-wrapper {
    margin-top: 15px;
    text-align: right;
}

div.repairs-btn-wrapper {
    margin-top: 15px;
    text-align: left;
}

div.membership-btn-wrapper {
    margin-top: 15px;
    text-align: center;
}

a.anchorButton,
button[type=button],
button[type=button]:hover,
button[type=submit],
button[type=submit]:hover {
    width: 200px; 
    margin: 0;
    padding: 10px;
    cursor: pointer;
    
    color: #FFFFFF;
    
    border: 0;
    
    font-size: 90%;
    
    text-align: center;
}

a.anchorButton {
    display: inline-block;
    height: 35px;
    margin: 0;
    padding: 6px 0 8px 0;
    
    text-decoration: none;
 }

/*----------------------------------------------------------------------------*/

/* FOOTER */

div.footer {
    padding: 20px 0;
    
    font-family: inherit;
    font-size: 80%;
}

div.footer-links,
div.footer-links > span > a,
div.copyright {
    text-align: center;
    
    color: #FFFFFF;
}

div.footer-links > span > a {
    margin: 0;
    padding: 0 8px;
    
    text-decoration: none;
}

div.footer-links > span > a:hover {
    text-decoration: underline;
}

div.copyright {
    margin: 0;
    padding-top: 15px;
}

/* -----------------------------------------------------------------------------
 *
 * RESPONSIVE STRUCTURE 
 *
 */ 
@media screen and (max-width: 941px) { 
    html,
    body {
        font-size: 11pt;
    }
    
    div.content {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media screen and (max-width: 860px) {
    ol.privacy {
        list-style-position: inside;
    }
}

@media screen and (max-width: 730px) {
    img.header-logo {
        max-width: 36%;
        height: auto;
    }
    
    div.tbl-membership {
        width: 100%;
    }

    div.col-membership {
        height: auto;
    }

    div.news-link {
        padding: 0;
    }

    img.news {
        width: 100%;
    }
}

@media screen and (max-width: 661px) {
    nav {
        height: 38px;
    }
    
    nav a#nav-open,
    nav a#nav-close {
        position: relative;
        width: 100%;
        height: 30px;
        
        background-color: #000000;
        
        text-align: left;
    }
 
    nav a#nav-open:after,
    nav a#nav-close:after {
        display: inline-block;
        position: absolute;
        width: 25px;
        height: 25px;
        right: 10px;
        top: 4px;
        
        content: "";
    }  
    
    nav a#nav-open {
        display: block;
    }
 
    nav a#nav-open:after {
        background: url('../../images/nav-open.png') no-repeat;
    }  
    
    nav a#nav-close {
        display: none;
    }
 
    nav a#nav-close:after {
        background: url('../../images/nav-close.png') no-repeat;
    }  
    
    nav ul.nav {
        display: none;
        position: relative;
        width: auto;
        height: auto;
        margin: 10px;
        padding-bottom: 5px;
        
        background-color: #000000;
    }
    
    nav li.nav,
    nav li.nav a {
        width: 100%;
    }
    
    nav li.nav {
        display: block;
    }
    
    nav li.nav a {
        height: auto;
        padding: 8px 0 7px 10px;
        
        text-align: left;
    }

    a.anchorButton {
        padding-top: 9px;
    }
}

@media screen and (max-width: 620px) {
    ul.features {
        display: block;
        
        width: 100%;
    }
    
    div.tbl-rewards {
        width: 100%;
        margin: 0;
    }
    
    div.tbl-rewards:last-of-type {
        margin-bottom: 30px;
    }
    
    div.col-1-3 {
        padding-left: 10%;
    }

    div.news-img {
        width: 30%;
    }

    div.news-link {
        width: 70%;
        padding: 0;
    }
}

@media screen and (max-width: 530px) {
    html,
    body {
        font-size: 10pt;
    }
    
    div.col-1-3 {
        padding-left: 5%;
    }

    div.news-btn-wrapper,
    div.contact-btn-wrapper,
    div.repairs-btn-wrapper {
        text-align: center;
    }

    div.news-link {
        padding: 0;
    }
}

@media screen and (max-width: 440px) {
    div.col-1-3 {
        padding-left: 0;
    }
}