/*======================================
Theme Name: Metan Divi Child Theme
Theme URI: https://diviawesome.com/product/metan-divi-child-theme/
Description: Metan is a responsive retina multipurpose WordPress theme perfect for just about anyone. Whether you are a creative, a corporate team, a lawyer, a medical doctor, or a freelancer looking for a modern portfolio website or a personal blog, Metan is your best option.
Version: 2.2.1.1.2
Author: Lovish Gulati
Author URI: https://diviawesome.com/
Template: Divi
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* **===================={{{{[Divi Desktop Menu}}}}}========================** */
/*add point on top of the Divi menu submenu dropdown*/

:root {
	--orange:251, 129, 34;
	--black:0,0,0;
}
.et_pb_widget.widget_categories ul li a{
	width:calc(100% - 50px)!important;
}
.et_pb_team_member_description{
	padding:20px;
}
nav > ul > li > ul:after {
    position: absolute;
    left: 20%;
    margin-left: 0px;
    top: -15px;
    width: 0;
    height: 0;
    content:'';
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid rgba(var(--orange), 1);   }
/*dropdown menu padding*/
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a {
padding-left: 0px;
padding-right: 0px;
padding-top: 15px;
padding-bottom: 15px;  }
/* ##### DROPDOWN MENU STYLES ##### */
#top-menu .sub-menu {
   background-color: rgba(var(--black), 1)!important;
	color: #FFFFFF!important;/* Background color dropdown */
   border-top: 3px solid #25313a; /* Top border color dropdown */ }
#top-menu .sub-menu li a {
   font-size: 13px; /* Font size dropdown */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid rgba(var(--black), 1)!important; /* Border bottom menu item color */ }
.sub-menu li:hover {
   background-color: rgba(var(--orange), 1)!important;
	color: #fff!important/* Hover color menu item */ }
.sub-menu .current_page_item {
   background-color: rgba(var(--orange), 1); /* Current menu item color dropdown */
		color: #fff!important/* Hover color menu item */   }
#top-menu .sub-menu li {
   padding-left: 0px!important;
   padding-right: 0px;
   width: 100%; }
#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;  }
#top-menu .sub-menu {
   padding-top: 0;
   padding-bottom: 0px;
 padding-left: 0px!important;
	 padding-right: 0px;   }
.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);   }
.et_pb_sticky .et_pb_menu_1_tb_header.et_pb_menu ul li:hover>a {
    color: #ffff!important;  }
/************Mobile menu**************/
/* X icon in expanded mobile menu */
.mobile-style-x
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";  }
/* Remove the top line in the mobile menu*/
.mobile-style
.et_mobile_menu {
border-top:0px;  }
.mobile-style
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important; }
/* Make mobile menu fullwidth */
.mobile-style
.et_mobile_menu {
min-width: 70vw;
margin-left: -35vw;
margin-top: 2.5vw; }
/* Make the mobile menu full height */
.mobile-style
.et_mobile_menu {
min-height:50vh !important;
min-height: -webkit-fill-available;
padding-top:25px !important;  }
html {
height: -webkit-fill-available;  }
/*Make Divi Mobile Menu Scrollable*/
.et_mobile_menu {   
    overflow-y:scroll!important;
    max-height:80vh!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;  }
/**** This hides the sub menu items on mobile ****/
#page-container .mobile_nav li ul.hide {
    display: none !important;  }
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;  }
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;  }
/**** This styles the icon and moves it to the right ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;  }
/**** Here you can swap out the actual icons ****/
#page-container span.menu-closed:before {
    content: "\43";
    display: block;
    color: #fff;
    font-size: 16px;
    font-family: ETmodules;  }
#page-container span.menu-closed.menu-open:before {
    content: "\42"; }
/***************{ All Pages Blurb Icon hover effect }  *****************************/
/* grow icon */
    .mp_m_blurb_grow:hover .et_pb_main_blurb_image img,     .mp_m_blurb_grow:hover .et-pb-icon {
        -webkit-transition-duration: 0.3s;
      transition-duration: 0.8s;}
    .mp_m_blurb_grow:hover .et_pb_main_blurb_image img,  .mp_m_blurb_grow:hover .et-pb-icon {
        -webkit-transform: scale(1.1) translateZ(0);
        transform: scale(1.1) translateZ(0);}
/* blurb bob icon */
    .mp_m_blurb_bob:hover .et_pb_main_blurb_image img,    .mp_m_blurb_bob:hover .et-pb-icon {
        -webkit-animation-name: gq_bob_float_icon, gq_bob_icon;
        animation-name: gq_bob_float_icon, gq_bob_icon;
        -webkit-animation-duration: .3s, 1.5s;
        animation-duration: .3s, 1.5s;
        -webkit-animation-delay: 0s, .3s;
        animation-delay: 0s, .3s;
        -webkit-animation-timing-function: ease-out, ease-in-out;
        animation-timing-function: ease-out, ease-in-out;
        -webkit-animation-iteration-count: 1, infinite;
        animation-iteration-count: 1, infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-direction: normal, alternate;
        animation-direction: normal, alternate;}
    @-webkit-keyframes gq_bob_icon {
        0% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
        50% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
        100% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}}
    @keyframes gq_bob_icon {
        0% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
        50% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
        100% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}}
    @-webkit-keyframes gq_bob_float_icon {
        100% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}}
    @keyframes gq_bob_float_icon {
        100% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}}
