@font-face{ font-family: "DinAlter-regular"; src: url('fonts/DinAlter-regular.ttf') format('truetype');}
@font-face{ font-family: "Rob-regular"; src: url('fonts/Rob-regular.ttf') format('truetype');}
@font-face{ font-family: "ArNarr-regular"; src: url('fonts/ArNarr-regular.ttf') format('truetype');}

/* MENSAJE OLD BROWSER IE 9 >.................................................................................................................... */
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}
    

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {	
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer, 
article, aside, canvas, embed, 
picture, figure, figcaption, hgroup, 
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;                          
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;                                
                                    box-sizing: border-box;}
    
/*HTML 5*/
header, main, footer,
article, aside, canvas, embed, 
picture, figure, figcaption, hgroup, 
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
 
/*LOADER*/
#Loader { transition: all 0.3s ease-out; }
#Loader.off { opacity:0; visibility:hidden; }

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;} 
html { font-size:18px  /*1rem = 18px*/ }

body {   
    margin:0 auto;
    text-align:center;
	font-family: "DinAlter-regular", Arial, Helvetica, sans-serif;
  } 

.SafeZone { width:100%; height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}	 
    
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/ 
header.General {width:100%; text-align:left; background-color:#000; border-top: 1rem solid #000;}  
		
	#MenuGeneral { float:left;}
		#MenuGeneral ul { list-style:none;}
		#MenuGeneral li { display: inline-block; vertical-align: middle; margin-right:35px;}					
		#MenuGeneral a { display: block;  font-size:1rem; color:#fff; padding:10px 0;
						-webkit-transition: color 0.3s ease-in-out;
						transition: color 0.3s ease-in-out;}  

	#Logo { position:absolute; z-index:100; top:5px; left:50%;
			-webkit-transform:translateX(-50%);
			transform:translateX(-50%);}

		#Logo a { display: block;}
		#Logo img { max-width: 100%; display: block;}

	/*anula boton acceso*/
	#MenuSistema { float:right; display:none;}
		#MenuSistema ul { list-style:none;}
		#MenuSistema li {}
		#MenuSistema a { display:block; font-size:1rem; color:#fff; padding:10px 20px;}
		a#BtnAccesoCuenta { background-color:#00A0D2;}
	
	
	/*Desktop*/
	.Desktop #MenuGeneral a:hover { color:#22BCFB;}
	
    /*Mobile*/
    a#BtnMobile { display:none;}
    /*......*/
    
    header .Viewport:after { content:""; display: block; clear:both;}
	
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/  
main {}	  
	#SlideGeneral { position:relative; width:100%;} 		
		#ContentSlideGeneral { position:relative; overflow:hidden; text-align:left;}
	
			#ContentSlideGeneral article { position: absolute; width:100%; opacity: 0; visibility:hidden;   
											-webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
											transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}	
			#ContentSlideGeneral article:last-child { position:relative;}
				
				#ContentSlideGeneral picture { position: absolute; z-index: -1; width:100%; height: 100%;}	
				#ContentSlideGeneral picture::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,  rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);}		
					#ContentSlideGeneral img { width: 100%; height: 100%; object-fit: cover;}	
					
					.FigData {width: 100%; text-align: center; padding-block:24rem 4rem;}						
						.FigData p { font-size:1.3rem; color:#333333;}	
						.FigData p.FigTitulo { font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:4rem; font-weight:bold; color: #fff;}
						.FigData p.FigTitulo span { display: block; color: #22BCFB;}	
							.FigData p.FigTitulo strong { display:block; font-size:3.7rem;}
							.FigData p:not(.FigTitulo) strong { color:#C42730;}
							.FigData .FigExplicacion { font-size: 2rem; color: #fff; width: 100%; max-width: 800px; text-align: center; margin: 0 auto 2rem auto;}
						
											
						a.BtnMasInfo, a.BtnDemo { display: block; font-size:1.5rem; padding:15px 50px;
												-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
												transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;}
									
						a.BtnMasInfo {font-variant: small-caps; color:#FFF; background-color:#22BCFB;}
						a.BtnDemo { color:#0081C7; background-color:#FFF;}
	
						.FigData a.BtnMasInfo, .FigData a.BtnDemo { display:inline-block; vertical-align:middle;}
						
		
		#BulletsSlideGeneral { position:absolute; z-index:50; width:100%; left:0; bottom:20px; text-align:center;}
			#BulletsSlideGeneral ul { list-style:none; margin:0 auto;}
			#BulletsSlideGeneral li { display:inline-block; vertical-align:middle; width:20px; height:20px; margin:0 5px;  background-color:#ccc; border-radius:100px; cursor:pointer;                                                      
										-webkit-transition: background-color 0.5s ease-in-out;
										transition: background-color 0.5s ease-in-out;}
				
				/*Desktop*/
				.Desktop a.BtnMasInfo:hover { background-color:#000;}
				.Desktop a.BtnDemo:hover { background-color:#000; color:#FFF;}
				
				.Desktop #BulletsSlideGeneral li:not(.select):hover { background-color:#333;}				
				
				/*select*/					
				#ContentSlideGeneral article.select { opacity: 1; visibility: visible;}
				#BulletsSlideGeneral li.select { background-color:#22BCFB; cursor:default;}
				/*......*/
	
	#Presentacion { text-align:center; padding:65px 0 80px 0;}
		#Presentacion h2 { margin-bottom:15px; font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:2.7rem; color:#39393A;}
		#Presentacion p { font-size:1.3rem; line-height: 1.5em !important; color:#333; width:100%; max-width:1700px; margin:0 auto; text-wrap: balance;}
		#Presentacion strong { color:#C42730;}
		
	#ComoFunciona { display: flex; align-items: center; background-color:#F4F6F9;}
		#FotosComoFuncina {flex: 1;}
		#FotosComoFuncina figure { width:100%;}
		#FotosComoFuncina img { max-width:100%; display:block;}
		
		#TextoComoFunciona {flex: 1; padding:20px 60px 20px 60px; text-align:left;}
		#TextoComoFunciona h2 { font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:2.7rem; color:#39393A; margin-bottom:35px;}
		#TextoComoFunciona p { display:block; width:100%; max-width:1000px; font-size:0.9rem; color:#000;}
		#TextoComoFunciona strong { color:#22BCFB;}
		#TextoComoFunciona a { display:inline-block; margin-top:20px;}

		#ComoFunciona.reverse { flex-direction: row-reverse; background-color: #000; padding-block: 3rem;}
		#ComoFunciona.reverse #TextoComoFunciona { text-align: right;}
		#ComoFunciona.reverse #TextoComoFunciona > div { max-width: 600px; text-align: left; margin-left: auto;}
		#ComoFunciona.reverse #TextoComoFunciona h2 { color: #fff;}
		#ComoFunciona.reverse ol { display: flex; flex-direction: column; gap: 0.5rem; margin-block: 1rem;}
		#ComoFunciona.reverse li { font-size: 1.5rem; color: #ffff;}
		#ComoFunciona.reverse li strong { font-size: 2rem; color:  #22BCFB;}

	#GruposAplicacion { padding:50px 0; background-color:#FFF;} 
		#GruposAplicacion h2 {font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:2rem; margin-bottom:20px; color:#39393A;}
		#GruposAplicacion article { display:inline-block; vertical-align:top; width:14.28%; text-align:center; padding:20px 25px;}
			#GruposAplicacion figure { display:inline-block; border:2px solid #22BCFB; border-radius:200px;}
			#GruposAplicacion img { max-width:100%; display:block; border:10px solid #FFF; border-radius:200px;}
			#GruposAplicacion h3 { font-size:1.2rem; color:#22BCFB; margin-top:10px;}
			#GruposAplicacion p { font-size: 1rem;}

	.tag-group { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%;}
	.tag { flex: 0 0 auto; padding: 0.5rem 1rem; color: #22BCFB; font-size: 1.25rem; border: 1px solid #22BCFB; border-radius: 2rem;}

	.txt-responsive { font-size: 1.5rem !important; display: block; margin-top: 1.5rem;}
	.txt-responsive strong { color:#C42730;}
			
	#Planes { padding:40px 0; background-color:#F4F6F9;} 
		#Planes h2 { margin-bottom:15px; font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:2.7rem; color:#39393A;}
		#Planes article { display:inline-block; vertical-align:top; width:33.33%; text-align:center; padding:20px 25px;}
			#Planes figure { display: inline-block; margin:0 auto; }
			#Planes img { max-width:100%; display:block;}		
			#Planes h3 { font-size:1.8rem; font-weight:bold; color:#39393B; margin-top:10px;}			
			p.Pie { font-size:0.9rem !important; color:#39393A; display:block; margin-top:30px; padding-bottom:20px; border-bottom:1px solid #DDDDDD;}
			p.Descuentos { margin-top:30px; display:block; font-size:1.5rem !important; font-weight:bold;}
			#Planes a { display:inline-block; margin-top:20px;}		

			.txt-premios { font-size: 2rem; color: #22BCFB; margin-top: 1rem;}	
	

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.General {width:100%; padding:50px 0; background-color:#444444; text-align:center;}
	footer.General h2 { font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:3rem; color:#F2F6F8;}	
	footer.General h3 { font-family: "Rob-regular", Arial, Helvetica, sans-serif; font-size:3rem; color:#22BCFB;}
	footer.General p { font-size:1.5rem; color:#FFF; display:block; margin-block: 1rem;}
	footer.General a.BtnMasInfo { display: inline-block;}
	
	#FormContacto { background:url(imagenes/logo-gris.jpg) no-repeat 0 25px; background-size:150px auto; padding:50px 0 60px 150px;}
		#FormContacto fieldset { width:33.33%; display:inline-block; vertical-align:top; padding-left:50px;}
		#FormContacto input:not([type="submit"]), #FormContacto textarea { display:block; width:100%; border:1px solid #EEEEEE;font-family: "DinAlter-regular", Arial, Helvetica, sans-serif; font-size:1rem; color:#FFF; background:none; padding:15px;}
		#FormContacto input:not([type="submit"]) { margin-bottom:20px;}
		#FormContacto textarea { overflow:auto; height:120px;}
		
		input#enviar-consulta { font-family: "DinAlter-regular", Arial, Helvetica, sans-serif; font-size:1rem; padding:15px 50px; margin-top:20px; background-color:#22BCFB; color:#FFF; cursor:pointer;
								-webkit-transform: translate(-70px);
								transform: translate(-70px);
								-webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
								transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;}
								
		/*Desktop*/
		.Desktop #FormContacto input:not([type="submit"]):hover, 
		.Desktop #FormContacto textarea:hover { border-color: #22BCFB;}
		
		.Desktop input#enviar-consulta:hover { background-color:#000;}
		
		/*focus*/
		#FormContacto input:not([type="submit"]):focus, #FormContacto textarea:focus { background-color: #f2f2f2; color: #000;}
		
	#MenuSocialFooter { margin-top: 2rem;}
		#MenuSocialFooter ul { list-style:none;}
		#MenuSocialFooter li { display:inline-block; vertical-align:middle; margin:0 5px;}
		#MenuSocialFooter a { display:block; width:40px; height:40px; background-color:#8B8A8E; border-radius:200px;}
		a.Facebook { background:url(imagenes/icono-facebook.png) no-repeat center center; background-size:13px auto;}  
		a.Youtube { background:url(imagenes/icono-youtube.png) no-repeat center center; background-size:20px auto;}
		a.Instagram { background:url(imagenes/icono-instagram.png) no-repeat center center; background-size:20px auto;}
	
	p#Copy { margin-top:25px; font-size:14px; color:#FFF; display:block; text-align:center;}
	p#Copy a { color:#fff;}
	
	/*Desktop*/
	.Desktop #MenuSocialFooter a:hover { background-color:#000;}
	.Desktop p#Copy a:hover { color:#22BCFB;}
	

/*MODAL*/
#Modal { position: fixed; z-index: 9999; top:0; left:0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: none;}
#Modal.open { display: block;}

    .ContentModal { position: absolute; top:50%; left:50%; width: 300px; padding: 20px; text-align:center; border:1px solid gray; background-color: #fff;
                    -webkit-transform:translate(-50%, -50%);
					transform:translate(-50%, -50%);}
    #ModalForm {}		
		#ModalForm span { font:2rem Arial, Helvetica, sans-serif; margin:0 auto; padding:5px 10px; border-radius:100px; }
		#ModalForm div.Ok span { background-color:#00C8C8; color:#fff;}
		#ModalForm div.Fail span {background-color:#BE0A1C; color:#fff;}
		#ModalForm p { display:block; font-size:1.3rem; color:#000; margin:10px auto;}
		
		a#BtnAceptar { background:none; cursor:pointer; font-size:1.2rem; color:#1F9999; border:1px solid #1F9999; padding:5px; margin-top:10px;}
	
  
/*..............................................*/
.SafeZone * { line-height: 1.2em !important;}

#TextoComoFunciona p { text-align:justify;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			-o-hyphens: auto;					     
			hyphens: auto;}
}

/*INTERNAS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*.........................................................................................................................................*/

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*COMPATIBLIDADES///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {	
html { font-size: 15px; /*1rem = 15px*/} 
    .Viewport { max-width:1360px;}
	
header {}
	#Logo { width:250px;}
	
main {}
	.FigData { padding-block:18rem 4rem;}	
	#Presentacion p { max-width:1100px;}
	#TextoComoFunciona p { max-width:750px; font-size:1.1rem;}
}


@media (max-width: 1700px) { 
header {}
	#Logo { width: 150px;}
}

@media (max-width: 1600px) { 
main {}
	#FotosComoFuncina, #TextoComoFunciona { width: 50%;}
}

@media (max-width: 1470px) { 
.Viewport { max-width:1200px;}
	
main {}
	.FigData { padding-top: 15rem;}		
	
	#Presentacion { padding:40px 0;}	
		#Presentacion h2, #TextoComoFunciona h2, #GruposAplicacion h2, #Planes h2 {font-size: 2.3rem;}
		#TextoComoFunciona h2 {margin-bottom: 15px;}
		#TextoComoFunciona p { font-size: 1rem;}
		
		#GruposAplicacion h2 {font-size:1.5rem; margin-left: auto; margin-right: auto;}
		#GruposAplicacion img { border-width:5px; }
	
		p.Descuentos { max-width: 800px; margin-left: auto; margin-right: auto;}
	
footer {}
	footer.General h2 {font-size: 2.3rem;}
}

@media (max-width: 1200px) {	
main {}
	#MenuGeneral a { font-size: 0.9rem;}
}

@media (max-width: 1300px) {	
.Viewport { padding:0 30px; max-width:none;}	
}

@media (max-width: 1024px) { 
main {}
	main h2 {font-size: 2rem !important;}
	#Presentacion p { font-size:1.2rem;}
}

@media (max-width: 1023px) { 
header {}
	a#BtnMobile { position: relative; z-index: 9998; display:block; float: left;line-height:0; white-space:nowrap; font-size:40px; text-align:center; cursor:pointer;}
		a#BtnMobile span { width:100%; height:60px;
							-webkit-transition: color 0.3s ease-in-out;
							transition: color 0.3s ease-in-out;}

		#Barritas { padding-top:10px; font-size:40px; color:#fff; display:block;}
		#Equis { padding-top:15px; font-size:25px; color:#fff; display:none; }
	
	#MenuGeneral { position:fixed; overflow:hidden; z-index:9997; top:0; left:0; width:100%; height:100%; background:rgba(34, 188, 251, 0.95);  opacity:0; visibility:hidden;
			-webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
            -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;;
            transition:  transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
		
		#MenuGeneral ul { position:absolute; top:50%; left:50%; width:100%; max-width:320px; text-align:center; margin:0;							
						 transform: translate(-50%, -50%);}						 
			#MenuGeneral li { display:block !important; height:auto; margin:5px 0; text-align:center;  }	
			#MenuGeneral li:after {content:'\2605'; display: block; margin: 10px auto; font-size: 20px; color: #fff;}
			#MenuGeneral li a { width:100%; font-size:20px; padding:10px 15px; color:#000; border-radius:5px;}
		
		/*Desktop*/
		.Desktop #MenuGeneral li a:hover { color: #FFFFFF; }
	
		/*menumode*/
		body.menumode { overflow:hidden;}
		body.menumode #Barritas { display: none;}
		body.menumode #Equis { display: block;}
		body.menumode #MenuGeneral { opacity:1; visibility:visible; overflow:auto;
		                      		transform:scale(1);}			
		/*......*/
	
main {}
	#TextoComoFunciona p { font-size: 1.1rem;}
	
	#GruposAplicacion article { width:20%;}
	#GruposAplicacion h3 { font-size: 1.1rem;}
	
	
footer {}
	footer.General p { font-size: 1.2rem;}
	#FormContacto fieldset { padding-left: 25px;}
}

@media (max-width: 1000px) { 
main {}
	#ComoFunciona, #ComoFunciona.reverse { flex-direction: column;}
	#FotosComoFuncina { order: 1; flex: 0 0 auto;}
	#TextoComoFunciona { order:2; flex: 0 0 auto;}
	#ComoFunciona.reverse #TextoComoFunciona > div { max-width: none; padding-inline: 1.5rem;}

	#FotosComoFuncina, #TextoComoFunciona { width: 100%; display:block;}
	#TextoComoFunciona p { max-width: none;line-height: 1.6em !important; }
	
}

@media (max-width: 960px) { 
header {}
	#Logo {width: 120px;}
	
main {}
	.FigData  { padding-inline: 2rem;}
	.FigData p.FigTitulo {font-size: 2.7rem;}
	.FigData p.FigExplicacion { font-size: 1.5rem; }
	
	
	main h2 {font-size: 1.7rem !important;}
	#GruposAplicacion h2 { max-width:500px;}

footer {}
	footer.General h2,
	footer.General h3 {font-size: 1.7rem !important;}
	
	#FormContacto { padding-left: 170px;}
		#FormContacto fieldset {width: 100%; display: block; padding-left:0;}
		input#enviar-consulta { width: 100%; display: block;
								-webkit-transform: translate(0);
								transform: translate(0);}
}

@media (max-width: 760px) { 
main {}		
	#TextoComoFunciona { padding-left:30px; padding-right:30px;  }
	
	#GruposAplicacion article {width: 33.33%;}	
}

@media (max-width: 600px) { 
.FigData  { padding-top: 10rem;}
#ContentSlideGeneral picture::before { background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%);  }
a.BtnMasInfo { font-size: 1.25rem;}

main {}
	.tag { font-size: 1rem;}
	#GruposAplicacion article {width: 50%; padding-left:15px; padding-right: 15px; }
	#GruposAplicacion h3 {font-size: 1.3rem;}
	
	#Planes h3 { font-size: 1.3rem;}

	.txt-responsive span { display: block;}
	#ComoFunciona.reverse li { font-size: 1rem;}
	
footer {}
	#FormContacto { padding-left:0; background: none; }
}

@media (max-width: 450px) { 
.Viewport { padding:0 15px;}
	}


/*CONTROL//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
p#Control { position:fixed; z-index:9999; left:0; top:0; display:block; padding:5px; font-size:20px; display:none; }
.Desktop p#Control { color:#fff; background-color: #000;}
.Mobile p#Control { color:#000; background-color: #f2f2f2;}