@charset "UTF-8";

/*
Theme Name: United Energy Trading
Theme URI: https://www.unitedenergytrading.com/

*/

body {

    margin:0;
    padding:0;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size:18px;
    line-height: 1.2;
    color: #717B86;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top:0 !important;
    
}

.clear { clear: both; }

h1, .h1 {

    font-size: 70px;
    line-height: 1.1;
    font-weight: 600;

}

h2,.h2 {

    font-size: 30px;
    line-height: 1.3;
    color: #717B86;
    font-weight: 600;

}

h3,.h3 {

    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;
    margin:0;

}

p {

    font-size:18px;
    line-height: 2;

}

a {

    color: #0062CE;
    text-decoration: none;

}

ul {

    margin:0 0 0 20px;
    padding:0;

}

ul li {

    margin:0 0 20px 0;
    padding:0;
    font-size:18px;
    line-height: 1.4;
    
}

ul.bullets li {

    background-image: url(assets/images/bullet.svg);
    background-repeat: no-repeat;
    background-position: left 5px;
    background-size:10px;
    list-style: none;
    padding:0 0 0 20px;
    margin:0 0 10px 0;

}

ul.inline-bullets {

    margin:0;
    padding:0;
    text-align: center;

}

ul.inline-bullets li {

    margin:0 10px;
    padding:0 0 0 35px;
    list-style: none;
    display: inline;
    background-image: url(assets/images/bullet.svg);
    background-repeat: no-repeat;
    background-position: left center;
    font-size:22px;

}

ul.inline-bullets li:first-child {

    padding:0;
    background: none;

}

hr {

    border:none;
    height:2px;
    max-width: 780px;
    margin: 0 auto;
    background-color: #E0E3E5;

}

.green-outer ul.bullets li { background-image: url(assets/images/bullet-rev.svg); }

.green { color:#61988E; }

.no-wrap { white-space: nowrap; }

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

    body { font-size:16px; }

    p { font-size:16px; }

    .h1 { font-size: 30px; }
    h2,.h2 { font-size: 26px; }
    h3,.h3 { font-size: 16px; }

    ul.inline-bullets li {

        padding:0;
        display: block;
        background:none;

    }
    
}

.vertical {

    display:flex;
    align-items: center;
    justify-content: center; 

}

#header-outer {

    position: fixed;
    top:0;
    left:0;
    right: 0;
    z-index: 10;
    background-color: #0c1d3f;
}

#header {

    height:80px;
    max-width: 1160px;
    min-width: 940px;
    margin:0 auto;
    padding:50px 0 0 0;
    position: relative;
    padding-left:20px;
    padding-right:20px;

}

#header-outer.scrolled {

    background-color: #0c1d3f;

}

#logo {

    width:220px;
    position: absolute;
    top:0;
    left:-30px;

}

#logo img {

    width:100%;

}

.container {

    max-width: 1140px;
    min-width: 920px;
    position: relative;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;

}

.container-sm {

    max-width: 964px;
    margin:0 auto;
    position: relative;
    padding-left:30px;
    padding-right:30px;

}

#menu-go,
.fa-bars {

    display: none;

}

.link {

    moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -khtml-border-radius: 40px; 
    color:#FFF;
    font-size:20px;
    line-height: 1;
    border:7px solid #FFF;
    text-decoration: none;
    padding:3px 30px;
    text-transform: uppercase;
    
}

#menu-main {

    margin:0;
    padding:0;
    width:100%;
    text-align: right;

}

#menu-main li {

    margin:0 0 0 40px;
    padding:0;
    list-style: none;
    display: inline-block;
    font-size:20px;
    text-transform: uppercase;
    position: relative;

}

#menu-main li a {

    display: block;
    color:#FFF;
    font-weight: 700;
    text-decoration: none;

}

#menu-main li .sub-menu {
    
    position: absolute;
    left:0;
    top:28px;
    text-align: center;
    margin:0 0 0 -60px;
    padding:0;
    width:230px;
    display: none;

}

#menu-main li .sub-menu li {

    margin:0;
    padding:0;
    display: block;
    line-height: 1.2;


}

#menu-main li .sub-menu li a {

    margin:0;
    padding:0;
    display:block;
    padding:10px 20px;
    background-color: #0c1d3f;
    margin-bottom:1px;

}

.touch { display: none; }
#menu-main li a .fa-chevron-up { display: none; }

.sub-menu-toggle { display:none; }

