@charset "utf-8";
/* CSS Document */

/*
    font-family: 'Barlow Condensed'; font-weight: 500;
    font-family: 'Barlow Condensed'; font-weight: normal;
    font-family: 'Barlow Condensed'; font-weight: 600;
    font-family: 'Futura'; font-weight: 900;
    font-family: 'futura_t_otdemi'; font-weight: normal;
    font-family: 'futura_t_otbook'; font-weight: normal;
    font-family: 'futura_t_otmedium'; font-weight: normal
*/


/*****--------------------| HEADER |--------------------*****/

header {
	width: 100%;
	float: left;
	clear: both;
	position: relative;
	z-index: 1;
	min-height: 80px;
	border-bottom: 1px solid #fff;
    /*overflow: hidden;*/
}

.headwrap {
	max-width: 1820px;
	width: 96%;
	margin: 0 auto;
	clear: both;
    background: orange
}



.topheader {width: 100%;clear: both;position: relative;z-index: 1}

.searchdiv {width: 160px; float:left; padding: 24px 0 0 0}
.searchdiv input[type="text"]{width: 100%; background: url('../../images/head-search-icon.png')no-repeat 0 0; border: 0px solid #000; border-bottom: 1px solid #807f7f; color: #525150; font-size: 14px;  font-family: 'futura_t_otdemi'; font-weight: normal; padding: 0 0 0 30px; text-transform: uppercase; line-height: 26px;}
.toplinkdiv {width: auto; float:right; padding: 24px 0 0 }

.topheader a.logo {width: 276px;clear: both;position: absolute;z-index: 0;left: 50%;top: 4px;margin:22px 0 0 -133px;}
/*.topheader a.logo:before {position: absolute;z-index: 0;content: '';background: url(../../images/Logo-circle-line.png)no-repeat 0 0;width: 152px;height: 76px;bottom: -1px;left: -1px;}
.topheader a.logo:after {position: absolute;z-index: 0;content: '';background: url(../../images/logo-line-only.png)no-repeat 0 0;width: 1149px;height: 1px;bottom: 73px;left: 50%;margin: 0 0 0 -589px;}*/



a.head_cart span {width: 20px;
    height: 20px;
    background: gold;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #fff;
    right: -13px;
    font-size: 12px;
    text-align: center;
    top: 18px;
    line-height: 15px;}



.navmenu {width: 70%;float: left;left: 50%;top: 0;margin: 26px 0 0 -35%;position: absolute;z-index: 0;}


/* Navigation menu */
a {
	text-decoration: none;
}

div#overlay {
	display: none;
}

a#toggle {
	position: fixed;
	top: 22px;
	left: 10px;
	width: 40px;
	height: 40px;
	background: #000;
	text-align: center;
	color: white;
	display: none;
	transition: all ease-out 0.3s;
	z-index: 100;
	border: 1px solid #fff;
}

a#toggle i {
	position: relative;
	top: 48%;
	transform: translateY(-50%);
	font-size: 20px;
    display: none
}

html.open-menu a#toggle i {display: block}
html.open-menu a#toggle {background: #535353; border: 1px solid rgba(255,255,255,0.2);}

#menu {
	width: 100%;
	float: left;
	display: block;
	text-align: center;
}


main#content {
	padding: 10px;
}

#menu {
	transition: all ease-out 0.3s;
	margin: 0
}



#menu ul {
	margin: 0;
	width: 100%;
	display: block;
}


.menu-links-left {
	float: left;
}

.menu-links-right {
	float: right;
}

#menu ul > div > li {
	display: inline-block;
	/*position: relative;*/
	padding: 0;
	z-index: 1;
	line-height: 0px;
	margin: 0 26px;
	font-size: 14px;
    font-family: 'futura_t_otdemi'; font-weight: normal;
}

#menu ul > div > li a {
    padding: 0 0 31px 0;
    color: #000;
    position: relative;
}

#menu ul > div > li > a:before {
	content: '';
	position: absolute;
	background: #fff;
	height: 3px;
	width: 0;
	left: 0;
	right: 0;
	bottom: 1px;
	visibility: hidden;
	transition: all 0.4s ease 0s;
	margin: 0 auto;
}


#menu ul > div > li.active > a:before {
    visibility: inherit;
    width: 23px;
    height: 10px;
    background: url(../../images/submenu-active--arrow.png)no-repeat 0 0;
    bottom: 0px;
}

#menu ul > div > li:hover > a:before
{
    visibility: inherit;
    width: 23px;
    height: 10px;
    background: url(../../images/submenu-hover--arrow.png)no-repeat 0 0;
    bottom: 0px;
}


#menu ul > div > li a i {
	margin: 0 0 0 20px
}

#menu ul > div > li:first-child {
	margin-left: 0
}

