*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Open Sans', sans-serif;background:#ffffff;font-size:16px;line-height:1.5rem;color:#000}h1,h2,h3{font-family:'Roboto Slab', serif;font-weight:400;padding:2rem 0}h4,h5,h6{padding:2rem 0}h1{font-size:3rem;line-height:3rem}h2{font-size:1.6rem;line-height:1.3rem}h3{font-size:1.4rem;line-height:1.4rem}p{line-height:175%;margin-bottom:2rem}.text-center{text-align:center}.wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:200px 1fr auto;grid-template-areas:"header" "content" "footer"}.sidebar{display:none;visibility:hidden}header{display:grid;grid-template-columns:1fr;grid-area:header;grid-template-areas:"innerheader";text-align:center;background:url("../images/design/top-bg2019-loop-dark.jpg") repeat-x bottom left}.header-wrap{display:grid;margin-bottom:-1px;grid-area:innerheader;grid-template-columns:1fr;grid-template-rows:90px;grid-template-areas:"hdrtop" "hdrbottom";grid-gap:0 0rem}.hdr-top{grid-area:hdrtop;text-align:left;margin-left:15px}.hdr-bottom{grid-area:hdrbottom;position:relative}.logo{margin-top:30px;max-width:90%}h1.main-title{padding:0.3rem 0;font-size:.9rem;font-style:italic;line-height:150%;font-weight:400;color:#fff;text-align:left;margin-top:0px;margin-left:15px}.content{grid-area:content;padding:0}h2.title{margin:0;line-height:2rem}h2.title-w-bg{margin:0px -20px 0px -20px;padding-left:25px;padding-right:30px;border-bottom:2px solid #664F04;background:#F8F0DE}.content-container{margin:0 20px}.content-list{margin:25px}.content-list li{margin-bottom:15px}aside{padding:0px}footer{grid-area:footer;padding:25px;text-align:center;color:#95A3C9;background:#1c2055}footer a{color:#95A3C9;text-decoration:none}footer a:hover,footer a:focus,footer a:active{color:#fff;text-decoration:underline}footer span.credit{font-size:0.8rem}.footer-links{display:none}figure.footer-logo{max-width:350px;margin:auto;margin-bottom:20px}figure.badge{position:absolute;top:250px;right:5px;width:130px;height:130px}figure.intxt-left{float:none;margin:25px 0}figure.intxt-right{float:none;margin:25px 0}.all_caps_text{text-transform:uppercase}.responsive-img{margin:0 auto;height:auto;max-width:100%;border:none;display:block}.img-cover{object-fit:cover}.content-img{max-width:320px}a.action-btn{display:inline-block;margin:35px auto;text-align:center;padding:15px 35px;background-color:#135912;font-size:1.2rem;line-height:30px;color:#fff;border-radius:3px;text-decoration:none;box-shadow:1px 1px 5px #B6B6B6}a.action-btn:hover,a.action-btn:active,a.action-btn:focus{background:#CF7A7A}.photo-gallery{display:grid;grid-template-columns:1fr;grid-gap:20px;margin:35px}.photo-box{background-color:#fff;border:1px solid #fff;border-radius:3px;padding:0px;text-align:center;box-shadow:0px 0px 10px 1px #eee}.photo-box figure{max-height:350px;overflow:hidden}.photo-box img{width:100%;height:350px;object-fit:cover}.teachers-gallery{display:grid;grid-template-columns:1fr;grid-gap:20px;margin:35px}.gallery-box{background-color:#fff;color:#000;border:1px dotted #ccc;border-radius:5px;padding:20px;font-size:1rem;text-align:center}.lesson-gallery{display:grid;grid-template-columns:1fr;grid-gap:20px;margin:35px}.lessons-box{background-color:#000;color:#fff;border-radius:5px;padding:0px 0px 20px 0px;font-size:1.2rem;text-align:center;min-height:250px}.lessons-box span{display:block;height:200px;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#ccc;margin-bottom:15px}.lessons-box span.violin{background:url("../images/lessons/violin.jpg") no-repeat center center;background-size:cover}.lessons-box span.guitar{background:url("../images/lessons/guitar.jpg") no-repeat center center;background-size:cover}.lessons-box span.piano{background:url("../images/lessons/piano.jpg") no-repeat center center;background-size:cover}.lessons-box span.keyboard{background:url("../images/lessons/keyboard.jpg") no-repeat center center;background-size:cover}.lessons-box span.cello{background:url("../images/lessons/cello.jpg") no-repeat center center;background-size:cover}.lessons-box span.drums{background:url("../images/lessons/drums.jpg") no-repeat center center;background-size:cover}.video-container{position:relative;padding-bottom:66.25%;padding-top:0px;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}h3.cloud-headline{display:block;padding:0;min-height:200px;text-align:center;line-height:200px;background:url("../images/design/cloud.svg") no-repeat top center;background-size:contain}.two-cols{display:grid;grid-template-columns:1fr;grid-gap:20px;margin:35px 0px}.col-1{color:#333;padding:20px;font-size:1rem;text-align:left}.col-2{color:#333;padding:20px;font-size:1rem;text-align:center}.home-bottom-gallery{display:grid;grid-template-columns:1fr;grid-column-gap:20px;grid-row-gap:10px;clear:both;padding-top:25px;margin:35px 0px;border-top:1px solid #eee}.hm-btm-gal-col1,.hm-btm-gal-col2{padding:20px}.home-video{width:100%;height:100%;background:url("../video/EncinoYamahaMusicSchool-7-11-2018.jpg") no-repeat top left;background-size:cover}@media all and (min-width: 480px){.hdr-top{text-align:center;margin-left:0px}h1.main-title{font-size:1.1rem;text-align:center;margin-left:0}}@media all and (min-width: 640px){h2{font-size:1.8rem;line-height:2.1rem}h3{font-size:1.7rem;line-height:1.9rem}h1.main-title{font-size:1.2rem}figure.badge{top:100px;right:5px;width:140px;height:140px}h2.title-w-bg{margin:0px -20px 30px -20px;line-height:125%;padding-top:25px;padding-bottom:25px}.teachers-gallery{display:grid;grid-template-columns:1fr 1fr}.lesson-gallery{display:grid;grid-template-columns:1fr 1fr}figure.intxt-left{float:left;margin:0 25px 0 0}figure.intxt-right{float:right;margin:0 0 0 25px}.content-img{max-width:300px}}@media all and (min-width: 801px){h2{font-size:2.1rem}h3{font-size:1.9rem;line-height:1.9rem}.wrapper{grid-template-columns:280px 2fr;grid-gap:0 1rem;grid-template-areas:"header header" "sidebar content" "footer footer"}.header-wrap{grid-template-columns:1fr;grid-template-rows:110px 86px;grid-template-areas:"hdrtop" "hdrbottom";grid-gap:0 1rem}.content-container{margin:0 20px 0 0}h1.main-title{float:right;padding:25px 0 0 0;font-size:1rem;margin-top:10px;margin-right:80px;color:#000;text-align:center;line-height:130%;width:360px}h2.title{margin:20px 0}h2.title-w-bg{margin-top:0px;margin-left:-25px}.hdr-bottom{background:url("../images/design/right-wave-bg.svg") no-repeat right bottom;background-size:auto 70px}.logo{margin-top:30px;max-width:75%}.content{padding:15px 0 35px 1%}figure.intxt-left{margin:0 35px 0 0}figure.intxt-right{margin:0 0 0 35px}.photo-gallery{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;margin:15px}.photo-box figure{max-height:200px;max-width:100%}.photo-box img{height:200px}a.mobile-nav-btn{display:none}.sidebar{display:block;visibility:visible;grid-area:sidebar;background:#f1f1f1;padding:0px;margin-top:15px;margin-bottom:0px;border-top-right-radius:4px}.sidebar ul{list-style:none;background:url("../images/design/Piano-Keys-3D-10-left.svg") no-repeat top right;float:right;text-align:right;width:280px;height:440px}.piano-nav li a{display:block;padding:0px 15px;text-decoration:none;text-transform:uppercase;color:#333;line-height:43px;height:43px;font-size:13px;font-weight:600}.piano-nav li a:hover,.piano-nav li a:focus,.piano-nav li a:active{background:-moz-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 100%);background:-webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 100%);background:linear-gradient(to right, transparent 40%, rgba(0,0,0,0.2) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 )}.piano-nav li a.active{background:-moz-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 100%);background:-webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 100%);background:linear-gradient(to right, transparent 40%, rgba(0,0,0,0.2) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 )}.sidebar-content{clear:right;padding:35px 20px;text-align:center}figure.badge{top:180px;right:5px;width:140px;height:140px}.footer-links{display:block}.home-bottom-gallery{grid-template-columns:59% 38%;max-height:480px}.hm-btm-gal-col1,.hm-btm-gal-col2{max-height:480px;padding:0px;text-align:center}}@media all and (min-width: 1024px){.two-cols{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;margin:35px 0px}}@media all and (min-width: 1226px){.wrapper{grid-template-rows:200px 1fr auto;grid-template-areas:"header header" "sidebar content" "footer footer"}.hdr-bottom{background-size:auto 100%}.logo{margin-top:35px;max-width:800px}.content-container{margin:0 20px}h1.main-title{float:right;padding:25px 0 0 0;font-size:1.1rem;line-height:150%;margin-top:0px;margin-right:110px;text-align:center;width:380px}.photo-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;margin:5px}.teachers-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:30px}.lesson-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:30px}}@media all and (min-width: 1600px){.wrapper{grid-template-columns:480px 2fr}.content{padding-right:1%}.sidebar ul{width:480px;height:740px}.piano-nav li a{padding:0px 20px;line-height:68px;font-size:17px;font-weight:700;height:68px;margin-bottom:6px}.piano-nav li:first-child{margin-top:3px}}@media all and (min-width: 1920px){.wrapper{grid-template-columns:1fr 480px 4fr 1fr;grid-template-rows:200px 1fr auto;grid-template-areas:"header header header header" ". sidebar content ." "footer footer footer footer"}header{grid-template-columns:1fr 6fr 1fr;grid-template-areas:". innerheader ."}.logo{margin-left:35px}h1.main-title{font-size:1.2rem;line-height:130%;margin-top:0px}.content{padding-right:0%}}.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;right:0;text-align:center;background-color:rgba(0,0,0,0.9);overflow-x:hidden;padding-top:5px;transition:0.5s}.sidenav a{padding:10px;margin:auto 30px;text-decoration:none;font-size:18px;color:#AAAAAA;display:block;text-align:left;border-bottom:1px solid #333;transition:0.3s}.sidenav a:hover,.sidenav a:active,.sidenav a:focus{color:#f1f1f1;background-color:#1B498F}.sidenav .closebtn{position:absolute;top:12px;right:-20px;font-size:36px;border:none}.sidenav .closebtn:hover{background-color:transparent;color:#cc0000}#main{transition:margin-right .5s;padding:0px}.mobile-sidebar-content{color:#eee}.mobile-sidebar-content aside{color:#ccc;font-size:.9rem}a.mobile-nav-btn{position:absolute;right:15px;top:10px;height:55px;width:55px;padding:7px;color:#fff;cursor:pointer}a.mobile-nav-btn:hover{color:#cc0000}figure.mobile-nav-logo{margin-left:20px;margin-right:60px}@media screen and (max-height: 450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}.nosupport{display:none}.no-cssgrid .nosupport{display:block;position:absolute;top:0px;left:0px;background:#cc0000;color:#fff;padding:10px;font-style:italic;height:80px;width:100%;text-align:center}.no-cssgrid body{padding-top:80px}.no-cssgrid header{height:200px}.no-cssgrid .content{width:100%;margin-left:5px}.no-cssgrid .content-container{width:100%}.no-cssgrid .home-bottom-gallery{height:320px;margin-bottom:25px;text-align:center}.no-cssgrid .hm-btm-gal-col1{float:none;width:300px;height:300px;margin:auto;text-align:center}.no-cssgrid .hm-btm-gal-col2{float:none;width:300px;height:300px;margin:auto;text-align:center}.no-cssgrid h1.main-title{width:100%;margin-right:0;text-align:center;color:#fff}.no-cssgrid .logo{margin-left:0px}.no-cssgrid footer{clear:both}@media screen and (min-width: 640px){.no-cssgrid .home-bottom-gallery{height:320px}.no-cssgrid .hm-btm-gal-col1{float:left;width:320px;height:300px}.no-cssgrid .hm-btm-gal-col2{float:left;width:280px;height:300px}}@media screen and (min-width: 801px){.no-cssgrid .sidebar{width:280px;float:left}.no-cssgrid .content{width:70%;margin-left:305px}.no-cssgrid .home-bottom-gallery{height:400px}.no-cssgrid .hm-btm-gal-col1{width:420px;height:380px}.no-cssgrid .hm-btm-gal-col2{width:380px;height:380px}}@media all and (min-width: 1024px){.no-cssgrid .home-bottom-gallery{height:400px}.no-cssgrid .hm-btm-gal-col1{width:420px;height:380px}.no-cssgrid .hm-btm-gal-col2{width:380px;height:380px}}@media all and (min-width: 1226px){.no-cssgrid .nosupport{height:40px}.no-cssgrid body{padding-top:40px}.no-cssgrid .sidebar{width:480px;float:left}.no-cssgrid .content{width:70%;margin-left:525px}.no-cssgrid .home-bottom-gallery{height:500px}.no-cssgrid .hm-btm-gal-col1{width:59%;height:480px}.no-cssgrid .hm-btm-gal-col2{width:38%;height:480px}}
/*# sourceMappingURL=styles.css.map */