@font-face {
  font-family: minions-pro;
  src: url('/assets/dist/fonts/MinionPro-Regular.otf');
}

@font-face {
  font-family: minions-pro-bold;
  src: url('/assets/dist/fonts/MinionPro-BoldCn.otf');
}

@font-face {
  font-family: Knockout-48;
  src: url('/assets/dist/fonts/Knockout-48.otf');
}

@font-face{font-family:minion-pro;src:url(https://use.typekit.net/af/ea8d85/0000000000000000000151d1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/ea8d85/0000000000000000000151d1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/ea8d85/0000000000000000000151d1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3) format("opentype");font-weight:700;font-style:normal;font-stretch:normal;font-display:auto;}@font-face{font-family:minion-pro;src:url(https://use.typekit.net/af/5033af/0000000000000000000151d3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/5033af/0000000000000000000151d3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/5033af/0000000000000000000151d3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("opentype");font-weight:400;font-style:italic;font-stretch:normal;font-display:auto;}@font-face{font-family:minion-pro;src:url(https://use.typekit.net/af/1286c7/0000000000000000000151d6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/1286c7/0000000000000000000151d6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/1286c7/0000000000000000000151d6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");font-weight:400;font-style:normal;font-stretch:normal;font-display:auto;}
/* Fonts */
:root {
  --default-font: Knockout-48;
  --heading-font: Knockout-48;
  --content-font: minion-pro;
}

/* Banner */
.gallery_header img{
	height:250px;object-fit:cover;width:100%;object-position: 50% 80%;
}

.gallery_header .gallery_text{
	top:50%;left: 50%;transform: translate(-50%,-50%);font-size: 2rem;text-align: center;width: 100%;letter-spacing:2px;color:white;text-shadow: 0px 0px 10px black;font-family: minion-pro,serif;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
	.gallery_header img{
	height:450px;
}

.gallery_header .gallery_text{
	top:50%;left: 50%;transform: translate(-50%,-50%);font-size: 4rem;letter-spacing:2px;color:white;text-shadow: 0px 0px 10px black;font-family: minion-pro,serif;
}
}

/* Body */
body{
font-family: Knockout\ 48 A,Knockout\ 48 B, var(--default-font);
color: #000;
}
body.listen header.primary .left-lyre {
		background-image: url(/assets/image/listen-segno.svg)
		}

/* Header */
header{
		padding:2rem 2rem 0rem;
		position:sticky;
		top:0;
		background: #fff;
		z-index: 1000;
		box-shadow: rgb(207 207 207) 0px 0px 10px 1px;
		}
header.primary .left-lyre {
        height: 136px;
        width: 107px;
        background: #fff;
        border-right: 1px solid rgba(0,0,0,.05);
        opacity: 0;
        background-image: url(/assets/image/ss-lyre2.svg);
        background-position: center 70px;
        background-repeat: no-repeat;
        background-size: 38%;
        position: absolute;
        bottom: 0;
        left: -107px;
        z-index: 240;
        transition: all .2s ease-in-out
    	}

header .brand-header{
	height: 60px;
}

header .lang1{
	right: 8vw;
	font-family: var(--content-font);
	bottom: 0%;
}
header .lang2{
	right: 12vw;
	font-family: var(--content-font);
	bottom: 0%;
}

header .a_logo_img{
	position: absolute; display: inline; text-align: center; top: 0%; left: 0%; transform: translate(-15%, -25%);width: auto;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	header .a_logo_img{
	top: 0%; left: 0%; transform: translate(0%, -27%);
} 
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
header .a_logo_img{
	top: 50%; left: 50%; transform: translate(-50%, -50%)
} 
 }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

		 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
		 }

/* Mission */
.mission-bigtitle{

	       letter-spacing: 6px;
        font-size: 3rem;
font-family: var(--default-font);
}
.mission-content{
	letter-spacing: 1px;
    text-rendering: optimizeSpeed;
    font-variant-ligatures: no-common-ligatures;
    color: #000;
    line-height: 28px;
    margin: 0 auto 15px;
font-family: var(--content-font);
}

/* Home */
.main-banner{
	height: 450px;object-fit: cover;
}
.main-resource{
	width:100%;height:340px;background-size:cover;filter: brightness(0.7);
}
.big-title{
		top:40%;left:0%;
		transform: translate(-50%,-50%);
		font-size:2.5rem;
		letter-spacing: 6px;
		color: white;
		text-shadow: 0px 0px 20px black;
		width:100%;
		text-align: center;
		line-height: 1;
		}

@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  
	.main-banner{
	height: auto;
}
.big-title{
	font-size: 4rem;
}
.main-resource{
	width:340px;height:340px;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
}

/* Custom Program */
.custom_program h1{
	letter-spacing: 2px;
	font-size: 3rem;
}

.custom_program p{
	letter-spacing: 1.5px;
	font-size: 1rem;
	font-family: var(--content-font);
	text-align: center;
}

/* Excellence Award */
.excellence_award h1{
	letter-spacing: 2px;
	font-size: 3rem;
}

.excellence_award p{
	letter-spacing: 1px;
	font-size: 1rem;
	font-family: var(--content-font);
	text-align: center;
}
.excellence_header img{
	object-fit:contain;width:100%;object-position: 50% 0%;
}
.excellence_award a{
	letter-spacing: 2px;
	font-size: .8rem;
	text-transform: uppercase;
	width: 250px;
	font-family: var(--content-font);
	font-weight: bold;
	font-style: normal;
}
.excellence_award h1{
	font-size: calc(36px + 0.390625vw)!important;
}
.portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.portfolio-filters li {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 10px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
}
.isotope-item h5{
	letter-spacing: 1.5px;
	font-size: 2rem;
}
.isotope-item p{
	letter-spacing: 0px;
	font-size: 1.3rem;
	font-family: none;
}
.portfolio-filters li:hover,
.portfolio-filters li.filter-active {
  color: #149ddd;
}
.excellence_award h3{
	letter-spacing:3px;
    text-transform: uppercase;
    line-height: 4rem;
    font-weight: 500;
}
/* Masterclass detail */
.masterclass_detail h1{
	letter-spacing: 2px;
	font-size: 3rem;
	color: #a90000;
}

.masterclass_detail .masterclass_topic{
	letter-spacing: 0px;
	font-size: 1.4rem;
	font-family: auto;
}

.masterclass_detail .masterclass_schedule{
	letter-spacing: 0px;
	font-size: 1.4rem;
	font-family: system-ui;
	font-weight: bold;
}

.masterclass_detail .masterclass_price{
	letter-spacing: 1px;
	font-size: 1rem;
	font-family: sans-serif;
	font-weight: 500;
}

.masterclass_detail .masterclass_img{
	max-width: 360px;
	float: left;
	margin: 0px 2em 0em 0;
}

.masterclass_detail h6{
	letter-spacing: 1px;
	font-size: 1.2rem;
	font-weight: bold;
	font-family: serif;
}


.masterclass_detail li{
	font-size: 1rem;
	font-family: sans-serif;
	text-align: left;
}

.masterclass_detail p{
	letter-spacing: 1px;
	font-size: 1rem;
	font-family: sans-serif;
	text-align: left;
}

/* Concert */
.concert_detail .concert_topic{
	letter-spacing: 1.5px;
	font-size: 1.5rem;
	font-family: var(--content-font);
}
@media (min-width: 576px) {
}

/* Upcoming Concerts */

.upcoming_concert h2:after{
content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(88deg, #c5c5c5a6, transparent);
    left: 0;
    bottom: 0;
}
.upcoming_concert h2{
 position: relative;
font-style: normal;
    font-weight: bold;
    color: firebrick;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 2px;
    border: none;
     font-family: var(--content-font);
}
.upcoming_concert li{
 font-size: 1.5rem;
 font-style: normal;
 letter-spacing: .8px;
     line-height: 25px;
 font-family: var(--content-font);
 list-style: square;
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
}

/* Nagivation Bar */
		.logo_img{
				display: inline-block;
				width: 90%;
			}
			.nav-link:hover{
				color:#000000;
			}
			.nav-link{
				font-size: 1.2rem;
				letter-spacing:2px;
				text-transform:uppercase;
			}
			.nav-active:hover{
				color:#002b5e;
			}
			.link-active{
				color:#000;
				font-weight:400;
				border-bottom:2px solid #000;
				
			}
			.link-menu{
				color:#919191;
				font-weight:500;
			}
			.dropdown-item{
				text-transform: uppercase;
				letter-spacing: 1px;
			}

/* Navigation */
			#sidebarMenu>li{
display:inline-block;
padding: 10px 20px;
}
			#sidebarMenu>a{
display:inline-block;
}