@media only screen and (min-width : 992px) {

    #menu-main li:hover .sub-menu {

        display:block !important;
        z-index:100;
        
    }

}

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

    #logo { left:0px; }

}

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

    #menu-main li {

        font-size:18px;

    }

}

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

    #header { height:40px; }

    #logo { 
        
        width:150px;
        left:0px;
    
    }

    .fa-bars {

        display: block;
        color:#FFF;
        font-size:30px;
        position: absolute;
        top:30px;
        right:30px;
        cursor: pointer;
        z-index: 0;

    }

    #menu-go {

        display: block;
        position: absolute;
        top:30px;
        right:30px;
        cursor: pointer;
        width:50px;
        height:50px;
        z-index: 1;

    }

    #menu-main { display: none; }
    #menu-main.on { display: block; }

    #header {

        max-width:none;
        min-width:auto;

    }

    .container,
    .container-sm
     {

        max-width:none;
        min-width:auto;

    }

    #menu-main {

        background-color: #0c1d3f;
        position: absolute;
        top:90px;
        left:0;
        right:0;
        text-align: center;
  
    }

    #menu-main li {

        display: block;
        margin:0;
        border-top:1px solid #1b3f78;
       
    }
    
    #menu-main li a { 
        
        padding:10px 20px 11px 20px; 
        position: relative; 
    
    }

    #menu-main li a .fa-chevron-down,
    #menu-main li a .fa-chevron-up
    {

        position: absolute;
        right:20px;
        top:12px;
        z-index: 0;

    }

    #menu-main li .touch {

        display: block;
        position: absolute;
        right:0;
        top:0;
        width:50px;
        height:50px;
        z-index: 1;
        cursor: pointer;
        
    }

    #menu-main li .sub-menu {

        display: none;

    }

    #menu-main li.on .sub-menu {

        display: block;
        position: static;
        width: auto;
        margin:0;
    
    }

    #menu-main li .sub-menu li a {

        background-color: #61988E;
        margin-bottom: 0;

    }

    #menu-main li.on a .fa-chevron-up { display: block; }
    #menu-main li.on a .fa-chevron-down { display: none; }

}

#footer-outer {

    background-color: #0c1d3f;
    padding:20px 0;
    position: relative;

}

#footer {

    position: relative;
    color:#FFF;

}

#footer #to-top {

    text-align: center;
    font-size:20px;
    text-transform: uppercase;
    position: relative;
    top:-20px;
    cursor: pointer;
    width:180px;
    margin:0 auto;

}

#footer .footer {

    display: flex;
    align-items: center;
    justify-content: center

}

#footer #footer-logo {

    width:220px;
    position: absolute;
    top:0;
    left:-30px;
    display: block;

}

#footer .link {

    border-color:#CECECE;
    position: absolute;
    right:0;
    top:50%;
    margin-top:-10px;
    padding:10px 30px;

}

#lang-tab {

    position: fixed;
    right:15px;
    bottom:0;
    height:50px;
    overflow: hidden;
    background-image: url(assets/images/mx-flag.png);
    background-repeat: no-repeat;
    background-position: center 10px;
    cursor: pointer;
    padding:0 20px;
    background-color: #0c1d3f;

    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    display: none;

}

#lang-tab.active {

    height: auto;

}

#lang { padding:50px 0 10px 0; }

.goog-te-banner-frame { display: none !important; }

#content {

    top:90%;
    position: absolute;
    left:0;
    right:0;

}

#menu-footer {

    margin:0;
    padding:0;
    width:100%;
    text-align: center;
    
}

#menu-footer li {

    margin:0 20px;
    padding:0;
    list-style: none;
    display: inline-block;
    font-size:20px;
    text-transform: uppercase;

}

#menu-footer li a {

    display: block;
    color:#FFF;
    font-weight: 700;
    text-decoration: none;

}

#copy {

    width: auto;
    text-align: center;
    color:#FFF;
    font-size:20px;
    
}

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

    #footer { text-align: center; }

    #footer #footer-logo {

        width: 220px;
        position:static;
        margin:0 auto;
        display: block;

    }

    #footer .link {

        display: inline-block;
        position: static;
        margin:20px 0 0 0;

    }
    
    #footer #to-top { top:0; }

}

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

    #menu-footer li { margin:0 10px; }
    #copy { font-size: 16px; }

}

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

    #menu-footer li {
        
        margin:0 7px;
        font-size: 16px;

    }

}


/* Home */

#hero-home {

    position: absolute;
    top:0;
    height:90%;
    right: 0;
    left:0;
    overflow: hidden;
    z-index: 0;
    
}

#hero-video-home {

    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index:0;

}

#hero-fade-home {

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
    background-color: #000000;
    opacity: .33;

}

#hero-home .container {

    z-index: 2;

}

