/*
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:*/

/* --------- Common Header Settings -------------*/

Set break point for burger menu -----
@media only screen and (max-width: 1200px) {
	.av-main-nav > li.menu-item-avia-special {
    	display: block;
	}
	.av-main-nav > li {
    	display: none;
	}
}

 /*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
  /* Adjust the width of the logo */
    margin-right:420px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {left: 50%; transform: translateX(-48%); z-index:999;}

#header .logo img {top: 50%; transform: translateY(-50%); max-width: 395px;}
}

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


/* Set logo and menu area to full width 
#header #header_main .container {
    width: 100%;
    max-width: none;
}
*/

#header_main{border-bottom-color: #fff !important; }

/* Set top bar area to full width
#header_meta .container{
	width: 100%; 
	max-width: none;
}
*/

/* Adjust top bar menu setting 
#header_meta .sub_menu {
	font-size:18px;
}
*/

/* Adjust top bar container 
#header_meta {
	padding: 6px 0px; 
}
*/

/* Adjust settings for top bar text */
.phone-info {
  font-size: 18px !important;
	width: 100% !important;
}

/* Social media icons */
/*.social_bookmarks_facebook a{
 * color:#f0b51c !important;
 * }

.social_bookmarks_instagram svg path {
  fill: #fff; 
}
*/

/*Adjust vertical alignment of logo when set to sticky header 
div .logo {top: 20px; }

.header-scrolled div .logo {top: 0px; }
*/

/*
.html_header_transparency #top .avia-builder-el-0 .container{padding-top: 0px !important;}
*/

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

/*
 * Use for large none heading fonts. Usually in header
 * Add the class "csem-hero" to a paragraph text
 * Or use: <p class="csem-hero">Text</p>
 */
.csem-hero {
  font-size: var(--fs-xl);
  text-shadow: var(--fw-bolder);
  text-transform: uppercase;
  font-family: var(--ff-body);
  line-height: 1em;
  margin-bottom: 20px;
  margin-top: 0px;
  font-weight: bolder;
}

.csem-fs-lg {
  font-size: var(--fs-lg);
  margin: 0px;
  line-height: 1em;
  display: inline-block;
}
.csem-fs-lg p {
  overflow: hidden;
  white-space: nowrap;
  margin: 0px;
  padding-bottom: 3px;
  animation: typing 2s steps(35), blinking 0.5s steps(1) infinite;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}



/*
 * Enfold Social icons
 * Applies styles for footer icons in functions.php
 * Ues: Place widget anywhere you'd like social icons set in Enfold to be displayed
 */

#top .socialbookmarks-widget .social_bookmarks {
  float: left;
  margin: 15px 0 0;
  position: relative;
}

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

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

.phone-info div{width: 100%;}
#top .av_header_transparency #header_meta{background: #ffffff; }
#header_meta{background: #ffffff !important; border-bottom-color: #fff !important; }



.csem_phone_number_with_icon a{color: #000 !important;}
.csem_phone_number_with_icon{font-weight:bold !important;}


#csem-top-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#csem-top-bar div {
  margin-right: 10px;
	max-width: fit-content;
	color: #000 !important;
	font-weight:bold !important;
}

#csem-top-bar div a{color: #000 !important; }

@media only screen and (max-width: 770px) {
	.csem-top-bar div:first-child {/* Your styles here */}
  #csem-top-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
	
}



#csem-footer-icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: max-content;
  margin: auto;
  font-size: 18px;
  color: #444;
}
#csem-footer-icons div {
  margin-right: 5px;
}
#csem-footer-icons a {
  color: #444;
}

/* Gravity Forms input 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;
}





.hm-cont-container {display: flex; gap: 20px; padding: 20px;}
@media only screen and (max-width: 770px) {
	.hm-cont-container {flex-direction: column;}
	.hm-cont-item{ width: fit-content !important; margin: 0px auto; }
}

.hm-cont-item {flex: 1; padding: 15px; text-align: left; color:#fff;}

.ct-cont-container {display: flex ; gap: 20px; padding: 20px; flex-direction: column; align-items: flex-start;}

@media only screen and (max-width: 550px) {
	.ct-cont-container{padding: 0px;}
	.ct-cont-container .ct-cont-item {text-align:left !important;}
}


.ct-cont-item {flex: 1; padding: 5px; text-align: left; color:#fff;}
.ct-cont-open{font-size:55px; font-weight:bold; line-height:1em; text-align:center; letter-spacing: .05em; color:#fff;}
.ct-cont-open span:first-child {clear:both !important;}

.csem-fs-md{font-size: clamp(1.5rem, 14vh, 9rem); text-transform:uppercase !important; font-weight: bold;}
.csem-h2{font-size: var(--fs-h2) !important; text-transform:uppercase !important;}
.csem-h3{font-size: var(--fs-h3) !important; text-transform:uppercase !important;}

.hm-cont-open{font-size:55px; font-weight:bold; line-height:1em; text-align:center; letter-spacing: .05em; color:#fff;}
.hm-cont-open span:first-child {clear:both !important;}
.csem-ico .avia-image-container-inner{padding: 0px 62px !important; }

/*.hm-ss{font-size:75px; text-transform:uppercase; font-weight:bolder; text-align:center;}
.hm-ss span{color: #fff; -webkit-text-stroke: .25px #000; }
*/


.blk-out{color: #000; -webkit-text-stroke: .5px #fff;}
.wht-out{color: #fff; -webkit-text-stroke: .5px #000;}
.gry-out{color: #f5f5f5; -webkit-text-stroke: .5px #000;}

@media only screen and (max-width: 770px){
	.blk-out{color: #000 !important; -webkit-text-stroke: 1px #fff !important;}
.wht-out{color: #fff !important; -webkit-text-stroke: 1px #000 !important;}
.gry-out{color: #f5f5f5 !important; -webkit-text-stroke: 1px #000 !important;}
}

.avia-menu-fx {display:none;}


@media only screen and (max-width: 770px) {.csem-menu-ico{display:none !important;} .csem-hide-ico.av_font_icon, .csem-hide-ico .iconlist_icon {display: none !important;}}

#socket .copyright {
    float: none !important;
}


#gform_submit_button_1 {color:#000 !important;}

.csem-sale{background-color:#ffe239 !important; padding:30px; border-radius:30px;}
.avia_pricing_default .pricing-table li.avia-pricing-row small, .currency-symbol {color:#fff !important; opacity: 1 !important;} 


.csem-home-list ul{line-height:2em;}