/* contendor */
/* popup */
.oculto{
		background: rgb(255,255,255);
		width: 800px;
		height: 400px;
		border-radius: 15px;
		box-shadow: 1px 1px 1px 1px rgb(100,100,100);
		top: 38%;
		margin-left: 8%;
		float: left;
		position: fixed;
		z-index: 1;
	}
	.imagen{
		z-index: 2; animation-delay: 4s; bottom: 50px; left: 105px; position: fixed; cursor: pointer;
	}
  .imagen2{
    z-index: 2; animation-delay: 3s; bottom: 40px; left: 85px; position: fixed; cursor: pointer;
  }
  .btn-escucha{
    animation-delay: 3s; bottom: 130px; left: 120px; position: fixed;
  }
	.oculto .parrafo{
		font-size: 18px;
		padding-left: 100px;
		padding-top: 80px;
		padding-right: 100px; 
		text-align: left;
	}
	.oculto .banner-color{
		background: rgb(255,255,255);
		width: inherit;
		height: 40px;
		border-top-left-radius:15px;
		border-top-right-radius:15px;
		float: left;
	}

.link{
	padding-top: 200px; padding-left: 100px; padding-right: 100px;
}
/* flechas */
.posicion1{
  position: fixed; left: 10px; top: 700px; cursor: pointer;
}
.posicion2{
  position: fixed; right: 30px; top: 700px; cursor: pointer;
}

