@charset"UTF-8";
/* CSS Document */
body {font-size:18px; width: 100%}
h1 {font-size:30px; margin-top: 0px}
h2 {font-size:24px}
h1 + h2 {margin-top: -5px}
.underlined {width: 100%; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 25px}
.underlined a {text-decoration: underline}
h2.underlined:nth-of-type(2) {margin-top: 40px}
#jumptocontent {display:none}

h4 {font-size: 24px}
.sidebar h4 {font-size: 18px}

#page-header nav {background:rgba(221,221,221,.7); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
#global-navigation ul {border:0px; border-left:1px solid rgba(204,204,204,.7)}
#global-navigation ul  li:nth-child(1) {border-top:1px solid rgba(204,204,204,.5)}
#global-navigation li.current {background:#767676}
.header-img {width:100%; height:390px; margin-bottom:6px; overflow: hidden; background-size:cover; background-position: top center;}

.container h4.extra_top {margin-top:100px}
/*Page header images*/

/*Homepage Background Slideshow*/
.crossfade > figure {animation:imageAnimation 30s linear infinite 0s; backface-visibility:hidden; background-size:cover; background-position:center center; color:transparent; height:435px; left:0; opacity:0; position:absolute; top:0; width:100%; z-index:-1; overflow: hidden}
.crossfade > figure:nth-child(1) {background-image:url('../../img/home/Yamaha-Music-School-001.jpg')}
.crossfade > figure:nth-child(2) {animation-delay:6s; background-image:url('../../img/home/Yamaha-Music-School-002.jpg')}
.crossfade > figure:nth-child(3) {animation-delay:12s; background-image:url('../../img/home/Yamaha-Music-School-003.jpg')}
.crossfade > figure:nth-child(4) {animation-delay:18s; background-image:url('../../img/home/Yamaha-Music-School-004.jpg')}
.crossfade > figure:nth-child(5) {animation-delay:24s;background-image:url('../../img/home/Yamaha-Music-School-005.jpg')}

/*Homepage Background Slideshow Animation*/
@keyframes 
imageAnimation { 
	  0% {animation-timing-function:ease-in; opacity:0}
 	  8% {animation-timing-function:ease-out; opacity:1}
 	 17% {opacity:1}
 	 25% {opacity:0}
 	100% {opacity:0}
}

/*General Homepage*/
.home .header-img, .home .breadcrumb {margin-bottom: 21px}
.home .yms-logo {margin:60px auto 0; max-width:550px; width:80%}
.home .yms-button {margin:320px auto 0; padding:4px 32px; border:3px solid white; display:inline-block; border-radius:6px; color:white; transition:all .4s ease-in-out; font-size:18px; letter-spacing:1px}	
.home .yms-button:hover {background:white; color:black; border:3px solid white}
.home .yms-button  a {color:white; text-decoration:none}
.home .yms-button:hover a {color:black; text-decoration:none}

.home .homeblock a {display:inline-block; overflow:hidden; color: white; max-height: 250px; width:100%}
.home .homeblock img {transition:all .4s ease-in-out; width:100%}
.home .homeblock:hover img {transform:scale(1.1)}
.home .homeblock:hover a {text-decoration: underline}
.home .img-description {position:relative; z-index:50; top:-55px; left:10px; color:white; font-size:24px; letter-spacing:1px; height:0px; text-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}
.home .homeblock.teachers a {max-height:206px}

/*Homepage Video Modal*/	
.home .modal-dialog {width: 80%}

