/* Hide our navbar - this is so it doesn't show up on mobile */
#hype_mobile_nav {
  display: none;
}

#hype_mobile_submenu {
  display: none;
}
.et_header_style_fullscreen .et_slide_in_menu_container {
  display: none!important;
}

/* Hide the standard Divi navigation and display the Hype Menu instead */
@media(max-width: 981px) {
  #main-header {
    display: none;
  }
  #hype_mobile_nav {
    display: block;
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0!important;
    top: 0;
    left: 0;
    z-index:99;
  }
  #hype_mobile_submenu {
    display: block;
  }

}

#hype_mobile_menu_icon {
  display: inline-block;
  width: 32px;
  cursor: pointer;
}

/* Make all the columns vertically centered */
#hype_mobile_nav .et_pb_column {
    margin-top: auto!important;
    margin-bottom: auto!important;
}

/* Set a max-width for the logo */
#hype_mobile_menu_logo {
  max-width: 75%!important;
}

/* Set out the column widths and make !important so they don't get resized */

/* Hamburger icon column */
#hype_mobile_nav #hype_mobile_menu_col1 {
  width: 10%!important;
}
/* Logo column */
#hype_mobile_nav #hype_mobile_menu_col2 {
  width: 40%!important;
}
/* Phone Icon column */
#hype_mobile_nav #hype_mobile_menu_col3 {
  width: 12%!important;
}
/* Email Icon column */
#hype_mobile_nav #hype_mobile_menu_col4 {
  width: 12%!important;
}
/* Subscribe CTA button column */
#hype_mobile_nav #hype_mobile_menu_col5 {
  width: 26%!important;
}

/* Set to display empty columns in case you don't want them all to show something */
#hype_mobile_nav .et_pb_column_empty {
    display: block!important;
}

#hype_mobile_menu .et_pb_column .et_pb_module {
  margin-bottom: 0px!important;
}

/* Define the initial state of the three hamburger lines */
#hype_mobile_menu_icon_line1 {
  d: path("M5.0916789,20.818994C5.0916789,20.818994,58.908321,20.818994,58.908321,20.818994");
}
#hype_mobile_menu_icon_line2 {
  d: path("m 5.1969746,31.909063 53.8166424,0");
  opacity: 1;
}
#hype_mobile_menu_icon_line3 {
  d: path("M5.0916788,42.95698C5.0916788,42.95698,58.908321,42.95698,58.908321,42.95698");
}

/* Two classes (.menu_open, .menu_closed) are toggled using JQuery to the hamburger menu lines on clicking, triggering the animation */
/* Apply animations for the closed menu icon */
#hype_mobile_menu_icon_line1.menu_closed {
  animation: line1_closed 0.5s ease forwards;
}
#hype_mobile_menu_icon_line2.menu_closed {
  animation: line2_closed 0.5s ease forwards;
  animation-delay: 0.2s;
}
#hype_mobile_menu_icon_line3.menu_closed {
  animation: line3_closed 0.5s ease forwards;
}

/* Apply animations for the opened menu icon */
#hype_mobile_menu_icon_line1.menu_open {
  animation: line1_open 0.5s ease forwards;
  animation-delay: 0.2s;
}
#hype_mobile_menu_icon_line2.menu_open {
  animation: line2_open 0.5s ease forwards;
}
#hype_mobile_menu_icon_line3.menu_open {
  animation: line3_open 0.5s ease forwards;
  animation-delay: 0.2s;
}

/* Animation for the top line on opening */
@keyframes line1_open {
  from {d: path("M5.0916789,20.818994C5.0916789,20.818994,58.908321,20.818994,58.908321,20.818994")}
  to {d: path("M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035");}
}
/* Animation for the middle line on opening */
@keyframes line2_open {
  from {opacity: 1;}
  to {opacity: 0;}
}
/* Animation for the bottom line on opening */
@keyframes line3_open {
  from {d: path("M5.0916788,42.95698C5.0916788,42.95698,58.908321,42.95698,58.908321,42.95698")}
  to {d: path("M12.972944,12.882035000000002C12.972944,12.882035000000002,51.027056,50.936147,51.027056,50.936147")}
}

/* Animation for the top line on closing */
@keyframes line1_closed {
  from {d: path("M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035");}
  to {d: path("M5.0916789,20.818994C5.0916789,20.818994,58.908321,20.818994,58.908321,20.818994")}
}
/* Animation for the middle line on closing */
@keyframes line2_closed {
  from {opacity: 0;}
  to {opacity: 1;}
}
/* Animation for the bottom line on closing */
@keyframes line3_closed {
  from {d: path("M12.972944,12.882035000000002C12.972944,12.882035000000002,51.027056,50.936147,51.027056,50.936147")}
  to {d: path("M5.0916788,42.95698C5.0916788,42.95698,58.908321,42.95698,58.908321,42.95698")}
}

/* Pulsing circle around the opened menu icon */
#hype_mobile_menu_icon:before {
    transition: all 0.5s ease;
    content: "";
    display: block;
    border-radius: 50%;
    border: 1px white solid;
    height: 32px;
    position: absolute;
    width: 32px;
    top: 1px;
    opacity: 0;
    transform: scale(1,1);
}

