/* CSS Document */

@import "https://fonts.googleapis.com/css?family=Montserrat:400,700";

body{
	background-color:#FFFFFF;
	margin:0;
	font-family:Montserrat, serif;
	font-size:0.8em;
	overflow-x: hidden;
}

/***** SCROLL *****/

::-webkit-scrollbar{
  width: 10px;
  background: white;
}
::-webkit-scrollbar-button{
  width:8px;
  height: 5px;
}
::-webkit-scrollbar-track{
  background:white;
  border: none;
}
::-webkit-scrollbar-thumb{
  background: #0079c8;
}
::-webkit-scrollbar-thumb:hover{
    background:  #0079c8;
}

/*** GENERAL ***/
#container{
	width:100%;
	height:100%;
	position:absolute;
}
#contenido{	
	width:920px;
	height:504px;
	margin:0 auto;
}
#cabecera{	
	width:100%;
	height:115px;
	float:left;
}
#logo{
	width:110px;
	height:110px;
	float:left;
	cursor:pointer;
}
#logo img{
	width:100%;
}
.claim {
	font-weight: bold;
	font-size: 1.85em;
	color:#0079C8;
	width:470px;
	padding-top:25px;
}
#main{
	width:920px;
	height:504px;
	background-color:#409BD6;
	float:left;
}

/*** HOME ***/
#figura {
	width:460px;
	height:504px;
	background-image:url(images/figura.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
	float:left;
}
#portada{
	width:205px;
	margin-left:70px;
	margin-top:170px;
	color:#FFFFFF;	
	font-size:1.1em;
}
#zonainfo #portada p{
	margin:10px 0;
}

#zonainfo .added {font-size:12px;padding:10px 0;margin-top:15px;border-top:1px solid white;}
#zonainfo .added p  {font-size:12px;margin-bottom:10px;}
#zonainfo .added ul {padding-left:15px;margin-bottom:10px;}
#zonainfo .added ol {padding-left:20px;list-style-type: lower-alpha;margin-bottom:10px;}
#flecha{
	margin-left:70px;
	margin-top:10px;
	opacity:1;
	cursor:pointer;
}

/*
#flecha:hover {
	margin-left:70px;
	margin-top:10px;
	opacity:0.5;
	cursor:pointer;
}
*/
/*** CONTENIDOS ***/
.boton {
	width:24px;
	height:24px;
	-moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
	background:#cccccc;
	transition:all 0.3s ease;
	cursor:pointer;
	opacity:0.5;
	background-image:url(images/circ.png);
	background-repeat:no-repeat;
	background-position:center center;
}
.boton:hover {
	background:#d77e69;	
	opacity:1;
	background-image:url(images/circ2.png);
	background-repeat:no-repeat;
	background-position:center center;
}
.boton_fijo {
	width:150px;
	height:150px;
	-moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
	background:#d77e69;
	cursor:pointer;
	opacity:1;
	background-image:url(images/circ2.png);
	background-repeat:no-repeat;
	background-position:center center;
}
#espacio{
	height:9%;
	width:100%;
	display:block;
}
/*** botones figura ***/
#btn_ojo, #btn_hombro, #btn_brazo, #btn_pecho, #btn_piel, #btn_prostata{
    width: 24px;
    height: 24px;
	display:none;
}
#btn_ojo{
	margin-left: 48%;
	margin-top: 0%;
}
#btn_hombro{
	margin-left: 54%;
	margin-top: 4%;
}
#btn_brazo{
	margin-left: 32%;
	margin-top: 4%;
}
#btn_pecho{
	margin-left: 50%;
	margin-top: 0%;
}
#btn_piel{
	margin-left: 64%;
	margin-top: 6%;
}
#btn_prostata{
	margin-left: 50%;
	margin-top: 2%;
}

