/*******************layout oben ***********************/

body   { 
  	background-image: url("../images/sand.jpg");

}

@font-face {
    font-family: 'anke';
    src: url('fonts/anke.woff2') format('woff2'),
	      url('fonts/anke.woff') format('woff'),
          url('fonts/anke.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'belleza';
    src: url('fonts/belleza.woff2') format('woff2'),
	      url('fonts/belleza.woff') format('woff'),
          url('fonts/belleza.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rabelo';
    src: url('fonts/rabelo.woff2') format('woff2'),
	      url('fonts/rabelo.woff') format('woff'),
          url('fonts/rabelo.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'indie';
    src: url('fonts/indie.woff2') format('woff2'),
	      url('fonts/indie.woff') format('woff'),
          url('fonts/indie.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sand';
    src: url('fonts/sand.woff2') format('woff2'),
	      url('fonts/sand.woff') format('woff'),
          url('fonts/sand.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}


/*******************layout header ***********************/

.header{
    background-image: url("../images/sand.jpg");
  	-webkit-box-shadow: 4px 4px 20px grey;
  	-moz-box-shadow: 4px 4px 20px grey;
  	box-shadow: 4px 4px 20px grey;
  	padding:1%;
	
}


.container-top-a{
  padding:0;
  border-bottom:1px solid #333;
  
}

.logo{width:70%;height:auto;}


#mod-custom123{
  background-repeat: no-repeat;
  background-size:100%;
}



/*******************layout inhalt ***********************/

#mod-custom121, #mod-custom122,#mod-custom124{
  border:1px solid #000;
  border-radius:10px;
  background:#3E4E44;
  color:#fff;
}

.contact-name{display:none;}

.container-top-b{padding-bottom:0;}

.container-bottom-b{
  padding:0;
  border-top:1px solid #333;

}

.item-page .left{
  max-width:120px;
  margin-right:2rem;
  
}




/******************* links ***********************/

.readmore .btn, button.btn:nth-child(1){
  border-radius:10px;
  background-color:#f2f2f2;
  border:1px solid #444;
  box-shadow: 0 0px 5px 0 rgba(0,0,0,0.5)
}
.readmore .btn:hover, button.btn:nth-child(1):hover{
  background-color:#434855;
}

#jform_contact_name, #jform_contact_email, 
#jform_contact_emailmsg, #jform_contact_message{
  border-radius:10px;
  background-color:#f6f6f6;
  border:1px solid #444;
}




/******************* akkordeon ***********************/

#headingagaccordion0, #headingagaccordion1, #headingagaccordion2,
#headingagaccordion3, #headingagaccordion4, #headingagaccordion5{
  background:#eff1f2;
  padding:1rem;
  margin:0.5rem;
  border-radius:5px;
}
#headingagaccordion0:hover, #headingagaccordion1:hover, #headingagaccordion2:hover,
#headingagaccordion3:hover, #headingagaccordion4:hover, #headingagaccordion5:hover {
  background:#f4f4f4;
  padding:1rem;
  margin:0.5rem;
}

#collapseagaccordion0, #collapseagaccordion1, #collapseagaccordion2,
#collapseagaccordion3, #collapseagaccordion4, #collapseagaccordion5{
  padding: 0 1rem;
}


/*******************layout unten ***********************/

.container-footer_wrapper{
  align-items: center;
  justify-content: center; 
}

.container-footer{background-color:#3E4E44;}

footer a{font-size:0.7rem;}

.arrow-up {color:#FBEDD7;}


/*******************layout schriften ***********************/

h1 {font-size:2.1rem;}
h2 {font-size:1.6rem;}
h6-- {font-size:3rem;margin:10% 15%; color:#59C9CE;  font-family:'indie', Tahoma, Geneva, sans-serif;}
h6 {font-size:2rem;margin:10% 15%; color:#59C9CE;  font-family:Tahoma, Geneva, sans-serif;}

#mod-custom123 h1{
  font-family:'play', Tahoma, Geneva, sans-serif;
  font-size:2.2rem;
  text-decoration:none;
  padding:10%;
}



/************************************* mediapoints ******************************************/

@media screen and (min-width:768px) {
	
  
h1{font-size:3.5rem;}
h6{font-size:4rem;margin:10% 15%; }

.item-page .left{max-width:300px;}
  
.logo{width:100%;}
  
#mod-custom123 h1{font-size:4rem;padding:10%;}  

}

@media screen and (min-width:1024px) {
	
  
h1{font-size:4rem;}
h6{font-size:5rem;margin:10% 15%;}

.item-page .left{max-width:300px;}
  
#mod-custom123 h1{font-size:5rem;padding:10%;}  

}




@media screen and (min-width:1240px) {

.item-page .left{max-width:500px;}
  
#mod-custom123 h1{font-size:8rem;padding:10%;} 
  
}

/************************************* Galerie ******************************************/

.animation .blog-item.inview {
	-webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-12-1 12:3:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-hor-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}