/** Variables **/
/** Extends **/
#loginpanel, body.loginpanel-open #loginpanel {
  transition-timing-function: cubic-bezier(0.4, 0.82, 0.63, 0.2);
  transition: all 0.8s, opacity 0.76s, height 0.76s, transform 0.76s, background 0.5s, font-size 0s;
}

.arrowlink:hover::before, .distributor-portal-link:hover::before, #loginpanel .login input#button:hover, body.loginpanel-open .headerlinks, body.loginpanel-open .headertext, body.loginpanel-open .navbar .navbar-end {
  transition-timing-function: cubic-bezier(0.4, 0.82, 0.63, 0.2);
  transition: all 0.32s, opacity 0.28s, height 0.28s, transform 0.28s, background 0.22s, font-size 0s;
}

.arrowlink::before, .distributor-portal-link::before {
  transition-timing-function: cubic-bezier(0.4, 0.82, 0.63, 0.2), font-size 0s;
  transition: 0.18s;
}

body.loginpanel-open .navbar .navbar-brand .rowmarklogo #whitelogo, body.loginpanel-open .navbar .navbar-brand .rowmarklogo #regularlogo {
  transition-delay: 0.26s;
}

.arrowlink:hover::before, .distributor-portal-link:hover::before {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
}

/** **/
body {
  overflow-x: hidden;
}

body:before {
  transition: 0.4s;
  opacity: 0;
  background: rgba(2, 2, 2, 0);
}

body.darkmode {
  background: #004186;
}
body.darkmode p {
  color: #fff !important;
}
body.darkmode .testimonialarea #testimonial, body.darkmode .testimonialarea #name, body.darkmode .testimonialarea #title {
  color: #fff !important;
}
body.darkmode .testimonialarea .sheetgraphic #blue {
  background: #fff !important;
  opacity: 0.95;
}
body.darkmode .navbar a p {
  color: #fff;
}
body.darkmode .navbar p:before {
  background: #fff;
}
body.darkmode .navbar #locationicon, body.darkmode .navbar #searchicon {
  fill: #fff !important;
}
body.darkmode .navbar #whitelogo {
  opacity: 1;
  display: block;
}
body.darkmode .navbar #regularlogo {
  opacity: 0;
}
body.darkmode .navbar .burger span {
  color: #fff;
}
body.darkmode .navbar .navbar-burger:before {
  color: #fff;
}
body.darkmode .navbar .navbar-menu.is-open a p {
  color: #004186;
}
body.darkmode .navbar.scrolled a p {
  color: #004186 !important;
}
body.darkmode .navbar.scrolled p:before {
  background: #004186;
}
body.darkmode .navbar.scrolled #locationicon, body.darkmode .navbar.scrolled #searchicon {
  fill: #004186 !important;
}
body.darkmode .navbar.scrolled #regularlogo {
  opacity: 1;
}
body.darkmode .navbar.scrolled #whitelogo {
  opacity: 0;
}
body.darkmode .navbar.scrolled .burger span {
  color: #004186;
}
body.darkmode .navbar.scrolled .navbar-burger:before {
  color: #004186;
}

body.darkmode.productpanel-open .navbar #locationicon, body.darkmode.productpanel-open .navbar #searchicon {
  fill: #004186 !important;
}

/** Distributor Login Panel**/
body.loginpanel-open .navbar .navbar-brand .navbar-burger:before, body.loginpanel-open .navbar .navbar-brand .burger span {
  color: #004186;
}
body.loginpanel-open .navbar .navbar-brand .rowmarklogo #regularlogo {
  opacity: 1;
}
body.loginpanel-open .navbar .navbar-brand .rowmarklogo #whitelogo {
  opacity: 0;
}
body.loginpanel-open .navbar .navbar-end {
  opacity: 0.25;
  user-select: none;
  pointer-events: none;
}
body.loginpanel-open .headerlinks, body.loginpanel-open .headertext {
  opacity: 0.3;
  user-select: none;
  pointer-events: none;
}

body.loginpanel-open #loginpanel {
  left: 0%;
}