#menu ul > div > li:last-child {
	margin-right: 0
}



#menu ul > div > li ul.sub-menu {
    border-top: 2px solid #000;
    background: #fff;
    position: absolute;
    margin: 0;
    left: -300px;
    top: 54px;
    box-sizing: border-box;
    z-index: 3;
    font-size: 16px;
    padding: 80px 300px 80px;
    width: calc(100% + 600px);
    box-shadow: 1px 1px 30px rgba(0, 0, 0, .3);
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
}
#menu ul > div > li ul.sub-menu:after {content: '';position: absolute;z-index: 0;background: url('../../images/menu-img.png')no-repeat 0 0;width: 448px;height: 286px;right: 300px;bottom: 50px;}


/*#menu ul > div > li ul.sub-menu:before {content: ''; position: absolute;z-index: 0; width: 20px; height: 20px; background: #fff; top: 0; left: 0}*/


#menu ul > div > li:hover ul.sub-menu {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

#menu ul > div > li ul.sub-menu li {
	margin: 0;
	text-align: left;
	line-height: 100%;
}

#menu ul > div > li:hover ul.sub-menu li {
    margin: 0;
    max-width: 250px;
    padding: 0;
    border-bottom: 1px solid #c2c5cd;
}

#menu ul > div > li:hover ul.sub-menu li:hover {border-bottom: 1px solid #ffad1b;}
#menu ul > div > li:hover ul.sub-menu li{position: relative;z-index: 0}
#menu ul > div > li:hover ul.sub-menu li:after {content: '';position: absolute;z-index: 0;width: 7px;height: 11px;background: url(../../images/active-arrow-yellow.png)no-repeat 0 0;bottom: -6px;right: -2px; opacity: 0}
#menu ul > div > li:hover ul.sub-menu li:hover:after {opacity: 1}



#menu ul > div > li ul.sub-menu li a {
	padding: 15px 10px 15px 35px; position: relative;z-index: 0;
	color: #000;
	display: block;
	line-height: 100%;
	text-transform: capitalize;
	font-family: 'Futura';
	font-weight: 900;
       letter-spacing: 0.6px;
}

#menu ul > div > li ul.sub-menu li a:before {content: ''; position: absolute;z-index: 0; background: url('../../images/sbumenu-arrow.png')no-repeat 0 0; width: 20px; height: 20px; top: 13px; left: 0} 
#menu ul > div > li ul.sub-menu li.active a:before, #menu ul > div > li ul.sub-menu li:hover a:before {content: ''; position: absolute;z-index: 0; background: url('../../images/sbumenu-arrow-hover.png')no-repeat 0 0; width: 20px; height: 20px; top: 13px; left: 0}

#menu ul > div > li ul.sub-menu li:hover a,
#menu ul > div > li ul.sub-menu li.active a {
	color: #000;
}

#menu ul > div > li ul.sub-menu .sectiontitle {text-align: left; margin: -25px 0 50px 0; font-size: 34px;}

.aws-container .aws-search-form .aws-form-btn:hover {
    background: transparent !important;
}




/*inner page styles*/
.inrpg_bnr {width: 100%; float:left; clear: both; position: relative;z-index: 0; overflow: hidden;}
.inrpg_bnr:after {content: ''; position: absolute;z-index: 0; width: 100%; height: 1px; background:rgba(255,255,255,0.1); bottom: 45px; left: 0 }
.inrpg_bnr .container{position: relative;z-index: 0;min-height: 260px;padding: 124px 0 0 0;}
.inrpg_bnr .container:before{content: ''; position: absolute;z-index: 0; background: url('../../images/inner-banner-cycle.png')no-repeat 0 0; width: 264px; height: 141px; bottom: 2px; right: 0}
.inrpg_bnr .container:after{content: ''; position: absolute;z-index: -1; background: url('../../images/inner-banner-text.png')no-repeat 0 0; width: 880px; height: 244px; bottom: -30px; left: 50%; margin: 0 0 0 -440px}

.inrpg_bnr .bgimg{max-height: inherit;max-width: inherit;}



