@charset "UTF-8";
/* CSS Document */
:root {
	--rojo: red;
}
.index{
	text-align: center;
	align-items: center;
	justify-content: center;
	
}
.nota1 {
	width: 40%;
	margin: auto;
}
.nota2 {
	width: 50%;
	margin: auto;
}

.album {
	width: 300px;
	height: 0;
	margin: auto;
	animation: movi02 20s;
	overflow: hidden;
	border-radius: 20px;
	box-shadow:10px 10px 10px grey;
}
.album img {
	width:100%;
}
@keyframes movi02 {
        0% {height: 300px;}
        50% {height: 300px;}
        100% {height: 0px;}
        }

.emergente {
        background: white;
		border-radius: 20px;
		width:300px;
		height: 0;
        animation: movi01 15s;
		margin: auto;
		overflow: hidden;
		box-shadow:10px 10px 10px grey;
        }

 @keyframes movi01 {
        0% {height: 300px;}
        50% {height: 300px;}
        100% {height: 0px;}
        }
.emergente img {
	width:100%;
}

#nut {
	width: 200px;
	height: 200px;
	background-image: url("../IMG/iconos/nut.gif");
	background-size:contain;
	background-repeat: no-repeat;
	margin: auto;
}
.poema {
	background: -webkit-linear-gradient(rgba(253, 153, 0, 0.5) 0%,
                                        rgba(253, 153, 0, 0.5) 50%,
                                        rgba(253, 153, 0, 0.7) 50%,
										rgba(253, 157, 0, 0.7) 100%),
                    -webkit-linear-gradient(left,   rgba(253, 153, 0, 0.5) 0%,
                                                    rgba(253, 153, 0, 0.5) 50%,
                                                    rgba(253, 153, 0, 0.7) 50%,
                                                    rgba(253, 157, 0, 0.7) 100%);
	background-size: 50px 50px;
	width: 300px;
	padding: 13px;
	margin: auto;
	border-radius: 10px;
	box-shadow: 0px 5px navajowhite,
			 	0px 10px coral,
				0px -2px indianred;
}
.poema p:last-child {
	font-size: 0.7em;
	/*color:lightslategrey;*/
	color: var(--rojo);
	
}
.poema:nth-child(4) {
	transform:rotate(10deg);
}


#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}


.pie {
	text-align: center;
	align-items: center;
	justify-content: center;
}

/*iframe {
	width: 100%;
	height: 600px;
	margin: 0 auto;
}*/

.KI{
	width:95%;
	max-width: 700px;
	height:50vh;
	margin: auto;
            }

.esquema {
	display: flex;
  	align-items: center;
}


[data-tooltip]{
		display : inline-block;
		padding-right : 1em;
		position : relative;
		border-bottom : 1px dashed red;
		cursor: pointer;
		}
[data-tooltip]:hover::before {
			display: block; 
		}

[data-tooltip]::after {
		content: "\22c8";
		position: absolute;
		width: 0.8em;
		height: 0.8em;
		text-align: center;
		background-color:darkslateblue;
		color: navajowhite;
		line-height: 0.7em;
		font-size: .7em;
		border-radius : 50%;
		right : 0;
		}
[data-tooltip]::before {
		content: attr(data-tooltip);
		display : none;
		color:indigo;
		position : absolute;
		background-color:navajowhite;
		border-radius: 10px;
		font-size : 1.2rem;
		font-style: italic;
		font-weight : normal;
		top: 100%;
		min-width: 15em;
		padding: .2em .5em;
		}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}