/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
body {
    font-family: 'Source Sans Pro', sans-serif;
}

* {
    box-sizing: border-box; margin:0; padding:0
}

a {
    color: #333;
}*/
/*@font-face {
	font-family: 'Ionicons';
	src: url(Ionicons.eot);
	src: url(Ionicons.eot?#iefix) format('embedded-opentype'), url(Ionicons.woff) format('woff'), url(Ionicons.ttf) format('truetype'), url(Ionicons.svg#Ionicons) format('svg');
	font-weight: 900;
	font-style: normal
}*/
/*.clear{ clear:both}

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
    font-family: 'gibsonlight';
    src: url('gibsonlight-webfont.woff2') format('woff2'),
         url('gibsonlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gibsonregular';
    src: url('gibsonregular-webfont.woff2') format('woff2'),
         url('gibsonregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gibsonsemibold';
    src: url('gibsonsemibd-webfont.woff2') format('woff2'),
         url('gibsonsemibd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/*Variables*/
:root {
  --extLightBlue:#eef1ff;
  --lightBlue:#d6dcf5;
  --veryLightBlue:#e2e6f8;
  --midBlue:#a8b1da;
  --blueDeep:#3b4d9f;
  --blue:#000b3d;
  --deepGeen:#278164;
  --green:#3fa182;
  --orange:#f15700;
  --yellow:#f39010;
  --pitch:#f45c5c;
  --blueGray:#cbd5e3; /*For border*/
  --blueGrayLight:#d6dcf5;
  --font-color:#535c82;
  --font-colorDbg:#ccd1ea;
  --white:#fff;
  
  
  --font-f70B:70px/80px 'gibsonsemibold';
  --font-f70R:70px/80px 'gibsonregular';
  --font-f60B:60px/70px 'gibsonsemibold';
  --font-f60R:60px/70px 'gibsonregular';
  --font-f50B:50px/55px 'gibsonsemibold';
  --font-f50R:50px/55px 'gibsonregular';
  --font-f40B:40px/45px 'gibsonsemibold';
  --font-f35B:35px/45px 'gibsonsemibold';
  --font-f35R:35px/45px 'gibsonregular';
  --font-f30B:30px/35px 'gibsonsemibold';
  --font-f30R:30px/35px 'gibsonregular';
  --font-f25B:25px/32px 'gibsonsemibold';
  --font-f25R:25px/32px 'gibsonregular';
  --font-f20B:20px/26px 'gibsonsemibold';
  --font-f20R:20px/26px 'gibsonregular';
  --font-f18B:18px/22px 'gibsonsemibold';
  --font-f18R:18px/22px 'gibsonregular';
  --font-f16B:16px/22px 'gibsonsemibold';
  --font-f16R:16px/22px 'gibsonregular';
  --font-f15B:15px/20px 'gibsonsemibold';
  --font-f15R:15px/20px 'gibsonregular';
  --font-f14B:14px/16px 'gibsonsemibold';
  --font-f14R:14px/16px 'gibsonregular';
  --font-f13B:13px/16px 'gibsonsemibold';
  --font-f13R:13px/16px 'gibsonregular';
}


