@charset "utf-8";
/*Variables*/
:root {
  --primaryCol:#284942;
  --primarySecCol:#1c413a;
  --primarySecBorCol:#4BA390;
  --secondaryCol:#BBED55;
  --secondHeadCol:#1F2937;
  --fontCol:#4E4B66;
  --fontColLgt:#bdc2cf;
  --fontColOth:#a7adbb;
  --SecFontCol:#9FB9B3;
  --white:#fff;
  --deepBorder:#6b687a;
  --orangeCol:#f76f20;
  --grayLine:#E5E5E5;
  --midBorder:#d1cfcf;
  --line:#5F847C;
  
  
  
  --font-f100B:400 100px/110px "DM Sans", serif;
  
  --font-f60B:500 60px/70px "DM Sans", serif;
  
  --font-f45R:400 45px/50px "DM Sans", serif;
  --font-f45M:500 45px/50px "DM Sans", serif;
  --font-f45B:700 45px/50px "DM Sans", serif;
  
  --font-f40R:400 40px/50px "DM Sans", serif;
  --font-f40M:500 40px/50px "DM Sans", serif;
  --font-f40B:700 40px/50px "DM Sans", serif;
  
  --font-f35R:400 35px/40px "DM Sans", serif;
  --font-f35M:500 35px/40px "DM Sans", serif;
  --font-f35B:700 35px/40px "DM Sans", serif;
  
  --font-f30R:400 30px/40px "DM Sans", serif;
  --font-f30M:500 30px/40px "DM Sans", serif;
  --font-f30B:700 30px/40px "DM Sans", serif;
  
  --font-f25R:400 25px/35px "DM Sans", serif;
  --font-f25M:500 25px/35px "DM Sans", serif;
  --font-f25B:700 25px/35px "DM Sans", serif;
  
  --font-f20R:400 20px/30px "DM Sans", serif;
  --font-f20M:500 20px/30px "DM Sans", serif;
  --font-f20B:700 20px/30px "DM Sans", serif;
  
  
  --font-f18R:400 18px/25px "DM Sans", serif;
  --font-f18M:500 18px/25px "DM Sans", serif;
  --font-f18B:700 18px/25px "DM Sans", serif;
  
  --font-f16R:400 16px/22px "DM Sans", serif;
  --font-f16M:500 16px/22px "DM Sans", serif;
  --font-f16B:700 16px/22px "DM Sans", serif;
  
  --font-f14R:400 14px/20px "DM Sans", serif;
  --font-f14M:500 14px/20px "DM Sans", serif;
  --font-f14B:700 14px/20px "DM Sans", serif;
  
  --font-f12R:400 12px/16px "DM Sans", serif;
  --font-f12M:500 12px/16px "DM Sans", serif;
  --font-f12B:700 12px/16px "DM Sans", serif;
  
  --font-f10R:400 10px/16px "DM Sans", serif;
  --font-f10M:500 10px/16px "DM Sans", serif;
  --font-f10B:700 10px/16px "DM Sans", serif;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.1rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu > ul {

    list-style: none;
    padding: 0;
   /* position: relative;*/
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}


.headSec{ position:fixed; width:100%; border-bottom:1px solid var(--deepBorder); padding:10px 0; z-index:100; top:0}
.headSec .header{ width:1200px; margin:0 auto}
.headSec .header .logo{ float:left; margin-right:30px}
.headSec .header .logo img{ width:70%}
.headSec .header .headRegSec{ float:right; margin-top:5px}
.headSec .header .headRegSec a{ margin:0 0 0 10px; display:inline-block; color:var(--secondaryCol); text-decoration:none; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; font:var(--font-f14R);}
.headSec .header .headRegSec a.hdRegBtn{ padding:10px 20px; background-color:var(--secondaryCol); color:var(--primaryCol); }
.headSec .header .headRegSec a.hdCallBtn{ padding:10px 20px; border:1px solid var(--secondaryCol); color:var(--secondaryCol);}


.headSec .header .menu{ float:left;}
.headSec .header .menu ul li{ display:inline}
.headSec .header .menu ul li a{ color:var(--white); font:var(--font-f14R); text-decoration:none;}
.headSec .header .menu ul li a:hover{ text-decoration:none}
.headSec .header .menu ul li i{ margin-left:7px}
.headSec .header .menu ul li ul li a{color:var(--primaryCol)}

.menu > ul > li {
    float: left;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 18px 20px;
    display: block; font:var(--font-f14R); cursor:auto
}
.menu > ul > li > ul > li a{ cursor:pointer}


.menu > ul > li > ul {
    display: none;
    width: 100%;
    background-color: var(--white);
    padding: 40px 0;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box; border-bottom:1px solid var(--midBorder)
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 100%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: var(--primaryCol);
    padding:1px 0;
    width: 95%;
    display: block;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}




.baseDd{ width:1200px; margin:0 auto; position:relative; float:none}
.baseDd .eachBase{ width:30%; float:left; margin-right:3%}
.baseDd .eachBase h2{font:var(--font-f16B); padding-bottom:3px; margin-bottom:10px; float:left; color:var(--primaryCol)}
.baseDd .eachBase ul li{ list-style:none; margin-bottom:3px}
.baseDd .eachBase a{ width:95%; padding:3px 0 3px 12px; background:url(../images/submenuArrow.png) no-repeat left 9px; float:left; border:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:normal}
.baseDd .eachBase h2.downSec{ margin-top:30px}
.menu-container .menu .menuSec{ float:left; position:static}
.clientLogin{ float:right}
.clientLogin .menuReview{ float:left; padding-right:20px; margin:12px 20px 0 0; border-right:1px solid #777}
.clientLogin .menuReview a{ background-image:none; margin:0}
.clientLogin a{ color: #fff; font-size: 12px; font-family: Arial, Helvetica, sans-serif; background: url(../images/lock.png) left top no-repeat; padding-left: 15px; text-decoration: none; margin-top: 20px; float: left;}
.baseDd .eachBase ul li a.compPack{ color:#b82a2a; background:none; padding:10px 20px; border:1px solid var(--primaryCol); float:left; width:auto; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin-top:10px;}
.menu-mobile{ color:#fff; float:left}
.abtMenImg, .abtMenLnk{ float:left; margin-right:20px; width:30%; margin-right:5%}
.abtMenLnk li a{width: 95%;
    padding: 3px 0 3px 12px !important;
    background: url(../images/submenuArrow.png) no-repeat left 9px;
    float: left;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    font-weight: normal;
}
.abtMenLnk h2, .abtMenImg h2{ font:var(--font-f16B); margin-bottom:10px}
.abtMenImg img{ margin-bottom:15px}




.mFooter{ position:relative; z-index:95; background-color:var(--white)}
.mFooter .fooLogoFull{ width:100%; background-color:var(--primaryCol); padding:30px 0}
.mFooter .fooLogoFull .fooLogoSec{ width:1200px; margin:0 auto}
.mFooter .fooSec{  margin:70px auto; width:1200px}
.mFooter .fooSec .fooCatg{ width:13%; padding-right:3%; float:left}
.mFooter .fooSec .fooCatg h2{font:var(--font-f20B); color:var(--primaryCol);}
.mFooter .fooSec .fooCatg ul li{ margin-bottom:10px; list-style:none}
.mFooter .fooSec .fooCatg ul li a{font:var(--font-f16B); color:var(--fontCol); text-decoration:none}
.mFooter .fooSec .fooCatg ul li a:hover{color:var(--primaryCol); text-decoration:underline}
.mFooter .fooLogoFull .fooLogoSec .copyRight{ display:flex}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach{ width:33%}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach.social{ text-align:center}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach.terms{ text-align:right}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach ul li{ display:inline-block; padding:0 10px}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach ul li a{font:var(--font-f14R); color:var(--white); text-decoration:none}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach ul li a:hover{color:var(--secondaryCol); text-decoration:underline}
.mFooter .fooLogoFull .fooLogoSec .copyRight .crEach p{font:var(--font-f14R); color:var(--white);}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */


@media screen and (max-width:1200px) {
.headSec .header, .mFooter .fooLogoFull .fooLogoSec, .mFooter .fooSec, .mFooter .fooLogoFull .fooLogoSec, .mFooter .fooSec{ width:980px;}
.menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }

.menu-container .menu{ width:768px; position:relative}
.menu-container .menu .menuSec{ position:absolute !important; top:55px; width:100%; background-color:#444}
.menu-mobile{ padding:20px 0 0 0}
.menu > ul > li a{ padding:10px 0 10px 20px}
.clientLogin{ position:absolute; right:0}
.menu > ul > li > ul{ background-color:#efefef; padding:30px 20px}
.baseDd{ width:100%}
.baseDd{ overflow-Y:scroll; height:200px}
}


@media only screen and (max-width: 980px) {
	
	.headSec .header, .mFooter .fooLogoFull .fooLogoSec, .mFooter .fooSec, .mFooter .fooLogoFull .fooLogoSec{ width:768px;}
    
}

@media only screen and (max-width: 768px) {
.headSec .header, .mFooter .fooLogoFull .fooLogoSec, .mFooter .fooSec, .mFooter .fooLogoFull .fooLogoSec{ width:600px;}
.baseDd .eachBase{ width:100%}
.menu-container .menu{ width:600px}
.baseDd .eachBase{ margin-bottom:30px}
.mFooter .fooSec .fooCatg{ width:30%; margin-bottom:30px}
}

@media only screen and (max-width: 600px) {
.headSec .header, .mFooter .fooLogoFull .fooLogoSec, .mFooter .fooSec, .mFooter .fooLogoFull .fooLogoSec{ width:90%;}
.menu-container .menu{ width:100%}
.menu-mobile{ padding-left:5%}
.clientLogin{ right:5%}

}
@media only screen and (max-width: 480px) {
	.mFooter .fooSec .fooCatg{ width:100%;}
}