#loginpanel {
  position: fixed;
  width: calc(344px + 16.4584vw);
  top: 0;
  bottom: 0;
  left: -125%;
  background: #fff;
  z-index: 80;
  opacity: 1;
  box-shadow: 2px 1px 40px rgba(2, 2, 2, 0.2);
}
#loginpanel .login ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #004186;
  font-family: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;
  opacity: 1; /* Firefox */
}
#loginpanel .login :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #004186;
  font-family: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;
}
#loginpanel .login ::-ms-input-placeholder { /* Microsoft Edge */
  color: #004186;
  font-family: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;
}
#loginpanel .login input[type=username], #loginpanel .login input[type=password] {
  width: 344px !important;
  height: 48px;
  margin-bottom: 20px;
  border: 0;
  border-bottom: 1px solid #004186;
  color: #004186;
  font-family: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;
}
#loginpanel .login input[type=username] input, #loginpanel .login input[type=username] input:focus, #loginpanel .login input[type=password] input, #loginpanel .login input[type=password] input:focus {
  outline-color: rgba(2, 2, 2, 0) !important;
  -webkit-focus-ring-color: rgba(2, 2, 2, 0) !important;
  focus-ring-color: rgba(2, 2, 2, 0) !important;
}
#loginpanel .login input[type=password] {
  margin-bottom: 74px;
}
#loginpanel .login input#button {
  width: 344px !important;
  height: 56px;
  border-radius: 4px;
  border: 0;
  color: #fff;
  background: linear-gradient(to right, #00aeef 0%, #1B71BA 100%);
  transition: 0.22s;
  text-align: center;
  cursor: pointer;
}
#loginpanel .login input#button:hover {
  box-shadow: 1px 2px 6px rgba(2, 2, 2, 0.2);
}
#loginpanel .wrapper {
  width: 100%;
  padding-left: 9.6vw;
  padding-right: 9.6vw;
  height: 734px;
  position: absolute;
  top: 58%;
  left: 45.5%;
  transform: translateX(-50%) translateY(-50%);
}
#loginpanel .wrapper h3.title {
  font-weight: 700;
  font-size: 180% !important;
  margin-bottom: 86px;
  white-space: nowrap;
}

/** BG Fade **/
body.loginpanel-open:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  background: rgba(22, 22, 22, 0.3) !important;
  opacity: 1 !important;
  z-index: 70;
  animation: fadein 0.8s;
}

.arrowlink, .distributor-portal-link {
  display: inline-block;
  float: left;
  position: relative;
  clear: both;
}

.arrowlink::before, .distributor-portal-link::before {
  position: absolute;
  display: block;
  content: "";
  background: url("../images/icons/arrowlong.png");
  background-size: 30px;
  background-repeat: no-repeat;
  top: 6px;
  right: -38px;
  bottom: 0;
  width: 30px;
  height: 30px;
  z-index: 100;
  opacity: 1;
  transform: translateX(-1px);
}

.arrowlink:hover::before, .distributor-portal-link:hover::before {
  opacity: 1;
  transform: translateX(4px);
}

.login, .logout {
  font-size: 140% !important;
}

.testimonialarea {
  background: transparent;
}

@media screen and (max-width: 1279px) {
  .headerlinks {
    padding-left: 0;
  }
}
@media screen and (max-width: 1105px) {
  #loginpanel {
    width: 100%;
  }
  #loginpanel .wrapper {
    width: 344px;
    max-width: 92%;
    padding-left: 0;
    padding-right: 0;
    left: 50%;
  }
  .breakremove {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  #header .columns .column {
    min-height: 90px;
  }
  #header .title.is-1 {
    font-size: 200% !important;
  }
  #header .title.is-3 {
    font-size: 120% !important;
  }
  #header .distributor-portal-link {
    transform: translateY(51vh);
  }
  #header .distributor-portal-link::before {
    top: 3.5px;
  }
  #header .headerlinks .title.is-3 {
    font-size: 190% !important;
  }
  #header .headerlinks .title.is-3:before {
    background-size: 30px;
    height: 30px;
    width: 30px;
    right: -40px;
    top: 30%;
  }
  #loginpanel .backbutton p {
    transform: translateY(8vh);
  }
  #loginpanel .wrapper {
    left: 53.5%;
  }
  #loginpanel .wrapper h3.title {
    font-size: 24px !important;
    margin-bottom: 38px;
  }
  .login input[type=username], .login input[type=password], .login input#button {
    max-width: 92% !important;
  }
  #loginpanel #loginback .backbutton {
    transform: translateY(20vh);
  }
  #loginpanel .login {
    transform: translateY(18vh);
  }
}
@media screen and (min-width: 1106px) {
  #loginpanel .login input[type=username], #loginpanel .login input[type=password] {
    outline: none !important;
  }
}

/*# sourceMappingURL=distributors.css.map */