@charset"UTF-8";
/* CSS Document */
body {font-size:18px; width: 100vw}
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 {height: 345px}
#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}
.home-page #page-header .brand-logo .Yamaha_logo {position:relative; top:-50px}
.header-img {width:100%; height:390px; margin-bottom:6px; overflow: hidden}

.container h4.extra_top {margin-top:100px}
/*Page header images*/
/*General Pages Header BG*/
.pricelist-page .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.grade-examination-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-003.jpg) top center; background-size:cover}
.imprint-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-001.jpg) top center; background-size:cover}
.junior-original-concert-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-003.jpg) top center; background-size:cover}
.contact-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-002.jpg) top center; background-size:cover}
.collaborations-page .header-img {background:url(../img/headers/header-collaborations.jpg) top center; background-size:cover}
.courses-page .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.teachers-page .header-img {background:url(../img/headers/header-teachers.jpg) top center; background-size:cover}
.news-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-001.jpg) top center; background-size:cover}
.about-us-page .header-img {background:url(../img/headers/Foto-escuela-musica-organigrama-malaga-2018.jpg) top center; background-size:cover}
.concept-page .header-img {background:url(../img/headers/Yamaha-Music-School-Default-003.jpg) top center; background-size:cover}
.vr-page .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}

/*Course Pages Header BG*/
.course-page .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.course-page-recorder .header-img {background:url(../img/headers/header-recorder.jpg) top center; background-size:cover}
.course-page-drums .header-img {background:url(../img/headers/header-drums.jpg) top center; background-size:cover}
.course-page-electric-bass .header-img {background:url(../img/headers/header-electric-bass.jpg) top center; background-size:cover}
.course-page-electric-guitar .header-img {background:url(../img/headers/header-electric-guitar.jpg) top center; background-size:cover}
.course-page-adults .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.course-page-gitarre .header-img {background:url(../img/headers/header-guitar.jpg) top center; background-size:cover}
.course-page-teens .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.course-page-junior .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.course-page-junior-step .header-img {background:url(../img/headers/header-default.jpg) top center; background-size:cover}
.course-page-junior-advanced .header-img {background:url(../img/headers/header-junior-advanced-course.jpg) top center; background-size:cover}
.course-page-junior-extension .header-img {background:url(../img/headers/header-junior-extention.jpg) top center; background-size:cover}
.course-page-junior-music .header-img {background:url(../img/headers/header-junior-music.jpg) top center; background-size:cover}
.course-page-junior-ensemble .header-img {background:url(../img/headers/header-junior-ensemble.jpg) top center; background-size:cover}
.course-page-keyboard .header-img {background:url(../img/headers/header-keyboard.jpg) top center; background-size:cover}
.course-page-keyboard-and-piano .header-img {background:url(../img/headers/header-keyboard-and-piano-kids-2.jpg) top center; background-size:cover}
.course-page-piano .header-img {background:url(../img/headers/header-piano-adults-2.jpg) top center; background-size:cover}
.course-page-kids .header-img {background:url(../img/headers/header-kids.jpg) top center; background-size:cover}
.course-page-kraki .header-img {background:url(../img/headers/header-kraki.jpg) top center; background-size:cover}
.course-page-music-wonderland .header-img {background:url(../img/headers/header-music-wonderland.jpg) top center; background-size:cover}
.course-page-music-adventure .header-img {background:url(../img/headers/header-music-adventure.jpg) top center; background-size:cover}
.course-page-pop-choir .header-img {background:url(../img/headers/header-pop-choir.jpg) top center; background-size:cover}
.course-page-flute .header-img {background:url(../img/headers/header-flute-2.jpg) top center; background-size:cover}
.course-page-robbie .header-img {background:url(../img/headers/header-robbie.jpg) top center; background-size:cover}
.course-page-saxophone .header-img {background:url(../img/headers/header-saxopnhone.jpg) top center; background-size:cover}
.course-page-vocals .header-img {background:url(../img/headers/header-vocals.jpg) top center; background-size:cover}

