/*
 Theme Name:   Hüpfburg Oberlausitz
 Description:  Theme für Hüpfburg-Seite
 Author:       SEO Lausitz
 Author URI:   https://www.seo-lausitz.de
 Template:     twentytwentyone
 Version:      1.0
 Text Domain:  Ehlich Holzshop
*/



.woocommerce-price-suffix {
	display: block !important;
font-size: 8px !important;
}


@font-face {
    font-family: 'open_sansbold';
    src: url('https://huepfburg-oberlausitz.de/wp-content/themes/huepfburg/fonts/OpenSans-Bold-webfont.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}




@font-face {
    font-family: 'Caveat';
    src: url('https://huepfburg-oberlausitz.de/wp-content/themes/huepfburg/fonts/Caveat-VariableFont_wght.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}



@font-face {
    font-family: 'open_sansregular';
    src: url('https://huepfburg-oberlausitz.de/wp-content/themes/huepfburg/fonts/fonts/OpenSans-Regular-webfont.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;    
}

html {
    
    scroll-behavior: smooth;
    overflow-x: hidden !important;
  }


body {
    font-family: 'open_sansregular' !important; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,eaeaea+100 */
background-color: #fcf8b8;
font-size:20px !important;
max-width:100% !important;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
background: rgb(241,231,103); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

*:focus {
    background-color: transparent !important;
}

h1 {
    font-family: 'Caveat';
    margin-top:0 !important;
    
}

h2 {font-size:26px !important;}



.wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li {

    margin-bottom:1em !important;
    border: 1px solid white !important;
    padding: 1em !important;
    border-radius:10px;
    background-color: rgba(0,0,0,0.1);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.wp-block-post-title a { text-decoration: none !important;}


.pre_headline {
    margin-bottom:-1.5em !important;
    margin-top:1em !important;
}






.wp-block-group__inner-container {
    padding:2em 0 !important;
}

.wp-block-group__inner-container > p, .wp-block-group__inner-container > h2, .wp-block-group__inner-container > h3, .wp-block-group__inner-container > h4, .wp-block-group__inner-container > h1, .wp-block-group__inner-container > ul {
    max-width: 1300px !important;
}

.alignwide {
        max-width:1300px;
    margin:auto;
}


.alignwide p, .alignwide h2, .alignwide h3, .alignwide h4,  .alignwide ul {
    width:100%;
    max-width: unset !important;
}



.site {
    width:100%;    
    position: relative;
}




.entry-content {
    margin-bottom:0 !important;
    z-index: 300  !important;
    position: relative !important;
    overflow-x: hidden !important;
	
}





#masthead {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content: flex-end;
    padding:0 !important;
    max-width: 100% !important;
    z-index: 999 !important;
    background-color: #f3e163;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    overflow: hidden;
}


#masthead div {
    margin-left: 5em;
}

.header_social {
    margin-top: 0.2em;
}

.header_social a {
    font-size:1.5em;
    padding:1em 0.5em;
    margin-top:0.5em !important;
}






article {
    margin-top:1em !important;
}
























/* FOOTER */




.entry-footer {
    display: none;
}



footer {
    position: relative;
width: 100%;
max-width: 100% !important;
    display: flex;
    justify-content: space-evenly;   
    z-index:300; 
    margin-bottom:0em !important;
    overflow: hidden;
    padding:0em 5% !important;
    padding-top:5em !important;
    
    overflow-x: hidden !important;
    
    

}


footer:after {
    
    
    max-width: 250% !important;
    width:250%; 
    left:-50%;
    content:'';
    height:140%;
       
    z-index:-1;
    background-size: contain;
    opacity: 1;

position: absolute;
top:20px;
border-radius:100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
background-color: #f3e163;
}






footer div {
    
    flex-basis: 25%;
    border:1px solid grey;
    margin:1em;
    padding:1em;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    z-index:500;
}


footer h3 {
	font-size:20px;
    font-weight:bold !important;
}


footer ul li {
	margin-bottom:0.2em !important;
}

footer ul li a {
    text-decoration: none;
    color: white;
}









/* CF */

.wp-block-contact-form-7-contact-form-selector {
    max-width: 80% !important;
}


.wps-form-column input[type="submit"]:disabled{
	opacity:1;
	margin-top:10px;
	background-color:rgba(43,43,43,1) !important;
	border-radius: 5px;
	transition: all 0.5s ease 0s;
	text-decoration: none;
	padding:0.4em 0.8em 0.4em 0.8em;
	margin:auto;
	 font-size: 20px !important;
	padding:0.3em 0.8em 0.3em 0.8em;
	font-family: 'open_sanslight',sans-serif;
	font-weight: 700 !important;
	text-transform: uppercase;
	color: #FFFFFF;
	box-shadow: unset;
	height:40px;
}


.wps-form-column select {
    margin:1em !important;
}

.wps-form-column textarea {
height:200px !important;
font-family: 'open_sanslight',sans-serif;
margin:1em !important;
}


*:focus {
    outline:none !important;
    background: rgba(242, 130, 91,0.1);
}

input[type="text"], input[type="email"], input[type="tel"], textarea, .woocommerce-checkout .select2-container .select2-selection {
font-family: 'open_sanslight',sans-serif;
width:calc(100% - 2em) !important;
border:1px solid grey !important;
margin: 1em;
box-sizing: border-box;
transition: all 1s ease;
border-radius:3px !important;
}
	

.wps-form-column input[type="submit"] {
	margin-top:10px;
	background-color:rgba(43,43,43,1) !important;
	border-radius: 5px;
	transition: all 0.5s ease 0s;
	text-decoration: none;
	padding:0.4em 0.8em 0.4em 0.8em;
	margin:auto;
	 font-size: 20px !important;
	padding:0.3em 0.8em 0.3em 0.8em;
	font-family: 'open_sanslight',sans-serif;
	font-weight: 700 !important;
	text-transform: uppercase;
	color: #FFFFFF;
	box-shadow: unset;
	height:40px;
}

.wps-form-column {
text-align:left;
}

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {

    border: 2px solid rgb(190, 10, 38);

}

div.wpcf7-mail-sent-ok {

    border: 2px solid #F39400;

}


span.wpcf7-not-valid-tip {

color: #9e1215;

}

input[type="checkbox"] {
    border:1px solid black;
}

input[type="submit"] {
    margin:1em auto !important;
    display:block;
    border:1px solid black !important;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2825b+0,e55b2b+50,f07146+100;Red+3D+%232 */
background: #f2825b; /* Old browsers */
background: -moz-linear-gradient(top,  #f2825b 0%, #e55b2b 50%, #f07146 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2825b 0%,#e55b2b 50%,#f07146 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2825b 0%,#e55b2b 50%,#f07146 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 ); /* IE6-9 */
}



@media screen and (max-width: 700px) {

    .site-header {
        justify-content: center !important;
    }


.entry-content {padding:0.5em !important;}
    h1 {
        font-size:36px !important;
        
        
    }

    .pre_headline {font-size:14px !important;}
    
    .wp-block-cover p {width:100% !important; display: block; margin: auto !important; padding:0 !important}
    .block-horizontal li {width:47%;}

    .wps-form .wps-form-row {display:block !important;}
    .wps-form .wps-form-row .wps-form-column {width:100% !important;}
    h1,h2,h3,h4,h5,p, ul {
        padding-left:1em; 
        padding-right: 1em; 
    }

    body {overflow-x: hidden !important;}

    .wp-block-cover {height:500px !important; }
    #primary-menu-list li a {
        margin:1em !important;
        padding:1em !important;
    }
    .menu-button-container {padding-top:0 !important;}
    
    .header_social {margin:0 !important; }
.header_social a {padding:0.1em 0.2em; margin:0em 0.2em !important;}
    .primary-navigation {margin:auto !important}
    .primary-menu-container {
        width:100%; margin:0; padding:0.5em;
        font-size:16px !important;
    }


    #primary-menu-list li a { padding:0.2em 0.3em}

    #masthead div {margin:0}

    .product {margin-top:10em;}

footer {display: block;}
footer::after, footer::before {
    max-width: 300% !important;
width: 300%;
left: -98%;
}


.columns-3 .product {
    margin: 1em !important;
    width: calc(46% - 2em) !important;
    position: relative;
    padding-bottom: 4em;
    border: 1px dotted #e55b2b;
    background: #fcfff4;
    background: -moz-linear-gradient(-45deg, #fcfff4 0%, #e9e9ce 100%);
    background: -webkit-linear-gradient(-45deg, #fcfff4 0%,#e9e9ce 100%);
    background: linear-gradient(135deg, #fcfff4 0%,#e9e9ce 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 );
  }


  .wp-block-button__link {font-size:0.7em !important;}
#place_order {margin-bottom: 2em !important;}
}