/*
Theme Name: Artist Website
Theme URI:  https://artistwebsite.org
Author:     Artist Website
Author URI: https://artistwebsite.org
Template:   Divi
Version:    1.0
*/
			    			    

/* Latest copy always on a site, copy from that */


/* Don't use the google fonts plugin, there is too little control. Add the font code to the head section. You may need to apply the font to different areas so that it appears the same on different browsers */

body {
font-family: 'Fira Sans Extra Condensed', sans-serif;
}

/* Footer. Makes it nicer on a black background */

#footer-info a {
    color: #555 !important;
    font-weight: 300 !important;
}

#footer-info {
    color: #555 !important;
    font-weight: 300 !important;
}

/*for square image ratios add the css class square 1:1*/

.square .et_pb_image_wrap {
padding-top: 100%;
display: block;
}

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


/* This 98% fixes the Surbma Divi Extras issue where text logo and menu items don't line up vertically. Ideally would have a few pixels Safari tweaks. Try applying the below also to the menu, or adding heights, or resetting css. You can add back padding-bottom: 15px !important; */

#logo {
max-height: none !important;
vertical-align: bottom !important;
line-height:90% !important;
padding-bottom: 15px;
}

/* Keep Footer on the Bottom (No White Space) */

#main-content{min-height: 100vh}

/* Scrolled Logo and Scrolled Menu Item Color */

#et-top-navigation a:hover {
    color: #003399 !important;
	  opacity:1 !important;
}

.et_header_style_left .logo_container a {
	color: #003399 !important;
	  opacity:1 !important;
}

/** Different Menu colors between logo and body links **/

#top-menu li a {
color: rgba(130,130,130,0.6) !important;
}

#top-menu li a:hover {
    color: #003399 !important;
	  opacity:1 !important;
}

#top-menu a:hover {
    color: #003399 !important;
	  opacity:1 !important;
}

body a {
    color: #003399;
	opacity:1;
}

#logo a {
    color: #171717 !important;
	opacity:1;
}

@media (max-width: 980px) {
#logo {
    border-bottom: 15px solid #ffffff !important;
}
	}