.arc {

    position:absolute;
    bottom:-1px;
    left:0;
    width: 100%;
    z-index: 3;
    /*background-image: url(../images/arc.svg);
    background-repeat: no-repeat;
    background-position: center top;*/

}

#hero-video p {

    color:#FFF;
    font-weight: 300;
    font-size:24px;

}

#hero-text {

    position: absolute;
    z-index: 2;
    left:0;
    top:0;
    right:0;
    bottom:0;
    display: flex;
    align-items: center;

}

#hero-box {

    width:720px;
    padding:50px;
    background-color:rgba(5, 32, 74, 0.44);
    moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -khtml-border-radius: 40px; 
    position: absolute;
    top:200px;

}

#hero-box h1 {

    font-size:70px;
    line-height: 1;
    font-weight: 300;
    display: block;
    color:#FFF;
    margin:0;

}

#hero-box h2 {

    font-size:46px;
    font-weight: 700;
    display: block;
    color:#FED766;
    line-height: 1;
    margin:0;

}

#hero-box p {

    color:#FFF;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom:50px;

}

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

    #hero-box {

        position: static;
        width:auto;
        margin-top:100px;

    }

}

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

    #hero-home { height:480px; }
    
    #hero-box { padding:25px; }

    #hero-box h1 {

        font-size:26px;
        margin-bottom:10px;
    }
    
    #hero-box h2 { font-size:26px; }

    #hero-box p { 

        font-size:17px;
        line-height: 1.5;
        margin: 20px 0;
    
    } 

    #hero-box .link-align {
    
        text-align: center;
        margin:30px 0 20px 0;

    }

    #content {

        top:480px;
    
    }

}

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

    #hero-box { 

        padding:0;
        background: none;

     }

     #hero-box h2 { font-size:18px; }

     #hero-box p {

        font-size: 16px;
        line-height: 1.4;
  
    }

}

#vision-statement {

    color:#717B86;
    text-align: center;
    font-size:42px;
    line-height: 1.2;
    font-weight: 300;
   
}

#vision-statement p {

    margin:30px 0 50px 0;

}

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

    #vision-statement {

        font-size:23px;

    }

}

#what-sets {

    position: relative;
    background-image: url(assets/images/plant.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    padding:50px 0 100px 0;

}

#what-sets h1,
#what-sets h2,
#what-sets h3 
{

    font-size:70px;
    line-height:1.2;
    color:#FFF;
    font-weight: 600;
    margin:0;

}

#what-sets p {

    font-weight: 300;
    font-size:20px;
    color:#FFF;
    line-height: 2;
    margin:20px 0 0 0;

}

#what-bg {

    background-color: #0c1d3f;
    opacity: .75;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 0;

}

#what-sets .container-sm {
  
    z-index: 1;

}

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

    #what-sets { padding:50px 0; }

    #what-sets h1, #what-sets h2, #what-sets h3 { font-size:35px; }

    #what-sets p { font-size: 16px; }

}

#impact { text-align: center; }

#impact h2 {
    
    font-size:70px;
    line-height:1.2;
    color:#717B86;
    font-weight: 600;
    margin:50px 0;

}

#impact-grid {

    display:grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap:5%;
    margin:30px 0 100px 0;
    cursor: pointer;

}

.impact-grid {

    text-align: left;

}

.impact-grid img {

    width:100px;
    float:left;
    margin:0 20px 35px 0;

}

.impact-grid h4 {

    color:#61988E;
    font-size:36px;
    font-weight: 600;
    line-height: 1.1;
    margin:0;
    text-transform: uppercase;

}

.impact-grid p {

    color:#717B86;
    font-size:16px;
    line-height: 1.8;
    margin:0;

}

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

    #impact-grid { 
        
        display: block;
        margin: 0;
    
    }

}

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

    #impact-grid {  margin:15px 0; }

    #impact h2 { font-size:35px; }

    .impact-grid h4 { font-size: 28px; }

}

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

    .impact-grid {

        margin-bottom:20px;
        
    }

    .impact-grid img {

        float: none;
        margin: 0 auto 20px auto;
        display: block

    }

}


#stats-grid {

    display:grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap:2%;
    margin:30px 0 100px 0;

}

.stats-grid {

    display:grid;
    grid-template-columns: 30% 10% 55%;
    color:#717B86;
   font-size: 16px;
    line-height: 1.6;

}

.stats-grid p {

    color:#717B86;
    font-size: 16px;
    line-height: 1.6;
}

.sg { position: relative; }

.sg img {

    width:100px;
    margin:0 auto;
    display: block;
    max-width: 90%;

}

.sg-img {

    display: flex;
    align-items: center;
    justify-content: center

}