/* objetivos */
.contenedor1{position: fixed; top:20%; z-index: 5;}
.column1{animation-delay: 3s; left:50%;}
.contenedor2{position: fixed; top:22%;}
.column2{left:35%;}
.tituloObjetivo{font-size: 28px; color: #000;}
.tituloGeneral{font-size: 28px;}
.espacioP{margin-top: 25px; font-size: 14px; padding-left: 30px; padding-right: 30px; color: #000;}


/* datos-claves */
.verde{
	animation-delay: 3s; padding-top: 6.5%;
}
.verde .div{
  float: right;
}

.parrafo{
  animation-delay: 3s; font-size:23px; color: rgb(255,45,89); padding-bottom:10px; text-align: left; padding-left: 80px;
}

.parrafo2{
  animation-delay: 3s; font-size: 18px; color: rgb(0,0,0); padding-left: 80px; text-align: justify; font-family: open sans; margin-right: 40px;
}
.img-tabla{z-index: -2;}
.bibliografia{
   position: fixed; left: 80%; top: 21%;
}

/* signos-alerta */

.verde2{
  animation-delay: 3s; padding-top: 6%; padding-right: 50px;
}
.verde2 .div2{
  float: right;
  font-size: 16px;
}
.columna{
  padding-top: 10px; padding-left: 40px; margin-bottom: 25px; 
}
.columna2{
  padding-top: 30px; padding-left: 80px; 
}
.columna3{
  padding-right: 110px
}
.parrafo3{
  font-size:24px; color: rgb(255,45,89); padding-bottom:15px; text-align: left; padding-left: 80px
}
.parrafo4{
  font-size:18px; color: rgb(0,0,0); padding-bottom:15px; text-align: justify; padding-left: 40px
}

/* signos-alerta2 */
.gris{
  padding-top: 6%; padding-left: 10px;
}
.parrafo5{
  font-size:24px; color: rgb(255,45,89); padding-bottom:20px; text-align: left; padding-left: 80px;
}
.columna4{
  padding-top: 20px; padding-left: 40px; margin-bottom: 25px; 
}
.columna5{
  padding-top: 30px; padding-left: 80px;
}
.columna6{
  padding-top: 30px; padding-right: 80px;
}

/* biopsia */
.rosa{
  padding-top: 7%; padding-left: 50px;
}
.verde3{
  padding-top: 7%; padding-right: 50px; font-size: 16px;
}
.biopsia{
  font-size: 24px; color: rgb(16,172,228); padding-top: 3%;
}

/* estadios-clinicos */
.verde4{
  padding-top: 7%; padding-right: 80px; font-size: 16px; animation-delay: 3s;
}
.rosa2{
  animation-delay: 3s; padding-top: 7%;
}
.tituloR{
  font-size:24px; color: rgb(255,45,89); padding-bottom:10px; text-align: left; padding-left: 80px;
}
.tituloA{
  font-size: 18px; color: rgb(16,172,228); padding-left: 80px; text-align: left; font-weight: bold; font-family: open sans;
}
.parrafo6{
  font-size: 18px; color:rgb(0,0,0); padding-left: 80px; text-align: left;font-family: open sans; margin-bottom: 20px;
}
.parrafo7{
  font-size: 18px; color:rgb(0,0,0); margin-left: 140px;
}
.parrafoI{
  font-size: 18px;
}

/* estadios-clinicos2 */
.gris2{
  animation-delay: 3s; padding-top: 7%; float: left; font-size: 16px;
}
.verde5{
  animation-delay: 3s; padding-top: 7%; padding-right: 80px; font-size: 16px;
}
.parrafoP{
  padding-left: 115px;
}
.parrafoP1{padding-top: 70px;}
.popup{
  padding-top: 50px; padding-left: 200px; padding-right: 100px; text-align: left; font-size: 18px;
}

/* estadios-cancer */
 .gris3{
    animation-delay: 3s; padding-top: 7%; 
 }
 .verde6{
    animation-delay: 3s; padding-top: 7%; padding-right: 80px; font-size: 16px;
}
.parrafo8{
  font-size:24px; color:  rgb(255,45,89); padding-bottom:15px; text-align: left; padding-left: 110px;
}

.imagen1{
  animation-delay: 3s; top: 49%; left: 43%; position: fixed;
}

.o1{
   width: 700px; height: 300px; margin-left: -8%;
}

.image2{
  animation-delay: 3s; top: 49%; left: 56%; position: fixed;
}

.o2{
  width: 700px; height: 400px; margin-left: -7%;
}

.imagen3{
  animation-delay: 3s; top: 49%; left: 70%; position: fixed;
}

.o3{
  width: 800px; height: 560px; margin-left: -14%; top: 15%;
}

.imagen4{
 animation-delay: 3s; top: 65%; left: 43%; position: fixed;
}

.o4{
  width: 800px; height: 560px; margin-left: -14%; top: 15%;
}
.imagen5{
 animation-delay: 3s; top: 65%; left: 56%; position: fixed;
}

.o5{
  width: 950px; height: 560px; margin-left: -20%; top: 15%;
}
.imagen6{
 animation-delay: 3s; top: 65%; left: 70%; position: fixed
}

.o6{
  width: 950px; height: 560px; margin-left: -20%; top: 15%;
}
.imagen7{
  animation-delay: 3s; top: 65%; left: 84%; position: fixed;
}

.o7{
   width: 950px; height: 560px; margin-left: -20%; top: 15%;
}

.imagen8{
  animation-delay: 3s; top: 85%; left: 43%; position: fixed; 
}
.o8{
  width: 720px; height: 560px; margin-left: -18%; top: 15%
}

/* estadios-cancer */
.gris4{
  animation-delay: 3s; padding-top: 6%; padding-left: 10px;
}
.verde7{
  animation-delay: 3s; padding-top: 6%; padding-right: 70px; font-size: 16px;
}
.columna7{
  animation-delay: 3s; padding-top: 30px; padding-left: 30px;
}
.columna8{
  padding-right: 110px;
}
.parrafo9{
   padding-left: 70px;
   font-size: 24px;
}
.parrafo10{
    padding-left: 70px;
    font-size: 18px; 
}
.tabla1{
  width: 353px; height: 500px;
}
.tabla2{
 height: 540px;
}

/* factores */
.rosa3{
    animation-delay: 3s; padding-top: 7%; padding-left: 10px;
}
.verde8{
    animation-delay: 3s; padding-top: 7%; padding-right: 20px; font-size: 16px;
}
.fuente{
  font-size: 16px;
}

/* sistema TMN */
.green9{
  animation-delay: 3s; padding-top: 7%; padding-right: 50px; font-size: 16px;
}
.rosa4{
  animation-delay: 3s; padding-top: 7%;
}
.parraf11{
  padding-left: 60px; font-size: 18px;
}
.titleH3{
  font-size: 24px; padding-left: 60px;
}
.i1{
  height: 80px; padding: 0;
}


/* actividad interactiva */
.columna9{
  animation-delay: 4s; padding-top: 150px; float: left;
}
.columna10{
  animation-delay: 5s; padding-top: 150px;
}
.columna11{
  animation-delay: 6s; padding-top: 100px; padding-right: 60px; font-size: 18px;
}
.parrafo12{
  font-size: 18px; color:rgb(255, 255, 255); padding-left: 170px; text-align: justify; font-family: open sans;
}
.parraf13{
  font-size:26px; color: rgb(255, 255, 255);font-weight: bold; text-align: right;
}

/* ideas claves */
.rosa5{
  padding-top: 10%; padding-right: 60px;
}
.parrafo13{
  animation-delay: 4s; font-size: 24px; color: rgb(255,45,89); text-align: justify; font-family: open sans; font-weight: bold; margin-bottom: 20px;
}
.parrafo14{
  animation-delay: 4s; font-size:18px; color: rgb(0,0,0); text-align: justify;
}

/* media querys */
@media (max-width: 1440px) {

.contenedor1{position: fixed; top:20%; z-index: 5;}
.column1{animation-delay: 3s; left:53%;}
.contenedor2{position: fixed; top:22%;}
.column2{left:35%;}
.tituloObjetivos{font-size: 28px;}
.tituloGeneral{font-size: 28px;}

.imagen1{
 top: 52%; left: 43%; 
}

.image2{
  top: 52%; left: 56%;
}

.imagen3{
  top: 52%; left: 70%; 
}

.imagen4{
 top: 69%; left: 43%;
}

.imagen5{
 top: 69%; left: 56%;
}

.imagen6{
 top: 69%; left: 70%;
}

.imagen7{
  top: 69%; left: 84%;
}

.imagen8{
  top: 90%; left: 44%;
}
  .display1{
    visibility: hidden;
  }
  .display2{
    visibility: hidden;
  }
  .display3{
    width: 100%;
    /* height: 100%; */
    visibility: visible;
  }
}
@media (max-width: 1366px) {
.imagen1{
 top: 48%; left: 43%; 
}

.image2{
  top: 48%; left: 56%;
}

.imagen3{
  top: 48%; left: 70%; 
}

.imagen4{
 top:64%; left: 43%;
}

.imagen5{
 top: 64%;left: 56%;
}

.imagen6{
 top: 64%;left: 70%;
}

.imagen7{
  top: 64%;left: 84%;
}

.imagen8{
  top: 84%; left: 43%;
}

}
@media (max-width: 1024px){
  .body{
    /* width: 80%; */
  	height: 720px;
  }
  .posicion1{
 top: 700px;
}
.posicion2{
  top: 700px;
}
  .contenedor1{position: fixed; top:27%; z-index: 5;}
  .column1{animation-delay: 3s; left:60%; font-size: 14px;}
  .contenedor2{position: fixed; top:30%;}
  .column2{left:35%;}
  .tituloObjetivos{font-size: 24px;}
  .tituloGeneral{font-size: 22px;}
  .espacioP{margin-top: 18px; font-size: 12px;}
  .topP{top:5%}

  .display1{
    visibility: hidden;
  }
  .display2{
    visibility: visible;
  }
  .display3{
    visibility: hidden;
  }
  /* datos-claves */
  .verde{
  	padding-top: 8%; 
  }
  .link{
    padding-left: 60px;
    padding-right: 60px;
  }
  .parrafo{padding-left: 40px;}
  .parrafo2{
  padding-left: 40px; margin-right: 20px;
}
 .img-tabla{visibility: hidden; position: fixed;}

  .bibliografia{
  top: 20%;  
  left: 42%;
  }

/* signos-alerta */
  .columna2{
    padding-left: 40px;
  }

  .columna3{
    padding-right: 40px
  }
  .verde2{
    padding-top: 8%;
    padding-right: 20px;
  }

  .verde2 .div2{
    font-size: 14px;
  }

  .parrafo3{
    padding-left: 0;
  }

  .parrafo4{
    padding-left: 0;
  }

  /* signos-alerta2 */
  .gris{
    padding-top: 8%;
    padding-left: 0px;
  }
  .parrafo5{
    padding-left: 30px;
    font-size: 21px;
  }
  .columna5{
    padding-top: 20px; padding-left: 40px;
  }

  .columna6{
    padding-top: 20px; padding-right: 40px;
  }

  /* biopsia */
  .rosa{
    padding-top: 8%; padding-left: 27px;
  }
  .verde3{
    padding-top: 8%; padding-right: 30px;
  }
  .section{
    padding-left: 30px;
  }

  /* estadios-clinicos */
 .verde4{
    padding-top: 8%; padding-right: 40px; font-size: 16px;
 }
 .rosa2{
    padding-top: 8%; font-size: 18px;
 }
 .tituloA, .tituloR, .parrafo6{
    padding-left: 30px;
 }
 .parrafo6{
    font-size: 16px;
 }
 .parrafo7{
    margin-left: 80px;
 }

 /* estadios-clinicos2 */
  .gris2{
    padding-top: 8%; 
 }
  .verde5{
    padding-top: 8%; font-size: 14px; padding-right: 20px;
 }

 /* estadios-cancer */
 .gris3{
    padding-top: 8%; float: left;
 }
 .verde6{
    padding-top: 8%; padding-right: 50px;
}
.parrafo8{
  padding-left: 70px;
}

.imagen1{
  top: 47%; left: 42%;
}

.o1{
  left: 20%; top: 30%;
}

.image2{
  top: 47%; left: 57%; 
}

.o2{
  top: 30%; left: 25%;
}
.imagen3{
  top: 47%; left: 70%;
}

.o3{
   left: 25%; top: 20%;
}

.imagen4{
  top: 60%; left: 42%; 
}

.o4{
  top: 15%; left: 25%;
}
.imagen5{
  top: 60%; left: 57%;
}

.o5{
  top: 15%; left: 25%;
}
.imagen6{
  top: 60%; left: 73%;
}

.o6{
  top: 15%; left: 25%;
}
.imagen7{
  top: 60%; left: 88%;
}

.o7{
  left: 25%; top: 15%;
}

.imagen8{
  top: 75%; left: 42%;
}
.o8{
  left: 30%; top: 15%;
}

/* estadios-cancer2 */
.gris4{
  padding-top: 8%; padding-left: 10px;
}
.verde7{
 padding-top: 8%; padding-right: 40px;
}
.columna7{
  padding-top: 30px; padding-left: 15px;
}
.columna8{
  padding-right: 60px;
}
.parrafo9{
   padding-left: 40px;
}
.parrafo10{
   padding-left: 40px;
}

/* factores */
.rosa3{
    padding-top: 8%; padding-left: 0;
}
.verde8{
    padding-top: 8%; padding-right: 10px;
}
.fuente{
  font-size: 16px;
}

  /* sistema TMN */
.green9{
  padding-top: 8%; padding-right: 20px;
}
.rosa4{
  padding-top: 8%;
}
.parraf11{
  padding-left: 30px; font-size: 18px;
}
.titleH3{
  font-size: 24px; padding-left: 30px;
}
.i1{
  height: 0px; padding: 0;
  }

  /* actividad interactiva */
.columna9{
  padding-top: 150px;
}
.columna10{
  padding-top: 120px;
}
.columna11{
  padding-top: 100px; padding-right: 20px; font-size: 16px;
}
.parrafo12{
  font-size: 18px; padding-left: 140px;
}
.parrafo13{
  font-size:22px;  padding-left: 20px;
}

/* ideas claves */
.rosa5{
  padding-top: 10%; padding-right: 60px;
}
.parrafo13{
  animation-delay: 4s; margin-bottom: 20px; float: left;
}
.parrafo14{
  animation-delay: 4s; font-size:18px; color: #000; text-align: justify;
}

}

@media (max-width: 768px){
  .body{
  	height: 720px;
  }
  .contenedor1{position: fixed; top:18%; z-index: 5;}
  .column1{animation-delay: 3s; left:60%; font-size: 13px;}
  .contenedor2{position: fixed; top:30%;}
  .column2{left:35%;}
  .tituloObjetivos{font-size: 24px;}
  .tituloGeneral{font-size: 18px;}
  .espacioP{margin-top: 18px; font-size: 12px; padding-left: 0px; padding-right: 0px;}
  .topP{top:5%}
  .topP1{top:15%}
  .display1{
    visibility: visible;
  }
  .display2{
    visibility: hidden;
  }
  .fondo{
    background: url('imagenes/flechasCancer.png');
    -webkit-background-size: cover;
    background-size: cover;
    height: 100%;
  }
  .posicion1{
    top: 740px;
  }
  .posicion2{
    top: 740px;
  }
  /* .brk-tables-pedestal table{
  	min-height: 300px;
  }
  .brk-tables table{
  	width: 50%;
  } */
 /*  .tabla{
	visibility: visible;
	width: 100%;
	height: 450px;	
  } */
  table{
  	display: none;
  }
  .img-tabla{visibility: visible; position: relative;}
  .bibliografia{
  	top:0;
  	visibility: hidden;
  }
  .oculto{
  	width: 600px;
  	height: 400px;
  }
  .verde{
  	padding-top: 14%; 
  	padding-right: 0px;
  }
  .link{
  	padding-left: 40px;
  	padding-right: 40px;
  }
  .parrafo{
  	padding-left: 30px;
  	font-size: 16px;
  }
  .parrafo2{
  	padding-left: 30px;
  	font-size: 16px;
  }

  /* signos-alerta */
  .verde2{
    padding-top: 14%; 
    padding-right: 20px;
  }
  .columna{
    padding-left: 27px;   
  }
  .columna2{
    padding-left: 27px;
  }
  .columna3{
    padding-right: 10px
  }
  .parrafo3{
    font-size: 19px;
  }
  .parrafo4{
    font-size: 15px;
  }

  /* signos-alerta2 */
  .gris{
    padding-top: 14%;
  }
  .span2{
    margin-left: -32px;
  }
  .parrafo5{
    padding-left: 10px;
    font-size: 20px;
  }
  .columna5{
    padding-left: 20px;
    font-size: 16px;
  }
  .columna6{
    padding-right: 42px;
    font-size: 16px;
  }

  /* biopsia */
  .rosa{
    padding-top: 14%; padding-left: 20px;
  }
  .verde3{
    padding-top: 14%; padding-right: 20px; font-size: 14px;
  }
  .section{
    padding-left: 30px;
  }

  /* estadios-clinicos */
 .verde4{
    padding-top: 14%; padding-right: 20px; font-size: 14px;
 }
 .rosa2{
    padding-top: 14%;
 }
 .tituloA, .tituloR, .parrafo6{
    padding-left: 10px;
 }
 .parrafo6{
    font-size: 15px;
 }
 .parrafo7{
    margin-left: 20px;
    font-size: 15px;
 }
 .parrafoI{
  font-size: 15px;
 }

 /* estadios-clinicos2 */
  .gris2{
    padding-top: 14%; 
 }
  .verde5{
    padding-top: 14%; font-size: 14px; padding-right: 40px;
 }
 .parrafoP{
    padding-left: 70px;
}
.parrafoP1{padding-top: 40px;}

  .popup{
    padding-top: 50px; padding-left: 100px; padding-right: 100px; text-align: left; font-size: 18px;
 }
  
/*estadios-cancer */
.gris3{
    padding-top: 14%; 
 }
 .verde6{
    padding-top: 14%; padding-right: 10px; font-size: 14px;
}
.parrafo8{
  padding-left: 20px;
}

.imagen1{
  top: 52%; left: 42%;
}

.o1{
  left: 20%; top: 30%;
}

.image2{
 top: 52%; left: 57%; 
}

.o2{
  top: 30%; left: 20%;
}
.imagen3{
  top: 52%; left: 76%;
}

.o3{
   left: 20%; top: 20%;
}

.imagen4{
  top: 65%; left: 42%; 
}

.o4{
  top: 15%; left: 20%;
}
.imagen5{
  top: 65%; left: 57%;
}
.o5{
  top: 15%; left: 20%;
}
.imagen6{
  top: 65%; left: 75%;
}
.o6{
  top: 15%; left: 20%;
}
.imagen7{
  top: 65%; left: 90%;
}
.o7{
  left: 20%; top: 15%;
}

.imagen8{
  top: 78%; left: 42%;
}
.o8{
  left: 20%; top: 15%;
}
.o1, .o2, .o3, .o4, .o5, .o6, .o7, .o8{
  margin-left: -15%;
}
.o3, .o4, .o5, .o6, .o7{
    width: 720px;
  }

/* estadios-cancer2 */
.gris4{
  padding-top: 14%; padding-left: 10px;
}
.verde7{
 padding-top: 14%; padding-right: 20px; font-size: 14px;
}
.columna7{
  padding-top: 40px; padding-left: 15px;
}
.columna8{
  padding-top: 40px;
  padding-right: 15px;
}
.parrafo9{
   padding-left: 20px;
   font-size: 20px;
}
.parrafo10{
   padding-left: 20px;
   font-size: 14px;
}

/* factores */
.rosa3{
    padding-top: 12%; padding-left: 0;
}
.verde8{
    padding-top: 12%; padding-right: 20px; font-size: 13px;
}
.fuente{
  font-size: 14px;
}

  /* sistema TMN */
.green9{
 padding-top: 14%; padding-right: 20px; font-size: 13px;
}
.rosa4{
 padding-top: 14%;
}
.parraf11{
  padding-left: 20px; font-size: 15px;
}
.titleH3{
  padding-left: 20px;
}

 /* actividad interactiva */
.columna9{
  padding-top: 150px;
}
.columna10{
  padding-top: 120px;
}
.columna11{
  padding-top: 100px; padding-right: 0px; font-size: 16px;
}
.parrafo12{
  font-size: 18px; padding-left: 50px;
}
.parrafo13{
  font-size:20px;  padding-left: 20px;
}

/* ideas claves */
.rosa5{
  padding-top: 14%; padding-right: 60px;
}
.parrafo13{
  padding-left: 20px; margin-bottom: 20px;
}
.parrafo14{
  font-size: 18px;
}

}