447 lines
11 KiB
CSS
447 lines
11 KiB
CSS
@font-face {
|
|
font-family: 'OSL';
|
|
src: url('../../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;
|
|
}
|
|
div {
|
|
user-select: none;
|
|
}
|
|
|
|
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';
|
|
}
|