/* * Plugin: Web Slide Navigation System * Demo Link: http://webslidemenu.uxwing.com/ * Author: UXWing * License: http://codecanyon.net/licenses/standard */  /*-------------------------------------------------------------------------- [Table of contents] 01 Base CSS 02 Desktop CSS 03 Tab CSS 04 Mobile CSS 05 Additional Themes (Optionnal) --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- |  01  Base CSS --------------------------------------------------------------------------*/ .wsdownmenu * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; -webkit-font-smoothing: antialiased; } .wsdownmenu html, .wsdownmenu body, .wsdownmenu iframe, .wsdownmenu h1, .wsdownmenu h2, .wsdownmenu h3, .wsdownmenu h4, .wsdownmenu h5, .wsdownmenu h6 { margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline; font-weight: normal; font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: subpixel-antialiased; font-smoothing: antialiased; font-smooth: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased !important; font-smoothing: subpixel-antialiased !important; font-smooth: subpixel-antialiased; } .wsdownmenu .cl { clear: both; } .wsdownmenu .clearfix:before, .wsdownmenu .clearfix:after { content: ""; display: table; } .wsdownmenu .clearfix:after { clear: both; } .wsdownmenu .clearfix { zoom: 1; } .wsdownmenu img, object, embed, video { border: 0 none; max-width: 100%; } .wsdownmenu a:focus { outline: none !important; } .wsdownmenu:before, .wsdownmenu:after { content: ""; display: table; } .wsdownmenu:after { clear: both; } .wsdownmenu textarea { font-family: Helvetica, Arial, sans-serif; } .wsdownmenu input[type="submit"] { cursor: pointer; font-family: Helvetica, Arial, sans-serif; } .wsdownmenu input[type="button"] { cursor: pointer; font-family: Helvetica, Arial, sans-serif; } /*-------------------------------------------------------------------------- |  02 Desktop CSS --------------------------------------------------------------------------*/ .wsmobileheader { display: none; } .overlapblackbg { display: none; } .wsdownmenu { font-family: Helvetica, sans-serif; color: #fff; position: relative; font-size: 15px; padding: 0px; margin: 0px auto; width: 100%; max-width: 1200px; background-color: #ffffff; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .wsdownmenu-list { text-align: left; margin: 0 auto 0 auto; width: 100%; display: table; padding: 0px; } .wsdownmenu-list > li { text-align: center; display: table-cell; } .wsdownmenu-list li:first-child a { -webkit-border-radius: 4px 0px 0px 0px; -moz-border-radius: 4px 0px 0px 0px; border-radius: 4px 0px 0px 0px; } .wsdownmenu-list li:last-child a { -webkit-border-radius: 0px 4px 0px 0px; -moz-border-radius: 0px 4px 0px 0px; border-radius: 0px 4px 0px 0px; border-right: 0px solid; } .wsdownmenu-list > li > a .fa { display: inline-block; font-size: 14px; line-height: inherit; margin-right: 0px; } .wsdownmenu-list > li > a .fa.fa-angle-down { color: #B3B3B3; margin-left: 9px; } .wsdownmenu-list li ul li a .fa.fa-angle-double-right { font-size: 12px; margin: 0 3px 0 -4px; } .wsdownmenu-list li a .arrow:after { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid #b3b3b3; content: ""; float: right; height: 0; margin: 0 0 0 9px; position: absolute; text-align: right; top: 22px; width: 0; } .wsdownmenu-list > li > a { display: block; background-color: #fff; color: #424242; padding: 0px 14px; line-height: 48px; border-right: 1px solid rgba(0,0,0,0.10); text-decoration: none; position: relative; } .wsdownmenu-list li a:hover .arrow:after { border-top-color: #b3b3b3 } .wsdownmenu-list li a.active .arrow:after { border-top-color: #b3b3b3 } .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #b3b3b3 } .megamenu iframe { width: 100%; margin-top: 10px; min-height: 200px; } .megamenu video { width: 100%; margin-top: 10px; min-height: 200px; } .megamenu { width: 100%; left: 0px; position: absolute; top: 48px; color: #000; z-index: 1000; margin: 0px; text-align: left; padding: 14px; font-size: 15px; border: solid 1px #eeeeee; background-color: #fff; opacity: 0; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; visibility:hidden; } .megamenu .title { border-bottom: 1px solid #CCC; font-size: 14px; padding: 9px 5px 9px 0px; font-size: 17px; color: #424242; margin-bottom: 7px; text-align: left; height: 39px; } .newadimg img { width: 100%; } .link-list li { display: block; text-align: center; white-space: nowrap; text-align: left; } .link-list li a { line-height: 18px; border-right: none; text-align: left; padding: 6px 0px; background: #fff !important; background-image: none !important; color: #666666; border-right: 0 none !important; display: block; border-right: 1px solid #e7e7e7; background-color: #fff; color: #424242; } .link-list .fa { font-size: 11px; } .megacollink { width: 23%; float: left; margin: 0% 1%; padding: 0px; } .megacollink li { display: block; text-align: center; white-space: nowrap; text-align: left; } .megacollink li a { line-height: 18px; border-right: none; text-align: left; padding: 8px 0px; background: #fff !important; background-image: none !important; color: #666666 !important; border-right: 0 none !important; display: block; border-right: 1px solid #e7e7e7; background-color: #fff; color: #424242; } .megacollink .fa { font-size: 11px; } .megacolimage { width: 31.33%; float: left; margin: 0% 1%; } .typographydiv { width: 100%; margin: 0% 0%; } .typographylinks { width: 25%; float: left; margin: 0% 0%; } .typographylinks ul { padding: 0px; } .mainmapdiv { width: 100%; display: block; margin: 0% 0%; } .wsdownmenu-list .ad-style { width: 28%; float: right; } .wsdownmenu-list .ad-style a { border: none !important; padding: 0px !important; margin: 0px !important; line-height: normal !important; background-image: none !important; } .wsdownmenu-list .megamenu li:hover>a { background: transparent !important; } .wsdownmenu-list .megamenu li a:hover { background: transparent !important; text-decoration: underline; } .wsdownmenu-list .megamenu li .fa { margin-right: 5px; text-align: center; width: 18px; } .mrgtop { margin-top: 15px; } .show-grid div { padding-bottom: 10px; padding-top: 10px; background-color: #dbdbdb; border: 1px solid #e7e7e7; color: #6a6a6a; margin: 2px 0px; } .halfmenu { width: 40%; right: auto !important; left: auto !important; } .halfmenu .megacollink { width: 48%; float: left; margin: 0% 1%; } .halfdiv { width: 35%; right: 0px !important; left: auto; } .menu_form { width: 100%; display: block; } .menu_form input[type="text"] { width: 100%; border: 1px solid #e2e2e2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #000; font-size: 13px; padding: 8px 5px; margin-bottom: 8px; } .menu_form textarea { width: 100%; border: 1px solid #e2e2e2; border-radius: 5px; color: #000; font-size: 13px; padding: 8px 5px; margin-bottom: 8px; min-height: 122px; } .menu_form input[type="submit"] { width: 25%; display: block; height: 28px; float: right; border: solid 1px #ccc; margin-right: 15px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .menu_form input[type="button"] { width: 25%; display: block; height: 28px; float: right; border: solid 1px #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .megamenu .left.carousel-control { padding-top: 20%; } .megamenu .right.carousel-control { padding-top: 20%; } .carousel-inner .item img { width: 100%; } .megamenu .carousel-caption { bottom: 0px; background-color: rgba(0,0,0,0.7); font-size: 13px; height: 31px; left: 0; padding: 7px 0; right: 0; width: 100%; } .wsdownmenu-submenu { position: absolute; top: 48px; z-index: 1000; margin: 0px; padding: 2px; min-width:220px; border: solid 1px #eeeeee; background-color: #fff; opacity: 0; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; visibility:hidden; } .wsdownmenu-submenu li a { background: #fff !important; background-image: none !important; color: #666666 !important; border-right: 0 none !important; text-align: left; display: block; line-height: 22px; padding: 6px 12px; text-transform: none; font-size: 13px; letter-spacing: normal; border-right: 0px solid; } .wsdownmenu-submenu li { position: relative; margin: 0px; padding: 0px; } .wsdownmenu-list li:hover .wsdownmenu-submenu { display: block; } .wsdownmenu-list .wsdownmenu-submenu .wsdownmenu-submenu-sub { min-width: 220px; position: absolute; left: 100%; top: 0; margin: 0px; padding: 0px; opacity: 0; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.4s, opacity 0.4s; -ms-transition: -ms-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; visibility:hidden; } .wsdownmenu-list .wsdownmenu-submenu li:hover .wsdownmenu-submenu-sub { opacity: 1; list-style: none; padding: 2px; border: solid 1px #eeeeee; background-color: #fff; } .wsdownmenu-list .wsdownmenu-submenu li:hover .wsdownmenu-submenu-sub { display: block; } .wsdownmenu-list .wsdownmenu-submenu .wsdownmenu-submenu-sub .wsdownmenu-submenu-sub-sub { min-width: 220px; position: absolute; left: 100%; top: 0; margin: 0px; padding: 0px; opacity: 0; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -o-transition: -o-transform 0.4s, opacity 0.4s; -ms-transition: -ms-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; visibility:hidden; } .wsdownmenu-list .wsdownmenu-submenu .wsdownmenu-submenu-sub li:hover .wsdownmenu-submenu-sub-sub { opacity: 1; list-style: none; padding: 2px; border: solid 1px #eeeeee; background-color: #fff; } .wsdownmenu-submenu li { position: relative; padding: 0px; margin: 0px; display: block; } .wsdownmenu-click { display: none; } .wsdownmenu-click02 { display: none; } .wsdownmenu-list li:hover>a { background-color: rgba(0,0,0,0.08) !important; text-decoration: none; } .wsdownmenu-list > li > a:hover { background-color: rgba(0,0,0,0.08) !important; text-decoration: none; } .wsdownmenu-list > li > a.active { background-color: rgba(0,0,0,0.08) !important; text-decoration: none; } .wsdownmenu-submenu > li > a:hover { background-color: rgba(0,0,0,0.08) !important; border-radius: 0px!important; text-decoration: none; text-decoration: none; } .typography-text { padding: 0px 0px; font-size: 15px; } .typography-text p { text-align: justify; line-height: 24px; color: #656565; } .typography-text ul li { display: block; padding: 2px 0px; line-height: 22px; } .typography-text ul li a { color: #656565; } .hometext { display: none; } .wsdownmenu-submenu .fa { margin-right: 7px; float: right; margin-top: 4px; } .wsdown-menuopner { display: none !important; } /*Label None*/ .wsdownopener{display:none;} .wsdownopener-sub{display:none;} /*Check Box None*/ .wsdownmenu .wsdexpander {display: none;} /*-------------------------------------------------------------------------- |  03 Tab CSS --------------------------------------------------------------------------*/  @media only screen and (min-width:767px) and (max-width:1023px) { .wsdownmenu-list > li > a > .fa { display: none !important; } .hometext { display: block !important; } .wsdownmenu { font-size: 13px !important; } .wsdownmenu-list li a { white-space: nowrap !important; padding-left: 4px !important; padding-right: 4px !important; } .megacollink { width: 48%; margin: 1% 1%; } .typographylinks { width: 48%; margin: 1% 1%; } } @media only screen and (min-width: 768px) and (max-width:1200px) { .wsdownmenu-list li a .arrow:after { display: none !important; } .wsdownmenu-list > li > a .fa { display: none !important; } .hometext { display: block; } } @media only screen and (min-width: 768px) { .wsdownopener{ display:none; } .wsdownmenu-list li > .wsdownmenu-submenu { transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); visibility: hidden; } .wsdownmenu-list li:hover > .wsdownmenu-submenu { transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; visibility: visible; } .wsdownmenu-submenu li > .wsdownmenu-submenu-sub { transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); visibility: hidden; } .wsdownmenu-submenu li:hover > .wsdownmenu-submenu-sub { transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; visibility: visible; } .wsdownmenu-submenu-sub li > .wsdownmenu-submenu-sub-sub { transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); visibility: hidden; } .wsdownmenu-submenu-sub li:hover > .wsdownmenu-submenu-sub-sub { transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; visibility: visible !important; } .wsdownmenu-list li > .megamenu { transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -webkit-transform: rotateX(-75deg); visibility: hidden; } .wsdownmenu-list li:hover > .megamenu { transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; visibility: visible; } .wsdownmenu-list li:hover .megamenu { opacity: 1; } } /*-------------------------------------------------------------------------- |  04 Mobile CSS --------------------------------------------------------------------------*/  @media only screen and (max-width: 767px) { .wsdownopener-sub{display:block;} /*Main UL*/ .wsdownmenu > input:checked + .wsdown-mobile{display: block;} /*Mega Menu*/ .wsdownmenu > ul > li > input:checked + .megamenu{display: block; visibility:visible; opacity:1; position:static; top:0px;} .wsdownmenu > ul > li > input{display: none;} /*Dropdown Menu*/ .wsdownmenu > ul > li >  input:checked + .wsdownmenu-submenu{display: block; visibility:visible; opacity:1; position:static; top:0px;} .wsdownmenu > ul > li > .wsdownmenu-submenu > li  input:checked + .wsdownmenu-submenu-sub{display: block; visibility:visible; opacity:1; position:static; top:0px;} .wsdownmenu > ul > li > .wsdownmenu-submenu > li > .wsdownmenu-submenu-sub > li input:checked + .wsdownmenu-submenu-sub-sub{display: block; visibility:visible; opacity:1; position:static; top:0px;} .wsdownopener{width:100%; display: block; background-color: #424242; padding: 0 20px; color: #FFF; font-size:17px; line-height:54px; text-decoration: none; border: none; border-bottom:solid 1px #fff; margin:0px;} .wsdownopener i{ margin-right:5px;} .wsdownopener-sub{width:100%; position:absolute; z-index:1000; height:50px; background-color:transparent; text-decoration: none; border:none;} .wsdownopener:hover{background-color:#000000;} .halfdiv{ width:100%; } .wsdownmenu-list > li { display: block; text-align: left; clear: both; } .wsdownmenu-list > li > a .fa.fa-angle-down { float: right; } .wsdownmenu-list li a .arrow:after { right: 10px; } .wsdown-mobile > li > a { border-bottom: 1px solid rgba(0, 0, 0, 0.18); border-right: none !important; } .hometext { display: inline-block; } .wsdownmenu-submenu { top: 0px; } .halfmenu { width: 100%; } .wsdownmenu-list .wsdownmenu-submenu .wsdownmenu-submenu-sub { left: 0px; } .wsdownmenu-list .wsdownmenu-submenu .wsdownmenu-submenu-sub .wsdownmenu-submenu-sub-sub { left: 0px; } .wsdownmenu { width: 94%; margin: 3% 3%; border: 1px solid #e0e0e0; } .wsdown-mobile > .wsdown-menuopner { display: block !important; } .wsdown-mobile > .wsdown-menuopner > a > i { margin-right: 10px; } .wsdown-mobile{ display:none; } .wsdown-mobile > li { position:relative; float: none; } .wsdown-mobile:hover > li { display: block; } .megacolimage img { width: 100%; } .megacolimage { width: 100% !important; } .typographylinks { width: 100% !important; } .megacollink { width: 100% !important; } } /*-------------------------------------------------------------------------- |  05 Additional Themes (Optionnal) --------------------------------------------------------------------------*/  .gry { background: #424242; color: #fff; } .orange { background: #ff670f; color: #fff; } .blue { background: #4A89DC; color: #fff; } .green { background: #74a52e; color: #fff; } .red { background: #DA4B38; color: #fff; } .yellow { background: #F6BB42; color: #fff; } .purple { background: #967ADC; color: #fff; } .pink { background: #ee1289; color: #fff; } .chocolate { background: #934915; color: #fff; } .gry > .wsdownopener{ background-color:#424242; } .gry > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .gry > .wsdownmenu-list > li > a { background-color: #fff !important; } .gry > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .gry > .wsdownmenu-list > li:hover>a { background: #424242 !important; color: #fff !important; } .gry > .wsdownmenu-list > li > a:hover { background: #424242 !important; color: #fff !important; } .gry > .wsdownmenu-list > li > a.active { background: #424242 !important; color: #fff !important; } .gry > .wsdownmenu-submenu > li > a:hover { background: #424242; border-radius: 0px!important; color: #fff; } .gry .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .gry .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .gry .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .orange > .wsdownopener{ background-color:#ff670f; } .orange > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .orange > .wsdownmenu-list > li > a { background-color: #fff !important; } .orange > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .orange > .wsdownmenu-list > li:hover>a { background: #ff670f !important; color: #fff !important; } .orange > .wsdownmenu-list > li > a:hover { background: #ff670f !important; color: #fff !important; } .orange > .wsdownmenu-list > li > a.active { background: #ff670f !important; color: #fff !important; } .orange > .wsdownmenu-submenu > li > a:hover { background: #ff670f; border-radius: 0px!important; color: #fff; } .orange .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .orange .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .orange .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .blue > .wsdownopener{ background-color:#4A89DC; } .blue > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .blue > .wsdownmenu-list > li > a { background-color: #fff !important; } .blue > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .blue > .wsdownmenu-list > li:hover>a { background: #4A89DC !important; color: #fff !important; } .blue > .wsdownmenu-list > li > a:hover { background: #4A89DC !important; color: #fff !important; } .blue > .wsdownmenu-list > li > a.active { background: #4A89DC !important; color: #fff !important; } .blue > .wsdownmenu-submenu li > a:hover { background: #4A89DC !important; border-radius: 0px!important; color: #fff !important; } .blue .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .blue .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .blue .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .green > .wsdownopener{ background-color:#74a52e; } .green > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .green > .wsdownmenu-list > li > a { background-color: #fff !important; } .green > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .green > .wsdownmenu-list > li:hover>a { background: #74a52e !important; color: #fff !important; } .green > .wsdownmenu-list > li > a:hover { background: #74a52e !important; color: #fff !important; } .green > .wsdownmenu-list > li > a.active { background: #74a52e !important; color: #fff !important; } .green > .wsdownmenu-submenu > li > a:hover { background: #74a52e !important; border-radius: 0px!important; color: #fff !important; } .green .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .green .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .green .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .red > .wsdownopener{ background-color:#DA4B38; } .red > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .red > .wsdownmenu-list > li > a { background-color: #fff !important; } .red > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .red > .wsdownmenu-list > li:hover>a { background: #DA4B38 !important; color: #fff !important; } .red > .wsdownmenu-list > li > a:hover { background: #DA4B38 !important; color: #fff !important; } .red > .wsdownmenu-list > li > a.active { background: #DA4B38 !important; color: #fff !important; } .red > .wsdownmenu-submenu > li > a:hover { background: #DA4B38 !important; border-radius: 0px!important; color: #fff !important; } .red .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .red .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .red .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .yellow > .wsdownopener{ background-color:#F6BB42; } .yellow > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .yellow > .wsdownmenu-list > li > a { background-color: #fff !important; } .yellow > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .yellow > .wsdownmenu-list > li:hover>a { background: #F6BB42 !important; color: #fff !important; } .yellow > .wsdownmenu-list > li > a:hover { background: #F6BB42 !important; color: #fff !important; } .yellow > .wsdownmenu-list > li > a.active { background: #F6BB42 !important; color: #fff !important; } .yellow > .wsdownmenu-submenu > li > a:hover { background: #F6BB42 !important; border-radius: 0px!important; color: #fff !important; } .yellow .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .yellow .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .yellow .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .yellow > .wsmenu-list li a .fa { color: #424242 !important; } .purple > .wsdownopener{ background-color:#967ADC; } .purple > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .purple > .wsdownmenu-list > li > a { background-color: #fff !important; } .purple > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .purple > .wsdownmenu-list > li:hover>a { background: #967ADC !important; color: #fff !important; } .purple > .wsdownmenu-list > li > a:hover { background: #967ADC !important; color: #fff !important; } .purple > .wsdownmenu-list > li > a.active { background: #967ADC !important; color: #fff !important; } .purple > .wsdownmenu-submenu > li > a:hover { background: #967ADC !important; border-radius: 0px!important; color: #fff !important; } .purple .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .purple .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .purple .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .pink > .wsdownopener{ background-color:#ee1289; } .pink > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .pink > .wsdownmenu-list > li > a { background-color: #fff !important; } .pink > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .pink > .wsdownmenu-list > li:hover>a { background: #ee1289 !important; color: #fff !important; } .pink > .wsdownmenu-list > li > a:hover { background: #ee1289 !important; color: #fff !important; } .pink > .wsdownmenu-list > li > a.active { background: #ee1289 !important; color: #fff !important; } .pink > .wsdownmenu-submenu > li > a:hover { background: #ee1289 !important; border-radius: 0px!important; color: #fff !important; } .pink .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .pink .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .pink .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .chocolate > .wsdownopener{ background-color:#934915; } .chocolate > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .chocolate > .wsdownmenu-list > li > a { background-color: #fff !important; } .chocolate > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .chocolate > .wsdownmenu-list > li:hover>a { background: #934915 !important; color: #fff !important; } .chocolate > .wsdownmenu-list > li a:hover { background: #934915 !important; color: #fff !important; } .chocolate > .wsdownmenu-list > li a.active { background: #934915 !important; color: #fff !important; } .chocolate > .wsdownmenu-submenu > li a:hover { background: #934915 !important; border-radius: 0px!important; color: #fff !important; } .chocolate .wsdownmenu-list li a:hover .arrow:after { border-top-color: #fff; } .chocolate .wsdownmenu-list li a.active .arrow:after { border-top-color: #fff; } .chocolate .wsdownmenu-list li:hover>a .arrow:after { border-top-color: #fff; } .tranbg { background-color: transparent !important; } .whitebg { background-color: #fff !important; } .whitebg:hover { color: #000 !important; } .blue-grdt { background: #5999ee; background: -moz-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5999ee), color-stop(100%, #4a89dc)); background: -webkit-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -o-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -ms-linear-gradient(top, #5999ee 0%, #4a89dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5999ee', endColorstr='#4a89dc', GradientType=0 ); color: #fff; } .gry-grdt { background: #565656; background: -moz-linear-gradient(top, #565656 0%, #424242 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #424242)); background: -webkit-linear-gradient(top, #565656 0%, #424242 100%); background: -o-linear-gradient(top, #565656 0%, #424242 100%); background: -ms-linear-gradient(top, #565656 0%, #424242 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#424242', GradientType=0 ); color: #fff; } .green-grdt { background: #86ba3d; background: -moz-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #86ba3d), color-stop(100%, #74a52e)); background: -webkit-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -o-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -ms-linear-gradient(top, #86ba3d 0%, #74a52e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86ba3d', endColorstr='#74a52e', GradientType=0 ); color: #fff; } .red-grdt { background: #f05c48; background: -moz-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f05c48), color-stop(100%, #da4b38)); background: -webkit-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -o-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -ms-linear-gradient(top, #f05c48 0%, #da4b38 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f05c48', endColorstr='#da4b38', GradientType=0 ); color: #fff; } .orange-grdt { background: #fc7d33; background: -moz-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc7d33), color-stop(100%, #ff670f)); background: -webkit-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -o-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -ms-linear-gradient(top, #fc7d33 0%, #ff670f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc7d33', endColorstr='#ff670f', GradientType=0 ); color: #fff; } .yellow-grdt { background: #ffcd67; background: -moz-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffcd67), color-stop(100%, #f6bb42)); background: -webkit-linear-gradient(top, #ffcd67 0%, #ff670f 100%); background: -o-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); background: -ms-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd67', endColorstr='#f6bb42', GradientType=0 ); color: #fff; } .purple-grdt { background: #a98ded; background: -moz-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a98ded), color-stop(100%, #967adc)); background: -webkit-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -o-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -ms-linear-gradient(top, #a98ded 0%, #967adc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a98ded', endColorstr='#967adc', GradientType=0 ); color: #fff; } .pink-grdt { background: #fb3ea4; background: -moz-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fb3ea4), color-stop(100%, #f21b8f)); background: -webkit-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -o-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -ms-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb3ea4', endColorstr='#f21b8f', GradientType=0 ); color: #fff; } .blue-grdt > .wsdownopener { background: #5999ee; background: -moz-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5999ee), color-stop(100%, #4a89dc)); background: -webkit-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -o-linear-gradient(top, #5999ee 0%, #4a89dc 100%); background: -ms-linear-gradient(top, #5999ee 0%, #4a89dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5999ee', endColorstr='#4a89dc', GradientType=0 ); color: #fff; } .gry-grdt > .wsdownopener { background: #565656; background: -moz-linear-gradient(top, #565656 0%, #424242 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #424242)); background: -webkit-linear-gradient(top, #565656 0%, #424242 100%); background: -o-linear-gradient(top, #565656 0%, #424242 100%); background: -ms-linear-gradient(top, #565656 0%, #424242 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#424242', GradientType=0 ); color: #fff; } .green-grdt > .wsdownopener { background: #86ba3d; background: -moz-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #86ba3d), color-stop(100%, #74a52e)); background: -webkit-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -o-linear-gradient(top, #86ba3d 0%, #74a52e 100%); background: -ms-linear-gradient(top, #86ba3d 0%, #74a52e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86ba3d', endColorstr='#74a52e', GradientType=0 ); color: #fff; } .red-grdt > .wsdownopener { background: #f05c48; background: -moz-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f05c48), color-stop(100%, #da4b38)); background: -webkit-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -o-linear-gradient(top, #f05c48 0%, #da4b38 100%); background: -ms-linear-gradient(top, #f05c48 0%, #da4b38 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f05c48', endColorstr='#da4b38', GradientType=0 ); color: #fff; } .orange-grdt > .wsdownopener { background: #fc7d33; background: -moz-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc7d33), color-stop(100%, #ff670f)); background: -webkit-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -o-linear-gradient(top, #fc7d33 0%, #ff670f 100%); background: -ms-linear-gradient(top, #fc7d33 0%, #ff670f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc7d33', endColorstr='#ff670f', GradientType=0 ); color: #fff; } .yellow-grdt > .wsdownopener { background: #ffcd67; background: -moz-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffcd67), color-stop(100%, #f6bb42)); background: -webkit-linear-gradient(top, #ffcd67 0%, #ff670f 100%); background: -o-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); background: -ms-linear-gradient(top, #ffcd67 0%, #f6bb42 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd67', endColorstr='#f6bb42', GradientType=0 ); color: #fff; } .purple-grdt > .wsdownopener { background: #a98ded; background: -moz-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a98ded), color-stop(100%, #967adc)); background: -webkit-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -o-linear-gradient(top, #a98ded 0%, #967adc 100%); background: -ms-linear-gradient(top, #a98ded 0%, #967adc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a98ded', endColorstr='#967adc', GradientType=0 ); color: #fff; } .pink-grdt > .wsdownopener { background: #fb3ea4; background: -moz-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fb3ea4), color-stop(100%, #f21b8f)); background: -webkit-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -o-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); background: -ms-linear-gradient(top, #fb3ea4 0%, #f21b8f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb3ea4', endColorstr='#f21b8f', GradientType=0 ); color: #fff; } .tranbg > .wsdownmenu-list > li > a { color: #e5e5e5; border-right: none; background-color: transparent; } .tranbg > .wsdownmenu-list > li > a:hover { background-color: transparent; } .tranbg > .wsdownmenu-list > li > a { background-color: transparent; } .tranbg > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5; } .whitebg > .wsdownmenu-list > li > a { color: #424242; border-right: 1px solid rgba(0,0,0,0.10); } .whitebg > .wsdownmenu-list > li > a { background-color: #fff !important; } .whitebg > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5 !important; } .red-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .red-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .red-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .gry-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .gry-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .gry-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .blue-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .blue-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .blue-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .green-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .green-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .green-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .orange-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .orange-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .orange-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .yellow-grdt > .wsdownmenu-list > li > a { color: #424242 !important; } .yellow-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .yellow-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #424242 !important; } .yellow-grdt > .wsdownmenu-list li a .fa { color: #424242 !important; } .purple-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .purple-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .purple-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } .pink-grdt > .wsdownmenu-list > li > a { color: #fff !important; } .pink-grdt > .wsdownmenu-list > li > a { background-color: transparent !important; } .pink-grdt > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #fff !important; } @media only screen and (max-width: 767px) { .tranbg > .wsdownmenu-list > li > a { color: #424242 !important; border-right: none; background-color: #fff !important; } .tranbg > .wsdownmenu-list > li > a:hover { background-color: #fff !important; } .tranbg > .wsdownmenu-list > li > a { background-color: #fff !important; } .tranbg > .wsdownmenu-list > li > a > .arrow:after { border-top-color: #E5E5E5; } .red-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .blue-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .orange-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .green-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .purple-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .pink-grdt > .wsdownmenu-list > li > a > .fa { color: #fff !important; } .gry > .wsdownmenu-submenu > li:hover>a { background-color: #424242 !important; color: #fff; } .gry > .wsdownmenu .wsdownmenu-list > li > a.active { color: #fff; background-color: #424242; } .gry > .wsdownmenu .wsdownmenu-list > li > a:hover { color: #fff; background-color: #424242; } .orange > .wsdownmenu-submenu > li:hover>a { background-color: #ff670f !important; color: #fff; } .orange > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #ff670f; } .orange > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #ff670f; } .blue > .wsdownmenu-submenu > li:hover>a { background-color: #4A89DC !important; color: #fff; } .blue > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #4A89DC; } .blue > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #4A89DC; } .green > .wsdownmenu-submenu > li:hover>a { background-color: #74a52e !important; color: #fff; } .green > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #74a52e; } .green > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #74a52e; } .red > .wsdownmenu-submenu > li:hover>a { background-color: #DA4B38 !important; color: #fff; } .red > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #DA4B38; } .red > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #DA4B38; } .yellow > .wsdownmenu-submenu > li:hover>a { background-color: #F6BB42 !important; color: #fff; } .yellow > .wsdownmenu .wsdownmenu-list > li > a.active { color: #fff; background-color: #F6BB42; } .yellow > .wsdownmenu .wsdownmenu-list > li > a:hover { color: #fff; background-color: #F6BB42; } .purple > .wsdownmenu-submenu > li:hover>a { background-color: #967ADC !important; color: #fff; } .purple > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #967ADC; } .purple > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #967ADC; } .pink > .wsdownmenu-submenu > li:hover>a { background-color: #ee1289 !important; color: #fff; } .pink > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #ee1289; } .pink > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #ee1289; } .chocolate > .wsdownmenu-submenu > li:hover>a { background-color: #934915 !important; color: #fff; } .chocolate > .wsdownmenu > .wsdownmenu-list > li > a.active { color: #fff; background-color: #934915; } .chocolate > .wsdownmenu > .wsdownmenu-list > li > a:hover { color: #fff; background-color: #934915; } }