/*
 Theme Name:     FW Dermatology
 Theme URI:      https://fwderm.catalystgetsit.com
 Description:    FW Dermatology Theme
 Author:         Catalyst Marketing Design
 Author URI:     https://fwderm.catalystgetsit.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
	color: #DD9F00;
	font-weight: 700;
}

a.fwpsa {
	color: #73123F !important;
	font-weight: 900 !important;
}

hr {border: 1px solid #dd9f00;}

/* MAIN NAV SECONDARY MENU */
ul.sub-menu {
	border: none !important;
	padding: 0 !important;
}
.et-menu .sub-menu li:hover {

}
.et_mobile_menu li a:hover, .nav ul li a:hover {
	color: #ffffff;
	transition: none;
}


/* Hide Divi Main Navigation Menu */
#main-header { display:none; }
#page-container { 
	padding-top:0px !important; 
	margin-top:-1px !important 
}

/* MENU STYLES */
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #dd9f00; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}
.et_mobile_menu li a:hover, .nav ul li a:hover {
	background-color:#ffbc11 !important;
	opacity:1;
}
.et-menu a:hover{
	color: #ffffff;
	opacity:1;
}
/* MENU STYLES MOBILE */
.et_pb_menu_0 .mobile_nav .mobile_menu_bar:before{
	color: #000000 !important;
}
.et_mobile_menu {
	border-top: 3px solid #000000 !important;
}



/* RESET SLIDER WIDTH */
.et_pb_slider .et_pb_container {
	width: unset;
}

/* Hide secondary nav on scroll */
.et_fixed_nav #top-header { position: absolute !important; } .et-fixed-header { top: 0px!important; }


/* Secondary nav styles */
#et-info, #et-secondary-menu>ul>li a {
	background: #c1c1c1;
	border-radius: 5px;
	padding: 10px;
}
.additional_number:before {
font-family:'ETModules';
content : '\e090';
} 

/* Accordion close toggle */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
    display: block!important;
    content: "\e04f" !important;
}

/* FONTAWESOME */
.fab, .far {
	font-size: 30px !important;
}
a .fab {
	color: #000000;
}
a .fab:hover {
	color:#DD9F00;
}
.social {
	padding-right: 20px;
}
/* ET BUTTON SHORT CODE */
.smallblueshort_code {
    background-color: #73123F;
	border: 5px solid #73123F !important;
    border-radius: 5px !important;
	box-shadow: none !important;
	color: #fff;
    font-size: 14px !important;
    padding: 7px 20px !important;
	margin-top: 30px !important;
	margin-bottom: 30px !important;
	text-shadow: none !important;
}

.smallblueshort_code:hover {
    background-color: #8f3961;
	border: 5px solid #73123F !important;
    border-radius: 5px !important;
}
/* CONTACT SIGN UP FORM */
.wpcf7-list-item {
	display: block;
}
.wpcf7-form input[type="email"], input[type="text"], textarea, select[name="Subject"], input[type="tel"] {
	font-size: 20px;
	padding:10px;
	width:100% !important;
	margin-bottom: 20px;
}
.wpcf7-form input[type="number"]{
	font-size: 20px;
	padding: 10px;
}
.wpcf7-form input[type="submit"] {
	background: #dd9f00;
	border: none;
	border-radius: 5px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
	padding: 10px;
}
.wpcf7-form input[type="submit"]:hover {
	background: #E2aa1F;
	color: #000000;
}

/* VERT CENTER CONTENT */
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
/* HORIZONTAL LIST */
 .horizontal-list ul{
	 -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.horizontal-list .et_pb_widget {
	width: 100% !important;
}

/* TEXT TOGGLE */
/*collpse and set the height of the toggle text*/
.pa-toggle-text .et_pb_text_inner {
	max-height: 200px;
	transition: max-height 0.1s ease-out;
	overflow: hidden;
}
/*add gradient to the collapsed text*/
.pa-toggle-text .et_pb_text_inner:after {
	content: "";
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: -webkit-linear-gradient(0deg, #f1f5f7 10%, transparent, transparent);
	background-image: -moz-linear-gradient(0deg, #f1f5f7 10%, transparent, transparent);
	background-image: -o-linear-gradient(0deg, #f1f5f7 10%, transparent, transparent);
	background-image: linear-gradient(0deg, #f1f5f7 10%, transparent, transparent);
}
/*style the expand text link*/
.pa-toggle-text .pa-text-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #333333!important;
}
/*change the curor to a pointed when hovering over the expand text link*/
.pa-toggle-text .pa-text-expand-button span {
	cursor: pointer;
}
/*define the font family for the toggle icon*/
.pa-toggle-text .pa-text-expand-button .pa-text-toggle-icon {
	font-family: ETMODULES, "sans-serif";
}
/*set the max height and transition of the expanded toggle*/
.pa-toggle-text .pa-text-toggle-expanded {
	max-height: 800px;
	overflow: scroll;
	transition: max-height 0.1s ease-in;
}
/*hide the gradient when the toggle is expanded*/
.pa-toggle-text .pa-text-toggle-expanded.et_pb_text_inner:after {
	background: none;
}