.sg h4 {

    color:#61988E;
    font-size:30px;
    font-weight: 600;
    line-height: 1.1;
    margin:0 0 25px 0;
    text-transform: uppercase;

}

.sg p {

    margin: 0;

}

.divider {

    width:4px;
    height:100%;
    background-color: #E0E3E5;
    display: block;
    margin:0 auto;

}

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

    #stats-grid {

        display:block;
        margin:30px 0 100px 0;
    
    }

    .stats-grid {

        margin-bottom:30px;

    }

}

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

    .sg h4 {

        font-size:28px;
        
    }

}



#stat-left {


}

#stat-left ul {

    margin:0;
    padding:0;

}

#stat-left ul  li {

    margin:0;
    padding:0;
    list-style: none;
    
}

#stat-left ul  li span:first-child { 
    
    font-weight: 500;
    display: block;

}

#stat-left ul li span:last-child { 
    
    margin-bottom:20px;
    display: block;

}

#stat-left ul li:last-child,
#stat-left ul li:last-child span:last-child {

    margin:0;

}

#stat-middle .sg-img { display: block; }
#stat-middle .sg-img img:first-child { margin-bottom:30px; }

#stat-middle h4 { margin:0 0 5px 0; }
#stat-middle p { margin:0 0 70px 0;}
#stat-middle p:nth-child(4) { margin:0; }

#stat-right ul {

    margin:0 0 0 20px;
    padding:0;

}

#stat-right ul  li:before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #717B86; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#stat-right ul li {

    margin:0 0 25px;
    padding:0;
    list-style: none;
   
}

#get-started {

    background-color:#61988E;
    padding:30px 0;
    text-align: center;

}

#get-started h2 {

    display: inline;
    font-size:70px;
    line-height:1.2;
    color:#FFF;
    font-weight: 600;

}

#get-started .link {

    position: relative;
    margin-left:50px;
    top:-20px;

}

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

    #get-started h2 { font-size:40px; }

    #get-started .link { top:-5px; } 

}


@media only screen and (max-width : 767px) {
    
    #get-started { padding: 1px 0 40px 0; }

    #get-started h2 { display: block; margin-bottom:40px; }

    #get-started .link { margin:0; }
}

#our-services {

    padding:100px 0 25px 0;
    text-align: center;
  
}

#our-services-grid {

    display: flex;
    flex-wrap: wrap;
    align-items: center;

}

.our-services-grid {

    flex-basis:33.333333%;
    margin-bottom:40px;
    
}

.our-services-grid-wide {

    flex-basis:50%;
    margin-bottom:30px;
    
}

.our-services {

    max-width: 450px;
    margin: 0 auto;

}

#our-services h2 {

    font-size:70px;
    line-height:1.2;
    color:#717B86;
    font-weight: 600;
    margin:0 0 50px 0;

}

#our-services h3 {

    color:#61988E;
    font-size:36px;
    font-weight: 600;
    line-height: 1.1;
    margin:20px 0;

}

#our-services p {

    color:#717B86;
    font-size:16px;
    line-height: 1.8;
    margin:0 0 15px 0;

}

#our-services img {

     max-width: 100%;
     margin:0 auto;

}

#our-services a {

    color:#717B86;
    text-transform: uppercase;
    font-size: 20px;
    text-decoration: none;

}

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

    .our-services-grid { flex-basis:50%; }
    .our-services-grid-wide { flex-basis:50%; }
    .our-services-grid-wide:last-child { flex-basis:100%; }

}

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

    #our-services { padding:50px 0; }

    #our-services h2 { font-size: 35px; }
    #our-services h3 { font-size: 25px; }
    
    .our-services-grid { flex-basis:100%; }
    .our-services-grid-wide { flex-basis:100%; }

}

#learn-more {

    text-align: center;

}

#learn-more h2 {
    
    font-size:70px;
    line-height:1.2;
    color:#717B86;
    font-weight: 600;
    margin:0;

}

#aerial {

    background-image:url(assets/images/aerial.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom:100px;
    padding-top:50px;
    position: relative;

}

#aerial #cover {

    background-color: #0c1d3f;
    opacity: .50;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;

}

#aerial .container { z-index: 1; }

.arc-rev {

    position:absolute;
    top:0;
    left:0;
    width: 100%;
    z-index: 1;

}

#quad {

    display:grid;
    grid-template-columns: 50% 50%;
    moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    -khtml-border-radius: 70px; 
    overflow: hidden;
    margin-bottom:80px;
    position: relative;
    top:-30px;

}

#quad img {

    width: 100%;
    display: block;

}

.quad { 
    
    position: relative;
    cursor: pointer; 

}

