@media (max-width: 1180px) {
.navigation {
width: 255px;
height: 100vh;
min-height: 560px;
position: absolute;
top: 0;
right: -100%;
background: #fff;
z-index: 40;
padding-top: 92px;
}
}
@media (max-height: 520px) {
.navigation {
overflow: auto;
}
}
.navigation__list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
float: right;
}
.navigation__list a {
display: block;
color: #545454;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.4px;
}
@media (min-width: 1180px) {
.navigation__list li {
float: left;
margin-left: 40px;
}
.navigation__list li:first-child {
margin-left: 0;
}
.navigation__list a {
padding: 34px 0;
transition: 0.5s ease-in-out;
position: relative;
}
.navigation__list a:after {
content: " ";
height: 4px;
top: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.navigation__list a:hover,
.navigation__list li.item--active a {
transition: 0.5s ease-in-out;
font-weight: 400;
padding-top: 30px;
color: #000;
}
.navigation__list a:hover:after,
.navigation__list li.item--active a:after {
animation: expandline 1s;
background: #aad00c;
width: 100%;
}
}
@media (max-width: 1180px) {
.navigation__list {
width: 100%;
text-align: left;
}
.navigation__list li {
padding-left: 35px;
margin-bottom: 18px;
}
.navigation__list a {
padding-top: 5px;
padding-bottom: 5px;
}
.navigation__list a:hover,
.navigation__list li.item--active a {
color: #000;
font-weight: 400;
position: relative;
}
.navigation__list a:hover:before,
.navigation__list li.item--active a:before {
content: " ";
width: 7px;
height: 7px;
background: #00a6af;
border-radius: 50%;
position: absolute;
left: -17px;
top: 13px;
}
}
@media (min-width: 1180px) {
.header--scrolled .navigation__list a {
padding: 29px 0;
}
}
.item--gallery {
display: none;
margin-right: 18px;
}
@media (max-width: 1550px) {
.item--gallery {
display: block;
}
}
.nav-toggle {
background: transparent;
display: block;
cursor: pointer;
transform: translate(0%, -50%);
}
.nav-toggle__label {
margin-bottom: 0;
margin-top: 4px;
float: right;
text-transform: uppercase;
}
.nav-toggle .nav-toggle__icon,
.nav-toggle .nav-toggle__icon:before,
.nav-toggle .nav-toggle__icon:after {
cursor: pointer;
border-radius: 3px;
height: 3px;
width: 25px;
background: #aad00c;
position: absolute;
left: 0;
top: 50%;
display: block;
content: '';
}
.nav-toggle .nav-toggle__icon:before {
top: -7px;
}
.nav-toggle .nav-toggle__icon:after {
top: 7px;
}
.nav-toggle .nav-toggle__icon,
.nav-toggle .nav-toggle__icon:before,
.nav-toggle .nav-toggle__icon:after {
transition: all 0.5s ease-in-out;
}
.nav-toggle.nav-toggle--active .nav-toggle__icon {
background-color: transparent;
}
.nav-toggle.nav-toggle--active .nav-toggle__icon:before,
.nav-toggle.nav-toggle--active .nav-toggle__icon:after {
top: 0;
}
.nav-toggle.nav-toggle--active .nav-toggle__icon:before {
transform: rotate(135deg);
}
.nav-toggle.nav-toggle--active .nav-toggle__icon:after {
transform: rotate(-135deg);
}
.nav-toggle {
width: 75px;
position: absolute;
right: 20px;
top: 45px;
z-index: 60;
display: none;
}
@media (max-width: 1180px) {
.nav-toggle {
display: block;
}
}