/*                    MENU
*************************************************/

#masthead{
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 3;
height: auto;
pointer-events: none;
box-shadow: 0 0 5px #00000000;
border-bottom: 1px solid transparent;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.header-istop #masthead{
box-shadow: 0 0 5px #00000014;
}
#masthead:before {
  position: absolute;
  content: '';
  height: 1px;
  background: #00000021;
  top: 100%;
  width: 100%;
  z-index: 9999;
  opacity: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.header-istop #masthead:before {
  opacity: 1;
}
#masthead a{
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

.logo{
width: 15vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
transition: .3s ease;
pointer-events: initial;
padding: 15px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: relative;
}
.header-istop .logo{
padding: 5px;
}
.logo svg{
width: 60px;
height: 60px;
}

.header-istop .logo svg{
width: 40px;
height: 40px;
}
.base-line{
position: absolute;
bottom: 0px;
transform: translate(0, calc(100% - 10px));
transform-origin: bottom;
opacity: 1;
}
.header-istop .base-line{
opacity: 0;
pointer-events: none;
transform: translate(0, calc(100% - 30px));

}
.logo p{
margin-bottom: 0;
color: var(--white);
text-transform: uppercase;
font-weight: 300;
font-size: 12px;
text-align: center;
}

.logo p:nth-of-type(2){
font-size: 9px;
}


.header-istop.up-scroll .logo{
padding: 55px 15px 25px 15px;
}
.header-istop .logo{
background-color: var(--white);
}


.header-istop .docto-logo{
background-color: var(--white);
}

.header-istop .docto-logo svg path,
.header-istop .logo svg path{
fill: var(--black);
}

.header-istop .docto-logo a,
.header-istop .logo p{
color: var(--black);
}

.header-istop .main-menu {
background-color: var(--white);
}


.docto-logo{
width: calc(15vw + 1px);
height: 150%;
justify-content: center;
align-items: center;
background-color: transparent;
transition: .3s ease;
pointer-events: initial;
display: flex;
flex-direction: column;
position: absolute;
left: auto;
right: 0;
top: 0;
z-index: 9;
padding-top: 30px;
padding-bottom: 0px;
border-bottom: 1px solid #d7cbc178;
border-left: 1px solid transparent;
}

.down-scroll .docto-logo,
.classic-header.down-scroll .docto-logo,
.up-scroll.header-istop .docto-logo {
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
}
.up-scroll.header-istop .docto-logo {
    padding-top: 30px;
}
.header-istop .docto-logo{
border-bottom: 1px solid #fff;
border-left: 1px solid #00000021;
}
.header-istop .docto-logo a{
font-size: 10px;
}
.header-istop .docto-logo{
padding-top: 0px;
}
.header-istop.up-scroll .docto-logo,
.classic-header.up-scroll .docto-logo,
{
padding-top: 30px;
height: 100%;
}
.docto-logo svg {
  width: 60%;
  margin: auto auto 0 auto;
}

.docto-logo a{
color: var(--white);
font-weight: 300;
letter-spacing: 1.5px;
text-align: center;
text-decoration: none;
position: relative;
font-size: 12px;
height: 100%;
width: 100%;
}
.top-right-mask,
.top-left-mask{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
opacity: 1;
background: var(--tan);
z-index: -1;
-webkit-transition: background 300ms ease-out;
-moz-transition: background 300ms ease-out;
-ms-transition: background 300ms ease-out;
-o-transition: background 300ms ease-out;
transition: background 300ms ease-out;
}
.top-right-mask{
transform-origin: top right;
}
.top-left-mask{
transform-origin: top left;
}
.header-istop .top-right-mask{
background: var(--white);
opacity: 1;
}
.header-istop .top-right-mask{
background: var(--white);
opacity: 1;
}

.header-istop .docto-logo a:nth-of-type(2):after{
background-color: var(--black);
}

.logo svg path{
fill: var(--white);
}

.docto-logo svg{
transform: scale(1);
}
.docto-logo svg path{
fill: var(--white);
transition: .3s ease;
}