.quad .quad-text {

    background-color: #0c1d3f;
    font-size: 50px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:20px 0;
    color:#FFF;

}

.quad a {

    display: none;

}

#quote-outer{

    background-color:rgba(97, 152, 142, 0.85);
    moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    -khtml-border-radius: 70px; 
    padding:40px 30px;

}

#quote {

    display: grid;
    grid-template-columns: 15% 5% 80%;
    text-align: left;
    color:#FFF;

}

#quote .divider { background-color: #FFF; }

#quote p {

    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin:0;

}

#quote img {

    max-width: 100%;

}

#quote .q-name {

    font-size: 32px;
    font-weight: 600;
    display: block;
    margin-top:30px;

}

#quote .q-title {

    font-size: 20px;
    font-weight: 600;
    display: block;

}

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

    #quote {

        display: grid;
        grid-template-columns: 15% 5% 80%;
        text-align: left;
        color:#FFF;
    
    }

    .quad .quad-text {

        font-size: 35px;
        padding:15px 0;

    }

}



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

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

        #learn-more h2 { font-size:40px; }
    
    }
    
    #quad {

       display: block;
        moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        -khtml-border-radius: 0px; 
        overflow: hidden;
        margin-bottom:30px;
        top:10px;
    
    }

    .quad {

        margin-bottom:30px;
        moz-border-radius: 35px;
        -webkit-border-radius: 35px;
        border-radius: 35px;
        -khtml-border-radius: 35px; 
        overflow: hidden;

    }

    .quad .quad-text {

        font-size: 26px;
        padding:15px 0;

    }

    #quote-outer {

        moz-border-radius: 35px;
        -webkit-border-radius: 35px;
        border-radius: 35px;
        -khtml-border-radius: 35px; 
        
    }

    #quote .vertical { display: block; }
    #quote .divider { display: none; }
    
    #quote p { font-size:14px; }

    #quote .q-name { font-size: 20px; }
 
    #quote .q-title { font-size: 14px; }

}


/*Subpage*/

#hero-sub {

    margin:0 0 50px 0;
    height:575px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    position: relative;

}

#hero-sub .arc {

    position: absolute;
    bottom:-2px;
    width:100%;
    z-index: 3;

}

#hero-fade {

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
    background-color: #000000;
    opacity: .33;

}

#hero-sub-text {

    padding-top:200px;
    position: relative;
    z-index:2;

}

#hero-sub h1 {
    font-size: 70px;
    line-height: 1;
    font-weight: bold;
    display: block;
    color: #FFF;
    margin:0;
}

#hero-sub h2 {

    font-size: 45px;
    line-height: 1.2;
    font-weight: 300;
    display: block;
    color: #FFF;
    margin:0;

}

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

    #hero-sub { height:425px; }

    #hero-sub h1 {
      
        font-size: 35px;
        margin-bottom:15px;
       
    }
    
    #hero-sub h2 { font-size: 28px; }

    #hero-sub-text { padding-top:125px; }

}

.section {

    margin-bottom:80px;

}

.grid-grid {

    display:grid;
    grid-template-columns: 47% 47%;
    grid-gap:6%;
    
}

.grid-grid .grid {
    
    display:grid;
    grid-template-columns: 33% 63%;
    grid-gap:4%;

}

.grid-grid h2 { 
    
    text-transform: uppercase;
    margin:0;

}

.grid-grid p {

    font-size:16px;
    line-height: 1.8;

}

.grid-grid ul {

    display:grid;
    grid-template-columns: 47% 47%;
    grid-gap:6%;
    margin:10px 0 0 0;

}

.green-outer {

    background-color: #61988E;
    padding:100px 0;
    color:#FFF;
    margin-bottom:80px;

}

.green-outer h1,
.green-outer h2,
.green-outer h3,
.green-outer .h1,
.green-outer .h2,
.green-outer .h3
 { color:#FFF; }

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

    .grid-grid {

        display:grid;
        grid-template-columns: 49% 49%;
        grid-gap:2%;
        
    }
    
 }
 
 @media only screen and (max-width : 991px) {

    .green-outer { padding:50px 0; }

    .grid-grid { display: block; }

    .grid-grid .grid {
    
        grid-template-columns: 25% 71%;
        grid-gap:4%;
        margin-bottom:30px;
    
    }

}

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

    .grid-grid .grid { display: block; }

    .grid-grid .grid img { 

        display: block; 
        margin:0 auto 20px auto; 

    }

    .grid-grid ul { display: block; }


}



.cir {  position: relative;}

.cir .cir-text { 
    
    margin-right:600px;
    min-height:625px;
    display:flex;
    align-items: center;

}

.cir .cir-img {

    width:550px;
    position: absolute;
    top:0;
    right:0;

}

