@charset "UTF-8";

/*th, 2022-10-12, deactivated */
/*@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");*/

/*th, 2022-10-12, replaced with local fonts */
@import url('/media/1052/googlefontslato.css');

/*Gegen Windows Zoom*/
@media (-webkit-device-pixel-ratio: 1.25) {
  * {
    zoom: 0.8!important;
  }
}


/*Hier sind die Farbvariablen des Themes gelistet*/
/*Hier beginnt CSS*/
/*--------------------------------------------------------*/
/* INHALT*/
/*
I.      ALLGEMEINES
II.     FONTS UND SCHRIFTTYPEN
III.    LINKMENU 
IV.     DOWNLOAD
V.      PARALLAX UND JUMBOTRON
VI.     FOOTER
VII.    BUTTON
VIII.   TEILBEREICHE
IX.     SLIDER
X.      HEADER
XI.     BELEGUNG UND BUCHUNG
XII.    PRINT LAYOUT
XIII.   GALLERIE BILDER


*/
/*  I.      ALLGEMEINES
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;

}

body {

	font-family: 'Lato', sans-serif !important;
	font-size: 1em !important;
background-color:white;
	min-height: 100vh;
	
}
@media only screen and (min-width:2560px) and (orientation:landscape){
.shadowme{
 max-width: 2500px!important;
border-left:1px solid #eb5958;
border-right:1px solid #eb5958;
  }
}
.padding-0 {
	padding: 0px !important;
}
@media only screen and (min-width:1px) and (max-width:420px){
.padding-0.mobilepadding{
    padding-left: 0px!important;
    padding-right: 0px!important;

  }
}

.margin-0 {
	margin: 0px !important;
}

.padding5 {
	padding-left: 5px !important;
	padding-right: 5px !important;
}
/* Links */
.nounderline{
  border: 0px!important;
}
.nounderline:hover{

  display: inline!important;
  color: #eb5757;
  border: 0px!important;
  text-decoration: none;
}
a{
  color:black;
  border-bottom: 1px solid #FF4242;
}
a:hover{
  font-weight: 500;
  display: inline;
  color: #eb5757;
  text-decoration: none;
}

/*  II.     FONTS UND SCHRIFTTYPEN
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
.h2, h2 {
	color: #1E212C!important;
	font-family: 'Lato', sans-serif !important;
	font-weight: bold;
	font-size: 1.8em;
}


/* roter Balken für die Schriften */
@media screen and (min-width: 1px) and (max-width:420px) {
.balken{
    border-left: 3px solid #eb5757;
    padding-left:24px;
}

.balken.balkenbilder{
  border-left: 3px solid #eb5757;
  padding-left:24px;
}
}
@media screen and (min-width: 421px){
  .balken{
      border-left: 3px solid #eb5757;
      padding-left:24px;
      margin:20px;
  }
	
	
 .balken.balkenbilder{
    border-left: 3px solid #eb5757;
    padding-left:24px;
    margin-top:10px!important;
    margin-bottom:10px!important;
    margin-right:0px!important;
    margin-left:0px!important;
} 
  }
p {
	color: #1E212C;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
    text-align: left;
}
.roteschrift{
  color: #eb5757;
  font-weight:bold;
}
hr.white {
	border-top: 1px solid white;
}

/* Listen mit Bulletpoints Tennisbällen */

ul.tennis {
  list-style-image: url('https://thk.qinum.net/media/1038/bulletpoint1.png');
list-style-position: outside;
  }
  li.{
    padding-left:10px;
  }

  .weissschrift{
    color:white;
  }
