htS {

   font-family:Arial;
    	font-style:normal;
 	line-height:110%;
        font-size:3.2vw;
        text-shadow: black 0.1em 0.1em 0.2em;
a:hover { text-decoration:none; color:#000000; };
}



  .ui-datepicker {
    /*width: 94%;*/
	height: auto;
    padding: 0;  font: 1.2em Arial, sans-serif;
  }
  
  

.xxui-datepicker {
  width: 25%;
  height: auto;
  margin: 5px auto 0;
  font: 2vw Arial, sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker{z-index: 99 !important;        
 }
.imgnoland{
   display: none;
}

  #ui-datepicker-div {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
            transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);

  }
  


	
		
		/* General Styles */
html, body {  }
body{ margin:0;  font-family:'Source Sans Pro'; }
section{ position:relative; width:100%; display:block; clear:both; z-index:0;  }
ul { list-style:none; margin:0; padding:0; }
#slideshow{ overflow:hidden; cursor:default; }
#slideshow img{ display:inline-block; width:100%; height: auto; overflow:hidden; }

/* Containers */
#perspective { width:100%; height:100%; position:relative; left:0px; background-color:#fff; }
#perspective>#container { transform: translate3d(0,0,0); transform-origin: 50% 50% 50%; transition:transform 1.4s; position: relative; left: 0; min-height: 100%; z-index: 10; background-color:#fff; }
#YYperspective>#container>#wrapper { position:absolute; top:0; left:0; height:100vh; width:100%; overflow:auto; -webkit-overflow-scrolling:touch; overflow-x:hidden; background-size:cover; background-position:center center; }
#perspective>#container>#wrapper {    }
#perspective #freezer { position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background-color:rgba(0,0,0,0.1); display:none; }

/* Perspective Styles */
#perspective.modalview { position: fixed; perspective: 1500px; }
#perspective.modalview>#container { position: absolute; overflow: hidden; cursor: pointer; height: 100%; width: 100%; backface-visibility: hidden; }
#perspective.animate>#container { transform: translateZ(0px) translateX(10%) rotateY(-50deg); }
#perspective.animate>#container>#freezer { display: block; }
#perspective.modalview>#container>#wrapper { overflow: hidden; }

/* Nav */
#perspective nav { position:absolute; top:0; right:0; bottom:0; left:0; z-index:5; overflow:hidden; margin:0; padding:5%; display:none; }
#perspective nav div { max-width:320px; overflow:hidden; height:calc(100% - 10px); width:40%; overflow-y:auto; }
/*#perspective nav li a { color:#0f172b; font:700 20px/32px 'Lora', serif; text-transform:uppercase; }*/

#perspective.showMenu nav { display:block; }

/* Booking Panel */
#perspective div.bookings { position:absolute; top:0; right:0; bottom:0; left:0; z-index:5; overflow:hidden; margin:0; padding:5%; display:none; background:#0f172b; }
#perspective div.bookings div { max-width:320px; overflow:hidden; height:calc(100% - 70px); width:40%; overflow-y:auto; color:#fff; }
#perspective div.bookings div p { font:400 20px/32px 'Lora', serif; text-transform:uppercase; opacity:.6; padding:10px 0; border-top:1px solid #fff; border-bottom:1px solid #fff; margin:0 0 30px; }
#perspective div.bookings div label { font:300 14px/24px 'Lato', sans-serif; text-transform:uppercase; opacity:.6; letter-spacing:1px; }
#perspective div.bookings div input { font:700 28px/40px 'Lora', serif; color:#fff; width:100%; clear:both; background:none; border:none; }
#perspective div.bookings div input::-webkit-input-placeholder { font:700 28px/40px 'Lora', serif; color:#fff; }
#perspective div.bookings div input:-moz-placeholder { font:700 28px/40px 'Lora', serif; color:#fff; }
#perspective div.bookings div input::-moz-placeholder { font:700 28px/40px 'Lora', serif; color:#fff; }
#perspective div.bookings div input:-ms-input-placeholder { font:700 28px/40px 'Lora', serif; color:#fff; }
#perspective div.bookings div input[type="submit"] { border:2px solid #fff; color:#fff; font:700 14px/24px 'Lato', sans-serif; text-transform:uppercase; letter-spacing:2px; padding:15px; width:250px; background:none; }
#perspective.showBook div.bookings { display:block; }

