/*
 Theme Name:   Infratouch
 Theme URI:    http://www.elegantthemes.com
 Description:  Infratouch
 Author:       Sabrina Schulz
 Author URI:   https://infratouch.de
 Template:     Divi
 Version:      1.0
*/

:root {--creme: #efecba}

.nopadding {padding:0}
.nomargin {margin:0}

.flex-container {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
    align-content: center;
		
}

/* ==========================================================================
Fonts
========================================================================== */	
#main-content .et_pb_column .et_pb_module h1, #main-content .et_pb_column .et_pb_module h2, #main-content .et_pb_column .et_pb_module h3, #main-content .et_pb_column .et_pb_module h4,#main-content .et_pb_column .et_pb_module h5    {font-family: 'Hoosky',Helvetica,Arial,Lucida,sans-serif; color:var(--creme)}

#main-content .et_pb_column .et_pb_module {font-size: 16px; font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif}

#pinupfont{font-size: calc(100px + (150 - 100) * ((100vw - 320px) / (1600 - 320)))!important}

#main-content .et_pb_column .et_pb_module h2 {font-size: calc(32px + (60 - 32) * ((100vw - 320px) / (1600 - 320)))}
#main-content .et_pb_column .et_pb_module h3 {font-size: calc(28px + (38 - 28) * ((100vw - 320px) / (1600 - 320)))}

#footer .et_pb_column .et_pb_module {font-size: 18px!important}

/* ==========================================================================
Menü
========================================================================== */	

.et_pb_menu__menu {font-family: 'Hoosky',Helvetica,Arial,Lucida,sans-serif}
.et_pb_menu__menu a{ font-size:30px}

.button-termin a {border: 2px solid #fff; ; color:#fff!important; border-radius:30px;  padding: 10px 15px!important}
.et-fixed-header.button-termin a {color:#fff!important}
.et-fixed-header #top-menu li.button-termin>a, #menustart .et_pb_sticky .et_pb_fullwidth_menu_0_tb_header.et_pb_fullwidth_menu ul .button-termin a {color:#fff!important}

@media (min-width:1280px){
#menustart .button-termin  {margin-left:2em;}}

#menustart .button-termin  {height:40px}
#menustart .button-termin  a{border-radius:20px;border:2px solid #fff}
#menustart .et_pb_row {width:90%}
#menustart .et_pb_menu__menu>nav>ul {-webkit-box-align: center;-ms-flex-align: center;align-items: center}

/* ==========================================================================
Floating Menü
========================================================================== */	
.menu-flottant {
    width:90px; 
    float: right; 
    position:fixed; 
    z-index:9999; 
    top: 35%; 
    font-size: 1.2em; 
    line-height: 2px; 
    color: #fff; 
    font-weight:700; 
    text-transform:uppercase; 
    right: -45px }

.menu-flottant ul {list-style: none; margin: 0; padding: 0;}

.menu-flottant ul li {
    display:block; 
    background-color: #000;
    height: 2em; 
    padding: 0.7em 1em; 
    position: relative; 
    -webkit-transition: -webkit-transform 0.5s; 
	-webkit-transition: -webkit-transform .5s; 
	transition: -webkit-transform .5s; 
	-o-transition: transform .5s; 
	transition: transform .5s; 
	transition: transform .5s, -webkit-transform .5s;
	-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
	        box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
	margin: 10px 0;
}


.menu-flottant ul li:hover {
    -webkit-transform: translateX(-2em);
    -ms-transform: translateX(-2em);
        transform: translateX(-2em);
}

.menu-flottant ul li a {
    display:block; 
    color: #fff; 
    text-decoration: none; 
    position: absolute; 
    top:0; 
    bottom:0;
    right: 2em;
    margin:0 auto;
    padding:.2em 1.5em;
}

.menu-flottant ul li a:hover{color:var(--creme)!important}
  .menu-flottant ul li span {float: left; line-height: 1.5em; height:2em;padding-bottom: 1em;}  


/* ==========================================================================
Map
========================================================================== */	



/* ==========================================================================
Startseite
========================================================================== */	
 
#artist .portfolio-row {height: 400px;}

.porfolio-item{flex:1;position: relative !important;transition: flex 800ms !important;}
.porfolio-item:hover{flex:2}

@media all and (max-width: 767px) {.porfolio-item:hover{flex:10}
	.tabelle{padding-right: 10px; font-size:14px!important}
.tabelle td{padding:2px!important}

}

.tabelle table, .tabelle td, .tabelle  tr{border-color:transparent!important}


#testimonial2 .et-pb-controllers a {content: url('https://pin-up-art-tattoo.de/wp-content/uploads/skull100-100.png');}

#testimonial2  .et-pb-controllers a {width: 50px; height: 50px; border-radius: 100%; margin: 0 5px;}
#testimonial2 .et-pb-controllers {animation-duration:300ms}
#testimonial2 .et-pb-active-slide .et_pb_slide_description a {animation-name: fadeIn}
#testimonial2 .et-pb-active-slide img {opacity: 1!important}


#testimonial2 .et-pb-controllers{position:inherit}

#gallery .et_pb_grid_item {margin:5px!important; width:100%}

#gallery .et_pb_gallery_items {
    -webkit-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
    display: grid;
    align-content: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;}



/* ==========================================================================
 Kontaktformular
========================================================================== */

/*allgemeine Kontaktformular Konakt & Analysegespräch */

/* Layout */
.wps-form {width: 100%;margin: 0 auto;}
.wps-form-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;-ms-flex-direction: row;}
.wps-form-row {display: -webkit-box;display: flex;display: -ms-flexbox;display: -webkit-flex;width: 100%;margin-bottom:20px}
.wps-form-row .wpcf7-form-control {width: 100%;}
.wps-anrede {-webkit-box-flex: 1;flex: 1; -webkit-flex: 1; -ms-flex:1; width: 10%;margin-bottom:0.5em}
.wps-produkte {-webkit-box-flex: 1;flex: 1; -webkit-flex: 1; -ms-flex:1; width: 100%;margin-bottom:1em}
.half {-webkit-box-flex: 0;flex: 0 1 50%;-webkit-flex: 0 1 50%; -ms-flex: 0 1 50%; margin-right: 20px;line-height:1.2em!important}
.first-left {-webkit-box-flex: 0;flex: 0 1 30%;-webkit-flex: 0 1 30%; -ms-flex: 0 1 30%; }
.first-right {-webkit-box-flex: 0;flex: 0 1 70%;-webkit-flex: 0 1 70%; -ms-flex: 0 1 70%;}
.secound-left {-webkit-box-flex: 0;flex: 0 1 80%;-webkit-flex: 0 1 80%; -ms-flex: 0 1 80%;margin-right: 20px;line-height:1.2em!important}
.secound-right {-webkit-box-flex: 0;flex: 0 1 20%;-webkit-flex: 0 1 20%; -ms-flex: 0 1 20%;}
span.wpcf7-list-item {display: inline-block; margin: 0 1em 0 0 }
.wps-form input.text, .wps-form input.title, .wps-form input[type=email], .wps-form input[type=password], .wps-form input[type=tel], .wps-form input[type=text], select, .wps-form textarea  {background-color: #fff;border-radius:4px;padding: 10px;margin: 5px 0; font-family:'Roboto'!important;font-size:0.95em;}
.secound-left .wpcf7-list-item-label , .wps-form p {font-family:'Roboto'!important;font-size:0.85em!important;}

.wps-form h3 {color:#000!important; font-size:38px;margin-bottom:0.5em}
.wps-form a {color:#000!important; text-decoration:underline}

/* Hinweismeldungen */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border-color: var(--creme)}
.wpcf7 form.sent .wpcf7-response-output {background-color: var(--creme);color:#000; border: 2px solid var(--creme);border-radius:30px;text-align:center;}

/* Mobile Anpassungen*/
@media all and (min-width: 767px) {.first-right{ margin-left: 20px}}
@media all and (max-width: 767px) {.wps-anrede {width: 100%} .wps-form input.text, .wps-form input.title, .wps-form input[type=email], .wps-form input[type=password], .wps-form input[type=tel], .wps-form input[type=text], select, .wps-form textarea {border: 2px solid #e9e9e9}.wps-form-row {-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-direction: column;}}


/*Radio-button */


.artist{
    width: 100%;
    height: 100%;
 display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}
.select-artist {width:100%}

@media all and (min-width: 767px) {
.artist .wpcf7-radio{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #cecece;
    width: 500px;
    height: 50px;
    border-radius: 9999px;
    box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
}}


input[type=checkbox] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #000;
     top: 0;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;     
     margin-right: 7px;
     margin-bottom: 5px;
     outline: none;
     border: 1px solid #dfdbd8;
}
input[type=checkbox]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: 0;
     font-weight: 700;
     content: '\02143';
     transform: rotate(40deg);
}
input[type=radio] {
    -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #000;
     top: 0;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;     
     margin-right: 7px;
     margin-bottom: 5px;
     outline: none;
     border-radius: 40px;
     border: 1px solid #dfdbd8;
}
input[type=radio]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: -0;
     font-weight: 700;
     content: '\02143';
     transform: rotate(40deg);
}


.artist span.wpcf7-list-item {
    display: flex;
    margin: 0 1em 0 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.artist .wpcf7-list-item-label {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
	padding: 0 5px;
	min-width:120px;
    height: 40px;
    text-align: center;
    border-radius: 9999px;
    overflow: hidden;
    transition: linear 0.3s;
    color: #6e6e6edd;
}

.artist .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
    background-color: #000;
    color:var(--creme);
    font-weight: 900;
    transition: 0.3s;

}

/* Button */
input[type=submit] {background-image:-o-linear-gradient(top,#918d8d 0%,#575656  100%)!important;background-image:-webkit-gradient(linear,left top, left bottom,from(#918d8d),to(#575656))!important;background-image:linear-gradient(180deg,#918d8d 0%,#575656  100%)!important; padding:10px 30px; color:#fff; border:none; float: right;margin-top:2em}
.cf7mls_next.action-button {float:right; background: var(--creme) none repeat scroll 0 0}
@media all and (min-width: 769px) {
	.wps-form-row .standort .wpcf7-radio{display:flex; flex-direction:row}}

.et_bloom .et_bloom_form_container .et_bloom_form_header, .et_bloom .et_bloom_form_container .et_bloom_form_content .et_bloom_form_footer {padding:0!important}
#popupbutton{border:4px solid #fff;border-radius:20px!important; min-width:250px!important;color:#fff!important}
.et_bloom_form_footer{display:flex;justify-content: center;}