/*
Theme Name: Migena Gjata - Sing Schule
Author: 12ender GmbH
Author URI: https://www.12ender.de/
Description: WordPress Theme Sing Schule by Migena Gjata
Version: 1.0
*/
@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Playfair+Display&display=swap";
html,body {overflow-x:hidden}
body{font-family:'Open Sans',sans-serif;font-weight:400;line-height:1.9;color:#333;font-size:16px;scroll-behavior: smooth;}
.overflow{overflow:hidden}
h1,h2,h3,h4{color:#333;font-family:'Playfair Display',serif}
h1 span,h2 span,h3 span{display:block}
h1{font-size:50px}
h2{font-size:40px}
h3{font-size:30px}
h4{font-size:20px}
.container{width:100%;max-width:1250px;margin:0 auto}
.container.wide{width:100%;max-width:1600px;margin:0 auto}
.container.halfwide{width:100%;max-width:1500px;margin:0 auto}
.row.wide{margin-left:-40px;margin-right:-40px}
.row.wide > div{padding:0 40px}
img.responsive{width:100%;height:auto}
.divider{width:50px;height:3px;background:#9a5e24;margin:20px auto}
.divider.left{margin:20px 0}
a.btn,a:focus.btn,a:active.btn{border:0;border-radius:99px;background:#9a5e24;color:#fff;line-height:65px;padding:0 50px;font-size:22px;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out}
a:hover.btn {background:#333;color:#fff}
a.btn.tuerkis {color:#fff;background:#00afb1}
a:hover.btn.tuerkis {background:#38b8bd}
a.btn.small {line-height:50px;padding: 0 30px;font-size:18px}
a:focus,a:active {text-decoration:none;border:0;outline:none}
#header{padding:20px 0;  transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;z-index: 9999;
top: 0;position: fixed;width:100%;background:#fff;display:none}
#header ul{list-style:none;margin:10px 0 0 0;padding:0;font-size:0;text-align:right;}
#header ul li{display:inline-block;margin:0 0 0 40px;line-height:100px;transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out}
#header ul li a{font-size:16px;text-transform:uppercase;color:#333;line-height:30px;display:inline-block;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out}
#header ul li a:hover{color:#9a5e24;text-decoration:none}
#header ul li.instagram {float:right;margin-top:-6px}
#header ul li.instagram a {background-image:url(images/instagram.png);background-size:25px 25px;background-repeat:no-repeat;background-position:50% 50%;width:25px;height:30px;font-size:0;}
#header ul li.instagram a:hover {background-image:url(images/instagram-hover.png);}
#header img.custom-logo{height:100px;width:auto;transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out}
#header.shrink{padding:10px 0;}
#header.shrink img.custom-logo{height:70px;width:auto;margin-top:5px}
#header.shrink ul li{line-height:70px}
#mobile-header {display:block;position:fixed;top:0;left:0;width:100%;background:#fff;height:60px;z-index:999;padding:5px 0}
#mobile-header img.custom-logo {height:50px;width:auto}
#burger{position:relative;float:right;margin-top:15px}
.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:0;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}
.hamburger:hover{opacity:.7}
.hamburger-box{position:relative;display:inline-block;width:40px;height:24px}
.hamburger-inner{top:50%;display:block;margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:2px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:2px;background-color:#000}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}
.hamburger-inner:before{top:-10px}
.hamburger-inner:after{bottom:-10px}
.hamburger--slider .hamburger-inner{top:2px}
.hamburger--slider .hamburger-inner:before{top:10px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform,opacity}
.hamburger--slider .hamburger-inner:after{top:20px}
.hamburger--slider.is-active .hamburger-inner{transform:translate3d(0,10px,0) rotate(45deg)}
.hamburger--slider.is-active .hamburger-inner:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0);opacity:0}
.hamburger--slider.is-active .hamburger-inner:after{transform:translate3d(0,-20px,0) rotate(-90deg)}
#mobile-nav{display:none;background:#fff;width:100%;position:fixed;top:0;left:0;z-index:99;padding:15px;height:100%}
#mobile-nav .inner{margin-left:auto;margin-right:auto;position:relative;top:50%;transform:translateY(-50%)}
#mobile-nav ul{list-style:none;margin:0;padding:0;text-align:center}
#mobile-nav ul li{padding:10px 0}
#mobile-nav ul li a{color:#333;font-size:25px;text-decoration:none;text-transform:uppercase}
#mobile-nav ul li a:hover{color:#9a5e24;text-decoration:none}
#mobile-nav ul li.instagram  {display:none}
#mobile-header a.instagram  {background-image:url(images/instagram.png);background-size:25px 25px;background-repeat:no-repeat;background-position:50% 50%;width:25px;height:25px;font-size:0;display:inline-block;float:right;margin-top:13px;margin-right:20px}
#mobile-header a:hover.instagram {background-image:url(images/instagram-hover.png);}
#willkommen{padding:60px 0 0 0;}
#willkommen .rellax{z-index:999;position:relative;display:none}
#willkommen .quote{margin-top:150px;margin-right:-350px;font-family:'Playfair Display',serif;font-size:65px;line-height:1.2;font-style:italic}
#willkommen .quote .name{margin-top:-20px}
#willkommen .quote .name span{position:relative;display:inline-block;font-family:'Open Sans',sans-serif;font-size:14px;margin-left:60px}
#willkommen .quote .name span:before{content:'';width:50px;height:1px;background:#9a5e24;position:absolute;top:50%;left:-60px}
#intro{padding:80px 0 0 0}
#intro .txt{width:100%;max-width:750px;margin:0 auto 20px;text-align:center}
#intro .txt h2{margin:0;line-height:1.3}
#intro .txt p.subtitle {font-size:16px;font-family:'Playfair Display',serif;margin:0 0 5px 0}
#intro .txt a.btn {margin-top:30px}
#intro img {margin-top:30px}
#philosophie{padding:80px 0}
#philosophie .quote{margin-top:50px;font-family:'Playfair Display',serif;font-size:30px;line-height:1.2;font-style:italic}
#philosophie .quote .name{text-align:right;margin-right:30px}
#philosophie .quote .name span{position:relative;display:inline-block;font-family:'Open Sans',sans-serif;font-size:14px}
#philosophie .quote .name span:before{content:'';width:50px;height:1px;background:#9a5e24;position:absolute;top:50%;left:-60px}
#ueber-mich{padding:80px 0;}
#ueber-mich img.signatur{margin-top:15px}
#parallax {padding: 0 0 80px 0}
#parallax .left {margin-bottom:30px}
#ausbildungsinhalte{padding:80px 0;background:#f8f4f0}
#ausbildungsinhalte .txt{width:100%;max-width:750px;margin:0 auto 50px auto;text-align:center}
#ausbildungsinhalte .txt h2{margin:0}
#ausbildungsinhalte .testimonials {width:100%;max-width:900px;margin:100px auto 0 auto}
#ausbildungsinhalte .testimonials h2 {text-align:center}
#ausbildungsinhalte .testimonials .item {text-align:center;font-style:italic}
#ausbildungsinhalte .testimonials .item span {display:block;font-weight:700;font-style:normal}
.owl-theme .owl-dots .owl-dot span{background:#e5d7c8!important;}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#9a5e24!important;}
.panel-group {width:100%;max-width:960px;margin:0 auto}
.panel-group .panel { border-radius: 0; box-shadow: none; border-color: transparent; border:0!important}
.panel-default > .panel-heading { padding: 0;}
.panel-title { font-size: 18px;}
.panel-title > a { display: block; padding: 0 20px!important; text-decoration: none; background:#965f25!important;border-radius:15px!important;color:#fff;font-family:'Open Sans',sans-serif;font-weight:400;text-transform:none;line-height:65px}
.more-less { float: right; color: #fff;line-height:62px }
.panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: transparent; padding:20px;}
.panel-body {background:#f8f4f0;border:0!important}
#content {padding:100px 0}
#content .container {width:100%;max-width:960px;margin:0 auto}
#content h1 {margin:0 0 30px 0}
#content a {color:#9a5e24;text-decoration:underline;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out}
#content a:hover {color:#333;text-decoration:underline}
#kontakt{padding:150px 0;background-image:url(images/bg-kontakt.jpg);background-position:50% 97%;background-size:30px auto;background-repeat:no-repeat}
#kontakt .txt{width:100%;max-width:750px;margin:0 auto;text-align:center}
#kontakt .txt p.title{margin:0 0 30px;font-family:'Playfair Display',serif;font-size:45px;line-height:1}
#kontakt .txt a.btn{margin-top:30px}
#kontakt .anschrift {margin-top:30px}
#kontakt .anschrift p span {font-weight:700;display:block}
#kontakt .anschrift a {color:#9a5e24;text-decoration:underline;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out}
#kontakt .anschrift a:hover {color:#333;text-decoration:underline}
#footer{background:#333;padding:50px 0 100px;text-align:center}
#footer ul{list-style:none;margin:0;padding:0}
#footer ul li{display:inline;margin:0 5px}
#footer ul li a{font-size:12px;color:#fff}
#footer p{font-size:12px;margin:0;color:#fff}
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {
#header {display:block}
#mobile-header {display:none}
#willkommen{padding:200px 0 0 0}
#willkommen .rellax{display:block}
#intro{padding:200px 0 0 0}
#intro .txt{margin:0 auto 100px}
#intro img {margin-top:0}
#philosophie{padding:200px 0}
#philosophie .quote{font-size:42px}
#philosophie .quote .name{margin-right:0}
#ueber-mich{padding:200px 0 100px 0;text-align:justify}
#parallax {padding: 0 0 200px 0}
#parallax .left{margin-top:120px;margin-right:-250px;z-index:1;position:relative;margin-bottom:0}
#ausbildungsinhalte{padding:200px 0}
.panel-title {font-size: 20px}
.panel-title > a {padding: 25px}
.panel-default > .panel-heading + .panel-collapse > .panel-body {padding:25px}
#content {padding:200px 0 100px 0}
#kontakt{padding:200px 0 250px 0;background-size:40px auto;}
#kontakt .txt p.title{font-size:75px}
#footer ul li{margin:0 10px}
}
@media (min-width: 1200px) {}