/* Header */
header { position:absolute; top:0; right:0; left:0; z-index:999; transition:all 0.5s ease-in-out; }
header ul { float:right; position:relative; z-index:20; margin-right:17px; }
header ul:first-child { float:left; margin:0; }
header ul::after { clear:both; content:""; display:table; }
header ul li { float:left; }
header ul:last-child li { vertical-align:middle; }
header ul:last-child li:not(:first-child) { margin-left:24px; }
header ul:last-child li:last-child { margin-right:24px; }
header ul:first-child li a { text-transform: uppercase; cursor:pointer; font:600 16px/72px 'Lato', sans-serif; display: block; float:left; padding:0 42px; }
header ul:last-child li a { text-transform:uppercase; cursor:pointer; font:600 32px/72px 'Lato', sans-serif; display:block; }
header ul li a#pull { background: rgba(255,255,255,0.5) url(img/icon-menu.png) center left 42px no-repeat; background-size: 32px auto; color:#0f172b; padding-left: 90px; }
/* header ul li a#book { background:#0f172b; color:#fff; } */
header ul:last-child li a { color:#fff; }
header ul:last-child li a.icon { overflow:hidden; text-indent:101%; white-space:nowrap; display:block; background-position:center; background-repeat:no-repeat; background-size:contain; height:72px; }
/*header ul:last-child li a.icon.tel { width:20px; background-image:url(http://www.badruttspalace.com/images/icons/phone-white.png); } */
header ul:last-child li a.icon.tel { width:40px; background-image:url('img/tel001_line_sw3.png'); }
/*header ul:last-child li a.icon.mail { width:22px; background-image:url(http://www.badruttspalace.com/images/icons/icon-mail-white.png); } */
/*header ul:last-child li a.icon.map { width:18px; background-image:url(http://www.badruttspalace.com/images/icons/icon-marker-white.png); } */

/* Responsive */
@media only screen and (max-width:1200px) {
	#perspective.animate>#container { transform:translateZ(0px) translateX(30%) rotateY(-50deg); }
	#perspective nav div { width:60%; }
	#perspective div.bookings div { width:60%; }
}
@media only screen and (max-width:800px) {
	#perspective.animate>#container { transform:translateZ(0px) translateX(50%) rotateY(-70deg); }
	#perspective nav div { width:70%; }
	#perspective div.bookings div { width:70%; }
}

  @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 812px) 
and (orientation : landscape){  
	#ui-datepicker-div {	font-size: 82.5%; }
	header ul:first-child li a { text-transform: uppercase; cursor:pointer; font:600 16px/42px 'Lato', sans-serif; display: block; float:left; padding:0 22px; }
	header ul li a#pull { background: rgba(255,255,255,0.5) url(img/icon-menu.png) center left 12px no-repeat; background-size: 32px auto; color:#0f172b; padding-left: 60px; }	
	}



.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap; flex-wrap:wrap;high:100vh; background-color:#fefefe;overflow:hidden;height:100vh;}
.row--6{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap; flex-wrap:wrap;high:100vh; background-color:#fefefe;overflow:hidden;height:100vh;background-image:url('img/baum.jpg');}
.col-md-1{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%; text-align:center;  }

.col-md-1-6{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%; text-align:center;  }

.col-md-1Y{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;height:58vh ; text-align:center;  }
.col-md-1W{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%; text-align:left;  }
.col-md-1T{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%; text-align:center; padding-left:13%;padding-right:13% }
.col-md-F{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:1 1 100%;max-width:100%; text-align:center;  }

 /*  YYYYYYYYYYYYYYYYYY */ 

.col-md-1Z{max-width:100%; height:50vh; text-align:center;  }  
  
  

.col-md-2a1{float:left; width:17%; text-align:center }
.col-md-2a2{float:left; width:48%; text-align:center;color:black }
.col-md-2a3{float:left; width:35%; text-align:left ; }
.col-md-2b{-webkit-box-flex:0;-ms-flex:0 0 55%;flex:0 0 55%;max-width:55%; text-align:center}


.col-md-6a1{float:left; width:50%; text-align:center;padding-top:2vh }
.col-md-6a2{float:left; width:50%; text-align:center;padding-bottom:2vh  }
.col-md-6a1ÖÖ{float:left; width:25%; text-align:center;padding-top:2vh }
.col-md-6a2U{float:left; width:100%; text-align:center;padding-bottom:2vh  }

htSX { font-family:Arial;
    	font-style:normal;
 	    line-height:110%;
        font-size:4vh;
        text-shadow: black 0.1em 0.1em 0.2em; 
		color: black;

		
}


.col-md-2b1{float:left; width:50%; text-align:center}



.col-md-1A { -webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:25%; text-align:center;
	background-color: rgba(0, 0, 255, .4);
	/*left: 4em; */
	top: -8em;
	z-index: 9;
}

.col-md-A {   
  /*background-color: rgb(255,255,255, .4); */
  width: 50%;
  margin: 0 auto;
  
    position: absolute;
    top: 77%;
    right: 50%;
	left:25%;
	
  	z-index: 9;
}

}

md-1a{
  background-color: rgb(200,200,200);
  width: 50%;
  margin: 0 auto;
  
    position absolute;
    top: 90%;
    right: 50%;
	left:25%;
  
    	z-index: 9;
}

