@charset "utf-8";


.circular {
 width: 412px;
    height: 412px;
    border-right: 1000px;
    float: left;
}




.contcircular {
    height: 400px; /*la distancia entre el circulo y titulo texto cocteleria*/
    overflow: visible;
   margin: 0 auto 0 auto;
	text-align: center;
    width: 350px;
	padding: 0; /*corre todo para el otro lado*/
}

.circular li {

    position: absolute;
    font-size: 1.85em;
    width: 8.56em;  /*corre todas la huinchas de colores de un lado pa otro*/
    height: 8.8em;
    overflow: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; /*corre hacia arriba huinchas de color*/
    border: 2px solid transparent; /*grosor de las lineas*/
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    color: #aaa;
    left: 50.5%;  /*correo lineas y texto a la derecha al aumentar %*/
    top: 15%; /* grosor del boton linea  de color*/
    margin-top: -3.3em;  /* grosor del boton linea  de color*/
    margin-left: -10.02em;
}


.desactive{
    border-color: #3C3C3C!important;
    color: #3C3C3C!important;
}

.circular li a {
    display: block;
    font-size: 1.02em;  /* *********este con circulo li centro texto*/  /* letra del menu y huincha color)*/
    height: 12.6em; /* se agrandar huincha pa abajo)*/
    width: 14.2em; /* la letra se entra se esconde para la izquierda)*/
	position: absolute;
    bottom: -6.75em;
    right: -6.75em;
    text-decoration: none;
    color: #333;
    -webkit-transition: background-color .3s ease, -webkit-transform .8s ease;
    transition: background-color .3s ease, -webkit-transform .8s ease;
    transition: background-color .3s ease, transform .8s ease;
    webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    transform: skew(-58.5deg) rotate(-68deg) scale(0.9); /* el 59.9 hace que el alto de las huinchas edl lado izquierda se agrande o achique*/
    border-radius: 100%; /* la redondes de la curva de cada linea */
    text-align: right;
  /*
  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;*/
  
}

.contcircular li:hover a{
    right: -6.1em;  /*hace que tanto la linea o el boton cresca al tocarlo*/
}

.contcircular .activo a{
    right: -6.8em;  /*este hace que se levanten los botones de los lados al tocar uno*/
}
.contcircular .activo_prev a{
    right: -6.7em;
}

.contcircular ul{
    position: relative;   /*las lineas y texto*/
}




.octavo {
  border: solid 4px #E7E77A;   /*1px es el espacio entre linea y texto*/
  background-color:#E7E77A;  /*boton AMARILLO / NIÑOS*/
	margin-right: 12px;
}

.noveno {
  border: solid 3px #3A9EA1;  /* con el 3px logre que entrara la palabra cocteleria*/
  background-color:#3A9EA1;  /*boton aZUL / HOMBRE*/
	margin-right: 12px;
}

.decimo {
  border: solid 4px #EEEEEE;
  background-color: #EEEEEE;  /*boton BLANCO NOVIAS*/
	margin-right: 12px;
}


.onceavo {
  border: solid 7px #C350AB;
  background-color: #C350AB;  /*boton ROSA / MUJERES*/
	margin-right: 12px;
}


.enlace {  /* texto de los botones*/
    position: fixed;
    top: -38px;  /* separacion de texto con huincha el aire*/
    font-size: 0.54em;  /* tamaño del texto del boton*/
    margin-left: 156px; /* *********este con circulo li centro texto*/
    transform: rotate(10deg) scale(1);
    font-family: arial;
    font-weight: bold;
	  letter-spacing: 1.1px;
  
  
}


#imagencentral{
    background-image: url("../images/logogala.png");
      position: relative;
	width: 330px;
    height: 330px;
    border-radius: 2000px;
    left: 0px;
    top: 0px;
	background-size: cover;
	
}

#cont-flecha{
    width: 100%;
    height: 100%;
    border-radius: 1000px; 
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
  
}


#contenedorproducto {
    width: 530px;
    height: 550px;
    margin-left: 0px;
    float: left;
}

.octavo .enlace {
    transform: rotate(176deg) scale(1); /*(179DEG) ES EL ANGULO DE LA PALABRA*/
    color:#E7E77A; /*amarillo / NIÑOS*/
}

.noveno .enlace {
    transform: rotate(179deg) scale(1);
    color: #3A9EA1; /*aZUL / HOMBRE*/
}

.decimo .enlace {
    transform: rotate(177deg) scale(1);
    color: #EEEEEE; /*BLANCO NOVIAS, texto de boton*/
	text-align: center;
}

.onceavo .enlace {
    transform: rotate(175deg) scale(1);
    color: #C350AB ; /*ROSADO / MUJER texto del boton*/
}



/*flecha*/


.flecha {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 30px solid #ffffff;
  margin: 0 auto;
  padding-top: 10px;
}