@charset "UTF-8";
/* CSS Document */

*, *:before, *:after { box-sizing: inherit;}

@keyframes bounce {
0% { transform: scale(1);}
50% { transform: scale(1.1);}
100% { transform: scale(1);}
}

@keyframes hoverIn {
from { transform: translateX(-100%);}
to { transform: translateX(0);}
}

@keyframes hoverOut {
from { transform: translateX(0);}
to { transform: translateX(110%);}
}

.header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1px; height: 34px; width: 100%;  background: #d81841; overflow: hidden; z-index: 2;}
.header ul { margin: 0; padding: 0; list-style: none;}

@media screen and (max-width: 1024px) {
.header { height: 5px;}
button{ position: absolute; top: 2.5%; left: 93%!important; z-index: 9999!important;}	
}

@media screen and (max-width: 768px) {
button{ top: 2.5%; left: 90%!important;}	
}

@media screen and (max-width: 414px) {
button{ top: 1.5%; left: 86%!important;}	
}

@media screen and (min-width: 1025px) {
.headnav .nav-toggle { display: none;}
.header { justify-content: flex-start;}
.header .header__nav { max-width: 1280px; width: 100%; margin: 0 auto; position: relative; display: flex; }
}

.header__logo { width: 2rem; margin-right: 2rem;}
.header__nav { display: none; height: 100%;}

@media screen and (min-width: 1025px) {
.header__nav { width: calc(100% - 2rem * 2);}
}

.header__nav__list { display: flex; height: 100%; width: 98%; justify-content: flex-end;}
.header__nav__item { height: 100%; }

.header__nav__item:first-child { margin-left: 0;}
.header__nav__item:last-child { margin-right: 0;}

.header__nav__item--icons { display: flex; height: 100%; margin-left: auto;}
.header__nav__item__link { position: relative; display: flex; align-items: center; width: 100%; height: 100%; padding: 0 .7rem; color: #fff; font-size: .8rem; text-transform: uppercase; text-decoration: none; overflow: hidden;}

/* reset
.header__nav__item__link:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 5px; background-color: #dee9f3; transform: translateX(-100%);
  animation: hoverOut 0.3s cubic-bezier(0.77, 0, 0.175, 1) both;}
.header__nav__item__link:hover:after { animation: hoverIn 0.3s cubic-bezier(0.77, 0, 0.175, 1) both;}
*/

.header__nav__item__link--icon img { width: 20px;}
.header__nav__item__link--icon:after { display: none;}
.nav-toggle { display: block; width: 3rem;; height: 3rem; border-radius: 50%; background-color: #d81841; padding: 0; text-transform: uppercase; color: #fff; font-size: 0.6rem; border: none; overflow: hidden; outline: 0;}
.nav-toggle.is-active { background-color: #d81841; animation: bounce cubic-bezier(0.47, 0.07, 0.21, 1.6) 0.2s;}
.nav-toggle__content { display: flex; flex-direction: column; width: 3rem; height: 6rem; transform: translateY(-3rem); transition: all cubic-bezier(0.47, 0.07, 0.21, 1.4) 0.2s;}
.nav-toggle.is-active .nav-toggle__content { transform: translateY(0);}

.nav-toggle__open,
.nav-toggle__close { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;}

.nav-toggle__close { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.938%22%20height%3D%229.913%22%20viewBox%3D%220%200%209.938%209.913%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3.89%204.968L0%201.08%201.104%200l3.864%203.888L8.858%200l1.08%201.08-3.89%203.888%203.89%203.865-1.08%201.08-3.89-3.866-3.864%203.866L0%208.833l3.89-3.865z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 50% 50%;}

.nav { position: absolute; z-index: 99;top: 0; left: 0; display: flex; flex-direction: column; height: calc(100% - 3.75rem); width: 80%; height: 100%; background: #d81841; transition: all ease-out .2s; transform: translateX(-100%); opacity: .1;}
.js-nav ul.nav__list{ width: 90%; margin: 20px auto; background: #fff;}

.nav.is-open { opacity: 1; transform: translateX(0);}
.nav__list { display: flex; flex-direction: column;}
.nav__item { display: flex; width: 100%; opacity: 0; transform: translateX(-10px); transition: all cubic-bezier(0.47, 0.07, 0.21, 1.4) 0.2s;}
.nav__item a{ color: #333!important; font-size: 17px;}
.nav__item a i{ width: 20px!important;}

.nav.is-open .nav__item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.05s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.1s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.25s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}
.nav.is-open .nav__item:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; padding: 5px 0; margin: 5px 0; border-bottom: 2px solid #d81841;}

.nav__item__wrapper { display: flex; align-items: center; padding: 0.5rem 0.8rem; width: 100%; height: 100%; color: white; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); text-decoration: none;}

.nav__item__wrapper .nav__item__icon { opacity: .5;}
.nav__item__wrapper:active, .nav__item__wrapper.is-selected .nav__item__icon { opacity: 1;}
.nav__item__icon { width: 2rem; margin-right: 0.8rem; pointer-events: none;}

.nav--right { position: absolute; top: 3.75rem; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100% - 3.75rem); width: calc(100% - (2rem + 0.8rem * 2)); background-color: #08367E; color: white; box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.75); transition: all ease-out .2s; transform: translateX(100%); opacity: .1;}
.nav--right.is-open { opacity: 1; transform: translateX(0);}