.big1{font-size: 10vh;}
@media screen and ( max-width:1024px){
.big1{font-size: 7vh;}
htSX {

   font-family:Arial;
    	font-style:normal;
 	line-height:110%;
        font-size:3vh;
        text-shadow: black 0.1em 0.1em 0.2em;color: black;
}



}




.big{font-size: 5vw;}
.largefont {
  color: #ff0000;
  /*font-family:arial;*/
  font-size: 5vw;
} 
.largefont2 {
  color: #ff0000;
  /*font-family:arial;*/
  font-size: 6vw;
} 

.largefont2a {
  color: #ff0000;
  font-family:herz1;
  font-size: 6vw;
  /*transform: rotate(-10deg);*/
} 

.largefont1 {
  color: #ffffff;
  /*font-family:arial;*/
  font-size: 5vw;
} 







/* slideshow */

.slideshow {
  position: absolute;
  width: 100vw;
  height: 100vh;  
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: car-anim;
  animation-name: car-anim;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  opacity: 1;
  /*-webkit-transform: scale(1);*/
  /*transform: scale(1);*/
}



.slideshow-image:nth-child(1){
    animation-delay: -15s;    
   
  }
.slideshow-image:nth-child(2){
    animation-delay: -10s;    
   
  }
.slideshow-image:nth-child(3){
    animation-delay: -5s;   
   
  }



    @-webkit-keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;  
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;  
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }
  
      @keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;       transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* end fade in */
      5%{
        opacity:1;      transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* start fade out */
      33%{
        z-index:2;       transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
      33.1%{
        z-index:1;      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;      transform: scale(1);
	  -moz-transform: scale(1);
      }
  }


/* -------------------------------------------*/
/* -------------------------------------------*/


@keyframes fadeina {
    0%   { opacity: 0;  top: 62%; left: 48%;}
	1% { opacity: 0;  top: 62%; left: 48%;}
    100% { opacity: 1;  top: 53%; left: 55%;}
}




@keyframes fadeinb {
    0%   { opacity: 0;  top: 65%; left: 52%;}
	60% { opacity: 0;  top: 65%; left: 52%;}
    100% { opacity: 1;  top: 56%; left: 57%;}
}

@keyframes fadeinc {
    0%   { opacity: 0;  top: 63%; left: 54%;}
	75% { opacity: 0;  top: 63%; left: 54%;}
    100% { opacity: 1;  top: 56%; left: 59%;}
}


@keyframes fadeinax {
    0%   { opacity: 0;  top: 62%; left: 48%;}
	1% { opacity: 0;  top: 62%; left: 48%;}
    100% { opacity: 1;  top: 53%; left: 55%;}
}




@keyframes fadeinbx {
    0%   { opacity: 0;  top: 65%; left: 52%;}
	15% { opacity: 0;  top: 65%; left: 52%;}
    100% { opacity: 1;  top: 56%; left: 57%;}
}



#foo1 {
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -53%);
    -webkit-animation: fadeina 6s ;
       -moz-animation: fadeina 6s ease-in-out;
            animation: fadeina 6s ease-in-out; 



}


#foo1x {
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -53%);
    -webkit-animation: fadeinax 4s ;
       -moz-animation: fadeinax 4s ease-in-out;
            animation: fadeinax 4s ease-in-out; 



}

#foo2 {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-56%, -50%);
    -webkit-animation: fadeinb 6s ;
       -moz-animation: fadeinb 6s ease-in-out;
            animation: fadeinb 6s ease-in-out; 


}

#foo2x {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-56%, -50%);
    -webkit-animation: fadeinbx 4s ;
       -moz-animation: fadeinbx 4s ease-in-out;
            animation: fadeinbx 4s ease-in-out; 


}

#foo3 {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-56%, -50%);
    -webkit-animation: fadeinc 7s ;
       -moz-animation: fadeinc 7s linear;
            animation: fadeinc 7s linear; 


}

----------------------------------------------------------

.slideshow2 {
  position: absolute;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
}

.slideshow-image2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: zoo-nim;
  animation-name: zoo-nim;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  opacity: 1;
  /*-webkit-transform: scale(1);*/
  /*transform: scale(1);*/
}



.slideshow-image2:nth-child(1){
    animation-delay: -10s;    
   
  }