/*  III.    LINKMENU 
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.paddingtop{
    padding-top:10px!important;
}
/*Das Linkmenü ist fixed, damit es immer mitscrollt. Dazu ist der unten liegende Teil in einem
extra Container etwas heruntergesetzt - daher die Klasse 'runter'*/
a.icon {
    color: #D7DADD;

    background-color: white !important;
  }
  .linkmenu {
    background-color: transparent;
    position: fixed;
    padding-left: 0px;
    padding-right: 0px;
  }
  .linkmenu2 {
    background-color: transparent;
    height: 80px;

  }
  /*Linkmenu 3 ist nur für die fade-in Navigation gedacht, z.B. bei Water-Parallaxheader*/
  .linkmenu3 {
    background-color: transparent;
    height: 80px;

  }
  /*Linkmenu fading ist nur für die fade-in Navigation gedacht, z.B. bei Water-Parallaxheader*/
  .linkmenu2.fading {
    background-color: transparent !important;
  }
  /*für markierten link*/
  .runter {
    top: 30px;
  }
  .runter2 {
    top: 50px;
  }
  .logo {
    width: 170px;
    max-width: 170px;
    top: 15px;
    padding-top: 15px;
    padding-left: 10px;
  }
  .topnav {
    overflow: hidden;
    background-color: transparent;
  }
  /*Für Fading Nav*/
  .topnav.fading
  {background-color:transparent;}
  
  /*beschreibt die Farbe der Links */
  .topnav a {
    float: left;
    display: block;
    color: #e5f4f8;
    text-align: center;
    font-weight:normal;
    font-size: 1.0 rem;
  }
  #myTopnav {
    float: right;
  }
  /*beschreibt die Farbe der Links beim Hovern*/
  .topnav a:hover, .oberelement.paddingtop:hover {
    color: #eb5757;
    font-weight: bold;
    text-decoration: none;
  }
  .topnav a:active {
    color: white;
  }

  .topnav .icon {
    display: none;
  }
  a.icon {
    font-size: 1.0rem!important;
  }
  @media screen and (max-width: 850px) {
    .topnav a {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
      width: 13vw;
    }
  }
  @media screen and (min-width: 330px) {
    div#myTopnav.topnav.responsive {
      height: auto;
      width: auto;
    }
    a.schliessen {
      display: none;
    }
  }
  @media screen and (max-width: 850px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive .icon {
      color: #ACB0B1 !important;
      background-color: none !important;
      padding: 19px 5px;

    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      padding: 22px 55px 4px 34px;
      border-bottom: 1px solid white;
    }
    div#myTopnav.topnav.responsive {
      width: 100vw;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
    #myTopnav {
      padding: none;
    }
  }
  /*----Mobile bis 1572px Navigation---*/
  @media screen and (min-width: 1px) and (max-width: 1420px) {
    .breitenavigation {
      display: none;
    }
    .schmalenavigation {
      display: block;
    }
    a.unterelement {
    margin-left: -40px;
    padding-left: 65px !important;
  }
  }
  /*----Dropdown ab 1573px Navigation---*/
  @media screen and (min-width: 1421px) {
    .schmalenavigation {
      display: none;
    }
    .breitenavigation {
      display: inline;
    }
    #container {
      margin: 0 auto;
    }
  
    #navi {
      margin-top: 20px;
    }
    #navi, #navi ul {
      list-style: none;
      /*hier wird ein Minuswert gegeben, damit die UL nicht einrückt*/
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    }
    #navi {
      float: left;
      text-align: left;
    }
    #navi > li {
      float: left;
    }
    #navi li a {
      display: block;
      height: 3em;
      line-height: 1em;
      padding: 0 1.2em;
      text-decoration: none;
      color: #1E212C;
      transition: 1s;
    }
    #navi li a:hover {
      font-weight: 500;
      display: block;
      color: #eb5757;
    }
    #navi ul {
      position: absolute;
      display: none;
      z-index: 999;
      margin-top: 30px;
      border: 1px solid #D7D7D7;
      padding-left: 0px;
      opacity: 1;
    }
    #navi ul:hover {
      color: #eb5757 !important;
    }
    #navi ul li a {
      background-color: white;
      text-align: left;
      border-bottom: 1px solid #D7D7D7;
      padding-top: 10px;
      padding-bottom: 10px;
      width: 200px;
      height: auto;
    }
    /* Erstes Listenelement der zweiten Ebene soll Abstand zur ersten bekommen*/

    #navi ul li a:hover {
      display: block;
      background-color: #D7DADD;
    }
    #navi li:hover ul {
      display: block;
    }
    /* Change this in order to change the Dropdown symbol */
    #navi li > a:after {
      content: ' »';
    }
    #navi li > a:only-child:after {
      content: '';
    }
  }
  /*------------nav side menu / MOBILE SIDE MENU-----------*/
  .unterelement a {
    margin-left: -80px !important;
    padding-left: 65px !important;
    width: 250px !important;
  }
  .unterelement a:hover {
    color: #eb5757 !important;
    background-color: rgba(235, 87, 87, 0.4);
  }
  .mobilenavi {
    margin-left: -40px !important;
  }
  .home {
    margin-top: 20px;
    color: #D7DADD;
    font-weight: bold;
    font-size: 1.0rem;
  }
  .mobilenavi, .mobilenavi ul {
    list-style: none;
  }
  /* Unterelemente der Navigation sind ausgeschaltet*/
  /*Unterelemente der Navigation sind eingeschaltet*/
  .mobilenavi .clickmich {
    display: none !important
  }
  .mobilenavi {
    display: block;
  }
  .oberelement + ul /* + steht für nächstes Element von Oberelement, hier nächstes ul*/ {
    display: none;
  }
  /* The sidebar menu */
  .sidebar {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 px Breite - wird durch Javascript geändert */
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  }
  /*  sidebar */
  .sidebar a {
    padding: 8px 8px 8px 32px;
    /*Wenn Sidebar rechts erscheinen soll, dann float right setzen.*/
    float: left;
    display: block;
    color: #D7DADD;
  }
  .sidebar a:hover {
    color: #eb5757 !important;
    text-decoration: none;
  }
  /*Alle Mobilenavi Links Elemente die nicht oberelement sind*/
  .mobilenavi a:not(.oberelement) {
    color: #eb5757;
    background-color: none;
  }
  
  /*Alle Mobilenavi Links Elemente hover die nicht oberelement sind*/
  a.unterelement:hover {
    color: #eb5757;
    background-color: rgba(49, 185, 223, 0.3);
  }

  .mobilenavi a {
    padding: 32px 32px 32px 32px;
    /* Wenn Sidebar rechts erscheinen soll, dann floar right setzen.*/
    float: left;
    display: block;
    color: #05103D;
    font-weight: bold;
    font-size: 1.0rem;
    display: block;
    width: 250px;
    border-bottom: 1px solid #D7D7D7;
    line-height: 1em;
  }
  .mobilenavi a:hover {
    display: block;
    line-height: 1em;
    text-decoration: none;
    color: #eb5757 !important;
  }
  .sidebar .closebtn {
    border-bottom: 0px !important;
    /*Wenn X links sein soll, dann 200px*/
    width: 50px !important;
    color:#eb5757;
  }
  .sidebar .closebtn a:hover {
    background-color: none !important;
  }
  /* Position und style vom Close Button (top right corner) */
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 40px;
    font-size: 36px;
    background-color: none !important;
  
  }
  /* The button used to open the sidebar */
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
    color: #eb5757;
    padding: 25px 25px;
    border: none;
    outline: none !important;
  }
  .openbtn a {
    border: none;
    outline: none !important;
  }
  .openbtn:hover {
    color: #eb5757;
  }
  
  
  
  @media screen and (max-height: 450px) {}
  /* Hier ein Dropdown Symbol bei Punkten mit mehreren Links */
  .mobilenavi li > a:after {
    content: ' »';
  }
  .mobilenavi li > a:only-child:after {
    content: '';
  }

  /*  IV.      DOWNLOAD
  /* ------------------------------------------------------------------------------------------------------------------- */
  /* ------------------------------------------------------------------------------------------------------------------- */
  /* ------------------------------------------------------------------------------------------------------------------- */
  .red-line{
    border-bottom:1px solid #ff4242!important;
    display:block;
  }

