header.otb-header {
background-color: #fff;
border-bottom: 3px solid #ddd;
}
header.otb-header .rb-logo {
float: left;
padding: 25px 0;
}
header.otb-header .rb-logo .rb-text-logo h1 {
margin: 0;
}
header.otb-header .rb-logo .rb-mob-menu-button {
display: none;
}
header.otb-header .rb-nav {
float: right;
}
header.otb-header .rb-nav .rb-primary-menu {
list-style: none;
padding-left: 0;
margin: 0;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item {
float: left;
width: auto;
transition: 300ms;
position: relative;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item a {
width: 100%;
display: block;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item .rb-menu-button {
position: relative;
top: 50%;
transform: translateY( -50% );
padding: 0 15px;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu {
background-color: #fff;
z-index: 99;
position: absolute;
width: 200px;
margin-left: 0;
opacity: 0;
pointer-events: none;
}
@media screen and ( min-width: 1025px ) {
header.otb-header .rb-nav .rb-primary-menu .menu-item:hover ul.sub-menu {
opacity: 1;
pointer-events: auto;
}
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu li.menu-item {
float: none;
list-style: none;
height: auto;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu li.menu-item:after {
display: none;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu li.menu-item a {
height: auto; }
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu li.menu-item a .rb-menu-button {
top: 0;
transform: translateY(0);
padding: 15px;
}
.rb-logo-image img {
max-height: 100%;
width: auto;
} @media screen and ( max-width: 1024px ) { header.otb-header .rb-logo {
width: 100%;
float: none;
position: relative;
}
header.otb-header .rb-logo .rb-logo-image {
float: left;
}
header.otb-header .rb-logo .rb-mob-menu-button {
display: block;
position: absolute;
right: 5%;
top: 50%;
transform: translateY( -50% );
-webkit-transform: translateY( -50% );
}
header.otb-header .rb-logo .rb-mob-menu-button .rb-mob-menu-button-container {
width: 30px;
height: 20px;
position: relative;
}
header.otb-header .rb-logo .rb-mob-menu-button .rb-mob-menu-button-container .rb-mob-menu-line {
width: 100%;
height: 3px;
position: absolute;
top: 50%;
transform: translateY( -50% );
transform-origin: 50% 0%;
transition: 300ms;
}
header.otb-header .rb-logo .rb-mob-menu-button .rb-mob-menu-button-container .rb-mob-menu-line:first-of-type {
top: 0;
transform: translateY( 0 );
}
header.otb-header .rb-logo .rb-mob-menu-button .rb-mob-menu-button-container .rb-mob-menu-line:last-of-type {
top: auto;
bottom: 0;
transform: translateY( 0 );
}
header.otb-header .rb-nav {
width: 100vw;
margin-left: -10px;
float: none;
position: absolute;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: 200ms;
}
header.otb-header .rb-nav.open {
opacity: 1;
pointer-events: auto;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item {
width: 100%;
float: none;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item,
header.otb-header .rb-nav .rb-primary-menu .menu-item a {
height: auto;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item a {
padding: 15px 10px;
box-sizing: border-box;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item a .rb-menu-button {
color: #fff;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu {
width: 100%;
position: relative;
height: 0;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item.open ul.sub-menu {
height: auto;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item ul.sub-menu li.menu-item a .rb-menu-button {
color: #1a1a1a;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item-has-children:after {
display: none;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item-has-children .sub-drop-down {
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 20px;
color: #fff;
text-align: center;
right: 30px;
top: 15px;
left: auto;
bottom: auto;
opacity: 1;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item-has-children.open ul.sub-menu {
opacity: 1;
pointer-events: auto;
}
header.otb-header .rb-nav .rb-primary-menu .menu-item-has-children.open .sub-drop-down {
transform: rotate(180deg);
}
header.otb-header .rb-nav .rb-primary-menu .menu-item .rb-menu-button {
transform: translate( 0 );
color: #fff;
}
.open .rb-mob-menu-line:nth-of-type( 2 ) {
transform: rotate( 45deg ) translateY( -50% )!important;
}
.open .rb-mob-menu-line:nth-of-type( 3 ) {
transform: rotate( -45deg ) translateY( -50% )!important;
}
.open .rb-mob-menu-line:nth-of-type( 1 ),
.open .rb-mob-menu-line:nth-of-type( 4 ) {
transition: 100ms;
opacity: 0;
}
}