.cir p { margin-bottom:30px; }


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

    .cir .cir-text { 
    
        margin-right:500px;
        min-height:511px;
    
    }
    

    .cir .cir-img {

        width:450px;

    }

}

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

    .cir .cir-text { 

        margin:0;

    }

    .cir .cir-img { 
        
        position: static;
        width: auto;
        float:right;
        display: block;
        max-width: 90%;
    
    }

}

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


}


/* Image Left/Right */

.flex-grid {

    display: flex;
    justify-content: space-between;

}

.flex-text { width:60%; }
.flex-img { width:35%; position: relative; }
.flex-img img { max-width: 100%; }

.graph-holder { 
    
    position: absolute; 
    top:0;
    left:0;
    right:0;
    bottom:0;

}

.img-right .flex-text { order:1; }
.img-right .flex-img { order:2; }


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


    .flex-grid { display: block; }

    .flex-text { width:100%; }
    .flex-img { width:100%; }

    .flex-img img { 
        
        display: block;
        margin: 0 auto 30px auto; 
    
    }



}

.duals {

    display:flex;
    align-items: center;
    justify-content:space-between;
}

.dual { width:50%; }

.dual img { 
    
    display: block;
    max-width: 100%;
    margin:0 auto;

}

.dual:nth-child(1) { border-right:1px solid #E0E3E5;}
.dual:nth-child(1) .dual-pad { padding-right:30px; }
.dual:nth-child(2) .dual-pad { padding-left:30px; }

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

    .duals { display: block; }
    .dual { 
        
        width:100%;
        border:none !important;
    
    }

    .dual-pad {padding:0 !important; }

}

.circles {

    display: flex;
    justify-content: space-between;

}

.circle-img { width:25%; }
.circle-text { width:70%; }
.circle-img img { max-width: 100%; }

.circles.circle-right .circle-img { order: 2; }
.circles.circle-right .circle-text { order: 1; }

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

    .circles { display: block; }

    .circle-img { width:100%; }
    .circle-text { width:100%; }

    .circle-img img { 

        display: block;
        margin:0 auto 20px auto;
        
     }
    
}

.bio-section-outer { margin-bottom:50px; }

.bio-section-title {

    font-size:70px;
    display: inline-block;
    background-color: #FFF;
    position: relative;
    margin:0;
    padding-right:40px;

}

.bios-bar {

    height:4px;
    width:90%;
    background-color:#717B86;
    margin:0 auto;
    position: relative;
    top:50px;

    moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px; 

}

.bios {

    display: flex;
    flex-wrap: wrap;
 
}


.bio {

    text-align: center;
     /*flex: 1 1 auto; center boxes*/
    margin-bottom:50px;
    width:25%;

}

.bio-inner {

    margin: 0 auto;
    max-width: 237px;

}

.bio h3 { margin:0; }
.bio p { margin:0; }

.bio-img-holder { 
    
    margin:0 auto 20px auto;
    display: block;
    width: 150px;
    height:150px;
    position: relative;

}

.bio img {
    
    width: 100%;
    position: absolute;
    top:0;
    left:0;

}

.bio-img-cover { z-index: 1; }
.bio-img { z-index: 0; }

.bio p.bio-title {

    line-height: 1.4;
    margin-top:20px;

}

.bio .bio-text { display: none; }

.bio a {
    
    color:#61988E;
    text-transform: uppercase;

}

.bio a .fa-chevron-right {

    position:relative;
    top:1px;

}

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

    .bio { width:50%; }

}

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

    .bio-section-title { font-size:35px; }
    .bio { width:100%; }
    .bio-section-title { padding-right:20px; }
    .bios-bar { top:25px; }

}

.blue-col-outer {

    background-color:#05204A;
    padding:50px 0;

}

.blue-cols {

    display:grid;
    grid-template-columns: 50% 50%;
    color:#FFF;
    
}

.blue-col .blue-pad { padding:0 20px; }
.blue-col:nth-child(1) { border-right:1px solid #FFFFFF; }

.blue-cols h1,
.blue-cols h2,
.blue-cols h3
{
    color:#FED766;
}

.blue-cols p { 

    color:#FFF;
    font-weight: 600;

}

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

    .blue-cols { display: block; }
    .blue-col:nth-child(1) { 
        
        border:none; 
        border-bottom:1px solid #FFFFFF;
        padding-bottom:20px;
    
    }

}

#benefits {
    
    display:flex;
    align-items: center;
    justify-content: center; 
    padding:80px 0;
    color:#FFF;
    
}

.benefits { flex: 1; }

#benefits-circle { position: relative; }

