/*
 Theme Name:   JAY-Cool
 Description:  JAY-Cool WordPress Child Theme
 Author:       Antonello Vertucci
 Author URI:   https://vertucci.de
 Template:     enfold
 Version:      1.0
*/

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-condensed-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('fonts/roboto-condensed-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v17-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto-condensed-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('fonts/roboto-condensed-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v17-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


/* @link https://utopia.fyi/type/calculator?c=375,18,1.2,1420,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.70rem, calc(0.81rem + -0.12vw), 0.78rem);
  --step--1: clamp(0.94rem, calc(0.94rem + 0.00vw), 0.94rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.19vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.24rem + 0.48vw), 1.67rem);
  --step-2: clamp(1.62rem, calc(1.40rem + 0.92vw), 2.22rem);
  --step-3: clamp(1.94rem, calc(1.58rem + 1.56vw), 2.96rem);
  --step-4: clamp(2.33rem, calc(1.75rem + 2.47vw), 3.95rem);
  --step-5: clamp(2.80rem, calc(1.92rem + 3.77vw), 5.26rem);
}

/* Global */
:root{
    --dark-grey: #333e48;
    --grey: #e1e6ea;
    --yellow: #fef54d;
}

:root {
    --primary-font: 'Roboto Condensed', sans-serif;
    --heading-font: 'Roboto Condensed', sans-serif;
}



/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body,p{font-family: var(--primary-font); font-weight: 400; line-height: 1.5; font-size: var(--step-0);}
h1,h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 700 !important; text-transform: inherit !important; line-height: 1.2; letter-spacing: 0 !important; margin: 0 0 0.5em !important; position: relative;}
::selection {
    background-color: var(--yellow);
    color: var(--dark-grey);
}

#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .special-heading-border{display: none;}
#top .av-special-heading .av-special-heading-tag:has(+ .av-subheading_below){margin-bottom: 0 !important;}

#top h1{font-size: var(--step-3)}
#top h2{font-size: var(--step-2)}
#top h3{font-size: var(--step-1)}
#top h4{font-size: var(--step-0)}

#top p a{text-decoration: underline; text-underline-offset: 4px;}

/* Button */
input[type="submit"], 
#submit, 
.button,
#top div .avia-button{
	padding: .5em 2em;
    line-height: 1.2;
    border-radius: .5rem;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    font-weight: 700;
    font-size: var(--step-0);
    background-color: var(--yellow) !important;
    border: 2px solid var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: var(--dark-grey) !important;
    transition: .5s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
#top div .avia-button.avia-color-light{color: #fff !important; border-color: #fff !important; background: transparent !important;}
#top div .avia-button.avia-color-dark{color: var(--dark-grey) !important; border-color: var(--dark-grey) !important; background-color: transparent !important;}
#top div .avia-button:hover{opacity: 1; box-shadow: 0 2px 12px rgb(0 0 0 / 25%);}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
@media only screen and (max-width: 989px){ 
    .responsive #top #header{position: fixed !important; top: 0; left: 0; right: 0; width: 100%}
    .responsive #top #main,
    .responsive.html_mobile_menu_tablet.html_header_top #top #main{padding-top: 80px !important}
    .responsive #top #wrap_all .av-logo-container,
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container,
    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a{
        height: 80px;
        line-height: 80px;
    }
}

@media only screen and (min-width: 990px){
    #header .inner-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;}
    #header .inner-container > nav{order: 3; position: relative;}
}


/* Meta Header */
#header_meta{border: 0; background: var(--dark-grey); padding-right: 1em}
#header_meta *{color: #fff}
#header_meta .phone-info{width: 100%; padding: .4rem 0; line-height: 1.2; font-size: var(--step--1); font-weight: 400;}
#header_meta .phone-info > div{line-height: 30px; width: 100%;}
#header_meta .phone-info a{color: #fff}
#header_meta .phone-info ul{margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem}
#header_meta .phone-info ul li{display: inline-block;}
#header_meta .phone-info ul li:nth-child(3){margin-left: auto; font-weight: 700}
#header_meta .phone-info ul li:before{content: '\e875'; font-family: 'entypo-fontello'; margin-right: .8em;}
#header_meta .phone-info ul li.__tel:before{content: '\e854'}
#header_meta .phone-info ul li.__email:before{content: '\e805'}


@media only screen and (max-width: 990px){
    #header_meta{min-height: 5px}
    #header_meta .container{display: none;}
}

@media only screen and (min-width: 990px){
    #top #wrap_all #main{padding-top: 153px !important}
}

/* Logo */
#header_main .inner-container > .logo,
#header_main .inner-container > .logo a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: visible}
#header_main .inner-container > .logo a{height: auto}
#header_main .inner-container > .logo a svg,
#header_main .inner-container > .logo a img{width: 4rem}

