.splitting .word,
.splitting .char {
display: inline-block;
} .splitting .char {
position: relative;
} .splitting .char::before,
.splitting .char::after {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
visibility: hidden;
transition: inherit;
user-select: none;
} .splitting { --word-center: calc((var(--word-total) - 1) / 2); --char-center: calc((var(--char-total) - 1) / 2); --line-center: calc((var(--line-total) - 1) / 2);
}
.splitting .word { --word-percent: calc(var(--word-index) / var(--word-total)); --line-percent: calc(var(--line-index) / var(--line-total));
}
.splitting .char { --char-percent: calc(var(--char-index) / var(--char-total)); --char-offset: calc(var(--char-index) - var(--char-center)); --distance: calc(
(var(--char-offset) * var(--char-offset)) / var(--char-center)
); --distance-sine: calc(var(--char-offset) / var(--char-center)); --distance-percent: calc((var(--distance) / var(--char-center)));
}.splitting.cells img { width: 100%; display: block; }
@supports ( display: grid ) {
.splitting.cells {
position: relative;
overflow: hidden;
background-size: cover;
visibility: hidden;
}
.splitting .cell-grid {
background: inherit;
position: absolute;
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
display: grid;
grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
}
.splitting .cell {
background: inherit;
position: relative;
overflow: hidden;
}
.splitting .cell-inner {
background: inherit;
position: absolute;
visibility: visible; width: calc(100% * var(--col-total));
height: calc(100% * var(--row-total)); left: calc(-100% * var(--col-index));
top: calc(-100% * var(--row-index));
} .splitting .cell {
--center-x: calc((var(--col-total) - 1) / 2);
--center-y: calc((var(--row-total) - 1) / 2); --offset-x: calc(var(--col-index) - var(--center-x));
--offset-y: calc(var(--row-index) - var(--center-y)); --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) ); --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
}
}.wlwl_lucky_wheel_content,
.wlwl_lucky_wheel_content * {
box-sizing: border-box;
}
@font-face {
font-family: "woocommerce-lucky-wheel";
src: url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.eot);
src: url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.eot?#iefix) format("embedded-opentype"),
url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.woff) format("woff"),
url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.ttf) format("truetype"),
url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.svg) format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "woocommerce-lucky-wheel";
src: url(//centreleideal.ro/wp-content/plugins/woocommerce-lucky-wheel/fonts/woocommerce-lucky-wheel.svg) format("svg");
}
}
[class^="wlwl-"]:before, [class*=" wlwl-"]:before,
[class^="wlwl-"]:after, [class*=" wlwl-"]:after {
font-family: "woocommerce-lucky-wheel";
font-size: 20px;
font-style: normal;
margin: 0;
padding: 0;
}
.wlwl-location:before {
content: "\f100";
}
.wlwl-giftbox:before {
content: "\f101";
}
.wlwl-cancel:before {
content: "\f103";
font-size: 35px;
cursor: pointer;
}
.wlwl-wheel:before {
content: "\f104";
}
.wc-lucky-wheel-shortcode-container,
.wc-lucky-wheel-shortcode-container * {
box-sizing: border-box;
}
.wc-lucky-wheel-shortcode-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
margin: 20px;
padding: 30px 10px;
max-width: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wc-lucky-wheel-shortcode-content-container {
width: calc(40% - 10px);
padding: 20px;
display: block;
text-align: center;
} .wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-canvas {
position: relative;
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-canvas canvas {
position: absolute;
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-canvas canvas:not(.wc-lucky-wheel-shortcode-wheel-canvas-2) {
transform: rotate(0deg);
} .wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-pointer-container {
position: absolute;
text-align: center;
vertical-align: middle;
display: table;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0 0 0 9%;
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-pointer-main {
display: table-cell;
vertical-align: middle;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-pointer {
position: relative;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-pointer-container {
padding: 0 0 1% 95%;
}
.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-pointer:before {
text-shadow: 4px -2px 0 rgba(0, 0, 0, 0.2);
}
.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-pointer-container .wc-lucky-wheel-shortcode-wheel-pointer-main {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
line-height: 1;
}
.wc-lucky-wheel-shortcode-margin-position .wc-lucky-wheel-shortcode-wheel-pointer-container .wc-lucky-wheel-shortcode-wheel-pointer-main .wc-lucky-wheel-shortcode-wheel-pointer:after {
content: "";
position: absolute;
background-color: #fff;
width: 20px;
height: 20px;
bottom: 20px;
left: 30%;
box-shadow: 1px -2px 3px rgba(0, 0, 0, 0.3);
border-radius: 50%;;
} .wc-lucky-wheel-shortcode-pointer-position-top .wc-lucky-wheel-shortcode-wheel-container {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.wc-lucky-wheel-shortcode-pointer-position-top canvas {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.wc-lucky-wheel-shortcode-pointer-position-top .wc-lucky-wheel-shortcode-wheel-pointer:before {
text-shadow: 4px 2px 0 rgba(0, 0, 0, 0.2);
}
.wc-lucky-wheel-shortcode-pointer-position-top .wc-lucky-wheel-shortcode-wheel-pointer:after {
box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
} .wc-lucky-wheel-shortcode-pointer-position-bottom .wc-lucky-wheel-shortcode-wheel-container {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.wc-lucky-wheel-shortcode-pointer-position-bottom canvas {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} .wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-field-wrap {
width: 100%;
text-align: center;
margin: 10px 0;
position: relative;
display: inline-block;
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-field-error {
position: absolute;
font-size: 13px;
padding: 0 5px;
bottom: -19px;
border-radius: 5px;
color: red;
display: none;
opacity: 0;
transition: opacity 500ms;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}
.wc-lucky-wheel-shortcode-required-field .wc-lucky-wheel-shortcode-wheel-field-error {
display: block;
opacity: 1;
}
.wc-lucky-wheel-shortcode-container input.wc-lucky-wheel-shortcode-wheel-field {
margin: 0;
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
outline: 0;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: left;
line-height: 1.21428571em;
padding: .67857143em 1em;
background: #fff;
border: 1px solid rgba(34, 36, 38, .15);
color: rgba(0, 0, 0, .87);
border-radius: .28571429rem;
-webkit-transition: border-color .1s ease, -webkit-box-shadow .1s ease;
transition: border-color .1s ease, -webkit-box-shadow .1s ease;
transition: box-shadow .1s ease, border-color .1s ease;
transition: box-shadow .1s ease, border-color .1s ease, -webkit-box-shadow .1s ease;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
font-weight: 300;
} .wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-button-wrap {
border-radius: 3px;
font-size: 22px;
cursor: pointer;
margin: 10px 0 0;
display: inline-block;
padding: 10px 20px;
font-weight: 300;
opacity: 1;
-webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset;
box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset;
-webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset;
box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity .2s ease, background-color .2s ease, color .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
transition: opacity .2s ease, background-color .2s ease, color .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
transition: opacity .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
transition: opacity .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
will-change: '';
-webkit-tap-highlight-color: transparent;
width: 100%;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
line-height: 1;
} .wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-result-container {
display: block;
width: 100%;
} .wc-lucky-wheel-shortcode-required-field input {
border: 1px solid red !important;
} .wc-lucky-wheel-shortcode-wheel-gdpr-wrap {
font-size: 14px;
margin-bottom: -15px;
margin-top: 5px;
text-align: left;
}
.wc-lucky-wheel-shortcode-wheel-gdpr-wrap input[type="checkbox"] {
margin: 5px;
} @media screen and (max-width: 600px) {
.wc-lucky-wheel-shortcode-container {
flex-direction: column-reverse;
}
.wc-lucky-wheel-shortcode-content-container {
width: 100%;
}
.wc-lucky-wheel-shortcode-container .wc-lucky-wheel-shortcode-wheel-button-wrap {
font-size: 18px;
padding: 8px;
}
}
@media screen and (max-width: 480px) {
.wc-lucky-wheel-shortcode-container {
margin: 10px;
}
}  .wc-lucky-wheel-shortcode-loading {
position: relative;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0s linear, opacity .1s ease;
transition: all 0s linear, opacity .1s ease;
color: transparent !important;
}
.wc-lucky-wheel-shortcode-loading:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -.64285714em 0 0 -.64285714em;
width: 1.28571429em;
height: 1.28571429em;
-webkit-animation: button-spin .6s linear;
animation: button-spin .6s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 500rem;
border-color: #fff transparent transparent;
border-style: solid;
border-width: .2em;
box-shadow: 0 0 0 1px transparent;
}
.wc-lucky-wheel-shortcode-loading:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -.64285714em 0 0 -.64285714em;
width: 1.28571429em;
height: 1.28571429em;
border-radius: 500rem;
border: .2em solid rgba(0, 0, 0, .15);
}
@keyframes button-spin {
from {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}