/*Sidebar*/
.sidebar {border-left:1px solid #eee; padding-right:6px}
.sidebar h4:nth-child(1) {margin-top:0px; padding-top:0px}
.btn .fa {margin-right: 15px}
.sidebar-details {margin-left:-4px}
.sidebar-details li {list-style: none; margin-bottom: 10px}
.sidebar-details li:before {font-family: FontAwesome; vertical-align: middle; position:relative; left:-25px}
.sidebar-details li.phone-details:before {content:"\f095"; margin-right:-15px; left:-32px}
.sidebar-details li.mail-details:before {content:"\f003"; margin-right:-20px; left:-35px}

.sidebar-details li.age-details:before {content:"\f007";   margin-right:-13px; left:-32px}
.sidebar-details li.time-details:before {content:"\f017"; margin-right:-16px; left:-33px}
.sidebar-details li.calendar-details:before {content:"\f073"; margin-right:-17px; left:-33px}
.sidebar-details li.group-details:before {content:"\f0c0"; margin-right:-20px; left:-35px}

.yms-mail:before {content:attr(data-website)"\0040" attr(data-user); unicode-bidi:bidi-override; direction:rtl}

.btn {transition: all ease 1s; margin:15px 15px 15px 0}
.btn-primary {color:white !important; background-color:#48217a; border:none; padding:5px 32px; text-align:center; text-decoration:none; display:inline-block; font-size:18px; letter-spacing:1px; border-radius:6px}
.btn-primary a {color:white; text-decoration:none}
.btn-primary:hover  {background-color:#ff8400; text-decoration:none}

.btn-secondary {background-color:#eee; border:none; padding:5px 32px; text-align:center; text-decoration:none; display:inline-block; font-size:18px; letter-spacing:1px; border-radius:6px}
.btn-secondary a {color:#535353; text-decoration:none}
.btn-secondary:hover {background-color:#d3d3d3; text-decoration:none}

.btn-back {}

.adres-contact, .opening-contact, .buro-contact {margin-top:20px}
.sidebar .fa-clock-o {position:relative; left:1px}
.sidebar .fa-calendar-o {position:relative; left:1px}

.footnote {margin-top:10px;border-top:1px solid #3b3b3b; color:#777}

/*General content*/
.breadcrumb  {font-size:14px; margin-bottom:40px}
.col-md-12 .breadcrumb{margin-top:40px}
.breadcrumb .active {color:#ccc}
.content h4 {margin-top:40px}
.content a {text-decoration: underline; color:#737373}
.adres-contact h4 + a, .orange-button p + a {color:#737373}
.col-md-8 a:hover {text-decoration: none}
ul.col-md-offset-1 {margin:10px 0px 40px}
ul.col-md-offset-1 li {margin:10px 0}

.col-md-11 h3:nth-child(1) {margin-top:0px; padding-top:0px}

.news-item {margin:10px 0px; padding-left:0px; display: inline-block}
.news-item .col-sm-4 {padding-left:0px}
.newsimg {overflow:hidden; padding-right:10px}
.news-item img {height:auto; width:100%; border:1px solid grey}
.news-item h4 {margin-top:0px; font-size: 18px}
.news-image-big {margin-bottom:20px}

.lesson .cnt {margin:10px; display:block; overflow:hidden; position: relative;}
.lesson:hover {}
.lesson img {transition:all .4s ease-in-out; width: 100%; height: 200px; object-fit: cover;}
.lesson a:hover {text-decoration:none; cursor:pointer}
.lesson a:hover img {transform:scale(1.1)}
.lesson-description {position:absolute; bottom:6px; left:10px; right: 10px; color:white; text-shadow:1px 2px 1px rgba(0, 0, 0, 0.9)}

.courses #content p:first-child img { display: none; }

.courses-page .homeblock a {display:inline-block; overflow:hidden; color: white; max-height: 250px; width:100%}
.courses-page .homeblock img {transition:all .4s ease-in-out; width:100%}
.courses-page .homeblock:hover img {transform:scale(1.1)}
.courses-page .homeblock:hover a {text-decoration: underline}
.courses-page .img-description {position:relative; z-index:50; top:-55px; left:10px; color:white; font-size:24px; letter-spacing:1px; height:0px; text-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}

.opening-contact .list-left, .buro-contact .list-left {clear:both; float:left; min-width:50%}

p.classnote{position: relative; margin-left: 10px; margin-top: 40px}
p.classnote::before{content:"*"; position: relative; margin-left: -10px}
p.classnote strong{width: 270px; display: inline-block; font-weight: normal}

/*Seperate Pages*/
.collaborations-page .embed-responsive-16by9 {margin: 20px 0 40px}

.teachers-page .teacher-intro {margin:30px 0 60px}
.teachers-page .teacher-row {margin:80px 0 0 0 }
.teachers-page .teacher-photo {overflow: hidden; max-width: 170px; max-height: 170px; border-radius: 50%}
.teachers-page .teacher-photo img {position: relative}
.teachers-page .teacher-row h4 {margin-top:0px}
.teachers-page .teacher-course {border-top:1px solid lightgrey; margin-top:20px; padding-top:5px} 
.teachers-page .teacher-course a {color:#0146c4; text-decoration: none}
.teachers-page .teacher-course a:hover {text-decoration: underline} 

.gallery-page .thumbnail {margin-bottom:6px}
.gallery-page .carousel-control.left,.gallery-page .carousel-control.right{background-image:none; margin-top:10%; width:5%}
.gallery-page #box-container li {list-style-type: none; overflow: hidden; margin-bottom: 5px}
.gallery-page #box-container li a {display: inline-block; overflow: hidden; max-height: 180px}
.gallery-page #box-container li a:hover img {transform: scale(1.1)}
.gallery-page #box-container li a img {transition: all .4s ease-in-out}	
.gallery-page ul#box-container {padding-left: 0px; text-align:center;}

/*Footer Style*/
.social-footer {padding:10px 0; background:#e5e5e5; border-top:1px solid #ccc; margin-top:20px}
.social-footer a {transition:all .4s ease-in-out; opacity:0.7}
.social-footer a:hover {opacity:1}
.social-footer .fa {font-size: 15px; background: grey; width: 30px; border-radius: 30px; color: white; height: 30px; line-height: 30px; text-align: center}

.footer-menu {padding-bottom:20px; color:#868686; font-size:12px}
.footer-menu .nav-list>li a {color:#868686}
.global-footer h6 {margin:32px 0 12px; color:#ccc; font-size:14px}
.global-footer h6 a {color:#ccc}

.global-footer .career {position:relative; top:13px}
.global-footer .contact {position:relative; top:15px}
.global-footer .adres-list {position:relative; top:-6px; height: auto!important;display: block}
.global-footer .footnote a {color:#777}
.global-footer .footnote .impressum {float:right}
.global-footer .showonmobile {display:none}
.footer-menu .adres .yms_logo {margin: 30px 0px -5px 0px; max-height: 60px}
.footer-menu .adres h6 {margin-bottom:22px}
.footer-menu .adres-list>li a {display: initial}
	
@media screen and (max-width:1195px) {
.homepage .subpromo a {max-height:163px}
.gallery-page #box-container li a {max-height:150px}
.opening-contact .list-left, .buro-contact .list-left {width: 100%; margin-top:10px}
}	

@media screen and (max-width:991px) {
.home .sidebar {border-bottom:none}
H2 {margin-left:10px}

.opening-contact .list-left, .buro-contact .list-left {width:170px}
.opening-contact, .buro-contact {margin-top:30px}
.orange-button {margin:50px 0 30px; max-width:100%}
#submit.button {margin:30px 0 30px; display:block; max-width:100%}
.footnote {margin-top:10px; color:#777}
.sidebar .doubleicon {float:left;margin-bottom:auto; margin-top:5px}
.global-footer .office-hours {clear:both}	
.sidebar {margin:30px auto; border-left:none; border-top:1px solid #eee; padding:30px 5px; display: inline-block; border-bottom:1px solid #eee; width: 100%}
 .opening-contact .list-left, .buro-contact .list-left {width:auto; margin-top:auto; font-weight: normal}
.teachers-page .sidebar {border-bottom:none}
.gallery-page #box-container li a {max-height: 115px}
}		

@media screen and (max-width:768px) {
body {font-size:16px}
h1 {font-size:26px}
h2 {font-size:20px}
.home .age-lesson a, .homepage .selfpromo a {max-height:170px}
.banner-description {position: relative; margin-top: 100px; margin-bottom: 100px; margin-left: 0}
.home .row.banner:nth-of-type(1) .highlight-banner div, .home .row.banner:nth-of-type(3) .highlight-banner div, .home .row.banner:nth-of-type(5) .highlight-banner div {color:black}
.newsimg {margin-bottom: 20px; padding-right: 0px}

.gallery-page #box-container li a {max-height: 130px}
.header-img {margin-bottom:40px}
.teacher-row .col-sm-4 {clear:both; float:left; margin:0px 20px 20px 0px}
.global-footer .career, .global-footer .rundgang, .global-footer .contact {position:static}
.global-footer .hideonmobile {display:none}
.global-footer .showonmobile {display:block}
.global-footer .footnote .impressum {float:none; width:250px; margin:auto; display:inline-block}
.global-footer h6 {margin:20px 0 12px; padding: 0 0 0 6px}
.footer-menu .footer-navs {border-bottom: 1px solid #3b3b3b}
.footer-menu .nav-list.adres-list>li , .footer-menu .footer-navs.adres  {border:none}
.footer-menu .adres .yms_logo {margin: 30px auto}
}

@media screen and (max-width:700px) {
.homepage .age-lesson img, .homepage .age-lesson a {width:100%}
.homepage .age-lesson.col-xs-6 {width:100%; margin:20px 0 10px}
}	

@media screen and (max-width:500px) {
.adres-contact {width:100%; margin-top:20px}
.direct-contact .col-xs-1 {min-width:12%}
.direct-contact .col-xs-11 {max-width:85%}
.lesson .cnt {margin:2px; display:block; overflow:hidden}
.teacher-row .col-sm-4 {width:100%}
.teacher-photo {margin:auto}
.teachers-page .teachertabs li {width:100%}
.teachers-page .nav-tabs>li.active>a, .teachers-page .nav-tabs>li.active>a:focus, .teachers-page .nav-tabs>li.active>a:hover {border:none}	
.teachers-page .nav-tabs li.active a {background:#f5f5f5}
.teachers-page .nav-tabs>li>a {border:none}
.teachers-page .nav-tabs>li {margin-bottom:0px}
.teachers-page .nav-tabs {border-bottom:1px solid #eee}
}	

@media screen and (max-width:400px) {
.opening-contact, .buro-contact, .adres-contact {margin-top:50px}
.opening-contact h4, .buro-contact h4, .adres-contact h4 {margin-bottom:-3px; font-weight:bold}
.opening-contact .list-left, .buro-contact .list-left {width:100%; margin-top:6px}
.lesson {width:100%}
.lesson .cnt {margin:10px}
.gallery-page #box-container li a {max-height:100px}
.btn {white-space: normal}
}

/* FIXES */
#global-navigation div.courses {position:absolute; top: 15px; left: 15px; right: 15px;}
#global-navigation div.courses ul{position:absolute;top:0;left:26%;width:74.25%;z-index:1042}
#global-navigation div.courses ul li{float:left;width:33.333%;height:63px;background:#fff}
#global-navigation div.courses ul li a{color:#445167}
@media (max-width:767px){
    #global-navigation div.courses ul{left:50.5%;width:49.5%}
    #global-navigation div.courses ul li{float:none;width:100%;height:auto}
}
.heading-wrapper { overflow: hidden; }
.sidebar { margin-bottom: 20px; float: right; }
@media screen and (max-width:991px) {
    .sidebar { float: none; }
}

/* OWN */
.heading-wrapper { overflow: visible; }
.home .heading-wrapper h1 {
    position: relative;
}
.home .heading-wrapper h1:after {
    content: '';
    width: 183px;
    height: 80px;
    background: url('/img/logo_pl.png') no-repeat right center;
    position: absolute;
    right: 0;
    bottom: 10px;
}
#fb-wrapper {
    width: 240px;
    position: fixed;
    right: -242px;
    top: 50%;
    margin-top: -170px;
    z-index: 101;
    background: #fff;
    border: 1px solid #395994;
}
#fb-wrapper #handle {
    width: 33px;
    height: 171px;
    position: absolute;
    top: -1px;
    left: -33px;
    background: url('../../img/fb-handle.png');
    cursor: pointer;
}
#yt-wrapper {
    width: 33px;
    height: 171px;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 100;
    background: url('../../img/yt-handle.png');
}
#yt-wrapper:hover { opacity: 0.8; }

@media screen and (max-width: 768px) {
    .home .heading-wrapper h1 { padding-right: 100px; }
    .home .heading-wrapper h1:after {
        width: 92px;
        height: 40px;
        background-size: contain;
        bottom: auto;
        top: 0px;
    }
    #fb-wrapper, #yt-wrapper { display: none; }
}