/* Stylesheet gaubenkieker.de 200108 */

*
{
    box-sizing: border-box;
	scroll-behavior: smooth;
}

body
{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 32px;
    text-rendering: optimizeLegibility;
    margin: 0;
}

a
{
   color: #CA002E;
   text-decoration: none;
}
a:visited
{
   color: #CA002E;
}
a:active
{
   color: #CA002E;
}
a:hover
{
   color: #CA002E;
   text-decoration: underline;
}

.wrapper
{
     display: flex;
     height: 100vh;
     width: 100vw;
     max-width: 100%;
}

header
{
    width: 20%;
    max-width: 220px;
    top: 0;
    left: 0;
    flex: 0 0 auto;
	
	padding-left: 30px;
    /* box-shadow: 5px -5px 5px #BAB6AF; */
}

div.easeimg
{
    height: 30vh;
    max-width: 2000px;
    margin: 10px 0 40px 0;
    right: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.easeimg h1
{
    font-size: 40px;
    margin: 0 5vw;
    max-width: 40rem;
    line-height: 30vh;
    color: white;
    text-shadow: 2px 2px 2px #000000;
	white-space: nowrap;
}

main
{
    width: 80%;
    padding: 0 1rem;
    flex: 1 1 auto;
    overflow: auto;
    /* margin-top: 10px; */
    /* border-top: 2px solid #ece7de; */
	box-shadow: -5px -5px 5px #BAB6AF;
}

section
{
    max-width: 50rem;
    margin: 0 5vw 60px 5vw;
}


nav
{
    display: flex;
    flex-direction: column;
	font-size: 18px;
}

nav a
{
    height: 100px;
    border-top: 2px solid #ece7de;
    line-height: 100px;
    padding-left: 1rem;
}

nav a:first-child
{
    border-top: none;
	vertical-align: middle;
}

nav a:hover
{
    color: white;
    text-decoration: none;
    background-color: #CA002E;
}

nav a:first-child:hover
{
    text-decoration: none;
    background-color: white;
}

.topnav .icon {
  display: none;
}

.btn
{
	display: inline-block;
	padding: 0.75rem;
	margin: 0.2rem 0;
	border: 1px solid #ece7de;
	background-color: #fff;
	font-size: inherit;
	font-family: inherit;
	color: #CA002E;
	 -webkit-appearance: none;
}

.btn:hover
{
	padding: 0.75rem;
	border: 1px solid #ece7de;
	color: white;
	background-color: #CA002E;
	text-decoration: none;
}

.btnwrapper
{
	margin: 2rem 0 2rem 0;
}

.highlights
{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: space-around;
	flex-wrap: wrap;
    justify-content: center;
	text-align: center;
	line-height: 20px;
}

.highlights i
{
    font-size: 3rem;
	color: #ece7de;
}

.highlights i:hover
{
    font-size: 3rem;
	color: #CA002E;
}

.highlights div
{
	flex-basis: 5vw;
	padding: 1rem;
	flex-grow: 1;
}

table
{
    border-collapse: collapse;
}

tr
{
    border-bottom: 1px solid #ece7de;
}

tr:first-child
{
    border-top: 1px solid #ece7de;
}

td
{
    padding: 6px;
}

.imgcolumn img
{
	width: 100%;
}

.mySlides img
{
	vertical-align: middle;
	margin-bottom: -6px;
}

@media (max-device-width: 1024px)
{
header
{
    width: 100%;

	max-width: none;
	margin: 0 auto;
    top: 0;
    left: 0;
	right: 0;
	position: fixed;
	z-index: 500;
	background-color: white;
	border-bottom: 2px solid #ece7de;
	
	box-shadow: none;
	padding-left: 0px;
}
nav
{
    display: flex;
    flex-direction: row;
}
nav a
{
    border-top: none;
    padding: 0 1rem;
}
main
{
    width: 100%;
    padding: 100px 1rem 0 1rem;
	margin-top: 0;
    overflow: auto;
	border-top: none;
	display: block;
	z-index: 1;
}
.wrapper
{
     display: block;
     height: 100vh;
     width: 100vw;
     max-width: 100%;
}
div.easeimg
{
    height: 20vh;
}

div.easeimg h1
{
    line-height: 20vh;
}
	
nav a:first-child
{
	width: 60%;
}
	
nav a:first-child img
{
	vertical-align: middle;
	width: 60%;
}
	

}

/* Responsive Navigation */
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
	position: absolute;
	top: 0;
	right: 0;
  }
	
  nav
  {
		flex-direction: column;
  }
	
  nav a:first-child img
{
    width: 80%;
}

