/*body style*/
*{
    margin:0;
    padding:0;
    font-family: Helvetica, Verdana, Arial, sans-serif; 
    box-sizing: border-box;
}
body{
/*    background-image:url("hintergrund.jpg");*/
/*    background-attachment:fixed;*/
    background-color:rgba(216,232,242,1);
    color:black;
    position: relative;
    width: 100%;
}
.container{
    max-width:900px;
    margin:auto;
    position:relative;
}

/*navigation style*/
.nav ul{
    list-style-type:none;
    padding:0;
    margin:0;
    color:#000080;
    font-weight:bold;
}
.nav a, .nav button{
    font-size:1rem;
}
.nav li{
    display:block;
    border-right:solid 1px #000080;
    border-bottom:solid 1px #000080;
    background-color:rgba(216,232,242,0.8); 
    float:left;
    position:relative;
    padding:7px 15px;
}
.nav li:first-child{
    border-left:solid 1px #000080;
}
.nav a{
    text-decoration:none;
    color:#000080;
    display:block;
}
.nav button{
    text-decoration:none;
    color:#000080;
    border:none;
    background-color:transparent;
    font-weight:bold;
}
.nav ul li ul{
    display:none;
    position:absolute;
    left:-1px;
    margin-top:7px;
    box-shadow:10px 10px 30px rgba(216,232,242,1), -10px 10px 30px rgba(216,232,242,1);
}
.nav ul li ul li{
    clear:both;
    width:100%;
    border-right:solid 1px #000080;
    border-bottom:solid 1px #000080;
    background-color:rgba(216,232,242,1);
}
.nav ul li ul li{
    border-left:solid 1px #000080;
    padding:7px;
}
.nav ul li ul li:last-child{
    border-radius:0px 0px 5px 5px;
}
.nav ul li:hover > ul, .nav ul li ul:hover, .nav ul li:focus > ul, .nav ul li ul:focus{
    display:block;
}
.nav ul li ul.open{
    display:block;
}
.dropdown{
    z-index:1;
}
.menubutton{
    display:none;
}

/*Header style*/
.header{
    background-color:rgba(78,127,191,0.8);
    border:solid 1px #000080;
    border-bottom:solid 1px #000080;
    display:flex;
    align-items:flex-start;
    padding:2%;
    color:white;
    text-shadow:2px 2px 3px #404040;
}
#logo{
    border-radius:50%;
    max-width:50%;
    height:auto;
    float:left;
    margin:1%;
}
.header h1, .header h2{
    padding:2%;
    text-align:center;
    
}
.header h1{
    width:max-content;
}

/*footer style*/
.footer{
    background-color:rgba(78,127,191,0.9);
    padding:2%;
    color:#ecf4f9;
    display:flex;
}
.footerKontakt{
    width:60%;
    margin-right:8px;
}
/*Main content style*/
.mainContent{
    background-color:rgba(216,232,242,0.4);
    padding:3% 2%;
    margin:0;
    clear:both;
}
.mainContent:after, .mainContent:before {
  content: "";
  display: table;
  clear: both;
}
p{
    text-align:justify;
}
.imgLeft, .imgRight, .sidebarImg{
    max-width:100%;
    height:auto;
    margin-bottom:1%;
}
.imgLeft{
    float:left;
    margin-right:1%;
}
.imgRight{
    float:right;
    margin-left:1%;
}
.sidebarImg{
    margin: 1%;
}
.boldContent{
    font-weight:bold;
}
.contentWithBorder{
    border:solid 1px #000080;
    padding:1%;
    margin:1%;
}
.italicContent{
    font-style:italic;
    padding:1%;
    margin:1%;
}
ul.content, ol.content{
    margin-left:0;
    padding-left:2%;
}
table{
    text-align: left;
}
table.content td{
    padding-right: 20px;
}
table.content{
    margin-top: 10px;
}
.timeList td, .timeList th{
    padding-right: 20px;
}
.mainContent h1, .mainContent h2, .mainContent h3, .mainContent h4, .mainContent h5, .mainContent h6, .sidebar h3{
    color:#000080;
}
.content{
    padding-bottom:1%;
}
.right{
    float:right;
}
.left{
    float:left;
}
.mainContent a:link, .footer a:link{
    color:#000080;
}
.hidden{
    display:none;
}
/*button styles*/
.ctabutton, .ctabutton_second{
    border-radius:15px;
    padding:10px;
    box-shadow:5px 5px 10px #333333;
    font-weight:600;
    margin:2%;
    display:inline-block;
    cursor:pointer;
}
.ctabutton{
    background-color:#D9C0A3;
    color:#402D22;
    border:solid 1px #402D22;
}
.ctabutton a, .ctabutton_second a{
    text-decoration:none;
    display:inline-block;
}
.ctabutton a{
    color:#402D22;
}
.ctabutton_second{
    background-color:#D8E8F2;
    color:#000080;
    border:solid 1px #000080;
}
.ctabutton_second a{
    color:#000080;
}
/*Specialized content style*/
#yogaAngebot, #kontakt{
    display:flex;
    flex-wrap:nowrap;
    overflow:auto;
}
/*style for the Veroeffentlichungen and Uebersetzungen pages*/
.booklist{
    padding-bottom:1.5%;
}
.bookcontainer{
    display:flex;
    padding-bottom:1%;
}
.bookimg{
    padding-right:1%;
    max-height:150px;
}
/*Removing bold text from the booklist at client request*/
.booklist b{
    font-weight:400;
}
/*style for events*/
.event_container{
    display:flex;
}
.event_container p{
    text-align:left;
}
.event_datum{
    margin-right:2%;
    font-weight:525;
}
.event_name{
    font-weight:bold;
}
/*style for inserted pdfs*/
.pdf_insert{
    width:100%;
    height:90vh;
    margin:auto;
}
/*style for slideshow*/
.slideshowContainer{
    width:100%;
    position:relative;
    overflow:hidden;
}
.slideshowFigure{
    margin:auto;
    width:85%;
    display:none;
}
.slideshowFigure{
    text-align:center;
}
.slideshowImg{
    max-width:100%;
    margin:2% auto;
}
.PrevButton, .NextButton{
    background-color:transparent;
    font-weight:bold;
    font-size:30px;
    border:none;
    cursor:pointer;
    padding:1%;
}
.PrevButton{
    position:absolute;
    top:50%;
    left:3%;
}
.NextButton{
    position:absolute;
    top:50%;
    right:3%;
}
.activeFigure{
    display:block;
    margin:auto;
    animation:fade 0.8s linear normal 1 none running;
}
@keyframes fade {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/*style for full page contact form*/
.kontaktform input[type=text], .kontaktform input[type=email], .kontaktform input[type=tel], .kontaktform textarea{
    width:90%;
}
/*style for footer Newsletter form*/
.newsletterAbo input[type=email]{
    width:35%;
}
.newsletterAbo{
    margin-right:2%;
}
/*general style for forms*/
input, textarea{
    padding:5px;
    border-radius:5px;
    background-color:rgb(216,232,242);
    border:solid 1px #000080;
    box-shadow:4px 4px 8px #777777;
}
textarea{
    min-height:100px;
}
input:focus, textarea:focus{
    border:solid 3px #000080;
}
label{
    margin:5px 0px;
    color:#000080;
}
.anmerkung{
    color:#444444;
    font-style:italic;
}
/*hidden areas for honeypot*/
input[type=url], .required, #Vorname{
    display:none;
}
/* Alert Sidebar */
.sidebar{
    float: right;
    width: 250px;
    margin: 5px;
    padding: 5px;
    position: absolute;
    right: -260px;
    top: 0px;
}

