.hs-menu-wrapper ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: inline-block; text-align: left; margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a { display: inline-block; padding: 5px 20px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; left: unset !important; right: 0 !important; background-color: #fff; box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 180px; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch { position: relative; margin-bottom: 20px; min-height: 7em; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children { position: static; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: inline-block; padding: 10px 20px; white-space: nowrap; max-width: 140px; width: auto; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical { width: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-vertical li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 20px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a { width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li a { padding: 10px 20px; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; top: 0; left: 180px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li a { min-width: 140px; width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul { max-width: 100%; overflow: hidden; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li.hs-item-has-children > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; position: static; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-2 > a { padding-left: 4em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-3 > a { padding-left: 6em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-4 > a { padding-left: 8em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-5 > a { padding-left: 140px; } .hs-menu-wrapper.hs-menu-not-show-active-branch li.hs-menu-depth-1 ul { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); } @media (max-width:568px) { .hs-menu-wrapper, .hs-menu-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: block; max-width: 100%; width: 100%; } } .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible; opacity: 1; } /* ========================================================================== Custom Menu Primary ========================================================================== */ {% set ulColor = "" %} /* Set ul background color */ {% set liColor = "" %} /* Set li background Color */ {% set aColor = "" %} /* Set link Color */ {% set aColorHover = "" %} /* Set link Hover Color */ /* Parent List */ .custom-menu-primary .hs-menu-wrapper > ul{ background:; } .custom-menu-primary .hs-menu-wrapper > ul > li{ background:; } .custom-menu-primary .hs-menu-wrapper > ul > li > a{ color:; } .custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{ color:; } /* Child List */ .custom-menu-primary .hs-menu-wrapper > ul ul{} .custom-menu-primary .hs-menu-wrapper > ul ul li{ background:; } .custom-menu-primary .hs-menu-wrapper > ul ul li a{ color:; } .custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{ color:; } /* Override max width on menu links */ .custom-menu-primary .hs-menu-wrapper > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { overflow: visible !important; max-width: none !important; width: auto !important; } /* Fix menu disappearing on desktop after toggling mobile menu */ @media screen and (min-width:768px) { .custom-menu-primary .hs-menu-wrapper { display:block !important; } } /* ========================================================================== Mobile Menu - Hubspot Standard Toggle Menu ========================================================================== */ /** * Special Note * * When the menu is open, a class of .mobile-open is applied to the body. You can * use this for custom styling on any element when the menu is in the open position. */ .mobile-trigger, .child-trigger{ display: none; /* Hide button on Desktop */ } @media (max-width: 767px){ /* Variables ========================================================================== */ {% set menuColorMobile = "#000000" %} /* Set Mobile Menu Background Color */ {% set aColorMobile = "#ffffff" %} /* Set Link Color */ {% set aColorHoverMobile = "#ffffff" %} /* Set Link Hover Color */ /* * Menu Reset * * Remove styling from desktop version of custom-menu-primary. Place any * additional CSS you want removed from the mobile menu in this reset */ .custom-menu-primary, .custom-menu-primary .hs-menu-wrapper > ul, .custom-menu-primary .hs-menu-wrapper > ul li, .custom-menu-primary .hs-menu-wrapper > ul li a{ display: block; float: none; position: static; top: auto; right: auto; left: auto; bottom: auto; padding: 0px; margin: 0px; background-image: none; background-color: transparent; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; max-width: none; width: 100%; height: auto; line-height: 1; font-weight: normal; text-decoration: none; text-indent: 0px; text-align: left; color:; } /* Toggle Button ========================================================================== */ .mobile-trigger{ display: inline-block !important; /* Show button on mobile */ cursor: pointer; /* Mouse pointer type on hover */ position: absolute; /*******************************************/ top: 0px; /* Position Button at right of screen */ right: 10px; /*******************************************/ width: auto; /* Button width */ height: auto; /* Button height */ padding: 7px 10px 8px 10px; background: #ffffff; /* Background color */ border: 1px solid ; font-size: 16px; font-weight: normal; text-align: left; text-transform: uppercase; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: ; } .mobile-trigger:hover{ text-decoration: none; /* Removes link text underline on button */ color:; background-color: ; border-color: transparent; } /* Change button when menu is open */ .mobile-open .mobile-trigger{ color:; background-color: ; border-color: transparent; } /* Toggle Button Icon ========================================================================== */ .mobile-trigger i{ display: inline; position: relative; top: -4px; } .mobile-trigger i:before, .mobile-trigger i:after{ position: absolute; content: ''; } .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{ width: 22px; /* Icon line width */ height: 2px; /* Icon line height */ -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; background-color: ; /* Icon color */ display: inline-block; } .mobile-trigger i:before{ top: -6px; /* Position top line */ } .mobile-trigger i:after{ top: 6px; /* Position bottom line */ } .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after, .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{ background-color: ; /* Icon color */ } /* Child Toggle Button ========================================================================== */ .child-trigger{ display: block !important; /* Hide button on Desktop */ cursor: pointer; /* Mouse pointer type on hover */ position: absolute; top: 0px; right: 0px; width: 55px !important; /* Button width */ min-width: 55px !important; height: 45px !important; /* Button height */ padding: 0 !important; border-left: 1px dotted rgba(255, 255, 255, .20); } .child-trigger:hover{ text-decoration: none; } .child-trigger i{ position: relative; top: 50%; /* Centers icon inside button */ margin: 0 auto !important; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .child-trigger i:after{ position: absolute; content: ''; } .child-trigger i, .child-trigger i:after{ width: 10px; /* Icon line width */ height: 1px; /* Icon line height */ background-color:; /* Icon color */ display: block; } .child-trigger i:after{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .child-trigger.child-open i:after{ -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .child-trigger.child-open i{ } /* Menu Styles on Mobile Devices ========================================================================== */ .custom-menu-primary.js-enabled{ position: relative; padding-top: 44px; /* Makes room for button */ margin: 10px 0 10px 0; } /* Hide menu on mobile */ .custom-menu-primary.js-enabled .hs-menu-wrapper, .custom-menu-primary.js-enabled .hs-menu-children-wrapper{ display: none; } /* Make child lists appear below parent items */ .custom-menu-primary ul.hs-menu-children-wrapper{ visibility: visible !important; opacity: 1 !important; position: static !important; display: none; } /* Mobile Menu Styles */ .custom-menu-primary.js-enabled .hs-menu-wrapper{ width: 100%; position: relative; /**************************************************************/ top: 0; /* Positions the menu to drop from the very top of the screen */ left: 0; /**************************************************************/ padding: 0; } .custom-menu-primary .hs-menu-wrapper{ background-color:; /* Menu background color set off global menuColorMobile variable */ width: 100%; /* Full screen width */ } /* Level 1 Menu List Styles */ .custom-menu-primary .hs-menu-wrapper > ul > li{ position: relative; } .custom-menu-primary .hs-menu-wrapper > ul > li a{ font-size: 22px; /* Font size of top level list items */ line-height: 45px; overflow: visible; } /* Level 1 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-wrapper > ul li{ border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */ } .custom-menu-primary .hs-menu-wrapper > ul li a{ padding: 0 10px; color:; /* link color set by global mobile-aColor variable */ } .custom-menu-primary .hs-menu-wrapper > ul li a:hover{ color:; /* link hover color set by global mobile-aColorHover variable */ } /* Level 2 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-wrapper > ul ul li{ background-color: rgba(255, 255, 255, .08); } .custom-menu-primary .hs-menu-wrapper > ul ul li a{ text-indent: 10px; /* Indent Child lists */ font-size: 16px; /* Font size of child lists */ } /* Level 3 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-wrapper > ul ul ul li a{ text-indent: 30px; /* Indent Child lists */ } .custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{ text-indent: 50px; /* Indent Child lists */ } } main.body-container-wrapper { margin-top: 95px; } header { width: 100%; display: inline-block; height: 95px; position: fixed; top:0; z-index: 10; } header .header-sec { width: 100%; display: inline-block; padding: 20px 0; background-color: #fff; } header .header-sec .header-wrap { width: 100%; display: flex; justify-content: flex-end; align-items: center; } header .header-sec .header-wrap .logo { width: 25%; float: left; } header .header-sec .header-wrap .logo a { width: 100%; display: inline-block; font-family: 'Open Sans', sans-serif; } header .header-sec .header-wrap .logo a img { width: 263px; } header .header-sec .header-wrap .nav-bar { width: 75%; display: inline-block; text-align: right; height: 37px; } .custom-menu-primary .hs-menu-wrapper > ul ul li:first-child a { padding-top: 20px; } .custom-menu-primary .hs-menu-wrapper > ul ul li:last-child a { padding-bottom: 20px; } header .header-sec .header-wrap .nav-bar ul li a { font-family: 'Open Sans', sans-serif; font-weight: 600; color: #3b4754; transition: 0.4s all ease-in-out; } header .header-sec .header-wrap .nav-bar ul li a:hover { color: #a7131a; } .fixed-header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(254, 255, 255, 0.6); -webkit-transition: all ease-out .5s; -moz-transition: all ease-out .5s; -o-transition: all ease-out .5s; transition: all ease-out .5s; box-shadow: 0 8px 6px -6px #00000038; height: auto; } header .header-sec { font-family: 'Open Sans', sans-serif; } header .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper { right: -100px !important; } @media(max-width: 1000px){ header .header-sec .header-wrap .logo { width: 20%; } header .header-sec .header-wrap .nav-bar { width: 80%; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a { padding: 5px 10px; } } @media(max-width: 767px){ main.body-container-wrapper { margin-top: 75px; } .mobile-trigger { right: 0; border: unset; padding: 7px 0 8px 10px; } .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after, .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after { background-color: #a72b2a; } .mobile-open .mobile-trigger { border: unset; background-color: transparent; } .mobile-trigger:hover { background-color: transparent; border-color: transparent; } header .header-sec .header-wrap { display: inline-block; position: relative; z-index: 1; } header .header-sec { padding: 20px 0 10px; } header .header-sec .header-wrap .logo { width: 50%; } header .header-sec .header-wrap .logo a img { width: 100%; height: 33px; object-fit: contain; object-position: left; text-align: left; } header .header-sec .header-wrap .nav-bar { width: 100%; position: absolute; top: -4px; right: 0; } .custom-menu-primary .hs-menu-wrapper > ul ul li:first-child a { padding-top: 8px; } .custom-menu-primary .hs-menu-wrapper > ul ul li:last-child a { padding-bottom: 8px; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper { background-color: initial; box-shadow: unset; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a { padding: 8px 10px; height: auto; font-size: 16px; line-height: 29px; } .custom-menu-primary .hs-menu-wrapper > ul ul li a { text-indent: 0px; font-size: 14px; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; background-color: #a72b2a; } .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after { background-color: #a72b2a; } header .header-sec .header-wrap .nav-bar ul li a { color: #fff; } header .header-sec .child-trigger i, .child-trigger i:after { background-color: #fff; } header .header-sec .header-wrap .nav-bar ul li a:hover { color: #fff; } header .header-sec .child-trigger { width: 100% !important; } header .header-sec .child-trigger i { position: absolute; right: 10px; } } /* LANGUAGE SWITCHER */ /* ui-dropdown-list */ .ui-dropdown-list { position: relative; } p.ui-dropdown-list-trigger { margin-top: 0; } .ui-dropdown-list-trigger strong { position: relative; z-index: 999; text-transform: uppercase; } .ui-dropdown-list-trigger strong:after { display: block; position: absolute; content: ''; right: -5px; top: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000000; } .ui-dropdown-list-trigger strong, .ui-dropdown-list ul a { display: block; width: 40px; cursor: pointer; padding: 6px 3px; font-size: 13px; line-height: 13px; color: #000; font-weight: normal; } .ui-dropdown-list ul { position: absolute; right: 0; top: 38px; margin-top: 0; padding: 0; z-index: 1000; background: #fff; transform:scale(1 , 0); transform-origin:top; transition:all ease-in-out .3s; } .ui-dropdown-list li { list-style-type: none; } .ui-dropdown-list ul a, .ui-dropdown-list ul a:link, .ui-dropdown-list ul a:visited { position: relative; display: block; float: right; } .ui-dropdown-list ul a:hover, .ui-dropdown-list ul a:focus { border-bottom: none; color: #000; } /* JS interactivity */ .no-js .ui-dropdown-list ul, .ui-dropdown-list.active ul { display: block; transform:scale(1, 1); } .ui-dropdown-list.active strong:after { border-top-color: #000; } .ui-dropdown-list strong{ border-style: solid; border-color: transparent; border-width: 1px; transition: .3s; } .ui-dropdown-list.active strong{ border-style: solid; border-width: 1px 1px 0 1px; transition: 0s; } .ui-dropdown-list.active ul{ border-style: solid; border-color: #000; border-width: 0 1px 1px 1px; } #lang-switcher a, #lang-switcher strong { padding-left: 5px; } #lang-switcher strong { float: right; } #lang-switcher{transform: translateY(22px);} #lang-switcher .ui-dropdown-list-trigger p {width: 85px;box-sizing: border-box; border-radius:5px 5px 0px 0px;background-color: #f3f3f3;border: none;} .ui-dropdown-list-trigger, .ui-dropdown-list ul a{border-radius:5px; padding:5px; display:flex;width:85px;background-color: #f3f3f3;border: none;} .ui-dropdown-list.active ul{border-radius:0px 0px 5px 5px;border:none;overflow:hidden;box-shadow:0px 13px 8px 3px #00000030;} .ui-dropdown-list ul a img { width: 25px; border-radius: 35px; height: 25px; margin-right: 5px; object-fit: cover; } p.ui-dropdown-list-trigger img {width: 25px;border-radius: 35px;height: 25px;margin-right: 5px;object-fit: cover;} @media(max-width:1199px){ .custom-menu-primary .hs-menu-wrapper > ul{margin-left:0px !important;} header .header-sec .header-wrap .nav-bar ul li a{padding:5px 6px;} } @media(max-width:767px){ p.ui-dropdown-list-trigger {margin-right:0px;} #lang-switcher{position:absolute;top: -20px;right: 40px;} header .header-sec .container {padding: 0px 40px 0 0;} header.fixed-header .container {padding: 0px 20px 0;} }