[09-May-2025 10:50:48 UTC] PHP Warning: Use of undefined constant CONFIG_MODE - assumed 'CONFIG_MODE' (this will throw an Error in a future version of PHP) in /accounts/vemcomusic/public_html/config/contact.php on line 3
Warning: Cannot modify header information - headers already sent by (output started at /accounts/vemcomusic/public_html/config/error_log:1) in /accounts/vemcomusic/public_html/controller/styleController.php on line 13
Warning: Cannot modify header information - headers already sent by (output started at /accounts/vemcomusic/public_html/config/error_log:1) in /accounts/vemcomusic/public_html/controller/styleController.php on line 14
/*! normalize.css v9.0.1 | MIT License | github.com/csstools/normalize.css */
html {
line-height: 1.15;
-ms-text-size-adjust: 100%
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible
}
main {
display: block
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b, strong {
font-weight: bolder
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button, input, select {
margin: 0
}
button {
overflow: visible;
text-transform: none
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button
}
fieldset {
padding: .35em .75em .625em
}
input {
overflow: visible
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
select {
text-transform: none
}
textarea {
margin: 0;
overflow: auto
}
[type=checkbox], [type=radio] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
::-moz-focus-inner {
border-style: none
}
:-moz-focusring {
outline: 1px dotted ButtonText
}
details, dialog {
display: block
}
dialog {
background-color: #fff;
border: solid;
color: #000;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content
}
dialog:not([open]) {
display: none
}
summary {
display: list-item
}
[hidden], template {
display: none
}
html {
font-size: 100%;
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0
}
body, html {
overflow-x: hidden
}
body {
font-family: -apple-system, BlinkMacSystemFont, Lato, Helvetica, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
line-height: 1.52947;
font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
direction: ltr;
color: #323232;
background-color: #fff
}
.x-container {
position: relative;
max-width: 100%;
margin-left: 3.0625vw;
margin-right: 3.0625vw
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.align-right {
text-align: right
}
.align-center {
text-align: center
}
.color-white {
color: #fff
}
.color-blue {
color: #223e91
}
.color-red {
color: #b81e1b
}
.background-blue {
background-color: #3560e1
}
.section-title {
font: 5.2585vw/.8 Kenyan Coffee, sans-serif;
font-weight: 700;
font-style: italic
}
.overlay {
position: fixed;
z-index: -1;
left: -9999px;
left: -624.9375rem;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear
}
.is-visible {
opacity: 1;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.text.text-visible {
overflow: visible;
max-height: none;
height: 100%
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.section-title {
font-size: 2rem;
width: 90%;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1095
}
.section-title span {
margin-right: 1%
}
.section-title span:last-child {
margin-right: 0
}
}
body .swiper-container {
overflow: inherit
}
.product-slider .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: none;
width: 8.35vw;
height: 8.35vw;
right: 3.4585vw;
margin-top: -9vw
}
#out {
position: fixed;
top: 0;
z-index: 5000;
color: red
}
.product-section {
background: -webkit-gradient(linear, right top, left top, from(#000), color-stop(49.72%, #010c59), to(#010006));
background: linear-gradient(270deg, #000, #010c59 49.72%, #010006)
}
.ui-width-3-10 {
width: 30%
}
.ui-width-4-10 {
width: 40%
}
.ui-width-4-7-10 {
width: 47%
}
.ui-width-5-10 {
width: 50%
}
.ui-width-6-10 {
width: 60%
}
.ui-width-7-10 {
width: 70%
}
.ui-width-7_5-10 {
width: 75%
}
.ui-width-7_8-10 {
width: 78%
}
.ui-width-8-10 {
max-width: 80%
}
.ui-width-9-10 {
width: 90%
}
.ui-width-10-10 {
width: 100%
}
table {
border-collapse: collapse;
border-spacing: 0
}
figure {
margin: 0
}
menu, ul {
margin: 0;
padding: 0
}
ul {
list-style: none outside none
}
img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle
}
h1, h2, h3, h4, h5, h6, p {
margin: 0
}
p {
padding: 0
}
pre {
margin: 0
}
::-moz-focus-inner {
border: 0;
padding: 0
}
button {
background-color: transparent;
outline: none;
padding: 0
}
a, button, input {
border: none
}
a, button {
-webkit-tap-highlight-color: transparent
}
a:link, a:visited {
text-decoration: none
}
:focus {
outline: 3px solid #c1e0fe;
outline: 3px solid rgba(131, 192, 253, .5);
outline-offset: 1px
}
a:focus, input:focus, textarea:focus {
outline: none
}
button:disabled {
cursor: default
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown
}
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
animation-timing-function: cubic-bezier(.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
animation-timing-function: cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown
}
@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes bounceInUp {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes bounceInRight {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
@-webkit-keyframes jackInTheBox {
0% {
opacity: 0;
-webkit-transform: scale(.1) rotate(30deg);
transform: scale(.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg)
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes jackInTheBox {
0% {
opacity: 0;
-webkit-transform: scale(.1) rotate(30deg);
transform: scale(.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg)
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg)
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.75, 1.25, 1);
transform: scale3d(.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.75, 1.25, 1);
transform: scale3d(.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}
@font-face {
font-family: Kenyan Coffee;
font-weight: 400;
src: url(https://www.vemcomusic.com/fonts/kenyan-coffee-regular.woff2) format("woff2"), url(https://www.vemcomusic.com/fonts/kenyan-coffee-regular.woff) format("woff"), url(https://www.vemcomusic.com/fonts/kenyan-coffee-regular.ttf) format("truetype")
}
@font-face {
font-family: Kenyan Coffee;
font-weight: 700;
src: url(https://www.vemcomusic.com/fonts/kenyan-coffee-bold.woff2) format("woff2"), url(https://www.vemcomusic.com/fonts/kenyan-coffee-bold.woff) format("woff"), url(https://www.vemcomusic.com/fonts/kenyan-coffee-bold.ttf) format("truetype")
}
@font-face {
font-family: Lato;
font-weight: 400;
src: url(https://www.vemcomusic.com/fonts/lato-regular.woff2) format("woff2"), url(https://www.vemcomusic.com/fonts/lato-regular.woff) format("woff"), url(https://www.vemcomusic.com/fonts/lato-regular.ttf) format("truetype")
}
@font-face {
font-family: Lato;
font-weight: 700;
src: url(https://www.vemcomusic.com/fonts/lato-bold.woff2) format("woff2"), url(https://www.vemcomusic.com/fonts/lato-bold.woff) format("woff"), url(https://www.vemcomusic.com/fonts/lato-bold.ttf) format("truetype")
}
@font-face {
font-family: Marcellus;
font-weight: 400;
src: url(../marcellus-regular.woff2) format("woff2"), url(https://www.vemcomusic.com/fonts/marcellus-regular.woff) format("woff"), url(https://www.vemcomusic.com/fonts/marcellus-regular.ttf) format("truetype")
}
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #223e91;
width: 100%;
height: 3.1585vw;
position: relative;
z-index: 50;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.header {
display: none
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.header {
display: block;
height: 35px
}
}
.header-container {
max-width: 100%;
height: 100%
}
.navigation-menus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%
}
@media screen and (min-width: 20rem) {
.navigation-menus {
display: none
}
}
@media screen and (min-width: 40.625rem) {
.navigation-menus {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
.navigation-menus__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.navigation-menus__item {
margin-left: 4.5375vw
}
.navigation-menus__item:first-child {
margin-left: 0
}
.navigation-menus__text {
display: block;
position: relative;
-webkit-transition: -webkit-transform .25s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .25s cubic-bezier(.215, .61, .355, 1);
transition: transform .25s cubic-bezier(.215, .61, .355, 1);
transition: transform .25s cubic-bezier(.215, .61, .355, 1), -webkit-transform .25s cubic-bezier(.215, .61, .355, 1);
padding: 0 .1225vw
}
.navigation-menus__text:before {
content: attr(data-hover);
display: inline-block;
position: absolute;
top: 100%;
font-weight: 700;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
.navigation-menus__link {
font-size: 1.05vw;
font-weight: 400;
color: #fff;
text-transform: uppercase;
overflow: hidden;
padding: 0 .3125rem;
height: 1.0545vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.navigation-menus__link:hover .navigation-menus__text {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.navigation-menus__link {
font-size: .875rem;
height: auto
}
}
.hamburger-menu {
position: absolute;
z-index: 1080;
top: 3%;
left: 5%
}
@media screen and (min-width: 40.625rem) {
.hamburger-menu {
display: none
}
}
.hamburger-toggle {
z-index: 30;
width: 25px;
height: 19px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
outline: 0;
-webkit-transition: -webkit-transform .25s ease-out;
transition: -webkit-transform .25s ease-out;
transition: transform .25s ease-out;
transition: transform .25s ease-out, -webkit-transform .25s ease-out;
position: relative
}
.hamburger-toggle span {
width: 100%;
height: 3px;
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease
}
.hamburger-toggle span span:first-child {
width: 50%
}
.menu-box-1, .menu-box-2, .menu-box-3 {
background-color: #fff;
-webkit-transition: all .25s ease;
transition: all .25s ease
}
.open .menu-box-1 {
background-color: transparent
}
.open .menu-box-2 {
-webkit-transform: rotate(45deg) translate(-1px);
transform: rotate(45deg) translate(-1px)
}
.open .menu-box-3 {
-webkit-transform: rotate(-45deg) translate(5px, -7px);
transform: rotate(-45deg) translate(5px, -7px)
}
@media screen and (min-width: 64rem) {
.btn-st {
font-size: 1.425vw;
padding: 0;
min-width: 15.865vw;
min-height: 3.785vw
}
}
@media screen and (min-width: 20rem) {
.btn-st {
min-width: 100%;
min-height: 60px;
font-size: 1.375rem
}
}
@media screen and (min-width: 87.5rem) {
.btn-st {
font-size: 1.325vw;
padding: 0;
min-width: 14.865vw;
min-height: 3.185vw
}
}
.button-submit {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #223e91;
text-transform: uppercase;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
letter-spacing: .5px;
letter-spacing: .03125rem;
color: #fff;
text-decoration: none;
background: none;
-webkit-transition: background .4s, color .4s;
transition: background .4s, color .4s;
overflow: hidden;
border-radius: 0;
cursor: pointer
}
.button-submit:after {
content: "";
display: block;
background: #223e91;
position: absolute;
height: 100%;
left: -50%;
top: 0;
-webkit-transform: skew(50deg);
transform: skew(50deg);
-webkit-transition-duration: .45s;
transition-duration: .45s;
-webkit-transform-origin: top left;
transform-origin: top left;
width: 150%;
z-index: -1
}
.button-submit:hover {
background: transparent;
color: #000
}
.button-submit:hover:after {
width: 0
}
.button-change {
font-family: Kenyan Coffee, sans-serif;
font-weight: 400;
font-size: 22px;
font-size: 1.375rem;
color: #223e91;
text-align: center;
position: relative;
display: inline-block;
background-color: transparent;
width: 100%;
max-width: 100px;
height: 40px;
border: 1px solid #223e91;
border-radius: 5px;
overflow: hidden
}
.field-focused {
-webkit-transform: translateY(-20px) scale(.75) perspective(100px) translateZ(.001px);
transform: translateY(-20px) scale(.75) perspective(100px) translateZ(.001px);
font-size: 18px;
font-size: 1.125rem;
font-weight: 900
}
@media screen and (min-width: 64rem) and (max-width: 87.5rem) {
.field-focused {
-webkit-transform: translateY(-10px) scale(.75) perspective(100px) translateZ(.001px);
transform: translateY(-10px) scale(.75) perspective(100px) translateZ(.001px)
}
}
@media screen and (min-width: 121.875rem) {
.field-focused {
font-size: .85vw
}
}
.x-section-contact {
margin-top: 4.6875rem
}
.wrapper-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
@media screen and (min-width: 90rem) {
.wrapper-form {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
}
.from-talk {
padding: 0
}
.form-meet, .form-talk {
display: inline-block;
max-width: 100%;
width: 880px;
padding: 7.5rem
}
@media screen and (min-width: 64rem) {
.form-talk {
padding-top: 0
}
}
@media screen and (min-width: 90rem) {
.form-meet, .form-talk {
padding: 2.75vw
}
}
@media screen and (min-width: 100rem) {
.form-meet, .form-talk {
padding: 4.5vw
}
}
@media screen and (min-width: 120rem) {
.form-meet, .form-talk {
width: 47.4856vw;
padding: 4.2545vw
}
}
.form-title {
font-family: Kenyan Coffee, sans-serif;
font-size: 30px;
font-size: 1.875rem;
font-weight: 400;
color: #223e91;
text-align: center;
margin-bottom: 1.75rem
}
@media screen and (min-width: 118.75rem) {
.form-title {
font-size: 1.675vw
}
}
.field-group-input {
position: relative;
margin-bottom: .5rem
}
@media screen and (min-width: 120rem) {
.field-group-input {
margin-bottom: .5545vw
}
}
.form-input {
font-family: Lato, sans-serif;
font-weight: 400;
font-size: 20px;
font-size: 1.25rem;
color: #03195b;
width: 100%;
height: 55px;
border-bottom: 1px solid #223e91;
padding: 1.5625rem .125rem .125rem;
position: relative
}
.field-group-input-time {
display: flex;
align-items: flex-end;
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.field-group-input-time {
display: block;
}
.selectr-container {
padding: 1.5625rem .125rem .125rem;
}
}
.captcha-wrapper {
margin-top: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (min-width: 90rem) {
.captcha-wrapper {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.form-button {
margin-top: 0 !important;
}
}
.captcha {
display: flex;
justify-content: center;
}
@media screen and (min-width: 90rem) {
.captcha {
justify-content: flex-start;
}
}
.captcha div {
vertical-align: middle;
line-height: 0;
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.field-groups {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media screen and (min-width: 125rem) {
.form-input {
height: 2.685vw
}
}
@media screen and (min-width: 121.875rem) {
.form-input {
font-size: .85vw
}
}
.form-select {
color: #03195b;
width: 100%;
height: 55px;
border-bottom: 1px solid #223e91
}
.form-label, .form-select {
font-family: Lato, sans-serif;
font-weight: 400;
font-size: 20px;
font-size: 1.25rem
}
.form-label {
color: #223e91;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: color .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
transition: color .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
transition: transform .4s cubic-bezier(.25, .8, .25, 1), color .4s cubic-bezier(.25, .8, .25, 1);
transition: transform .4s cubic-bezier(.25, .8, .25, 1), color .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1)
}
@media screen and (min-width: 121.875rem) {
.form-label {
font-size: 1.05vw
}
}
.form-label-area {
bottom: 5px
}
.form-textarea {
resize: none;
border: none;
border-bottom: 1px solid #223e91
}
.form-button {
text-align: left;
margin-top: 1.25rem
}
@media screen and (min-width: 90rem) {
.form-button {
text-align: right
}
}
.field-error {
display: block
}
.field-input-error {
display: block;
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: opacity .1s cubic-bezier(.25, .8, .25, 1), border .3s cubic-bezier(.25, .8, .25, 1), -webkit-transform .3s cubic-bezier(.25, .8, .25, 1);
transition: opacity .1s cubic-bezier(.25, .8, .25, 1), border .3s cubic-bezier(.25, .8, .25, 1), -webkit-transform .3s cubic-bezier(.25, .8, .25, 1);
transition: transform .3s cubic-bezier(.25, .8, .25, 1), opacity .1s cubic-bezier(.25, .8, .25, 1), border .3s cubic-bezier(.25, .8, .25, 1);
transition: transform .3s cubic-bezier(.25, .8, .25, 1), opacity .1s cubic-bezier(.25, .8, .25, 1), border .3s cubic-bezier(.25, .8, .25, 1), -webkit-transform .3s cubic-bezier(.25, .8, .25, 1);
border-bottom: 1px solid #f44336
}
.svg-icon-cld {
width: 20px;
height: 20px;
position: absolute;
top: 30px;
right: 0
}
@media screen and (min-width: 121.875rem) {
.svg-icon-cld {
width: .9585vw;
height: .9585vw;
top: auto;
margin-top: -1.325vw
}
}
.field-groups {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.field-group-input-date, .field-group-input-time {
width: 50%;
margin-right: 5rem
}
.field-group-input-date:last-child, .field-group-input-time:last-child {
margin-right: 0
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.field-group-input-date, .field-group-input-time {
width: 100%;
margin-right: 0
}
}
.contact {
margin-bottom: 3.685vw;
position: relative
}
.cubes {
position: absolute;
width: 100%;
top: -9.265vw
}
@media screen and (min-width: 64rem) and (max-width: 118.75rem) {
.cubes {
top: -100px
}
}
.margin-t-none {
padding-top: 0
}
.contact-hero {
position: relative
}
.background-image {
background-image: url(https://www.vemcomusic.com/images/map.png);
width: 90%;
height: 46vw;
background-size: 100%;
background-repeat: no-repeat
}
@media screen and (min-width: 64rem) and (max-width: 100rem) {
.form-contact {
padding: 0
}
}
.contact-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: 3.0625vw;
margin-right: 3.0625vw
}
.contact__slide-left {
width: 40%
}
.contact__slide-right {
width: 45%
}
.select-office {
margin-bottom: 4.17vw;
width: 275px
}
@media screen and (min-width: 125rem) {
.select-office {
width: 11.025vw
}
}
.contact-head {
font-family: Kenyan Coffee, sans-serif;
font-size: 1.88vw;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
color: #272291
}
@media screen and (min-width: 64rem) and (max-width: 100rem) {
.contact-head {
font-size: 1.75rem
}
}
.contact__willContact-text {
font-size: 1.04vw;
line-height: 1.38105;
font-weight: 400;
color: #03195b;
margin-top: 1.3vw
}
@media screen and (min-width: 64rem) and (max-width: 100rem) {
.contact__willContact-text {
font-size: 1.125rem
}
}
.contact__location {
margin-top: 4.27vw
}
.contact__location-info {
margin-top: 1.04vw
}
.info-office-address, .info-office-mail, .info-office-phone {
display: block;
font-size: 1.04vw;
color: #223e91
}
@media screen and (min-width: 64rem) and (max-width: 100rem) {
.info-office-address, .info-office-mail, .info-office-phone {
display: block;
font-size: 1.125rem;
color: #223e91
}
}
.footer {
background-color: #223e91;
height: auto
}
.footer-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: .3125vw 0
}
.contact-phone, .location-text, .time-work {
font-family: Lato, sans-serif;
font-weight: 400;
color: #fff;
text-transform: uppercase
}
@media screen and (min-width: 64rem) {
.contact-phone, .location-text, .time-work {
font-size: 1rem
}
}
@media screen and (min-width: 75rem) {
.contact-phone, .location-text, .time-work {
font-size: 1.125rem
}
}
@media screen and (min-width: 100rem) {
.contact-phone, .location-text, .time-work {
font-size: .85vw
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.footer-content {
display: none
}
.footer-content_m {
padding: 5% 0 8%
}
}
@media screen and (min-width: 40.625rem) {
.footer-content_m {
display: none
}
}
.wrap-colum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.wrap-colum {
width: 90%;
margin-left: auto;
margin-right: auto
}
.footer-mobile {
background-color: #223e91
}
.contact-phone_m, .location-text_m, .time-work_m {
text-transform: uppercase;
line-height: normal;
font-size: .875rem;
color: #fff;
width: 90%;
margin-left: auto;
margin-right: auto
}
}
.footer-social__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 8% 0 5%
}
.footer-social__item {
margin-right: 10%
}
.footer-social__item:last-child {
margin-right: 0
}
.footer-social-icon {
width: 35px;
height: 35px
}
.footer-social__link {
display: block
}
.interactive__socials.interactive__socials__hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%
}
.interactive__socials-icon.interactive__socials-icon_hero {
width: 1.85vw;
height: 1.85vw
}
.icon-head_insta {
position: absolute;
top: 1.385vw;
right: 7.125vw
}
.icon-head_whatsApp {
position: absolute;
top: 4.385vw;
right: 4.125vw
}
.icon-head_icon-fb {
position: absolute;
top: 1.385vw;
right: 1.195vw
}
.interactive__socials-icon {
width: 5.95vw;
height: 5.95vw
}
.social-icon {
width: 100%;
height: 100%
}
.social-icon path {
fill: #b81e1b
}
.soc-box_blue {
background-color: #56a8e3
}
.interactive__socials-link {
display: block;
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease
}
.interactive__socials-link:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.f-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.icon-whatsApp {
position: absolute;
left: 29.75vw;
top: 13.35vw
}
.icon-insta {
position: absolute;
left: 40.15vw;
top: 5.85vw
}
.icon-fb {
position: absolute;
left: 55.75vw;
top: 11.35vw
}
.change-buttons {
text-align: center;
margin-top: 10%
}
.change-buttons .button-change:first-child {
margin-right: 10%
}
@media screen and (min-width: 40.625rem) {
.change-buttons {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.wrapper-form {
margin-top: 1.5625rem
}
.form-meet, .form-talk {
display: none;
padding: 0;
width: 100%
}
.form-title {
margin-bottom: 0
}
.x-section-contact {
margin-top: 8%
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.form-meet, .form-talk {
padding: 1.5625rem 2.8125rem
}
.form-title {
margin-bottom: 0
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.interactive-squares {
margin-top: 10%
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.interactive__socials {
display: none
}
}
.is-visible {
display: block
}
.hero {
position: relative;
overflow: hidden;
height: 47.75vw
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.hero {
height: 100%
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.hero {
height: 54.885vw
}
}
.background-image {
background: transparent url(https://www.vemcomusic.com/images/hero-image.jpg) no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 47.75vw;
will-change: transform;
margin-top: -1.125vw;
position: relative;
z-index: 2
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.background-image {
height: 485px
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.background-image {
height: 56.885vw
}
}
.hero-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 100%;
z-index: 10
}
@media screen and (min-width: 20rem) {
.hero-content {
height: 100%
}
}
.hero-content__title {
font-family: Kenyan Coffee, sans-serif;
font-size: 2.2vw;
padding-top: 5.85vw;
margin-bottom: 1.5vw;
line-height: 1.6;
font-weight: 700;
letter-spacing: 1px;
letter-spacing: .0625rem;
font-style: italic;
color: #fff
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.hero-content__title {
font-size: 1.375rem;
margin-top: 3.125rem;
text-shadow: none;
text-align: center;
max-width: 87.5%
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.hero-content__title {
font-size: 1.5rem;
margin-top: 0;
text-shadow: 1px 1px 2px #3560e1;
text-align: center;
max-width: 100%
}
}
@media screen and (min-width: 20rem) {
.inline-svg {
width: 100%;
height: auto;
margin-top: 3.125rem
}
}
@media screen and (min-width: 40.625rem) {
.inline-svg {
width: 36.4585vw;
height: 21.1585vw;
margin-top: 0
}
}
.svg-logo {
width: 100%;
height: 100%
}
.hero__colection__product {
margin-top: 2.3125vw
}
.product-colection__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (min-width: 20rem) {
.product-colection__nav {
display: none
}
}
@media screen and (min-width: 40.625rem) {
.product-colection__nav {
display: block
}
}
.product-colection__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.product-colection__item {
margin-right: 9.8125vw
}
.product-colection__item:last-child {
margin-right: 0
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.product-colection__item {
margin-right: 4.25vw
}
}
.product-colection__link {
font-size: 1.325vw;
display: inline-block;
font-weight: 700;
text-transform: uppercase;
position: relative
}
.product-colection__link:hover:after, .product-colection__link:hover:before {
-webkit-transform: scaleX(1) translateZ(0);
transform: scaleX(1) translateZ(0)
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-colection__link {
font-size: .875rem
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.product-colection__link {
font-size: 1.0625rem
}
}
.colection__product__animation__left, .colection__product__animation__right {
display: block;
position: absolute;
width: 100%;
height: 3px;
bottom: -2px;
left: 0;
-webkit-transform: scaleX(0) translateZ(0);
transform: scaleX(0) translateZ(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);
transition: transform .5s cubic-bezier(.215, .61, .355, 1);
transition: transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1)
}
.colection__product__animation__left {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
.animation-line-white {
background-color: #fff
}
.animation-line-red {
background-color: #b81e1b
}
.wrap-arrow {
margin-top: -1.25vw;
cursor: pointer;
z-index: 10;
-webkit-transform: scale(.8);
transform: scale(.8);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
@media screen and (min-width: 20rem) and (max-width: 62rem) {
.wrap-arrow {
margin-top: .925vw
}
}
.box-arrow {
display: block;
background-color: #fff;
margin-bottom: .5vw
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.box-arrow {
width: 10px;
height: 10px
}
}
@media screen and (min-width: 40.625rem) {
.box-arrow {
width: 1.45vw;
height: 1.45vw
}
}
.svg-scroll_down {
-webkit-animation: transform 1s ease-in infinite;
animation: transform 1s ease-in infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
@media screen and (min-width: 20rem) {
.svg-scroll_down {
width: 44px;
height: 50px
}
}
@media screen and (min-width: 40.625rem) {
.svg-scroll_down {
width: 6.4585vw;
height: 6.4585vw
}
}
@-webkit-keyframes transform {
0% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes transform {
0% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.box-1 {
animation: box-1 1s ease-in infinite reverse;
-webkit-animation-delay: 25ms;
animation-delay: 25ms;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
@-webkit-keyframes box-1 {
0% {
-webkit-transform: translateY(22px);
transform: translateY(22px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(-5px);
transform: translateY(-5px)
}
}
@keyframes box-1 {
0% {
-webkit-transform: translateY(22px);
transform: translateY(22px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(-5px);
transform: translateY(-5px)
}
}
.box-2 {
animation: box-2 1s ease-in infinite reverse;
-webkit-animation-delay: 15ms;
animation-delay: 15ms;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
@-webkit-keyframes box-2 {
0% {
-webkit-transform: translateY(28px);
transform: translateY(28px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(-5px);
transform: translateY(-5px)
}
}
@keyframes box-2 {
0% {
-webkit-transform: translateY(28px);
transform: translateY(28px);
opacity: 1
}
to {
opacity: 0;
-webkit-transform: translateY(-5px);
transform: translateY(-5px)
}
}
.typed-hero-text {
position: absolute;
left: -999999px;
z-index: -999999
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.interactive__socials.interactive__socials__hero, .scene-hero {
display: none
}
}
.x-section-about {
position: relative;
height: auto
}
.x-section-about__left {
width: 62%
}
.figure-map {
position: absolute;
left: 0;
top: -19.4414vw;
z-index: 1;
width: 63.5585vw
}
.img-map {
min-width: 100%
}
.svg-map-parts {
position: absolute;
left: 28.1vw;
top: 3.4vw;
width: 26.5%;
height: auto;
z-index: 15
}
.alabama, .florida, .georgia, .northCarolina, .southCarolina, .tennessee, .verginia {
fill: #b81e1b;
stroke: #000056;
cursor: pointer
}
.alabama {
stroke-width: 4px;
stroke: #000
}
.x-section-about__right {
width: 39%;
margin: 4.1569vw 3.0625vw 0 0;
position: relative;
z-index: 80
}
.x-section-about__right__info {
text-align: right
}
.x-section-about__right__info, .x-section-about__right__phone {
font: 3.025vw/1.2 Kenyan Coffee, sans-serif;
font-weight: 700;
color: #223e91;
letter-spacing: .15vw;
margin-bottom: 8%;
}
.x-section-about__right__phone {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
flex-wrap: wrap;
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-about__right__phone {
margin-top: .75rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
.x-section-about__right__phone__text {
letter-spacing: .15vw
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-about__right__phone__text {
font-size: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 0
}
}
.svg-phone {
width: 7.85vw;
height: 7.85vw;
margin-right: 7.4585vw;
margin-left: 2.7375vw
}
.about-vmc {
height: 51vw;
margin-top: 2.1568vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative
}
.about-vmc__background {
display: inline-block;
background: transparent url(https://www.vemcomusic.com/images/background-image_vcm.jpg) no-repeat;
background-size: 100%;
width: 65.8546vw;
height: 100%
}
.about-vmc__content {
position: relative;
top: -4.0595vw;
padding-left: .45vw;
margin-right: 3.0625vw
}
.about-vmc__content__title {
letter-spacing: .75vw;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 200px 40px;
perspective-origin: 200px 40px
}
.about-vmc__content__title span {
display: inline-block;
font-style: italic
}
.about-right-info {
text-align: right;
margin: 2.225vw 0
}
.list-info__item {
margin-bottom: 1.125vw
}
.list-info__item:last-child {
margin-bottom: 0
}
.info-office-address, .info-office-mail {
display: block;
font-size: 1.135vw;
color: #223e91
}
.about-vmc__content__title span:nth-child(3).about-vmc__content__title__animation {
-webkit-animation: falling 2s ease-out;
animation: falling 2s ease-out;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-transform-origin: bottom center;
transform-origin: bottom center
}
@-webkit-keyframes falling {
12% {
-webkit-transform: rotateX(240deg);
transform: rotateX(240deg)
}
24% {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg)
}
36% {
-webkit-transform: rotateX(200deg);
transform: rotateX(200deg)
}
48% {
-webkit-transform: rotateX(175deg);
transform: rotateX(175deg)
}
60%, 85% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
to {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg)
}
}
@keyframes falling {
12% {
-webkit-transform: rotateX(240deg);
transform: rotateX(240deg)
}
24% {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg)
}
36% {
-webkit-transform: rotateX(200deg);
transform: rotateX(200deg)
}
48% {
-webkit-transform: rotateX(175deg);
transform: rotateX(175deg)
}
60%, 85% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
to {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg)
}
}
.subtitle {
font: 1.8875vw/1.2 Kenyan Coffee, sans-serif;
font-weight: 700;
letter-spacing: .2vw;
margin-top: 1.1545vw;
min-height: 43px
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.subtitle {
min-height: 0;
font-size: 1.1875rem
}
}
.text {
font-size: 1.3625vw;
font-weight: 400;
line-height: 1.47059
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.text {
font-size: 1.5465vw
}
}
.about-vmc__content__text {
margin-top: 1.2625vw;
color: #fff
}
.read-more_text {
display: block;
font-size: 17px;
font-size: 1.0625rem;
line-height: normal;
font-weight: 400;
color: #b81e1b;
text-align: right;
position: relative;
margin-top: 3%;
z-index: 1095
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.read-more_text {
width: 90%;
margin-left: auto;
margin-right: auto
}
}
@media screen and (min-width: 40.625rem) {
.read-more_text {
display: none
}
}
.about-vmc__right__box {
width: 34vw;
position: relative
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.about-vmc__right__box {
width: 45vw
}
}
.about-vmc__content__box.about-vmc__content__box__animation {
display: block;
background-color: #3560e1;
width: 100%;
height: 7.55vw;
-webkit-animation: translate .5s ease-out;
animation: translate .5s ease-out;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s
}
@-webkit-keyframes translate {
10% {
width: 100%;
margin-left: 0
}
75% {
width: calc(100% + 5.3585vw);
margin-left: -8.5546vw
}
85% {
width: calc(100% + 5.3585vw);
margin-left: -7.5546vw
}
to {
width: calc(100% + 5.3585vw);
margin-left: -8.5546vw
}
}
@keyframes translate {
10% {
width: 100%;
margin-left: 0
}
75% {
width: calc(100% + 5.3585vw);
margin-left: -8.5546vw
}
85% {
width: calc(100% + 5.3585vw);
margin-left: -7.5546vw
}
to {
width: calc(100% + 5.3585vw);
margin-left: -8.5546vw
}
}
.about-vmc__box {
width: 100%;
height: calc(100% - 12.6545vw);
background-color: #3560e1
}
.about-vmc__content__box__right {
display: block;
width: 8.6585vw;
height: 17.3585vw;
position: absolute;
left: -8.6585vw;
bottom: 8.2585vw;
background-color: #3560e1
}
.about-vmc__content__box-bottom {
display: inline-block;
position: absolute;
right: 0;
bottom: -.015vw;
background-color: #fff;
width: 49.25vw;
height: 8.6585vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-about__left {
width: 100%;
height: auto;
position: relative
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.desktop {
display: none
}
}
@media screen and (min-width: 40.625rem) {
.mobile {
display: none
}
.desktop {
display: block
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.figure-map {
width: 150%;
position: static;
margin-top: -50%;
margin-left: -34%
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.svg-map-parts {
left: inherit;
right: 5%;
top: 0;
width: 60%;
fill: #b81e1b
}
.svg-map-parts path {
stroke: #000056;
stroke-width: 5px
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-about__right {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc {
height: 100%;
margin-top: 0
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__background {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__content {
padding: 0;
margin-right: 0;
top: auto
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.subtitle {
font-size: 1.5rem;
text-align: center;
margin-top: 4%
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__content__text, .subtitle {
width: 90%;
margin-left: auto;
margin-right: auto
}
.about-vmc__content__text {
font-size: 1.0625rem;
text-align: left;
max-height: 170px;
overflow: hidden
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__right__box {
width: 100%
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__content__box {
display: block;
width: 100%;
height: 24px;
background-color: #3560e1
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__box {
height: auto;
padding-bottom: 6.5625rem
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.about-vmc__content__box-bottom {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.info-office-address, .info-office-mail {
font-family: Kenyan Coffee, sans-serif;
font-size: 1.3125rem;
line-height: 1.4865;
font-weight: 700
}
}
.x-section-product {
position: relative
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-product {
margin-top: -5.9375rem
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-title {
display: none
}
}
.product-slider__wrapper {
position: relative;
margin-top: 2.875vw
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__wrapper {
margin-top: 0
}
}
.product-slider__title {
font-family: Kenyan Coffee, sans-serif;
font-size: 3.75vw;
font-weight: 400;
text-transform: uppercase;
color: #223e91;
margin-bottom: 2.375rem
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__title {
font-size: 1.3125rem;
line-height: normal;
margin-bottom: .625rem;
width: 90%;
margin-left: auto;
margin-right: auto
}
}
.product-slider__text {
color: #03195b
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__text {
font-size: 1.0625rem;
min-height: 100%;
height: 170px;
overflow: hidden;
width: 90%;
margin-left: auto;
margin-right: auto
}
}
.product-slider__item__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__item__content {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.product-slider__side-left {
width: 30%;
margin-left: 3.0625vw;
margin-top: 4.685vw
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__side-left {
width: 100%;
margin: 4.0625rem 0 0
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.product-slider__side-left {
width: 38%
}
}
.mask {
position: relative;
top: -5.1585vw;
width: 100%;
height: 100%
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.mask {
width: 75%;
top: auto
}
}
.clip-svg {
background-size: cover;
-webkit-clip-path: url(#mask);
clip-path: url(#mask);
width: 100%;
height: 100%;
position: relative
}
.mask-gradinet {
display: block;
background: #000;
background: -webkit-gradient(linear, left top, right top, from(#000), to(#fff));
background: linear-gradient(90deg, #000 0, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ffffff", GradientType=1);
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity .65s ease;
transition: opacity .65s ease
}
.mask-gradinet, .mask-image-svg {
width: 100%;
height: 100%
}
.product-slider__side-right {
width: 55%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
position: relative
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider__side-right {
width: 100%
}
}
.slider-button-next {
background-color: #3560e1;
width: 8.35vw;
height: 8.35vw;
cursor: pointer;
position: absolute;
top: 50%;
left: auto;
right: 3.4585vw;
margin-top: -10rem
}
.slider-button-next:hover svg {
-webkit-transform: translateX(5px);
transform: translateX(5px)
}
.slider-button-next:active, .slider-button-next:focus {
outline: none
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-slider .swiper-button-next {
width: 35px;
height: 35px;
right: 2%;
margin-top: 12%
}
}
.slider-button-next__line-svg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: auto;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: .125rem
}
.slider-button-next__line-svg svg {
width: 5.4585vw;
height: 5.4585vw;
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.slider-button-next__line-svg svg {
width: 22px;
height: 22px
}
}
.product-colection.product-colection__tabs {
width: 100%
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.product-colection.product-colection__tabs {
position: absolute;
top: 85.665vw;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
margin-left: auto;
margin-right: auto
}
}
.product-colection__tabs {
margin-top: -3.5625vw;
position: relative;
z-index: 1
}
.product-section {
margin-top: -.0625vw;
position: relative
}
.section-jabe-box {
padding-bottom: 11.25rem
}
.product-section__content-title.product-section__content-title_text-shadow {
text-shadow: .325vw 0 #223e91
}
.product-section__content-title-padding {
padding: 7.1125vw 0
}
.section-pool-tablet {
position: relative
}
.section-arcade__content, .section-atm__content, .section-pool-tablet__content, .section-toy-crane__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.product-section__content-padding_top-100 {
padding-top: 6.25rem
}
.product-section__content-title {
font-family: Kenyan Coffee, sans-serif;
font-size: 5.25vw;
font-weight: 400;
font-style: italic;
line-height: normal;
text-transform: uppercase;
color: #fff;
text-shadow: -.625vw 0 #223e91;
letter-spacing: .485vw
}
.product-section__content-title_left {
text-align: left
}
.product-section__content-right_margin-r {
margin-right: 3.0625vw
}
.product-section__content-right_margin-l {
margin-left: 3.0625vw
}
.product-section__content-text {
font-size: 1.325vw;
font-weight: 400;
line-height: 1.5;
color: #fff
}
.mask-image-svg__w-100 {
width: 100%;
height: 100%
}
.product-section__content-text_margin-t {
margin-top: .725vw
}
.section-atm {
position: relative
}
.mask-image-svg__w-55 {
width: 55vw
}
.product-section__content-padding-l {
padding-left: 2.658vw
}
.product-section__content-padding-r {
padding-right: 5.658vw
}
.product-section__content-text_padding-l_15 {
padding-left: 1vw
}
.title-margin-ngv-l {
margin-left: -2.085vw
}
.flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.selection-playlists__gallery {
-webkit-perspective: 1000px;
perspective: 1000px
}
.screen-gallery__slider-panel {
-webkit-perspective: 40vw;
perspective: 40vw
}
.screen-player__play {
-webkit-transform: translate3d(-.225vw, 0, -4.225vw) rotateY(-15deg);
transform: translate3d(-.225vw, 0, -4.225vw) rotateY(-15deg)
}
.screen-player__play-list_visual-tile {
-webkit-transform: translate3d(.375vw, 0, -4.225vw) rotateY(15deg);
transform: translate3d(.375vw, 0, -4.225vw) rotateY(15deg)
}
.title-margin {
margin-top: -3.628vw
}
.x-section-jobs {
position: relative;
margin-top: 6.0545vw
}
.job-history {
margin-top: -5.825vw
}
.jobs-vmc-background {
background: transparent url(https://www.vemcomusic.com/images/history.jpg) no-repeat;
background-size: 64.5% 100%;
background-position: 100%;
width: auto;
height: 51.1585vw;
padding-top: 1.4585vw;
position: relative
}
.job-history-logo {
position: absolute;
top: 50%;
right: 7.4585vw;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0
}
.svg-logo-blue {
width: 30.15vw;
height: 30.15vw
}
.margin-text {
margin-top: 1.2625vw
}
.jobs-vmc__service-background {
background: transparent url(https://www.vemcomusic.com/images/service.jpg) no-repeat;
background-size: 66.3% 100%;
background-position: 0;
width: auto;
height: 54.2585vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: -14.4585vw
}
.job-service__box {
display: block;
position: absolute;
bottom: 0;
left: 46.8%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
width: 23.7585vw;
height: 6.4585vw
}
.jobs-figure-svg {
display: inline-block;
margin-top: -1.9375vw;
max-width: 33.4588vw;
position: relative
}
.hist-figure {
width: 54.55vw;
height: 45.65vw
}
.job-hist-content {
position: absolute;
top: 9.8585vw;
left: 3.0625vw
}
.job-service__content {
width: 41.3585vw;
height: 26.8vw;
background-color: #fff;
text-align: right;
margin-top: 14.4455vw;
position: relative
}
.job-service-box-1 {
top: 0
}
.job-service-box-1, .job-service-box-2 {
position: absolute;
left: -9.0585vw;
width: 9.05vw;
height: 9.05vw;
background-color: #fff
}
.job-service-box-2 {
top: auto;
bottom: 0
}
.inner-content {
display: inline-block;
max-width: 35.45vw;
margin: 2.4585vw 3.0625vw 0 0
}
.jobs-vmc__amenities-background {
background: transparent url(https://www.vemcomusic.com/images/amenities2.jpg) no-repeat;
background-size: 66.3% 100%;
background-position: 100%;
width: auto;
height: 51.0585vw;
margin-top: -13.0415vw;
position: relative
}
.job-amenities-content {
display: inline-block;
width: 34.45vw;
height: 28.15vw;
margin-top: 11.4415vw;
background-color: #3560e1;
position: relative;
padding-left: 3.0625vw;
padding-top: 2.4585vw
}
.job-amenities-box-1, .job-amenities-box-2 {
position: absolute;
top: -9.0545vw;
left: 50%;
width: 9.05vw;
height: 9.05vw;
background-color: #3560e1;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.job-amenities-box-2 {
top: 50%;
left: auto;
right: -8.9545vw;
-webkit-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%)
}
.job-amenities-box-3 {
display: block;
width: 27.15vw;
height: 7.15vw;
background-color: #3560e1;
margin-top: -1.9585vw;
margin-left: 16.0585vw
}
.job-amenities-bottom-element {
width: 80%;
height: 6.35vw;
background-color: #fff
}
.colection-services {
margin-top: 3.125rem
}
.colection-services__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.colection-services__item {
position: relative
}
.colection-services__item:nth-child(2) {
margin-top: 5.35vw
}
.colection-services__item:nth-child(3) {
margin-top: 2.75vw
}
.colection-services__item:nth-child(4) {
margin-top: 7.65vw
}
.colection-services__line-1 {
position: absolute;
bottom: -5.7455vw;
right: -9.5425vw;
width: 15.35vw
}
.colection-services__line-2 {
position: absolute;
top: -4.5455vw;
left: 13.4575vw;
width: 20.85vw
}
.colection-services__line-3 {
position: absolute;
bottom: -4.5455vw;
left: 7.4575vw;
width: 20.85vw
}
.colection-services__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 100%;
height: 100%;
position: relative
}
.svg-line-text {
position: absolute;
top: 22%;
left: 10%;
width: auto;
height: 7.885vw
}
.colection-service__svg {
width: 18.75vw;
height: 17.25vw
}
.colection-services__text {
font-family: Kenyan Coffee, cursive;
font-size: 2.5585vw;
font-weight: 400;
fill: #fff
}
.WJXeuChP_0, .WJXeuChY_0, .WJXeuEhY_0, .WJXeuGhY_0 {
stroke-dasharray: 2990 2992;
stroke-dashoffset: 2991
}
.wtf .WJXeuChY_0 {
-webkit-animation: WJXeuChY_draw 9s ease-in 0ms forwards, WJXeuChY_fade 90s ease-in 0ms forwards;
animation: WJXeuChY_draw 9s ease-in 0ms forwards, WJXeuChY_fade 90s ease-in 0ms forwards
}
.wtf .WJXeuEhY_0 {
-webkit-animation: WJXeuChY_draw 10s ease-in 0ms forwards, WJXeuChY_fade 10s ease-in 0ms forwards;
animation: WJXeuChY_draw 10s ease-in 0ms forwards, WJXeuChY_fade 10s ease-in 0ms forwards;
-webkit-animation-delay: .25s;
animation-delay: .25s
}
.wtf .WJXeuGhY_0 {
-webkit-animation: WJXeuChY_draw 11s ease-in 0ms forwards, WJXeuChY_fade 11s ease-in 0ms forwards;
animation: WJXeuChY_draw 11s ease-in 0ms forwards, WJXeuChY_fade 11s ease-in 0ms forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s
}
.wtf .WJXeuChP_0 {
-webkit-animation: WJXeuChY_draw 12s ease-in 0ms forwards, WJXeuChY_fade 12s ease-in 0ms forwards;
animation: WJXeuChY_draw 12s ease-in 0ms forwards, WJXeuChY_fade 12s ease-in 0ms forwards;
-webkit-animation-delay: .75s;
animation-delay: .75s
}
@-webkit-keyframes WJXeuChY_draw {
to {
stroke-dashoffset: 0
}
}
@keyframes WJXeuChY_draw {
to {
stroke-dashoffset: 0
}
}
@-webkit-keyframes WJXeuChY_fade {
0% {
stroke-opacity: 1
}
96% {
stroke-opacity: 1
}
to {
stroke-opacity: 1
}
}
@keyframes WJXeuChY_fade {
0% {
stroke-opacity: 1
}
96% {
stroke-opacity: 1
}
to {
stroke-opacity: 1
}
}
.typed-amen-text, .typed-hist-text, .typed-serv-text {
position: absolute;
left: -999999px;
z-index: -999999
}
@media screen and (min-width: 40.625rem) {
.services {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.services {
margin-top: .9375rem
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-jobs {
margin-top: 0
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.services__amenities, .services__product {
margin-top: -4.875rem;
z-index: 10;
position: relative
}
.services__amenities {
margin-top: -5.3125rem
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.job-title, .servis_desc {
display: none
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.job-amenities-content {
height: 34.15vw
}
}
@media screen and (min-width: 40.625rem) and (max-width: 62rem) {
.hist-figure {
width: 55.55vw;
height: 46.65vw
}
.jobs-figure-svg {
max-width: 36.8588vw
}
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.colection-services {
display: none
}
}
.services__haw-work {
width: 100%;
z-index: 10;
position: relative
}
.services__amenities-mask, .services__haw-work_mask, .services__product-mask {
position: relative;
z-index: 1;
width: 100%
}
.services__product-mask {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.w-75 {
width: 75%
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.services__content {
padding: 14% 0 5.625rem;
height: auto
}
.service__hawWork {
margin-top: -20%
}
.services__amenities-content {
margin-top: -20%;
padding: 14% 0 1.25rem
}
.services__content-title {
font-size: 2rem
}
.services__content-subtitle {
text-align: right;
font-size: 1.3125rem
}
.services__content-text {
font-size: 1.0625rem;
max-height: 170px;
overflow: hidden;
margin-top: 5%;
width: 90%;
margin-left: auto;
margin-right: auto
}
}
.padding-t_none {
padding-top: 0
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.jobs-vmc-background {
display: none
}
}
.cubes-animate-opacity {
opacity: .2;
-webkit-transition: 2s;
transition: 2s
}
.cubes-animate-opacity-show {
opacity: 1;
-webkit-transition: 2s;
transition: 2s
}
.cube-big {
width: 5.25vw;
height: 5.25vw
}
.cube-medium {
width: 2.625vw;
height: 2.625vw
}
.cube-small {
width: 1.75vw;
height: 1.75vw
}
.lightBlue {
background-color: #3560e1
}
.darkBlue {
background-color: #223e91
}
.blue {
background-color: #56a8e3
}
.scene__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.scene-postion_hero-top {
position: absolute;
top: 0;
right: inherit;
left: 0
}
.scene-w-100 {
width: 100%
}
.cube-position-1 {
position: absolute;
top: -4.275vw;
left: -16.875vw
}
.cube-position-2 {
position: absolute;
top: -.075vw;
left: -22.875vw
}
.cube-position-3 {
position: absolute;
top: -8.075vw;
left: -11.875vw
}
.cube-position-4 {
top: -.075vw;
right: -1.125vw
}
.cube-position-4, .cube-position-5, .cube-position-6, .cube-position-7, .cube-position-8, .cube-position-9, .cube-position-10, .cube-position-11 {
position: absolute
}
.scene__item-hiro_top.cube-position-1 {
top: 0;
left: 4.625vw
}
.scene__item-hiro_top.cube-position-2 {
top: 1.625vw;
left: 8.625vw
}
.scene__item-hiro_top.cube-position-3 {
top: 4.625vw;
left: 6.625vw
}
.scene__item-hiro_top.cube-position-4 {
top: 3.625vw;
left: 22.625vw
}
.scene__item-hiro_top.cube-position-5 {
position: absolute;
top: .625vw;
left: 42vw
}
.scene__item-hiro_top.cube-position-6 {
position: absolute;
top: 2.625vw;
left: inherit;
right: 45.65vw
}
.scene__item-hiro_top.cube-position-7 {
position: absolute;
top: 1.625vw;
left: inherit;
right: 29.65vw
}
.scene__item-hiro_top.cube-position-8 {
position: absolute;
top: 2.625vw;
left: inherit;
right: 23.65vw
}
.scene__item-hiro_top.cube-position-9 {
position: absolute;
top: 1.625vw;
left: inherit;
right: 18.65vw
}
.scene__item-hiro_top.cube-position-10 {
position: absolute;
top: 3.625vw;
left: inherit;
right: 12.65vw
}
.scene__item-hiro_top.cube-position-11 {
position: absolute;
top: 6.625vw;
left: inherit;
right: 7.165vw
}
.scene-postion_hero {
position: absolute;
right: 6.125vw;
z-index: 10
}
.scene-postion_about {
position: absolute;
left: 0;
top: 0;
z-index: 1
}
.scene__item-about.cube-position-1 {
top: 0;
left: -2.525vw
}
.scene__item-about.cube-position-2 {
top: 1.125vw;
left: 11.965vw
}
.scene__item-about.cube-position-3 {
top: inherit;
bottom: -6.625vw;
left: 13.365vw
}
.scene-pos_top {
position: absolute;
top: 0;
right: 0
}
.scene-pos_boot {
right: inherit
}
.scene__item-about-content.cube-position-1 {
top: -1.125vw;
left: inherit;
right: -2.625vw
}
.scene__item-about-content.cube-position-2 {
top: -.175vw;
left: inherit;
right: 2.625vw
}
.scene__item-about-content_b.cube-position-1 {
top: 1.825vw;
left: 0;
right: inherit
}
.scene__item-about-content_b.cube-position-2 {
top: 80%;
left: -2.75vw;
right: inherit
}
.scene-h-100 {
height: 100%
}
.active-color {
fill: #8f0300
}
.scene-postion_product {
position: absolute;
top: 0;
left: 0
}
.scene__item-product.cube-position-1 {
left: 0;
top: -2.875vw
}
.scene__item-product.cube-position-2 {
left: 12.245vw;
top: -6.875vw
}
.scene__item-product.cube-position-3 {
left: 23.245vw;
top: -8.875vw
}
.scene__item-product.cube-position-4 {
left: 17.545vw;
top: -1.675vw
}
.scene__item-product.cube-position-5 {
position: absolute;
left: 22.745vw;
top: 3.525vw
}
.scene__item-product_slide.cube-position-1 {
left: 5.125vw;
top: 6.125vw
}
.scene__item-product_slide.cube-position-2 {
left: -3.875vw;
top: 19.125vw
}
.scene__item-product_slide.cube-position-3 {
left: 1.125vw;
top: 24.325vw
}
.scene__item-product_slide.cube-position-4 {
left: 18.125vw;
top: 36.025vw
}
.scene__item-product_slide.cube-position-5 {
position: absolute;
left: 44.125vw;
top: 32.025vw
}
.scene-postion_pool {
position: absolute;
top: 0;
right: 0
}
.scene__item-jukeBox.cube-position-1 {
top: -7.875vw;
left: auto;
right: 7.125vw
}
.scene__item-jukeBox.cube-position-2 {
top: -4.875vw;
left: auto;
right: 14.125vw
}
.scene__item-jukeBox_center.cube-position-1 {
top: -3.625vw;
left: 51%
}
.scene__item-jukeBox_center.cube-position-2 {
top: -2.125vw;
left: 61%
}
.scene__item-jukeBox_center.cube-position-3 {
top: 1.275vw;
left: 59%
}
.scene__item-jukeBox_right.cube-position-1 {
top: -7.615vw;
left: 4.125vw
}
.scene__item-jukeBox_right.cube-position-2 {
top: -1.615vw;
left: 1.625vw
}
.scene-postion_bot {
position: absolute;
bottom: 0
}
.scene__item-jukeBox_bot.cube-position-1 {
left: 12.85vw;
top: -13.125vw
}
.scene__item-jukeBox_bot.cube-position-2 {
left: 20.85vw;
top: -7.625vw
}
.scene__item-jukeBox_bot.cube-position-3 {
left: 45%;
top: -12.625vw
}
.scene__item-jukeBox_bot.cube-position-4 {
left: 47%;
top: -6.625vw
}
.scene__item-jukeBox_bot.cube-position-5 {
left: 56.7%;
top: -14.625vw
}
.scene__item-jukeBox_bot.cube-position-6 {
left: 54.7%;
top: -2.625vw;
z-index: 5
}
.scene__item-atm.cube-position-1 {
left: 38%;
top: auto;
bottom: 19.375vw
}
.scene__item-atm.cube-position-2 {
left: 48%;
top: auto;
bottom: 8.375vw
}
.scene__item-atm.cube-position-3 {
left: auto;
right: 33.6%;
top: auto;
bottom: 5.375vw
}
.scene__item-atm.cube-position-4 {
left: auto;
right: 0;
top: auto;
bottom: -3.125vw;
z-index: 5
}
.scene__item-_toy-crane.cube-position-1 {
left: 37%;
top: auto;
bottom: 12.625vw
}
.scene__item-_toy-crane.cube-position-2 {
left: 46%;
top: auto;
bottom: 21.65vw
}
.scene__item-_toy-crane.cube-position-3 {
left: 48%;
top: auto;
bottom: 17.25vw
}
.scene__item-_toy-crane.cube-position-4 {
left: auto;
top: auto;
right: 36%;
bottom: 1.25vw
}
.scene__item-arcade.cube-position-1, .scene__item-arcade.cube-position-2 {
left: 44%;
top: 2.125vw
}
.scene__item-arcade.cube-position-3 {
left: 32%;
top: 30.825vw
}
.interactive-squares {
background: transparent url(https://www.vemcomusic.com/images/footer.squares.png) no-repeat 50%/contain;
background-position: 50%;
height: 22.385vw;
position: relative
}
.scene-postion_advantages {
position: absolute;
bottom: 0;
left: 0
}
.scene__item-advantages.cube-position-1 {
left: 6.256vw;
top: inherit;
bottom: 0
}
.scene__item-advantages.cube-position-2 {
left: 18.256vw;
top: inherit;
bottom: 4.125vw
}
.scene__item-advantages.cube-position-3 {
left: 30.256vw;
top: inherit;
bottom: -2.875vw
}
.scene__item-advantages.cube-position-4 {
left: 35.456vw;
top: inherit;
bottom: 2.125vw
}
.scene__item-advantages.cube-position-5 {
position: absolute;
left: 41.456vw;
top: inherit;
bottom: 11.125vw
}
.scene__item-advantages.cube-position-6 {
position: absolute;
left: inherit;
top: inherit;
right: 27.45vw;
bottom: 4.125vw
}
.scene__item-advantages.cube-position-7 {
position: absolute;
left: inherit;
top: inherit;
right: 10.45vw;
bottom: 2.125vw
}
.scene__item-advantages.cube-position-8 {
position: absolute;
left: inherit;
top: inherit;
right: 1.45vw;
bottom: 6.125vw
}
.scene-postion_history {
position: absolute;
top: 0;
right: 0
}
.scene__item-hist.cube-position-1 {
top: 5.554vw;
left: inherit;
right: -13.755vw
}
.scene__item-hist.cube-position-2 {
top: 10.754vw;
left: inherit;
right: -8.555vw
}
.scene-postion_service {
position: absolute;
top: 1.25vw;
left: 0
}
.scene__item-service.cube-position-1 {
top: -7.058vw;
left: -21.225vw
}
.scene__item-service.cube-position-2 {
top: -1.858vw;
left: -16.025vw
}
.scene__item-service.cube-position-3 {
top: -6.158vw;
left: 2.975vw
}
.scene-pos_boot {
position: absolute;
right: 0;
bottom: 0
}
.scene__item-service_b.cube-position-1 {
top: inherit;
left: inherit;
right: 2.125vw;
bottom: -6.925vw;
z-index: 1
}
.scene__item-service_b.cube-position-2 {
top: inherit;
left: inherit;
right: 7.125vw;
bottom: -11.925vw;
z-index: 1
}
.scene-postion_amenities {
position: absolute;
top: 0;
right: 0
}
.scene__item-amenities.cube-position-1 {
top: -12.515vw;
left: inherit;
right: -2.375vw
}
.scene__item-amenities.cube-position-2 {
top: -7.515vw;
left: inherit;
right: 2.625vw
}
.scene-postion_maintenance {
position: absolute;
top: 0;
left: 0
}
.scene__item-maintenance.cube-position-1 {
top: -1.625vw;
left: 0
}
.scene__item-maintenance.cube-position-2 {
top: 8.625vw;
left: 7vw
}
.scene__item-maintenance.cube-position-3 {
top: 5.225vw;
left: inherit;
right: 5.185vw
}
.scene__item-maintenance.cube-position-4 {
top: 10.425vw;
left: inherit;
right: 0
}
.scene-postion_collaboration {
position: absolute;
top: 0;
left: 0
}
.scene__item-collaboration.cube-position-1 {
top: -4.315vw;
left: 2.1625vw
}
.scene__item-collaboration.cube-position-2 {
top: 6.685vw;
left: 11.0625vw;
z-index: 15
}
.scene__item-collaboration.cube-position-3 {
top: 10.735vw;
left: inherit;
right: 3.0625vw;
z-index: 10
}
.scene__item-collaboration.cube-position-4 {
top: 5.6625vw;
left: inherit;
right: 8.3625vw
}
.incomprehensible-garbage {
position: absolute;
top: 0;
right: 0;
z-index: 1090;
width: 100%
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.scene {
display: none
}
}
@media screen and (min-width: 40.625rem) {
.incomprehensible-garbage {
display: none
}
}
.ig-bottom {
position: absolute;
top: inherit;
bottom: -25px;
right: inherit;
left: 0
}
.menu {
margin-top: 35%;
width: 80.5%;
margin-left: auto;
margin-right: auto;
opacity: 0
}
.sideout-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 256px;
min-height: 100vh;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
z-index: 0;
background-color: #223e91;
display: none
}
.sideout-open .sideout-menu {
display: block
}
.sideout-open .sideout-menu .menu {
opacity: 1
}
.sideout-open, .sideout-open body {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden
}
.menu__item {
margin-bottom: 15%
}
.menu__link {
display: block;
font-size: 24px;
font-size: 1.5rem;
line-height: normal;
font-weight: 400;
color: #fff;
text-transform: uppercase
}
.modal {
width: 190px;
max-width: 100%;
padding: .75rem 1.25rem;
background-color: #fff;
border: 1px solid #223e91;
border-radius: 5px;
position: absolute;
top: 20px;
left: 20px;
z-index: 50
}
@media screen and (min-width: 20rem) {
.modal {
display: block !important
}
}
@media screen and (min-width: 40.625rem) {
.modal {
display: none !important
}
}
.frame-full {
position: absolute;
top: 10%;
left: 10%;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
width: 95%;
z-index: 2000
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.frame-full {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
}
.modal__content-title {
font-size: 14px;
font-size: .875rem;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
letter-spacing: .0625rem;
color: #223e91
}
.close {
position: absolute;
right: 8px;
top: 15px
}
.close, .svg-close {
width: 20px;
height: 20px
}
.svg-close {
fill: #223e91
}
.is-hidden {
display: none !important
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.x-section-about__right__info {
text-align: center;
font-size: 1.5rem;
margin-bottom: .9375rem
}
}
.x-section-about__offices-note {
font-size: calc(20 / 1920 * 100vw);
font-weight: 400;
width: 100%;
flex-basis: 100%;
max-width: 100%;
padding-left: 28%;
margin-top: 10px;
}
@media (max-width: 1399px) {
.x-section-about__offices-note {
font-size: calc(20 / 1399 * 100vw);
}
}
@media (max-width: 991px) {
.x-section-about__offices-note {
font-size: calc(18 / 991 * 100vw);
}
}
@media (max-width: 649px) {
.x-section-about__offices-note {
font-size: 18px;
padding-left: 0;
text-align: center;
margin-top: 10px;
}
}
.interactive-squares {
background-image: none;
position: relative;
}
.interactive__squares {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.x-section-about__phones {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
}
.x-section-about__phone--font-smaller {
font-size: 2.25vw;
}
@media (max-width: 649px) {
.x-section-about__phone--font-smaller {
font-size: 20px;
}
}
.x-section-about .wrapper {
align-items: stretch;
}
.figure-map {
top: auto;
bottom: 48.1875vw;
}
.svg-map-parts {
top: auto;
bottom: 45.1833vw;
left: 28.1vw;
}
@media (min-width: 1400px) {
.figure-map {
width: 65.5585vw;
}
}
@media (min-width: 768px) and (max-width: 1399px) {
.figure-map {
width: 69.5585vw;
}
.svg-map-parts {
bottom: 45.1833vw;
left: 30.8vw;
width: 28.5%;
}
}
@media (max-width: 650px) {
.svg-map-parts {
bottom: -11vw;
}
}
.hero--index {
min-height: 47.75vw;
height: 100vh;
}
.x-section-about {
/*overflow: hidden;*/
}
.scene__item-hiro_top.cube-position-1 {
top: calc((60 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-2 {
top: calc((91.2 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-3 {
top: calc((148.8 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-4 {
top: calc((129.6 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-5 {
top: calc((72 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-6 {
top: calc((110.4 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-7 {
top: calc((91.2 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-8 {
top: calc((110.4 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-9 {
top: calc((91.2 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-10 {
top: calc((129.6 / 1920) * 100vw);
}
.scene__item-hiro_top.cube-position-11 {
top: calc((187.2 / 1920) * 100vw);
}
.hero--index .icon-head_insta {
top: calc(((26.6 + 60) / 1920) * 100vw);
}
.hero--index .icon-head_whatsApp {
top: calc(((79.2 + 60) / 1920) * 100vw);
}
.hero--index .icon-head_icon-fb {
top: calc(((22.9 + 60) / 1920) * 100vw);
}
.hero--index {
display: flex;
flex-direction: column;
}
.hero--index .background-image {
flex: 1;
height: auto;
}
.wrap-arrow {
margin-top: auto;
/*transform: translateY(-1.3vw);*/
}
@media (max-width: 1024px) {
.wrap-arrow {
margin-top: calc((75 / 512) * 100vw);
margin-bottom: auto;
}
}
.hero--index .hero-content__title {
margin-top: auto;
}
.hero--index .hero-content {
padding-bottom: 20px;
}
.office-info__wrapper {
overflow: hidden;
transition: height .8s ease;
}
.scene__item-about.cube-position-1 {
left: 0;
}