/*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/headers/Yamaha-Music-School-001.jpg')}
.crossfade > figure:nth-child(2) {animation-delay:6s; background-image:url('../img/headers/Yamaha-Music-School-002.jpg')}
.crossfade > figure:nth-child(3) {animation-delay:12s; background-image:url('../img/headers/Yamaha-Music-School-003.jpg')}
.crossfade > figure:nth-child(4) {animation-delay:18s; background-image:url('../img/headers/Yamaha-Music-School-004.jpg')}
.crossfade > figure:nth-child(5) {animation-delay:24s;background-image:url('../img/headers/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-page .header-img {margin-bottom: 21px}
.home-page .yms-logo {margin:60px auto 0; max-width:550px; width:80%}
.home-page .yms-button {margin:60px 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-page .yms-button:hover {background:white; color:black; border:3px solid white}
.home-page .yms-button  a {color:white; text-decoration:none}
.home-page .yms-button:hover a {color:black; text-decoration:none}

.home-page .homeblock a {display:inline-block; overflow:hidden; color: white; max-height: 250px; width:100%}
.home-page .homeblock img {transition:all .4s ease-in-out; width:100%}
.home-page .homeblock:hover img {transform:scale(1.1)}
.home-page .homeblock:hover a {text-decoration: underline}
.home-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)}
.home-page .homeblock.teachers a {max-height:206px}

/*Homepage Banners*/
.home-page .highlight-banner {display:block; margin: 30px 3px; height: 150px} 
.home-page .highlight-banner div {position: relative; top: 50%; LEFT: -12%; transform: translateY(-50%)}
.home-page .row.banner:nth-of-type(1) .highlight-banner {background: url(../img/home/banner-001.jpg) 0 0 no-repeat; background-size: cover}
.home-page .row.banner:nth-of-type(1) .highlight-banner div {color: #3e26e2; FONT-WEIGHT: bold; FONT-SIZE: x-large;}
.home-page .row.banner:nth-of-type(3) .highlight-banner {background: url(../img/home/banner-002.jpg) 0 0 no-repeat; background-size: cover}
.home-page .row.banner:nth-of-type(3) .highlight-banner div {color:white}
.home-page .row.banner:nth-of-type(5) .highlight-banner {background: url(../img/home/banner-003.jpg) 0 0 no-repeat; background-size: cover}
.home-page .row.banner:nth-of-type(5) .highlight-banner div {color:lemonchiffon}
.home-page a.highlight-banner:hover .col-md-7 {text-decoration: underline}

/*Homepage Video Modal*/	
.home-page .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 {background-color:#ff9600; 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}
.col-md-8 h4 {margin-top:40px}
.col-md-8 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 3px; 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}
.lesson:hover {}
.lesson img {transition:all .4s ease-in-out; width: 100%}
.lesson a:hover {text-decoration:none; cursor:pointer}
.lesson a:hover img {transform:scale(1.1)}
.lesson-description {position:relative; top:-60px; left:10px; height:0px; color:white; text-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}

.course-page-adults .lesson-description {top:-30px}

.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} 

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

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

/*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}
.about-us-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-page .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}
.about-us-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-page .age-lesson a, .homepage .selfpromo a {max-height:170px}
.banner-description {position: relative; margin-top: 100px; margin-bottom: 100px; margin-left: 0}
.home-page .row.banner:nth-of-type(1) .highlight-banner div, .home-page .row.banner:nth-of-type(3) .highlight-banner div, .home-page .row.banner:nth-of-type(5) .highlight-banner div {color:black}
.newsimg {margin-bottom: 20px; padding-right: 0px}

.about-us-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}
.lesson-description {top:-30px; left:5px}
.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}
.lesson-description {top:-40px; left:10px}
.about-us-page #box-container li a {max-height:100px}
.btn {white-space: normal}
}