/* 
 Theme Name:     Terabyte Child Theme
 Author:         Terabyte Websites
 Author URI:     https://terabytewebsites.com 
 Description:    Terabyte Child Theme For Divi
 Template:       Divi
 Version:        1.0 
*/ 

@import url("ribbons.css");
@import url("../Divi/style.css");

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/*** Take out divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth on posts ***/
@media (min-width: 981px){
  #left-area {
    display: block; margin-left: auto; margin-right: auto;
    width: 100%;
    float: none !important;
  }
}

/* Center Footer Menu start */
#footer-info,
#footer-info a {
  float: none;
  text-align: center;
}
/* Center Footer Menu end */

/* style the opened mobile menu hamburger (make it an 'X') */  
div.mobile_nav.opened .mobile_menu_bar:before {
    font-family: "ETmodules";
    content: "4d"; 
}
/* style the opened mobile menu hamburger (make it an 'X') */ 

/* Vertically Center a Modules START */
.vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 
/* Vertically Center a Modules END */

/**************************************
 * Start of Material Columns for Divi *
 **************************************/
.jt-divi-material-column-0-0, .jt-divi-material-column-0-1, .jt-divi-material-column-0-2, .jt-divi-material-column-0-3, .jt-divi-material-column-0-4, .jt-divi-material-column-0-5, .jt-divi-material-column-1-0, .jt-divi-material-column-1-1, .jt-divi-material-column-1-2, .jt-divi-material-column-1-3, .jt-divi-material-column-1-4, .jt-divi-material-column-1-5, .jt-divi-material-column-2-0, .jt-divi-material-column-2-1, .jt-divi-material-column-2-2, .jt-divi-material-column-2-3, .jt-divi-material-column-2-4, .jt-divi-material-column-2-5, .jt-divi-material-column-3-0, .jt-divi-material-column-3-1, .jt-divi-material-column-3-2, .jt-divi-material-column-3-3, .jt-divi-material-column-3-4, .jt-divi-material-column-3-5, .jt-divi-material-column-4-0, .jt-divi-material-column-4-1, .jt-divi-material-column-4-2, .jt-divi-material-column-4-3, .jt-divi-material-column-4-4, .jt-divi-material-column-4-5, .jt-divi-material-column-5-0, .jt-divi-material-column-5-1, .jt-divi-material-column-5-2, .jt-divi-material-column-5-3, .jt-divi-material-column-5-4, .jt-divi-material-column-5-5 {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  overflow: hidden !important;
}

.jt-divi-material-row {
  overflow: visible !important;
}

.jt-divi-material-column-rounded-corners-5 {
  border-radius: 5px;
}

.jt-divi-material-column-rounded-corners-10 {
  border-radius: 10px;
}

.jt-divi-material-column-rounded-corners-20 {
  border-radius: 20px;
}

.jt-divi-material-column-0-0,
.jt-divi-material-column-0-1,
.jt-divi-material-column-0-2,
.jt-divi-material-column-0-3,
.jt-divi-material-column-0-4,
.jt-divi-material-column-0-5,
.jt-divi-material-column-0-0:hover,
.jt-divi-material-column-1-0:hover,
.jt-divi-material-column-2-0:hover,
.jt-divi-material-column-3-0:hover,
.jt-divi-material-column-4-0:hover,
.jt-divi-material-column-5-0:hover {
  box-shadow: none;
}

.jt-divi-material-column-1-0,
.jt-divi-material-column-1-1,
.jt-divi-material-column-1-2,
.jt-divi-material-column-1-3,
.jt-divi-material-column-1-4,
.jt-divi-material-column-1-5,
.jt-divi-material-column-0-1:hover,
.jt-divi-material-column-1-1:hover,
.jt-divi-material-column-2-1:hover,
.jt-divi-material-column-3-1:hover,
.jt-divi-material-column-4-1:hover,
.jt-divi-material-column-5-1:hover {
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.jt-divi-material-column-2-0,
.jt-divi-material-column-2-1,
.jt-divi-material-column-2-2,
.jt-divi-material-column-2-3,
.jt-divi-material-column-2-4,
.jt-divi-material-column-2-5,
.jt-divi-material-column-0-2:hover,
.jt-divi-material-column-1-2:hover,
.jt-divi-material-column-2-2:hover,
.jt-divi-material-column-3-2:hover,
.jt-divi-material-column-4-2:hover,
.jt-divi-material-column-5-2:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

.jt-divi-material-column-3-0,
.jt-divi-material-column-3-1,
.jt-divi-material-column-3-2,
.jt-divi-material-column-3-3,
.jt-divi-material-column-3-4,
.jt-divi-material-column-3-5,
.jt-divi-material-column-0-3:hover,
.jt-divi-material-column-1-3:hover,
.jt-divi-material-column-2-3:hover,
.jt-divi-material-column-3-3:hover,
.jt-divi-material-column-4-3:hover,
.jt-divi-material-column-5-3:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

.jt-divi-material-column-4-0,
.jt-divi-material-column-4-1,
.jt-divi-material-column-4-2,
.jt-divi-material-column-4-3,
.jt-divi-material-column-4-4,
.jt-divi-material-column-4-5,
.jt-divi-material-column-0-4:hover,
.jt-divi-material-column-1-4:hover,
.jt-divi-material-column-2-4:hover,
.jt-divi-material-column-3-4:hover,
.jt-divi-material-column-4-4:hover,
.jt-divi-material-column-5-4:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
}

.jt-divi-material-column-5-0,
.jt-divi-material-column-5-1,
.jt-divi-material-column-5-2,
.jt-divi-material-column-5-3,
.jt-divi-material-column-5-4,
.jt-divi-material-column-5-5,
.jt-divi-material-column-0-5:hover,
.jt-divi-material-column-1-5:hover,
.jt-divi-material-column-2-5:hover,
.jt-divi-material-column-3-5:hover,
.jt-divi-material-column-4-5:hover,
.jt-divi-material-column-5-5:hover  {
  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3);
}
/* End of Material Columns for Divi */


/* Change order of Colums in Mobile */
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
  .vr_custom_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  flex-wrap: wrap;
  }
 
  /*** custom classes that will designate the order of columns in the flex box row ***/
  .vr_first-on-mobile {
    -webkit-order: 1;
    order: 1;
  }
   
  .vr_second-on-mobile {
    -webkit-order: 2;
    order: 2;
  }
 
  .vr_third-on-mobile {
    -webkit-order: 3;
    order: 3;
  }
 
  .vr_fourth-on-mobile {
    -webkit-order: 4;
    order: 4;
  }

  /*** add margin to last column ***/
  .vr_custom_row:last-child .et_pb_column:last-child {
      margin-bottom: 30px;
  }
}

/* Show more than one column on the mobile */
@media only screen and (max-width: 980px) {
 .vr_two-columns .et_pb_column {
    width: 50%!important;
 }
 
 .vr_three-columns .et_pb_column {
    width: 33.33%!important;
 }
 
 .vr_four-columns .et_pb_column {
    width: 25%!important;
 }
}