/* === Basic Reset & Global Styles === */
* {
	box-sizing: border-box;
}
body,
html {
	background: linear-gradient(to right, rgba(69,124,24,1) 0%,rgba(87,147,79,0.3) 21%,rgba(87,147,79,0.3) 53%,rgba(87,147,79,0.3) 79%,rgba(87,147,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Prevent overall page horizontal scroll */

}
a {

  text-decoration:none;
}


/* === Centered Content Container (breakout-inner) === */
.breakout-inner {
	position: relative;
	max-width: 80%;
	height:20px;
	margin: 0 auto;
	padding: 2rem;
background: linear-gradient(135deg, rgba(201,222,150,0) 0%,rgba(180,208,136,0) 7%,rgba(155,192,119,0.36) 15%,rgba(57,130,53,0.66) 47%,rgba(138,182,107,0.38) 83%,rgba(138,182,107,0.36) 85%,rgba(138,182,107,0) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	text-align: center;
}
.breakout-inner img{
margin-top: -30px;
	
}
/* === Outer Section for the Demo === */
.carousel-section {
	overflow-x: hidden; /* Prevent page-level horizontal scroll */
}
/* === Carousel Container – allows the carousel to “break out” === */
.carousel-container {
	position: relative;
	/* This container is full width so that slides can be visible outside breakout-inner */
	width: 100vw;
	margin-left: calc(50% - 50vw); /* This makes it full-bleed */
	overflow: visible;
	background: #fff000;
}
/* === Carousel Inner – centered to match breakout-inner's width === */
.carousel-inner {
	position: relative;
	max-width: 1380px;
	margin: 0 auto;
	overflow: visible;
}
/* === Carousel Viewport – the “window” through which slides are seen.
         We set overflow visible here so the slides can “peek” beyond its bounds. === */
.carousel-viewport {
	position: relative;
	overflow: visible;
}
/* === The Slide Container (scroll-content) === */
.scroll-content {
	display: flex;
	gap: 20px;
	cursor: grab;
	will-change: transform;
	
}
/* === Each Slide (Card) === */
.scroll-item {
	  text-decoration:none;
	flex: 0 0 25vw; /* Each slide takes 25% of viewport width – adjust as needed */
	background: linear-gradient(135deg, rgba(201,222,150,0.39) 0%,rgba(138,182,107,0.58) 54%,rgba(57,130,53,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border: 1px solid #ccc;
	padding: 1rem;
	user-select: none;
	height:90px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
    box-shadow: 1px 1px 4px 4px rgb(0,0,0);
	margin-bottom:5px;
}
.scroll-item:hover{
	color:#f00082;
	background: radial-gradient(ellipse at center, rgba(41,209,131,0) 0%,rgba(90,247,0,1) 100%);
	border: 1px solid #ccc;
}
.scroll-item img{
	float:right;
	height:60px;

}
.scroll-item p{
		margin-top: -10px;
	color:#000000;
text-shadow: white 0 1px;
font-size:22px;
line-height:20px;
}	
.scroll-item h2{
	width:100%;
	float:left;
	margin-left:-22px;
	text-align:left;
	margin-top:-24px;
	color:#faa082;
	text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
	padding-left:10px;
	font-size:25px;
}
.scroll-itemb {
	text-decoration:none;
	flex: 0 0 11vw; /* Each slide takes 25% of viewport width – adjust as needed */
	background: linear-gradient(135deg, rgba(201,222,150,0.39) 0%,rgba(138,182,107,0.58) 54%,rgba(57,130,53,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border: 1px solid #ccc;
	padding: 1rem;
	user-select: none;
	height:90px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
    box-shadow: 1px 1px 4px 4px rgb(0,0,0);
	margin-bottom:5px;
	width:60px;
}
.scroll-itemb:hover{
	color:#f00082;
	background: radial-gradient(ellipse at center, rgba(255,50,50,0) 0%,rgba(255,0,0,1) 100%);
	border: 1px solid #ccc;
}
.scroll-itemb img{
	float:right;
	height:60px;

}	
/* === Navigation Arrows === */
.carousel-nava {
	
	float:left;
    text-align: center;
	margin-top: -150px;
	margin-left: 20px;
}
.carousel-nava button {
	padding: 0.5rem 1rem;
	font-size: 1rem;
	cursor: pointer;
	width:160px;
		height:45px;
	  text-decoration:none;
	  background-color: transparent;
	  background-image: url("rightbut.png");
	border: 0px solid #ccc;
}
.carousel-navb {
	float:right;
	text-align: center;
	margin-top: -150px;
	margin-right: 20px;
	
}
.carousel-navb button {
	  background-color: transparent;
	background-image: url("leftbut.png");
	padding: 0.5rem 1rem;
	font-size: 1rem;
	cursor: pointer;
	width:160px;
	text-decoration:none;
	height:45px;
	border: 0px solid #ccc;
}

.carousel-navb :hover{
background-color: transparent;
background-image: url("leftbut1.png");
}
.carousel-nava :hover{
background-color:transparent;
 background-image: url("rightbut1.png")
}
.blockcenter{
width:80%;
height:440px;
float:center;
margin-bottom:6px;	
}



.blockcenterina{
	border: 1px solid #ccc;
	border-radius:10px;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.57) 0%,rgba(255,255,255,0.16) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

width:40%;
height:440px;
float:left;
}

.blockcenterina h2{
text-shadow: red 0 -2px;
width:100%;
	padding-left:20px;
	padding-right:20px;
		float:left;
	text-align:left;
	line-height:20px;
	font-size:29px;
}
.blockcenterina p{
text-shadow: black 0 -1px;
width:100%;
	padding-left:20px;
	padding-right:20px;
		float:left;
	text-align:left;
		font-family: 'Arial';
			font-size:24px;
			color:black;
			line-height:26px;
}
.blockcenterinb{
	border: 1px solid #ccc;
		border-radius:10px;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.57) 0%,rgba(255,255,255,0.16) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

width:59%;
height:440px;
float:right;
}
.blockcenterinc{
	border: 1px solid #ccc;
		border-radius:10px;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.57) 0%,rgba(255,255,255,0.16) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

width:59%;
height:285px;
float:left;
}
.blockcenterind{
	border: 1px solid #ccc;
		border-radius:10px;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.57) 0%,rgba(255,255,255,0.16) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

width:40%;
height:285px;
float:right;
}
/* Slideshow container */
.slideshow-container {
position: relative;
  background: #f1f1f1f1;
  width:100%;
  
}

/* Slides */
.mySlides {
  display: none;
  padding: -10px;
  text-align: center;
}
.mySlides p{
font-size: 20px;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -40px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: radial-gradient(ellipse at center, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  width: 125px;
  margin-bottom:10px;
    display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;

  width: 80%;
   height: 40px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 0 2px;
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: red;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {
	color: black;
	 margin-top: 20px;
  padding-bottom: 20px;
	}
.author h2{
	color: black;
	 line-height: 26px;
  font-size: 28px;
  margin-top: 30px;
  padding-bottom: 30px;
	}	

#text{

  position: relative;
  top: 10%;
  left: 35%;
  line-height: 20px;
  font-size: 20px;
  color: #FFFF00;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  text-shadow: rgb(246, 14, 14) 4px 0px 0px, rgb(246, 14, 14) 3.87565px 0.989616px 0px, rgb(246, 14, 14) 3.51033px 1.9177px 0px, rgb(246, 14, 14) 2.92676px 2.72656px 0px,
  rgb(246, 14, 14) 2.16121px 3.36588px 0px, rgb(246, 14, 14) 1.26129px 3.79594px 0px, rgb(246, 14, 14) 0.282949px 3.98998px 0px, rgb(246, 14, 14) -0.712984px 3.93594px 0px,
  rgb(246, 14, 14) -1.66459px 3.63719px 0px, rgb(246, 14, 14) -2.51269px 3.11229px 0px, rgb(246, 14, 14) -3.20457px 2.39389px 0px, rgb(246, 14, 14) -3.69721px 1.52664px 0px,
  rgb(246, 14, 14) -3.95997px 0.56448px 0px, rgb(246, 14, 14) -3.97652px -0.432781px 0px, rgb(246, 14, 14) -3.74583px -1.40313px 0px, rgb(246, 14, 14) -3.28224px -2.28625px 0px,
  rgb(246, 14, 14) -2.61457px -3.02721px 0px, rgb(246, 14, 14) -1.78435px -3.57996px 0px, rgb(246, 14, 14) -0.843183px -3.91012px 0px, rgb(246, 14, 14) 0.150409px -3.99717px 0px, 
  rgb(246, 14, 14) 1.13465px -3.8357px 0px, rgb(246, 14, 14) 2.04834px -3.43574px 0px, rgb(246, 14, 14) 2.83468px -2.82216px 0px, rgb(246, 14, 14) 3.44477px -2.03312px 0px,
  rgb(246, 14, 14) 3.84068px -1.11766px 0px, rgb(246, 14, 14) 3.9978px -0.132717px 0px;
transform: rotate(-5deg)
}  
.myButton {
	width: 156px;
	height: 38px;
	box-shadow: 3px 4px 0px 0px #123859;
background: radial-gradient(ellipse at center, rgba(176,191,137,1) 0%,rgba(21,127,0,1) 100%);
	border-radius:4px;
	border:4px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#e1ff00;
	font-family:'Arial';
	font-size:14px;
	font-weight:bold;
	margin-left:-34px;
	text-decoration:none;
	text-shadow:1px 2px 1px #000;
	  float:center;
	  vertical-align:center;
    margin-bottom:8px;
	padding-top:6px;
	letter-spacing:2px;
}
.myButton:hover {
background: radial-gradient(ellipse at center, rgba(176,191,137,1) 0%,rgba(0,214,0,1) 100%); 	
	vertical-align: bottom;
	border-radius:8px;
	color:#ffff00;
	font-size:15px;
		text-shadow:1px 2px 2px #000;
}
.myButton:active {
	
}
.tzButton{
	width: 126px;
	height: 35px;
	box-shadow: 3px 4px 0px 0px #123859;
background: radial-gradient(ellipse at center, rgba(176,191,137,1) 0%,rgba(0,214,0,1) 100%); 	

	border-radius:4px;
	border:4px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family:'Arial';
	font-size:14px;
	font-weight:bold;
	margin-left:-34px;
	text-decoration:none;
	text-shadow:1px 2px 1px #000;

    margin-bottom:8px;
	padding-top:6px;
	letter-spacing:2px;
}
.tzButton:hover {
	background: radial-gradient(ellipse at center, rgba(176,191,137,1) 0%,rgba(21,127,0,1) 100%);

	color:#ffff00;
	font-size:15px;
		text-shadow:1px 2px 2px #000;
}
.tzButton:active {
	
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  font-size: 15px;
  line-height: 1.5;
    float:center;
	  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.mybuttond{
  text-transform: uppercase;
background: radial-gradient(ellipse at center, rgba(183,222,237,1) 0%,rgba(11,180,237,1) 100%);
   margin-top:6px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;

}
.mybuttond:hover {

}
.mybuttond:focus, buttonw:active {

}


			.betain{
				float:center;
				  font-family: "New Amsterdam";				
				 margin-top:6px;
			display: inline-block;
			height: auto;
			min-height: 60px;
			width:70%;
			background-color:#1b1b21;
			color:#07290a; 
	 padding-top:26px;
	 padding-bottom:16px;
			font-size:20px;
			}
						
			.betainb img:hover{
		background-color: #ff0000;	  			
		  box-shadow:
       5px 5px 0 #7cf77c,
     -4px -4px 0 #7cf77c,  
      4px -4px 0 #7cf77c,
      -4px 4px 0 #7cf77c,
       4px 4px 0 #7cf77c;		
				
				}
			.betainb{
				float:center;
				  font-family: "New Amsterdam";				
				 margin-top:6px;
			display: inline-block;
			
			height:780px;
			width:60%;
			background-color:#1b1b21;
			color:#faab0c; 
	 padding-top:16px;
	 padding-bottom:66px;
			font-size:28px;
			}				
.container {
  width: 100%;
   background: transparent;
}	
h1 {padding-top:46px;	
  -webkit-text-stroke: 1px black;
   color: black;
   text-shadow:
       3px 3px 0 #7cf77c,
     -1px -1px 0 #7cf77c,  
      1px -1px 0 #7cf77c,
      -1px 1px 0 #7cf77c,
       1px 1px 0 #7cf77c;	
   font-family: 'Abril Fatface', cursive;	
	font-size:102px;
	 letter-spacing: 1.5px;
}

	
			
			
		tr{			 
			float:center;
			}		
		td{			 
			float:center;
			}				
			table{			 
			float:center;
			}	
		body{
			background-color: #494c52;		 
			float:center;
			}			
.alfasud{
			height: auto;
			width:80%;
			background-color: #43454a;
			border:4px solid #06041a;
border-radius:20px;
			float:center;
			color:#f5e1a4;
 font-size:24px;
line-height:20px;
 margin-bottom:10px;
  margin-top:10px;
  padding-top:10px;
  padding-bottom:10px;
			}	 
						
.alfasud img{
		
	
}
#intro{
background-color:#e5d98a;
color:#000;
  text-decoration: none;
  font-size:22px;
   width:500px;
border-width:11px;
border-style:solid;
border-color:#2b4b50; 
border-radius:24px 24px 0px 0px;
-moz-border-radius:24px 24px 0px 0px;
-webkit-border-radius:24px 24px 0px 0px; 
-webkit-box-shadow:0px 0px 58px 8px #ff0000 inset;
-moz-box-shadow:0px 0px 58px 8px #ff0000 inset;
box-shadow:0px 0px 58px 8px #ff0000 inset;
}
#submit {
	
    background-color:#452106;
	font-size:22px;
    color: #fff;
    border:none;
    border-radius:5px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0); 
}
#submit :hover{
    background-color:red;
	transition: 0.7s;
	  color: #000;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px -72px;
  cursor: pointer;
  width: 80%;
}
 form input,form textarea {
  width: 80%;
  padding-top:-2px;
  border: solid 1px #627EDC;
  border-radius:8px;
  color:black;
  font-size:32px;
  line-height:32px;
  margin-left:-5px;
}


.mButton {
	box-shadow: 3px 6px 9px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family: 'Abril Fatface', cursive;
	font-size:27px;
	padding:4px 6px;
	text-decoration:none;
	text-shadow:-3px 3px 4px #810e05;
	margin-top:17px;
	margin-bottom:17px;
	margin-left:0px;
	width:60%px;
}
.mButton:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
	color:#5c0710;
	text-shadow:-3px 3px 4px #e64c5b;
}
.mButton:active {
	position:relative;
	top:1px;
}
#centropage{
    display: inline-block;
	width:550px;
	height:700px;
}
span.a {
text-decoration: none; 
  display: inline-block;
  width: 245px;
  height: 250px;
 
  border: 1px solid blue;  
  background-image:url("back1.png"); 
}

