/*
Theme Name:  Mason Premium Divi Child Theme
Theme URI:  https://mason.agirlandhermac.design/
Description:  Child Theme for Divi by Elegant Themes
Author:  Leslie Bernal
Author URI: https://agirlandhermac.design
Template: Divi
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:  divi, elegant themes, child theme, responsive-layout, creative, mobile-friendly, restaurant, seafood, one-page, business
Text Domain:  divi-child
*/

/***************************************************************************************************/
/*********************************** GENERAL ADJUSTMENTS *************************************/
/***************************************************************************************************/
h2 {
	font-size: 1.6rem !important;
}
/*** FIX Z-INDEX ON COLUMNS ***/
 .et_pb_column {
     z-index: 1;
}
/*** BODY BACKGROUND IMAGE - THIS IS PURPOSELY HANDLED HERE INSTEAD OF THE CUSTOMIZER ***/
 body {
     background-image: url("/wp-content/uploads/2021/08/graph-background-scaled.jpg");
     background-size: cover; /*** CHANGING THIS AFFECTS THE DENSITY OF THE MARBLING EFFECT ***/
     background-repeat: no-repeatrepeat;
     background-attachment: fixed;
	 
}
 @media only screen and (max-width: 980px) {
     body {
         background-size: 1500px;
    }
}
/*** MAKE SITE WIDER ON SMALLER SCREENS ***/
 @media only screen and (max-width: 1024px) {
     .et_pb_row {
         width: 90% !important;
    }
}
/*** TYPOGRAPHY ***/
 p {
     font-weight: 300;
     letter-spacing: 1px;
     line-height: 1.3em;
}
/*** BUTTONS ***/
.et_button_no_icon .et_pb_button, 
.et_button_no_icon .et_pb_button:hover {
     padding: 7px 20px !important;
     font-weight: 400;
     cursor: pointer;
}
/*** COMMON PADDING AT BOTTOM OF SECTIONS ***/
#about, 
#signup, 
.menu, 
.locations, 
#contact {
     padding-bottom: 6%;
}

/***************************************************************************************************/
/************************************* DESKTOP NAVIGATION *************************************/
/***************************************************************************************************/
 .et_header_style_centered header#main-header.et-fixed-header .logo_container {
     display: none;
}
 #top-menu li {
     padding-right: 0;
     margin-right: -4px;
}
 #top-menu a {
     text-align: center;
     color: #fff !important;
     font-weight: 500;
     background: #000;
     padding: 15px 20px !important;
}
 #top-menu a:hover {
     background: #fff !important;
     color: #222 !important;
}
 #top-menu-nav > ul > li > a:hover {
     opacity: 1;
}
 #top-menu-nav {
     position: relative;
     top: -46px;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 #top-menu-nav, .et_fixed_nav #et-top-navigation {
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 #top-menu-nav:hover {
     margin-top: 44px;
}
/*** FONT AWESOME SOCIAL LINKS IN NAVIGATION ***/
 #top-menu .menu-fa-yelp a {
     background: #7d8491;
}
 #top-menu .menu-fa-facebook a {
     background: #888F9B;
}
 #top-menu .menu-fa-twitter a {
     background: #949AA5;
}
 #top-menu .menu-fa-instagram a {
     background: #A0A5AF;
}
.menu-fa-yelp .fa,
.menu-fa-facebook .fa,
.menu-fa-twitter .fa,
.menu-fa-instagram .fa {
     width: 12px;
}

/***************************************************************************************************/
/**************************** CUSTOM TAB THAT HIDES DESKTOP NAV ***************************/
/***************************************************************************************************/
/*** YOU CAN USE ANY FA ICON OR CHANGE IT TO TEXT **
 #top-menu-nav:before {
     width: 70px;
     height: auto;
     font-family: FontAwesome !important;
     font-size: 16px;
     content: '\f078';
     position: relative;
     top: 59px;
     background: #7d8491;
     color: #222;
     padding: 8px 20px;
     cursor: pointer;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
/***************************************************************************************************/
/*** IF YOU'D RATHER HAVE A SQUARE LOGO INSTEAD OF A TAB USING FA USE THIS INSTEAD OF THE ABOVE 
 #top-menu-nav:before {
     padding: 30px;
     top: 70px;
     content: "";
     background: #fff url("https://mason.agirlandhermac.design/wp-content/uploads/logo-400x400.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: bottom;
     position: relative;
     cursor: pointer;
     box-shadow: 0 10px 40px 0 rgba(0,0,0,0.1);
}
 SEE HOW THIS IS COMMENTED OUT ************************************************/
