@charset "utf-8";

/* =========================
   FOUNDATION
   ========================= */
*,
*::before,
*::after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dt,dd,ol,ul,li,figure,hr,fieldset,form,input,button,label,legend,table,th,td,article,aside,footer,header,nav,section,video,main {margin:0;padding:0;border:0;}

ul,ol {list-style: none;}

html {scroll-behavior: smooth;}

img,video {max-width: 100%;height: auto;display: block;margin: 0 auto;}

body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6rem;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   FONTS / TYPOGRAPHY
   ========================= */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Roboto-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
}

h1,h2,h3,h4,h5 {padding: 10px 0;font-weight: 500;}

h1 {font-size: 3rem;line-height: 1.1;}
h1 .subtext {font-size: 2rem;line-height: 1.1;}
h2{font-size:2em;line-height:1.1;}
h3{font-size:1.5em;line-height:1.2;}
h4{font-size:1.2em;font-weight:400;}

q{font-style:italic;font-family:Times,serif;display:inline-flex;quotes:"“" "”";color:#2f2f2f;}

@media only screen and (min-width: 768px) {
  h1 {font-size: 4.5rem;}
  h1 .subtext {font-size: 2.5rem;}
  h2 {font-size: 2.5em;}
}

@media only screen and (min-width: 993px) {
  h1 {font-size: 6rem;}
  h1 .subtext {font-size: 3rem;}
  h2 {font-size: 3rem;}
  q {font-size: 1.3rem;line-height: 2rem;}
}

@media only screen and (min-width: 1400px) {
  h1 {font-size: 7rem;}
  h1 .subtext {font-size: 4rem;}
  h2 {font-size: 4em;}
  h3, .paragraph-bold {font-size: 2em;line-height: 1.3;}
}

cite {padding: 0 10px;font-weight: bold;font-style: italic;font-family: Times, serif;font-size: 1.3rem;}

strong {font-weight: 500;}

.paragraph {font-size: 1.2em;line-height: 1.5em;}
.paragraph-bold {font-size: 1.5em;line-height: 1.3em;}
.roboto-medium {font-weight: 500;}
.balance {text-wrap: balance;}
.mobile-break {display: none;}

@media (max-width: 600px) {
  .mobile-break {display: inline;}
}

/* =========================
   LINKS / INLINE GRAPHICS
   ========================= */

 a {
  text-decoration: none;color: inherit;font-style: normal;}

button {background-color: transparent;color: whitesmoke;border: none;transition: 0.3s;cursor: pointer;}
button:hover {color: #d55140;}
button:hover svg {fill: #d55140;}

a[href^="tel:"],
a[href^="mailto:"] {font-weight: 400;}

.paragraph a,
.paragraph a[href^="tel:"],
.paragraph a[href^="mailto:"] {font-weight: 400;}

.icon,
.icon-play {vertical-align: middle;fill: currentColor;transition: fill 0.3s ease;}
.icon-play {width: 20px;height: 20px;}

.img-align-center {margin: 0;}

/* =========================
   BRAND / COLOR UTILITIES
   ========================= */

.artGate {font-size: 1.2em;}
.artGate span,.orange-text,a.text-link {color: #d55140;}

.black {background-color: #000;color: #fff;}
.stage-black {background-color: #070209;color: #fff;}
.offwhite {background-color: #f5f5f5;}
.light-grey { background-color: #d7d7d7;color: #2f2f2f;}
.dark-grey { background-color: #000008;color: #fff;}
.background-orange {background-color: #d55140;}

.white-text {color: #fff;}

.text-shadow {text-shadow: 1px 1px 0 #444;}
.svg-shadow {filter: drop-shadow(1px 1px 0 #222);}
.shadow {-webkit-filter: drop-shadow(5px 5px 10px #888);filter: drop-shadow(5px 5px 5px #888);}

.border-top {border-top: 1px solid #707070;}
.border-top-orange {border-top: 1px solid #d55140;}
.border-round {padding: 0.25em 0.55em;border-radius: 50%; border: 2px solid #d55140;line-height: 2em;}
.outline-thin {outline: 1px solid #111111;}

.card-2 {box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;}
.card-8 {box-shadow: 0 45px 18px -30px rgba(0, 0, 0, 0.2);}

/* =========================
   TEXT LINKS / CTA PATTERNS
   ========================= */

.center {text-align: center;}

a.register {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 10px 16px;
  margin: 10px 0;
  background-color: #d55140;
  color: whitesmoke;
  text-align: center;
  transition: 0.6s;
  border-radius: 2px;
}

a.register:hover {
  color: #d55140;
  background-color: whitesmoke;
  outline: 1px solid #d55140;
}

a.text-link {
  font-weight: 500;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

a.text-link:hover {text-decoration: underline;}

a.text-link .arrow {
  display: inline-block;
  margin-left: 0.3em;
  transform: translateY(1px);
  text-decoration: none;
}

/* =========================
   WIDTH / SPACING UTILITIES
   ========================= */

.content-577 {max-width: 577px;margin: 0 auto;}
.content-800 {max-width: 800px;margin: 0 auto;}
.content-1200 {max-width: 1200px;margin: 0 auto;}
.content-image {max-width: 600px;margin: 0 auto;}

@media only screen and (min-width: 1200px) {
  .content-image {max-width: 980px;}
}

.padding {padding: 0 1% !important;}
.padding-top {padding-top: 60px;}
.padding-bottom {padding-bottom: 60px;}
.padding-sides {padding: 0 20px;}
.padding-left {padding-left: 20px;}
.margin-20 {margin: 20px 0;}
.margin-50 {margin: 50px 0;}
.margin-bottom {margin: 0 0 40px 0;}
.gap-10 {gap: 10px;}
.gap-40 {gap: 40px;}
.gap-60 {gap: 60px;}

.full-height {height: 100vh;}

/* =========================
   LAYOUT UTILITIES
   ========================= */

.row,.row-reverse {display: flex;flex-direction: column;}
.flex-row {display: flex;}
.direction-row {flex-direction: row;}
.direction-column {flex-direction: column;}
.half,.third,.twothirds {display: flex;width: 100%;}
.vertical-align {align-items: center;}
.horizontal-center {justify-content: center;}
.justify-right {justify-content: flex-end;}
.space-between {justify-content: space-between;}
.space-arround {justify-content: space-around;}
.relative {position: relative;}
.z-index {position: relative;z-index: 1;}
.overflow {overflow: hidden;}

@media only screen and (min-width: 993px) {
  .row {flex-direction: row;}
  .row-reverse {flex-direction: row-reverse;}
  .half {width: 50%;}
  .third {width: 33.3%;}
  .twothirds {width: 66.6%;}
}

/* =========================
   MOTION / REVEAL HELPERS
   ========================= */

.from-below {opacity: 0;transform: translateY(100px);transition: opacity 1s ease, transform 1s ease;}
.from-left,.from-right {opacity: 0;transition: opacity 1s ease, transform 1s ease;}
.from-left {transform: translateX(-100px);}
.from-right {transform: translateX(100px);}

.delay-1,.delay-2 {transition-delay: 0s;}

@media only screen and (min-width: 993px) {
  .delay-1 {transition-delay: 0.3s;}
  .delay-2 {transition-delay: 0.5s;}
}

/* =========================
   GRID / IMAGE UTILITIES
   ========================= */

.grid-container {display: grid;grid-template-columns: 100%;grid-template-rows: auto;gap: 10px;padding: 10px;}

@media only screen and (min-width: 993px) {
  .grid-container {grid-template-columns: 1fr 1fr;grid-template-rows: auto;padding: 10px;}
}

.bg-image {position: relative;width: 100%;overflow: hidden;}
.bg-image img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.bg-image picture {display: block;width: 100%;height: 100%;}
.bg-image-content { position: absolute;inset: 0;overflow: hidden;}
.theory-icons {height: 180px;}
.img-scale {width: 100%;height: auto;transition: transform 0.6s ease;}
.img-scale:hover {transform: scale(1.02);}
.play-video {z-index: 10;margin: 10px 20px;padding: 20px;background: rgba(0, 0, 0, 0.3);border: 2px solid #d55140;border-radius: 50%; transition: 0.5s;cursor: pointer;}

/* =========================
   BACKGROUND IMAGE PATTERNS
   ========================= */

.bg-image.beginner-advanced {height: 490px;}
.bg-image.beginner-advanced img {object-position: 10% 100%;}
.bg-image.styles-genres {height: 490px;}
.bg-image.styles-genres img {object-position: 90% 80%;}
.bg-image.open-piano {height: 850px;justify-content: flex-end;align-items: center;}
.bg-image.open-piano img {object-position: right center;}
.bg-image.teacherbio {height: 480px;}
.bg-image.teacherbio img {object-position: 40% 50%;}
.bg-image.talent {display: flex;flex-direction: column;height: 100%;background: #001b45;justify-content:center;}
.bg-image.talent img {height:400px;object-position: 18% center}
.bg-image.talent .talent-content {position: relative;inset: auto;overflow: visible;z-index:1;}
.bg-image.our-edge {display: flex;flex-direction: column;height: 100%;background: #070209;justify-content:center;}
.bg-image.our-edge img {height:350px;object-position: 80% center}
.bg-image.our-edge .our-edge-content {position: relative;inset: auto;overflow: visible;z-index:1;}
.bg-image.celebrate {height: 350px;max-width: 617px;margin: 0 auto;}
.bg-image.thankyou {height:100px;}


@media only screen and (min-width: 993px) {
  .bg-image.beginner-advanced,
  .bg-image.styles-genres {height: 615px;}
  .bg-image.teacherbio {height: 553px;}
  .bg-image.our-edge {height: 760px;background: none;}
  .bg-image.our-edge img {height: 100%;}
  .bg-image.our-edge .our-edge-content {position: absolute;left:8%;}	
  .bg-image.talent img {height: 100%;}
  .bg-image.talent {height: 760px;background: none;}
  .bg-image.talent .talent-content {position: absolute;right:10%;}
}

@media only screen and (min-width: 1400px) {
  .bg-image.celebrate {height: 500px;max-width: 882px;}
}

/* =========================
   SITE NAV / OVERLAY / HEADER
   ========================= */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: 0.8s;
}

.overlay-content {margin: 50px 40px;text-align: left;}
.overlay-content a {
  display: block;
  padding: 20px;
  font-size: 1.5em;
  color: #818181;
  transition: 0.3s;
  border-bottom: 1px solid #818181;
}

.overlay-content a:hover,
.overlay-content a:focus {color: #f1f1f1;}

.no-scroll {overflow: hidden;height: 100%;}

.flex-nav-container {display: flex; width: 100%;height: 100px;align-items: center;}

.display-topmiddle {position: absolute;top: 0;left: 0;width: 100%;text-align: center;}

.flex-navlogo {display: flex;flex-grow: 6;align-items: center;justify-content: center;}
.logo {width: 140px;height: 70px;}

.flex-navbar {display: none;}
.flex-navbar a {padding: 20px 40px;color: #fff;font-size: 1.3em;text-align: center;}
.flex-navbar a:hover { border-bottom: 4px solid #fff;}
.flex-topnav-icon {position: absolute;top: 40px;right: 20px;font-weight: 400;color: #fff;font-size:1.3rem;}
.flex-topnav-icon:hover {cursor: pointer;color:#fff;}

@media only screen and (min-width: 993px) {
  .flex-navbar {display: block;flex-grow: 2;position: relative;top: 16px;}
  .flex-topnav-icon {display: none;}
  .logo {width: 190px;height: 95px;}
}

/* =========================
   HERO SECTIONS
   ========================= */

.hero-section {position: relative;overflow: hidden;height: 550px;}

.hero-img-wrapper {position: absolute;inset: 0;z-index: -1;overflow: hidden;}
.hero-img-wrapper.has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none; /* don’t block clicks */
  z-index: 1;
}

.hero-img {width: 100%;height: 100%;object-fit: cover;object-position: 25% 50%; display: block;}
.hero-content {position: absolute;left: 0;bottom: 20px;width: 100%;color: #fff;text-align: center;}
.hero-video {position: relative;width: 100%;height: 70vh;background-color: rgba(0, 0, 0, 0.3);overflow: hidden;}
.video-background {position: absolute;top: 0;left: 0;width: 100%; height: 100%;object-fit: cover;object-position: 35% 50%; z-index: -5;}

#hero-video-button {
  display: inline-flex;
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 5;
  padding: 8px;
  border: 1px solid #d55140;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}

#hero-video-button .icon {width: 12px;height: 12px;}

@media only screen and (min-width: 768px) {
  .hero-content {bottom: 10%;}
}

@media only screen and (min-width: 993px) {
  .hero-section {height: 80vh;}
  .hero-video { height: 100vh;}
}

.kenburns-bottom-left {animation: kenburns-bottom-left 5s ease-in-out 0.5s reverse both;will-change: transform;}

@keyframes kenburns-bottom-left {
  0% {transform: scale(1) translate(0, 0);transform-origin: bottom left;}
  100% {transform: scale(1.25) translate(-20px, 15px);transform-origin: bottom left;}
}

.kenburns-top-left {animation: kenburns-top-left 5s ease-in-out reverse both;animation-delay: 0.5s;will-change: transform;}

@keyframes kenburns-top-left {
  0% {transform: scale(1) translate(0, 0);transform-origin: 16% 16%;}
  100% {transform: scale(1.25) translate(-20px, -15px);transform-origin: top left;}
}

/* =========================
   TILE SCROLLER / CARDS
   ========================= */

.scrolling-wrapper {
  display: flex;
  margin: 0 auto;
  height: 500px;
  align-items: flex-end;
  justify-content: space-between;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrolling-wrapper::-webkit-scrollbar {display: none;}

.tile {
  position: relative;
  width: 300px;
  min-height: 400px;
  padding: 30px 20px;
  margin: 0 15px;
  background-color: #1d1d1d;
  border-top: 1px solid #d55140;
  scroll-snap-align: center;
}

/* =========================
   TESTIMONIAL / QUOTES
   ========================= */

.rate {display: inline-block;margin: 15px 0;padding: 5px;fill: #d55140;}

.testimonial-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  border: 5px solid #d55140;
  border-radius: 50%;
}

.testimonial-avatar img {border-radius: 50%;}

q.quotes::before,
q.quotes::after {content: open-quote / close-quote;display: inline-block;font-size: 4em;line-height: 0.1;font-family: Georgia, serif;color: #d55140;}
q.quotes::before {align-self: baseline;}
q.quotes::after {align-self: flex-end;}

/* =========================
   MODAL / OVERLAY COMPONENTS
   ========================= */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 95;
  padding-top: 0;
  overflow: auto;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 1);
}

.modal-content {
  display: block;
  position: relative;
  width: 70%;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 1s;
  animation-name: zoom;
  animation-duration: 1s;
}

.closeModal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: normal;
  transition: 0.8s;
}

.closeModal:hover,
.closeModal:focus {color: #bbb;cursor: pointer;}

@keyframes zoom {
  from {transform: scale(0);}
  to {transform: scale(1);}
}

@media only screen and (max-width: 768px) {
  .modal-content {width: 99%;}
}

/* =========================
   CONTACT / FORM COMPONENTS
   ========================= */

.ag-badge-embossed {width: 240px;height: 240px;filter: drop-shadow(2px 2px 5px #111);}

@media only screen and (min-width: 993px) {
  .ag-badge-embossed {width: 330px;height: 330px;}
}

@media only screen and (min-width: 1400px) {
  .ag-badge-embossed {width: 500px;height: 500px;}
}

.contact {padding: 10px 40px;list-style-type: disc;list-style-position: inside;font-size: inherit;}

.form-container {padding: 10px; margin: 10px 0;}

input[type="text"],
input[type="email"],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  font-size: 16px;
  font-family: Arial;
  resize: none;
}

input[type="submit"] {
  padding: 14px 50px;
  margin: 8px 0;
  background-color: #d55140;
  color: whitesmoke;
  font-size: 1em;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.6s;
}

.error {color: #f00;}

/* =========================
   TO-TOP BUTTON / FOOTER
   ========================= */

#toTopBtn {
  display: none;
  position: fixed;
  right: 1.5rem;
  bottom: 2rem;
  z-index: 90;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #d55140;
  background: rgba(240, 240, 240, 0.4);
  border: none;
  border-radius: 50%;
  transition: 1s;
  cursor: pointer;
}

#toTopBtn .icon { width: 14px;height: 14px;}
footer {font-size: 0.8em;}
#copyright {padding: 20px 0;}