span.b {
text-decoration: none; 
  display: inline-block;
  width: 245px;
  height: 250px;
 
  border: 1px solid blue;    
  background-image:url("back3.png"); 
}	
.danno {
margin-top:0px;
  vertical-align:top;
  width: 245px;
background-color:#66f542;
}
.danno :hover{
background-color:#662242;
}
.zetabig {  
  display: inline-block;
   width: 952px;
     float:center;	
    margin-top:0px;
background-color: #06041a;	
}
.zeta {
		border-radius:4px;
	font-size:22px;
	line-height:20px;
	display: inline-block; 
   background-color: #1f2f47;
   width: 180px;
   margin-top:0px;
   margin-left:8.5px;
   margin-bottom:12px;
   border-radius: 6px;
   height: auto;
   float:left;
  border-style: solid;
  border-width: 5px;
 border-color:#5882c7; 
 color:#000;
 min-height: 408px;
}
.zetain {
   width: 200px;
}
.zetainb {
	color:#f59e14;
   width: 168px;
   background-color:#060c3b;
   font-size:20px;
   min-height: 48px;
   vertical-align:center;
   padding-top:5px;
   	font-family: 'Arial';
}
.zetainab {
	color:#ffdb26;
   width: 168px;
   background-color:#1a1917;
   font-size:20px;
   min-height: 48px;
   vertical-align:center;
   padding-top:10px;
   margin-top:8px;
   	font-family:'Arial';
}
.zetafoto img{
	border-radius:4px;
   height: 140px;  
    width: 140px; 
	max-height: 230px;
	  border-style: solid;
  border-width: 2px;
 border-color:#5882c7;
}


ul {
  list-style: none;
}

.indice{
	box-shadow: 3px 6px 9px 0px #8a2a21;
	background:     linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('notelibere.png');
  background-size: cover;
	
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color: rgba(5, 234, 255, 0.2);
	font-family: 'Abril Fatface', cursive;
	font-size:47px;
	padding:4px 6px;
	text-decoration:none;
	text-shadow: 3px 3px 8px hsla(14, 19%, 95%, 0.4);
	margin-top:17px;
	margin-bottom:17px;
	margin-left:0px;
	width:640px;
	height: 100px;
}
.indice:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
	color:#5c0710;
	text-shadow:-3px 3px 4px #e64c5b;
}
.indice:active {
	position:relative;
	top:1px;
}
.result .transposed-chord {
    color: #1976D2 !important;
    font-weight: bold;
}
.transposed-chord {
    color: #1976D2 !important;
    font-weight: bold;
}