:root {
	--yellow: #F9CD00;
	--gray: #191919;
	--white: #F2EFE8;
  }


  .mobile-show{
	display: none;
  }

  html, body {
	margin: 0;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	/* overflow-scrolling: touch; */
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	
  }

  
  .panel {
	width: 100%;
	height: 100vh;
	display:flex;
	/* justify-content: center;
	align-items: center; 
	 text-align: center;  */
	/* font-weight: 600; */
	font-size: 1.5em;
	
	color: var(--white);
	position: relative;
	box-sizing: border-box;
	/* padding: 10px; */
  }
  
  .display-block {
	display: block;
  }


  body {
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: none;
	height: 100vh;
  }
  
   
  .panel h1 {
	font-size: 3em;
	color: var(--gray);
	font-family: "EB Garamond", serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	margin: 0 auto;
  }

  .panel h2 {
	white-space: nowrap;
	font-size: 3em;
	font-weight: 900;
	/* margin: 0 auto; */

  }

  .panel h3 {
	white-space: nowrap;
	font-size: 1.75em;
	font-weight: 900;
	/* margin: 0 auto; */

  }

  .panel h4 {
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	white-space: nowrap;
	font-size: 1.75em;
	/* margin: 0 auto; */

  }

  .container {
	overscroll-behavior: none;
	width: 500vw;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
  }

  .container4 {
	overscroll-behavior: none;
	width: 400vw;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
  }

  .container2 {
	overscroll-behavior: none;
	width: 100vw;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
  }
  .text-yellow{
	color: var(--yellow) !important;
  }

  .text-white{
	color: var(--white)!important;
  }

  .text-gray{
	color: var(--gray)!important;
  }

  .big-text{
	font-size: 5em!important;
  }

  .text-serif{
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
  }

  .position-absolute{
	position: absolute;

  }


  .menu{
	font-size: 0.8em;
	white-space: nowrap;
	font-weight:500;

  }

  .panel a {
	/* font-size: 20px; */
	text-decoration: none;
	border-bottom: 3px solid var(--yellow);
	font-weight:500;
	/* padding-bottom: 5px */

  }

  .menu a {
	/* font-size: 20px; */
	text-decoration: none;
	border-bottom: none;
	color: var(--white);

	/* padding-bottom: 5px */

  }

  .a-dark {

	border-bottom: 3px solid var(--gray)!important;
	font-weight:500;
	/* padding-bottom: 5px */

  }

  .linktriangle {
	position: relative;
	transform: translateX(10px)rotate(180deg) scale(0.5);
  }

  .playtriangle {
	width: 0;
	height: 0;
	border-top: 2.5px solid transparent;
	border-right: 5px solid var(--gray);
	border-bottom: 2.5px solid transparent;
	position: relative;
	transform: translateX(2px) rotate(180deg) ;
  }

  .display-grid {display: grid;}

  .flexbox {
	display: flex;
  }

  .flexbox-space-between {
	display: flex;
	justify-content: space-between;
  }

  .grid-partners {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	width: 100% !important;
  }

  .grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	width: 100% !important;
	gap: 15px;
  }

  .grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 1fr);
	width: 100% !important;
	gap: 15px;
  }
  
  .grid-3-GL {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(6, 1fr);
	width: 100% !important;
	gap: 20px;
  }
  .item p{
	font-size: 14px;
	margin: 10px auto 10px auto;
  }

  .item ul{
	font-size: 14px;
	margin: 10px auto 10px auto;
	/* margin-block: 0px; */
	text-indent: 0;
	padding-left: 1em;	
 }

 .item li{
	font-size: 14px;
	margin: 10px auto 10px auto;
	/* margin-block: 0px; */
	text-indent: 0;
	/* padding-left: 1em;	 */
 }

  button {
	display: inline-block;
	outline: none;
	border: none;
	background: none;
	color: var(--gray);
	text-decoration: none;
	padding: 1px 0px;
	/* margin-bottom: 0px; */
	font-size: 3.5px;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
	text-transform: uppercase;
	cursor: pointer;
	/* line-height: 18px; */
	border-bottom: 1px solid var(--gray);
}


  
  


  



