[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; }