.collapsing {

transition:opacity 0.3s linear; 
-webkit-transition:opacity 0.3s linear; 
-moz-transition:opacity 0.3s linear; 
-o-transition:opacity 0.3s linear;
}

.navbar-collapse.collapse.show{
opacity:1.0;
transition:opacity 0.3s linear; 
-webkit-transition:opacity 0.3s linear; 
-moz-transition:opacity 0.3s linear; 
-o-transition:opacity 0.3s linear;
}

.navbar-collapse.collapse{

transition:opacity 0.3s linear; 
-webkit-transition:opacity 0.3s linear; 
-moz-transition:opacity 0.3s linear; 
-o-transition:opacity 0.3s linear;
}
.show>body{
	overflow: hidden;
}
.navbar-collapse {
    opacity: 0;
width: 100vw;
height: 100vh!important;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
max-height: none;
font-weight: 400;
line-height: 25px;
font-size: 20px;
overflow: auto;
position: fixed;
background: white;
z-index: 999;
left: 0;
top: 0;
}

.steinway-logo{
width: 90%;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
	.steinway-logo{
height: 60px;
width: 100%;
}
.logo_img{
width: 100%;
}
}
/* ============ desktop view ============ */
		@media all and (min-width: 992px) {
		.dropdown-menu li{
			position: relative;
			font-size: 1rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
		}
		.dropdown-menu .submenu{
			display: none;
			position: absolute;
			left:100%; top:-10px;
			font-size: 1rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
		}
		.dropdown-menu .submenu-left{
			right:100%; left:auto;
		}
		.dropdown-menu > li:hover{ background-color: #f1f1f1 }
		.dropdown-menu > li:hover > .submenu{
			display: block;
		}
		}
		/* ============ desktop view .end// ============ */