@media screen and (max-width: 1920px) {
  .wrapper-sml {width: 85%; max-width: 1100px; margin: 0 auto;}

  .holiday-programs.inner-content .grid .details {padding: 30px;}
  .holiday-programs.inner-content .grid .details h4 {font-size: 18px;}
  .holiday-programs.inner-content .grid article h2 {font-size: 22px;}
  .holiday-programs.inner-content .grid article p {font-size: 18px;}
}
@media screen and (max-width: 1600px) {

  :root {
    --p: 18px;
    --p-small :16px;
  }

  .header-bottom .logo {width: 175px;}
  .header-bottom .logo img {height: 175px; width: 175px;}
  .header-bottom .logo::after {height: 180px; width: 180px;}

  .intro .diag-container article {max-width: 475px;}

  .campus .intro .diag-container { grid-template-columns: 1.5fr 1fr;}

}
@media screen and (max-width: 1500px) {

  .contact .inner-banner article a, .inner-banner .social p {font-size: 18px;}
  .contact .inner-banner .diag-container.dark-bg .content-wrapper { width: 55%;}
  .contact .inner-banner .form {width: 50%;}

}
@media screen and (max-width: 1400px) {

  .header-bottom .menu-left ul li a, .header-bottom .menu-right ul li a {padding: 40px 10px}

  .home-banner, .inner-banner {height: calc(100dvh - 149px);}
  .full-width.diag-container {height: calc(100dvh - 149px);}
  .contact .inner-banner {height: calc(100dvh - 183px);}
  .diag-container.dark-bg {height: calc(95dvh - 153px);}

  .intro .diag-container {grid-template-columns: 1fr 1fr;}

  .learn-more {width: 150px; height: 150px;}
  .learn-more::before {width: 15px;height: 15px;}
  .learn-more::after {width: 145px; height: 145px;}

}
@media screen and (max-width: 1300px) {

  :root {
    --p: 16px;
    --p-small :14px;
  }

  .header-top .menu-top-left img {height: 30px; margin-right: 15px;}
  .header-top .menu-top-left a, .header-top .menu-top-right a {font-size: 11px;}

  .header-bottom .logo {width: 150px;}
  .header-bottom .logo img {height: 150px; width: 150px;}
  .header-bottom .logo::after {height: 155px; width: 155px;}

  .intro .diag-container article {max-width: 420px; margin-left: 50px;}
  .intro .diag-container::after, .inner-banner.small::after, .training .inner-banner.small::after {height: 130px; width: 205px;}

  .campus .intro .diag-container article {max-width: 310px;}

  .inner-content .grid article {max-width: 75%;}
  .inner-content .grid article p {font-size: 16px;}
  .inner-content .grid article p strong {font-size: 20px;}

  .contact .inner-banner .form-wrapper {max-width: 80%;}

}
@media screen and (max-width: 1200px) {


  .header-bottom {padding: 15px 2.5%;}
  .header-bottom .menu-left ul, .header-bottom .menu-right ul {display: none;}
  .header-bottom .logo {z-index: 3;}

  .hamburger {display: flex;}


}
@media screen and (max-width: 1000px) {

  h3 {font-size: 50px; line-height: 1;}

  .button.orange {padding: 15px 25px;}

  .header-bottom .logo {width: 100px;}
  .header-bottom .logo img {height: 100px; width: 100px;}
  .header-bottom .logo::after {height: 105px; width: 105px;}

  .home-banner, .inner-banner {height: calc(100dvh - 123px);}
  .home-banner article {top: 30%;}
  .home-banner.loaded article {top: 25%;}
  .home-banner article h2 {max-width: 85vw; font-size: 40px;}

  .intro .diag-container, .campus .intro .diag-container {grid-template-columns: 1fr;}
  .intro .diag-container article {margin: 0 auto; max-width: 85%; padding: 60px 0 30px;}
  .intro .diag-container figure img {clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .intro .diag-container figure::after {left: 0px; top: 10px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}

  .coach-item, .coach.grid {grid-template-columns: 1fr;}
  .coach-item {margin-bottom: 30px;}
  .coach.grid {grid-gap: 30px;}

  .coach-item .tagline {margin-bottom: 20px;}
  .coach-item article h2 {font-size: 45px; margin-bottom: 30px;}
  .coach-item figure {height: 0; padding-bottom: 100%; order: 2;}

  .coach-small article h3 {font-size: 25px; margin-bottom: 20px;}

  .inner-content .grid article {max-width: 90%;}
  .inner-content .grid article p strong  {font-size: 18px;}

  .contact .inner-banner {height: auto;}
  .contact .inner-banner .diag-container.dark-bg {height: auto; flex-direction: column;}
  .contact .inner-banner .diag-container.dark-bg .orange-bg article {position: relative; top: auto; transform: none; margin: 60px 0; width: auto;}
  .contact .inner-banner article h1 { font-size: 60px; line-height: 45px; margin-bottom: 10px;}
  .contact .inner-banner article h2 {font-size: 20px; max-width: 420px; margin-bottom: 20px;}
  .contact .inner-banner .diag-container.dark-bg .content-wrapper {position: relative; width: 100%; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .contact .inner-banner .diag-container.dark-bg .content-wrapper::before {left: 0px; top: 0px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .contact .inner-banner .diag-container.dark-bg .content-wrapper .orange-bg {left: 0px; top: -10px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); height: 100%;}
  .contact .inner-banner .form {position: relative; width: 100%; margin: 60px 0;}
  .contact .inner-banner .form-wrapper {max-width: 100%;}

  .training-item h3 {font-size: 40px; margin: 10px 0 20px;}

}
@media screen and (max-width: 768px) {

  .content {margin: 60px 0;}

  .inner-banner.small {height: 25dvh;}
  .intro .diag-container::after, .inner-banner.small::after, .training .inner-banner.small::after {bottom: -50px; z-index: 3;height: 100px; width: 100px;}
  .inner-banner article h1 {font-size: 40px; margin-bottom: 20px;}

  .full-width.diag-container {height: calc(80dvh - 123px);}
  .full-width.diag-container > article {max-width: 85vw;}
  .full-width.diag-container > article h3 {margin-bottom: 10px;}

  .full-width.diag-container figure p {font-size: 12px; left: 15px; bottom: 15px;}
  .full-width.diag-container figure:last-child p {right: 15px;}
  .full-width.diag-container figure > span {top: 20px; left: 15px; font-size: 12px;}

  .learn-more {left: 10px; top: auto; bottom: 50px; transform: none; width: 105px; height: 105px;}
  .learn-more::after { width: 100px; height: 100px; }

  .tagline {line-height: 1.3;}

  .coaching .custom-navigation {margin-top: 30px;}
  .coachingSwiper {margin-top: 30px;}
  .coachingSwiper .swiper-slide article h4 {font-size: 30px;}

  .diag-container.dark-bg .content-wrapper {height: 50%; width: 100%; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .diag-container.dark-bg .content-wrapper::before {left: 0px; top: 0px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .diag-container.dark-bg .content-wrapper .orange-bg {left: 0px; top: -10px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .diag-container.dark-bg .orange-bg article { width: 70vw; margin: auto auto auto 25px; }
  .diag-container.dark-bg .orange-bg article .tagline {margin: 0 0 20px;}
  .diag-container.dark-bg .overflow {width: 100%;}
  .diag-container.dark-bg .overflow .custom-navigation {top: auto; right: auto; left: 20px; bottom: 20px;}
  .diag-container.dark-bg .overflow .swiper-slide {justify-content: flex-start; padding: 20px 20px 100px; text-align: left;}
  .diag-container.dark-bg .overflow .swiper-slide h4 {max-width: 50vw; font-size: 25px; transition: 0.2s; opacity: 0;}
  .diag-container.dark-bg .overflow .swiper-slide-active h4 {opacity: 1;}

  .coach-item article h2 {font-size: 35px;}

  .coach-small article h3 {font-size: 20px;}

  .inner-content .grid {grid-template-columns: 1fr; grid-gap: 30px;}
  .inner-content .grid figure {order: 1;}
  .inner-content .grid article { max-width: 100%; order: 2; }
  .inner-content .grid article p {margin-bottom: 10px;}

  .training-item {grid-template-columns: 1fr; margin-bottom: 60px;}
  .training-item article {padding: 20px 15px 0;}
  .training-item article .button { margin-top: 10px;}
  .training-item figure {clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);}
  .training-item h3 {font-size: 35px; margin: 10px 0 15px;}

  .holiday-programs.inner-content .grid {grid-template-columns: 1fr;}
  .holiday-programs.inner-content .grid article h2 { font-size: 18px; }
  .holiday-programs.inner-content .grid article p { font-size: 16px; }

  .footer-top {padding-top: 30px;}
  .footerSwiper h3 {font-size: 6vw;}
  .footer-middle ul {flex-wrap: wrap; gap: 15px;}
  .footer-bottom {margin-top: 30px;}
  .footer-bottom, .copyright {padding: 20px 0;}

  .copyright p, .copyright a {text-align: center; display: block;}
  .copyright a {margin-top: 5px;}

}
@media screen and (max-width: 375px) {

}
@media screen and (max-width: 320px) {

}