.highlights i
{
    font-size: 2.5rem;
}

body {
	font-size: 16px;
}
	
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

/* Image Grid */
.imgrow > .imgcolumn {
  padding: 0 8px;
}

.imgrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.imgcolumn {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 600;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 60%;
  max-width: 980px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Form styling */
form {
	margin-bottom: 2rem;
}
form div.inputdiv {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-bottom: 1rem;
}

form div.chkdiv {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 400px;
	padding-bottom: 2.5rem;
	justify-content: space-between;
}

form div.chkdiv p {
	width: 100%;
}

form div.chkdiv label {
	margin-left: 0.25em;
	font-size: 2em;
    font-family: inherit;
}


form div.inputdiv label {
	width: 200px;
	margin-right: 10px;
	font-size: inherit;
    font-family: inherit;
}

form div.inputdiv input {
	width: 40%;
	padding: 0.5rem;
	min-width: 200px;
	height: 40px;
	border: 1px solid #ece7de;
	background-color: #fff;
	font-size: inherit;
    font-family: inherit;
}

form div.inputdiv textarea {
	padding: 0.5rem;
	border: 1px solid #ece7de;
	background-color: #fff;
	min-width: 200px;
	font-size: inherit;
	font-family: inherit;
}

p.form {
	padding: 0.5rem;
	animation: fadein 2s infinite linear;
    -webkit-animation: fadein 2s;
       -moz-animation: fadein 2s;
        -ms-animation: fadein 2s;
         -o-animation: fadein 2s;
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

p.failed {
	background-color: #CA002E;
	color: white;
}

p.success {
	background-color: #007D13;
	color: white;
}

p.error {
	background-color: #CA002E;
	color: white;
}


form .g-recaptcha {
	margin-left: 0px;
}

@media screen and (min-width: 870px) {
form .g-recaptcha {
	margin-left: 210px;
}
}

.ox-a
{
	overflow-x: auto;
}

.acc ol
{
	list-style-position: inside;
	padding-left: 0;
}

.ui-accordion-header {
	border-top: 2px solid #ece7de;
	padding: 0.6rem 0;
	margin: 0;
}

.ui-accordion-header:last-of-type {
	border-bottom: 2px solid #ece7de;
}

.mr-1
{
	margin-right: 1rem;
}

.warning
{
	border: 2px solid #CA002E;
	padding: 0.5rem;
}
 
section.vheight
{
	min-height: 100vh;
	padding: 5vh 0;
	margin-bottom: 0;
}

.splasharrow
{
	position: absolute;
	transform:translateX(-50%);
	left: 50%;
	bottom: 10%;
	color: #fff;
	text-decoration: none !important;
	font-size: 6rem;
}

.splashimage
{
	position: relative;
	height: 100vh;
	width: 100%;
	background-image: url(img/img6.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.splashimage section
{
	padding-top: 20vh;
}

.welcomezoom h1
{
	font-style: italic;
	font-size: 5rem;
	line-height: 1.5;
	margin-top: 0px;
	-webkit-animation: slidein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: slidein 2s; /* Firefox < 16 */
        -ms-animation: slidein 2s; /* Internet Explorer */
         -o-animation: slidein 2s; /* Opera < 12.1 */
            animation: slidein 2s;
}


.welcomezoom p
{
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
	animation-timing-function: ease-in;

}

.welcomezoom p.subheading
{
	font-style: italic;
	font-size: 2.5rem;
	line-height: 1.5;
}

@media screen and (max-width: 960px) {
  	.welcomezoom h1
	{
		font-size: 1.7rem;
	}
	.welcomezoom p.subheading
	{
		font-size: 1.2rem;
	}
} 



@keyframes slidein {
  from {
    margin-left: -80px;
  }

  to {
    margin-left: 0px;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}