#benefits-circle img {

    max-width: 100%;
    position: relative;
    z-index: 0;
    display: block;
    margin: 0 auto;
    
}

#benefits-text {

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items: center;
    justify-content: center; 

}

#benefits-text-inner {

    max-width: 75%;
    margin:0 auto;
    text-align: center;

}

#b-linked-in {

    max-width: 90%;
    margin:0 auto;
    display: block;

}

#benefits h1,
#benefits h2,
#benefits h3
{
    color:#FFFFFF;
    margin:0;

}

#benefits-text-inner p {

    font-weight: 600;
    font-size:25px;
    line-height: 1.6;

}

#benefits-text-inner p.b-disclaimer {

    font-weight: 300;
    font-size:15px;

}

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

    #benefits-text-inner p { font-size:22px; }

}

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

    #benefits { display: block; }

    #b-linked-in { margin-top:50px; }

}

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

    #benefits { padding:40px 0; }

    #benefits-text-inner p { font-size:18px; }
    #benefits-text-inner p.b-disclaimer { font-size:12px; }

}


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

    #benefits-text-inner p { font-size:13px; line-height: 1.2; margin:7px 0; }
    #benefits-text-inner p.b-disclaimer { font-size:10px; line-height: 1.2; }

}

.nf-before-form-content {

    padding:20px 0;

}

.n-form-width {

    width:48% !important;
    display: block;
    float:left;

}

.n-form-width:nth-child(even) {

    float:right;

}

.submit-container { text-align:center; }

.submit-container input {

    background: none !important;
    color:#61988E !important;
    border:4px solid #61988E !important;
    width:150px !important;
    padding:7px 0 6px 0 !important;
    moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -khtml-border-radius: 40px; 
    cursor: pointer;
    text-transform: uppercase;

}

.filter {

    width:410px;
    margin:0 auto 30px auto;

}

.filter span { margin-right:7px; }

.custom-select {

    border:1px solid #E6E6E6;
    padding:15px 30px 15px 20px;
    font-size: 16px;
    line-height: 1;
    background-image:url(assets/images/select-arrow.svg);
    background-repeat: no-repeat;
    background-size:14px auto;
    background-position: 95% center;
    -moz-appearance: none;
    -webkit-appearance: none;
    width:270px;

    moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px; 

}

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

    .n-form-width {

        float:none !important;
        width:100% !important;
    
    }

    .filter { 
        
        width:auto;
        text-align: center;

    }

    .filter span { 
        
        margin:0 0 15px 0; 
        display: block;
        
     }

}

/* Blog/Community */

.posts {

    padding-bottom:30px;

}

.items {

    display:grid;
    grid-template-columns: 33% 33% 33%;
    text-align: center;

}

.item-inner {

    max-width: 90%;
    margin:0 auto;

}

.item {

    margin-bottom:30px;

}

.item-img {

    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;

}

.item-img img {

    width:100%;
    display: block;

}

.item h2 {

    font-size:23px;

}

.item a {

    color: #61988E;
    text-transform: uppercase;

}

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

    .items {

        grid-template-columns: 50% 50%;
  
    }
    
}


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

    .items {

        grid-template-columns: 100%;
  
    }

}


.news {

    display: flex;
    justify-content: space-between;
    margin-bottom:40px;

}

.new-left { width:25%; }
.new-text { width:70%; }
.new-img img { max-width: 100%; }

.new-img {

    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;

}

.new-img img {

    width:100%;
    display: block;

}

.more-link { display: none; }

.new a {
    color: #61988E;
    text-transform: uppercase;
}

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

    .news { display: block; }

    .new-left { width:100%; }
    .new-text { width:100%; }

    .new-img img { 

        display: block;
        margin:0 auto 20px auto;
        
     }
    
}

.sustainability {

    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    color:#FFF;
    padding:40px 0;
    position: relative;
    margin-bottom:12px;

}


.sustain-bg {

    background-image: linear-gradient(to right, rgba(1,17,41,1),rgba(1,17,41,0));
    position: absolute;
    z-index: 0;
    top:0;
    left:0;
    right:0;
    bottom:0;

}

.sustainability .container {

    position: relative;
    z-index: 1;

}

.sustainability h1,
.sustainability h2,
.sustainability h3
{

    color:#FFF;
    margin:0 0 20px 0;

}

.sustainability p {

    color:#FFF;
    margin:0 0 20px 0;

}

.sustain-content { width:80%; }

.sustain-grid {

    display:grid;
    grid-template-columns: 48% 48%;
    grid-gap:4%;
  
}

.sustain-bottom {

    margin-top:20px;

}

