﻿@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Open+Sans:400,800|Raleway&display=swap');

.marginTop5
{
	margin-top:5px;
}

.marginTop10
{
	margin-top:10px;
}

.marginTop15
{
	margin-top:15px;
}

.marginTop20
{
	margin-top:20px;
}

.marginTop25
{
	margin-top:25px;
}

.marginTop30
{
	margin-top:30px;
}


.accion-trivia-solar-2020-landing
{
	background:url('../images/bk_landing.jpg') #87eaac;
	background-position:bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	min-height:580px;
	height:580px;
}

.accion-trivia-solar-2020-caja{
	background:url('../images/caja-login.png');
	background-position:bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	min-height: 70%;
}

.accion-trivia-solar-2020-caja h1
{
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 2em;
	margin: 0px 15%;	
}

.accion-trivia-solar-2020-header-trivia-caja h1
{
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 2.2em;
	margin: 0px 10%;
}

.accion-trivia-solar-2020-caja h3
{
	color:#482566;
	font-family:'Bebas Neue', cursive;
	font-size: 1.70em;
	margin: 0px 1%;
	font-weight: 400;
}

.pregunta-expertas-en-sol
{
	color:#fff;
	font-family:'Bebas Neue', cursive;
	font-size: 1.65em;
	font-weight: 400;
	line-height: 1em;
	opacity:0;
}

.opcion-expertas-en-sol
{
	color:#fff;
	font-family:'Bebas Neue', cursive;
	font-size: 1.55em;
	font-weight: 400;
	line-height:1em;
	float: left;
    text-align: left;
}

.respuesta-expertas-al-sol{
	background:url('../images/caja-pregunta.png');
	background-position:bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	
}
.respuesta-expertas-al-sol>.row-inner{
	margin:5% 10%;
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 1.1em;
	text-align: justify;
		
}

.accion-trivia-solar-2020-caja input[type="text"],
.accion-trivia-solar-2020-caja input[type="password"]
{
	background:#fbefa8;
	border:none;
	width:97%;
	height:35px;
	color:#482566;
	font-family:'Open Sans', cursive;
	font-size: 1.2em;
	padding-left:3%;
}

.accion-trivia-solar-2020-btn img,
.accion-trivia-solar-2020-btn input
{
	width:100%;
}
.accion-trivia-solar-2020-caja h3 b
{
	font-weight: 800;
}

.accion-trivia-solar-2020-logo-container{
	height: 80%;
}

.accion-trivia-solar-2020-subbajada,
.accion-trivia-solar-2020-subbajada a,
.accion-trivia-solar-2020-subbajada a:hover,
.accion-trivia-solar-2020-subbajada a:visited,
.accion-trivia-solar-2020-subbajada a:active
{
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 0.9em;
	margin-right: 10px;
}

