/*---COLOR CLASSES---COLOR CLASSES---COLOR CLASSES---COLOR CLASSES---*/

:root {
    --mainColor: #ffffff;

    --fontColorOne: #000000;
    --fontColorTwo: #ffffff;
    --fontColorThree: ;
    --fontColorFour: #7F7F7F;

    --accentColorOne: #652422;
    --accentColorTwo: #AF7E69;
    --accentColorThree: ;
    --accentColorFour: ;
    --accentColorFive: #333333;

    --backgroundColorOne: #ffffff;
    --backgroundColorTwo: #e3e3e3;
    --backgroundColorThree: #f8f8f8;
    --backgroundColorFour: #a1a1a1;
}

/*---GENERAL---GENERAL---GENERAL---GENERAL---GENERAL---GENERAL---GENERAL---*/

a {
    text-decoration: none;
}


a:active{

}

a:visited{

}

.narrowSpace{
    word-spacing: 0.00em;
}

/*
:not(h1) {
  text-transform: lowercase;
}
*/

/*---COOKIES---COOKIES---COOKIES---COOKIES---COOKIES---COOKIES---COOKIES---*/
/*
.cc_container .cc_btn {
background-color: #000000 !important;  Farbe des Buttons
color: #ffffff !important;  Textfarbe des Buttons
}

.cc_container {
background: #000000 !important;  Hintergrundfarbe des gesamten Bereichs
color: #fdfdfd !important; Schriftfarbe des gesamten Bereichs
}

.cc_container a {
color: #31a8f0 !important; Textlink-Farbe "Mehr Infos"
}
*/
/*---BODY---BODY---BODY---BODY---BODY---BODY---BODY---BODY---BODY---BODY---*/

body {
	font-size: 100%;
    font-family: Arial;
    /* background: var(--backgroundColorOne); */
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow-x: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(220,160,140,0);
}

/*---TITLES---TITLES---TITLES---TITLES---TITLES---TITLES---TITLES---TITLES---*/

.mainTitle {
text-align: left;
color: var(--fontColorOne);
font-family: roboto;
}

.secondTitle{
text-align: left;
color: var(--fontColorOne);
font-family: roboto;
}

.mainTitles{
    width: 100%;
}

h1{
    font-size: 5vw;
}

h2{

    margin: 0px;
    padding: 0px;
}

h2:not(.blogTitle){
	/* text-decoration: underline; */
	text-transform: uppercase;
	text-decoration-color: rgba(101, 36, 34, 1); /*var(--accentColorOne)*/
	text-decoration-skip: objects;
}

h3:not(#imprintAndPrivacyContent > h3){
	text-decoration: underline;
	text-decoration-color: rgba(101, 36, 34, 0.3); /*var(--accentColorOne)*/
	text-decoration-skip: objects;
}

h4{

}

p, q{
    font-size: 1.2em;
}
/*---NAV---NAV---NAV---NAV---NAV---NAV---NAV---NAV---NAV---NAV---NAV---NAV---*/

.nav-main{
    color: var(--fontColorOne); /* d3d3d3 */
    /* background: ;*/
    transition: .7s;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background: rgba(220,160,140,0);
    z-index: 1;
}

.navbar {
    font-family: 'Open Sans Light', arial;
    font-style: ultra light;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    position: fixed;
    overflow: hidden;
    top: 0;
    width: 100%;
    /* opacity: 50%; */
    margin: 0px;
    background: var(--accentColorTwo);
    opacity: 1;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
    z-index: 1;
}
.nav-icon {
    display: none;
    color: var(--fontColorOne);
}

.mobile-title{
    display: none;
    float: left;
    color: #ffffff;
}

.normalListUl{
    margin-top: 12.5px;
    margin-bottom: 12.5px;
}

.normalList{

}

.flag{
    display: inline;
    float: right;
    margin-right: 15px;
}

.normalListItem{
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
	font-size: 1.2em;
    text-align: center;
    color: var(--fontColorOne);
}

.firstNormalItem{
    margin-left: 5px;
}

.lastNormalItem{
    margin-right: 5px;
}

.currentItem{
    border-bottom-style: solid;
    border-bottom-color: var(--accentColorOne);
    border-bottom-width: 2.5px;
}

a.navLink{
    color: var(--fontColorOne);
}

.normalListItem:hover{
    border-bottom-style: solid;
    border-bottom-color: var(--accentColorOne);
    border-bottom-width: 2.5px;
}

.nav-dropdown{
    display: block;
}

/*---HERO---HERO---HERO---HERO---HERO---HERO---HERO---HERO---HERO---*/

#hero{
    width: 100%;
    min-height: 100vh;
    background-image: url("../media/img/compressed/ashtangapada-Virabhadrasana-B-City.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-position: top;
    /* margin-top: 50px; */
    text-align: center;
    z-index: -1;
}

