/*
Theme Name: Child Theme
Description: A Child Theme 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:*/
.test-animation {display: flex; align-items: center; opacity: 0; transition: opacity 0.2s ease-in-out; }
.test-animation.animate {
opacity: 1;}
.gear-bg {
background-image: url('/wp-content/uploads/2024/09/Background-2.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 170px;
height: 170px;
z-index:1;
transform-origin: 0% 0%;
}
.gear-1, .gear-2 {
background-image: url('/wp-content/uploads/2024/09/Gear.svg'); /* Replace with the path to your image */
background-size: cover; /* Cover the entire div */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Prevent the image from repeating */
width: 50px; /* Set the desired width */
height: 50px; /* Set the desired height */
position: relative;
}
.gear-text h2 {background-color: #ff8800; white-space: nowrap; overflow: hidden;padding: 20px 23px 20px 30px; margin-left: -40px; border-radius: 0px 50px 50px 0px; border: solid 4px #206e7a; color:#ffffff !important; }
.gear-1 {left: 40px; top: 35px;}
.gear-2 {left: 60px; top: 25px;}
.animate .gear-bg {animation: hingeIn 1s linear backwards;}
.animate .gear-1 {animation: gearSpin 2s linear infinite;}
.animate .gear-2 {animation: gearSpin 2s .1s linear infinite; animation-direction: reverse;}
.animate .gear-text {animation: reveal .7s 1s linear backwards;}
.csem-root-test h2, .csem-root-test h2 {font-family: var(--ff-heading) !important;}
.csem-root-test .csem-xl {font-size: var(--csem-fs-xl) !important;}
/* 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{font-size:18px !important;}
.html_header_transparency #top .avia-builder-el-0 .container{padding-top: 0px !important;}
.wrap {
width:100%;
height:650px;
overflow: hidden;
position:relative;
}
.city, .cloud {position:absolute;}
.city {z-index:100;}
.cloud01 {max-width: 27% !important; opacity: .4; top:-45px; animation: float 55s linear infinite;}
.cloud02 {max-width: 27% !important; opacity: .4; top:80px; animation: float 55s 11s linear infinite backwards;}
.cloud03 {max-width: 27% !important; opacity: .4; top:30px; animation: float 55s 25s linear infinite backwards;}
/*---------------------------------------------------------------------------------------------------|
| |
| Color section padding |
| |
| Set color section padding to "no padding" |
| Add custom Classes to the developer tab in color sections |
| |
| For Hero Headers: csem-hero-container-padding |
| For Solid/Smaller/Inner Page Headers: csem-inner-header |
| Body content color Section: csem-body-container-padding |
| |
|---------------------------------------------------------------------------------------------------*/
/*---------------------|
| Hero Header |
|---------------------*/
.csem-hero-container-padding {padding-top: var(--pd-lg); padding-bottom: var(--pd-lg);}
/*---------------------|
| Inner Header |
|---------------------*/
.csem-inner-header {padding-top: clamp(10px, 15%, 25px) !important; padding-bottom: clamp(10px, 15%, 20px) !important; background-color:rgba(var(--fc-secondary-dark),1) !important;}
.csem-inner-header h1 {font-size: clamp(30px, 3vw, 50px); text-transform:uppercase !important; font-family: 'electrolize', Helvetica, Arial, sans-serif; color:#ffffff !important; font-weight:400; text-transform:none !important;}
/*---------------------|
| Boddy Content |
|---------------------*/
.csem-body-container-padding {padding-top: clamp(30px, 10%, 60px) !important; padding-bottom: clamp(30px, 10%, 60px) !important;}
.csem-bg-col-1{background-color: var(--bg-col-1);}
/*---------------------------------------------------------------------------------------------------|
| |
| Center text on mobile |
| |
| Give the text block (under developer settings) the class "csem-center-text" |
| Or use: Text
|
| |
|---------------------------------------------------------------------------------------------------*/
/*@media only screen and (max-width: 762px) {
.csem-center-text{text-align: center !important;}
}*/
@media only screen and (max-width: 762px) {
div{text-align: center !important;}
}
/*---------------------------------------------------------------------------------------------------|
| |
| Use for large none heading fonts. Usually in header |
| |
| Add the class "csem-hero" to a paragraph text |
| Or use: Text
|
| |
|---------------------------------------------------------------------------------------------------*/
.csem-hero{font-size: var(--csem-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; animation-name: scaleIn; animation-duration: var(--duration-fast);}
.csem-fs-lg{font-size: var(--csem-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;
}
#csem-fotter-social .social_bookmarks li{border-right-width: 0px;}
#csem-fotter-social a {color: #fff;}
/*---------------------------------------------------------------------------------------------------|
| |
| Adjust mobile menu break point |
| |
| Enable to use custom break point |
| Set max width to desired break point |
| |
|---------------------------------------------------------------------------------------------------*/
/*@media only screen and (max-width: 1206px) {.av-main-nav > li.menu-item-avia-special {
display: block;
}
.av-main-nav > li {
display: none;
}}
*/
/* ------------------------------------------------------------------------------------------- */
#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: row; justify-content: flex-end; align-items: center; width: max-content;}}
#csem-top-bar {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: max-content;}
#csem-top-bar div {margin-right:10px;}
#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;}
.page-id-719 .interest:nth-of-type(2n+1) {
background-color:#f7f7f7;
}
.page-id-719 .chairp {background-color:#ebebeb; padding:30px;}
.page-id-719 .chairp b, .page-id-721 .chairp b{color:#000;}
.page-id-721 h2{text-transform:none !important;}
.page-id-721 .interest:nth-of-type(2n+1) {
background-color:#f7f7f7;
}
.page-id-857 .interest:nth-of-type(2n+1) {
background-color:#f7f7f7;
}
.member-only{padding-bottom:0px !important;}
.memberonly{min-height:0px !important;} .memberonly .content{padding-top:2px !important; padding-bottom:2px !important;}