/***************************************************************************************************/

/***************************************************************************************************/
/************************************ STICKY MOBILE MENU ***************************************/
/***************************************************************************************************/
.mobile-logo img {
     max-width: 100px;
     text-align: center;
     padding: 0 !important;
}
 #mobile_menu1, .et_mobile_menu {
	 background: #fff !important;
     border-top: none;
     text-align: center;
     padding: 12% 9%;
     outline: 6px double #e0e0e0;
     outline-offset: -15px;
}
 .et_mobile_menu li a {
     color: #222;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: 1px;
     padding: 4px 5%;
     border-bottom: none;
     text-align: center;
}
 .et_mobile_menu li a:hover {
     opacity: 1;
     background: transparent;
}
 .mobile_menu_bar {
     left: 50%;
     transform: translate(-50%, -50%);
     top: 0 !important;
}
 .mobile_menu_bar:before {
     color: #fff !important;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;
     content: "Menu";
     font-family: 'Poppins', Helvetica, Arial, sans-serif !important; /*** CHANGE THIS AND OTHER INSTANCES IF YOU CHANGE YOUR BODY FONT ***/
     background: #000;
     width: auto;
     padding: 10px 17px;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .et_pb_fullwidth_menu .et_mobile_menu {
     top: 60px;
}
 .et_pb_fullwidth_menu .mobile_menu_bar:before {
     top: 20px;
}
 @media only screen and (max-width: 980px) {
     .menu-fa-yelp,
	 .menu-fa-facebook,
	 .menu-fa-twitter,
	 .menu-fa-instagram {
         display: inline-block;
         padding: 0 8px;
    }
     #main-header {
         display: none;
    }
     #custom-mobile-menu {
         display: block;
         z-index: 3 !important;
    }
     .container.et_menu_container, .et_pb_fullwidth_menu .et_pb_row {
         max-width: 100% !important;
         width: 100% !important;
    }
}
 @media only screen and (min-width: 981px) {
     #custom-mobile-menu, .mobile-logo {
         display: none !important;
    }
}
 @media only screen and ( max-width: 980px ) {
     .et_pb_fullwidth_section.menu.sticky-element-original {
         position: relative !important;
    }
}
@media (min-device-width: 320px) and (max-device-width: 966px) and (orientation: landscape) {
.et_mobile_menu {
    position: fixed;
    overflow: scroll !important; /*** THIS IS FOR SMALL DEVICES IN LANDSCAPE ***/
    max-height: calc(100vh - 56px);
}
}

