@charset "UTF-8";
/* CSS Document */

@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@keyframes skewX {
	0% {transform: skewX(0deg);}
	10% {transform: skewX(10deg);}
	30% {transform: skewX(-12deg);}
	40% {transform: skewX(20deg);}
	90% {transform: skewX(-15deg);}
	100% {transform: skewX(0deg);}
}
@keyframes skewY {
	0% {transform: skewY(0deg);}
	10% {transform: skewY(15deg);}
	30% {transform: skewY(-5deg);}
	50% {transform: skewY(20deg);}
	70% {transform: skewY(-15deg);}
	100% {transform: skewY(0deg);}
}



.button{
	height: 8vh;
	height: 8svh;
	width: 40px;
	margin-left:auto;
	font-weight:500;
	font-size: 34px;
}

button{
	border:none;
	color:rgba(255,255,255,0.90);
	background-color: rgba(255,255,255,0.0)
      }
button:hover{color:rgba(0,255,255,1.00);
    cursor:none;
}

.iframewrap{position: relative;
	 height: 86vh;
           height: 86svh;
            }

iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
	border: none;
}

#nav-works{color: rgba(170,170,170,1.00);
    text-decoration: line-through;
    text-decoration-color: white;
        animation: halfspin 0.5s forwards;
}

.container{
    margin-left: -1%;
    margin-right: -1%;
}

.containerItem{
	position: relative;
    padding: 1%;
    width:40%;
	max-width:400px;
	text-align: center;
}

#note{
	margin-top: 5em;
}
#note p{
	font-size: 1em;
	letter-spacing: 1.2px;
    line-height: 1.5em;
}

#note a:hover{color:rgba(0,230,230,1);}

.containerItem:hover{opacity:0.6;
   /* animation: spin 1.5s linear infinite;*/
	animation: skewX 3s ease-in-out infinite;
	top:5px;
}
.containerItem:hover img{
	animation: skewY 4.2s linear infinite;
}

.modal-backdrop.in {
    opacity: .7;
}

.modal-dialog {
    width: 550px;
    margin: 0 auto;
}

.modal{
	height: 100vh;
	height: 100svh;
}

@media(max-width: 767px){
    .containerItem{
        width:100%;
		max-width: 300px;
		margin: 12px auto;
    }
	.modal-body{
		padding: 3vh 10px;
		padding: 3svh 10px;
		max-width: 480px;
		margin: 0 auto;
}
	.modal-dialog{
		margin: 0;
		width: 100%;
	}
	.button{
	margin-right: 15px;
	}
	#note p{
	font-size: 0.8em;
	letter-spacing: 1px;
    line-height: 1.4em;
}
    }