.slideshow-image2:nth-child(2){
    animation-delay: -5s;    
   
  }




    @-webkit-keyframes zoo-nim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;  transform: scale(1);
      }
      /* end fade in */
      5%{
        opacity:1;  transform: scale(1);
      }
      /* start fade out */
      50%{
        z-index:2;  transform: scale(1.5);
      }
      50.1%{
        z-index:1;  transform: scale(1.5);
      }
      /* end fade out */
      55%{
        opacity:1;  transform: scale(1.5);
      }
      /* drop z-index to 1 */
      55.1%{
        opacity:0; transform: scale(1.5);
      }
      100%{
        z-index:1;
        opacity:0;transform: scale(1);
      }
  }
  
      @keyframes zoo-nim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;       transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
      /* end fade in */
      5%{
        opacity:1;      transform: scale(1.2);
	  -moz-transform: scale(1.17);
      }
      /* start fade out */
      50%{
        z-index:2;       transform: scale(1);
	  -moz-transform: scale(1);
      }
      50.1%{
        z-index:1;      transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* end fade out */
      55%{
        opacity:1;     transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* drop z-index to 1 */
      55.1%{
        opacity:0;      transform: scale(1);
	  -moz-transform: scale(1);
      }
      100%{
        z-index:1;
        opacity:0;      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
  }




------------------------------------------------------------



.slideshow1 {
  position: absolute;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
}

.slideshow-image1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: zoo-anim;
  animation-name: zoo-anim;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  opacity: 1;
  /*-webkit-transform: scale(1);*/
  /*transform: scale(1);*/
}



.slideshow-image1:nth-child(1){
    animation-delay: -15s;    
   
  }
.slideshow-image1:nth-child(2){
    animation-delay: -10s;    
   
  }
.slideshow-image1:nth-child(3){
    animation-delay: -5s;   
   
  }



    @-webkit-keyframes zoo-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;  transform: scale(1);
      }
      /* end fade in */
      5%{
        opacity:1;  transform: scale(1);
      }
      /* start fade out */
      33%{
        z-index:2;  transform: scale(1.5);
      }
      33.1%{
        z-index:1;  transform: scale(1.5);
      }
      /* end fade out */
      38%{
        opacity:1;  transform: scale(1.5);
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0; transform: scale(1.5);
      }
      100%{
        z-index:1;
        opacity:0;transform: scale(1);
      }
  }
  
      @keyframes zoo-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;       transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
      /* end fade in */
      5%{
        opacity:1;      transform: scale(1.2);
	  -moz-transform: scale(1.17);
      }
      /* start fade out */
      33%{
        z-index:2;       transform: scale(1);
	  -moz-transform: scale(1);
      }
      33.1%{
        z-index:1;      transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* end fade out */
      38%{
        opacity:1;     transform: scale(1);
	  -moz-transform: scale(1);
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;      transform: scale(1);
	  -moz-transform: scale(1);
      }
      100%{
        z-index:1;
        opacity:0;      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      }
  }



/* -------------------------------------------*/
.zoom-in{
    animation-name: effect-zoomin;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	
	
	}
	
	
	 @keyframes effect-zoomin
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    38%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
  }










<!-- slider -->
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carousel{
    display:block !important;
    max-height:none !important;
    position:relative;
	padding-top:2%;
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .carousel,
  body.MsgBody .carousel{
    display:none !important;
  }

  .carousel a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .carousel img{
    display:block!important;
    width:100% !important;
    height:auto !important;
  }

  .carousel.responsive{
    width:100% !important;
  }

  .carousel.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */
  .carousel.fade a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:0;   
    -webkit-animation: car-anim 9s linear infinite;    
	
  }

  .carousel.fade a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -10s;    
   	
  }
  .carousel.fade a:nth-child(2){
    -webkit-animation-delay: -7s;    
   
  }
  .carousel.fade a:nth-child(3){
    -webkit-animation-delay: -4s;    
   
  } 



  @-webkit-keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .carousel.effects img{
    -webkit-animation-name: effect-zoomin;
    -webkit-animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
	
  }
  .carousel.effects a:nth-child(1) img{
    -webkit-animation-delay: -10s;    

  }
  .carousel.effects a:nth-child(2) img{
    -webkit-animation-delay: -7s;
    
  }
  .carousel.effects a:nth-child(3) img{
    -webkit-animation-delay: -4s;    

  }



  .carousel.effects img.zoom-in{
    -webkit-animation-name: effect-zoomin;

  }
  .carousel.effects img.zoom-out{
    -webkit-animation-name: effect-zoomout;

  }
  .carousel.effects img.pan-right{
    -webkit-animation-name: effect-panright;

  }
  .carousel.effects img.pan-left{
    -webkit-animation-name: effect-panleft;

  }




  @-webkit-keyframes effect-zoomin
  {
    0% {
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @-webkit-keyframes effect-zoomout
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);	  
    }
    38%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
    }
  }

  @-webkit-keyframes effect-panright
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @-webkit-keyframes effect-panleft
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  



}

/*  mozi  */

