[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
}
@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(https://www.vemcomusic.com/fonts/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: #223e91;
-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: 20rem) and (max-width: 48rem) {
.profit__content, .x-container {
margin-left: auto;
margin-right: auto;
width: 87.5%
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
main .working-heading {
font-size: 2rem;
margin-top: 1.375rem
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
main .working-subtitle {
margin-top: 1.25rem
}
}
@media screen and (min-width: 48rem) {
main .working-subtitle {
font-size: 1rem;
width: 50%
}
}
@media screen and (min-width: 100rem) {
main .working-subtitle {
font-size: 1vw;
width: 33%
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.advantages .advantages__text {
text-align: left
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.maintenance .advantages__text {
text-align: right
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.advantages .advantages__item {
margin-bottom: 1.25rem
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.collaboration .working-subtitle {
font-size: 1.3125rem;
width: 100%;
margin-top: .3125rem
}
}
.profit {
position: relative
}
.profit__content {
padding-top: 3.425vw
}
.working-heading {
font-family: Kenyan Coffee, sans-serif;
font-size: 4.858vw;
font-weight: 700;
line-height: 1.4;
font-style: italic;
color: #223e91
}
.working-subtitle {
display: inline-block;
font-weight: 400;
color: #223e91;
text-align: center;
line-height: 1.4;
margin-top: .225vw
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
main .advantages {
margin-top: 2.75rem
}
}
.cubes-group_adv {
position: absolute;
left: 0;
top: -50px;
width: 72px;
height: auto
}
@media screen and (min-width: 40.625rem) {
.cubes-group_adv {
display: none
}
}
.cubes-group_adv-top {
position: absolute;
left: 0;
top: -50px;
width: 80px;
height: auto
}
@media screen and (min-width: 40.625rem) {
.cubes-group_adv-top {
display: none
}
}
.cubes-group_maintence {
position: absolute;
right: 0;
top: -50px;
width: 50px;
height: auto
}
@media screen and (min-width: 40.625rem) {
.cubes-group_maintence {
display: none
}
}
.advantages {
margin-top: 5.25vw;
position: relative
}
.advantages__list {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column
}
.advantages__item, .advantages__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal
}
.advantages__item {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 3%
}
.advantages__item:last-child {
margin-bottom: 0
}
.row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.m-r {
margin-left: 3%
}
.advantages__item-pic {
width: 50px;
height: 50px;
margin-right: 3%
}
@media screen and (min-width: 125rem) {
.advantages__item-pic {
width: 3%;
height: 3%
}
}
.advantages__text {
font-weight: 400;
line-height: 1.4;
text-align: center;
color: #223e91
}
@media screen and (min-width: 64rem) {
.advantages__text {
font-size: .875rem
}
}
@media screen and (min-width: 100rem) {
.advantages__text {
font-size: 1vw
}
}
.maintenance__list {
margin-top: 5.25vw
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.interactive-squares {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
main .collaboration-list {
margin-bottom: .125rem;
margin-left: -.1875rem;
margin-right: -.5rem;
background-color: transparent
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.collaboration-list .collaboration-item {
width: 48%;
height: auto;
margin: .125rem;
background-color: #223e91;
padding: 2%
}
.collaboration-list .collaboration-item .collaboration-item-pic {
width: 65%
}
}
@media screen and (min-width: 24.0625rem) and (max-width: 48rem) {
.collaboration-list .collaboration-item {
width: 49%
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.separator-gorizont, .separator-vert-left, .separator-vert-right {
display: none
}
}
.cubes-coll {
position: absolute;
right: 0;
width: 80px;
top: -50px
}
@media screen and (min-width: 48rem) {
.cubes-coll {
display: none
}
}
.collaboration {
text-align: center;
margin-top: 2.465vw;
position: relative
}
.collaboration__subtitle {
display: inline-block;
font-family: Kenyan Coffee, sans-serif;
font-weight: 500;
font-style: italic;
color: #223e91;
text-align: center;
line-height: 1.4;
font-size: 2.425vw;
width: 35%;
margin: 0
}
.collaboration-list {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
margin-top: 4.685vw;
background-color: #223e91
}
.collaboration-item, .collaboration-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.collaboration-item {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 32.785vw;
height: 20.385vw
}
.collaboration-item-pic {
width: 47.8%;
height: auto
}
.separator-gorizont {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2.025vw;
background-color: transparent;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-top: -.9375vw
}
.separator-vert-left {
left: 32.333333%
}
.separator-vert-left, .separator-vert-right {
position: absolute;
top: 0;
width: 2.025vw;
height: 100%;
background-color: transparent;
border-left: 1px solid #fff;
border-right: 1px solid #fff
}
.separator-vert-right {
right: 32.333333%
}
.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
}
@media screen and (min-width: 20rem) and (max-width: 40.625rem) {
.interactive__socials.interactive__socials__hero {
display: none
}
}
@media screen and (min-width: 20rem) and (max-width: 48rem) {
.interactive-squares {
margin-top: 3.125rem
}
}
.cubes-group_profit {
position: absolute;
right: 0;
width: 32px;
height: auto
}
@media screen and (min-width: 40.625rem) {
.cubes-group_profit {
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
}
.advantages__list {
width: 100%;
max-width: 40%;
margin: 0 auto;
}
.advantages__item {
justify-content: flex-start;
}
.advantages__text {
text-align: left;
}
.advantages__item.row-reverse .advantages__text {
text-align: right;
}
@media (max-width: 991px) {
.advantages__list {
max-width: 55%;
}
}
@media (max-width: 599px) {
.advantages__list {
max-width: 100%;
}
}
@media (min-width: 1921px) {
.advantages__item-pic {
width: calc((50 / 1920) * 100vw );
height: calc((50 / 1920) * 100vw );
}
}
.interactive-squares {
background-image: none;
position: relative;
}
.interactive__squares {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* Additional styles */
.collaboration-list {
justify-content: space-between;
margin-left: -30px;
}
.collaboration-item {
transition: background-color .3s ease;
margin-left: 30px;
max-width: calc(33.33% - 30px);
width: 100%;
position: relative;
}
.collaboration-item:hover {
background-color: #fff;
}
.collaboration-item .collaboration-item-pic {
fill: #fff;
}
.collaboration-item:hover .collaboration-item-pic {
fill: #223e91;
}
.collaboration-item--top {
margin-bottom: 30px;
}
.collaboration-item--top::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 1px;
background-color: #fff;
}
.collaboration-item--top::after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: -15px;
width: 1px;
background-color: #fff;
}
.collaboration-item--bottom::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #fff;
}
.collaboration-item--bottom::after {
content: "";
display: block;
position: absolute;
right: 0;
top: -15px;
bottom: 0;
width: 1px;
background-color: #fff;
}
.collaboration-item--top.collaboration-item--middle::before {
left: -30px;
right: -30px;
width: auto;
}
.collaboration-item--bottom.collaboration-item--middle::before {
left: -30px;
right: -30px;
width: auto;
}
.collaboration-item--middle .border {
position: absolute;
}
.collaboration-item--middle .border1 {
left: 0;
}
.collaboration-item--middle .border2 {
right: 0;
}
.collaboration-item--top.collaboration-item--middle .border {
width: 1px;
top: 0;
bottom: -15px;
background-color: #fff;
}
.collaboration-item--bottom.collaboration-item--middle .border {
width: 1px;
top: -15px;
bottom: 0;
background-color: #fff;
}
.collaboration-item--top.collaboration-item--right::after {
left: 0;
right: auto;
top: 0;
bottom: -15px;
}
.collaboration-item--bottom.collaboration-item--right::after {
left: 0;
right: auto;
top: -15px;
bottom: 0;
}
@media (max-width: 768px) {
.collaboration-list {
margin-left: -5px;
}
.collaboration-item {
margin-left: 5px;
max-width: calc(50% - 5px);
width: 100%;
position: relative;
}
.collaboration-list .collaboration-item {
width: 100%;
}
.collaboration-item:before,
.collaboration-item::after {
display: none;
}
.collaboration-item--middle .border {
display: none;
}
}