@charset "UTF-8";
/* CSS Document */

/*======================================================
Stylesheet für Yoga Meerbusch
Stand: 5.1.2019
Datei:stylesheet
Datum:5.1.2019
Autor: Anna Zellmann

	Aufbau:
		    1. Allgemeine Styles
		    2. Styles für Layoutbereich
		    3. Sonstige Styles
			4. media queries
======================================================*/



/* ===================================
	     1. Allgemeine Styles
	   ===================================
*/

html, body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: #852d7f;
    position: relative;
    width: 100%;
    height: 100%;
}

@font-face {
    font-family: 'maiandra_gdroman';
    src: url('../webfont/galapagos_-_maiandragd-roman-webfont.woff2') format('woff2'),
    url('../webfont/galapagos_-_maiandragd-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h1 {
     font-family: 'maiandra_gdroman';
     color: #852d7f;
     text-align: center;
     font-size: 30px;
     margin-bottom: 50px;
 }

h1.pink{
    color: #f173ac;
    margin-top: -50px;
}

h2 {
    font-family: 'maiandra_gdroman';
    color: #f173ac;
    font-size: 21px;
    text-transform: uppercase;
}

/* fix scroll to top bug */
body.modal-open {
    overflow: hidden;
}

/* fix menü bug */
.container-fluid{
    overflow: hidden;
}

.pink{
    color: #f173ac !important;
}

.workshop {
    font-family: 'maiandra_gdroman';
    font-size: 21px;
    text-transform: uppercase;
} 




/* ===================================
	     2. Styles für den Layoutbereich
	   =================================== */

/*    Header   */

.header-head{
    max-width: 1000px;
}

/*   Navigation */
nav {
    font-family: 'maiandra_gdroman';
    color: #852d7f;
    background-color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    font-size: 18px;
}

header.sticky-gap{
    margin-bottom: 47px;
}


/* Mobile Menu */

.mobile-btn{
    width: 100%;
	heigh: 47px;
    background-color: #f9d1e3;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

.mobile-btn p{
    padding: 10px;
    margin-bottom: 0;
}

.menu {
    position: static;
    background-color: #faecf2;
    width: 100%;
    text-align: center;
    display: none;
}

.menu-container.open .menu {
    display: block;
}

.menu-container.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.menu li{
    display: block;
}

.menu li a:link{
    display: block;
    padding: 10px;
    color: #852d7f;
    font-weight: bold;
    text-decoration: none;
}

.menu li a:visited {
    color: #852d7f;
    text-decoration: none;
}

.menu li:hover{
    background-color: #f9d1e3;
}

/*Rosa Menüpunkt bei aktiver Seite*/
.menu-activ{
    font-weight: bold;
    padding: 10px;
}


/* Dropdown Menu*/
.dropdown {
    position: static;
    text-align: center;
    display: none;
}

/*   Sections   */

.section-container {
    padding: 100px 20px 0 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.section-head{
    padding-bottom: 100px;
}
.section-head img{
    max-width: 218px;
}


section a:link{
    color: #852d7f;
    /*text-decoration: none;
    font-weight: bold;*/
}


section a:visited{
    color: #852d7f;
    /*text-decoration: none;*/
}


section  a:hover{
    color: #b48ab2;
   /* text-decoration: none;*/
}

/*   Quotes   */

.quotes {
    color: #b48ab2;
    font-size: 24px;
    font-weight: lighter;
    text-align: center;
}

.quotes.pink{
    color: #f173ac;
}

.light-font {
	color: #b48ab2;
}

/*  Home Yoga Kurse  */

.home-icons img{
    width: 80px;
    margin-bottom: 25px;
}

/* Lehrer */


.lehrer-list li{
    margin-bottom: 10px;

}

/* Kurse */
.kurs-linie{
    border-bottom: 2px solid #7f247f;
}

.kurs-linie-light{
    border-bottom: 1px solid #b48ab2;
}

.mobile-bold{
    font-weight: bold;
}

/* Gutschein */

.gutschein img{
border: 1px solid #7f247f;
}

/* footer  */

footer {
    font-family: 'maiandra_gdroman';
    color: #852d7f;
    font-size: 21px;
    text-transform: uppercase;
}


/*  Modals */

.btn-secondary {
    color: #fff;
    background-color: #852d7f;
    border-color: #852d7f;
}

.btn-secondary:hover {
    background-color: #b48ab2 !important;
    border: solid 1px #b48ab2;
}

.close {
    color: #852d7f;
}

.close:hover {
    color: #852d7f;
}

.modal {
    /* add smooth scrolling in modals for iOs devices */
    -webkit-overflow-scrolling: touch;
}

.modal a:link{
    color: #852d7f;
    text-decoration: none;
    font-weight: bold;
}


.modal a:visited{
    color: #852d7f;
    text-decoration: none;
}


.modal  a:hover{
    color: #b48ab2;
    text-decoration: none;

}





/* ===================================
	     3. Sonstige Styles
	   =================================== */
.pix-fluid{
    width: 100%;
    height: auto;
}

.gap-100{
  height: 100px;
}

.gap-50{
    height: 50px;
}

.hover:hover{
    color: #b48ab2;
    text-decoration: none;

}
/* ===================================
	     4. media queries
	   =================================== */


@media screen and (min-width: 768px) {

    h1 {
        font-size: calc(30px + (60 - 30) * ((100vw - 768px) / (992 - 768)));
    }
    nav {
        font-size: calc(18px + (24 - 18) * ((100vw - 768px) / (992 - 768)));
        /*height: 88px;*/
    }
	
	 .quotes {
        font-size: calc(24px + (32 - 24) * ((100vw - 768px) / (992 - 768)));
    }
	
	
    .mobile-bold{
        font-weight: normal;
    }

    .modal-lg{
        max-width:80%;
    }

    
    
}

@media screen and (min-width: 992px) {

    h1 {
        font-size: 60px;
    }

    nav {
        font-size: 24px;
    }

   .quotes {
        font-size: 32px;
    }
}

@media screen and (min-width: 1048px) {
	
	
	header.sticky-gap{
        margin-bottom: 88px;
    }

    /* Menü */

    .mobile-btn{
        display: none;
    }

    .menu{
        position: relative;
        display: block;
        background-color: transparent;
        width: auto;
        text-align: left;
		margin-top: 18px;
    }

    .menu li {
        display: inline-block;
    }


/* Nimmt im Desktop dem Menüpunkt das Background hover */
    .menu li:hover{
        background-color: transparent;
    }

    .menu li a:hover{
        color: #b48ab2;
    }

    .menu-activ{
        color: #f173ac;
    }

    /*kein hover auf Menü Punkt auf aktiver Seite*/
    .menu .menu-activ:hover{
        background-color: transparent;
        color: #f173ac;
    }

/*droopdaown aktiv rosa*/
    nav .menu .activ a:link{
        color: #f173ac;
        text-decoration: none;
    }

    nav .menu .activ a:visited{
        color: #f173ac;
        text-decoration: none;
    }

    /* Dropdown */

    .dropdown{
        position: absolute;
        min-width: 200px;
        background-color: #faecf2;
        display: none;
        text-align: left;
        display: none;
    }

    .dropdown li{
        display: block;
    }
    /*Dropdown link farbe lila*/
    .menu .activ .dropdown li a:link{
        color: #852d7f;
        text-decoration: none;
    }

    .menu .activ .dropdown li a:visited{
        color: #852d7f;
        text-decoration: none;
    }

    .dropdown li:hover{
        background-color: #f9d1e3;
    }

    .menu li:hover .dropdown{
        display: block;
    }

    .menu-container.sticky{
        display: flex;
        justify-content: center;
        background-color: #fdf7fa;
    }

    /*Hover auf Menu Element mit Dropdown*/
     .menu .more-nav:hover{
        background-color: #f9d1e3;
        color: #852d7f;
    }

    nav .menu .more-nav a:hover{
        color: #852d7f;
        text-decoration: none;
    }


    .section-container{
        padding: 100px 50px 0 50px;
    }

   


}