/*#_Basics/Colors#*/
/*
Col 1 #C42032 Red
Col 2 #013571 Blue
Col 3 #F2F2F2 Light Gray
Col 4 #E6E6E6 Med Gray
Col 5 #001A38 Dark Blue
*/

/*#_Basics/Fonts#*/
/*
    font-family: 'Montserrat', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
*/

html,body {width: 100%; height: 100%; margin: 0px; padding: 0px} 

body {background-color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 13pt; font-weight:400; color: #000; margin: 0; padding: 0}

sup {font-size: 50%; padding-left: 2px}
iframe {border:none;margin-bottom:20px}
img {display: block;height: auto;max-width: 100%}	

h1, h2, h3, h4 { margin-bottom: 20px; font-weight: 800; line-height: 110%}

h1 {font-size: 2.5em; color: #000;font-family: 'Montserrat', sans-serif;}

h2 {font-size: 1.8em; color: #C42032;font-family: 'Montserrat', sans-serif;}

h3 {font-size: 1.5em; color: #C42032;}

h4 {font-size: 1.2em; color: #000}

a {color:#000; text-decoration:underline}
a:hover{color:#C42032}

.blue {color: #013571}
.red {color: #C42032}

strong {font-weight:700}
p {line-height: 140%}
.nopadding {padding:0}
.text-left {text-align:left}

.clear {clear: both}
.screentext {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-to-content {position: absolute; width: 1px; height: 1px;overflow: hidden;clip: rect(0,0,0,0);margin: 0} 
.skip-to-content:focus, .skip-to-content:active {position: static;height: auto;width: auto;overflow: visible;clip: auto}

.btn {border-radius:7px; text-decoration:none}

.graybtn {padding: 12px 10px; font-size:0.75em; font-weight: 700; background-color: #E6E6E6; color: #000; text-decoration:none}
.graybtn:hover, .graybtn:focus {background-color: #000; color: #fff;}

.redbtn {padding: 12px 10px; font-size:0.75em; font-weight: 700; background-color: #C42032; color: #fff; text-decoration:none}
.redbtn:hover, .redbtn:focus {color: #fff; background-color: #000;}

.bigredbtn {width: 200px; max-width: 200px; font-size:1.05em; padding: 19px 0; font-weight: 700; background-color: #C42032; border: 1px solid #fff; color: #fff; text-decoration:none}
.bigredbtn:hover, .bigredbtn:focus {background-color: #000; border: 1px solid #fff; color: #fff;}

.whitebtn {width: 140px; font-size:0.75em; font-weight: 700; background-color: transparent; border: 2px solid #fff; color: #fff; text-decoration:none}
.whitebtn:hover, .whitebtn:focus {background-color: #000; border: 1px solid #fff; color: #fff;}


/*# Header Styles ----------------------------------#*/
header {padding: 6px 0; height: 45px;}

.navbar {background-color:#fff!important; box-shadow: 0px 0px 15px rgba(0,0,0,0.25); border-bottom: 1px solid #E6E6E6}
.navbar .btn {margin-left: 10px}
.navbar-nav li {padding: 0px 3px;}
.navbar-nav li a {font-size: 1.05em; font-weight: 600; color: #000;}
.navbar-nav li a:hover {color: #C42032;}

.dropdown-menu {border:0;}
.dropdown-menu li a {display:block; padding: 2px 10px; margin-bottom: 3px; font-size: 0.95em; text-decoration:none}
.dropdown-menu li a:hover {background-color: #F2F2F2;}

.offcanvas, .offcanvas-header.bg-dark {background-color: #fff!important}
.offcanvas-title {color:#000}
.offcanvas-header {border-bottom: 2px solid #000}
.navbar-toggler {border-color: #000; background-color:#F2F2F2}
.navbar-light .navbar-toggler-icon 
{background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}

/*# Footer ----------------------------------#*/
footer {font-size: 0.8em; background-color: #001A38; color:#D2D4D7; text-align:center; padding: 26px 0}
footer a {color:#D2D4D7; text-decoration:none}
footer a:hover {color:#fff; text-decoration:underline}

/*# Home Page ----------------------------------#*/
#homehero {padding-top: 80px; min-height: 470px; background: url(images/hero-pict.jpg) no-repeat center; background-size:cover;}
#homeherocta {padding-top: 80px; padding-bottom: 60px; background: url(images/hero-pict.jpg) no-repeat center; background-size:cover;}
#homehero h1 {margin-bottom:20px; font-size: 5.4em; color: #fff; font-weight: 900; text-shadow: 0px 0px 20px #000;}
#homehero h2, #homeherocta h2 {font-size: 1.9em; color: #fff; font-weight:700; font-family: 'Source Sans Pro', sans-serif; margin-bottom: 7px; text-shadow: 0px 0px 10px #000,0px 0px 20px #000;}
#homehero p {font-size: 1.05em; color: #fff; font-weight:600; text-shadow: 0px 0px 10px #000,0px 0px 20px #000}

#joinsection h2 {padding-top: 42px; color:#000; font-size: 1.6em; font-weight: 700;}
#joinsection .btn {width: 347px; max-width: 347px; margin: 20px 10px 0 10px}

#quotesection {margin-top: -25px; background: url(images/blue-global-bkgrnd.jpg) no-repeat center; background-size:cover; position:relative; z-index: -10}
.quotetext {font-size: 1.55em; color:#fff; padding-top: 100px}
.quotetext span {font-size: 1.15em; font-weight: 900}
.quotename {font-size:1em; color:#fff;padding-bottom: 60px}

#hometextsection {background-color:#F2F2F2; padding-top: 80px;padding-bottom: 80px}
#hometextsection h2 {margin-bottom: 40px;color:#000; }

#ecommsection {padding-top: 80px;padding-bottom: 80px}
.ecommcopy {padding-right: 60px}
#ecommsection h1 {font-weight:900; color: #C42032;}
#ecommsection strong {font-size: 1.4em}
#ecommsection h2 {font-family: 'Source Sans Pro', sans-serif; font-weight: 700}

.ecommbutton {width: 345px; max-width: 345px; padding: 57px 0; font-family: 'Montserrat', sans-serif; font-size:1.45em; line-height: 120%; font-weight: 600; background: url(images/ecomm-bkgrnd.jpg) no-repeat center; background-size:cover; text-transform:uppercase; text-align:center; color: #fff; border-radius: 30px; text-decoration:none}
.ecommbutton:hover, .ecommbutton:focus {opacity: 0.8; color: #fff;}
.ecommbutton span {font-size: 1.1em; font-weight:900}
.ecommbutton .fa-solid {padding-top: 10px; font-size: 2.6em; display:block; color:rgba(255,255,255,0.5)}

#detailssection {color:#FFF;padding-top: 80px;padding-bottom: 65px; background: url(images/phone-bkgrnd.jpg) no-repeat center; background-size:cover;}
#detailssection h2 {margin-bottom: 40px; font-weight: 600; color:#FFF}
#detailssection h2 span {font-weight: 900;}
.checkmark {display:inline-block; margin: 0 0 -5px 5px; width: 32px; height: 28px; background: url(images/red-checkmark.png) no-repeat center; background-size:contain;}
#detailssection p {margin-bottom: 10px; font-size: 1.4em}

#firstsection {padding-top: 80px;padding-bottom: 40px; }
#firstsection h1 {font-size: 2.3em; color:#000; }
#firstsection .iconrow {padding-top: 30px}
#firstsection .col-md-4 {padding: 0 40px 50px 40px;}
#firstsection .iconpict img {margin: 0 auto 10px auto}
#firstsection .iconredtitle {padding-bottom: 10px; color: #C42032; font-size: 1.2em}

#ctasection {padding-top: 30px; padding-bottom: 15px; background-color:#C42032;}
#ctasection h3 {color:#fff; font-weight: 900}
#ctasection .whitebtn {margin: 0 15px 15px 15px}

/*# Main body text area ----------------------------------#*/
.contentpage {min-height: 30em;}
#copytopsection {padding-top: 80px; padding-bottom: 50px; background: url(images/blue-global-bkgrnd.jpg) no-repeat center; background-size:cover;}
#copytopsection h1, #copytopsection h3 {color:#fff}

.graybkgrnd {background-color:#F2F2F2}
.roundphoto {border-radius: 30px;}

#grandanarsection {padding-top: 80px; padding-bottom: 80px}

.productbutton {font-family: 'Montserrat', sans-serif; font-size:1.45em; line-height: 120%; font-weight: 600; text-transform:uppercase; text-align:center; color: #fff; text-decoration:none}
.productbutton.anar {width: 95%; min-height: 380px; padding: 10px; background: url(images/ecomm2-bkgrnd.jpg) no-repeat center; background-size:cover;border-radius: 30px;}
.productbutton.stellar {width: 95%; min-height: 380px; padding: 10px; background: url(images/ecomm-bkgrnd.jpg) no-repeat center; background-size:cover;border-radius: 30px;}

.productbutton:hover, .productbutton:focus {opacity: 0.8; color: #fff;}
.productbutton .title {font-size: 1.1em; font-weight:900; margin-bottom: 20px}
.productbutton p {font-size: 0.8em;}
.productbutton .fa-solid {padding-top: 10px; font-size: 2.6em; display:block; color:rgba(255,255,255,0.5)}

#jointopsection {color:#FFF;padding-top: 80px;padding-bottom: 80px;}
#jointopsection.manufacturer {background: url(images/global-bkgrnd.jpg) no-repeat center; background-size:cover;}
#jointopsection.distributor {background: url(images/download-bkgrnd.jpg) no-repeat center; background-size:cover;}
#jointopsection.association {background: url(images/global-top-bkgrnd.jpg) no-repeat center; background-size:cover;}
#jointopsection {padding-left: 40px; padding-right: 40px}
#jointopsection h1, #jointopsection a {color:#FFF}
#jointopsection .topheadline {margin-bottom: 20px; font-weight: 800; font-size: 1.1em; color:#FFF}
#jointopsection p {margin-bottom: 10px; font-size: 1.2em}

.copysection {padding-top: 80px; padding-bottom: 80px}
.copyright {padding-left: 80px}
.copyleft {padding-right: 80px}
.photoleft img, .photoright img {width: 100%; max-width: 600px; height: auto; text-align:center; margin: 0 auto}

form input, form textarea {margin-bottom: 20px}
input[type="checkbox"],input[type="radio"]{
    margin-bottom: 0;
    margin-left: 10px
}
a{
    text-decoration: none;
}
form label {font-weight: 700}

/*# Responsive adjustments ----------------------------------#*/
@media (min-width: 310px) and (max-width: 575px) {
body {font-size: 12pt}
h2 {font-size: 1.6em}
h3 {font-size: 1.3em}

.navbar-brand {max-width: 200px}

#homehero h1 {font-size: 3em}
#joinsection .btn {width: 100%; margin: 20px 0 0 0}
#ecommsection {text-align:center}
.ecommcopy {padding-right: 20px}
.ecommbutton {width: 100%;}
#detailssection h2 br {display:none}
.checkmark {width: 28px; height: 26px;}

#jointopsection {padding-left: 20px; padding-right: 20px}
.copyright {padding-left: 20px}
.copyleft {padding-right: 20px}
.photoleft {padding-bottom: 20px}
.photoright {padding-top: 20px}
}

@media (min-width: 576px) and (max-width: 767px) {
body {font-size: 12pt}
h2 {font-size: 1.6em}
h3 {font-size: 1.3em}

#homehero h1 {font-size: 4.5em}
#ecommsection {text-align:center}
.ecommcopy {padding-right: 20px}
#detailssection h2 br {display:none}

#jointopsection {padding-left: 20px; padding-right: 20px}
.copyright {padding-left: 20px}
.copyleft {padding-right: 20px}
.photoleft {padding-bottom: 20px}
.photoright {padding-top: 20px}
}

@media (min-width: 768px) and (max-width: 991px) {
.ecommcopy {padding-right: 10px}
.ecommbutton {width: 100%;}

#jointopsection {padding-left: 20px; padding-right: 20px}
.copyright {padding-left: 20px}
.copyleft {padding-right: 20px}
.photoleft {padding-bottom: 20px}
.photoright {padding-top: 20px}
}

@media (min-width: 992px) and (max-width: 1150px) {
#jointopsection {padding-left: 20px; padding-right: 20px}
}

@media (min-width: 1200px) and (max-width: 1300px) {
.navbar-nav li {padding: 0px;}
.navbar-nav li a {font-size: 1em;}
}

@media (min-width: 1200px) {
.dropdown-menu {width: 200px; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);}
}