/*** informacion ****/
#zonainfo {
	width:403px;
	height:504px;
	background-image:url(images/portada.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	background-size:cover;
	float:left;
	display:block;
}
#zonainfo p{
	margin:0;
}
#capa_transp {
	display:none;
    width: 460px;
    height: 504px;
    background-color: #1b313b;
    opacity: 0.5;
    position: absolute;
    z-index: 100;
}
/*** info previa ***/
#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata{
	/*animation: rota 1s ease-out 1;*/
	position:absolute;
	animation-name: rota;
    animation-duration: 1.3s;
    animation-iteration-count: 1;
	animation-timing-function: ease-out-in;
	width:404px;
	height:404px;
	background-image:url(images/ruleta.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-size:cover;
	display:none;
}
@keyframes rota {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata{
	position:absolute;
	color:#0079C8;
	width:180px;
	padding:75px 125px 0 115px;
	display:none;
}
#cont_prostata{
    width: 210px;
    padding: 70px 115px 0 115px;
}
#cont_brazo p, #cont_prostata p{
	margin-top: 5px;
}
.txt_tit{
	font-size:1.4em;
	font-weight:bold;
	margin-top:10px;
	line-height:95%;
}
.iconos{
	padding-left:35px;
	padding-bottom:8px;
}
#cont_hombro .iconos{
	padding-left:25px;
}
#img_masinfo{
	opacity:0;
}
#btn_masinfo{
	position:absolute;
	top:410px;
	opacity:1;
	margin-left: 10px;
}
/*#btn_masinfo:hover{
	position:absolute;
	top:410px;
	opacity:0.5;
	margin-left: 10px;
}*/
#txt_legal{
	position:absolute;
	top:590px;
	font-size:0.85em;
	color:#0079C8;
	margin-left:65px;
	display:none;
	width: 300px;
}
#flecha_volver{
	position:absolute;
	top:580px;
	margin-left:350px;
	display:none;
}

/*** mas informacion ***/
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
	overflow: auto;
	display:none;
	position:absolute;
	color:#0079C8;
	width:320px;
	height:420px;
	margin:30px 30px 30px 50px;
	padding-right:20px;
	
	scrollbar-arrow-color: white;
	scrollbar-track-color: white;
	scrollbar-face-color: #0079c8;
	scrollbar-shadow-color: #0079c8;
}
.txt_tit_masinfo{
	font-size:1.4em;
	font-weight:bold;
}

@media screen and (max-width: 920px) {
#contenido {
	width:768px;
}
#main {
	width:768px;
}
#figura {
	width:400px;
}
#zonainfo {
    width: 368px;
}
#capa_transp{
    width: 368px;
	height: 504px;
}
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
	width: 310px;
	margin:30px 0 0 30px;
}
#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata {
    width: 368px;
    height: 368px;
}
#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata {
    padding: 70px 0px 0 100px;
}
#cont_brazo, #cont_prostata {
    padding: 55px 0px 0 100px;
}
.txt_tit {
    font-size: 1.35em;
}
#txt_legal {
    margin-left: 45px;
}
#flecha_volver {
    margin-left: 320px;
}
}
@media screen and (max-width: 767px) and (min-height: 420px){
#contenido{	
	width:420px;
}
#main{	
	width:420px;
}
#portada {
    width: 190px;
    margin-left: 120px;
    margin-top: 65px;
    font-size: 1.15em;
}
/*#zonainfo {
	width:420px;
    background-image: url(images/portada2.jpg);
	background-position:top center;
}*/
#figura {
	width:420px;
}
#portada {
    width: 190px;
    margin-left: 120px;
    margin-top: 65px;
    font-size: 1.15em;
}
#zonainfo {
	width:100%;
	height: 380px;
    background-image: url(images/portada2.jpg);
	background-position:top center;
}
#capa_transp{
	height: 380px;
	width:420px;
}
#flecha {
    margin-left: 55px;
    width: 30%;
}
/*#flecha:hover {
	margin-left:55px;
	width: 30%;
}*/

#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata {
    width: 360px;
    height: 360px;
    margin-top: -35px;
    margin-left: 25px;
}

