#contenedor-global{
	background: transparent;
}
body {
    background: -moz-linear-gradient(45deg, #5FC1CC 0%, #EC66A2 29%, #5FC1CC 66%, #5FC1CC 100%);
    background: -webkit-linear-gradient(45deg, #5FC1CC 0%,#EC66A2 29%,#5FC1CC 66%,#5FC1CC 100%);
    background: linear-gradient(45deg, #5FC1CC 0%,#EC66A2 29%,#5FC1CC 66%,#5FC1CC 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
	/*min-height: calc(100vh - 2rem);*/
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-evenly;
	overflow: hidden;
	position: relative; 
}

body::before, 
body::after {
	content: "";
	width: 70vmax;
	height: 70vmax;
	position: absolute;
	background: rgba(255, 255, 255, 0.07);
	left: -20vmin;
	top: -20vmin;
	animation: morph 15s linear infinite alternate, spin 20s linear infinite;
	z-index: 1;
	will-change: border-radius, transform;
	transform-origin: 55% 55%;
	pointer-events: none; 
}
	
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0 50%
	}
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; } 
}

@keyframes spin {
  to {
    transform: rotate(1turn); 
  } 
}
	.st0{display:none;}
	.st1{display:inline;}
	.st2{opacity:0.29;}
	.st3{fill:#FFFFFF;}
	.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
	.st5{clip-path:url(#SVGID_4_);}
	.st6{clip-path:url(#SVGID_6_);}
	.st7{clip-path:url(#SVGID_8_);}
	.st8{clip-path:url(#SVGID_10_);}
	.st9{fill:none;}
	.st10{clip-path:url(#SVGID_12_);}
	.st11{opacity:0.7;}
	.st12{clip-path:url(#SVGID_14_);}
	.st13{opacity:0.2;}
	.st14{clip-path:url(#SVGID_16_);}
	.st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;
}




#login-box{
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 70vw;
    height: 70vh;
    transform: translate(-50%, -50%);
    border-radius: 40px;
    box-shadow: 0px 16px 0px #00000033;
    padding: 20px;
}
#login img{
	height: 50px;
}
#login{
	padding: 0;
}
#banner-login {
    height: calc(100% - 40px);
    width: calc(50% - 30px);
    background-color: #F7C670;
    background-image: url(../img/mascota.png);
    background-size: 73%;
    position: absolute;
    border-radius: 30px;
    background-position: 107% 122%;
    background-repeat: no-repeat;
    box-shadow: inset -5px 6px 13px #00000052;
    padding: 20px;
}
#banner-login h2{
	font-size: 30px;
	font-weight: 600;
	font-style: italic;
}
#login > h3{
	font-size: 36px;
	font-weight: 600;
	font-style: italic;
	margin: 10px 0 40px 0;
}
#banner-login h3{
	font-style: italic;
	font-size: 18px;
}
#banner-login p{
	width: 90%;
	font-size: 18px;
	font-weight: 600;
}

#banner-login h2, #banner-login h3, #banner-login p{
	margin: 0;
	color: var(--text-colot-dark);
}
.abajo{
	position: absolute;
	bottom: 20px;
}
.adicionales a{
    display: inline-block;
    float: right;
    color: var(--text-colot-dark);
}
.adicionales{
	margin: 0 0 10px 0;
    display: inline-block;
    float: right;
}





@media (max-width: 600px) {
	#login-box{
		height: 70vh;
		width: 95vw;
	}
	#banner-login {
	    display: none;
	}
}