/********************** REDEFINICION ESTILOS BOOSTRAP ****************************/
	body {
		/*min-height: 175rem;*/
		/*padding-top: 43px;*/
		background-color:#eee;
		/* padding-top: 3em;  Para Android*/
		padding-top: 6em;  
        background-color: #eee;
        font-size: 16px;  /* Añadido */
			
	}

	button, input, optgroup, select, textarea {
		margin: 0;
    	font-family: inherit;
    	font-size: inherit;
    	line-height: inherit;
    }

	.navbarIOS {
    position: fixed;
    top: 3em;
	}
	
	.pieIOS {
 		margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
 		margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
	}
	
	.contenedorBody {
		max-width:768px;
		margin: 0 auto
	}
	
	.navbar {
	    padding: .2rem 1rem;
	}
	
	.navbar-nav {
        border-top: 1px solid white;
	}
	
	.navbar-toggler {
		padding: .25rem .15rem;
	}
	
	.navbar-dark .navbar-brand {
		color: #fff;
		width: 100%;
	}	

	.navbar-brand {
    	margin-right: 0;
	}	
	
	
	.navbar-dark .navbar-toggler {
		color: rgba(255,255,255,.5);
		border-color: rgb(156, 39, 176);
	}
		
	.bg-dark {
		/*background-color: #3636AD!important;*/
		/* background-color: #ff6200!important; */
		/*background-color: rgb(156, 39, 176)!important;*/
		background-color: rgb(206, 77, 206)!important;
	}
	
	
	.card-body-fecha {
		padding: 0.5rem 0.5rem 0.5rem 0.1rem;
	}
	
	.btn {
		padding: .175rem .75rem;
	}
	
	.table {
		width: calc(100% - 10px);
	}
	
	.table td, .table th {
		padding: .3em;
	}	
	
	.dropdown-item {
		font-weight:500;
		color:#555;
	}
	
	
	
	
	.icono-header {
		padding: 8px 8px;
	}
	.icono-enlace-destacado {
		padding: 4px;	
	}	
	.icono-download-app {
		width:10em;
	}


	ul.unstyled-links {
		padding-left: 0;
		list-style: none;
		line-height: 1.25em;
	}

	ul.unstyled-links li a {
		text-decoration: none;
	}

	li.pl1 {padding-left: 1em}
	li.pl2 {padding-left: 2em}


	li  {margin: 0.3em 0}



	.fsize-md {font-size: 1.3em}
	.fsize-bg {font-size: 1.5em}
	.fsize-xg {font-size: 2em}

	.fsize08rem {font-size:0.8rem !important}
	.fsize10rem {font-size:1.0rem !important}
	.fsize12rem {font-size:1.2rem !important}
	.fsize14rem {font-size:1.4rem !important}
	.fsize16rem {font-size:1.6rem !important}
	.fsize18rem {font-size:1.8rem !important}
	.fsize20rem {font-size:2.0rem !important}
	.fsize25rem {font-size:2.5rem !important}
	
	.fw700 {font-weight: 700}
	.fw800 {font-weight: 800}



	h2, .h2, h3, .h3 {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		line-height: 1.2em;
		font-size: 1.3em;
	}	  


	p {
		padding: 0.5em 0;
		margin:0;
	}




	/* Cards básicas */
	.card-basica {
		padding: 0.4em;
		margin: 0 0.33em 0.5em 0.33em;		       
		background-color: #fff;
		border-radius: .25rem;
		border: 1px solid rgba(0,0,0,.125);
		background-clip: border-box;	
	}

	.card-cabecera {
		padding: 0.4em;
		margin: 0 0.33em 0 0.33em;	
		border-radius: .25rem;
		color: #ffffff;
	}	  
	.card-cuerpo {
		padding: 0.4em;
		margin: 0 0.33em 0.6em 0.33em;
		border-radius: .25rem;
		background-color: white;
	}	

	
	/* Cards para los juegos */
	.card {	
	    /*margin: 0 .33em .5em .33em;*/
	    margin: .25em .25em .5em .25em;
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-direction: column;
	    flex-direction: column;
	    min-width: 0;	    
	    background-color: #fff;
	    background-clip: border-box;
	    border: 1px solid rgba(0,0,0,.125);
	    border-radius: .25rem;		
		padding: 0.3em;
	}
	.card-body {
		padding: 0.2em;
	}

	.cardIconoJuego {
		float:left;
		width:40px;
	}
	.cardIcono {
 		width: 32px;
    	padding-top: .6em;
	}	 
	.cardRojo {
    	border-left-color: #800000;
    	border-left-style: solid;
    	border-left-width: .25em;
	}
	.cardVerde {
	    border-left-color: green;
		border-left-style: solid;
		border-left-width: .25em;
	}
	.cardNaranja {
	    border-left-color: #FFBF00;
		border-left-style: solid;
		border-left-width: .25em;
	}	
	.cardLila {
	    border-left-color: #F38CE2;
		border-left-style: solid;
		border-left-width: .25em;
	}	
	.cardMorada {
	    border-left-color: #A569BD;
		border-left-style: solid;
		border-left-width: .25em;
	}	
	.cardAzul {
	    border-left-color: #3636AD;
		border-left-style: solid;
		border-left-width: .25em;
	}	
	.cardAzulEM {
	    border-left-color: #007bff;
		border-left-style: solid;
		border-left-width: .25em;	
	}	
	.cardDoradaSM {
	    border-left-color: #aa8800;
		border-left-style: solid;
		border-left-width: .25em;	
	}    
	.cardTextoJuego {
    	float: left;
    	border-left-style: solid;
    	border-left-width: 1px;
    	padding-left: 8px;
    	width: calc(100% - 50px);
	}	


	/* Solo de la app */
	.cardTextoJuego10px {   
	    float: left;
	    padding-left: .5em;
	    width: calc(100% - 10px);
	}


	/* Titulos */
	.txtTituloJuego {
		font-size : 1em
	}
	.fontFecha {
		font-size: 0.9em;
		line-height: 1.5em;
		color: #007bff;	
	}

	/* Tipos de letra de los números premiados */
	.txtNumeros {
	    font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;

	}
	.txtNumeros15 {
	    font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
		margin-right: .5em;
	}	
	.txtNumeros145 {
	    font-size: 1.45rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}	

	.txtNumeros08 {
	    font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;	
	}		
	.txtTituloJuego {
		font-size : 1em
	}
	
	
	/* Numeros complementario y reintegros */
	.txtNumerosCR {
	    font-size: 1.2rem;
		font-weight: 500;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}	




	/* Estilos para imagenes */

	.img-footer {
		border-top: 1px solid #888;
		border-bottom: 1px solid #888;
		color: #333;
		font-size: 0.75em;
		line-height: 1em;		
		padding: .35em;
	}





	 /* colores */
	.blanco {color: #fff}
	.bgc-blanco {background: #fff}
	.bc-blanco {border: 1px solid #fff;}

	.gris {color: #666}
	.bgc-gris {background: #666}
	.bc-gris {border: 1px solid #666;}

	.negro {color: #000}
	.bgc-negro {background: #000}
	.bc-negro {border: 1px solid #000;}

	.azul {color: #3636ad}
	.bgc-azul {background: #3636ad}
	.bc-azul {border: 1px solid #3636ad;}

	.azul2 {color: #337ab7}
	.bgc-azul2 {background: #337ab7}
	.bc-azul2 {border: 1px solid #337ab7;}

	.rojo {color:#ce2521 }
	.bgc-rojo {background:#ce2521 }	  
	.bc-rojo {border: 1px solid #ce2521}	

	.granate {color:#b15755 }
	.bgc-granate {background:#b15755 }	  
	.bc-granate {border: 1px solid #b15755 }

	.verde {color: #0a7f17 }
	.bgc-verde {background: #0a7f17 }
	.bc-verde {border: 1px solid #0a7f17 }

	.amarillo {color: #F7F706 }
	.bgc-amarillo {background: #F7F706 }
	.bc-amarillo {border: 1px solid #F7F706 }

	.naranja {color: #ffa500 }
	.bgc-naranja {background: #ffa500 }
	.bc-naranja {border: 1px solid #ffa500}

	.magenta-claro {color: #CFB761}
	.bgc-magenta-claro {background: #CFB761}
	.bc-magenta-claro {border: 1px solid #CFB761}

	.morado {color: rgb(156, 39, 176) }
	.bgc-morado {background: rgb(156, 39, 176) }  /* Cambiar en la app y definición bgmorado => bgc-morado */
	.bc-morado {border: 1px solid rgb(156, 39, 176) }

	.lila {color: #F38CE2 }
	.bgc-lila {background: #F38CE2 }
	.bc-lila {border: 1px solid #F38CE2}

	/* Colores también para los links */
	.azulEM .azul-link{color: #007bff}
	.bgc-azulEM  .bgc-azul-link{background: #007bff}
	.bc-azulEM .bc-azul-link{border: 1px solid #007bff}
	a.azul-link:link, a.azul-link:visited, a.azul-link:hover, a.azul-link:active  {color: #007bff}		

	.red {color: red }
	.bgc-red {background: red }	  
	.bc-red {border: 1px solid red}	
	a.red:link, a.red:visited, a.red:hover, a.red:active  {color: red}	




	/* Avisos y premios */	

	.alert-warning {
		background-color: #fcf8e3;
		border-color: #faebcc;
		color: #8a6d3b;
		font-size: 1.2rem;
		font-weight: 700;
	}

	.alert-success {
 	   background-color: #dff0d8;
	   border-color: #d6e9c6;
	   color: #3c763d;
	   font-size: 1.3rem;
	   font-weight: 700;
	}
	
	.boton {
		display: inline-block;
		padding: 0.3em 1em;
		margin: 0.2em auto;
		text-align: center;
		color: white !important;
		font-weight: bold;	
		font-size: 1em;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		line-height: 1.4em;
		-webkit-border-radius:  0.75em;
		-moz-border-radius: 0.75em;
		border-radius: 0.75em;
		text-decoration: none;
	}

	/* margenes y alineaciones*/
	.mb-xs {margin-bottom: .25em}
	.mb-md {margin-bottom: .5em}
	.mt-xs {margin-top: .25em}
	.mt-md {margin-top: .5em}
	.margin0 {margin:0px}
	
	.ml-xs {margin-left: .25em}
	.ml-md {margin-left: .5em}

	.mr-xs {margin-right: .25em}
	.mr-md {margin-right: .5em}


	.w100 {width: 100%}	
	.w32px {width: 32px}
	.w4em {width: 4em}
	
	.lh04rem {line-height:0.4em}
	.lh06rem {line-height:0.6em}
	.lh08rem {line-height:0.8em}
	.lh10rem {line-height:1em}
	.lh12rem {line-height:1.2em}	
	.lh20rem {line-height:2.0em}	
	.lh22rem {line-height:2.2em}	
	
	/* Margenes */
	.mb-05rem {margin-bottom:0.5em;}	
	.mb-22rem {margin-bottom:2.2em;}	
	.mr-05rem {margin-right:0.5em;}
	.ml-2em {margin-left:2em}
	.ml-05em {margin-left:0.5em}
	.mt-05rem {margin-top:0.5em;}	
	.mt-2 {margin-top:2px;}
	.mt-8 {margin-top:8px;}
	.mt-10 {margin-top:10px;}
	
	/* Paddings */
	.pt-3px {padding-top: 3px}
	.pt-05rem {padding-top: 0.5em}
	.pb-05rem {padding-bottom:0.5em}
    .plr01rem {padding-left: 0.1em; padding-right: 0.1em}		
    .plr02rem {padding-left: 0.2em; padding-right: 0.2em}	
    .plr03rem {padding-left: 0.3em; padding-right: 0.3em}
    .plr05rem {padding-left: 0.5em; padding-right: 0.5em}	
    .plr2rem {padding-left: 2em; padding-right: 2em}
    .plr1rem {padding-left:1em;padding-right:1em}
    .pr05rem {padding-right: 0.5em}	

    .fleft {float: left}
    .fright {float:right}


	
	.al-right {text-align:right}
	.center {text-align:center}	
	
	
	.clearfix::after {
		content: "";
		clear: both;
		display: table;
	}
	
	





	/* texto */
	.text-center { width: 100%; text-align: center;	}	  
	.text-bold .txtBold { font-weight: bold } /* txtBold => text-bold */
	.text-right {text-align: right;}
	.underline {text-decoration: underline}
	.text-decoration-none {text-decoration: none}
	.ws-nw, .wsnw {white-space: nowrap}	

	/* anchos */
			
	.w100 {width: 100%}
	.w95 {width: 95%}
	.w50 { width:50%}
	.w33 { width:33.3%}
	.w25 { width:25%}
	
	.shadow {box-shadow: 0px 3px 5px grey;}
	.cursor-hand {cursor: pointer}

	.label-premio {
		font-size: 1.25em;
		line-height: 1.25em;
		margin: .33em 0.66em .33em 0;
		display: inline-block;
		padding: 0.2em .7em .2em;
		font-weight: bold;		
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25em;			
	}



	/* Iconos de redes sociales */

	.socialbar {
		margin: 0;
		padding: .25em .66em;
		position: relative;
		text-align: center;
	}		

	.socialbar-item {
		display: inline-block;
		width: 30%;
	}


	.social-icon {
		text-align: center;
		height: 2em;
		width: 100%;
		display: inline-block;
		fill: #fff;
		position: relative;
		vertical-align: middle;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}

	.social-whatsapp {background-color: #59cb3f;}  
	.social-twitter {background-color: #03b3ee;}
	.social-facebook {background-color: #3067a3;}



	table {
		display: table;
		border-collapse: collapse;		
		margin-bottom: 1.25em;		
		border-spacing: 2px;
		border-color: grey;
		margin: 5px;
		width: calc(100% - 10px);
		border: 1px solid #ddd;
	}	
	th {
		background-color: #F2DEDE;
		text-align:center;
		font-size: 1em;
	}
	tr:nth-child(even) {background-color: #D9EDF7;}	
	table td, table th {border: 1px solid #ddd; padding: 8px}
	/*table td {white-space: nowrap}*/


	.input-lg {
	    padding: 0.4em 1em;
	    font-size: 1.2em;
	    font-weight: bold;
	    line-height: 1.2;
	    border: 1px solid #cecece;
	    border-radius: 6px;
	    text-align: center;
	}

	.input-md {
	    padding: 0.2em 0.2em;
	    font-size: 1.2em;
	    font-weight: bold;
	    line-height: 1.2;
	    border: 1px solid #cecece;
	    border-radius: 4px;
	    text-align: center;
	    margin-bottom: 0.3em;
	    width: 3em;
	    margin-right: 3px;
	    margin-bottom: 3px;
	}

	.input-xs {
	    padding: 0.2em 0em;
	    font-size: 1em;
	    font-weight: bold;
	    line-height: 1;
	    border: 1px solid #cecece;
	    border-radius: 4px;
	    text-align: center;
	    margin-bottom: 0.3em;
	    width: 2.5em;
	    margin-right: 3px;
	    margin-bottom: 3px;
	}	
	
	.publicidad {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 280px;
	}

	.label-redonda {
		display: inline-block;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;				
		color: #000;
		font-weight: bold;
		font-size: 1.3em;
		line-height: 1.1;
		padding: 0.2em .5em .2em;
		margin-bottom: 0.2em;
		border-radius: 2.6em;
	}

	.label-redonda-xs {
	    display: inline-block;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: baseline;
	    color: #000;
	    font-weight: bold;
	    font-size: 1.1em;
	    line-height: 1.1;
	    padding: 0.2em .25em .2em;
	    margin-bottom: 0.2em;
	    border-radius: 2em;
	    margin-right: 2px;
	}	
	
	.label-redonda-xxs {
		display: inline-block;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		color: white;
		font-size: 0.8em;
		line-height: 1.1;
		padding: .0em .4em .1em;
		margin-bottom: 0.2em;
		border-radius: 2em;
		margin-right: 0.3em;
		vertical-align: text-top;
	}
	
	.label-cuadrada {
	    display: inline-block;
	    font-size: 1em;
	    font-weight: bold;
	    padding: 0.2em 0.5em;
	    border-radius: 0.3em;	
	}
	.fechaONCE {
		background-color: #d9534f;
		color: #fff;    			
		padding: 0.1em 0.3em;
		white-space: nowrap;
		font-size: 0.9em;
	}


	/* Iconos 1 y 2 de los numeros de la lotería */
	img.ico-num  {
		width:.8rem;
		padding-bottom:2px;
	}
	
	img.ico-num9rem  {
		width:.9rem;
		padding-bottom:2px;
	}	
	img.ico-num12rem {
    	width: 1.2rem;
    	padding-bottom: 8px;
	}	



	/**************************ESTILOS PARA LA TOOLBAR ********************************/		

	/*
	.toolbar1 {
		position: fixed;
	    width: 100%;
	    overflow: auto;
	    bottom: 0px;
	    background: #FFF;
	    border-top: 0.2em solid #bbb;	    	    	    
	    height: 2.2em;
	    padding-top: 0.3em;
	}
	*/

	.toolbar1 {
	    position: fixed;
	    max-width: 768px;
	    width: 100%;
	    overflow: auto;
	    bottom: 0px;
	    background: #FFF;
	    border-top: 0.2em solid #bbb;
	    /*bottom: -37px;  /* /* Creemos que esto es por la barra de Android de abajo */
	    /*height: 83px; */
	    /*height: 44px;*/
	    bottom: -1.5em; /* Esto es por la barra de Android de abajo */
	    height: 5.2em;
	}

	.toolbar1 .tbi {
		float: left;
		width: 20%;
		text-align: center;
		transition: all 0.3s ease;
		color: #777;
	}
	.toolbar1 .tbactive{
		color: rgb(156, 39, 176);
	}
	.toolbar1 .tbicon{
		padding-top: 0.15em;
		font-size: 1em;
	}
	.toolbar1 .tbtext {
		font-size: 0.6em;
		padding:0;
	}


	/* Estilos solo de la app */

	.pieIOS {
 		margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
 		margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
	}

	.n4 {
		width:25%;
		text-align:center;
		font-size:2.0rem;
		font-weight:800;
		float:left;		
	}
	.n4peq {
		font-size:1.4rem;
		padding-top: 0.5rem;
	}	
	.n3 {
		width:33.33%;
		text-align:center;
		font-size:2.0rem;
		font-weight:800;
		float:left;		
	}	
	
	.n3peq {
		font-size:1.4rem;
		padding-top: 0.5rem;
	}

	.cardFechaIzquierda {
		float:left;
		width:60px;
		text-align:center;
		font-weight:bold;
		font-size:0.9rem;			
	}
	
	.cardFechaIzquierdaTexto {
		float:left;
		border-left-style: solid;border-left-width: 1px;
		padding-left:8px;
		width:calc(100% - 60px);
	}

	.fontEnlacePeque {
		font-size:.75em;
	}
	
	.fontBote {
		color:#666;
		font-size:.75em;
	}
	
	.fontSerie {
		float:right;width:3.13em;font-size: 1rem;line-height:1rem;text-align:center;margin-top: 0;margin-bottom: .5rem;
	}

	.contenedorPrincipal {	   
	   padding: 3px;
	 }

	     .card-header-rojo {
        /*background-color: #3636AD;*/
		background-color: #800000;
		color:#FFF;
   }	
   
   .card-header-azul {
		background-color: #3636AD;
		color:#FFF;
   }

   
   .card-header-green {
		background-color: green;
		color:#FFF;
   }
   

   .card-header-verde {
		background-color: #0a7f17 ;
		color:#FFF;
   }

   .card-header-azulEM {        
		background-color:#007bff;
		color:#FFF;
   }	   
   
   .card-header-grey {
		background-color: #282f28;
		color:#FFF;
	}
	
   .card-header-doradaSM {
		background-color: #aa8800;
		color:#FFF;
	}	 
	
   .card-header-naranja {
		background-color: #FFBF00;
		color:#FFF;
	}	
	
   .card-header-morada {
		background-color: #A569BD;
		color:#FFF;
	}	
	
   .card-header-lila {
		background-color: #F38CE2;
		color:#FFF;
	}	

	.cr {
		font-size:.7em;
		color:#333;
	}


	.div-btn-comprobar {
		padding-top:2px;
		padding-left:5px
	}

		/* Formulario de comprobar */
	.form-control-50 {
	    display: inline;
		width: 7rem;
	}
	.btn-50 {
	    padding: .27rem .75rem;
	}
	
	/* Paginas lista de paises con banderas */
	.div-bandera {
		width:40px;
		float:left
	}

	.div-bandera > img {
		width:32px;
		padding-top:5px
	}
	
	.div-pais {
		float:left;
		border-left-style: solid;
		border-left-width: 1px;
		padding-left:8px;
		width:calc(100% - 40px);
	}
	
	
	.div-enlace-externo {
		padding:0 1em
	}

	/********************** Estilos para la comprobacion de QR *******************/
	.cqrTituloJuego {
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}



	/* Para marcar el número o complementario premiado */
	.cqrPremiado {
		color:red;
	}

	.cqrCajaPremio {
		background-color: #dff0d8;
		border: 1px solid #d6e9c6;
		color: #3c763d;
		padding:0.2rem;
		margin: 0.5rem 1rem;
		font-size: 1rem;
	}

	.cqrCajaSinPremio {
		background-color: #fcf8e3;
		border: 1px solid #faebcc;
		color: #8a6d3b;
		padding:0.2rem;
		margin: 0.5rem 1rem;
		font-size: 1rem;
	}

	.cqrCajaPremioTotal {
		font-size: 2.25rem;
		font-weight: 700;
	}


	/*****************************/

	hr.mb5 {margin-top: 0px;margin-bottom: 5px;}
	hr.mt5 {margin-top: 0px;margin-top: 5px;}
	hr.mtb5 {margin-top: 5px;margin-bottom: 5px;}
	hr.m10-0 {margin:10px 0;}

	.visible {display:block}
	.oculto {display:none}
	.inicial {display:initial}

	#loading-overlay {
	    position: fixed;
	    width: 100%;
	    height:100%;
	    left: 0;
	    top: 0;
	    display: none;
	    align-items: center;
	    background-color: #000;
	    z-index: 999;
	    opacity: 0.5;
	}

	.fontFechaAzul {
		font-size: .9em;
		line-height: 1.5em;
		font-style: italic;
		color: #007bff;
	}


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

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

	@-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;}
	}