/*  V.     PARALLAX UND JUMBOTRON
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */


/*PORTRAIT*/
/* ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1px) and (max-width: 412px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1017/smartphone_portrait_375.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

/* @media only screen and (min-width: 376px) and (max-width: 412px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1018/header_xs.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 50vh;
	}
} */

@media only screen and (min-width: 413px) and (max-width: 599px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1014/1024hoch.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1015/1280hoch.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}
@media only screen and (min-width: 800px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1016/1920hoch.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

@media only screen and (min-width: 1024px) and (orientation:portrait){
	.jumbotron {
		background: url(/media/1021/2560hoch.jpg)!important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

/*LANDSCAPE*/
/* ------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1px) and (max-width: 1050px) and (orientation:landscape){
	.jumbotron {
		background: url(/media/1001/1024breit.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

@media only screen and (min-width: 1051px) and (max-width: 1300px) and (orientation:landscape){
	.jumbotron {
		background: url(/media/1002/1280breit.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
	}
}

@media only screen and (min-width: 1301px) and (max-width:2559px) and (orientation:landscape) {
	.jumbotron {
		background: url(/media/1041/1920breit.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		color: white !important;
		height: 100vh;
		
	}
}
  @media only screen and (min-width: 2560px) {
    .jumbotron {
      background: url(/media/1013/2560breit.jpg)!important;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: white !important;
      height: 100vh;
		
    }
}


/* VI.      FOOTER
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.footer {
	background-color: #05103D!important;
	min-height: 165px;
	width: auto;
	bottom: 0px;
	position: relative;
	clear: both;
	color: white !important;

}
.main{
  min-height: calc(100vh - 165px);
}

.footerschrift {
	line-height: 1.8em;
  color:#D7DADD;
  text-decoration: none;
}
.footerschrift:hover {
font-weight: 500;
display: inline;
color: #eb5757;
}
.b360 {
	max-width: 360px !important;
}


/* VII.      BUTTON
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.btn.primary{
    background-color: #FF4242;
    border-radius: 24px;
    font-size: 1.0rem;
    color: white;
    padding: 6px 20px 12px 20px;

}

/*  VIII.      TEILBEREICHE
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
.blau{
  background-color: #05103D;
	padding:0px!important;
}
.partner{
  background-color:white;
}


/*  IX.      SLIDER
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.mySlides {display:none;}



/*Pfeile*/
.arrow{
  width:100px;
  float:right;
  padding-bottom:20px;
}
.arrowlinks, .arrowrechts{
width:48px;
height:48px;
border-radius:24px;
text-align: center;

}
.arrowicon{
  width:20px;
  top:20px;
  position:relative
}
.arrowlinks:hover, .arrowrechts:hover{
background-color:#eb5757;
}

@media only screen and (min-width: 1051px) {
  .slidersize{
    -webkit-box-flex: 0;
    height:530px;
  }
}



/*  X.      HEADER
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* Schriftbereich Header */
/* Schriften für den Header */
/* Portrait */
@media only screen and (min-width:1px) and (max-width:419px) and (orientation: portrait){
  .textheader{
    margin-top:70vh!important; 
    margin-left:9vw !important;
  }
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:2rem;
}
h2.header{
font-size:1.2rem;
}
}

@media only screen and (min-width:420px) and (max-width:599px) and (max-height:699px) and (orientation: portrait){
  .textheader{
    margin-top:50vh!important; 
    margin-left:9vw !important;
  }
 
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:2rem;
}
h2.header{
font-size:1.5rem;
} 
}
@media only screen and (min-width:420px) and (max-width:599px) and (min-height:700px) and (orientation: portrait){
  .textheader{
    margin-top:63vh!important; 
    margin-left:9vw !important;
  }
 
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
} 
}



