/*
 Theme Name:   Divi Pizza
 Description:  Website template for Pizzerias, Pizza shops, restaurants, cafe’s, diners, sub shops, catering, and more!
 Author:       Pee-Aye Creative
 Author URI:   http://peeayecreative.com
 Template:     Divi
 Version:      1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 *
 * ===== NOTES ==================================================================
 * 
 * New to Divi? Take our full Divi course: https://www.peeayecreative.com/product/beyond-the-builder-the-ultimate-divi-website-course/
 * 
 * Learn cool tricks and features with our Divi tutorials: https://www.peeayecreative.com/blog/
 * 
 * Discover our premium Divi products: https://www.peeayecreative.com/shop/
 * 
 * =============================================================================== */

/*column stacking order on mobile*/

@media all and (max-width: 980px) {
   /*** wrap row in a flex box ***/
   .pa-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 ***/
   .pa-first-on-mobile {
      -webkit-order: 1;
      order: 1;
   }
   .pa-second-on-mobile {
      -webkit-order: 2;
      order: 2;
   }
   .pa-third-on-mobile {
      -webkit-order: 3;
      order: 3;
   }
   .pa-fourth-on-mobile {
      -webkit-order: 4;
      order: 4;
   }
   /*** add margin to last column ***/
   .pa-custom-row:last-child .et_pb_column:last-child {
      margin-bottom: 30px;
   }
}


/*adjust the breakpoint of desktop to tablet

@media only screen and (max-width: 1400px) and (min-width: 980px) {
   #top-menu-nav {
      display: none;
   }
}

@media only screen and (max-width: 1400px) and (min-width: 980px) {
   #et_mobile_nav_menu {
      display: block;
   }
	#main-header, #main-header .nav li ul, .et-search-form, #main-header .et_mobile_menu{
		background-color: #FFFFFF!important;
	}
}*/


/*remove shadow line under main menu

#main-header {
   box-shadow: none;
}

#main-header.et-fixed-header {
   box-shadow: none !important;
}*/


/*overlapping logo

@media only screen and (min-width: 1400px) {
   #logo {
  
      padding:10px 10px 10px 10px;
   }
}*/


/*fix pixelated logo and add box shadow

#logo {
   -webkit-transform: initial;
 
}

@media only screen and (min-width: 1400px) {
   .et_header_style_left .logo_container {
      position: absolute;
      left: 10%;
      width: 80%;
      background: #ffffff;
      padding-left: 36px;
      border-radius: 0 10px 10px 0;
      box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
   }
}*/


/*some adjustment ot the menu on desktop

@media only screen and (min-width: 1400px) {
   .et_header_style_left #et-top-navigation {
      margin-right: 240px;
   }
}*/


/*some adjustment ot the menu on mobile

@media only screen and (max-width: 1400px) {
   .et_header_style_left #et-top-navigation {
      margin-right: 0px;
   }
}*/


