/*
 * -- MENU STYLES --
 * I want to customomize my navigation menu on top of the page
 */
.custom-wrapper {
  text-transform: uppercase;
  font-size: 70%;
  font-weight: bold;
  background-color: #1f8dd6;
  margin-bottom: 1em;
  -webkit-font-smoothing: antialiased;
  /*height: 2.9em;*/
  overflow: visible;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  -ms-transition: height 0.5s;
  transition: height 0.5s;
  /*so the menu is kept at the top of the screen always*/
  position: fixed;
  width: 100%;
  z-index: 5;
  /*make the wrapper a bit thicker*/
  padding-top: 1em;
  /*padding-bottom:1em;*/
}
.custom-wrapper > div:nth-child(2) {
  padding-bottom: 3px;
}
.custom-wrapper.open {
  /*height of the box when the menu is vertically open on small screen*/
  height: 25em;
  /*In case vertical-menu needs to be scrolled vertically*/
  overflow-y: scroll;
}
/*Constrain logo size for smaller screen like iPhone4*/
.ev-logo {
  width: 180px;
}
.custom-menu-3 {
  text-align: right;
}

.ev-nav-phone {
  color: white;
  position: absolute;
  top: 0;
  margin-top: 1.3em;
  right: 4em;
  display: none;
}
.ev-menu-onboarding-step {
  color: #a2d2f2;
  margin: 0em;
  padding: 0 0 0 1em;
}
.ev-menu-logo-with-subtitle {
  padding: 0 0 0 1em;
  height: 15px;
}
.custom-toggle {
  width: 34px;
  height: 34px;
  display: block;
  position: absolute;
  margin-top: 1em;
  top: 0;
  right: 0;
  display: none;
}

.custom-toggle .bar {
  background-color: white;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 100px;
  position: absolute;
  top: 18px;
  right: 7px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}

.custom-toggle .bar:first-child {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.custom-toggle.x .bar {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*Recolor the default pure menu styles*/
.pure-menu-link {
  color: #a6adba !important;
}

/*Color the link items of the menu when hover and focus*/
.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
  background: none;
  border: none;
  color: white;
  opacity: 100%;
}
/*Add a small space between icon and text*/
.pure-menu-link i {
  margin-right: 7px;
}
.fa-i-right {
  margin-right: 7px;
}
.custom-wrapper li a:hover,
.custom-wrapper li a:focus {
  /*background: none;*/
  border: none;
  /*color:#aecfe5;*/
}
.pure-menu-children {
  background: #1f8dd6;
}
.pure-menu-children li a {
  border-left: 2px solid #1f8dd6;
}
.pure-menu-children li a:hover,
.pure-menu-children li a:focus {
  border-left: 2px solid #aecfe5;
}
/* We hide the menu headers from the menu when it is large screen */
.pure-menu-horizontal .pure-menu-heading {
  display: none;
}
.pure-menu-heading {
  color: #aecfe5;
}
/*Customize the language menu item in the vertical menu*/
.ev-language-heading {
  width: 100%;
  border-top: 1px solid #aecfe5;
}
.ev-language-heading i {
  margin-right: 7px;
}
.ev-sub-menu {
  margin-left: 2.5em;
  font-size: 80%;
}

/*
 * -- TABLET (AND DOWN) MEDIA QUERIES --
 * On tablet and smaller devices, we want to keep some things.
 */
@media (max-width: 47.999em) {
  /* We un-hide the vertical menu*/
  .custom-menu-3 {
    text-align: left;
  }

  .custom-toggle {
    display: block;
  }

  /* We un-hide the menu headers */
  .pure-menu-heading {
    display: inline-block;
  }
  .ev-nav-phone {
    display: block;
  }
  .hide-from-menu-when-small {
    display: none;
  }
  /*We collapse the menu*/
  .custom-wrapper {
    font-size: 100%;
    font-weight: normal;
    overflow: hidden;
    height: 4.5em;
  }
  li.pure-menu-item.ev-hide-menu-item-when-large {
    display: block;
  }
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {
}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
  /*Menu size*/
  .custom-wrapper {
    font-size: 100%;
    font-weight: normal;
    padding-top: 0.75em;
    /*padding-bottom:0.5em;*/
  }
  .custom-wrapper > div:nth-child(2) {
    padding-bottom: 0.5em;
  }
}
/*Large desktop*/
@media (min-width: 90em) {
}
/*horizontal phone*/
@media (max-height: 35.5em) and (orientation: landscape) {
}
/*
 * -- PRINTING style --
 * When user print a web page
 */
@media print {
}