/*
Theme Name:   Rock Candy
Theme URI:    http://lucidity.design
Description:  This is a custom child theme of Divi.
Author:       Richard George Davis
Author URI:   http://lucidity.design
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

@media only screen and (max-width: 1420px) {

#et_mobile_nav_menu {
    display: block !important;
    float: right;
}
}

.et_pb_blurb_container {
  padding: 0 20px;
}

.icon-row.et_pb_row {
    width: 100% !important;
    max-width: 60%;
}

.icon-row.et_pb_gutters1.et_pb_row > .et_pb_column {
  width: 20%
}

@media only screen and (max-width: 980px) {
.icon-row.et_pb_row {
    width: 100% !important;
    max-width: 80%;
}
}


@media only screen and (max-width: 567px) {
.icon-row.et_pb_row {
    width: 50% !important;
    max-width: 50%;
}

.icon-row.et_pb_gutters1.et_pb_row > .et_pb_column {
  width: 100%
}
}


/*----------Custom Divi Gallery----------*/

.et_overlay {
    display: none;
}

.mfp-title {
    display: none;
}

.et_pb_gallery_grid .et_pb_gallery_item img {
    transform: scale(1.03);
    transition: transform 0.5s, opacity 0.5s;
}

.et_pb_gallery_grid .et_pb_gallery_item img:hover {
    transform: scale(1.15);
    opacity: 1;
}

.et_pb_gallery_grid .et_pb_gallery_item {
    padding: 6px !important;
    clear: right!important;
     margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.twocol-gallery.et_pb_gallery_grid .et_pb_gallery_item {
    width: 50%!important;
}

.fourcol-gallery.et_pb_gallery_grid .et_pb_gallery_item {
    width: 25%!important;
}

@media only screen and (max-width: 479px) {

.et_pb_column .et_pb_grid_item:nth-child(n) {
    width: 50%!important;
}
}


.product-image h3 {
  font-weight: 600 !important;
  color: #ed0b32 !important;
  font-size: 18px !important;
  text-transform: capitalize;
  font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
}

/*-- [ PRELOADER ] --*/
.preloader {
  position: fixed;
  /*  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffe452;*/
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffe452;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

svg {
  display: none;
}

.blobs {
  -webkit-filter: url(#goo);
  filter: url(#goo);
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 70px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.blobs .blob-center {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  background: #ed0b32;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
  transform: scale(0.9) translate(-50%, -50%);
  -webkit-animation: blob-grow linear 3.4s infinite;
  animation: blob-grow linear 3.4s infinite;
  border-radius: 50%;
}

.blob {
  position: absolute;
  background: #ed0b32;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-animation: blobs ease-out 3.4s infinite;
  animation: blobs ease-out 3.4s infinite;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
  transform: scale(0.9) translate(-50%, -50%);
  -webkit-transform-origin: center top;
  transform-origin: center top;
  opacity: 0;
}

.blob:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.blob:nth-child(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.blob:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.blob:nth-child(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.blob:nth-child(5) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }

  1% {
    opacity: 1;
  }

  35%,
  65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }

  1% {
    opacity: 1;
  }

  35%,
  65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@-webkit-keyframes blob-grow {

  0%,
  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }

  40%,
  42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  43%,
  44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  45%,
  46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  47%,
  48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }

  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }

  68%,
  70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }

  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }

  80%,
  81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  82%,
  83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  84%,
  85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  86%,
  87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  90%,
  91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  92%,
  100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
}

@keyframes blob-grow {

  0%,
  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }

  40%,
  42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  43%,
  44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  45%,
  46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  47%,
  48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }

  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }

  68%,
  70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }

  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }

  80%,
  81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }

  82%,
  83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }

  84%,
  85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }

  86%,
  87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }

  90%,
  91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
    transform: scale(1, 0.9) translate(-50%, -50%);
  }

  92%,
  100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
}

/*-- [ overhanging logo ] --*/
#top-header {
  z-index: 99999;
}

.et-fixed-header #logo {
  max-height: 220% !important;
  height: 100px !important;
  z-index: 100000;
}