/***************************************************************************************************/
/***************************************** HERO LOGO ********************************************/
/**************************************************************************************************
 .home .et_pb_section_first {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
}
 #hero-logo {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
}
 @media only screen and (max-width: 640px) {
     #hero-logo img {
         margin-top: -240px;
         max-width: 200px;
    }
}
@media only screen and (min-width: 641px) and (max-width: 980px) {
 #hero-logo img {
         margin-top: -240px;
         max-width: 275px;
}
}
 @media only screen and (min-width: 981px) and (max-width: 1024px) {
     #hero-logo img {
         margin-top: -160px;
         max-width: 275px;
    }
}
/* @media only screen and (min-width: 1025px) {
     #hero-logo img {
         margin-top: -100px;
         max-width: 350px;
    }
}
**************************************************************************************************/
/***************************************** ABOUT SECTION ****************************************/
/***************************************************************************************************/
 .about-logo {
     margin-top: -10%;
     background: #fff;
     padding: 30px;
     border-radius: 50%;
}
 .about-header-image {
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .about-content {
     background: #fff;
     padding: 0 8% 6% !important;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .about-location-card {
     background: #fff;
     padding: 40px;
     outline: 6px double #e0e0e0;
     outline-offset: -15px;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .about-location-card a {
     color: #222;
     font-family: 'Amaranth', Helvetica, Arial, sans-serif; /*** CHANGE THIS AND OTHER INSTANCES IF YOU CHANGE YOUR HEADER FONT ***/
     font-size: 20px;
     font-weight: 900;
     cursor: pointer;
}
 .about-location-card:hover {
     margin-top: 10px;
}

/***************************************************************************************************/
/************************************ MENU TABS SECTION ****************************************/
/**************************************************************************************************
.menu-tabs-row {
     padding: 0;
background: transparent !important;
}
 .et_pb_tab {
     padding: 0;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .et_pb_tab, .et_pb_tabs {
     border: none;
}
 .et_pb_tabs_controls li {
     float: none !important;
     display: inline-block;
     border-right: none;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
     margin-bottom: 25px;
     margin-right: 8px;
}
 ul.et_pb_tabs_controls {
     text-align: center;
     background: transparent;
     line-height: 0 !important;
}
 .et_pb_tab_content {
     padding: 0;
}
 .et_pb_tab_content .et_pb_section {
     padding: 5% 0;
}
 ul.et_pb_tabs_controls:after {
     border-top: none;
}
 .et_pb_tabs_controls li a {
     font-family: 'Amaranth', Helvetica, Arial, sans-serif;
     font-size: 22px;
     color: #222;
     padding: 10px 30px;
     background: #7D8491;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .et_pb_tabs_controls li a:hover {
     background: #fff;
}
 .et_pb_tab_active a {
     background: #000 !important;
     color: #fff !important;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 @media only screen and (max-width: 660px) {
     .et_pb_tabs_controls li {
         margin-bottom: 6px;
    }
     .et_pb_tabs_controls li a {
         width: 100%;
         display: block;
    }
     .et_pb_tabs_controls li {
         width: 100%;
    }
}
/*** MENU ITEM BLURBS BEING USED IN THE LUNCH MENU ***/
 .menu .et_pb_blurb {
     margin-bottom: 30px !important;
}
 .menu .et_pb_main_blurb_image img {
     max-width: 100px;
     border-radius: 50%;
     overflow: hidden;
     border: 6px solid #e0e0e0;
}
 .menu .et_pb_main_blurb_image {
     margin-bottom: 15px;
}
 #special-menu-column2 {
     padding: 80px 8%;
     outline: 6px double #e0e0e0;
     outline-offset: -15px;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .menu .et_pb_row {
     width: 90% !important;
}
/*** ON SMALLER SCREENS THE MENU ITEMS SPLIT TO 2 COLUMNS INSTEAD OF ONE SINCE IT LOOKS BETTER ***/
 @media only screen and (max-width: 479px) {
     .menu .et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
         max-width: 46% !important;
         margin-left: 2% !important;
         margin-right: 2% !important;
    }
}
/*** PRIX FIXE SPECIAL MENU GETS TOO TIGHT ON SMALL SCREENS SO THIS CHANGES THE COLUMN WIDTHS ***/
@media only screen and (min-width: 800px) and (max-width: 1024px) {
#special-menu-column2 {
width: 60% !important;
float: right;
padding: 80px 5%;
}
}

/***************************************************************************************************/
/***************************** LOCATIONS ACCORDION SECTION **********************************/
/***************************************************************************************************/ 
.et_pb_toggle {
     border: none;
}
 .et_pb_toggle .et_pb_toggle_title {
     padding: 0;
}
 .et_pb_toggle_open {
     padding: 20px 0 0 0;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .et_pb_toggle_close {
     padding: 20px 0;
     margin-bottom: 12px !important;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .et_pb_accordion .et_pb_toggle_title:before, .et_pb_toggle .et_pb_toggle_title:before {
     display: none;
}
/*** MAPS CTA - STYLING FOR THE GLOBAL MODULE YOU SEE IN ALL THREE LAYOUTS ***/
 .locations .et_pb_promo {
     padding: 50px;
     outline: 6px double #e0e0e0;
     outline-offset: -15px;
}
 .locations h5 {
     margin-top: 10px;
     font-weight: normal;
}
 @media only screen and (max-width: 480px) {
     .locations h5 {
         display: none;
    }
}
 @media only screen and (min-width: 481px) {
     .locations .et_pb_promo .et_pb_button {
         display: none;
    }
     .locations .et_pb_promo_description {
         padding-bottom: 0;
    }
}

/***************************************************************************************************/
/************************ ROTATED FLYER IN SIGNUP SECTION - CODE MODULE ******************/
/***************************************************************************************************/
 .large-heading {
     color: #222;
     font-family: 'Amaranth', Helvetica, Arial, sans-serif;
     font-size: 36px;
     font-weight: bold;
     margin-bottom: 6px;
}
 .flyer-container {
     position: relative;
     width: 100%;
}
 .flyer-image {
     display: block;
     width: 100%;
     height: auto;
     -ms-transform: rotate(-5deg);
     -webkit-transform: rotate(-5deg);
     transform: rotate(-5deg);
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .flyer-overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     background: rgba(125, 132, 145, 0.95);
     -ms-transform: rotate(-5deg);
     -webkit-transform: rotate(-5deg);
     transform: rotate(-5deg);
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
}
 .flyer-container:hover .flyer-overlay {
     opacity: 1;
}
 .flyer-text {
     font-family: 'Poppins', Helvetica, Arial, sans-serif;
     font-weight: 300;
     width: 100%;
     color: #fff;
     font-size: 24px;
     letter-spacing: 1px;
     line-height: 1.2em;
     position: absolute;
     padding: 10%;
}
 .flyer-text img {
     border: 3px solid #fff;
}
 @media only screen and (max-width: 1024px) {
     .large-heading {
         font-size: 28px;
    }
     .flyer-text {
         padding: 6%;
    }
     .flyer-text .fa {
         font-size: 16px;
    }
}
@media only screen and (max-width: 1280px) {
.flyer-text {
font-size: 18px;
}
}
/*** FONT AWESOME LIST IN FLYER TEXT - I PURPOSELY DID NOT USE FA LIST CLASSES ***/
 .flyer-text .fa, .alt-flyer-text .fa {
     color: #222;
     border-radius: 50%;
     width: 26px;
     font-size: 20px;
     text-align: center; 
     vertical-align: 1px;
     margin: 3px;
}
/*** STUFF FOR ALTERNATE BLURB FOR MOBILE AND TABLET ***/
@media only screen and (min-width: 900px) and (max-width: 980px) {
#rotated-flyer,
#bloom-column {
width: 46% !important;
margin-left: 2%;
margin-right: 2%;
}
#bloom-column {
         margin-top: 0 !important;
}
}



/***************************************************************************************************/
/****************************************** BACK TO TOP ******************************************/
/***************************************************************************************************/
 .et_pb_scroll_top:before {
     font-family: FontAwesome !important;
     content: '\f077';
}
 .et_pb_scroll_top.et-pb-icon {
     width: 56px;
     height: auto;
     background: #1997be;
     color: #fff;
     bottom: 0;
     right: unset;
     left: calc(50% - 28px);
     border-radius: 0;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
     font-size: 16px;
     padding: 6px 6px 8px;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 .et_pb_scroll_top.et-pb-icon:hover {
     bottom: 10px;
}
 .et_pb_scroll_top.et-visible {
     -webkit-animation: fadeBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     -moz-animation: fadeBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     -o-animation: fadeBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     animation: fadeBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
 .et_pb_scroll_top.et-hidden {
     -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     -moz-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     -o-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
     animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

/***************************************************************************************************/
/*********************************** CUSTOM FOOTER CARD **************************************/
/***************************************************************************************************/
 #footer-info {
     display: none;
}
 .footer-card {
max-width: 550px;
     color: #555;
     background: #fff;
     padding: 30px 40px 50px;
     margin: 0 auto;
     outline: 6px double #e0e0e0;
     outline-offset: -15px;
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}
 .footer-card a {
     color: #000;
}
@media only screen and (max-width: 980px) {
 .footer-card { 
float: none;
}
}



/***************************************************************************************************/
/************************ HIGHLIGHTED / SELECTED BODY TEXT COLORS ************************/
/***************************************************************************************************/
 ::-moz-selection {
    /* Code for Firefox */
     color: #fff;
     background: #7d8491;
     opacity: 1;
}
 ::selection {
     color: #fff;
     background: #7d8491;
     opacity: 1 !important;
}

/***************************************************************************************************/
/*************************** OVERLAY EFFECT FOR 4 HERO IMAGES ******************************/
/***************************************************************************************************/
 .rsx-fancy-overlay img {
     display: block;
     width: 50%;
     height: 40%;
     pointer-events: auto;
     position: fixed;
     transition: all .5s ease-in-out, opacity 1s;
     z-index: 99997;
}
 @media (max-width: 603px) {
     .rsx-fancy-overlay img {
         width: 60%;
         height: 30%;
    }
}
 @media (min-width: 604px) and (max-width: 767px) {
     .rsx-fancy-overlay img {
         width: 50%;
         height: 35%;
    }
}
 @media (min-device-width: 320px) and (max-device-width: 966px) and (orientation: landscape) {
     .rsx-fancy-overlay img {
         width: 30%;
         height: 50%;
    }
}
 @media (min-width: 768px) and (max-width: 800px) {
     .rsx-fancy-overlay img {
         width: 55%;
         height: 35%;
    }
}
 @media (min-width: 801px) and (max-width: 960px) {
     .rsx-fancy-overlay img {
         width: 30%;
         height: 40%;
    }
}
 @media (min-width: 961px) and (max-width: 1280px) {
     .rsx-fancy-overlay img {
         width: 50%;
         height: 56.5%;
    }
}
 @media (min-width: 1281px) and (max-width: 2200px) {
     .rsx-fancy-overlay img {
         width: 50%;
         height: 65%;
    }
}
 @media (min-width: 2201px) {
     .rsx-fancy-overlay img {
         width: 45%;
         height: 65%;
    }
}
 .rsx-fancy-overlay.topleft img {
     top: 0;
     left: 0;
}
 .rsx-fancy-overlay.topright img {
     top: 0;
     right: 0;
}
 .rsx-fancy-overlay.bottomleft img {
     bottom: 0;
     left: 0;
}
 .rsx-fancy-overlay.bottomright img {
     bottom: 0;
     right: 0;
}
 .overlay-spread .rsx-fancy-overlay.topleft img {
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}
 .overlay-spread .rsx-fancy-overlay.topright img {
     -webkit-transform: translate(50%, -50%);
     -ms-transform: translate(50%, -50%);
     transform: translate(50%, -50%);
}
 .overlay-spread .rsx-fancy-overlay.bottomleft img {
     -webkit-transform: translate(-50%, 50%);
     -ms-transform: translate(-50%, 50%);
     transform: translate(-50%, 50%);
}
 .overlay-spread .rsx-fancy-overlay.bottomright img {
     -webkit-transform: translate(50%, 50%);
     -ms-transform: translate(50%, 50%);
     transform: translate(50%, 50%);
}
/*** TAKE OUT UPPER RIGHT AND LOWER LEFT FOR MOBILE - I ADDED THIS SO IT IS LESS BUSY ON MOBILE ***/
 @media (max-width: 980px) {
     .overlay-spread .rsx-fancy-overlay.topright img {
         -webkit-transform: translate(100%, -100%);
         -ms-transform: translate(100%, -100%);
         transform: translate(100%, -100%);
    }
     .overlay-spread .rsx-fancy-overlay.bottomleft img {
         -webkit-transform: translate(-100%, 100%);
         -ms-transform: translate(-100%, 100%);
         transform: translate(-100%, 100%);
    }
}