/*slide in mobile menu*

@media only screen and (max-width: 1400px) {
   #mobile_menu {
      display: block !important;
      min-height: 100vh;
      height: 100%;
      top: 0;
      right: 0;
      position: fixed;
      z-index: 9998;
      overflow: scroll;
      border-top: none;
      padding-top: 60px !important;
   }
   .et_mobile_menu li:nth-child(1) {
      padding-top: 60px;
   }
   .et_mobile_menu li a {
      color: #ffffff!important;
      width: 100%;
      float: left;
      border: 1px solid #f2f2f2 !important;
      text-align: left;
      margin: 5px 10px;
      transition: .2s;
      text-transform: uppercase;
      font-size: 1.4em !important;
      font-weight: 800;
      letter-spacing: 1px;
      padding-top: 14px;
      padding-left: 20px;
   }
   .mobile_nav ul#mobile_menu .current_page_item>a {
      color: #f05124 !important;
      background-color: #ffffff;
      border-radius: 0px;
   }
   .et_mobile_menu li a:hover {
      opacity: 1;
      background: #ffffff;
      color: #f05124!important;
   }
   .mobile_nav.closed #mobile_menu {
      background: -moz-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -webkit-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -o-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -ms-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: linear-gradient(to bottom, #2a2d34 0%, #000000 100%);
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -o-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform 0.4s 0s;
      -moz-transition: -moz-transform 0.4s 0s;
      transition: transform 0.4s 0s;
   }
   .mobile_nav.opened #mobile_menu {
      background: -moz-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -webkit-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -o-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: -ms-linear-gradient(top, #2a2d34 0%, #000000 100%);
      background: linear-gradient(to bottom, #2a2d34 0%, #000000 100%);
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      -webkit-overflow-scrolling: touch;
      -webkit-transition: -webkit-transform 0.4s 0s;
      -moz-transition: -moz-transform 0.4s 0s;
      transition: transform 0.4s 0s;
      box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
   }
   #main-header .container.clearfix.et_menu_container {
      width: 90%;
   }
   .mobile_menu_bar:before {
      color: #f05124!important;
      font-size: 48px!important;
   }
   .mobile_nav.opened .mobile_menu_bar:before {
      content: '4d';
      z-index: 9999;
      color: #f05124 !important;
      font-size: 48px!important;
   }
}

@media only screen and (max-width: 980px) {
   .et_header_style_split .mobile_menu_bar,
   .et_header_style_left .mobile_menu_bar {
      z-index: 9999;
   }
   #et-top-navigation {
      padding-right: 5px;
   }
}

@media only screen and (min-width: 481px) {
   #mobile_menu {
      width: 340px;
      margin-left: calc(100% - 340px);
   }
}

@media only screen and (max-width: 480px) {
   #mobile_menu {
      width: 290px;
      margin-left: calc(100% - 290px);
   }
}*/


/*menu item hover line on top

#top-menu li>a:hover:after {
   content: '';
   display: block;
   width: 100%;
   background: #f05124;
   height: 10px;
   position: absolute;
   top: -40px;
   left: 0;
}*/


/*menu item hover color

#top-menu li>a:hover {
   color: #f05124;
   opacity: 1!important;
   transition: 0s!important;
}*/


/*current menu item line on top

#top-menu li.current-menu-item>a:after,
.et-fixed-header #top-menu li.current-menu-item>a:after {
   content: '';
   display: block;
   width: 100%;
   background: #f05124;
   height: 10px;
   position: absolute;
   top: -40px;
   left: 0;
}*/


/*VERTICALLY ALIGN CONTENT IN COLUMNS
--------------------------------------------------------------------------*/

.pa-vertical-align {
   display: flex;
   flex-direction: column;
   justify-content: center;
}


/*button with icon on right*/

.pa-pizza-button:after {
   background-color: #dddddd;
   color: #000000;
   padding: 8px 7px;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: 100px;
}

.pa-pizza-button {
   padding-right: 3em!important;
}

.pa-pizza-button:hover:after {
   background-color: #bbbbbb;
   color: #ffffff;
}


/*contact form button with icon on right*/

.pa-pizza-contact-button .et_pb_contact_submit:after {
   background-color: #dddddd;
   color: #000000;
   padding: 8px 7px;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: 100px;
}

.pa-pizza-contact-button .et_pb_contact_submit {
   padding-right: 3em!important;
}

.pa-pizza-contact-button .et_pb_contact_submit:hover:after {
   background-color: #bbbbbb;
   color: #ffffff;
}


/*footer optin module button with icon on right*/

.pa-pizza-optin-button .et_pb_newsletter_button:after {
   background-color: #dddddd;
   color: #000000;
   padding: 8px 7px;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: 100px;
}

.pa-pizza-optin-button .et_pb_newsletter_button {
   padding-right: 3em!important;
}

.pa-pizza-optin-button .et_pb_newsletter_button:hover:after {
   background-color: #f05124;
   color: #ffffff;
}


/*PLACE BUTTON MODULES NEXT TO EACH OTHER IN THE SAME COLUMN
--------------------------------------------------------------------------*/

.pa-button-inline .et_pb_button_module_wrapper {
   display: inline-block;
   margin-right: 30px;
}


/*PEE-AYE CREATIVE - HIDE DIVI SECTION BACKGROUND IMAGES ON MOBILE
---------------------------------------------------*/


/*regular sections*/

@media only screen and (max-width: 1400px) {
   div.et_pb_section.pa-hide-background-image-mobile {
      background-size: contain!important;
   }
}