#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata {
    width: 200px;
    padding: 35px 0 0 115px;
}
#cont_brazo {
    padding: 25px 0 0 115px;
}
#cont_brazo p, #cont_prostata p{
	margin-top: 5px;
}
#cont_prostata {
    width: 210px;
    padding: 25px 0 0 115px;
}
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
    width: 350px;
    height: 300px;
    margin: 30px 30px 0px 30px;
}
.iconos{
	padding-left:37px;
    padding-bottom: 5px;
}
#cont_hombro .iconos{
	padding-left:45px;
    padding-bottom: 5px;
}
.iconos img{
	width:50%;
}
#txt_legal {
    top: 975px;
    margin-left: 70px;
}
#flecha_volver {
    top: 960px;
    margin-left: 360px;
}
#btn_masinfo {
    top: 300px;
    margin-left: 0px;
	width:54%;
}
/*#btn_masinfo:hover{
    top: 300px;
    margin-left: 0px;
	width:54%;
	opacity:0.5;
}*/
#cont_prostata #btn_masinfo {
    top: 300px;
    margin-left: 10px;
	width:54%;
}
/*#cont_prostata #btn_masinfo:hover{
    top: 300px;
    margin-left: 10px;
	width:54%;
	opacity:0.5;
}*/
}
@media screen and (max-width: 420px) {
body{
	font-size:0.75em;
}
#contenido{	
	width:100%;
}
#cabecera{
	height:95px;
}
#logo{
	width: 23%;
}
.claim {
    font-size: 1.45em;
    width: 75%;
	float:left;
	padding-top:20px;
}
#main{	
	width:100%;
}
#figura {
	width:100%;
	height:440px;
    background-position: center;
}
#portada {
    width: 190px;
    margin-left: 120px;
    margin-top: 85px;
    font-size: 1.15em;
}
#zonainfo {
	width:100%;
	height: 380px;
    background-image: url(images/portada2.jpg);
	background-position:top center;
}
#flecha {
    margin-left: 55px;
    width: 30%;
}
/*#flecha:hover {
	margin-left:55px;
	width: 30%;
}*/

#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata {
    width: 360px;
    height: 360px;
    margin-top: -35px;
    margin-left: 25px;
}

#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata {
    width: 200px;
    padding: 35px 0 0 120px;
}
#cont_brazo p, #cont_prostata p{
	margin-top: 5px;
}
#cont_prostata {
    width: 210px;
    padding: 25px 0 0 115px;
}
#cont_brazo {
    padding: 25px 0 0 120px;
}
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
    width: 350px;
    height: 300px;
    margin: 30px 30px 0px 30px;
}
.iconos{
	padding-left:35px;
    padding-bottom: 5px;
}
#cont_hombro .iconos, #cont_brazo .iconos {
    padding-left: 40px;
    padding-bottom: 5px;
}

#txt_legal {
    top: 885px;
    margin-left: 80px;
}
#flecha_volver {
    top: 870px;
    margin-left: 360px;
}
#btn_masinfo {
    top: 300px;
    margin-left: 0px;
	width:54%;
}
/*#btn_masinfo:hover{
    top: 300px;
    margin-left: 0px;
	width:54%;
	opacity:0.5;
}*/
#cont_prostata #btn_masinfo {
    top: 300px;
    margin-left: 10px;
	width:54%;
}
/*#cont_prostata #btn_masinfo:hover{
    top: 300px;
    margin-left: 10px;
	width:54%;
	opacity:0.5;
}*/
}

@media screen and (max-width: 385px) {
body{
	font-size:0.75em;
}
#contenido{	
	width:100%;
}
#cabecera{
	height:95px;
}
#logo{
	width: 24%;
}
.claim {
    font-size: 1.45em;
    width: 75%;
	float:left;
	padding-top:20px;
}
#main{	
	width:100%;
}
#figura {
	width:100%;
	height:440px;
    background-position: top center;
}
#portada {
    width: 170px;
    margin-left: 100px;
    margin-top: 75px;
    font-size: 1em;
}
#zonainfo {
	width:100%;
	height: 380px;
    background-image: url(images/portada2.jpg);
	background-position:top center;
}
#flecha {
    margin-left: 55px;
    width: 30%;
}
#capa_transp {
    height: 380px;
    width: 100%;
}
/*#flecha:hover {
    margin-left: 55px;
    width: 30%;
}*/
#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata {
    width: 360px;
    height: 360px;
	margin-top:-35px;
    margin-left: 0px;
}