#heroBottom{
    width: 100%;
    min-height: 60vh;
    background-image: url("../media/img/compressed/ashtangapada-Surya-Namaskara-Sunrise.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

#heroText{
    text-align: center;
    padding-top: 40vh;
    text-transform: uppercase;
    margin: 0;
    font-family: 'PT Sans Caption', sans-serif;
    color: var(--accentColorOne);
    opacity: 0.9;
    font-size: 7vw;
    z-index: -1;
}

#heroTextBottom{
    text-align: center;
    padding-top: 15vh;
	text-transform: uppercase;
    margin: 0;
    font-family: 'PT Sans Caption', sans-serif;
    font-style: ultra light;
    color: var(--accentColorOne);
    opacity: 0.7;
    font-size: 5vw;
}

#ctaButton{
    background-color: var(--accentColorOne);
    border: none;
    color: white;
    padding: 1% 2%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1vw;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}
/*

.parallax{
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallaxLayer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 50px;
}

.parallax__layer--back{
    transform: translateZ(-1px);
    width: 100%;
}

.parallax__layer--base{
    transform: translateZ(0);
}

*/
/*---BANNER---BANNER---BANNER---BANNER---BANNER---BANNER---BANNER---BANNER---*/

.banner {

}

.banner-image{
    width: 100%;
}

.textOverlay{
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: aral;
    font-style: ultra light;
    font-size: 2em;
    color: #f1f1f1;
    opacity: 0.9;
}

/*---STANDARD CONTENT---STANDARD CONTENT---STANDARD CONTENT---*/

.main{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-width: 50px;
}