.sustain-callout {

    background-color:rgba(97, 152, 142, 0.75);
    moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    -khtml-border-radius: 70px; 
    padding:40px 40px;
    font-size:40px;
    text-align: center;

}

.sustain-callout p {

    font-size:26px;
    font-weight: 500;
    line-height: 1.4;

}

.count {

    background-color:#FFF;
    display: inline-block;
    border:1px solid #CCCCCC;
    width:22px;
    padding:10px 15px;
    color:#000;
    font-weight: 600;
    margin-right:10px;
    font-size:39px;
    line-height: 1;
    text-align: center;

}

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

    .sustain-content { width: 100%; }

    .count { margin-right:5px; }

}

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

    .sustain-grid { display: block; }

    .count {

        padding:10px 8px;
        font-size:22px;
    
    }

    .sustain-callout { 
        
        padding:20px 30px 8px 30px;
        moz-border-radius: 35px;
        -webkit-border-radius: 35px;
        border-radius: 35px;
        -khtml-border-radius: 35px; 
    
    }

    .sustain-callout p { font-size:18px; }
    
}

#president {

    display:grid;
    grid-template-columns: 43% 53%;
    grid-gap:4%;
    padding:80px 0;
  
}

.president-img { 
    
    max-width: 100%;
    display: block;
    margin:0 auto 20px auto;

}

.signature {

    color:#05204A;
    font-size:30px;

}

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

    #president {

        padding:40px 0;
        display: block;

     }

     .signature {

        font-size:20px;

     }

}

.bio-bg {

    display:flex;
    align-items: center;
    justify-content: center; 
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(12, 29, 63, 0.5);
    z-index: 10000;
    display: none;

}

.bio-bg.on { display: flex; }

.bio-pop {

    position: absolute;
    top:0;
    left:0;
    right:0;
    z-index:10001;
    display: none;
    padding-left:30px;
    padding-right:30px;
   
}

.bio-pop.on {

    display: block;

}

.bio-content {

    position: relative;
    padding: 30px;
    background-color: #FFFFFF;
    max-width: 1080px;
    min-width: 860px;
    margin:0 auto;

}

.bio-content-flex {

    display:grid;
    grid-template-columns: 20% 76%;
    grid-gap:4%;

}

.bio-pop-img-holder { 
    
    margin:25px auto 0 auto;
    display: block;
    width: 150px;
    height:150px;
    position: relative;

}

.bio-pop-img-holder img {
    
    width: 100%;
    position: absolute;
    top:0;
    left:0;

}

.bio-pop-img-cover { z-index: 1; }
.bio-pop-img { z-index: 0; }

.bio-content .bio-close {

    position: absolute;
    top:10px;
    right:10px;
    width:25px;
    height:25px;
    font-size: 25px;
    color:#0c1d3f;
    cursor: pointer;

}

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

    .bio-content-flex { display: block; }

    .bio-content { min-width:auto; }

    .bio-pop-i { margin-bottom:20px; }

}

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

    .bio-pop { padding:0; }

}


.contact_map_section {

    position: relative;

}

.contact-left {

    width:350px;
    position:absolute;
    left:0;
    top:0;
    height:100%;

}

.contact-right {

    position: relative;
    margin-left:350px;
    height:800px;

}

#map {

    height: 100%;
    width: 100%;

}

.contact-location-wrap {
    
    padding: 0 40px;

}

.contact-location-wrap ul {

    padding: 0;
    margin: 0;
    
}
.contact-location-wrap ul li {

    padding: 0;
    margin: 0 0 10px 0;
    width: 100%;
    list-style: none;
    display: inline-block;
    cursor: pointer;

}


.contact-location-wrap ul li .marker-link-span {

    display: none;
    background-color: #000;
    
    border-radius: 5px;
    color: #fff;
    float: left;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
    position: relative;
    transition: all 0.3s;
    width: 100%;

}

.contact-location-wrap ul li .marker-link-span .m-pad {

    display: block;
    padding: 15px;
    
}

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

    .contact-left { width:250px; }
    .contact-right { margin-left:250px; }

}

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


   .contact-left { 
       
        width:auto; 
        position: relative;

    }

   .contact-right { 

        margin:0;
        display: none; 
   }

}

.pagination a {

    display: inline-block;
    padding:10px;
    line-height: 1;
    background-color:#f5f5f5;
    width:15px;
    text-align: center;

    moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -khtml-border-radius: 7px; 
    color:#0c1d3f;

}

.pagination a.active,
.pagination a:hover {

    background-color:#0c1d3f;
    color:#FFF;

}

#retail-logos img {

    width:48%;
    display: inline-block;

}

#retail-logos a:nth-child(3) img {

    width:100%;

}