/*
Theme Name: Child Theme
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/*Add your own styles here:*/



/* large screens with 1140px with */
@media only screen and (min-width: 1140px)  {

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 989px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
		
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}



/* |---------- Common Custom CSS ---------------| */

.phone-info, li, p{font-size:18px;}

/* -------------- Control color section padding.
Set color section padding to "no padding"
Give the column (under developer settings) in the color section the Class "csem-container-padding"*/
.csem-hero-container-padding {padding-top: clamp(30px, 15%, 150px) !important; padding-bottom: clamp(30px, 15%, 150px) !important;}

/* -------------- Control color section padding for body content sections ------------------ */
.csem-body-container-padding {padding-top: clamp(30px, 10%, 60px) !important; padding-bottom: clamp(30px, 10%, 60px) !important;}

/* -------------- Control color section padding and header text for inner pages ------------------ */
.csem-inner-header {margin-top: clamp(10px, 15%, 25px) !important; margin-bottom: clamp(10px, 15%, 20px) !important;}
.csem-inner-header h1 {font-size: clamp(30px, 3vw, 50px); text-transform:uppercase !important; font-family: 'electrolize', Helvetica, Arial, sans-serif; color:#ffffff; font-weight:400;}

/* Basic styling for the div */
.csem-srvc h2, .csem-srvc h3 {
    position: relative; /* Allows positioning of the border */
    padding-bottom: 10px; /* Space between the content and the border */
}

/* Styling for the adjustable border */
.csem-srvc h2::after, .csem-srvc h3::after {
    content: ''; /* Pseudo-element to create the border */
    position: absolute;
    bottom: 0; /* Position the border at the bottom of the div */
    border-bottom: 2px solid black; /* Thickness and color of the border */
}

.csem-srvc h2::after{
    left: 50%; /* Start the border from the middle */
    transform: translateX(-50%); /* Center the border horizontally */
	width: 50%; /* Adjust the width of the border (e.g., 50%) */
}

.csem-srvc h3::after {
    left: 0; /* Start the border from the middle */
	width: 100%; /* Adjust the width of the border (e.g., 50%) */
}

.csem-srvc h2, .csem-srvc h3 {width: fit-content;}

.csem-srvc h2{margin: auto;}
	
	
/* -------------- Center text on mobile. 
Give the text block (under developer settings) the class "csem-center-text" 
Use: <p class="csem-center-text">Text</p>
*/ 
@media only screen and (max-width: 762px) {
	.csem-center-text{text-align: center !important;}
}


/* -------------- Use for large none heading fonts. Usually in header 
Add the class "csem-hero" to a paragraph text
Use: <p class="csem-hero">Text</p> */
.csem-hero{font-size: clamp(30px, 3vw, 50px); text-transform:none; font-family: 'electrolize', Helvetica, Arial, sans-serif; color:#206e7a; line-height: 1em; margin: 0px;}

/* -------------- GForm iput and placeholder color settings */
input[type='text'], input[type='tel'], input[type='email'], textarea {color:#000 !important;}

body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder],
body .gform_wrapper select{
  color: #717171 !important;
  opacity: 1
}


/* -------------- Button Settings
Add "csem-btn" to the custom css class field in the button
Add "csem-btn-dark" to the custom css class field in the button for dark color buttons
Add "csem-btn-light" to the custom css class field in the button for light color buttons
*/
.csem-btn-dark a{background-color:#a10c01 !important; color:#ffffff !important; }
.csem-btn-light a{background-color:#ffffff !important; color:#c31e23 !important; border-bottom-style: none !important; border-color: none !important; padding:10px 20px 10px 20px !important; font-size:18px !important;}

/* Button color when hovered */
.csem-btn-light a:hover{background-color:#f3f3f3 !important;  }
.csem-btn-dark a:hover{background-color:#a10c01 !important; color:#ffffff !important;}

/* for all buttons on site */
.csem-btn a{padding: 15px 15px 15px 15px !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 1px !important; border: none !important; border-radius:10px !important; text-transform:uppercase;}
@media only screen and (max-width: 762px) {
	.csem-btn{display: grid; justify-items: center; margin-bottom:10px;}
}

/* -------------- Styles for footer icons ------------------- */
 
/* Style footer social icons */
#top .socialbookmarks-widget .social_bookmarks {
    float: left;
    margin: 15px 0 0 ;
    position: relative;
}

#top .socialbookmarks-widget .social_bookmarks li {
    float: left;
    clear: right !important;
}

#csem-fotter-social .social_bookmarks li{border-right-width: 0px;}

#csem-fotter-social a {color: #fff;}



/* ------------------------------------------------------------------------------------------- */



#csem-solid-header .container .av-content-full{padding-top: 50px; padding-bottom: 40px !important;}
@media only screen and (max-width: 762px) {#csem-solid-header .container .av-content-full{padding-top: 40px; padding-bottom: 20px !important;}}

#csem-solid-header h1{font-size:60px; text-transform:none;}
@media only screen and (max-width: 762px) {#csem-solid-header h1{font-size:40px;}}





#csem-top-bar {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: max-content;}
@media only screen and (max-width: 762px) {
	#csem-top-bar {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: max-content;}
	#csem-top-bar div {margin-bottom:2px;}
	#csem-top-bar .icon-mail {top: -2px !important;}
	#csem-top-bar .av_font_icon {margin-top:0px !important;}
}

#csem-top-bar div {margin-right:10px;}
#csem-top-bar .av_font_icon {margin-top:2px;}

#csem-top-bar .icon-mail {font-size: 27px !important; position: relative;}

#csem-footer-icons {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: max-content; font-size: 18px; color: #ffffff;}
#csem-footer-icons div {margin-right:5px; margin-bottom:10px; display: flex; flex-direction: row;}
#csem-footer-icons a {color: #ffffff;}
.csem-footer-container h2{font-size:20px; font-family: 'electrolize', Helvetica, Arial, sans-serif;}

.csem-txt-sctn {margin-top:50px; }
#csem-pg-head{}
#csem-pg-head-txt{}


#csem-contact .csem_phone_number_with_icon, #csem-contact .icon-mail{font-size:18px;}



#hm-3blk-section{}

#csem-contact-section a{color:#000;}