.top-menu{
position: fixed;
right: 0;
top: 0;
width: calc(85% - 1px);
height: 30px;
background-color: var(--grey);
color: var(--white2);
z-index: 10;
align-items: center;
justify-content: flex-end;
pointer-events: initial;
transform: translate(0px, 0px);
}
.header-istop .top-menu {
width: 100%;
}
.down-scroll .top-menu,
.classic-header.down-scroll .top-menu
{
transform: translate(0px, -100%);
}
.down-scroll.header-istop .main-menu,
.classic-header.down-scroll.header-istop .main-menu {
  padding-top: 0px;
}
.top-menu p,
.top-menu a{
margin: 0 22px;
color: var(--white2);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

/* MAIN MENu */
.main-menu{
flex-direction: row;
width: 85vw;
background-color: var(--tan);
position: relative;
top: 0;
margin-left: auto;
margin-top: 0;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1.5px;
z-index: 2;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: linear;
pointer-events: initial;
}
.main-menu:before {
  position: absolute;
  left: 0;
  width: 25vw;
  height: 100%;
  background: var(--tan);
  content: "";
  transform: translate(-100%, 0px) scaleX(0);
  transform-origin: center right;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.main-menu a{
  color: #000;
  text-decoration: none!important;
}
.nav-anim .main-menu{
transition: all 0.1s ease;
}
.header-istop .main-menu{
transform: translateY(0)!important;
transition: all 0.3s ease;
}

.header-istop .main-menu > .nav-open-container > ul > li > ul,
.classic-header .main-menu > .nav-open-container > ul > li > ul{
top: 100%;
bottom: auto;
}

.global-menu{
width: 100%;
height: 100%;
display: flex;
}


.sub-menu a{
text-transform: capitalize;
font-weight: normal;
}
.main-menu > .nav-open-container {
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-right: calc(15vw + 0px);
    margin: 0;
    justify-content: center;
    text-decoration: none;
    list-style-type: none;
    transform: translate(0px, 0px);
    padding-top: 0px;
    border-left: 1px solid transparent;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.header-istop .main-menu > .nav-open-container {
  border-left: 1px solid #00000021;
}
.main-menu > .nav-open-container > ul {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 100%;
    padding: 0;
    margin: auto;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.header-istop.up-scroll .main-menu > .nav-open-container > ul{
  padding-top: 30px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}



/* GLOBAL LINK */
.main-menu ul li a {
  opacity: 0.8;
  font-weight: 500;
  -webkit-text-stroke : 0px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.main-menu ul li:hover > a {
  opacity: 1;
  -webkit-text-stroke : 0.05em;
}

/* MAIN ITEMS */
.main-menu > .nav-open-container > ul > li{
  height: 100%;
  display: flex;
}


.main-menu > .nav-open-container > ul > li::after {
  content: "";
  position: absolute;
  background: transparent;
  width: 100vw;
  height: calc(0vh - 0%);
  right: 0px;
  bottom: 100%;
  z-index: -1;
  -webkit-transition: all 0ms ease-out;
  -moz-transition: all 0ms ease-out;
  -ms-transition: all 0ms ease-out;
  -o-transition: all 0ms ease-out;
  transition: all 0ms ease-out;
}

.main-menu > .nav-open-container > ul > li > a{
font-size: 12px!important;
height: min-content;
display: flex;
align-items: center;
justify-content: center;
padding: .5em 20px;
margin: auto;
height: 100%;
position: relative;
letter-spacing: 1px!important;
font-weight: 700;
width: 100%;
}

/* GLOBAL SUB MENU */
.sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    margin: 0px;
    position: absolute;
    opacity: 0;
    list-style: none;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.sub-menu li a{
    position: relative;
    width: 100%;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
/* FIRST SUB MENU */
.main-menu > .nav-open-container > ul > li > .sub-menu {
    bottom: 100%;
    width: auto;
    min-width: fit-content;
    left: -15vw;
    padding: 30px 0vw 30px 15vw;
    list-style: none;
    z-index: 4;
    list-style: none;
    background: #fff;
    transform: translate(-100%, 0);
    transition-delay: 0s;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu {
  opacity: 1;
  transform: translate(0%, 0);
  transition-delay: 0.6s;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li{
  padding: 0;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > a{
  padding: 15px 7vw 15px 0px;
  width: 100%;
  display: block;
  font-weight: 700;
}
/* SECOND SUB MENU */
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu {
    left: 100%;
    bottom: 0;
    padding: 30px 0px;
    width: 0;
    max-width: 33vw;
    font-size: 14px;
    z-index: -1;
    background: var(--light-grey);
    transition-delay: 0s;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu {
  opacity: 1;
  width: 100%;
  transform: translate(0%, 0);
  transition-delay: 0.6s;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li{
  padding: 0px;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li a{
  padding: 8px 0px 8px 0px;
  display: block;
  letter-spacing: 0;
}
.full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu > li a,
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu > li a{
  padding: 8px 0px 8px 30px;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li a > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  flex-direction: column;
  padding-right: 0px;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu > li a > span, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu > li a > span{
  padding-right: 30px;
}
/* THIRD SUB MENU */
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu {
    left: 100%;
    bottom: 0;
    padding: 30px 0px;
    width: 0;
    max-width: 33vw;
    font-size: 14px;
    z-index: -2;
    background: var(--tan);
    transition-delay: 0s;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu {
  opacity: 1;
  width: 100%;
  transform: translate(0%, 0);
  transition-delay: 0.6s;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li {
  padding: 0px;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a{
  padding: 8px 0px 8px 0px;
  display: block;
  letter-spacing: 0;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu > li > a, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu > li > a{
  padding: 8px 0px 8px 30px;
}
.main-menu > .nav-open-container > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  flex-direction: column;
  padding-right: 0px;
}
/* .full-width-nav .main-menu > .nav-open-container > ul > li:hover > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu > li > a > span, */
.full-width-nav .main-menu > .nav-open-container > ul > li.active > .sub-menu > li:hover > .sub-menu > li:hover > .sub-menu > li > a > span{
  padding-right: 30px;
}
/* ARROW SUB NAV */
.menu-item-has-children > a:after{
  content: '';
  margin: auto;
  margin-left: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 3px;
  border-color: transparent transparent transparent #000000;
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 999;
  opacity: 0.3;
  transform: translate(-100%, -50%) rotate(0deg);
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.full-width-nav .menu-item-has-children:hover > a:after{
  opacity: 1;
}
.main-menu > .nav-open-container > ul > li.menu-item-has-children > a:after{
right: 0px;
transform: translate(-100%, -50%) rotate(0deg)
}
.full-width-nav .main-menu > .nav-open-container > ul > li.menu-item-has-children:hover > a:after{
transform: translate(-100%, -50%) rotate(-90deg);
}
/* .header-istop .main-menu > .nav-open-container > ul > li.menu-item-has-children:hover > a:after, */
.header-istop .main-menu > .nav-open-container > ul > li.menu-item-has-children.active > a:after{
transform: translate(-100%, -50%) rotate(90deg);
}

/* .full-width-nav .main-menu li:hover > ul > li:hover > a:after, */
/* .full-width-nav .main-menu li:hover > ul > li:hover > ul > li:hover > a:after, */
/* .full-width-nav .main-menu li:hover > ul > li:hover > ul > li:hover > ul > li:hover > a:after, */
.full-width-nav .main-menu li.active > ul > li:hover > a:after,
.full-width-nav .main-menu li.active > ul > li:hover > ul > li:hover > a:after,
.full-width-nav .main-menu li.active > ul > li:hover > ul > li:hover > ul > li:hover > a:after {
  border-width: 3.5px 0 3.5px 3px;
  border-color: transparent transparent transparent #fff;
  transform: translate(calc(150% + 15px), -50%) rotate(0deg) scale(3);
}

.main-menu > .nav-open-container > ul > li > ul > li > ul > li.menu-item-has-children:hover a:after {
  border-color: transparent transparent transparent var(--light-grey)!important;
}


.main-menu > .nav-open-container > ul > li > ul > li > a:before {
  content: '';
  width: 0px;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  display: block;
  position: absolute;
  left: 0px;
  top: calc(50% - 1px);
  transform: translate(calc(-100% - 15px), 0px);
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.full-width-nav .main-menu > .nav-open-container > ul > li > ul > li:hover > a:before {
  width: 25px;
}

/* FULL WIDTH NAV */
.full-width-nav .main-menu:before {
  transform: translate(-100%, 0px) scaleX(1);
}
.full-width-nav.header-istop .main-menu:before,
.full-width-nav.classic-header .main-menu:before {
  transform: translate(-100%, 0px) scaleX(0);
}

/* IMAGE MENU */
.main-menu .submenu-img-container {
    position: absolute;
    height: auto;
    bottom: 100%;
    right: 0;
    z-index: -2;
    opacity: 1;
    width: 0vw;
    background: #fff;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
}
.main-menu .submenu-img {
    opacity: 1;
    width: 100vw;
    background: #fff;
    overflow: hidden;
    transform-origin: center right;
}

.main-menu .submenu-img > img {
    object-fit: cover;
    height: 100%;
    max-width: none;
    width: 100vw;
    margin-left: auto;
    display: flex;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    transform-origin: center right;
    white-space: nowrap;
    position: absolute;
    right: 0;
}

.menu-mask {
  content: '';
  width: 100vw;
  height: 0;
  display: block;
  background-color: var(--white);
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: -2;
}
.body-mask {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0;
  transform-origin: center bottom;
  z-index: 2;
  display: none;
}

.header-istop .main-menu .submenu-img-container,
.header-istop .menu-mask,
.header-istop .main-menu > .nav-open-container > ul > li::after,
.classic-header .main-menu .submenu-img-container,
.classic-header .menu-mask,
.classic-header .main-menu > .nav-open-container > ul > li::after{
  top: 100%;
  bottom: auto;
}

/* ARROWS */

.arrows{
height: 100%;
width: 15vw;
position: absolute;
right:0;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.down-scroll .arrows,
.classic-header.down-scroll .arrows
{
opacity: 0;
}
.header-istop .arrows{
opacity: 0;
pointer-events: none;
}

.arrows svg{
position: relative;
transform: scale(0.6);
}

.arrows svg:nth-child(1){
top: 7px;
}
.arrows svg:nth-child(2){
top: 5px;
}
.arrows svg:nth-child(3){
top: 3px;
}

.arrows svg > path{
animation: jumNext 1.8s ease infinite;
opacity: 0;
}

.arrows svg > path{
fill: var(--black);
}

.arrows svg:nth-child(2) > path{
animation-: 0.2s;
}

.arrows svg:nth-child(3) > path{
animation-delay: 0.3s;
}

.arrows svg:nth-child(4) > path{
animation-delay: 0.4s;
}

@keyframes jumNext {
0% {
  opacity: 0;
}
40% {
  opacity: 1;
}
80% {
  opacity: 0;
}
}



/* CLASSIC HEADER */
.classic-header #masthead {
    box-shadow: 0 0 5px #00000014;
}
.classic-header.full-width-nav #masthead:before{
  opacity: 1;
}
.classic-header .logo {
    padding: 5px 15px 50px 15px;
    background-color: var(--white);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.classic-header.down-scroll .logo {
    padding: 5px 15px 5px 15px;
}
.classic-header .base-line {
    position: absolute;
    bottom: 0px;
    transform: translate(0, calc(0% - 17px));
    transform-origin: bottom;
    opacity: 1;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.classic-header.down-scroll .base-line {
    opacity: 0;
}
.classic-header .docto-logo svg path,
.classic-header .logo svg path {
    fill: var(--black);
}
.classic-header .docto-logo a,
.classic-header .logo p {
    color: var(--black);
}
.classic-header .main-menu {
    background-color: var(--white);
}
.classic-header .main-menu > .nav-open-container {
    border-left: 1px solid #00000021;
}
.classic-header .main-menu > .nav-open-container > ul {
    padding-top: 30px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.classic-header.down-scroll .main-menu > .nav-open-container > ul {
    padding-top: 0px;
}
.classic-header .docto-logo {
    padding-top: 30px;
    height: 100%;
    border-left: 1px solid #00000021;
    border-bottom: 0;
}
.classic-header .docto-logo svg {
    transform: scale(1);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.classic-header.down-scroll .docto-logo svg {
    transform: scale(0.8);
}
.classic-header .arrows {
    height: auto;
    width: 15vw;
    position: fixed;
    right: 0;
    top: auto;
    bottom: 70px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.classic-header .arrows svg > path {
    fill: var(--white);
}

.classic-header .logo svg{
  width: 60px;
  height: 60px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}
.classic-header.down-scroll .logo svg{
  width: 40px;
  height: 40px;
}
.classic-header.header-istop.up-scroll .logo {
    padding: 30px 15px 50px 15px;
}