/* SPACING PRESETS translateX(400px) translateY(-30px)   */
  .mx-20 {
    margin-right: 10rem !important;
    margin-left: 10rem !important;
  }

  .ml-10 {
    margin-left: 10rem !important;
  }

  .text-box{
	padding-top: 1rem !important;
	width: 60%;
	line-height: 1.5 !important;
	font-size: 20px;
  }

  .text-box-80{
	padding-top: 1rem !important;
	width: 80%;
	line-height: 1.5 !important;
	font-size: 20px;
  }

  .text-box-100{
	padding-top: 1rem !important;
	width: 100%;
	line-height: 1.5 !important;
	font-size: 20px;
  }


  .my-0{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
  }

  .padding-top{
	padding-top: 2rem !important;
  }

  .padding-top-5{
	padding-top: 5rem !important;
  }

  .padding-top-10{
	padding-top: 10rem !important;
  }

  .padding-bottom-10{
	padding-bottom: 10rem !important;
  }

  .padding-bottom-5{
	padding-bottom: 5rem !important;
  }

  .margin-bottom-5{
	margin-bottom: 5rem !important;
  }
  .mx-1{
	margin-left: 1rem !important;
	margin-right: 1rem !important;
  }
  .mx-2{
	margin-left: 1rem !important;
	margin-right: 1rem !important;
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
  }

  .mx-3{
	margin-left: 3rem !important;
	margin-right: 3rem !important;
  }

   .center{ 
    justify-content: center !important;
	align-items: center !important; 
	}

	.center-horizontal{ 
		/* justify-content: center !important; */
		align-items: center !important; 
		}

	.text-center{
		text-align: center;
	}





/* BACKGROUND & COLOURS */

  .gray {
	background-color: #191919;
	}
  .blue {
	background-color: #2c7ad2;
	}
  .red {
	background-color: #c82736;
	}
  
  .white {
	background-color: #F2EFE8;
	}
  .yellow {
	background-color: #F9CD00;
	}

  .Bg_Orch1{
	background-image: url("../assets/BG_Orchesta_1.jpg");
	background-position: center;
	background-size: cover;

  }	

  .Bg_Orch2{
	background-image: url("../assets/BG_2.jpg");
	background-position: center;
	background-size: cover;

  }	

  .Bg_Orch3{
	background-image: url("../assets/BG_3.jpg");
	background-position: center;
	background-size: cover;

  }	
  .Bg_Orch4{
	background-image: url("../assets/BG_4.jpg");
	background-position: center;
	background-size: cover;

  }	
  .image-card-josem{
	background-image: url(../assets/img_josem.jpg); background-position: center; background-size: cover; transform: scale(3)  
  }
  
  .image-card-bass{
	background-image: url(../assets/img_bass.jpg); background-position: center; background-size: cover; transform: scale(3)  
  }

  .image-card-concert{
	background-image: url(../assets/Asset\ 1-concert.png); background-position: center; background-size: cover; transform: scale(3)  
  }




/* NAVIGATION MENU  */



#NavBar{
	height: 100vh;
	width: 100px;
	position: fixed;
	z-index: 1;
  }

  #hamburger{
	position: fixed;
	z-index: 20;
	margin: 20px;
	left: 80vw;
	width: 65px;
	height: 65px;

  }

  #hamburgerRect{
	position: absolute;
	z-index: 20;
	left: 85px;
	height: 65px;
	width: 15px;

  }

  .menu-toggle{
	background: transparent;
	border: none;
	cursor: pointer;

  }
 
  .hamburgerToggle path{
	fill: none;
	stroke: var(--gray);
	stroke-linecap:square;
  }

  /* .header-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
		
   } */

  .fullpage-menu{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height:100vh;
	z-index: 1;
	display: none;

  }

  .fullpage-menu-inner{
	display: flex;
	align-items: center;
	height: 100%;
	padding: 100px 60px;
	z-index: 1;

  }

  .menu-bg{
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;

  }

  .menu-bg span{
	height: 33.334%;
	width: 100%;
	background: var(--white);
	display: block;
	z-index: 1;
  }

  nav{
	position: relative;
	z-index: 10;

  }

  nav ul{
	list-style-type: none;

  }

  nav li{
	overflow: hidden;
	transition:  transform 300ms ease-in-out 0s;
  }

  nav li + li{
	margin-top: 20px;
  }

  nav li a{
	font-size: 5em;
	color: var(--gray);
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	display: inline-block;
	line-height: 1;
	transition: color 0.3s; 

  }

  nav li:hover {
	transform: translateX(100px);	
  }

  nav li a:hover{
	color: var(--yellow);

  }

  .logo{
	position: fixed;
	z-index: 20;
	margin: 10px;
	/* left: 10px; */
	width: 65px;
	height: 65px;
	background-image: url("../assets/logo_ofl.png");
	background-position: center;
	background-size: cover;

  }










  /* GEOMETRIC SHAPES */

  .circle {
	width: 75px;
	height: 75px;
  	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
  }

  .whitetriangle {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #F2EFE8;
	border-bottom: 25px solid transparent;
  }

  .yellowtriangle {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #F9CD00;
	border-bottom: 25px solid transparent;
  }

  .graytriangle {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid var(--gray);
	border-bottom: 25px solid transparent;
  }

  .rectangle {
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
  }

  #orquestaBar{
	height: 100vh;
	width: 12vw;
	position: absolute;
	left: 100px;
	z-index: 1;
	align-items: flex-end;
	justify-content: left;
	text-align: left;
	/* padding: ; */
  }




  

  .image-card {

	transform: translate(-200px, 0px) scale(3) ;
	
  }

  .circle-card {
	position: relative;
	transform: translate(-100px, -80px) scale(3.5) ;
	z-index: -1;
	
  }

  .concert-showcase{
	background-image: url(../assets/Concierto-showcase.jpg);
	min-width: 70vw;
	width: 100%;
	height: 280px; 
	background-position: center; 
	background-size:cover;
	border-radius: 20px;

	
  }

  .lookdown{
	transform: scale(1.5,3) rotate(270deg);

  }



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

	.fullpage-menu-inner{
		padding: 70px 30px;
	}
	
	nav ul{
		padding-inline-start: 20px;
		transform: translateY(-100px);
		text-align: center;
	}

	nav li a{
		font-size: 3em;
	}

	.grid-3-GL {
		/* display: grid; */
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, 1fr);
		/* width: 100% !important;
		gap: 20px; */
	  }
}