@media only screen and (max-width : 980px) {
  #logo {
    margin-top: 0px;
    height: 80px !important;
  }
}

/*-- [ move secondary menu items ] --*/
@media (max-width: 980px) {
  .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed !important;
  }
}

.et_mobile_menu {
  overflow: scroll !important;
  max-height: 83vh;
}

@media all and (min-width: 980px) {
  #top-header #et-info {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

@media all and (min-width: 768px) and (max-width: 980px) {
  #top-header #et-info {
    width: 95%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

/*-- [ SCROLL TO TOP BUTTON ] --*/
.et_pb_scroll_top.et-visible,
.et_pb_scroll_top.et-hidden {
  margin: 0px 15px !important;
  bottom: 3% !important;
  border-radius: 50% !important;
  background-color: #ed0b32 !important;
  color: #fff !important;
}

/*-- [ ICON ARROW DOWN ANIMATED ] --*/
.icon_custom.et-pb-icon {
  position: relative;
  z-index: 9999;
  font-family: "ETmodules";
  font-size: 50px;
  content: attr(data-icon);
}

.icon-animate-infinity {
  animation: animation-top ease-out 1.5s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animation-top ease-out 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animation-top ease-out 1.5s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animation-top ease-out 1.5s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animation-top ease-out 1.5s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animation-top {
  0% {
    opacity: 1;
    transform: translate(0px, 0px);
  }

  100% {
    opacity: 0.05;
    transform: translate(0px, 40px);
  }
}

@-moz-keyframes animation-top {
  0% {
    opacity: 1;
    -moz-transform: translate(0px, 0px);
  }

  100% {
    opacity: 0.05;
    -moz-transform: translate(0px, 40px);
  }
}

@-webkit-keyframes animation-top {
  0% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
  }

  100% {
    opacity: 0.05;
    -webkit-transform: translate(0px, 40px);
  }
}

@-o-keyframes animation-top {
  0% {
    opacity: 1;
    -o-transform: translate(0px, 0px);
  }

  100% {
    opacity: 0.05;
    -o-transform: translate(0px, 40px);
  }
}

@-ms-keyframes animation-top {
  0% {
    opacity: 1;
    -ms-transform: translate(0px, 0px);
  }

  100% {
    opacity: 0.05;
    -ms-transform: translate(0px, 40px);
  }
}

/*-- [ HEADER CUSTOM PARALLAX ] --*/
@media only screen and (min-width: 1101px) {
  .hero_parallax {
    background-attachment: fixed;
  }
}

.hero_menu {
  width: 100%;
  position: fixed;
  top: 0px;
}

/*-- [ LINK CUSTOM HOVER (BANNER) ] --*/
.link_hover h3 {
  transition: all .3s;
}

.link_hover h3:hover {
  color: #ed0b32 !important;
}

/*-- [ BUTTONS CUSTOM ] --*/
.button_custom {
  line-height: 2.4em !important;
  min-width: 220px;
}

/*-- [ CTA HEADER - MENU OUTLINE REVEAL ] --*/
@media only screen and (min-width : 981px) {
  #main-header li a {
    margin-right: 10px;
    padding-bottom: 0px !important;
    margin-bottom: 33px;
  }

  #main-header li a::before, #main-header li a::after {
    content: '';
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    z-index: -1;
    border: 2px solid transparent;
    -webkit-transform: scale(0);
    -webkit-transform-origin: 0 100%;
    transition: 0.45s;
  }

  #main-header li a::before {
    margin-left: -12px;
    margin-top: -12px;
  }

  #main-header li a::after {
    right: -12px;
    margin-top: -12px;
  }

  #main-header li a::before {
    border-bottom: 2px solid #ed0b32;
    border-left: 2px solid #ed0b32;
    -webkit-transform-origin: 0 100%;
  }

  #main-header li a::after {
    border-top: 2px solid #ed0b32;
    border-right: 2px solid #ed0b32;
    -webkit-transform-origin: 100% 0%;
  }

  #main-header li a:hover::before, #main-header li a:hover::after {
    -webkit-transform: scale(1);
  }
}