@media only screen and (min-width:600px) and (max-width:799px) and (orientation: portrait){
  .textheader{
    margin-top:65vh!important; 
    margin-left:9vw !important;
  }

  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
}

@media only screen and (min-width:800px) and (max-width:1080px) and (orientation: portrait){
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
.textheader{
  margin-top:65vh!important; 
  margin-left:9vw !important;
}
}
@media only screen and (min-width:1081px) and (orientation: portrait){
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
.textheader{
  margin-top:50vh!important; 
  margin-left:50vw !important;
}
}
/* Landscape */
@media only screen and (min-width:1px) and (max-width:1023px) and (max-height:420px) and (orientation: landscape){
  
  .textheader{
    margin-top:20vh; 
    margin-left:40vw !important;
  }
  
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:2rem;
}
h2.header{
font-size:1.5rem;
}
}

@media only screen and (min-width:1px) and (max-width:1023px) and (min-height:421px) and (max-height:800px) and (orientation: landscape){
  
  .textheader{
    margin-top:40vh; 
    margin-left:30vw !important;
  }
  
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
}
@media only screen and (min-width:1px) and (max-width:800px) and (min-height:801px) and (orientation: landscape){
  
  .textheader{
    margin-top:65vh; 
    margin-left:30vw !important;
  }
  
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
}

