/*
Theme Name: Divi-Child
Theme URI: https://webfoxmarketing.com/
Description: Child Theme For Divi
Author: Webfox Marketing
Author URI: https://webfoxmarketing.com/
Template: Divi
Version: 2.0
Text Domain: divi-child
*/

/* Start your custom CSS bellow this comment
============================================ */
/*I removed this because it was breaking in Explorer - Fixes the nav menu floating higher. I am using top_search because I am using the search icon - make sure to match the fixed naviation in the customizer to the primary nav height. Note, if you use a higher number like 35, then you get a small gap below the nav menu and top of the header when on tab view. 25 seemed to remove this
#top-menu, #et_top_search {
position: relative;
top: 25px;
}
*/

/*hide search on mobile and tab - just play with number*/
@media only screen and ( max-width: 1300px ) {
    #et_top_search { display:none; }
}
/*this moves the menu items left and the social icons right*/
#top-header .et-social-icons {
float: right;
}
div#et-secondary-menu {
float: none;
}
/*this code makes the secondary menu full width*/
#top-header .container {
width: 90%;
max-width: 90%;
}
/*padding for logo so it's not too close to left edge*/
#logo {
padding-left: 3%;
}
/*hide all secondary menu items on mobile*/
#mobile_menu li:not([id]) { display:none !important; }

/*This changes the color of the social circle on hover*/
#top-header .et-social-icon a:hover {
background-color: #e09900!important;
}

/*change the color of the social icons background and icon*/
#top-header .et-social-icon a {
font-size: 11px;
background: #2b3990;
color: #ffffff; 
padding: 8px; /*this controls the top padding so the icons line up in the center of the circle*/
border-radius: 25px;
margin-top: 1px; /*controls the top margin for the circles on the page*/
height: 30px; /*controls the circle around the icon*/
width: 30px;
}
/*css for the icons next to menu items*/
.gmenu-address a:before {
    font-family: 'ETmodules';
    content: "\e081";
    margin-right: 1px;
    margin-top: -2px;
    color: #2b3990;
    font-size: 18px;
    float: left;
}
.gmenu-phone a:before {
    font-family: 'ETmodules';
    content: "\e090";
    margin-right: 10px;
    margin-top: -2px;
    color: #2b3990;
    font-size: 18px;
    float: left;
}
.gmenu-hours a:before {
    font-family: 'ETmodules';
    content: "\e06b";
    margin-right: 10px;
    margin-top: -2px;
    color: #2b3990;
    font-size: 18px;
    float: left;
}
/*—————Menu CTA Button————–*/
/*this code formats the non scroll header*/
.menu-cta a {
/*border: 2px solid #2b3990!important; only need this if the color is clear below*/
background-color: #2b3990; /*remove this to make clear*/
color: white!important; /*font color*/
padding: 9px!important;
border-radius: 25px;
text-align: center;
/*font-size: 12px; only makes scroll font larger*/
}
.menu-cta a:hover {
background-color: #e09900!important;
color: white!important;
opacity: 1!important; /*fixes the opacity problem on hover*/
}
/*when I removed this then the nav links lined up center, this was the problem. This works but don't need it
.et_header_style_left #et-top-navigation {
padding-top: 26px!important;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px!important;
}
*/
/*This code will keep the opacity at 100% when you hover*/
#top-menu li a:hover {opacity: 1!important;}
/*this changes the background of the button when you begin to scroll*/
.et-fixed-header #top-menu 
.menu-cta a {
color: #fff!important;
background-color: #2b3990;
}
/*This code will keep the opacity at 100% when you hover*/
#top-menu li a:hover {opacity: 1!important;}
/*—————Menu CTA Button Mobile Settings—————*/
@media only screen and (max-width: 980px) {
.menu-cta a {
background-color: #2b3990;
}
}
/*remove line below primary navigation - also is a fix for the gap below the primary navigation and the top of the header section on Tab and other views*/
header#main-header.et-fixed-header, #main-header{
	-webkit-box-shadow:none !important;
	-moz-box-shadow:none !important;
	box-shadow:none !important;
}
/*=========BEGIN FORM STYLES===========*/
/*this is great hits them all*/
body #wpforms-4331 .wpforms-form .wpforms-field input[type=text],
body #wpforms-4331 .wpforms-form .wpforms-field input[type=email],
body #wpforms-4331 .wpforms-form .wpforms-field input[type=tel],
body #wpforms-4331 .wpforms-form .wpforms-field input[type=url],
body #wpforms-4331 .wpforms-form .wpforms-field input[type=number],
body #wpforms-4331 .wpforms-form .wpforms-field textarea /*this is the message box*/
{
color: black;
border: 1px solid #d8d8d8;
border-radius: 2px;
font-size: 15px;
background-color: #fff;
}
/*this code colors the background behind the input boxes of an individual form*/
/*div#wpforms-46329 {background-color: blue!important; padding: 10px}*/
/* this controls the padding top bottom left right*/
#wpforms-4331 .wpforms-form {
padding: 5px 5px;
}
/*BUTTON STYLE*/
/** wpforms submit button **/
button.wpforms-submit{
color:white!important;
background-color:black!important;
width: 125px!important;
font-size: 17px !important;
}
/*align button*/
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
text-align: right;
font-size: 1.5em;
}
/*Hover Sytle*/
/** wpforms submit button hover **/
button.wpforms-submit:hover{
color:white!important;
background-color:#2b3990!important;
width: 125px;
}
/*captcha align to the right*/
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-captcha {
text-align: right;
}
/*error handling – the error text below the form when required is not chosen*/
div.wpforms-container-full .wpforms-form label.wpforms-error {
display: block;
color: red;
font-size: 16px;
float: none;
}
/*=========END FORM STYLES===========*/