/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-bezier-curve-bounce-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
=================================================================== */
/*https://www.w3schools.com/*/

.menu-circular {
width:0; height:0; 

margin: 205px auto; 
/*position: -webkit-sticky; /* Safari */
/*position: sticky;*/
position: relative;
top:80px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translate3d(0,0,0);
}

.menu-circular .segment {width:300px; height:300px; border-radius:100%; overflow:hidden; position:absolute; left:0; top:0; margin-left:-150px; margin-top:-150px; z-index:100;
transform:scale(0);
transition: 0.5s cubic-bezier(.58,2.4,0.5,0.5);}

.menu-circular .curve-upper {width:306px; height:306px; position:absolute; left:-153px; top:-153px; background:#FFF; border-radius:100%; 
transform:scale(0);transition: 0s;}

.menu-circular .curve-lower {width:314px; height:314px; position:absolute; left:-157px; top:-157px; border-radius:100%; overflow:hidden;transform:scale(0);transition: 0s;}

/*#2659D1 - #2159DC - LOGO0e09c1*/
.menu-circular .curve {display:block; width:115px; height:160px; background:#0e09c1; position:absolute; left:50%; top:50%;transform-origin:left top;transform:rotate(0deg) skewY(45deg);}

/*000570 AZUL OSCURO*/
.menu-circular .segment label {display:block; width:105px; height:150px; background:#0e09c1; position:absolute; left:150px; top:150px; border:1px solid #FFF; cursor: pointer;transform-origin:left top;transition: 0.25s cubic-bezier(0,0,1,1);}

.menu-circular .segment label span {display:block; width:50px; height:50px; position:absolute; left:0; top:0; right:25px; bottom:32px; margin:auto; background-position:center center; background-repeat:no-repeat;}

.menu-circular .segment label:nth-of-type(1) {transform:rotate(0deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(2) {transform:rotate(45deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(3) {transform:rotate(90deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(4) {transform:rotate(135deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(5) {transform:rotate(-180deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(6) {transform:rotate(-135deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(7) {transform:rotate(-90deg) skewY(45deg);}
.menu-circular .segment label:nth-of-type(8) {transform:rotate(-45deg) skewY(45deg);}

.menu-circular .segment label:nth-of-type(1) span {background: url(icono/jumbo3D.png); transform:skewY(-45deg) rotate(0deg);}
.menu-circular .segment label:nth-of-type(2) span {background: url(icono/puntero_lleno.png); transform:skewY(-45deg) rotate(-45deg);}
.menu-circular .segment label:nth-of-type(3) span {background: url(icono/email.png); transform:skewY(-45deg) rotate(-90deg);}
.menu-circular .segment label:nth-of-type(4) span {background: url(icono/calidad.png); transform:skewY(-45deg) rotate(-135deg);}
.menu-circular .segment label:nth-of-type(5) span {background: url(icono/personahr.png); transform:skewY(-45deg) rotate(-180deg);}
.menu-circular .segment label:nth-of-type(6) span {background: url(icono/legalp.png);transform:skewY(-45deg) rotate(-225deg);}
.menu-circular .segment label:nth-of-type(7) span {background: url(icono/video.png);transform:skewY(-45deg) rotate(-270deg);}
.menu-circular .segment label:nth-of-type(8) span {background: url(icono/engra.png);transform:skewY(-45deg) rotate(-315deg);}

.menu-circular .center{display:block; width:64px; height:64px;
 border-radius:100%; background:#FFF url(imagen/hr00.png) no-repeat center center; 
 overflow:hidden; cursor:pointer; position:absolute; z-index:200; left:10; top:0; margin-left:-32px; top:-32px; box-shadow:0 0 0 3px #FFF;}

.menu-circular .soporte {width:0; height:0; position:absolute; top:0; left:0;} 
.menu-circular .soporte input {position:absolute; display:none;}

.menu-circular #toggle:checked + .segment {transition: 0.5s cubic-bezier(.58,3,0.5,0.5);transform:scale(1);}
.menu-circular #toggle:checked ~ .center {transition: 0.5s cubic-bezier(.58,3,0.5,0.5);transform:scale(1.2);}
.menu-circular #toggle:checked ~ .curve-upper {transition: 0.5s cubic-bezier(.58,3,0.5,0.5);transform:scale(1);}
.menu-circular #toggle:checked ~ .curve-lower {transition: 0.5s cubic-bezier(.58,3,0.5,0.5);transform:scale(1);}

.menu-circular #c1:checked ~ .segment label:nth-of-type(1),
.menu-circular #c2:checked ~ .segment label:nth-of-type(2),
.menu-circular #c3:checked ~ .segment label:nth-of-type(3),
.menu-circular #c4:checked ~ .segment label:nth-of-type(4),
.menu-circular #c5:checked ~ .segment label:nth-of-type(5),
.menu-circular #c6:checked ~ .segment label:nth-of-type(6),
.menu-circular #c7:checked ~ .segment label:nth-of-type(7),
.menu-circular #c8:checked ~ .segment label:nth-of-type(8) {background:#FF9F3B;} /*F58500NARANJA LOGOff9f3b*/

.menu-circular #c1:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(0deg)}
.menu-circular #c2:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(45deg)}
.menu-circular #c3:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(90deg)}
.menu-circular #c4:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(135deg)}
.menu-circular #c5:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(180deg)}
.menu-circular #c6:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(225deg)}
.menu-circular #c7:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(270deg)}
.menu-circular #c8:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(315deg)}

.menu-circular .sub {width:300px; height:0; overflow:hidden; position:absolute; left:-150px; top:150px;}

.menu-circular .sub dl {padding:0; margin:0; width:300px; position:absolute; top:-190px; left:0;transition: 0.5s cubic-bezier(.58,3,0.5,0.5);}
.menu-circular .sub dl dt {text-align:center; font:bold 16px/20px 'Lato', arial, sans-serif; color:#2659D1;}
.menu-circular .sub dl dd {padding:0; margin:0; text-align:center; font:normal 15px/20px 'Lato', arial, sans-serif; color:#000;}
.menu-circular .sub dl dd a {color:#004040;}

.menu-circular #c1:checked ~ #toggle:checked ~ .sub dl:nth-of-type(1),
.menu-circular #c2:checked ~ #toggle:checked ~ .sub dl:nth-of-type(2),
.menu-circular #c3:checked ~ #toggle:checked ~ .sub dl:nth-of-type(3),
.menu-circular #c4:checked ~ #toggle:checked ~ .sub dl:nth-of-type(4),
.menu-circular #c5:checked ~ #toggle:checked ~ .sub dl:nth-of-type(5),
.menu-circular #c6:checked ~ #toggle:checked ~ .sub dl:nth-of-type(6),
.menu-circular #c7:checked ~ #toggle:checked ~ .sub dl:nth-of-type(7),
.menu-circular #c8:checked ~ #toggle:checked ~ .sub dl:nth-of-type(8) {top:20px; transition: 0.5s cubic-bezier(.58,3,0.5,0.5) 0.5s;} 

.menu-circular #c1:checked ~ #toggle:checked ~ .sub,
.menu-circular #c2:checked ~ #toggle:checked ~ .sub,
.menu-circular #c3:checked ~ #toggle:checked ~ .sub,
.menu-circular #c4:checked ~ #toggle:checked ~ .sub,
.menu-circular #c5:checked ~ #toggle:checked ~ .sub,
.menu-circular #c6:checked ~ #toggle:checked ~ .sub,
.menu-circular #c7:checked ~ #toggle:checked ~ .sub,
.menu-circular #c8:checked ~ #toggle:checked ~ .sub {height:250px}