* {
		    -webkit-touch-callout: none;
		    -webkit-user-select: none;
		    /* Chrome all / Safari all */
		    -moz-user-select: none;
		    /* Firefox all */
		    -ms-user-select: none;
		    /* IE 10+ */
		    /* No support for these yet, use at own risk */
		    -o-user-select: none;
		    user-select: none;
		}  
		@font-face {
			  font-family: Bauer;
			  src: url("../fonts/dseg/DSEG7-Classic/DSEG7Classic-BoldItalic.ttf");
		}
		@font-face {		
			  font-family: Ubuntu Mono;
			  src: url("../fonts/ubuntumono/UbuntuMono-Regular.ttf");			  
		}
		@font-face {
			  font-family: TitulosBauer;
			  src: url("../fonts/BankGothicRegular.ttf");
		}
		@font-face {
			  font-family: TitulosBauerMedium;
			  src: url("../fonts/BankGothicMedium.otf");
		}  
		body {
		  	margin: 0px;
		    background-color: white;
		    text-align: center;
		    font-family: Ubuntu Mono;
			text-align: center;
			background-color: #000000;
			overflow-x: hidden;
		}
		.titulo {
    		text-align:  center;
    		font-size:  2em;
    		color: white; /*#888 */;
		}
		#arg {
			background-image: url('../assets/arg.png');
			display: inline-block;
			width: 32px;
		    height: 32px;
		    background-repeat: no-repeat;
		    background-position: center;			
		    cursor: pointer;		    
		}
		#usa {
			background-image: url('../assets/usa.png');
			display: inline-block;
			width: 32px;
		    height: 32px;
		    background-repeat: no-repeat;
		    background-position: center;	
		    margin-left: 2vw;
		    cursor: pointer;					
		}
		#ita {
			background-image: url('../assets/italia.png');
			display: inline-block;
			width: 32px;
		    height: 32px;
		    background-repeat: no-repeat;
		    background-position: center;	
		    margin-left: 2vw;
		    cursor: pointer;					
		}		
		#fra {
			background-image: url('../assets/francia.png');
			display: inline-block;
			width: 32px;
		    height: 32px;
		    background-repeat: no-repeat;
		    background-position: center;	
		    margin-left: 2vw;
		    cursor: pointer;					
		}			
		#stats {
		    position: absolute;
		    top: 0px;
		    right: 0px;
		    z-index: 100;
		    background-color: #000000e3; /* rgba(255,255,255,0.90); */
		    text-align: left;
		}
		.digitos {
    		margin: 9px;
    		text-align: center;
    		color: white;
		}
		.digitos  span {
		  	font-family: Bauer;
		  	font-size: 1.2em;
		}
		.digitos > p {
    		margin-top: 0px;
    		font-size: 0.9em;
		}
		#susceptibles {
		  	color: rgb(0, 190, 0);
		}
		#recuperados {
		  	color: rgb(204, 1, 253);
		}
		#infectados {
		  	color: rgb(250, 0, 0);
		}	
		#rebanio {
		  	color: #787878;
		  	margin-top: 1vh;
		}			  
		#rcero {
		  	color: #787878;
		  	margin-top: 1vh;			
		}
		#myCanvas {
		}
		#myCanvasDiv {
		    text-align: left;
		    position: absolute;
		}
		.switch {
		  position: relative;
		  display: inline-block;
		  width: 60px;
		  height: 28px;
		}

		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}

		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #2e2e2e;
		  -webkit-transition: .4s;
		  transition: .4s;
		}

		.slider:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 6px;
		  bottom: 4px;
		  background-color: white;
		  -webkit-transition: .4s;
		  transition: .4s;
		}

		input:checked + .slider {
		  background-color: #2196F3;
		}

		input:focus + .slider {
		  box-shadow: 0 0 1px #2196F3;
		}

		input:checked + .slider:before {
		  -webkit-transform: translateX(26px);
		  -ms-transform: translateX(26px);
		  transform: translateX(26px);
		}

		.slider.round {
		  border-radius: 28px;
		}

		.slider.round:before {
		  border-radius: 50%;
		}

		#switchs {
		    bottom: 13px;
		    position: fixed;
		    left: 30vw;		
		    display: flex;
		}
		#graficos {
		    xtop: 10vh;
		    xposition: fixed;
		    z-index: 1000;
		    right: 0vw;		
		    background-color:  rgba(255,255,255,0.90);
		    margin-bottom: 5vh;
		}
		.titulito {
			margin-bottom: 0px;
		    margin-top: 0px;
		    font-size: 0.9em;		
		    letter-spacing: -0.5px;
		    color: white;	
		}
		#porcentajeMovilidad, #porcentajeLetalidad, #porcentajeTransmisibilidad {
			height: 19px;
		    width: 87px;
		    margin-top: 3px;
		    font-size: 1.18em;
    		text-align: center;
		}
		.porc {
			margin-left: 3vw;	
		}
		.porc2 {
			margin-left: 16vw;	
		}		
		.control {
			bottom: 13px;
		    position: fixed;
		    left: 1vw;
		    display: flex;
		    z-index: 1001;
		}		
		.control > div {
			margin-left: 10px;
		}
		.control > div > i {
		    font-size: 38px;
		    color: #2196F3;	
		    cursor: pointer;	
		}
		#play {
			color: rgb(250, 0, 0);
			font-weight: 900;			
		}
		.margintop {
			margin-top: 5vh;
		}


		.tool {
		  xcursor : help;
		  position : relative;
		}

		.tool::before, .tool::after {
		  position : absolute;
		  left : 50%;
		  opacity : 0;
		  z-index: -100;
		}

		.tool:hover::before, .tool:focus::before, .tool:hover::after, .tool:focus::after {
		  opacity : 1;
		  z-index: 100;
		}

		.tool::before {
		  border-style : solid;
		  border-width : 1em .75em 0 .75em;
		  border-color : #2196F3 transparent transparent transparent;
		  bottom : 100%;
		  margin-left : -.5em;
		  content : " ";
		}

		.tool::after {
		  background : #2196F3;
		  border-radius : .35em;
		  bottom : 120%;
		  color : white;
		  width : 17.5em;
		  padding: 0.5em;
		  margin-left : -8.75em;
		  content : attr(data-tip);
		  font-size: 0.9em;
		  z-index: 100000;
		}

		/* toast */

		#toast {
		    visibility: hidden;
		    max-width: 100px;
		    height: 180px;
		    margin: auto;
		    background-color: #2196F3;
		    color: #fff;
		    text-align: center;
		    border-radius: 2px;
		    position: fixed;
		    z-index: 1;
		    left: 0;right:0;
		    bottom: 50vh;
		    font-size: 18px;
		    white-space: nowrap;
		}
		#toast #img{
			width: 50px;
			height: 180px;
		    
		    float: left;
		    
		    padding-top: 7px;
		    padding-bottom: 7px;
		    
		    box-sizing: border-box;

		    
		    background-color: #0a6ab8;
		    color: #ffff;
		}
		#toast #img > i{
			font-size: 36px;
		}		
		#toast #mensajeToast{

		    
		    color: #fff;
		   
		    padding: 16px;
		    
		    overflow: hidden;
			white-space: nowrap;
		}

		#toast.show {
		    visibility: visible;
		    /* -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s; */
		    //animation: fadein 0.5s, expand 0.5s 0.5s,stay 8.5s 1s, shrink 0.5s 9s, fadeout 0.5s 9.5s;
		    animation: fadein 0.5s, expand 0.5s 0.5s,stay infinite forwards; //, shrink 0.5s 9s, fadeout 0.5s 9.5s;
		}

		.toastCerrar {
		    position: absolute;
		    top: 0px;
		    right: 0;
		    cursor: pointer;			
		}

		@-webkit-keyframes fadein {
		    from {bottom: 0; opacity: 0;} 
		    to {bottom: 50vh; opacity: 1;}
		}

		@keyframes fadein {
		    from {bottom: 0; opacity: 0;}
		    to {bottom: 50vh; opacity: 1;}
		}

		@-webkit-keyframes expand {
		    from {min-width: 50px} 
		    to {min-width: 350px}
		}

		@keyframes expand {
		    from {min-width: 50px}
		    to {min-width: 350px}
		}
		@-webkit-keyframes stay {
		    from {min-width: 350px} 
		    to {min-width: 350px}
		}

		@keyframes stay {
		    from {min-width: 350px}
		    to {min-width: 350px}
		} 


		@-webkit-keyframes shrink {
		    from {min-width: 350px;} 
		    to {min-width: 50px;}
		}

		@keyframes shrink {
		    from {min-width: 350px;} 
		    to {min-width: 50px;}
		}

		@-webkit-keyframes fadeout {
		    from {bottom: 50vh; opacity: 1;} 
		    to {bottom: 60px; opacity: 0;}
		}

		@keyframes fadeout {
		    from {bottom: 50vh; opacity: 1;}
		    to {bottom: 60px; opacity: 0;}
		}
		 
		#chart text {
    		fill: white !important;
		}


  	.blink_me {
  		animation: blinker 0.5s linear infinite;
	}

	@keyframes blinker {
	  50% {
	    opacity: 0;
	  }
	}
  	#flechaIngreso {
  		position:absolute;
  		top:0vh;
  		left:0px;
  	}
  	#flechaIngreso > i {
  		color:red;
  		font-weight: 900;
  		font-size: 2em;  		
  	}  	
  .principal {
  	display: none;
  }
  .parrafo {
	padding-left: 10vw; 
	padding-right: 10vw;	 
	line-height: 1.2em; 
	font-size: 1em;	
	margin-top: 2vh;
	text-align: center;
	font-family: sans-serif;
	color: #c9c9c9;
  }
  .masmargen{
  	padding-left: 20vw;
  	padding-right: 20vw;
  }
  .aldeano > i{
	color: rgb(0, 190, 0);
	animation: move 1.2s ease infinite;
   }
  .aldeanoinfectado > i {
	color: rgb(250, 0, 0);
	animation: move 1.4s ease infinite;	
  }  

	@keyframes move {
	  50% {
	     transform: translate(7vw);
	  }
	}  
  .aldeanorecuperado > i {
	color: rgb(204, 1, 253);
	animation: move 1.7s ease infinite;
  }    
  .botoningresar {
  	color: red;
    font-size: 1.7em;  	
  }
  table tr td {
  	text-align: left;
  	padding: 1px;
  	margin: 0px;
  	border: 1px solid #d3d3d36b;
  }
  table {
  	width: 100%;
  	border-collapse: collapse;
  }
  .personaje {
  	width: 10vw;
  }