@media screen  {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carousel{
    display:block !important;
    max-height:none !important;
    position:relative;
	/*transform: rotate(4deg);*/
	
  }
  
  
    .xxxcarousel{
    display:block !important;
    max-height:none !important;
    position:relative;
	    top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		
	
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .carousel,
  body.MsgBody .carousel{
    display:none !important;
  }

  .carousel a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .carousel img{
    display:block!important;
    width:100% !important;
    height:auto !important;
  }

  .carousel.responsive{
    width:100% !important;
  }

  .carousel.responsive .car-cont{

    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */
  .carousel.fade a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:0;   
    animation: car-anim 15s linear infinite;    
	
  }

  .carousel.fade a:nth-child(1){
    position:relative;
    animation-delay: -16s;    
   	
  }
  .carousel.fade a:nth-child(2){
    animation-delay: -11s;    
   
  }
  .carousel.fade a:nth-child(3){
    animation-delay: -6s;    
   
  }

  
  



  @keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .carousel.effects img{
    animation-name: effect-zoomin;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	
  }
  .carousel.effects a:nth-child(1) img{
    animation-delay: -16s;    

  }
  .carousel.effects a:nth-child(2) img{
    animation-delay: -11s;
    
  }
  .carousel.effects a:nth-child(3) img{
    animation-delay: -5s;    

  }



  .carousel.effects img.zoom-in{
    animation-name: effect-zoomin;

  }
  .carousel.effects img.zoom-out{
    animation-name: effect-zoomout;

  }
  .carousel.effects img.pan-right{
    animation-name: effect-panright;

  }
  .carousel.effects img.pan-left{
    animation-name: effect-panleft;

  }




  @keyframes effect-zoomin
  {
    0% {
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    100%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @keyframes effect-zoomout
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      transform: scale(1);
	  -moz-transform: scale(1);	  
    }
    38%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
    }
  }

  @keyframes effect-panright
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	
	  
      margin-left:-10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @keyframes effect-panleft
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  
  
  
  /*--------------------------------*/
  
  
  
  
  
  
  
  
  
  
  /* ---------*/
  
  }
  
  
  

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carouselZ{
    display:block !important;
    max-height:none !important;
    position:relative;
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .carouselZ,
  body.MsgBody .carouselZ{
    display:none !important;
  }

  .carouselZ a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .carouselZ img{
    display:block!important;
    width:100% !important;
    height:auto !important;
  }

  .carouselZ.responsive{
    width:100% !important;
  }

  .carouselZ.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */
  .carouselZ.fade a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:0;   
    -webkit-animation: car-anim 9s linear infinite;    
	
  }

  .carouselZ.fade a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -10s;    
   	
  }
  .carouselZ.fade a:nth-child(2){
    -webkit-animation-delay: -7s;    
   
  }
  .carouselZ.fade a:nth-child(3){
    -webkit-animation-delay: -4s;    
   
  } 



  @-webkit-keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .carouselZ.effects img{
    -webkit-animation-name: effect-zoomin;
    -webkit-animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
	
  }
  .carouselZ.effects a:nth-child(1) img{
    -webkit-animation-delay: -10s;    

  }
  .carouselZ.effects a:nth-child(2) img{
    -webkit-animation-delay: -7s;
    
  }
  .carouselZ.effects a:nth-child(3) img{
    -webkit-animation-delay: -4s;    

  }



  .carouselZ.effects img.zoom-in{
    -webkit-animation-name: effect-zoomin;

  }
  .carouselZ.effects img.zoom-out{
    -webkit-animation-name: effect-zoomout;

  }
  .carouselZ.effects img.pan-right{
    -webkit-animation-name: effect-panright;

  }
  .carouselZ.effects img.pan-left{
    -webkit-animation-name: effect-panleft;

  }




  @-webkit-keyframes effect-zoomin
  {
    0% {
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @-webkit-keyframes effect-zoomout
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);	  
    }
    38%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
    }
  }

  @-webkit-keyframes effect-panright
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @-webkit-keyframes effect-panleft
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  



}

/*  mozi  */