@media only screen and (min-width: 990px){
    #header_main .inner-container > .logo a svg,
    #header_main .inner-container > .logo a img{width: 6rem}
}

/* Navigation */
@media only screen and (min-width: 990px){
	#header_main .inner-container > nav{display: flex; align-items: center;}
	#header_main .inner-container > nav > div,
	#header_main .inner-container > nav > div > ul,
	#header_main .inner-container > nav > div > ul > li{height: 100%}
	#header_main .inner-container > nav > div > ul > li.menu-item{display: flex; align-items: center}
	#header_main .inner-container > nav ul#avia-menu > li > a{line-height: 1.6 !important; height: auto !important; font-size: var(--step-0); font-weight: 400}
    #header_main .inner-container > nav ul#avia-menu > li li > a{font-size: var(--step--1); font-weight: 400}
    #header_main .inner-container > nav ul#avia-menu li:hover > a > .avia-menu-text,
    #header_main .inner-container > nav ul#avia-menu li.current-menu-item > a > .avia-menu-text{opacity: 1}
	#header_main .inner-container > nav.main_menu ul#avia-menu > li.av-menu-button-colored > a .avia-menu-text{
		background-color: var(--yellow);
        color: var(--dark-grey);
        border-color: var(--yellow);
        border-radius: .5rem;
        padding: .5em;
        font-weight: 700;
        line-height: 1.2;
        display: inline-block;
	}
}

/* Breadcrumbs */
#top .title_container{background: var(--grey); box-shadow: 0 0 5px rgb(0 0 0 / 20%), 0 0 25px rgb(0 0 0 / 20%);}
#top .title_container *{color: var(--dark-grey); font-size: var(--step--1);}
#top .title_container .breadcrumb{right: inherit;}
#top .title_container .breadcrumb .trail{display: -webkit-box;display: -ms-flexbox;display: flex;}
#top .title_container .breadcrumb .breadcrumb-trail{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#top .title_container .breadcrumb .breadcrumb-trail:before{font-family: 'entypo-fontello'; content: '\e821'; margin-right: 10px}
#top .title_container .breadcrumb .sep{margin: 0 .5em;}
#top .title_container .breadcrumb .trail-end{opacity: .5}