.contentIndex{
    background-image: url(../media/svg/om_circle/om_circle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}

.contentPractice{
    background-image: url(../media/svg/yoga_butterfly/yoga_butterfly.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}

.contentAshtanga{
    background-image: url(../media/svg/inhaleexhale/inhaleexhale.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}

.contentMyjourney{
    background-image: url(../media/svg/lotus_flower2/lotus_flower2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}

.contentBlog{
    background-image: url(../media/svg/yogamat.svg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
    background-color: #ffffff;
}

.contentGallery{
	/*
    background-image: url(../media/svg/lotus_flower2/);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
	*/
}

.contentContact{
    background-image: url("../media/svg/lotus_flower/lotus_flower.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}

.maincontent {
    padding-top: 10vh;
    padding-bottom: 10vh;
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    grid-row-gap: 0vh;
    font-family: 'PT Sans Caption', sans-serif;
}

.leftText, .leftImageContent, .rightText, .rightImageContent {
    flex-basis: 50%;
}
    .leftText{
        min-height: 30vw;
        min-width: 30vw;
        /* background-color: rgba(231, 231, 231, 0.5); */
    }

    .leftImageContent{
        /* height: 30vw; */
        width: 30vw;
    }

    .rightText{
        min-height: 30vw;
        min-width: 30vw;
        /* background-color: rgba(231, 231, 231, 0.5); */
    }

    .rightImageContent{
        /* height: 30vw; */
        width: 30vw;
    }

    .leftImage {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
        /*
        border-style: solid;
        border-width: 0px 0px 5px 5px;
        border-color: coral;
        border-radius: 5px;
        */
    }

    .rightImage {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
        /*
        border-style: solid;
        border-width: 0px 0px 5px 5px;
        border-color: coral;
        border-radius: 5px;
        */
    }

    .innerText {
        width: auto;
        height: auto;
        padding: 2vh 2vw 2vh 2vw;
		margin-right: 7.5vw;
        /*
        border-style: solid;
        border-width: 0px 5px 5px 0px;
        border-color: coral;
        border-radius: 5px;
        */
    }

    .borderRadiusLT{
        border-top-left-radius: 5px;
    }
    .borderRadiusRT{
        border-top-right-radius: 5px;
    }
    .borderRadiusLB{
        border-bottom-left-radius: 5px;
    }
    .borderRadiusRB{
        border-bottom-right-radius: 5px;
    }

/*---HOME---HOME---HOME---HOME---HOME---HOME---HOME---HOME---HOME---*/

.urlaub{
    color: #00ff00;
}

.vertretung{
    color: #00ff00;
}

#more {
    display: none;
}

#readMoreText{
    cursor: pointer;
    color: var(--accentColorOne);
	font-size: 1.2em;
}

/*---PRACTICE---PRACTICE---PRACTICE---PRACTICE---PRACTICE---PRACTICE---*/

a.downloadLink{
    color: var(--fontColorOne);
}

a.mailLink{
    color: var(--accentColorOne);
}

#DateDiv {
    display: block;
}

.mailButton{
    padding-bottom: 4px;
    vertical-align: middle;
}

#calendarButton{
    display: inline;
    z-index: -1;
}

.addeventatc{
    z-index: -1;
}

a.exLink{
    color: #FBB900;
}

#cta::before {
    display: block;
    content: ' ';
    height: 65px;
    margin-top: -65px;
    visibility: hidden;
}

/*---MY JOURNEY---MY JOURNEY---MY JOURNEY---MY JOURNEY---MY JOURNEY---*/


.lehrerinList{
    list-style: circle;
    font-size: 110%;
    padding-left: 20px;
    padding-right: 10px;
}

/*---BLOG---BLOG---BLOG---BLOG---BLOG---BLOG---BLOG---BLOG---BLOG---BLOG---*/

/* Header/Blog Title */
.header {
    padding: 10px;
    text-align: center;
}

.blogTitle{
    color: inherit; /*var(--accentColorOne)*/
}

/* CONTENT COLUMNS*/

.blogRow {
    min-width: 75%;
    max-width: 100%;
}

/* Left column */
.leftcolumn {
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
}

/* Fake image */
.fakeimg {
    background-color: var(--backgroundColorFour);
    width: 100%;
}

/* Card effect for articles */
.card {
    background-color: var(--backgroundColorThree);
    color: var(--fontColorOne);
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 5px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.blogSocialIcon{
    filter: contrast(0%);
}

a.blogSocialLink{
    color: var(--fontColorOne);
}

a.popularPostsLink{
    color: var(--accentColorTwo);
}

/*---GALLERY---GALLERY---GALLERY---GALLERY---GALLERY---GALLERY---GALLERY---*/

.galleryContent{
    padding-top: 10vh;
    padding-bottom: 10vh;
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    flex-wrap: wrap;
	flex-direction: column-reverse;
}

.galleryContainer{
    flex-basis: 50%;
}

.galleryImage{
    width: 100%;
    height: auto;
}


/*---CONTACT---CONTACT---CONTACT---CONTACT---CONTACT---CONTACT---CONTACT*/

a.contactLink {
    color: var(--accentColorOne);
}

.contactImage {
    float: right;
    width: 100%;
    height: auto;
    border-width: 1px;
    border-style: solid;
}

.upperRow, .bottomRow{
    height: 50%;
    width: 100%;
}

.containerLeft, .containerRight{
    display: inline-block;
    width: 50%;
    height: 100%;
}

.socialLeft, .socialRight{
    height: 30vh;
    width: auto;
    filter: contrast(0%);
    margin-left: auto;
    margin-right: auto;
}


/*---MAPS---MAPS---MAPS---MAPS---MAPS---MAPS---MAPS---MAPS---MAPS---MAPS---*/

.googleMaps {
    width: 600px;
    height: 450px;
    frameborder: 0;
    border: 0;
    padding-left: 5px;
}

/*---FOOTER---FOOTER---FOOTER---FOOTER---FOOTER---FOOTER---FOOTER---FOOTER---*/

.footer {
    float: left;
    height: 4vh;
    padding-top: 2vh;
    text-align: center;
    background: var(--backgroundColorOne);
    width: 100%;
    margin-right: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    bottom: 0;
}

.leftFooter {
    float: left;
    width: 10%;
    text-align: center;
    margin-left: 20px;
	vertical-align: bottom;
	line-height: 1.8;
	order: 1;
}

.centerFooter {
    width: 40%;
    display: inline;
	order: 3;
}

.footerSocialIcon {
    height: 25px;
    width: 25px;
    filter: contrast(0%);
	padding-bottom: 10px;
}

.footerSocialElement {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
}


.rightFooter {
    float: right;
    width: 10%;
    text-align: center;
    margin-right: 20px;
	vertical-align: bottom;
	line-height: 1.5;
	order: 5;
}

a.footerLink {
    color: var(--fontColorFour);
}

.copyrightFooter{
	width: 20%;
	text-align: center;
	color: var(--fontColorFour);
	margin-left: 20px;
	font-size: 0.9em;
	vertical-align: bottom;
	line-height: 2;
	order: 2;
}

.madebyFooter{
	width: 20%;
	text-align: center;
	color: var(--fontColorFour);
	margin-right: 20px;
	font-size: 0.9em;
	vertical-align: bottom;
	line-height: 2;
	order: 4;
}

/*---IMPRINT AND PRIVACY---IMPRINT AND PRIVACY---IMPRINT AND PRIVACY---*/

#imprintAndPrivacyContent{
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    display: inherit;
    /* flex-wrap: ;
    flex-direction: ;
    grid-row-gap: ; */
    height: auto;
    font-size: 22px;
}

#imprintAndPrivacyHeading{
    font-size: 5vw;
}

/*---BACK TO TOP BUTTON---BACK TO TOP BUTTON---BACK TO TOP BUTTON---*/

.back-to-top {
    background: var(--accentColorOne);
    position: fixed;
    bottom:15px;
    right:15px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--accentColorTwo);
    opacity: 0.7;
    border-radius: 5px;
}

.uparrow{
    width: 20px;
    height: 20px;
}


/*---HAMBURGER-ICON---HAMBURGER-ICON---HAMBURGER-ICON---HAMBURGER-ICON---*/

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 4px;
    background-color: var(--fontColorOne);
    margin: 6px 0;
    transition: 0.3s;
    border-radius: 3px;
}

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-3px,8px);
        transform: rotate(-45deg) translate(-6px, 8px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-6px,-8px);
        transform: rotate(45deg) translate(-6px, -8px);
    }