.accion-trivia-solar-2020-logo-container>.row {
	float: left;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.accion-trivia-solar-2020-logo img{width:100%;max-width: 253px;}

.accion-trivia-solar-2020-bases,.accion-trivia-solar-2020-bases a,.accion-trivia-solar-2020-bases a:hover,.accion-trivia-solar-2020-bases a:visited,.accion-trivia-solar-2020-bases a:active
{
	color:#fff;
	font-size: 1.05em;
	text-decoration: none;
	font-family: 'Raleway', sans-serif;
}

.accion-trivia-solar-2020-header-trivia
{
	
	background:url('../images/header-trivia.jpg') #87eaac;
	background-position:bottom left;
	background-repeat: no-repeat;
	background-size:cover;
}

.accion-trivia-solar-2020-header-trivia-caja
{
	background: url(../images/titulo-header-trivia.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 5%;
}

.nro-pregunta-expertas-en-sol img
{
	width: 100%;
}

.accion-trivia-solar-2020-pregunta-1{
	background: #58d1ae;
	min-height:200px;
}

.accion-trivia-solar-2020-pregunta-2{
	background: url(../images/transicion-1.jpg) #f49813;
 	background-position: top center;
    background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top:6%;
	min-height:200px;
}

.accion-trivia-solar-2020-pregunta-3{
	background: url(../images/transicion-2.jpg) #e5067d;
 	background-position: top center;
    background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top:13%;
	min-height:200px;
}

.accion-trivia-solar-2020-pregunta-4{
	background: url(../images/transicion-3.jpg) #84dfac;
 	background-position: top center;
    background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top:8%;
	min-height: 125px;
}

.accion-trivia-solar-2020-pie
{
	margin-top: -10px;
	position: relative;
}

.accion-trivia-solar-2020-pie img
{
	width:100%;
}



.accion-trivia-solar-2020-btn-finalizar{
	position: absolute;
	left:calc(50% - 103px);
	width:206px;
	z-index: 1;
	top:40%;
}


.accion-trivia-solar-2020-tomalobueno img
{
	width:100%;
}


.title-expertas-en-sol img
{
	width:100%;
	max-width:490px;
	text-align: center;
	animation: showTitle ease-in-out 0.8s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: showTitle ease-in-out 0.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: showTitle ease-in-out 0.8s;
    -moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: showTitle ease-in-out 0.8s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	-ms-animation: showTitle ease-in-out 0.8s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; /*IE 10+*/
	opacity: 0;
}

.nro-pregunta-expertas-en-sol img
{
	width:100%;
	max-width: 155px;
	margin-top: 2%;
	text-align: center;
	animation: showPreguntaImg ease-in 0.5s;
	animation-delay: 1.2s;
  	animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation: showPreguntaImg ease-in 0.5s;
	-webkit-animation-delay: 1.2s;
  	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation: showPreguntaImg ease-in 0.5s;
	-moz-animation-delay: 1.2s;
  	-moz-animation-iteration-count: 1;
	-moz-animation-fill-mode:forwards;
	-o-animation: showPreguntaImg ease-in 0.5s;
	-o-animation-delay: 1.2s;
  	-o-animation-iteration-count: 1;
	-o-animation-fill-mode:forwards;
	-ms-animation: showPreguntaImg ease-in 0.5s;
	-ms-animation-delay: 1.2s;
  	-ms-animation-iteration-count: 1;
	-ms-animation-fill-mode:forwards;
	opacity: 0;
}

.pregunta-expertas-en-sol
{
	text-transform: uppercase;
	animation: showPreguntaTxt ease-in 0.3s;
	animation-delay: 1.7s;
  	animation-iteration-count: 1;
  	transform-origin: 0% 50%;
  	animation-fill-mode:forwards; /*when the spec is finished*/
  	-webkit-animation: showPreguntaTxt ease-in 0.3s;
  	-webkit-animation-delay: 1.7s;
  	-webkit-animation-iteration-count: 1;
  	-webkit-transform-origin: 0% 50%;
  	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  	-moz-animation: showPreguntaTxt ease-in 0.3s;
  	-moz-animation-delay: 1.7s;
  	-moz-animation-iteration-count: 1;
  	-moz-transform-origin: 0% 50%;
  	-moz-animation-fill-mode:forwards; /*FF 5+*/
  	-o-animation: showPreguntaTxt ease-in 0.3s;
  	-o-animation-delay: 1.7s;
  	-o-animation-iteration-count: 1;
  	-o-transform-origin: 0% 50%;
  	-o-animation-fill-mode:forwards; /*Not implemented yet*/
  	-ms-animation: showPreguntaTxt ease-in 0.3s;
  	-ms-animation-delay: 1.7s;
  	-ms-animation-iteration-count: 1;
  	-ms-transform-origin: 0% 50%;
  	-ms-animation-fill-mode:forwards; /*IE 10+*/
}

.opcion-expertas-en-sol
{
	cursor: hand;
	cursor: pointer;
	text-transform: uppercase;
	opacity: 0;
	animation: showOpciones ease 0.8s;
    animation-iteration-count: 1;
	animation-delay: 2s;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: showOpciones ease 0.8s;
    -webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 2s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: showOpciones ease 0.8s;
    -moz-animation-iteration-count: 1;
	-moz-animation-delay: 2s;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: showOpciones ease 0.8s;
	-o-animation-delay: 2s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: showOpciones ease 0.8s;
	-ms-animation-delay: 2s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
	
}

.opcion-expertas-en-sol[disabled="disabled"] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    color: gray;
    opacity: 0.8;
	cursor:default;
}

.opcion-expertas-en-sol img
{
	margin-top: -10px;
}

.respuesta-expertas-al-sol img
{
	width:100%;
	max-width: 106px;
	text-align: center;
}

.respuesta-expertas-al-sol-ampliacion
{
	animation: showPreguntaTxt ease-in 0.3s;
	animation-delay: 0.5s;
  	animation-iteration-count: 1;
  	transform-origin: 0% 50%;
  	animation-fill-mode:forwards; /*when the spec is finished*/
  	-webkit-animation: showPreguntaTxt ease-in 0.3s;
  	-webkit-animation-delay: 0.5s;
  	-webkit-animation-iteration-count: 1;
  	-webkit-transform-origin: 0% 50%;
  	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  	-moz-animation: showPreguntaTxt ease-in 0.3s;
  	-moz-animation-delay: 0.5s;
  	-moz-animation-iteration-count: 1;
  	-moz-transform-origin: 0% 50%;
  	-moz-animation-fill-mode:forwards; /*FF 5+*/
  	-o-animation: showPreguntaTxt ease-in 0.3s;
  	-o-animation-delay: 0.5s;
  	-o-animation-iteration-count: 1;
  	-o-transform-origin: 0% 50%;
  	-o-animation-fill-mode:forwards; /*Not implemented yet*/
  	-ms-animation: showPreguntaTxt ease-in 0.3s;
  	-ms-animation-delay: 0.5s;
  	-ms-animation-iteration-count: 1;
  	-ms-transform-origin: 0% 50%;
  	-ms-animation-fill-mode:forwards; /*IE 10+*/
	opacity:0;
}

.accion-trivia-solar-2020-gracias
{
	background:url('../images/bk_gracias.jpg') #87eaac;
	background-position:bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	min-height:580px;
}

.accion-trivia-solar-2020-felicitaciones img
{
	width:100%;
	max-width: 320px;
}

.accion-trivia-solar-2020-bajada
{
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 1.8em;
	
}

.accion-trivia-solar-2020-redes img
{
	width:100%;
	max-width:64px;
}
.accion-trivia-solar-2020-bajada strong
{
	font-weight: 800;
	color:#482566;
	font-family:'Open Sans', sans-serif;
}

.accion-trivia-solar-2020-aclaracion
{
	color:#482566;
	font-family:'Open Sans', sans-serif;
	letter-spacing: -1px;
	font-size: 1.3em;
	
}

.accion-trivia-solar-2020-boton-compra img
{
	width:100%;
	max-width:337px;
}

@media (max-width: 479px)
{
	

	.accion-trivia-solar-2020-landing
	{
		background:url('../images/bk_mobile.jpg') #87eaac;
		min-height:800px;
		background-position:bottom left;
		background-repeat: no-repeat;
		background-size:cover;
	}
	
	.accion-trivia-solar-2020-caja h1
	{	
		font-size: 1.6em;
		margin: 0px 8%;	
	}
	
	.accion-trivia-solar-2020-caja h3
	{
		font-size: 1.20em;
		margin: 0px 0.5%;
	}
	
	.accion-trivia-solar-2020-subbajada,
	.accion-trivia-solar-2020-subbajada a,
	.accion-trivia-solar-2020-subbajada a:hover,
	.accion-trivia-solar-2020-subbajada a:visited,
	.accion-trivia-solar-2020-subbajada a:active
	{	
		font-size: 0.9em;
	}
	
	.accion-trivia-solar-2020-bases,.accion-trivia-solar-2020-bases a,.accion-trivia-solar-2020-bases a:hover,.accion-trivia-solar-2020-bases a:visited,.accion-trivia-solar-2020-bases a:active
	{
		font-size: 0.7em;
		
	}
	
	.accion-trivia-solar-2020-header-trivia {
		background-position: bottom center;
	}
	
	.accion-trivia-solar-2020-header-trivia-caja h1 {
		font-size: 1.5em;
		margin: 0px 5%;
	}
	
	.accion-trivia-solar-2020-logo-container{
		height: auto;
	}
	
	.accion-trivia-solar-2020-logo-container>.row {
		float: left;
		width: 100%;
		position: relative;
		bottom: auto;
	}
	
	.pregunta-expertas-en-sol {
		font-size: 1.4em;
		font-weight: 400;
		line-height: 1.1em;
		opacity: 0;
		text-align: center;
		margin-top: 5px;
	}
	
	.opcion-expertas-en-sol
	{
		font-size: 1.2em;
		font-weight: 400;
		line-height:1em;
		text-align: center;
	}
	
	.opcion-expertas-en-sol img {
		margin-top: -10px;
		margin-left: 15px;
	}
	
	.accion-trivia-solar-2020-btn-finalizar {
		position: absolute;
		left: calc(50% - 90px);
		width: 180px;
		z-index: 10;
		top: 20%;
	}
	
	.accion-trivia-solar-2020-aclaracion
	{
		color:#482566;
		font-family:'Open Sans', sans-serif;
		letter-spacing: -1px;
		font-size: 0.9em;
		
	}

}

/*ANIMACION*/

.accion-trivia-solar-2020-logo{
  animation: fade-bottom ease-in-out 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fade-bottom ease-in-out 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fade-bottom ease-in-out 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fade-bottom ease-in-out 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fade-bottom ease-in-out 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  opacity:0;
}

@keyframes fade-bottom{
  0% {
    opacity:0;
    transform:  translate(0px,15px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,1px)  ;
  }
}

@-moz-keyframes fade-bottom{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,15px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,1px)  ;
  }
}