/*spin*/
/* client focused section blurb spin */
    .mp_m_blurb_spin .et_pb_main_blurb_image img,  .mp_m_blurb_spin  .et-pb-icon {
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;}
    .mp_m_blurb_spin:hover .et_pb_main_blurb_image img,  .mp_m_blurb_spin  .et-pb-icon {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);}
.spin-blurb-icon {
	transition: box-shadow .2s ease-in-out;  }
/*add an arrow icon in the bottom right corner*/
.spin-blurb-icon:after {
	font-family: ETModules;
	content: "\39";
	font-size: 36px;
  background-color: rgba(var(--orange), 1);
	color: #fff;
	position: absolute;
	top: 26px;
	right: 25px;
	transition: all .2s ease;
  border-radius: 100px;
  padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
  opacity: 0;  }
/*add the box shadow on hover*/
.spin-blurb-icon:hover {	
	transition: box-shadow .2s ease-in-out;  }
/*adjust the icon on hover*/
.spin-blurb-icon:hover:after {
	color: #fff;
	transition: all .2s ease;
    border-radius: 100px;
  padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
  opacity: 1;  }
.spin-blurb-icon:hover:after {
	-webkit-animation: rotate-scale-down 0.65s linear both;
	        animation: rotate-scale-down 0.65s linear both;  }
@-webkit-keyframes rotate-scale-down {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);  }
  50% {
    -webkit-transform: scale(0.5) rotateZ(180deg);
            transform: scale(0.5) rotateZ(180deg);  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);  }}
/* blurb animation drop */
    .mp_m_blurb_drop:hover .et_pb_main_blurb_image img,  .mp_m_blurb_drop:hover  .et-pb-icon {
            opacity: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-animation-name: gq_drop_icon;
        animation-name: gq_drop_icon;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
        animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}
    @-webkit-keyframes gq_drop_icon {
        0% {opacity: 0;}
        50% {opacity: 0;-webkit-transform: translateY(-100%);transform: translateY(-100%);}
        51%, 100% {opacity: 1;}}
    @keyframes gq_drop_icon {
        0% {opacity: 0;}
        50% {opacity: 0;-webkit-transform: translateY(-100%);transform: translateY(-100%);}
        51%, 100% {opacity: 1;}}
@keyframes rotate-scale-down {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);  }
  50% {
    -webkit-transform: scale(0.5) rotateZ(180deg);
            transform: scale(0.5) rotateZ(180deg);  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);  }}
/**************************************/
/************{Left Column on buttom in mobile device }  ********************/
/***************************************/
@media (max-width:980px) {
    .et_section_regular .reverse-columns-mobile.et_pb_row, .et_section_specialty.reverse-columns-mobile .et_pb_row {
        display: flex;
        flex-direction: column-reverse;    }}
/**********Back to top button**************************/
/*---------- Custom Back To Top Button ----------*/
.et_pb_scroll_top.et-visible {
opacity: 1;
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1); }
.et_pb_scroll_top.et-pb-icon {
right: 15px;
bottom: 15px;
border-radius: 25px;
background: rgba(var(--orange), 1);
padding: 10px; }
.et_pb_scroll_top.et-pb-icon:hover {
background: rgba(var(--black), 1);
color: #fff; }
.et_pb_scroll_top:before {
content: "\21";
font-weight: 900; }
/*** Bouncing Back To Top Button Animation ***/
span.et_pb_scroll_top.et-pb-icon.et-visible {
animation: vertical-bounce 2.2s ease-out infinite;  }
@keyframes vertical-bounce {
0% { transform:translateY(0%); }
12.5% { transform:translateY(-20%); }
25% { transform:translateY(0%); }
37.5% { transform:translateY(-20%); }
50% { transform:translateY(0%); }  }
/***********Contact form error message********************/
option {
    color: rgba(var(--black), 1)!important;  }
.et-pb-contact-message p{
    position: relative;
    background-color: #ffffff;
    color: rgba(var(--black), 1)!important;
    padding: 20px 20px 20px 20px!important;
    font-family: 'Barlow';
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5em; }
.et-pb-contact-message  ul {
     list-style-type: circle;
    padding: 0 0 1px 1em;
    line-height: 32px;
    color: rgba(var(--orange), 1);
    font-size: 16px;
    font-family: 'Barlow';
    text-align: left;
    font-weight: 500;
	    background-color: #ffffff;
	 padding: 20px 20px 20px 20px!important; }
.et-pb-contact-message {
	margin-bottom: 30px!important }
.et-menu li li.menu-item-has-children>a:first-child:after {
    right: 20px;
    top: auto!important;  }