@media screen  {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carouselZ{
    display:block !important;
    max-height:none !important;
    position:relative;
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .carouselZ,
  body.MsgBody .carouselZ{
    display:none !important;
  }

  .carouselZ a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .carouselZ img{
    display:block!important;
    width:100% !important;
    height:auto !important;
  }

  .carouselZ.responsive{
    width:100% !important;
  }

  .carouselZ.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */
  .carouselZ.fade a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:0;   
    animation: car-anim 9s linear infinite;    
	
  }

  .carouselZ.fade a:nth-child(1){
    position:relative;
    animation-delay: -10s;    
   	
  }
  .carouselZ.fade a:nth-child(2){
    animation-delay: -7s;    
   
  }
  .carouselZ.fade a:nth-child(3){
    animation-delay: -4s;    
   
  }



  @keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .carouselZ.effects img{
    animation-name: effect-zoomin;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	
  }
  .carouselZ.effects a:nth-child(1) img{
    animation-delay: -10s;    

  }
  .carouselZ.effects a:nth-child(2) img{
    animation-delay: -7s;
    
  }
  .carouselZ.effects a:nth-child(3) img{
    animation-delay: -4s;    

  }



  .carouselZ.effects img.zoom-in{
    animation-name: effect-zoomin;

  }
  .carouselZ.effects img.zoom-out{
    animation-name: effect-zoomout;

  }
  .carouselZ.effects img.pan-right{
    animation-name: effect-panright;

  }
  .carouselZ.effects img.pan-left{
    animation-name: effect-panleft;

  }




  @keyframes effect-zoomin
  {
    0% {
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    100%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @keyframes effect-zoomout
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      transform: scale(1);
	  -moz-transform: scale(1);	  
    }
    38%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
    }
  }

  @keyframes effect-panright
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	
	  
      margin-left:-10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @keyframes effect-panleft
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  



}
  
  
  
  
  
  
  
  
  
  
  


.snappy {
    overflow-y: scroll;
	overflow-x: hidden;
    width: 100%;
    height: 100vh; 
	/*height: calc(var(--vh, 1vh) * 100);*/
    -ms-scroll-snap-points-y: snapInterval(0, 100vh);
    -ms-scroll-snap-type: mandatory;
    -webkit-snap-points-y: repeat(100vh);
    -webkit-scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: mandatory;
}
.section {
    width: 100%;
    height: 100vh; 
	/*height: calc(var(--vh, 1vh) * 100);*/
}



.rowx {
    width: 100%;
    height: 100vh; 
/*border: 1px solid #c3c3c3;*/
    display: -webkit-flex; /* Safari */
    display: flex;
}

.rowx div {
    -webkit-flex-grow: 1; /* Safari 6.1+ */
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
	-webkit-flex-basis:33.33%
    flex-grow: 1;
    flex-shrink: 1;
	flex-basis: 33.33%;
	transition: flex-basis 0.5s;
	filter: brightness(1);
	transition: filter 0.5s;

}



.rowx div:hover {
    -webkit-flex-basis: 73.33%; /* Safari 6.1+ */
    flex-basis: 73.33%;
	transition: flex-basis 0.5s;

}

#maxxin:hover div:not(:hover) {
  -webkit-filter: grayscale(1);
          filter: grayscale(.7);
        opacity: .75;

}
.rowx:hover div:not(.MITTE):not(:hover) {
/*filter: blur(2px);*/
	filter: brightness(.5);
	transition: filter 0.5s;

}




.xyz {background-size:cover; background-repeat:no-repeat; background-position:center center; width:calc(33.33vw); z-index:1; top:0px; height:100%;}

.MITTE {
    position: relative;
    top: 75%;
	text-align: center;
	color:#ffffff;
	   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        font-size:4vw;
        text-shadow: black 0.1em 0.1em 0.2em;

}







input.klickan {
 display:none;
}

input.klickan:checked ~ label.klicktext::after {
 content:"anzeigen";
}
input.klickan:checked ~ .klickweg {
 display:none;
}
input.klickan:not(:checked) ~ .klickweginv {
 display:none;
}



@media screen and (orientation: landscape) {

.klickweg {display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap; flex-wrap:wrap;high:100vh; background-image:url("img/baum.jpg");background-size: 100% auto;overflow:hidden;height:100vh;}

h2tTAB1 {
	text-shadow: black 0.1em 0.1em 0.2em;
float:left;
text-transform:;
font-variant:;
text-align:left;
vertical-align:middle;
letter-spacing:0px;
word-spacing:0px;
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        /*font-size:2.1em;*/
		font-size:3vw;
}

h2tTABX {
	text-shadow: black 0.1em 0.1em 0.2em;
float:left;
text-transform:;
font-variant:;
text-align:Center;
vertical-align:middle;
letter-spacing:0px;
word-spacing:0px;
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        /*font-size:2.1em;*/
		font-size:3vw;
}


h2tl {
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        font-size:2.5vw;
}

h2tlZ {
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        font-size:2.5vw;
}
htx {

   font-family:Arial;
    	font-style:bold;
 	line-height:120%;
        font-size:1.6em;
	border:3px; }
	
	h2tA1 {
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        font-size:4vw;
        text-shadow: black 0.1em 0.1em 0.2em;
}

h2tAY {
   font-family:'mistralregular';
    	font-style:normal;
        font-weight:normal;
        /*font-size:2.8em;*/
		font-size:3.5vw;

text-align: left;

}

ht {    font-family:Arial;
    	font-style:normal;
 	line-height:150%;
        font-size:1.8vw;
}

htgen{    font-family:Arial;
    	font-style:normal;
 	line-height:150%;
        font-size:1.5vw;
}




htTAB {    font-family:Arial;
    	font-style:normal;
 	line-height:150%;
        font-size:1.8vw;
}
	
	
.largefontP{font-size: 4vw;}	


}

