#SiteHeader nav.navbar {margin-bottom: 0;border: none;background: none;} #siteheader-navigation-container .navbar-header {float:none;position:relative;width:100%;text-align: left;display: table;} #siteheader-navigation-container .navbar-brand {padding:0px;height: auto;float: none;display: table-cell;vertical-align: middle;direction: ltr;} #siteheader-navigation-container .navbar-brand svg {width: 239px;fill:#fff;position: absolute;height: 61px;top: 0;} #siteheader-navigation-container.logo-text-dark .navbar-brand svg { fill: #474747 !important; } .switchWrapper.color-switch-dark .switchColor .slider.round { background: rgba(75, 72, 72, .5); } .switchWrapper.color-switch-dark .colorLabel { color: #4b4848; } .switchWrapper.color-switch-dark .language-switch { color: #4b4848; border-right: 2px solid #4b4848; } #siteheader-navigation-container svg.hidden-svg { opacity: 0; } #buttons-container { float:left; position:relative; } #buttons-container .nav-buttons { position:relative; margin:0px; padding:0px; } #buttons-container .nav-buttons .dropdown { height: 77px; width: 96px; text-align: center; background: #5D707E; position: static; } #buttons-container .nav-buttons .dropdown > a { padding: 0px; height: 100%; display: table; width: 100%; } #buttons-container .nav-buttons .dropdown > a > div { vertical-align: middle; display: table-cell; color: #fff; } #buttons-container .nav-buttons .dropdown a div span { display: block; margin-top: 5px; line-height: 1; } #buttons-container .nav-buttons #navbar-cart > a { background-color: blue; } #buttons-container .nav-buttons #navbar-cart.open > a { background-color: lightsteelblue; } #buttons-container .nav-buttons #navbar-user > a { background-color: red; } #buttons-container .nav-buttons #navbar-user.open > a { background-color: orange; } #buttons-container .nav-buttons #navbar-cart i[data-counter]:after { position: absolute; left: 60%; border-radius: 50%; content: attr(data-counter); background: #5C707B; font-size: 71%; padding: 4px 7px; color: #fff; max-width: 30px; word-break: break-all; } #buttons-container .nav-buttons #navbar-user .sign-in { display:block; } #buttons-container .nav-buttons #navbar-user .logged-in { display:none; } #buttons-container .nav-buttons #navbar-user.logged-in .sign-in { display:none; } #buttons-container .nav-buttons #navbar-user.logged-in .logged-in { display:block; } #buttons-container .nav-buttons .dropdown-menu { right:0px; left:0px;float:left;position:relative !important;top:0; position: static; background-color: #fff; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);} @media(max-width:1024px){ #siteheader-navigation-container #logo-icon{width: 128px;} } #navbar-top { padding:0px; padding-top:20px; display:inline-block; } #navbar-top .navbar-nav { display: inline-block; margin: 0px; } #navbar-top .navbar-nav > li { float: right; color:blue; } #navbar-top .navbar-nav > li a { color: blue; border:0px; padding:0px; } #navbar-top .navbar-nav > li a:hover { color: red; text-decoration:none; } #navbar-top .navbar-nav > li a:focus { color: red; text-decoration:none; } #navbar-top .navbar-nav > li:not(:last-child) > a:after { content: " "; display: inline-block; width: 1px; background: #5D707c; position: relative; height: 8px; margin: 0px 7px; } #navbar-top .navbar-nav > li > .dropdown-menu { text-align:right; padding:5px; font-size:100%; background-color:#ffffff; text-align:right; border: 1px solid rgba(0,0,0,0.15); border-radius:0px; box-shadow: 0 6px 12px rgba(0,0,0,.175); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); } #navbar-top .navbar-nav > li > .dropdown-menu > li > a { color:#333; padding: 0px; line-height:normal; } #navbar-top .navbar-nav > li > .dropdown-menu > li > a:hover { color:#333; } #navbar-bg{position: fixed;top: 0;right: 0;left: 0;bottom: 0;background: #000;opacity: 0;transition: all 200ms ease-out;-webkit-transition: all 200ms ease-out;pointer-events: none;z-index:10;} .menuOpen #navbar-bg, .articleOpen #navbar-bg, .jobOpen #navbar-bg, .newsletterOpen #navbar-bg { pointer-events: auto; cursor: pointer; } #navbar-collapse-main {float:right;padding:0px;font-size: 100%;width:100%;background-color: #4b4848;margin-bottom:5px;position: fixed;height: 100% !important;top: 0;right: -417px;width: 417px;padding: 48px 50px;color: #fff;border-top-width: 0;z-index:10;} #navbar-collapse-main .navbar-nav {float: none;padding:0px;margin:0px;padding-bottom:5px;padding-top:5px;font-size: 240%;margin-bottom: 100px;} #navbar-collapse-main .navbar-nav > li {float: none;margin-bottom: 25px;} #navbar-collapse-main .navbar-nav > li:last-child{margin-bottom: 0;} #navbar-collapse-main .navbar-nav > li > a {padding: 0;color: inherit;line-height: 1;} #navbar-collapse-main .navbar-nav > li > a:hover {color: #f15a55;} #navbar-collapse-main .navbar-nav > li.dropdown.open a { background-color:transparent; } #navbar-collapse-main .navbar-nav > li > .dropdown-menu { right:0px; left:auto; padding:5px; font-size:100%; background-color:#ffffff; text-align:right; border: 1px solid rgba(0,0,0,0.15); border-radius:0px; box-shadow: 0 6px 12px rgba(0,0,0,.175); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); } #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { color:#333; padding: 3px 15px; line-height:normal; } #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color:#999; } #navbar-collapse-main .nav.navbar-nav-sec {font-size: 120%;margin-bottom: 50px;} #navbar-collapse-main .nav.navbar-nav-sec li a { padding: 0; background-color: transparent; color: rgba(255,255,255,.8); } #navbar-collapse-main .nav.navbar-nav-sec li a:hover{color:#f15a55} #navbar-collapse-main .nav.navbar-nav-social{} #navbar-collapse-main .nav.navbar-nav-social a { background: #fff; border-radius: 50%; width: 29px; height: 29px; display: inline-block; text-align: center; margin-left: 14px; transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; } #navbar-collapse-main .nav.navbar-nav-social a svg { fill: #4b4848; max-width: 19px; display: inline-block; vertical-align: middle; margin: 0 auto; max-height: 17px; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; } #navbar-collapse-main .nav.navbar-nav-social a.linkedinBtn svg {max-height:15px;} #navbar-collapse-main .menu-wrapper {position: absolute;top: 50%;transform: translateY(-50%);} #navbar-collapse-main .nav.navbar-nav-social a:hover,#navbar-collapse-main .nav.navbar-nav-social a:focus { background: #f15a55; } #navbar-collapse-main .nav.navbar-nav-social a:hover svg,#navbar-collapse-main .nav.navbar-nav-social a:focus svg { fill: #ffffff; } /***FULL SCREEN OPEN MENU CSS*/ @media(max-width:1024px) { #navbar-collapse-main{width:357px; right:-357px;padding:30px;} } @media(max-width:767px) { #navbar-collapse-main{width: 80vw;right: -80vw;padding:25px 30px;display: block;} #navbar-collapse-main .navbar-nav{margin-bottom: 20px;font-size: 180%;} #navbar-collapse-main .navbar-nav > li{margin-bottom: 10px;} #navbar-collapse-main .nav.navbar-nav-sec li.language-switch-mobile a { display: inline-block; vertical-align: middle; color: rgba(255,255,255,.5); } #navbar-collapse-main .nav.navbar-nav-sec li.language-switch-mobile .LangSep { display: inline-block; vertical-align: middle; margin: 0px 6px; } #navbar-collapse-main .nav.navbar-nav-sec li.language-switch-mobile a.activeLang { color: #F15A55; } } #siteheader-navigation-container .navbar-search { float:left; margin-top:12px; border:1px solid; border-radius:4px;font-size:118%; opacity:0.8; } #siteheader-navigation-container .navbar-search input {height:31px;border:none; background:none; color:white; } #siteheader-navigation-container .navbar-search .searchicon {background-color:#F68B1F;height: 34px; padding-top: 7px;width: 36px;text-align: center; border-radius:4px;} .navbar-default .mobile-button {display: table-cell;vertical-align: middle;text-align:right;color:#000;z-index:8;position:relative;width: 50px;} .bg .navbar-default .mobile-button { color:#fff;} .bg .navbar-default .navbar-toggle { padding: 0; height: 90px;width: 150px; } .navbar-toggle { display:inline-block;float:none;margin-top:0; } .nav-open span.open-nav { display:none} .navbar-toggle .mobile-button span.open-nav { display: none} .navbar-toggle .collapsed .mobile-button span.open-nav { display: inline-block;vertical-align:middle; } .navbar-default .mobile-button span.close-nav { display: none; } .navbar-default .navbar-toggle:not(.collapsed) span.open-nav { display: none; } .navbar-default .navbar-toggle:not(.collapsed) span.close-nav { display: inline-block;} .navbar-default .navbar-toggle {width: 49px;border:0;vertical-align:middle;margin-right: 0;padding: 0px 10px;height: 49px;transition: all 500ms ease;border-radius: 50%;margin-bottom: 0;} .navbar-default .navbar-toggle.collapsed { background-color: transparent;} .navbar-default .navbar-toggle.collapsed:hover, .navbar-default .navbar-toggle.collapsed:focus, .navbar-default .navbar-toggle.collapsed:hover #circleButton .navbar-default .navbar-toggle.collapsed:focus #circleButton { background-color: transparent;} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent;} .navbar-default .navbar-toggle .icon-bar { background-color: #4b4848;width: 26px;height: 3px;/*transition: all 250ms ease-in-out;-webkit-transition: all 250ms ease-in-out;*/} .bg .navbar-default .navbar-toggle .icon-bar { background-color:#fff;} .navbar-toggle .icon-bar+.icon-bar { margin-top:4px; } .navbar-default .navbar-toggle .icon-bar.down { } .navbar-default .navbar-toggle div { display: inline-block;vertical-align: middle;position: relative;top: -2px;} .navbar-default .navbar-toggle span.open-nav { display: inline-block;vertical-align: middle;margin-right: 5px; } .navbar-default .navbar-toggle #circleButton { position: absolute;width: 100%;height: 100%; background-color: #fff;left: 0;top: 0;border-radius: 50%;} .switchWrapper {direction: rtl;display: table-cell;vertical-align: middle;text-align: right;color: #000;z-index: 0;position: relative;} .switchWrapper .switchColor {position: relative;display: inline-block;width: 55px;height: 26px;vertical-align: middle;margin: 0 40px 0 0; } .switchWrapper .switchColor input { opacity: 0;width: 0;height: 0;} .switchWrapper .language-switch { /*display: none;*/ display: inline-block; color: #fff; margin-right: 10px; padding-right: 16px; line-height: 1; /*border-right: 2px solid #fff;*/ } .switchWrapper .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255,255,255, 0.4);} .switchWrapper .slider .sliderCircle, .switchWrapper .slider .sliderCircle-right, .switchWrapper .slider .sliderCircle-center{position: absolute;content: "";height: 20px;width: 20px;left: 5px;bottom: 3px;background-color: #f15a55;border-radius: 10px;z-index:2} .switchWrapper .slider .sliderCircle-right {left:auto; right:5px;opacity:0;background-color:#fff} .switchWrapper .slider .sliderCircle-center{z-index:1;/* opacity:0; */} .switchWrapper .slider .sliderCircle-center svg{height:20px;position: relative;left: 10px;} .switchWrapper .slider .sliderCircle-center svg rect{position: absolute;} .switchWrapper .slider .sliderCircle-center svg rect#roundCircle{} /*.switchWrapper .switchColor input:checked + .slider .sliderCircle {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}*/ .switchWrapper .colorLabel{display: inline-block;vertical-align: middle;margin: 0 10px 0 0;line-height: 1;color: #fff;font-size: 80%;} .switchWrapper .switchColor, .switchWrapper .colorLabel { display: none; } .mobile-language-switch { display: none; } .mobile-language-switch { margin-top: 15px; } .mobile-language-switch span { margin: 0 5px; color: #fff; } .mobile-language-switch a { color: rgba(255,255,255, 0.25); } .mobile-language-switch a.active { color: #f15a55; } /* Rounded sliders */ .navbar-default .slider.round { border-radius: 13px; } .navbar-default .slider.round .sliderCircle {} @media(max-width:991px){ .switchWrapper{float: right; margin-top: 10px;} .navbar-default .mobile-button{float:right;} } @media (min-width:768px) (max-width:991px){ .navbar-default .navbar-toggle span.open-nav {font-size: 113%;} .mobile-language-switch { display: none; } } @media(max-width:767px) { .switchWrapper{text-align:center;margin-right: 20px;margin-top: 3px;} .switchWrapper .colorLabel {display:none; text-align: center;margin: 0;margin-top: 7px; } .switchWrapper .switchColor{margin: 0;} #siteheader-navigation-container #logo-icon { width: 144px; top: -4px; } .switchWrapper .language-switch { padding-right: 9px; position: absolute; left: -40px; top: 10px; } .mobile-language-switch { display: block; } .switchWrapper .language-switch { display: none; } } @media only screen and (min-device-width : 900px) and (max-device-width : 1600px) and (orientation : portrait) { .navbar-default .navbar-toggle{width: 89px;height: 89px;} .navbar-default .navbar-toggle .icon-bar{width: 47px;height: 7px;} #siteheader-navigation-container #logo-icon{width: 356px;} #siteheader-navigation-container .navbar-brand{height: 92px;} #navbar-collapse-main{width: 747px;right: -747px;padding: 62px 50px;} #navbar-collapse-main .richkid-r svg{width: 92px;} .navbar-default .navbar-toggle:not(.collapsed) .icon-bar+.icon-bar:not(.up):not(.down){margin-top: -6px;} #navbar-collapse-main .navbar-nav{font-size: 430%;} #navbar-collapse-main .nav.navbar-nav-sec{font-size: 215%;} #navbar-collapse-main .nav.navbar-nav-social a{width: 50px;height: 50px;} #navbar-collapse-main .nav.navbar-nav-social a svg{max-width: 33px;margin-top: 7px;} .navbar-default .mobile-button{margin-top: 0;} } @media (max-width: 320px) { #siteheader-navigation-container #logo-icon { width: 128px; top: -4px; } .switchWrapper .colorLabel { font-size: 70%; } .switchWrapper .switchColor { width: 50px; height: 22px; } .switchWrapper .slider .sliderCircle, .switchWrapper .slider .sliderCircle-right, .switchWrapper .slider .sliderCircle-center { width: 16px; height: 16px; } .navbar-default .navbar-toggle { width: 43px; height: 43px; } .navbar-default .navbar-toggle .icon-bar { width: 23px; height: 2px; } }