/*Header start*/
.fullHeaderSec{ position:fixed; top:0; width:100%; z-index:999;}
.logoHeaderFull{ width:100%; background-color:var(--blue); padding:10px 0; position:relative; z-index:2}
.logoHeaderFull .logoHeader{ width:1040px; margin:0 auto}
.logoHeaderFull .logoHeader .logoSec{ width:170px; float:left}
.logoHeaderFull .logoHeader .logoSec img{ width:100%}
.logoHeaderFull .logoHeader .callSec{ float:right}
.logoHeaderFull .logoHeader .callSec h2{ text-align:right; margin-bottom:0}
.logoHeaderFull .logoHeader .callSec h2 a{font:var(--font-f20B); color:#ffde00; margin-bottom:0}
.logoHeaderFull .logoHeader .callSec p{text-align:right; font:var(--font-f13R) !important; color:#fff}
.logoHeaderFull .logoHeader .callSec p a{font:var(--font-f13R) !important; color:#fff}





/*Menu start*/
.menu-container {
    width: 100%;
    margin: 0 auto;
    background: #006cff; position:relative
}
.menu-container .menu{ width:1040px; margin:0 auto}

.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;
    box-sizing: border-box;
}

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

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

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

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

.menu > ul > li:hover {
    background: var(--extLightBlue);
	color:var(--blue)
}
.menu > ul > li:hover a{ color:#333}

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

.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(--white);
    padding:1px 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.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:1040px; margin:0 auto; position:relative; float:none}
.baseDd .eachBase{ width:30%; float:left; margin-right:3%}
.baseDd .eachBase img{ width:100%}
.baseDd .eachBase h2{ font:var(--font-f14B); padding-bottom:3px; margin-bottom:10px; border-bottom:1px solid var(--midBlue); float:left; color:var(--blueDeep)}
.baseDd .eachBase ul li{ list-style:none}
.baseDd .eachBase a{ width:95%; padding:4px 0 4px 12px; background:url(../images/submenuArrow.png) no-repeat left 8px; float:left; border:none; font:var(--font-f14R); color:var(--font-color);}
.baseDd .eachBase ul li a{ color:var(--font-color);}
.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:var(--white); font: var(--font-f14R); 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:var(--orange); text-decoration:underline}
.menu-mobile{ color:var(--white); float:left}



/*Footer start*/
.footerSec{ width:1040px; margin:0 auto; padding:80px 0; background-color:var(--white); position:relative; z-index:89}
.footerSec .eachFoo{ width:22%; float:left; padding-right:3%; margin-bottom:50px}
.footerSec .eachFoo h3{font:var(--font-f16B); color:var(--blue); padding:0 0 5px; border-bottom:1px solid var(--blueGrayLight); margin-bottom:20px}
.footerSec .eachFoo ul li a{ font:var(--font-f14R); margin-bottom:10px; float:left; width:100%; color:var(--font-color)}
.footerSec .eachFoo ul li a:hover{ text-decoration:underline}
.copyRightFoo{ width:1040px; margin:0 auto; border-top:1px solid var(--blueGrayLight); padding-top:60px;}
.copyRightFoo p, .copyRightFoo p span{ font:var(--font-f14R); margin-bottom:5px; color:var(--font-color)}
.copyRightFoo a{ font:var(--font-f14R); color:var(--font-color); text-decoration:underline}
.copyRightFoo .extFooSpc{ margin-top:20px}
.copyRightFoo .regComp{ border-right:1px solid var(--blueGrayLight); padding-right:20px; margin-right:20px}
.copyRightFoo .leftFooCr{ float:left}
.copyRightFoo .rightFooCr{ float:right}
/*Footer end*/

/*Foo Order By Phone*/
.helpingSec{ background-color:var(--blue); padding:80px 0; position:relative; z-index:90}
.helpingSec .helping{ width:1040px; margin:0 auto; text-align:center}
.helpingSec .helping h2{font:var(--font-f50B); color:var(--white); margin-bottom:20px}
.helpingSec .helping p{font:var(--font-f18R); color:var(--white); width:60%; margin:0 auto 60px}
.helpingSec .helping span a{font:var(--font-f20B); color:var(--white); background:url(../images/nxNhIcon.png) no-repeat left center var(--green); padding:19px 50px 18px 120px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.helpingSec .helping .hdUnLine { width:150px; margin:0 auto 30px; background-color:var(--green)}





/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 1050px) {
	.logoHeaderFull .logoHeader, .menuContainer{ width:980px}
}

@media only screen and (max-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; padding:10px 0}
.menu-container .menu .menuSec{ position:absolute !important; top:50px; width:100%; background-color:var(--deepGeen); z-index:100}
.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}
.footerSec, .copyRightFoo, .helpingSec .helping{ width:768px}
.menu-mobile{ padding:10px 0}
.clientLogin{ top:0}
.logoHeaderFull .logoHeader, .menuContainer{ width:768px}
.menu-container .menu{ padding:10px 0 0}
}

@media only screen and (max-width: 768px) {
.baseDd .eachBase{ width:100%}
.menu-container .menu{ width:600px}
.baseDd .eachBase{ margin-bottom:30px}
.footerSec, .copyRightFoo, .helpingSec .helping{ width:600px}
.footerSec .eachFoo{ width:45%;}
.helpingSec .helping h2{ font:var(--font-f40B)}
.logoHeaderFull .logoHeader, .menuContainer{ width:600px}
}

@media only screen and (max-width: 600px) {
.menu-container .menu, .logoHeaderFull .logoHeader, .menuContainer{ width:90%}
.logoHeaderFull .logoHeader .callSec p{ display:none}
.logoHeaderFull .logoHeader .callSec h2 a{ font:var(--font-f18B)}
.logoHeaderFull .logoHeader, .menuContainer{ width:90% !important}
.footerSec{ width:90%; margin:0 auto}
.copyRightFoo{ width:100%}
.footerSec .eachFoo, .helpingSec .helping{ width:90%;}
.helpingSec{ padding:40px 0 80px}
.logoHeaderFull .logoHeader .callSec{ margin-top:13px}
.fullHeaderSec{ position:static}
.copyRightFoo p, .copyRightFoo p span{margin-bottom:25px}
.helpingSec .helping h2{ font:var(--font-f30B)}
.helpingSec .helping p{ width:100%}
}