@media only screen and (min-width:801px) and (max-width:1023px) and (min-height:801px) and (orientation: landscape){
  .textheader{
    margin-top:50vh; 
    margin-left:30vw !important;
  }

  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
}

@media only screen and (min-width:1024px) and (max-width:1919px) and (orientation: landscape){
  .textheader{
    margin-top: 50vh; 
    margin-left:30vw !important;
  }

  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:4rem;
}
h2.header{
font-size:2.0rem;
}
}
@media only screen and (min-width:1920px) and (orientation: landscape){
  .textheader{
    margin-top:60vh; 
    margin-left:20vw !important;
  }
  
  h1.white{
    color:white!important;
    text-align:left;
}
h2.white{
    color:white!important;
    text-align:left;
}
h1.header{
font-size:5rem;
}
h2.header{
font-size:3rem;
}
}

/*  XI.     BELEGUNG UND BUCHUNG
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */

.schriftenbelegung{
  font-size: 1.3rem;
  font-weight: bold;
}
.red-right{
  border-right:1px solid #ff4242!important;
  display:block;
}

/* XII.    PRINT LAYOUT
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* 
Optionale Klasse für Druckbutton */
.seitedrucken{
  display:block!important;
}
/* Button soll nicht angezeigt werden */
.buttonnotvisible{
  display:none;
}
.logoprint{
  display:none;
}
.printbereich{
  display:block;
}
@media print {
.logoprint
{
  display:block;
  min-width:300px!important;
  height:auto;
}
.printbereich{
  display:none!important;
}
.noprintbutton{
  display:none!important;
}
}


/* XIII.      GALLERIE BILDER
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
#ladescreen {
	text-align: center !important;
}

#ladescreen img {
	max-width: 200px !important;
	height: auto;
}

#ladescreen .loading {
	opacity: 1;
	text-align: center !important;
}
.loading{
  color:#ff4242;
  font-style: italic;

}
.opacityempty {
	opacity: 0 !important;
	transition-duration: 3s;
  max-height:50px!important;
}

.container .masonrycontainer {
	margin: 10px auto;
	/* -moz-column-count: 2;
	-moz-column-gap: 10px;
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	column-count: 2;
	column-gap: 10px; */
}

@media only screen and (min-width: 1px) and (max-width: 450px) {
	.container .masonrycontainer {
		-moz-column-count: 1;
		-moz-column-gap: 10px;
		-webkit-column-count: 1;
		-webkit-column-gap: 10px;
		column-count: 1;
	}
}

@media only screen and (min-width: 451px)  {
	.container .masonrycontainer {
		-moz-column-count: 2;
		-moz-column-gap: 10px;
		-webkit-column-count: 2;
		-webkit-column-gap: 10px;
		column-count: 2;
	}
}

.masonryobjekt {
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

.masonryobjekt img {
	max-width: 100%;
	height: auto;
}

.masonrygallery {
	opacity: 0;
	transition-duration: 5s;
}

.opacityfull {
	opacity: 1 !important;
	transition-duration: 5s;
}

.masonrygallery2 {
	visibility: hidden;
}

.masonrygallery2 .opacityfull2 {
	animation: masonryItemFadeIn 2000ms ease-in-out;
}

@keyframes opacityfull2 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}