.show{
	opacity: 1;
	animation: textopacity 1s ease-in-out;
}

.fadeOut{
	opacity: 0 !important;
	animation: textshow 0.5s ease-in-out;
}

img{
	width: 20%;
}
input{
	box-shadow: grey 0px 0px 0px;
}
rect,path{
	animation: expand 1.3s ease-in-out infinite;
}
h1.text-white{
	animation: textopacity .6s ease-in-out;
}
@keyframes textopacity{
	0% {
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes textshow{
	0% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes expand {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
div.pantalla{
	position: absolute;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
	backdrop-filter:blur(10px);
	z-index: +10000;
}

.pantallaClosed{
	height: 120%;
	animation-name: pantallaAnimation;
	animation-duration: 1s;
}

div.pantalla > div.container > div.row{

	margin-top: 20%;
	opacity: 1;
	animation-name: fadeIn; 
	animation-duration: 2s;

}

.hidden{

	display: none;

}

@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes pantallaAnimation{
	0%{height: 0vh;}
	100%{height: 100vh;}
}

@media screen and (max-width: 800px){
	.container-fluid{
		margin-top:-5%;
	}
}

@media(orientation:portrait){
	div.pantalla > div.container > div.row{
		margin-top: 60%;
	}
	body{
	height: 120Vh;
}

}