.pgtitle {margin: 0; color: #fff;font-family: 'Barlow Condensed';font-weight: 600;font-size: 44px;position: relative;z-index: 0;padding: 0 0 0 20px;letter-spacing: 0.8px;} 
.pgtitle:before {content: '';position: absolute;z-index: 0;width: 2px;background: #fff;height: 36px;left: 0;top: 17px;} 

/*for breadcrumb styles*/
ul.woo_breadcums {width: 100%;padding: 0px;margin: 36px 0 0;}
ul.woo_breadcums li {list-style: none; color: #fff; font-size: 14px; font-family: 'Futura'; font-weight: 900;}
ul.woo_breadcums li a {position: relative;z-index: 0;line-height: 100%;margin: 0 24px 0 0; color: #fa0001;}
ul.woo_breadcums li a:hover {color:#fff; text-decoration: underline}
ul.woo_breadcums li span {padding: 0;}
ul.woo_breadcums li a:after {content: "";position: absolute;z-index: 0;top: 3px;font-size: 16px;right: -19px;background: url('../../images/breadcrumb-arrow.png')no-repeat 0 0;line-height: normal;font-family: 'FontAwesome';width: 7px;height: 10px;}


/*inner page section styles*/
.innerpg_section {width: 100%; float:left; clear: both; padding: 55px 0 70px;}


a.mobilesearch {display: none}

.menuoverlay {
    position: relative;
    transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
}

.menuoverlay:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}












/*responsive styles*/

@media only screen and (min-device-width : 1921px) and (max-device-width : 3841px) {

    
    .navmenu {width: 39%; margin: 26px 0 0 -20%;}
    
}



    @media (max-width: 1900px) {

        
        .searchdiv {width: 160px;}
        .navmenu {width: 1170px; margin: 26px 0 0 -585px;}
        
        #menu ul > div > li ul.sub-menu {left: -100px; padding: 80px 100px 80px; width: calc(100% + 200px);}
        #menu ul > div > li ul.sub-menu:after {right: 100px; bottom: 10px;}
        
        #menu ul > div > li {margin: 0 15px;}

}


    /* Super Large devices (large desktops, less than 1600px) */
    @media (max-width: 1600px) {

                
        .topheader {float: left; margin: 0 0 74px 0;}
        .topheader a.logo {margin: 32px 0 0 -133px;}
        .navmenu {margin: 58px 0 0 -585px;}
        .searchdiv, .toplinkdiv {padding: 10px 0 0 0;}

}

    /* Extra Large devices (large desktops, less than 1440px) */
    @media (max-width: 1440px) {

        .navmenu {margin: 58px 0 0 -575px;width: 1150px;}
        #menu ul > div > li {margin: 0 16px;}

}

    /* Large devices (desktops, less than 1200px) */
    @media (max-width: 1200px) {

        
        .navmenu {margin: 58px 0 0 -475px; width: 950px;}
        #menu ul > div > li {margin: 0 5px;}
        
        .topheader a.logo {margin: 45px 0 0 -100px; width: 200px;}
        ul.woo_breadcums {margin: 36px 0 10px; }

}

    /* Medium devices (tablets, less than 992px) */
    @media (max-width: 992px) {

        
        .topheader a.logo {top: 0;left: 50%;margin: 35px 0 0 -100px;width: 200px;}
        .topheader a.logo:before, .topheader a.logo:after {display: none}
        
        header {min-height: inherit; height: 65px;}
        
        .searchdiv{padding: 20px 0 0 50px; width: 200px;}
          .toplinkdiv {padding: 18px 0px 0 50px;}
        
        #menu ul > div > li:hover > a:before, #menu ul > div > li.active > a:before {display: none}
        
       
        
        
        
        
        
        .bg-wg-modal .wg-modal {
		max-width: 660px;
	}

	.inpg-heading,
	h2 {
		font-size: 22px;
		line-height: 120%;
	}

	.in-pg-section {
		padding: 50px 0 0
	}

	/* for responsive menu */
	a#toggle {display: block;right: auto;left: 10px;top: 14px; background: url(../../images/menu-icon.png)no-repeat 0 0 #fff;}

	main#content {
		margin-top: 65px;
		transition: all ease-out 0.3s;
	}

#menu {
    position: fixed;
    width: 250px;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    background: #535353;
    transform: translateX(-250px);
    float: none;
    display: inherit;}

	#menu ul {
    text-align: left;
    background-color: transparent;
    border: 0px solid #ffffff;
    margin: 20px 0 0 0;
}


	#menu ul li {
		display: block;
		width: 100%;
		padding: 0
	}

	#menu ul li a {
		display: block;
		padding: 12px 15px;
		border-right: 0px solid #666666;
		line-height: normal
	}

	#menu ul li a > i {
		float: none;
		display: block;
		margin: 0px !important;
		position: absolute;
		right: 5px;
		top: 0;
		width: 35px;
		height: 100%;
		text-align: center;
		line-height: 50px;
	}

	#menu ul li ul {
		display: none;
		position: static;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.1);
	}

	#menu ul li:hover > ul {
		display: none;
	}

	#menu ul li:hover > a > i {
		transform: rotateZ(0);
	}

	#menu ul li.open > a {
		background-color: rgba(0, 0, 0, 0.3);
	}

	#menu ul li.open > a > i {
		transform: rotateZ(180deg);
	}

	#menu ul li.open > ul {
		display: block;
		position: relative
	}

	div#overlay {
		display: block;
		visibility: hidden;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		transition: all ease-out 0.3s;
		z-index: 11;
		opacity: 0;
	}

	#menu ul li i.fa.fa-caret-down.mysubmenu {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.2);
		width: 30px;
		height: 30px;
		margin: 7px 0 0 0;
		text-align: center;
		color: #ffffff;
		padding: 8px 0 0;
		cursor: pointer
	}

	#menu ul li i.fa.fa-caret-down.mysubmenu:before {
		content: "\f067";
	}

	#menu ul li.open i.fa.fa-caret-down.mysubmenu:before {
		content: "\f068";
	}

	.open-menu a#toggle .fa-bars:before {
		content: "\f00d"
	}

	html.open-menu {
		overflow: hidden;
	}

	html.open-menu div#overlay {
		visibility: visible;
		opacity: 1;
		width: calc(150%);
		left: 250px;
	}

	html.open-menu a#toggle,
	html.open-menu main#content {
		transform: translateX(250px);
		left: 0;
	}

	html.open-menu nav#menu {
		z-index: 99;
		transform: translateX(0);
	}

	#menu ul li:before,
	#menu ul li:first-child:after {
		display: none
	}

	#menu {
		margin: 0;
	}

	#menu ul > div > li {
		padding: 0; margin: 0
	}