/* Responsive Design - Adjustments for Mobile Devices */
@media (max-width: 768px) {
    /* Adjust general font sizes */
   
	.mobile-hide{
		display: none;
	}

	.mobile-show{
		display: block;
	  }

	.mobile-show a {
		text-decoration: none;
		border-bottom: 3px solid var(--yellow);
	}  
	
	body {
        font-size: 14px;
    }

    .panel {
        font-size: 1.2em;
        padding: 15px;
    }

	.big-text{
		font-size: 4em!important;
	  }

	.text-box{
		padding-top: 1rem !important;
		/* padding-left: 1rem !important;
		padding-right: 1rem !important; */
		width: 100%;
		line-height: 1.5 !important;
		font-size: 16px;
		text-align: center;

	  }
	  
	  .flexbox{
		/* flex-direction: column; */
		justify-content: center;
	  }

	  .linktriangle {
		position: relative;
		transform: translateX(-15px)rotate(180deg) scale(0.2);
	  }

	.Bg_Orch1{
		background-image: url("../assets/BG_Orchesta_1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size:auto;
	
	  }
	  
	  .Bg_Orch2{
		background-image: url("../assets/BG_2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size:auto;
	
	  }
	  
	  .Bg_Orch3{
		background-image: url("../assets/BG_3.jpg");
		background-position: center;
		background-size:contain;
	
	  }	
	  
	  .concert-showcase{
		background-image: url(../assets/Concierto-showcase-mb.jpg);
		min-width: 70vw;
		width: 100%;
		height: 280px; 
		background-size: auto 100%;
		background-color: black;
		background-repeat: no-repeat;
		
	  }

	  .grid-partners {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		width: 100% !important;
	  }

	  .flexbox-space-between {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	  }

    /* Ensure full-width on small screens */
    .container, .content, .section {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
    }

    /* Stack items vertically if needed */
    .grid, .flex-container {
        display: flex;
        flex-direction: column;
    }

    /* Header and Menu adjustments */
    header {
        padding: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    /* Image adjustments */
    img {
        max-width: 100%;
        height: auto;
    }

	.mx-20 {
		margin-right: 1rem !important;
		margin-left: 1rem !important;
		text-align: center;
	  }
	
}

.image-card-concert{
	background-image: url(../assets/Asset\ 1-concert.png); background-position: center; background-size: cover; transform: translateY(100px) scale(3)  
  }

@media (max-width: 480px) {
    /* Further reduce font sizes and paddings */
    body {
        font-size: 12px;
    }

    header {
        padding: 8px;
    }

    .title, h1, h2, h3 {
        font-size: 1.5em;
    }

    /* Ensure full stacking on very small screens */
    .flex-container {
        flex-direction: column;
    }

    /* Hide sidebar or additional navigation for smaller screens */
    .sidebar {
        display: none;
    }
    
    /* Padding adjustments for smaller viewports */
    .content, .container {
        padding: 5px;
    }
}