#account-nav {
background-image: var(--ocean-gradient-diagonal)!important;
color: var(--sail-white);
height: 60px;
overflow: hidden;
position: fixed;
white-space: nowrap;
width: 100%;
z-index: 100;
}
#account-nav a {
color: var(--sail-white);
}
#account-nav a:hover {
color: var(--navy-blue);
transition: 0.3s;
}
#account-nav-container {
display: flex;
} #language-btn i {
font-size: 30px;
} #logo{
filter: brightness(0) invert(1);
height: 35px;
width: auto;
} #primary-btn .bar {
background-color: #FFF;
border-radius: 2.5px;
height: 4px;
margin: 6px auto;
transition: 0.3s;
width: 30px;
} #primary-btn.mobile-effect #bar-1 {
transform: rotate(-45deg) translate(-8px, 7px);
}
#primary-btn.mobile-effect #bar-2 {
opacity: 0;
transform: rotate(-45deg) translate(-10px, 9px);
}
#primary-btn.mobile-effect #bar-3 {
transform: rotate(45deg) translate(-6px, -6px);
} #primary-nav {
right: -100%;
}
#language-nav {
left: -100%;
}
#language-nav,
#primary-nav {
background-color: rgba(255, 255, 255, .9);
bottom: 0px;
font-size: 1.4rem;
opacity: 0;
padding: 1rem;
position: fixed;
top: 60px;
width: 100%;
z-index: 100;
}
#language-nav ul,
#primary-nav ul {
padding: 0;
}
#language-nav li,
#primary-nav li {
background: var(--ocean-blue);
border-radius: 15px;
box-shadow: 1px 1px 5px rgb(14 17 17 / 25%);
cursor: pointer;
line-height: 1;
list-style-type: none;
margin: 0 0 1rem 0;
text-align: center;
width: 100%;
}
#primary-nav li:last-child {
background: var(--harbor-black);
margin-bottom: 0;
}
#language-nav li:hover,
#primary-nav li:hover {
background: var(--navy-blue);
transition: 0.3s;
}
#language-nav li a:hover {
color: var(--sail-white);
}
#primary-nav li a:hover {
color: var(--navy-blue);
}
#language-nav li a,
#primary-nav li a {
color: var(--sail-white);
display: block;
height: 100%;
padding: 0.75rem 1rem;
width: 100%;
} #language-nav.mobile-effect,
#primary-nav.mobile-effect {
opacity: 1;
transition: all 500ms cubic-bezier(.335, .010, .030, 1.360);
visibility: visible;
}
#language-nav.mobile-effect {
left: 0;
}
#primary-nav.mobile-effect {
right: 0;
}
@media (min-width: 992px) { #account-nav {
background-color: var(--sky-blue)!important;
font-size: 0.75rem;
height: 40px;
position: relative;
}
#account-nav .fa-whatsapp {
font-size: 14px;
position: relative;
top: 1px;
} #logo{
filter: unset;
height: 45px;
} #language-nav {
border-bottom-right-radius: 25px;
bottom: unset;
font-size: 0.8rem;
top: 40px;
width: 240px;
}
#language-nav li {
margin: 0 0 0.5rem 0;`
}
#language-nav li:last-child {
margin: 0;
}
#language-nav li {
padding: 0.25rem;
} #primary-nav {
background: var(--sail-white);
box-shadow: 1px 1px 5px rgb(14 17 17 / 25%);
font-size: 1.2rem;
height: 80px;
opacity: 1;
position: unset;
}
#primary-nav li {
background: unset;
box-shadow: unset;
display: inline-block;
font-size: .9rem;
margin-bottom: 0;
padding: unset;
text-align: center;
width: unset;
}
#primary-nav li:hover {
background: unset;
}
#primary-nav li a {
color: var(--ocean-blue);
}
#primary-nav li a:hover {
text-decoration: underline;
}
#primary-nav li:last-child {
background: var(--ocean-blue);
border-radius: 25px;
margin-left: 0.5rem;
}
#primary-nav li:last-child:hover {
background-color: var(--navy-blue);
transition: 0.3s;
}
#primary-nav li:last-child a{
color: var(--sail-white);
}
#primary-nav li:last-child a:hover {
color: var(--sail-white);
text-decoration: none;
} #primary-nav.mobile-effect {
transition: unset;
} #primary-nav.sticky {
background-color: var(--navy-blue)!important;
bottom: unset !important;
left: 0 !important;
position: fixed !important;
top: 0 !important;
}
#primary-nav.sticky img {
filter: brightness(0) invert(1)!important;
}
#primary-nav.sticky li a {
color: var(--sail-white)!important;
}
#primary-nav.sticky li:last-child {
background-color: var(--sail-white)!important;
cursor: pointer;
}
#primary-nav.sticky li:last-child:hover {
background-color: var(--ocean-blue)!important;
transition: 0.3s;
}
#primary-nav.sticky li:last-child a {
color: var(--navy-blue)!important;
}
#primary-nav.sticky li:last-child:hover a {
color: var(--sail-white)!important;
transition: 0.3s;
}
main.sticky {
margin-top: 75px;
}
} #secondary-nav {
background-image: var(--ocean-gradient-diagonal);
color: var(--sail-white);
}
#secondary-nav h3 {
color: var(--sail-white)!important;
font-size: 1rem!important;
margin: 2rem 0 0 0!important;
}
#secondary-nav ul {
margin: 1rem 0;
padding: 0;
}
#secondary-nav li {
line-height: 1;
list-style-type: none;
margin: 0.75rem 0;
}
#secondary-nav a {
color: var(--sail-white);
}
#secondary-nav a:hover {
color: var(--sky-blue);
}
#secondary-nav p {
line-height: 1;
margin: 0.75rem 0;
}
#secondary-nav .btn {
background-color: var(--sail-white);
border-radius: 15px;
color: var(--navy-blue);
font-size: 0.875rem;
margin-right: 0;
padding: 0.2rem 0.4rem;
}
#secondary-nav .btn:hover {
background-color: var(--navy-blue);
color: var(--sail-white);
}
#secondary-nav #socials i {
font-size: 1.5rem;
margin: 1rem 1rem 3rem 0;
} #legal-nav {
align-items: center;
background-color: var(--harbor-black);
color: var(--sail-white);
display: flex;
font-size: .75rem;
padding: .5rem;
text-align: center;
}
#legal-nav span, #legal-nav li{
display: inline-block;
padding: .5rem 0;
}
#legal-nav span:after, #legal-nav li:after{
content: "|";
}
#legal-nav span:last-child:after, #legal-nav li:last-child:after{
content: "";
margin: 0;
}
#legal-nav a, #legal-nav a:hover {
color: var(--sail-white);
padding: 0.5rem;
}
@media (min-width: 992px) {
#legal-nav {
height: 35px;
padding: .5rem;
}
}