/*
--------
styles for different screen sizes
--------
*/
/* sidebar adjustment */
@media (max-width:1400px) {
    .sidebar{
        position: static;
        width: 100%;
        clear: both;
        margin: 8px 0 0 0;
    }
    .sidebarImg{
        float: left;
        padding-right:1%;
        max-height:150px;
    }
}
/*styles for touchscreens and small screens. Important for navigation*/
@media (max-width:1200px), (hover:none){
    .menubutton{
        display:block;
        background-color:rgba(216,232,242,1);
        color:#000080;
        border:solid 1px #000080;
        font-size:180%;
        font-weight:900;
        padding:2% 3%;
        cursor:pointer;
    }
    #nav{
        display:none;
    }
    #nav ul{
        max-width:450px;
        position:absolute;
        left:0px;
    }
    #nav>ul>li>a{
        cursor:default;
    }
    #nav>ul>li:first-child{
        border:solid #000080;
        border-width:0 1px 1px 5px;
    }
    #nav>ul>li:first-child a{
        cursor:pointer;
    }
    #nav li{
        float:none;
        border-bottom:none;
        background-color:rgba(216,232,242,1); 
    }
    #nav ul li ul{
        display:block;
        position:relative;
        box-shadow:none;
    }
    #nav ul li ul li:last-child{
        border-bottom:none;
        border-radius:0px;
    }
    #nav ul li ul li{
        border-right:none;
    }
    #nav.open{
        display:block;
    }
    #nav a{
        padding-top:10px;
    }
    .submenu{
        display:none;
    }
    
    #links p{
        margin-bottom:3%;
    }
}/*first media query closing tag*/
/*styles for tablet sized devices in landscape mode and small laptops*/
@media (max-width:1200px){
    .container{
        max-width:none;
        width:100%;
    } 
    .header div{
        margin-right:4%;
    }
    /*slideshow styles*/
    .PrevButton, .NextButton{
        font-size:40px;
    }
    .slideshowImg{
        max-height:600px;
    }
    /*other image sizing*/
    img:not(.slideshowImg){
        max-width:500px;
    }
}/*second media query closing tag*/
/*styles for small tablets in portrait mode and large cellphones*/
@media (max-width:700px){
    .header h1{
        width:auto;
    }
    .imgLeft, .imgRight{
        float:none;
    }
    img:not(.slideshowImg){
        max-width:98%;
    }
    #yogaAngebot, #kontakt{
    display:block;
}
    .footer{
        display:block;
    }
    .footerKontakt{
        width:100%;
        margin-bottom:4%;
    }
    /*slideshow smaller styles*/
    .slideshowFigure{
        width:100%;
    }
    .PrevButton, .NextButton{
        color:rgb(216,232,242);
        background-color:rgba(64, 64, 64, 0.6);
    }
}
/*styles for small screens and phones*/
@media (max-width:500px){
    .header{
        flex-direction:column;
        align-items:center;
    }
    .logoContainer{
        text-align:center;
    }
    #logo{
        float:none;
    }
    .slideshowImg{
        max-height:450px;
    }
}
@media (max-height:600px){
    .slideshowImg{
        max-height:95vh;
    }
}