#main-header.et-fixed-header #top-menu .cta_header a {
  background-color: #ed0b32 !important;
  color: #fff !important;
}

/*-- [ MENU MOBILE ] --*/
@media (max-width: 479px) {
  .cta_header a {
    background-color: #ed0b32;
    color: #fff !important;
  }
}

#main-header .et_mobile_menu {
  background-color: rgba(255, 255, 255, 1) !important;
}

.et_mobile_menu li a {
  color: #181818 !important;
}

@media screen and (max-width: 980px) {
  .container {
    width: 90% !important;
  }

  .et_header_style_left .logo_container {
    padding-left: 25px;
  }

  .et_header_style_centered #main-header .mobile_nav {
    background-color: transparent;
  }

  .mobile_nav.closed .select_page {
    display: none;
  }

  .et-fixed-header#main-header {
    background-color: transparent !important;
  }
}

.et_mobile_menu {
  top: 0 !important;
  border-top: 3px solid #ed0b32 !important;
  background-color: rgba(10, 10, 10, 1) !important;
  padding: 5% 0;
}

.et_mobile_menu li a {
  text-align: center;
  font-size: .95em;
  border: 0;
  padding: 15px 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item>a {
  color: #fff;
}

.et_mobile_menu li a:hover {
  color: #999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.mobile_menu_bar:before {
  padding-right: 25px;
  color: #ed0b32 !important;
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
  z-index: 99999;
  color: #ed0b32 !important;
}

/* NESTING MOBILE MENU */
/* when mobile menu is open, change hamburger icon to x icon */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
  content: '\4d';
}

/* makes sub sub menu icon be right arrow instead of down arrow */
#top-menu .menu-item-has-children .menu-item-has-children>a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children>a:first-child::after {
  content: '5';
}

/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
  position: relative;
}

/* the new toggle element, which is added via jQuery */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 1;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  top: 6px;
  right: 10px;
  cursor: pointer;
  text-align: center;
}

/* the new toggle element when popped */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
  background-color: rgba(0, 0, 0, 0.1);
}

/* toggle icon */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
  font-family: "ETmodules" !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 36px;
  font-size: 24px;
  text-transform: none;
  speak: none;
  content: '\33';
}

/* toggle icon when triggered */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
  content: '\32';
}

/* hide sub menus by default */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle~ul.sub-menu {
  display: none !important;
  padding-left: 0;
}

/* show sub menu when triggered via jQuery toggle, and add slight bg color */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped~ul.sub-menu {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.03);
}

/* remove sub menu list item left padding, since padding will be on anchors */
#main-header #mobile_menu.et_mobile_menu li li {
  padding-left: 0;
}

/* adjust mobile menu anchors side paddings */
#main-header #mobile_menu.et_mobile_menu li a {
  padding-left: 20px;
  padding-right: 20px;
}

/* indent sub menu */
#main-header #mobile_menu.et_mobile_menu li li a {
  padding-left: 40px;
  padding-right: 20px;
}

/* indent sub sub menus further */
#main-header #mobile_menu.et_mobile_menu li li li a {
  padding-left: 60px;
  padding-right: 20px;
}

/* if mobile menu anchor has toggle, make room for it to fit next to the link */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle+a {
  padding-right: 44px;
}

/* - end mobile menu toggling elements - */
/* undo Divi's default styling of mobile menu links that have children */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children>a {
  background-color: transparent;
  font-weight: inherit;
}

/* make the current page's mobile menu link be different */
#main-header #mobile_menu.et_mobile_menu li.current-menu-item>a {
  font-weight: bolder;
}

/*-- [ Ordered list fix ] --*/
article ol li, article ul li {
  margin-bottom: 8px !important;
  margin-top: 10px;
  margin-left: 5px !important;
}

article ul ul {
  margin-left: 30px !important;
}

#left-area ol, .comment-content ol, .entry-content ol {
  list-style-position: outside;
}

article ol ol {
  margin-left: 30px !important;
}

article ul li:last-child, article ol li:last-child {
  margin-bottom: 0 !important;
}

.entry-content ul {
  padding: 0 0 2px 2em;
}