@font-face { font-family: 'OSL'; src: url('package://assets/font/OpenSans-Bold.ttf') format('truetype'); } *:focus { outline: none; } body { font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:14px; font-style:normal; font-variant:normal; font-weight:400; line-height:3; } span.arrow { display:none!important; } * { box-sizing:Border-box; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:#000!important; font-family:OSL; } .circular-menu-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:none; width:auto; } .circular-menu { width:600px; height:600px; position:relative; overflow:hidden; border-radius:50%; z-index:1; list-style:none; box-shadow:0 0 15px #333; } .center-section { width: 360px; height: 360px; position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -180px; border-radius: 50%; text-align: center; background-color: white; box-shadow: inset 0 0 15px #333; display: none; z-index: 2; cursor: default; padding: 55px; } .circular-menu li:hover ~ .center-section.section-intro,.touch .circular-menu li:focus ~ .center-section.section-intro { display:none; } .touch .circular-menu li:focus { outline:0; } .circular-menu li div.label { position:absolute; width:180px; height:180px; z-index:2; } .circular-menu li div.label p { text-align:center; max-width:145.8px; color:#000; font-size: 12px; margin: 65px 20px 7px; line-height: 1; } .circular-menu li span.arrow { position:absolute; width:30px; height:30px; display:block; transition:all 300ms ease-out; z-index:2; } .circular-menu li .bg { width:350px; height:300px; position:absolute; transform-origin:0 300px; margin-top:-300px; left:50%; top:50%; transition: background 300ms ease-out; } .circular-menu li { position:absolute; text-decoration:none; top:50%; left:50%; display:none; } .circular-menu li:nth-child(1) .bg { transform:rotate(-70deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(1) span.arrow { transform:rotate(-45deg); background:rgba(255,255,255,0.6); margin:-225px 0 0 -15px; } .circular-menu li:nth-child(1) div.label { margin:-330px 0 0 -90px; } .circular-menu li:nth-child(2) .bg { transform:rotate(-30deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(2) span.arrow { transform:rotate(-5deg); background:rgba(255,255,255,0.6); margin:-175.869333055px 0 0 119.9853980342px; } .circular-menu li:nth-child(2) div.label { margin:-273.8506663486px 0 0 64.2690263248px; } .circular-menu li:nth-child(3) .bg { transform:rotate(10deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(3) span.arrow { transform:rotate(35deg); background:rgba(255,255,255,0.6); margin:-51.4661173101px 0 0 191.8096281326px; } .circular-menu li:nth-child(3) div.label { margin:-131.6755626401px 0 0 146.3538607229px; } .circular-menu li:nth-child(4) .bg { transform:rotate(50deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(4) span.arrow { transform:rotate(75deg); background:rgba(255,255,255,0.6); margin:90px 0 0 166.8653347947px; } .circular-menu li:nth-child(4) div.label { margin:30px 0 0 117.8460969083px; } .circular-menu li:nth-child(5) .bg { transform:rotate(90deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(5) span.arrow { transform:rotate(115deg); background:rgba(255,255,255,0.6); margin:182.335450365px 0 0 56.8242300984px; } .circular-menu li:nth-child(5) div.label { margin:135.5262289886px 0 0 -7.9151656019px; } .circular-menu li:nth-child(6) .bg { transform:rotate(130deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(6) span.arrow { transform:rotate(155deg); background:rgba(255,255,255,0.6); margin:182.335450365px 0 0 -86.8242300984px; } .circular-menu li:nth-child(6) div.label { margin:135.5262289886px 0 0 -172.0848343982px; } .circular-menu li:nth-child(7) .bg { transform:rotate(170deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(7) span.arrow { transform:rotate(195deg); background:rgba(255,255,255,0.6); margin:90px 0 0 -196.8653347945px; } .circular-menu li:nth-child(7) div.label { margin:30px 0 0 -297.846096908px; } .circular-menu li:nth-child(8) .bg { transform:rotate(210deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(8) span.arrow { transform:rotate(235deg); background:rgba(255,255,255,0.6); margin:-51.4661173026px 0 0 -221.8096280805px; } .circular-menu li:nth-child(8) div.label { margin:-131.6755626315px 0 0 -326.3538606634px; } .circular-menu li:nth-child(9) .bg { transform:rotate(250deg) skew(-50deg); background:rgba(255,255,255,0.6); } .circular-menu li:nth-child(9) span.arrow { transform:rotate(275deg); background:rgba(255,255,255,0.6); margin:-175.8693324509px 0 0 -149.985394581px; } .circular-menu li:nth-child(9) div.label { margin:-273.8506656582px 0 0 -244.2690223782px; } .m { margin-left:58px; margin-top: -8px; } .m1 { margin-left:2.4vw; margin-top:-.6vw; } .m2 { margin-left:60px; margin-top: -7px; } .m4 { margin-left:68px; margin-top: -6px; transform: rotate(-0deg); width: 70px; } .m5 { margin-left:53px; margin-top: -6px; transform: rotate(1deg); } .m6 { transform:scaleX(-1); margin-top:-5px; margin-bottom:20px; margin-left:54px; max-width:none; width:60px; } .middletext { z-index:20000; text-align:center; color:#000!important; position:absolute; top:13vw; left:48vw; font-size:13px; } .information { background:rgba(255,255,255,0.6); border-radius:2px; max-width:none; width: 41vw; box-shadow:0 0 15px #333; position: absolute; top: 630px; left: 30vw; margin-top: 1vw; display: none; } .information-title { text-align:center; } .information-text { height:174px; margin: 1px 40px 35px; } .center-section.section-intro,.circular-menu li:nth-child(1):hover div.center-section.section-1,.touch .circular-menu li:nth-child(1):focus div.center-section.section-1,.circular-menu li:nth-child(2):hover div.center-section.section-2,.touch .circular-menu li:nth-child(2):focus div.center-section.section-2,.circular-menu li:nth-child(3):hover div.center-section.section-3,.touch .circular-menu li:nth-child(3):focus div.center-section.section-3,.circular-menu li:nth-child(4):hover div.center-section.section-4,.touch .circular-menu li:nth-child(4):focus div.center-section.section-4,.circular-menu li:nth-child(5):hover div.center-section.section-5,.touch .circular-menu li:nth-child(5):focus div.center-section.section-5,.circular-menu li:nth-child(6):hover div.center-section.section-6,.touch .circular-menu li:nth-child(6):focus div.center-section.section-6,.circular-menu li:nth-child(7):hover div.center-section.section-7,.touch .circular-menu li:nth-child(7):focus div.center-section.section-7,.circular-menu li:nth-child(8):hover div.center-section.section-8,.touch .circular-menu li:nth-child(8):focus div.center-section.section-8,.circular-menu li:nth-child(9):hover div.center-section.section-9,.touch .circular-menu li:nth-child(9):focus div.center-section.section-9 { display:block; } .circular-menu li:nth-child(1),.circular-menu li:nth-child(2),.circular-menu li:nth-child(3),.circular-menu li:nth-child(4),.circular-menu li:nth-child(5),.circular-menu li:nth-child(6),.circular-menu li:nth-child(7),.circular-menu li:nth-child(8),.circular-menu li:nth-child(9) { display:block; cursor:pointer; } .circular-menu li:nth-child(1):hover .bg,.touch .circular-menu li:nth-child(1):focus .bg,.circular-menu li:nth-child(2):hover .bg,.touch .circular-menu li:nth-child(2):focus .bg,.circular-menu li:nth-child(3):hover .bg,.touch .circular-menu li:nth-child(3):focus .bg,.circular-menu li:nth-child(4):hover .bg,.touch .circular-menu li:nth-child(4):focus .bg,.circular-menu li:nth-child(5):hover .bg,.touch .circular-menu li:nth-child(5):focus .bg,.circular-menu li:nth-child(6):hover .bg,.touch .circular-menu li:nth-child(6):focus .bg,.circular-menu li:nth-child(7):hover .bg,.touch .circular-menu li:nth-child(7):focus .bg,.circular-menu li:nth-child(8):hover .bg,.touch .circular-menu li:nth-child(8):focus .bg,.circular-menu li:nth-child(9):hover .bg,.touch .circular-menu li:nth-child(9):focus .bg { background:rgba(255,255,255,0.9); } img { width:60px; } .options { background:rgba(255,255,255,0.6); border-radius:2px; max-width:none; width:auto; box-shadow:0 0 15px #333; margin: 20px 16vw 20px 65vw; position: relative; z-index: 200; top: 3vw; padding-bottom: 0vw; height: 17vw; left: 9vw; } .options { text-align:center; } .options-buttons { padding-top: 0.2vw; padding-bottom: 0.2vw; background: #81ff9d; border: 1px solid rgba(0, 0, 0, 0.2); margin-left: 3vw; margin-right: 3vw; border-radius: 20px 0px; cursor: pointer; font-size: 1vw; transition: 0.1s; box-shadow: 0 0 5px #333; } .options-buttons:hover { background: #b2ffc3; } .price { height: 1vw; padding: 2vw; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.3); margin-left: 2vw; margin-right: 2vw; margin-top: 2vw; /*box-shadow: 0 0 5px #333;*/ } input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] { padding: 0px 0px; } input { -webkit-appearance: textfield; background-color: #cccccc; cursor: text; padding: 1px; border-width: 0px; border-style: inset; border-color: initial; border-image: initial; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; width: 280px; margin-left: 171px; height: 41px; position: relative; top: -30px; font-size: 21px; z-index: 10000000; } .price-text { position: relative; top: -2.6vw; z-index: 2000000; font-size: 1vw; } .number-dollar { position: relative; font-size: 2vw; top: -8vw; left: 5vw; font-family: 'OSL'; }