@media only screen and (max-width: 1400px) {
   .pa-mobile-background {
      background: #ffffff;
   }
}


/*---------- [Equalise the Tabs] ----------*/

.pa-pizza-tabs .et_pb_tabs_controls li {
   width: 23%;
   /*100% divided by # of tabs - 2%*/
   text-align: center;
   margin: 1%;
}

@media screen and (max-width: 768px) {
   /*change device breakpoint here depending on the number of tabs you have*/
   .pa-pizza-tabs .et_pb_tabs_controls li {
      width: 100%;
      text-align: center;
   }
}


/*add some padding to the side of the tabs*/

.pa-pizza-tabs .et_pb_tabs_controls {
   margin: 0 10vw;
}


/*remove background on tabs*/

ul.et_pb_tabs_controls {
   background: none;
}


/*remove border*/

ul.et_pb_tabs_controls:after {
   border: none;
}


/*remove border right*/

.et_pb_tabs_controls li {
   border: none;
}


/*active tab text color*/

.et_pb_tab_active a {
   color: #f05124!important;
   border: 2px solid #f05124;
   border-radius: 50px;
}

.pa-pizza-tabs .et_pb_tabs_controls a:hover {
   border: 2px solid #f05124;
   border-radius: 50px;
   color: #f05124;
   transition: 0.3s ease!important;
}


/*image aspect ratio square 1:1*/

.pa-image-1-1 .et_pb_image_wrap {
   padding-top: 100%;
   display: block;
}

.pa-image-1-1 .et_pb_image_wrap img {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
}


/*zoom and rotate image on hover*/

.pa-image-zoom-rotate img {
   transition: all .3s ease;
}

.pa-image-zoom-rotate:hover img {
   -webkit-transform: scale(1.15) rotate(1deg);
   -ms-transform: scale(1.15) rotate(1deg);
   transform: scale(1.15) rotate(1deg);
   transition: all .4s ease;
}


/*PEE-AYE CREATIVE - OVERLAY FOR PARALLAX SECTION
-----------------------------------------------------------------------*/

.pa-overlay .et_parallax_bg:before,
.pa-overlay:before {
   content: "";
   display: block;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
}


/*equalise the tabs*/

.pa-portfolio-tabs .et_pb_tabs_controls li {
   width: 23%;
   /*100% divided by # of tabs - 2%*/
   text-align: center;
   margin: 1%;
}

@media screen and (max-width: 768px) {
   /*change device breakpoint here depending on the number of tabs you have*/
   .pa-portfolio-tabs .et_pb_tabs_controls li {
      width: 100%;
      text-align: center;
   }
}


/*add some padding to the side of the tabs*/

.pa-portfolio-tabs .et_pb_tabs_controls {
   margin: 0 10vw;
}


/*remove background on tabs*/

ul.et_pb_tabs_controls {
   background: none;
}


/*remove border*/

ul.et_pb_tabs_controls:after {
   border: none;
}


/*remove border right*/

.et_pb_tabs_controls li {
   border: none;
}


/*active tab text color*/

.et_pb_tab_active a {
   color: #f05124!important;
   border: 2px solid #f05124;
   border-radius: 50px;
}

.pa-portfolio-tabs .et_pb_tabs_controls a:hover {
   border: 2px solid #f05124;
   border-radius: 50px;
   color: #f05124;
   transition: 0.3s ease!important;
}


/*border radius on chef image*/

.pa-pizza-chef img {
   border-radius: 10px;
}


/*image aspect ratio landscape 9:16*/

.pa-image-vertical .et_pb_image_wrap {
   padding-top: 154%;
   display: block;
}

.pa-image-vertical .et_pb_image_wrap img {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
}


/*image aspect ratio landscape 4:3*/

.pa-image-horizontal .et_pb_image_wrap {
   padding-top: 75%;
   display: block;
}

.pa-image-horizontal .et_pb_image_wrap img {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
}


/*open footer menu and remove hamburger icon*/

@media (max-width: 980px) {
   .pa-footer-menu .et_pb_menu__menu {
      display: flex;
   }
   .pa-footer-menu .et_mobile_nav_menu {
      display: none;
   }
}