#hype_mobile_menu_icon.menu_open:before {
    animation: circle_pulse 1s infinite;
}

@keyframes circle_pulse {
  from {opacity: 0.5; transform: scale(1,1);}
  to {opacity: 1; transform: scale(1.2,1.2);}
}

/* css to show/hide the mobile submenu when the menu icon is clicked */

/* Default state */
#hype_mobile_submenu {
  width: 100%;
  transition: margin-left 0.75s ease-in-out;
  z-index: 99;
  position: fixed;
  top: 50px;
  background-color: #35363f!important;
}
/* When closed, hide to the left */
#hype_mobile_submenu.submenu_closed {
  margin-left: -100vw;
}

/* When open, slide into view */
#hype_mobile_submenu.submenu_open {
  margin-left: 0;
}

/* slide the main content over at the same time as the submenu */
#main-content {
  transition: margin-left 0.75s ease-in-out, margin-right 0.75s ease-in-out;
  margin-left: 0;
  margin-right: 0;
}
#main-content.menu_open {
  margin-left: 100vw;
  margin-right: -100vw;
}

/* Make sure the logo doesn't expand when the screen width increases */
#hype_mobile_menu_logo img {
  max-height: 47px;
}

/* Adjust the padding on the blurb icons and description in the submenu */
#hype_mobile_submenu_list .et_pb_main_blurb_image {
  padding-left: 10px;
}
#hype_mobile_submenu_list .et_pb_blurb_container {
  padding-left: 5px;
}
#hype_mobile_submenu_list .et_pb_blurb {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-bottom: 10px!important;
}

/* Adjust the search box at the top of the submenu */
#hype_mobile_submenu_search .et-search-form {
    width: 80vw!important;
    min-width: 50vw;
    display: block !important;
    max-width: 100% !important;
    margin: 10px auto;
    border: 1px solid #fff;
    border-radius: 50px;
    background: none !important;
    clear: both;
    position: relative;
    height: 35px;
    padding: 5px !important;
}

#hype_mobile_submenu_search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 35px;
    border: none;
    background: none;
    cursor: pointer;
}

#hype_mobile_submenu_search #searchsubmit_header:before {
  font-family: "ETmodules";
  content: "\55";
  position: absolute;
  top: 11px;
  color: #fff;
  left: 7px;
  font-size: 13px;
}

#hype_mobile_submenu_search input {
    padding-left: 10px;
}

#hype_mobile_submenu_search .et_pb_module_header {
  padding-bottom: 5px;
}

/* Adjust the social follow links at the bottom of the submenu */
#hype_mobile_menu_social_follow {
  margin-top: -20px!important;
  margin-bottom: 10px!important;
}

/* slide the main content over at the same time as the submenu */
#main-content {
  transition: margin-left 0.75s ease-in-out, margin-right 0.75s ease-in-out;
  margin-left: 0;
  margin-right: 0;
}
#main-content.menu_open {
  margin-left: 100vw;
  margin-right: -100vw;
}

/* Style the top menu items */

#hype_mobile_submenu_list ul.menu > li {
  border-bottom: 1px solid white;
  max-width: 90%;
  margin-right: 50px;
  margin-top: 10px;
  padding-bottom: 10px;
}

#hype_mobile_submenu_list ul.menu > li > a {
    font-size: 24px;
    color: #fff!important;
    margin-left: 20px;
}

/* Style the submenu items */
#hype_mobile_submenu_list ul.sub-menu > li > a {
    font-size: 24px;
    color: #CA22B7!important;
    margin-left: 30px;
    line-height: 1.5;
}

/* default state for submenu */
#hype_mobile_submenu_list ul.sub-menu {
  transition: all 0.5s ease;
  opacity: 0;
  height: 0;
  visibility: hidden;
  padding-bottom: 0;
}
/* state when opened by clicking parent menu item - menu_open class added in JQuery */
#hype_mobile_submenu_list .menu-item-has-children.et-touch-hover > ul.sub-menu {
opacity: 1;
height: auto;
visibility: visible;
}

/* Default style for submenu dropdown icon */
.sub-menu-icon {
  width: 50px;
  font-family: "ETModules";
  font-size: 30px;
  color: #fff;
  float: right;
  text-align: center;
  /* z-index: 99999; */
  cursor: pointer;
  transition: all 0.5s ease;
  -webkit-transform : rotate(0deg);
  -moz-transform : rotate(0deg);
  -ms-transform : rotate(0deg);
  transform : rotate(0deg);
  margin-right: -50px;
}

/* rotate the icon when icon_rotate class added by JQuery */
.sub-menu-icon.rotate {
  -webkit-transform : rotate(180deg);
  -moz-transform : rotate(180deg);
  -ms-transform : rotate(180deg);
  transform : rotate(180deg);
}


.menu-item-has-children.et-touch-hover > .sub-menu-icon {
  -webkit-transform : rotate(180deg);
  -moz-transform : rotate(180deg);
  -ms-transform : rotate(180deg);
  transform : rotate(180deg);
}