@-webkit-keyframes fade-bottom {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,15px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,1px)  ;
  }
}

@-o-keyframes fade-bottom {
  0% {
    opacity:0;
    -o-transform:  translate(0px,15px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,1px)  ;
  }
}

@-ms-keyframes fade-bottom {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,15px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,1px)  ;
  }
}

.accion-trivia-solar-2020-caja{
  animation: zoom-caja ease-in-out 1s;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: zoom-caja ease-in-out 1s;
  -webkit-animation-delay: 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: zoom-caja ease-in-out 1s;
  -moz-animation-delay: 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: zoom-caja ease-in-out 1s;
  -o-animation-delay: 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: zoom-caja ease-in-out 1s;
  -ms-animation-delay: 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  opacity:0;
}

@keyframes zoom-caja{
  0% {
    opacity:0;
    transform:  scaleX(0.65) scaleY(0.65) skewX(-10deg) ;
  }
  100% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) skewX(0deg) ;
  }
}

@-moz-keyframes zoom-caja{
  0% {
    opacity:0;
    -moz-transform:  scaleX(0.65) scaleY(0.65) skewX(-10deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) skewX(0deg) ;
  }
}

@-webkit-keyframes zoom-caja {
  0% {
    opacity:0;
    -webkit-transform:  scaleX(0.65) scaleY(0.65) skewX(-10deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) skewX(0deg) ;
  }
}