<!-- AAAAAAAAAAAAAAAAAAAAAAAA  -->


@media screen and (-webkit-min-device-pixel-ratio: 0) {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .carousel{
    display:block !important;
    max-height:none !important;
    position:relative;
  }







  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .Karousel,
  body.MsgBody .Karousel{
    display:none !important;
  }

  .Karousel a{
    width:100%;
    display:block;
    overflow:hidden;
	position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
	
	
	
  }  

  .Karousel img{
    display:block!important;
    /*width:100% !important;*/
    height:100% !important;
  }

  .Karousel.responsive{
    width:100% !important;
  }

  .Karousel.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */
  .Karousel.fade a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:0;   
    -webkit-animation: car-anim 9s linear infinite;    
	
  }

  .Karousel.fade a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -10s;    
   	
  }
  .Karousel.fade a:nth-child(2){
    -webkit-animation-delay: -7s;    
   
  }
  .Karousel.fade a:nth-child(3){
    -webkit-animation-delay: -4s;    
   
  } 



  @-webkit-keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .Karousel.effects img{
    -webkit-animation-name: effect-zoomin;
    -webkit-animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
	
  }
  .Karousel.effects a:nth-child(1) img{
    -webkit-animation-delay: -10s;    

  }
  .Karousel.effects a:nth-child(2) img{
    -webkit-animation-delay: -7s;
    
  }
  .Karousel.effects a:nth-child(3) img{
    -webkit-animation-delay: -4s;    

  }



  .Karousel.effects img.zoom-in{
    -webkit-animation-name: effect-zoomin;

  }
  .Karousel.effects img.zoom-out{
    -webkit-animation-name: effect-zoomout;

  }
  .Karousel.effects img.pan-right{
    -webkit-animation-name: effect-panright;

  }
  .Karousel.effects img.pan-left{
    -webkit-animation-name: effect-panleft;

  }




  @-webkit-keyframes effect-zoomin
  {
    0% {
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @-webkit-keyframes effect-zoomout
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
    }
    33.33%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);	  
    }
    38%{
      -webkit-transform: scale(1);
	  -moz-transform: scale(1.2);
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
    }
  }

  @-webkit-keyframes effect-panright
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @-webkit-keyframes effect-panleft
  {
    0% {
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      -webkit-transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  



}

/*  mozi  */

@media screen and (orientation: landscape) {

  /* Hide Fallback content first */
  .fallback{
    display:none;
  }

  .Karousel{
  position: absolute;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
  }

  /* 
  Selective blocking for clients.
  - Samsung (#MessageViewBody) - no absolute positioning
  - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
  */
  #MessageViewBody .fallback,
  body.MsgBody .fallback{ 
    display:block; 
  }
  #MessageViewBody .Karousel,
  body.MsgBody .Karousel{
    display:none !important;
  }

  .Karousel a{
    width:100%;
    display:block;
    overflow:hidden;
  }  

  .Karousel img{
    display:block!important;
    width:auto !important;
    height:100vh !important;
	
  }

  .Karousel.responsive{
    width:100% !important;

  }

  .Karousel.responsive .car-cont{
    width:100% !important;
    height:auto !important;
  }  

  /* Fade  */

  
  
  .Karousel.fade3 a{
    position:absolute;
    opacity:0;   
    animation: car-anim 15s linear infinite;    
	
  }


  .Karousel.fade3 a:nth-child(1){
    animation-delay: -15s;    
   
  }
  .Karousel.fade3 a:nth-child(2){
    animation-delay: -10s;    
   
  }
    .Karousel.fade3 a:nth-child(3){
    animation-delay: -5s;    
   
  }  


  @keyframes car-anim4
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      25%{
        z-index:2;
      }
      25.1%{
        z-index:1;
      }
      /* end fade out */
      30%{
        opacity:1;
      }
      /* drop z-index to 1 */
      30.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }
  
    @-webkit-keyframes car-anim
  {
      /* start fade in */
      0% {
        z-index:2;
        opacity:0;
      }
      /* end fade in */
      5%{
        opacity:1;
      }
      /* start fade out */
      33%{
        z-index:2;
      }
      33.1%{
        z-index:1;
      }
      /* end fade out */
      38%{
        opacity:1;
      }
      /* drop z-index to 1 */
      38.1%{
        opacity:0;
      }
      100%{
        z-index:1;
        opacity:0;
      }
  }


  /* EFFECTS */
  .Karousel.effects img{
    animation-name: effect-zoomin;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	
  }
  .Karousel.effects a:nth-child(1) img{
    animation-delay: -10s;    

  }
  .Karousel.effects a:nth-child(2) img{
    animation-delay: -7s;
    
  }
  .Karousel.effects a:nth-child(3) img{
    animation-delay: -4s;    

  }

  



  .Karousel.effects img.zoom-in{
    animation-name: effect-zoomin;

  }
  .Karousel.effects img.zoom-out{
    animation-name: effect-zoomout;

  }
  .Karousel.effects img.pan-right{
    animation-name: effect-panright;

  }
  .Karousel.effects img.pan-left{
    animation-name: effect-panleft;

  }




  @keyframes effect-zoomin
  {
    0% {
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    38%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    100%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
  }
  @keyframes effect-zoomout
  {
    0% {
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    33.33%{
      transform: scale(1);
	  -moz-transform: scale(1);	  
    }
    38%{
      transform: scale(1);
	  -moz-transform: scale(1);
    }
    100%{
      transform: scale(1);
	  -moz-transform: scale(1);	  
    }
  }

  @keyframes effect-panright
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	
	  
      margin-left:-10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.4);	  
      margin-left:10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:-10%;
    }
  }
  @keyframes effect-panleft
  {
    0% {
      transform: scale(1.2);
	  -moz-transform: scale(1.2);	  
      margin-left:10%;
    }
    33.33%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    38%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:-10%;
    }
    100%{
      transform: scale(1.2);
	  -moz-transform: scale(1.2);
      margin-left:10%;
    }
  }
  
  
  



}