#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata {
    width: 200px;
    padding: 35px 0 0 95px;
}
#cont_brazo p, #cont_prostata p{
	margin-top: 5px;
}
#cont_prostata, #cont_brazo {
    width: 205px;
    padding: 25px 0 0 90px;
}
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
    width: 300px;
    height: 300px;
    margin: 30px 30px 0px 30px;
}
.iconos{
	padding-left:30px;
    padding-bottom: 5px;
}
#cont_ojo .iconos, #cont_prostata .iconos {
    padding-left: 35px;
}
.iconos img{
	width:50%;
}
#txt_legal {
    top: 885px;
    margin-left: 50px;
}
#flecha_volver {
    top: 870px;
    margin-left: 310px;
}
#btn_masinfo {
    top: 300px;
    margin-left: 0px;
	width:54%;
}
/*#btn_masinfo:hover{
    top: 300px;
    margin-left: 0px;
	width:54%;
	opacity:0.5;
}*/
#cont_prostata #btn_masinfo {
    top: 300px;
    margin-left: 10px;
	width:54%;
}
/*#cont_prostata #btn_masinfo:hover{
    top: 300px;
    margin-left: 10px;
	width:54%;
	opacity:0.5;
}*/
}

@media screen and (max-width: 320px) {
body{
	font-size:0.65em;
}
#contenido{	
	width:100%;
}
#cabecera{
	height:80px;
}
#logo{
	width: 25%;
}
.claim {
    width: 75%;
	float:left;
	padding-top:20px;
    font-size: 1.60em;
}
#main{	
	width:100%;
}
#figura {
	width:100%;
	height:360px;
}
#zonainfo {
	width:100%;
	height: 360px;
    background-image: url(images/portada2.jpg);
	background-position:top center;
}
#portada {
    width: 165px;
    margin-left: 85px;
    margin-top: 55px;
	font-size: 1.15em;
}
#flecha {
    margin-left: 45px;
}
/*#flecha:hover {
    margin-left: 45px;
}*/
#btn_ojo, #btn_hombro, #btn_brazo, #btn_pecho, #btn_piel, #btn_prostata{
    width: 18px;
    height: 18px;
}
.color:hover {
	background-size:60%;
}
.color_fijo {
	background-size:60%;
}
#ruleta_ojo, #ruleta_hombro, #ruleta_brazo, #ruleta_pecho, #ruleta_piel, #ruleta_prostata {
    width: 320px;
    height: 320px;
	margin-top:-25px;
    margin-left: 0px;
}
#cont_ojo, #cont_hombro, #cont_brazo, #cont_pecho, #cont_piel, #cont_prostata {
    width: 150px;
    padding: 45px 0 0 95px;
}
#cont_brazo{
    padding: 30px 0 0 95px;
}
#cont_prostata {
    width: 170px;
    padding: 30px 0 0 90px;
}
#cont_brazo p, #cont_prostata p {
    margin-top: 5px;
}
.iconos{
	padding-left:25px;
}
.iconos img{
	width:55%;
}
#btn_masinfo {
    top: 280px;
    margin-left: 0px;
	width:54%;
}
/*#btn_masinfo:hover{
    top: 280px;
    margin-left: 0px;
	width:54%;
	opacity:0.5;
}*/
#cont_prostata #btn_masinfo {
    top: 280px;
    margin-left: 0px;
    width: 54%;
}
/*#cont_prostata #btn_masinfo:hover {
    top: 280px;
    margin-left: 0px;
    width: 54%;
    opacity: 0.5;
}*/
#txt_legal {
    top: 760px;
    margin-left: 45px;
	width:275px;
}
#masinfo_ojo, #masinfo_hombro, #masinfo_brazo, #masinfo_pecho, #masinfo_piel, #masinfo_prostata {
    width: 260px;
    height: 270px;
    margin: 30px 10px 0px 30px;
}
#flecha_volver {
    top: 745px;
    margin-left: 270px;
}
}