@-o-keyframes zoom-caja {
  0% {
    opacity:0;
    -o-transform:  scaleX(0.65) scaleY(0.65) skewX(-10deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) skewX(0deg) ;
  }
}

@-ms-keyframes zoom-caja {
  0% {
    opacity:0;
    -ms-transform:  scaleX(0.65) scaleY(0.65) skewX(-10deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) skewX(0deg) ;
  }
}

/*SHOW TITLE*/


@keyframes showTitle{
  0% {
    opacity:0;
    transform:  rotate(11deg) scaleX(0.50) scaleY(0.50) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes showTitle{
  0% {
    opacity:0;
    -moz-transform:  rotate(11deg) scaleX(0.50) scaleY(0.50) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes showTitle {
  0% {
    opacity:0;
    -webkit-transform:  rotate(11deg) scaleX(0.50) scaleY(0.50) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes showTitle {
  0% {
    opacity:0;
    -o-transform:  rotate(11deg) scaleX(0.50) scaleY(0.50) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes showTitle {
  0% {
    opacity:0;
    -ms-transform:  rotate(11deg) scaleX(0.50) scaleY(0.50) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
}

/*SHOWPREGUNTAIMG*/

@keyframes showPreguntaImg
{
	0%{opacity:0;transform:scale(.8) translateX(-20%)}
	100%{opacity:1;transform:scale(1) translateX(0)}
}


@keyframes showPreguntaTxt{
  0% {
    opacity:0;
    transform:  translate(-10px,0px)  skewX(-8deg) ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  skewX(0deg) ;
  }
}

@-moz-keyframes showPreguntaTxt{
  0% {
    opacity:0;
    -moz-transform:  translate(-10px,0px)  skewX(-8deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  skewX(0deg) ;
  }
}

@-webkit-keyframes showPreguntaTxt {
  0% {
    opacity:0;
    -webkit-transform:  translate(-10px,0px)  skewX(-8deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  skewX(0deg) ;
  }
}

@-o-keyframes showPreguntaTxt {
  0% {
    opacity:0;
    -o-transform:  translate(-10px,0px)  skewX(-8deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  skewX(0deg) ;
  }
}

@-ms-keyframes showPreguntaTxt {
  0% {
    opacity:0;
    -ms-transform:  translate(-10px,0px)  skewX(-8deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  skewX(0deg) ;
  }
}

/* SHOW OPCIONES */


@keyframes showOpciones{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes showOpciones{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes showOpciones {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes showOpciones {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes showOpciones {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/* FADE IN*/
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