.col-md-1X{   position: absolute; 
  left:25%;
  top: 50%;
  height: 100%;
  width: 50%;
  transform: translate(-50%,-50%);  }
.col-md-2X{   position: absolute; 
  left: 75%;
  top: 50%;
  height: 100%;
  width: 50%;
  transform: translate(-50%,-50%);  }




.col-md-1B{   position: absolute;
  left:16.5%;
  top: 50%;
  height: 100%;
  width: 33%;
  transform: translate(-50%,-50%);  }
.col-md-2B{   position: absolute;
  left: 49.5%;
  top: 50%;
  height: 100%;
  width: 33%;
  transform: translate(-50%,-50%);  }
.col-md-3B{   position: absolute;
  left:82.5%;
  top: 50%;
  height: 100%;
  width: 33%;
  transform: translate(-50%,-50%);  }
img.portrait1 {
  width:auto;
  height: auto;
  transform: translate(-18%,-0%); 
    left:50%;
  top: 50%;
}  
img.portrait2 {
  width:auto;
  height: auto;
  transform: translate(-33%,-0%); 
    left:50%;
  top: 50%;
}
img.portrait3 {
  width:auto;
  height: auto;
  transform: translate(-33%,-0%); 
    left:50%;
  top: 50%;
}
.kiste{  
  width:100%;
  height: 100%; 
  
  overflow: hidden;
  
  
   position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%);
  }
  
  
  <!-- test -->



.col-md-4a{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:43.3333333333%;  background: #f0f0f0; }
.col-md-4b{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:43.3333333333%;  background: #e0e0e0; }
.col-md-4b:hover{-webkit-box-flex:0;-ms-flex:0 0 23.3333333333%;flex:0 0 23.3333333333%;max-width:43.3333333333%;  background: #e0e0e0; }
.col-md-4c{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:43.3333333333%;  background: #d0d0d0; }

.pk{position:absolute;width:58%;  transform: rotate(4deg); z-index:7 ;padding-left:0%;padding-top:0%}

.pki{position:absolute;width:56%;padding-left:4.5%;padding-top:3.7%}


 .logo1{ position: relative;
    width:100%;
    background-image:url("img/logo2.png");
	margin-top: 0%;
    height: 35%;
    background-size: 40% auto;
    background-position: center center;
	background-repeat: no-repeat;
	
   
 }


.postA {     font-family:Arial;
    	font-style:normal;
font-size:6vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2

}
.postB { margin-top:3%;   font-family:Arial;
    	font-style:normal;
font-size:5vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2
}

.postC { margin-top:0%;   font-family:Arial;
    	font-style:normal;
font-size:5vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2

}

.postD {  margin-top:0%;  font-family:'mistralregular';    	font-style:normal;
        font-weight:normal;
font-size:6vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2

}

.postE {  margin-top:3%;   font-family:Arial;
    	font-style:normal;color:#fff;
font-size:5vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2;
}

.phoneE{height:5vh; }

.postF { margin-top:8vh;
font-family:'mistralregular';    	font-style:normal;
        font-weight:normal;
font-size:6vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2

}

.postH { margin-top:6vh;   font-family:Arial;
    	font-style:normal;
font-size:5vh;   text-shadow: black 0.1em 0.1em 0.2em;line-height:1.2

}


.logo2 {background-image:url ();
height:33vh; padding-top: 7vh
}



.noland{display:none}