#menu ul > div > li a {
    padding: 18px 15px;
    position: relative;
    color: #fff;
}

#menu ul > div > li ul li a {padding: 15px 15px 15px 35px !important;}

#menu ul > div > li ul.sub-menu {border: 0px solid red; border-bottom: 1px solid rgba(255,255,255,0.1);position: relative;background: transparent;margin: 0;top: 0;padding: 0;width: 100%;position: relative;transform: none;left: 0;top: 0;float: left;}
	#menu ul > div > li ul.sub-menu li a, #menu ul > div > li ul.sub-menu li.active a, #menu ul > div > li ul.sub-menu li:hover a {
		color: #fff;
	}

	#menu ul > div > li:hover ul.sub-menu li {
		border-bottom: 0px solid #ddd;
	}

	#menu ul li:hover > a, #menu ul li.active > a {
		background:#414141;
	}
        
        ul.sub-menu img.bgimg, ul.sub-menu .sectiontitle, #menu ul > div > li ul.sub-menu:after{display: none}
        #menu ul > div > li ul.sub-menu li a:before,
        #menu ul > div > li ul.sub-menu li.active a:before, #menu ul > div > li ul.sub-menu li:hover a:before
        {content: '';position: absolute;z-index: 0;background: #fff;width: 8px;height: 2px;top: 22px;left: 20px;}
        
        #menu ul > div > li:hover ul.sub-menu li:hover:after {display: none}
        #menu ul > div > li:hover ul.sub-menu li:hover {border-bottom: 0px solid #ffad1b;
}
      .topheader{z-index: 0;}

        

}

    /* Small devices (landscape phones, less than 768px) */
    @media (max-width: 768px) {
        
        .pgtitle {font-size: 35px; }
        ul.woo_breadcums li { font-size: 12px;}
         .inrpg_bnr:after { content: none; }
}

    /* Extra small devices (portrait phones, less than 576px) */
    @media (max-width: 575px) {
        
        a.mobilesearch {display: block;width: 40px;height: 40px;margin: 15px 0 0 45px;float: left;text-align: center;line-height: 33px;}
        div.searchdiv {display: none}
        
         .pgtitle {font-size: 32px;}
        .inrpg_bnr:after {bottom: 50px; content: none; }
        .pgtitle:before {height: 22px;}
        ul.woo_breadcums {margin: 52px 0 10px;}
        
         .popupmain {
             width: 90%;
             height: auto;
             background: #fff;
             padding: 60px 40px;
         }

         .popupmain .lbl {
             color: #000;
             text-align: center;
             text-align: left;
             width: 100%;
             line-height: 100%;
             font-family: 'Barlow Condensed';
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin: 0 0 20px !important;
         }

         .popup_close_btn {
             position: absolute;
             top: 3px;
             right: 3px;
             background:#f40706;
             width: 40px;
             height: 40px;
             text-align: center;
             line-height: 40px;
         }

         .popup_close_btn img {
             filter: brightness(100);
         }
          .innerpg_section { padding: 30px 0;}
        
             .toplinkdiv {
    padding: 18px 10px 0 50px;
}
        a.head_cart span {  top: 12px;  right: -2px;}

}

@media (max-width: 480px) {

        .topheader a.logo {margin: 13px 0 0 -100px;}
    .topheader a.logo {margin: 18px 0 0 -65px; width: 130px;}
    
}