/* Burger menu */
.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after{border-radius: 0;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul{background: var(--dark-grey); vertical-align: top;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a{border-color: #414b52; color: #fff; font-size: var(--step-0); border: 0}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a{padding: 1em 1em 1em 70px; font-size: var(--step--1);}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a .avia-bullet{background-color: var(--grey);}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a:hover{background: transparent !important;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a img{display: none;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li.av-menu-button-colored > a .avia-menu-text{background-color: var(--yellow); color: var(--dark-grey); border-color: var(--yellow); border-radius: .5em; font-weight: 700; display: block;}

.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after{background-color: #fff;}


/* =======================================================================================================================================
Accessibility
======================================================================================================================================= */
#top :focus-visible{
    overflow: visible; 
    outline: -webkit-focus-ring-color auto 1px; 
    opacity: 1 !important;
	box-shadow: inset 0 0 0 2px #fff;
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
#top .container_wrap{border: 0}

@media only screen and (min-width: 990px){
    html, body, #wrap_all{overflow: initial !important;}
    #top .__sticky{position: sticky !important; top: 180px}
}

/* Images */
#top .image-overlay{display: none !important;}
.avia-image-container-inner, .avia_image, .av-image-caption-overlay{border-radius: 0}

/* List */
#top ul.__arrow{list-style: none; margin: .5em 0 1.5em .5em;}
#top ul.__arrow > li{margin: 0; padding: 0 0 0 1.5em; position: relative;}
#top ul.__arrow > li:before{content: '\e871'; font-family: 'entypo-fontello'; position: absolute; left: 0;}

/* Masonry animation */
.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
            -webkit-animation: avia_msonry_show .5s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96);
                    animation: avia_msonry_show .5s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
@-webkit-keyframes avia_msonry_show {
  0%   { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}
@keyframes avia_msonry_show {
  0%   { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}

/* Toggle */
#top section.av_toggle_section .toggler{padding: 1em 3em 1em 1rem; margin: 0 0 .8em; font-size: var(--step-0); background: transparent; border: 1px solid; border-radius: .5em}
#top section.av_toggle_section .toggler:hover{background: transparent;}
#top section.av_toggle_section .toggler .toggle_icon{display: none;}
#top section.av_toggle_section .toggler:after{
	content: '\e87d';
    font-family: 'entypo-fontello';
    position: absolute;
    right: 1em;
    transition: .2s ease;
}
#top section.av_toggle_section .toggler.activeTitle:after{rotate: 90deg}
#top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 1rem 1.5em;}
#top section.av_toggle_section .toggle_content *{font-size: var(--step--1);}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: 2rem 0;}
#footer *{font-size: var(--step--1);}
#footer .widget{margin: 1rem 0}
#footer .container{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 5%; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#footer .container > .flex_column{width: auto; margin: 0 !important; min-width: 280px}

#footer a:hover{opacity: .5;}
#footer ul.menu{list-style: none; margin: 1em 0 0 0 !important}
#footer ul.menu li{position: relative; border-bottom: 1px solid #4e5a65;}
#footer ul.menu li a{padding: .2em .8em; position: relative;}
#footer ul.menu li a:before{content: '\e879'; font-family: 'entypo-fontello'; position: absolute; left: 0; top: .2em}

@media only screen and (min-width: 768px){
    #footer .container{-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
}

#top #socket .copyright{font-size: var(--step--1); float: unset;}
#top #socket .container{padding-top: 2rem; padding-bottom: 2rem;}

#scroll-top-link{display: none}


/* =======================================================================================================================================
Tippy
======================================================================================================================================= */
#top .tippy-arrow{color: var(--grey)}
#top .tippy-box{color: var(--dark-grey); background-color: var(--grey);}
#top .tippy-box .tippy-content{padding: 1em}
#top .tippy-box .tippy-content *{color: var(--dark-grey);}


/* =======================================================================================================================================
FAB
======================================================================================================================================= */
#fab{
    position: fixed; 
    right: 20px; 
    bottom: 20%;  
    z-index: 100; 
    background: transparent;
}
#fab ul{margin: 0; padding: 0}
#fab ul li:hover{cursor: pointer;}
#fab ul li{
    min-height: 60px;
    width: 60px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: var(--yellow);
    position: relative;
    margin-bottom: 4px;
    -webkit-box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
            box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #f5ec48;
    -webkit-transition: .25s ease;
    transition: .25s ease;
}
#fab ul li:hover{translate: 0 -2px}
#fab ul li i{display: block; font-size: 1.5rem; padding-top: 10px; color: #000;}
#fab ul li span{
    font-size: 14px;
    display: block;
    line-height: 18px;
    width: 100%;
    font-weight: 700;
    color: var(--dark-grey);
    margin: .25em 0;
}

@media only screen and (max-width: 767px) {
    #fab{display: none;}
}

#fabTelefonTippycontent{font-size: var(--step-0);}
#fabTelefonTippycontent small{font-size: var(--step--1);}


/* =======================================================================================================================================
Dienstleistungen
======================================================================================================================================= */
#top.single-portfolio .__section--top{
	position: relative;
	overflow: hidden;
}
#top.single-portfolio .__section--top > img{
	z-index: 1; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	object-position: center;
}
#top.single-portfolio .__section--top:before{
	content: ''; 
	opacity: .75; 
	z-index: 2;
	position: absolute; 
	top: 0; 
	bottom: 0; 
	right: 0; 
	width: 100%; 
	height: 100%; 
	background-image: linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,0));
}
#top.single-portfolio .__section--top .content{
	position: relative;
	z-index: 3;
	min-height: 33vh;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
	align-items: center;
	gap: 1rem;
}
#top.single-portfolio .__section--top .content .__title{
	color: #fff; 
	font-weight: 700; 
	font-size: var(--step-4);
}
#top.single-portfolio .__section--top .content .__buttons{
	display: flex; 
	flex-flow: row wrap;
	justify-content: center; 
	gap: 1rem;
}


/* =======================================================================================================================================
Forms
======================================================================================================================================= */
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
    padding: 1em;
    font-size: 1rem !important;
    border-radius: .25rem !important;
    margin: .25em 0 !important;
	background: transparent !important;
}
#top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus {
    overflow: visible;
    outline: -webkit-focus-ring-color auto 1px;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 2px #fff;
}

/* CF7 */
#top form.wpcf7-form{
	max-width: 720px;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(1, 1fr);
}
#top form.wpcf7-form *{
	font-family: var(--primary-font);
}
#top form.wpcf7-form label{
	font-size: var(--step--1);
}
#top form.wpcf7-form .wpcf7-not-valid{
	border-color: red;
}
#top form.wpcf7-form .wpcf7-response-output{
    margin: 1rem 0;
    padding: 1em;
    border-width: 1px;
    border-radius: .25rem;
    grid-column: 1 / -1;
}

@media (min-width: 758px){
	#top form.wpcf7-form{grid-template-columns: repeat(2, 1fr);}
}