/*!
 * Vitality v2.2.0 (https://themes.startbootstrap.com/vitality-v2.2.0)
 * Copyright 2013-2018 Start Bootstrap
 * Purchase a license to use this theme at (https://wrapbootstrap.com)
 */
html,
body {
    height: 100%;
}

/* effect-shine */
h1.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 1.8s infinite;
}

@-webkit-keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}

/* Demo styles */

#anime {
    overflow: hidden;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0px;
}

#tridiv {
    z-index: 999;
    transform-style: preserve-3d;
}

.scene {
    animation: xwing 21s ease 1 0s normal forwards,
        xwing-loop 20s ease infinite 24s normal forwards;
}



/* Custom styles */

.cyl-13 .face,
.cyl-14 .face,
.cyl-15 .face,
.cyl-16 .face,
.cyl-17 .face,
.cyl-18 .face,
.cyl-19 .face,
.cyl-20 .face {
    backface-visibility: visible;
}

.cyl-14,
.cyl-15,
.cyl-16,
.cyl-17 {
    opacity: .2;
    animation: jet 20s ease 1 0s;
}

.cyl-14 .side,
.cyl-15 .side,
.cyl-16 .side,
.cyl-17 .side {
    opacity: .7;
    background: linear-gradient(bottom, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 248, 0) 1%, rgba(247, 238, 215, 0.27) 38%, rgba(240, 208, 151, 0.44) 61%, rgba(234, 184, 98, 0.35) 80%, rgba(245, 92, 49, 0.3) 90%, rgba(255, 0, 0, 0.05) 100%) !important;
    background: linear-gradient(to top, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 248, 0) 1%, rgba(247, 238, 215, 0.27) 38%, rgba(240, 208, 151, 0.44) 61%, rgba(234, 184, 98, 0.35) 80%, rgba(245, 92, 49, 0.3) 90%, rgba(255, 0, 0, 0.05) 100%) !important;
}

.cyl-14 .tp,
.cyl-15 .tp,
.cyl-16 .tp,
.cyl-17 .tp {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(center, ellipse cover, #fdfdd2 0%, #fdfdd2 30%, #fcc041 60%, #ea250c 80%);
    background: radial-gradient(ellipse at center, #fdfdd2 0%, #fdfdd2 30%, #fcc041 60%, #ea250c 80%);
}

@keyframes jet {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: .1;
    }

    40% {
        opacity: .65;
    }

    44% {
        opacity: .025;
    }

    50% {
        opacity: .25;
    }

    52% {
        opacity: .025;
    }

    55% {
        opacity: .025;
    }

    70% {
        opacity: .6;
    }

    75% {
        opacity: .025;
    }

    78% {
        opacity: .3;
    }

    82% {
        opacity: .05;
    }

    86% {
        opacity: .25;
    }

    87% {
        opacity: .1;
    }

    88% {
        opacity: .2;
    }

    90% {
        opacity: .1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes xwing {
    0% {
        transform: translate3D(0em, 0em, -1000em) rotateX(0deg) rotateY(0deg) rotateZ(480deg)
    }

    10% {
        transform: translate3D(0em, 0em, 16em) rotateX(-3deg) rotateY(0deg) rotateZ(-8deg)
    }

    20% {
        transform: translate3D(-2em, 0em, 0em) rotateX(-25deg) rotateY(25deg) rotateZ(0deg)
    }

    30% {
        transform: translate3D(2em, 0em, 0em) rotateX(0deg) rotateY(75deg) rotateZ(45deg)
    }

    40% {
        transform: translate3D(-1em, 0em, 0em) rotateX(0deg) rotateY(90deg) rotateZ(-25deg)
    }

    55% {
        transform: translate3D(2em, 0em, 0em) rotateX(-25deg) rotateY(320deg) rotateZ(35deg)
    }

    82% {
        transform: translate3D(0em, 0em, 16em) rotateX(-15deg) rotateY(180deg) rotateZ(-380deg)
    }

    87% {
        transform: translate3D(0em, 0em, 16em) rotateX(0deg) rotateY(180deg) rotateZ(-355deg)
    }

    90% {
        transform: translate3D(0em, 0em, 24em) rotateX(0deg) rotateY(180deg) rotateZ(-360deg)
    }

    100% {
        transform: translate3D(0em, 0em, -4000em) rotateX(0deg) rotateY(180deg) rotateZ(-360deg)
    }
}

@keyframes xwing-loop {
    0% {
        transform: translate3D(-120em, -250em, -400em) rotateX(-45deg) rotateY(45deg) rotateZ(0deg)
    }

    35% {
        transform: translate3D(120em, 200em, 300em) rotateX(-30deg) rotateY(0deg) rotateZ(-110deg)
    }

    36% {
        transform: translate3D(-200em, 5em, 10em) rotateX(-10deg) rotateY(90deg) rotateZ(-30deg)
    }

    74% {
        transform: translate3D(250em, -30em, -100em) rotateX(45deg) rotateY(90deg) rotateZ(30deg)
    }

    75% {
        transform: translate3D(120em, 0em, -10em) rotateX(0deg) rotateY(-90deg) rotateZ(15deg)
    }

    100% {
        transform: translate3D(-250em, 5em, -120em) rotateX(0deg) rotateY(-90deg) rotateZ(120deg)
    }
}

@keyframes stars {
    0% {
        transform: translate3D(-5em, 0em, 0);
    }

    10% {
        transform: translate3D(-5em, -12em, 0);
    }

    20% {
        transform: translate3D(-15em, -10em, 0);
    }

    55% {
        transform: translate3D(-280em, -12em, 0);
    }

    82% {
        transform: translate3D(0, -11em, 0);
    }

    87% {
        transform: translate3D(-5em, -12em, 0);
    }

    90% {
        transform: translate3D(-5em, -12em, 0);
    }

    100% {
        transform: translate3D(-5em, 0, 0);
    }
}


.vids {
    margin-top: 300px;

    text-align: center;
}


.build-with {
    opacity: 0;
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -240px 0 0 -240px;
    width: 480px;
    height: 480px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: rgba(255, 255, 255, .8);
    animation: build 4s ease 20s normal forwards;
}

@keyframes build {
    0% {
        opacity: 0;
        transform: translateY(4em)
    }

    100% {
        opacity: 1;
    }
}

.build-with p {
    font-size: 24px;
    margin-bottom: 2em;
}

.making {
    opacity: 0;
    animation: btn 1s ease 1 22s normal forwards;
}

.build-with .btn {
    opacity: 0;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: white;
    background-color: #009AFF;
    padding: 20px 32px;
    border-radius: 3px;
    animation: btn .5s ease 1 23.5s normal forwards;
}

@keyframes btn {
    0% {
        opacity: 0;
        transform: translateY(4em)
    }

    75% {
        opacity: 1;
        transform: translateY(-.5em)
    }

    100% {
        opacity: 1;
    }
}

.build-with .btn:hover {
    background-color: #0088E3;
}

.build-with .btn:active {
    background-color: #0088E3;
}

.build-with img {
    width: 220px;
    height: auto;
    margin-bottom: 3em;
}

.build-with a {
    display: inline-block;
    transition: background .25s ease,
        -webkit-transform .25s ease;
}

.build-with a:hover {
    transform: scale(1.1);
}

.build-with a:active {
    transform: scale(.9);
}

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use https://leaverou.github.io/prefixfree/) /!\ */
#tridiv {
    perspective: 800px;
    margin-top: -200px;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 100%;
}

.scene,
.shape,
.face,
.face-wrapper,
.cr {
    position: absolute;
    transform-style: preserve-3d;
}

.scene {
    width: 80em;
    height: 80em;
    top: 45%;
    left: 50%;
    margin: -40em 0 0 -40em;
}

.shape {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: 50%;
}

.face,
.face-wrapper {
    overflow: hidden;
    transform-origin: 0 0;
    backface-visibility: hidden;
    /* hidden by default, prevent blinking and other weird rendering glitchs */
}

.face {
    background-size: 100% 100% !important;
    background-position: center;
}

.face-wrapper .face {
    left: 100%;
    width: 100%;
    height: 100%
}

.photon-shader {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 100%
}

.side {
    left: 50%;
}

.cr,
.cr .side {
    height: 100%;
}

[class*="cuboid"] .ft,
[class*="cuboid"] .bk {
    width: 100%;
    height: 100%;
}

[class*="cuboid"] .bk {
    left: 100%;
}

[class*="cuboid"] .rt {
    transform: rotateY(-90deg) translateX(-50%);
}

[class*="cuboid"] .lt {
    transform: rotateY(90deg) translateX(-50%);
}

[class*="cuboid"] .tp {
    transform: rotateX(90deg) translateY(-50%);
}

[class*="cuboid"] .bm {
    transform: rotateX(-90deg) translateY(-50%);
}

[class*="cuboid"] .lt {
    left: 100%;
}

[class*="cuboid"] .bm {
    top: 100%;
}

[class*="prism"] .ft,
[class*="prism"] .bk {
    width: 100%;
    height: 100%;
}

[class*="prism"] .bk {
    left: 100%;
}

[class*="prism"] .rt {
    transform: rotateY(-90deg) translateX(-50%);
}

[class*="prism"] .lt {
    transform: rotateY(90deg) translateX(-50%);
}

[class*="prism"] .bm {
    transform: rotateX(-90deg) translateY(-50%);
}

[class*="prism"] .lt {
    left: 100%;
}

[class*="prism"] .bm {
    top: 100%;
}

[class*="prism"] .rt .face {
    left: -100%;
    transform-origin: 100% 0;
}

[class*="cylinder"] .tp {
    transform: rotateX(90deg) translateY(-50%);
}

[class*="cylinder"] .bm {
    transform: rotateX(-90deg) translateY(-50%);
}

[class*="cylinder"] .tp,
[class*="cylinder"] .bm,
[class*="cylinder"] .tp .photon-shader,
[class*="cylinder"] .bm .photon-shader {
    border-radius: 50%;
}

[class*="cylinder"] .bm {
    top: 100%;
}

/* .cub-1 styles */
.cub-1 {
    transform: translate3D(0em, 0.625em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 3.5em;
    height: 3.25em;
    margin: -1.625em 0 0 -1.75em;
}

.cub-1 .ft {
    transform: translateZ(3.75em);
}

.cub-1 .bk {
    transform: translateZ(-3.75em) rotateY(180deg);
}

.cub-1 .rt,
.cub-1 .lt {
    width: 7.5em;
    height: 3.25em;
}

.cub-1 .tp,
.cub-1 .bm {
    width: 3.5em;
    height: 7.5em;
}

.cub-1 .face {
    background-color: #bfc9c5;
}

/* .pri-1 styles */
.pri-1 {
    transform: translate3D(0em, -1.5em, 3.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: .5;
    width: 3.5em;
    height: .9em;
    margin: -0.45em 0 0 -1.75em;
}

.pri-1 .rt .face {
    transform: rotateZ(-78.43986920578223deg);
}

.pri-1 .lt .face {
    transform: rotateZ(78.43986920578223deg);
}

.pri-1 .ft {
    height: 4.491102314577124em;
    transform: translateZ(-2.2em) rotateX(78.43986920578223deg);
}

.pri-1 .bk {
    transform: translateZ(-2.2em) rotateY(180deg);
}

.pri-1 .rt,
.pri-1 .lt {
    width: 4.4em;
    height: .9em;
}

.pri-1 .rt .face,
.pri-1 .lt .face {
    height: 4.491102314577124em;
}

.pri-1 .bm {
    width: 3.5em;
    height: 4.4em;
}

.pri-1 .face {
    background-color: darkorange;
}

.pri-1 .bk {
    background-color: #02101f;
}

.pri-1 .bm {
    background-color: #123a5f;
}

/* .cub-2 styles */
.cub-2 {
    transform: translate3D(0em, -1.5em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 3.5em;
    height: 1em;
    margin: -0.5em 0 0 -1.75em;
}

.cub-2 .ft {
    transform: translateZ(1.5em);
}

.cub-2 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-2 .rt,
.cub-2 .lt {
    width: 3em;
    height: 1em;
}

.cub-2 .tp,
.cub-2 .bm {
    width: 3.5em;
    height: 3em;
}

.cub-2 .face {
    background-color: #bfc9c5;
}

/* .pri-2 styles */
.pri-2 {
    transform: translate3D(0em, -0.625em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2em;
    height: .75em;
    margin: -0.375em 0 0 -1em;
}

.pri-2 .rt .face {
    transform: rotateZ(-85.71084667118097deg);
}

.pri-2 .lt .face {
    transform: rotateZ(85.71084667118097deg);
}

.pri-2 .ft {
    height: 10.02808556006579em;
    transform: translateZ(-5em) rotateX(85.71084667118097deg);
}

.pri-2 .bk {
    transform: translateZ(-5em) rotateY(180deg);
}

.pri-2 .rt,
.pri-2 .lt {
    width: 10em;
    height: .75em;
}

.pri-2 .rt .face,
.pri-2 .lt .face {
    height: 10.02808556006579em;
}

.pri-2 .bm {
    width: 2em;
    height: 10em;
}

.pri-2 .face {
    background-color: #bfc9c5;
}

/* .pri-3 styles */
.pri-3 {
    transform: translate3D(1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 1.5em;
    height: 1em;
    margin: -0.5em 0 0 -0.75em;
}

.pri-3 .rt .face {
    transform: rotateZ(-84.28940686250036deg);
}

.pri-3 .lt .face {
    transform: rotateZ(84.28940686250036deg);
}

.pri-3 .ft {
    height: 10.04987562112089em;
    transform: translateZ(-5em) rotateX(84.28940686250036deg);
}

.pri-3 .bk {
    transform: translateZ(-5em) rotateY(180deg);
}

.pri-3 .rt,
.pri-3 .lt {
    width: 10em;
    height: 1em;
}

.pri-3 .rt .face,
.pri-3 .lt .face {
    height: 10.04987562112089em;
}

.pri-3 .bm {
    width: 1.5em;
    height: 10em;
}

.pri-3 .face {
    background-color: #FFFFFF;
}

.pri-3 .ft {
    background-color: darkmagenta;
}

.pri-3 .lt > div {
    background-color: #bfc9c5;
}

.pri-3 .rt > div {
    background-color: #bfc9c5;
}

/* .pri-4 styles */
.pri-4 {
    transform: translate3D(-1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
    opacity: 1;
    width: 1.5em;
    height: 1em;
    margin: -0.5em 0 0 -0.75em;
}

.pri-4 .rt .face {
    transform: rotateZ(-84.28940686250036deg);
}

.pri-4 .lt .face {
    transform: rotateZ(84.28940686250036deg);
}

.pri-4 .ft {
    height: 10.04987562112089em;
    transform: translateZ(-5em) rotateX(84.28940686250036deg);
}

.pri-4 .bk {
    transform: translateZ(-5em) rotateY(180deg);
}

.pri-4 .rt,
.pri-4 .lt {
    width: 10em;
    height: 1em;
}

.pri-4 .rt .face,
.pri-4 .lt .face {
    height: 10.04987562112089em;
}

.pri-4 .bm {
    width: 1.5em;
    height: 10em;
}

.pri-4 .face {
    background-color: #bfc9c5;
}

.pri-4 .ft {
    background-color: darkmagenta;
}

/* .pri-5 styles */
.pri-5 {
    transform: translate3D(0em, -0.25em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.pri-5 .rt .face {
    transform: rotateZ(-71.56505117707799deg);
}

.pri-5 .lt .face {
    transform: rotateZ(71.56505117707799deg);
}

.pri-5 .ft {
    height: 3.1622776601683795em;
    transform: translateZ(-1.5em) rotateX(71.56505117707799deg);
}

.pri-5 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.pri-5 .rt,
.pri-5 .lt {
    width: 3em;
    height: 1em;
}

.pri-5 .rt .face,
.pri-5 .lt .face {
    height: 3.1622776601683795em;
}

.pri-5 .bm {
    width: 2em;
    height: 3em;
}

.pri-5 .face {
    background-color: #b1bbb7;
}

/* .cub-3 styles */
.cub-3 {
    transform: translate3D(0em, 0.75em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.cub-3 .ft {
    transform: translateZ(1.5em);
}

.cub-3 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-3 .rt,
.cub-3 .lt {
    width: 3em;
    height: 1em;
}

.cub-3 .tp,
.cub-3 .bm {
    width: 2em;
    height: 3em;
}

.cub-3 .face {
    background-color: #b1bbb7;
}

/* .cub-4 styles */
.cub-4 {
    transform: translate3D(-7.75em, -1.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
    opacity: 1;
    width: 11em;
    height: .5em;
    margin: -0.25em 0 0 -5.5em;
}

.cub-4 .ft {
    transform: translateZ(2em);
}

.cub-4 .bk {
    transform: translateZ(-2em) rotateY(180deg);
}

.cub-4 .rt,
.cub-4 .lt {
    width: 4em;
    height: .5em;
}

.cub-4 .tp,
.cub-4 .bm {
    width: 11em;
    height: 4em;
}

.cub-4 .face {
    background-color: #bfc9c5;
}

/* .pri-6 styles */
.pri-6 {
    transform: translate3D(2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    opacity: 1;
    width: 8.5em;
    height: 2.5em;
    margin: -1.25em 0 0 -4.25em;
}

.pri-6 .rt .face {
    transform: rotateZ(-21.801409486351798deg);
}

.pri-6 .lt .face {
    transform: rotateZ(21.801409486351798deg);
}

.pri-6 .ft {
    height: 2.692582403567252em;
    transform: translateZ(-0.5em) rotateX(21.801409486351798deg);
}

.pri-6 .bk {
    transform: translateZ(-0.5em) rotateY(180deg);
}

.pri-6 .rt,
.pri-6 .lt {
    width: 1em;
    height: 2.5em;
}

.pri-6 .rt .face,
.pri-6 .lt .face {
    height: 2.692582403567252em;
}

.pri-6 .bm {
    width: 8.5em;
    height: 1em;
}

.pri-6 .face {
    background-color: #bfc9c5;
}

.pri-6 .lt > div {
    background-color: #676f72;
}

/* .pri-7 styles */
.pri-7 {
    transform: translate3D(-2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
    opacity: 1;
    width: 8.5em;
    height: 2.5em;
    margin: -1.25em 0 0 -4.25em;
}

.pri-7 .rt .face {
    transform: rotateZ(-21.801409486351798deg);
}

.pri-7 .lt .face {
    transform: rotateZ(21.801409486351798deg);
}

.pri-7 .ft {
    height: 2.692582403567252em;
    transform: translateZ(-0.5em) rotateX(21.801409486351798deg);
}

.pri-7 .bk {
    transform: translateZ(-0.5em) rotateY(180deg);
}

.pri-7 .rt,
.pri-7 .lt {
    width: 1em;
    height: 2.5em;
}

.pri-7 .rt .face,
.pri-7 .lt .face {
    height: 2.692582403567252em;
}

.pri-7 .bm {
    width: 8.5em;
    height: 1em;
}

.pri-7 .face {
    background-color: #bfc9c5;
}

.pri-7 .rt > div {
    background-color: #676f72;
}

/* .pri-8 styles */
.pri-8 {
    transform: translate3D(-2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(270deg) rotateZ(0deg);
    opacity: 1;
    width: 8.5em;
    height: 2.5em;
    margin: -1.25em 0 0 -4.25em;
}

.pri-8 .rt .face {
    transform: rotateZ(-21.801409486351798deg);
}

.pri-8 .lt .face {
    transform: rotateZ(21.801409486351798deg);
}

.pri-8 .ft {
    height: 2.692582403567252em;
    transform: translateZ(-0.5em) rotateX(21.801409486351798deg);
}

.pri-8 .bk {
    transform: translateZ(-0.5em) rotateY(180deg);
}

.pri-8 .rt,
.pri-8 .lt {
    width: 1em;
    height: 2.5em;
}

.pri-8 .rt .face,
.pri-8 .lt .face {
    height: 2.692582403567252em;
}

.pri-8 .bm {
    width: 8.5em;
    height: 1em;
}

.pri-8 .face {
    background-color: #bfc9c5;
}

.pri-8 .lt > div {
    background-color: #676f72;
}

/* .pri-9 styles */
.pri-9 {
    transform: translate3D(2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(90deg) rotateZ(0deg);
    opacity: 1;
    width: 8.5em;
    height: 2.5em;
    margin: -1.25em 0 0 -4.25em;
}

.pri-9 .rt .face {
    transform: rotateZ(-21.801409486351798deg);
}

.pri-9 .lt .face {
    transform: rotateZ(21.801409486351798deg);
}

.pri-9 .ft {
    height: 2.692582403567252em;
    transform: translateZ(-0.5em) rotateX(21.801409486351798deg);
}

.pri-9 .bk {
    transform: translateZ(-0.5em) rotateY(180deg);
}

.pri-9 .rt,
.pri-9 .lt {
    width: 1em;
    height: 2.5em;
}

.pri-9 .rt .face,
.pri-9 .lt .face {
    height: 2.692582403567252em;
}

.pri-9 .bm {
    width: 8.5em;
    height: 1em;
}

.pri-9 .face {
    background-color: #bfc9c5;
}

.pri-9 .rt > div {
    background-color: #676f72;
}

/* .cyl-1 styles */
.cyl-1 {
    transform: translate3D(-3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2.3em;
    height: 5em;
    margin: -2.5em 0 0 -1.15em;
}

.cyl-1 .tp,
.cyl-1 .bm {
    width: 2.3em;
    height: 2.3em;
}

.cyl-1 .side {
    width: 0.5em;
    height: 5em;
}

.cyl-1 .s0 {
    transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s1 {
    transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s2 {
    transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s3 {
    transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s4 {
    transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s5 {
    transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s6 {
    transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s7 {
    transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s8 {
    transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s9 {
    transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s10 {
    transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s11 {
    transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s12 {
    transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s13 {
    transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s14 {
    transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .s15 {
    transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-1 .face,
.cyl-1 .side {
    background-color: #a6afac;
}

.cyl-1 .tp {
    background-color: #2d3133;
}

/* .cyl-2 styles */
.cyl-2 {
    transform: translate3D(-3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-2 .tp,
.cyl-2 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-2 .side {
    width: 0.5123795443493594em;
    height: 5em;
}

.cyl-2 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}

.cyl-2 .face,
.cyl-2 .side {
    background-color: #7a716b;
}

/* .pri-10 styles */
.pri-10 {
    transform: translate3D(-8.75em, -2.04em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(74deg);
    opacity: 1;
    width: 0.5em;
    height: 9em;
    margin: -4.5em 0 0 -0.25em;
}

.pri-10 .rt .face {
    transform: rotateZ(-12.528807709151492deg);
}

.pri-10 .lt .face {
    transform: rotateZ(12.528807709151492deg);
}

.pri-10 .ft {
    height: 9.219544457292887em;
    transform: translateZ(-1em) rotateX(12.528807709151492deg);
}

.pri-10 .bk {
    transform: translateZ(-1em) rotateY(180deg);
}

.pri-10 .rt,
.pri-10 .lt {
    width: 2em;
    height: 9em;
}

.pri-10 .rt .face,
.pri-10 .lt .face {
    height: 9.219544457292887em;
}

.pri-10 .bm {
    width: 0.5em;
    height: 2em;
}

.pri-10 .face {
    background-color: #bfc9c5;
}

/* .cyl-3 styles */
.cyl-3 {
    transform: translate3D(-12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(1deg) rotateZ(0deg);
    opacity: 1;
    width: 1.35em;
    height: 6em;
    margin: -3em 0 0 -0.675em;
}

.cyl-3 .tp,
.cyl-3 .bm {
    width: 1.35em;
    height: 1.35em;
}

.cyl-3 .side {
    width: 0.46364158991442356em;
    height: 6em;
}

.cyl-3 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}

.cyl-3 .face,
.cyl-3 .side {
    background-color: #8b959a;
}

.cyl-3 .tp {
    background-color: #4f4f4f;
}

/* .cub-5 styles */
.cub-5 {
    transform: translate3D(-12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 -0.2em;
}

.cub-5 .ft {
    transform: translateZ(4.5em);
}

.cub-5 .bk {
    transform: translateZ(-4.5em) rotateY(180deg);
}

.cub-5 .rt,
.cub-5 .lt {
    width: 9em;
    height: 0.4em;
}

.cub-5 .tp,
.cub-5 .bm {
    width: 0.4em;
    height: 9em;
}

.cub-5 .face {
    background-color: #b1bbb7;
}

/* .cub-6 styles */
.cub-6 {
    transform: translate3D(7.75em, -1.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(16deg);
    opacity: 1;
    width: 11em;
    height: .5em;
    margin: -0.25em 0 0 -5.5em;
}

.cub-6 .ft {
    transform: translateZ(2em);
}

.cub-6 .bk {
    transform: translateZ(-2em) rotateY(180deg);
}

.cub-6 .rt,
.cub-6 .lt {
    width: 4em;
    height: .5em;
}

.cub-6 .tp,
.cub-6 .bm {
    width: 11em;
    height: 4em;
}

.cub-6 .face {
    background-color: #bfc9c5;
}

/* .cyl-4 styles */
.cyl-4 {
    transform: translate3D(3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2.3em;
    height: 5em;
    margin: -2.5em 0 0 -1.15em;
}

.cyl-4 .tp,
.cyl-4 .bm {
    width: 2.3em;
    height: 2.3em;
}

.cyl-4 .side {
    width: 0.5em;
    height: 5em;
}

.cyl-4 .s0 {
    transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s1 {
    transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s2 {
    transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s3 {
    transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s4 {
    transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s5 {
    transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s6 {
    transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s7 {
    transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s8 {
    transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s9 {
    transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s10 {
    transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s11 {
    transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s12 {
    transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s13 {
    transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s14 {
    transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .s15 {
    transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-4 .face,
.cyl-4 .side {
    background-color: #a6afac;
}

.cyl-4 .tp {
    background-color: #2d3133;
}

/* .cyl-5 styles */
.cyl-5 {
    transform: translate3D(3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-5 .tp,
.cyl-5 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-5 .side {
    width: 0.5123795443493594em;
    height: 5em;
}

.cyl-5 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}

.cyl-5 .face,
.cyl-5 .side {
    background-color: #7a716b;
}

/* .cyl-6 styles */
.cyl-6 {
    transform: translate3D(12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
    opacity: 1;
    width: 1.35em;
    height: 6em;
    margin: -3em 0 0 -0.675em;
}

.cyl-6 .tp,
.cyl-6 .bm {
    width: 1.35em;
    height: 1.35em;
}

.cyl-6 .side {
    width: 0.46364158991442356em;
    height: 6em;
}

.cyl-6 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}

.cyl-6 .face,
.cyl-6 .side {
    background-color: #8b959a;
}

.cyl-6 .tp {
    background-color: #353535;
}

/* .cub-7 styles */
.cub-7 {
    transform: translate3D(12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 -0.2em;
}

.cub-7 .ft {
    transform: translateZ(4.5em);
}

.cub-7 .bk {
    transform: translateZ(-4.5em) rotateY(180deg);
}

.cub-7 .rt,
.cub-7 .lt {
    width: 9em;
    height: 0.4em;
}

.cub-7 .tp,
.cub-7 .bm {
    width: 0.4em;
    height: 9em;
}

.cub-7 .face {
    background-color: #b1bbb7;
}

/* .pri-11 styles */
.pri-11 {
    transform: translate3D(8.75em, -2.04em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(106deg);
    opacity: 1;
    width: 0.5em;
    height: 9em;
    margin: -4.5em 0 0 -0.25em;
}

.pri-11 .rt .face {
    transform: rotateZ(-12.528807709151492deg);
}

.pri-11 .lt .face {
    transform: rotateZ(12.528807709151492deg);
}

.pri-11 .ft {
    height: 9.219544457292887em;
    transform: translateZ(-1em) rotateX(12.528807709151492deg);
}

.pri-11 .bk {
    transform: translateZ(-1em) rotateY(180deg);
}

.pri-11 .rt,
.pri-11 .lt {
    width: 2em;
    height: 9em;
}

.pri-11 .rt .face,
.pri-11 .lt .face {
    height: 9.219544457292887em;
}

.pri-11 .bm {
    width: 0.5em;
    height: 2em;
}

.pri-11 .face {
    background-color: #bfc9c5;
}

/* .cub-8 styles */
.cub-8 {
    transform: translate3D(-7.75em, 2.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
    opacity: 1;
    width: 11em;
    height: .5em;
    margin: -0.25em 0 0 -5.5em;
}

.cub-8 .ft {
    transform: translateZ(2em);
}

.cub-8 .bk {
    transform: translateZ(-2em) rotateY(180deg);
}

.cub-8 .rt,
.cub-8 .lt {
    width: 4em;
    height: .5em;
}

.cub-8 .tp,
.cub-8 .bm {
    width: 11em;
    height: 4em;
}

.cub-8 .face {
    background-color: #bfc9c5;
}

/* .cub-9 styles */
.cub-9 {
    transform: translate3D(7.75em, 2.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(-16deg);
    opacity: 1;
    width: 11em;
    height: .5em;
    margin: -0.25em 0 0 -5.5em;
}

.cub-9 .ft {
    transform: translateZ(2em);
}

.cub-9 .bk {
    transform: translateZ(-2em) rotateY(180deg);
}

.cub-9 .rt,
.cub-9 .lt {
    width: 4em;
    height: .5em;
}

.cub-9 .tp,
.cub-9 .bm {
    width: 11em;
    height: 4em;
}

.cub-9 .face {
    background-color: #bfc9c5;
}

/* .cyl-7 styles */
.cyl-7 {
    transform: translate3D(-3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2.3em;
    height: 5em;
    margin: -2.5em 0 0 -1.15em;
}

.cyl-7 .tp,
.cyl-7 .bm {
    width: 2.3em;
    height: 2.3em;
}

.cyl-7 .side {
    width: 0.5em;
    height: 5em;
}

.cyl-7 .s0 {
    transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s1 {
    transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s2 {
    transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s3 {
    transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s4 {
    transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s5 {
    transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s6 {
    transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s7 {
    transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s8 {
    transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s9 {
    transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s10 {
    transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s11 {
    transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s12 {
    transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s13 {
    transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s14 {
    transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .s15 {
    transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-7 .face,
.cyl-7 .side {
    background-color: #a6afac;
}

.cyl-7 .tp {
    background-color: #2d3133;
}

/* .cyl-8 styles */
.cyl-8 {
    transform: translate3D(-3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-8 .tp,
.cyl-8 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-8 .side {
    width: 0.5123795443493594em;
    height: 5em;
}

.cyl-8 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}

.cyl-8 .face,
.cyl-8 .side {
    background-color: #7a716b;
}

/* .cyl-9 styles */
.cyl-9 {
    transform: translate3D(3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-9 .tp,
.cyl-9 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-9 .side {
    width: 0.5123795443493594em;
    height: 5em;
}

.cyl-9 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}

.cyl-9 .face,
.cyl-9 .side {
    background-color: #7a716b;
}

/* .cyl-10 styles */
.cyl-10 {
    transform: translate3D(3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 2.3em;
    height: 5em;
    margin: -2.5em 0 0 -1.15em;
}

.cyl-10 .tp,
.cyl-10 .bm {
    width: 2.3em;
    height: 2.3em;
}

.cyl-10 .side {
    width: 0.5em;
    height: 5em;
}

.cyl-10 .s0 {
    transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s1 {
    transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s2 {
    transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s3 {
    transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s4 {
    transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s5 {
    transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s6 {
    transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s7 {
    transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s8 {
    transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s9 {
    transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s10 {
    transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s11 {
    transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s12 {
    transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s13 {
    transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s14 {
    transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .s15 {
    transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}

.cyl-10 .face,
.cyl-10 .side {
    background-color: #a6afac;
}

.cyl-10 .tp {
    background-color: #2d3133;
}

/* .pri-12 styles */
.pri-12 {
    transform: translate3D(0em, 2.625em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
    opacity: 1;
    width: 3.5em;
    height: .75em;
    margin: -0.375em 0 0 -1.75em;
}

.pri-12 .rt .face {
    transform: rotateZ(-75.96375653207352deg);
}

.pri-12 .lt .face {
    transform: rotateZ(75.96375653207352deg);
}

.pri-12 .ft {
    height: 3.092329219213245em;
    transform: translateZ(-1.5em) rotateX(75.96375653207352deg);
}

.pri-12 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.pri-12 .rt,
.pri-12 .lt {
    width: 3em;
    height: .75em;
}

.pri-12 .rt .face,
.pri-12 .lt .face {
    height: 3.092329219213245em;
}

.pri-12 .bm {
    width: 3.5em;
    height: 3em;
}

.pri-12 .face {
    background-color: #bfc9c5;
}

/* .cub-10 styles */
.cub-10 {
    transform: translate3D(0em, 0.5em, -6.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 3.5em;
    height: 5em;
    margin: -2.5em 0 0 -1.75em;
}

.cub-10 .ft {
    transform: translateZ(4.25em);
}

.cub-10 .bk {
    transform: translateZ(-4.25em) rotateY(180deg);
}

.cub-10 .rt,
.cub-10 .lt {
    width: 8.5em;
    height: 5em;
}

.cub-10 .tp,
.cub-10 .bm {
    width: 3.5em;
    height: 8.5em;
}

.cub-10 .face {
    background-color: #bfc9c5;
}

.cub-10 .bk {
    background-color: #676f72;
}

/* .cyl-11 styles */
.cyl-11 {
    transform: translate3D(12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
    opacity: 1;
    width: 1.35em;
    height: 6em;
    margin: -3em 0 0 -0.675em;
}

.cyl-11 .tp,
.cyl-11 .bm {
    width: 1.35em;
    height: 1.35em;
}

.cyl-11 .side {
    width: 0.46364158991442356em;
    height: 6em;
}

.cyl-11 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}

.cyl-11 .face,
.cyl-11 .side {
    background-color: #8b959a;
}

.cyl-11 .tp {
    background-color: #4f4f4f;
}

/* .cyl-12 styles */
.cyl-12 {
    transform: translate3D(-12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
    opacity: 1;
    width: 1.35em;
    height: 6em;
    margin: -3em 0 0 -0.675em;
}

.cyl-12 .tp,
.cyl-12 .bm {
    width: 1.35em;
    height: 1.35em;
}

.cyl-12 .side {
    width: 0.46364158991442356em;
    height: 6em;
}

.cyl-12 .s0 {
    transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s1 {
    transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s2 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s3 {
    transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s4 {
    transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s5 {
    transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s6 {
    transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s7 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s8 {
    transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .s9 {
    transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}

.cyl-12 .face,
.cyl-12 .side {
    background-color: #8b959a;
}

.cyl-12 .tp {
    background-color: #4f4f4f;
}

/* .cub-11 styles */
.cub-11 {
    transform: translate3D(-12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 -0.2em;
}

.cub-11 .ft {
    transform: translateZ(4.5em);
}

.cub-11 .bk {
    transform: translateZ(-4.5em) rotateY(180deg);
}

.cub-11 .rt,
.cub-11 .lt {
    width: 9em;
    height: 0.4em;
}

.cub-11 .tp,
.cub-11 .bm {
    width: 0.4em;
    height: 9em;
}

.cub-11 .face {
    background-color: #b1bbb7;
}

/* .cub-12 styles */
.cub-12 {
    transform: translate3D(12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 -0.2em;
}

.cub-12 .ft {
    transform: translateZ(4.5em);
}

.cub-12 .bk {
    transform: translateZ(-4.5em) rotateY(180deg);
}

.cub-12 .rt,
.cub-12 .lt {
    width: 9em;
    height: 0.4em;
}

.cub-12 .tp,
.cub-12 .bm {
    width: 0.4em;
    height: 9em;
}

.cub-12 .face {
    background-color: #b1bbb7;
}

/* .pri-13 styles */
.pri-13 {
    transform: translate3D(8.75em, 3em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(74deg);
    opacity: 1;
    width: 0.5em;
    height: 9em;
    margin: -4.5em 0 0 -0.25em;
}

.pri-13 .rt .face {
    transform: rotateZ(-12.528807709151492deg);
}

.pri-13 .lt .face {
    transform: rotateZ(12.528807709151492deg);
}

.pri-13 .ft {
    height: 9.219544457292887em;
    transform: translateZ(-1em) rotateX(12.528807709151492deg);
}

.pri-13 .bk {
    transform: translateZ(-1em) rotateY(180deg);
}

.pri-13 .rt,
.pri-13 .lt {
    width: 2em;
    height: 9em;
}

.pri-13 .rt .face,
.pri-13 .lt .face {
    height: 9.219544457292887em;
}

.pri-13 .bm {
    width: 0.5em;
    height: 2em;
}

.pri-13 .face {
    background-color: #bfc9c5;
}

/* .pri-14 styles */
.pri-14 {
    transform: translate3D(-8.75em, 3em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(106deg);
    opacity: 1;
    width: 0.5em;
    height: 9em;
    margin: -4.5em 0 0 -0.25em;
}

.pri-14 .rt .face {
    transform: rotateZ(-12.528807709151492deg);
}

.pri-14 .lt .face {
    transform: rotateZ(12.528807709151492deg);
}

.pri-14 .ft {
    height: 9.219544457292887em;
    transform: translateZ(-1em) rotateX(12.528807709151492deg);
}

.pri-14 .bk {
    transform: translateZ(-1em) rotateY(180deg);
}

.pri-14 .rt,
.pri-14 .lt {
    width: 2em;
    height: 9em;
}

.pri-14 .rt .face,
.pri-14 .lt .face {
    height: 9.219544457292887em;
}

.pri-14 .bm {
    width: 0.5em;
    height: 2em;
}

.pri-14 .face {
    background-color: #bfc9c5;
}

/* .pri-15 styles */
.pri-15 {
    transform: translate3D(-2.0310344827586206em, 0.5em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
    opacity: 1;
    width: 1.5em;
    height: 0.5em;
    margin: -0.25em 0 0 -0.75em;
}

.pri-15 .rt .face {
    transform: rotateZ(-86.18592516570965deg);
}

.pri-15 .lt .face {
    transform: rotateZ(86.18592516570965deg);
}

.pri-15 .ft {
    height: 7.516648189186454em;
    transform: translateZ(-3.75em) rotateX(86.18592516570965deg);
}

.pri-15 .bk {
    transform: translateZ(-3.75em) rotateY(180deg);
}

.pri-15 .rt,
.pri-15 .lt {
    width: 7.5em;
    height: 0.5em;
}

.pri-15 .rt .face,
.pri-15 .lt .face {
    height: 7.516648189186454em;
}

.pri-15 .bm {
    width: 1.5em;
    height: 7.5em;
}

.pri-15 .face {
    background-color: #bfc9c5;
}

.pri-15 .ft {
    background-color: darkmagenta;
}

/* .pri-16 styles */
.pri-16 {
    transform: translate3D(2.0310344827586206em, 0.48275862068965514em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 1.5em;
    height: 0.5em;
    margin: -0.25em 0 0 -0.75em;
}

.pri-16 .rt .face {
    transform: rotateZ(-86.18592516570965deg);
}

.pri-16 .lt .face {
    transform: rotateZ(86.18592516570965deg);
}

.pri-16 .ft {
    height: 7.516648189186454em;
    transform: translateZ(-3.75em) rotateX(86.18592516570965deg);
}

.pri-16 .bk {
    transform: translateZ(-3.75em) rotateY(180deg);
}

.pri-16 .rt,
.pri-16 .lt {
    width: 7.5em;
    height: 0.5em;
}

.pri-16 .rt .face,
.pri-16 .lt .face {
    height: 7.516648189186454em;
}

.pri-16 .bm {
    width: 1.5em;
    height: 7.5em;
}

.pri-16 .face {
    background-color: #bfc9c5;
}

.pri-16 .ft {
    background-color: darkmagenta;
}

/* .pri-17 styles */
.pri-17 {
    transform: translate3D(0em, 1.75em, 12em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.pri-17 .rt .face {
    transform: rotateZ(-85.60129464500446deg);
}

.pri-17 .lt .face {
    transform: rotateZ(85.60129464500446deg);
}

.pri-17 .ft {
    height: 13.038404810405298em;
    transform: translateZ(-6.5em) rotateX(85.60129464500446deg);
}

.pri-17 .bk {
    transform: translateZ(-6.5em) rotateY(180deg);
}

.pri-17 .rt,
.pri-17 .lt {
    width: 13em;
    height: 1em;
}

.pri-17 .rt .face,
.pri-17 .lt .face {
    height: 13.038404810405298em;
}

.pri-17 .bm {
    width: 2em;
    height: 13em;
}

.pri-17 .face {
    background-color: #bfc9c5;
}

/* .cub-13 styles */
.cub-13 {
    transform: translate3D(3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
    opacity: 1;
    width: 2.3em;
    height: 0.25em;
    margin: -0.125em 0 0 -1.15em;
}

.cub-13 .ft {
    transform: translateZ(0.05em);
}

.cub-13 .bk {
    transform: translateZ(-0.05em) rotateY(180deg);
}

.cub-13 .rt,
.cub-13 .lt {
    width: 0.1em;
    height: 0.25em;
}

.cub-13 .tp,
.cub-13 .bm {
    width: 2.3em;
    height: 0.1em;
}

.cub-13 .face {
    background-color: #97979b;
}

/* .cub-14 styles */
.cub-14 {
    transform: translate3D(-3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
    opacity: 1;
    width: 2.3em;
    height: 0.25em;
    margin: -0.125em 0 0 -1.15em;
}

.cub-14 .ft {
    transform: translateZ(0.05em);
}

.cub-14 .bk {
    transform: translateZ(-0.05em) rotateY(180deg);
}

.cub-14 .rt,
.cub-14 .lt {
    width: 0.1em;
    height: 0.25em;
}

.cub-14 .tp,
.cub-14 .bm {
    width: 2.3em;
    height: 0.1em;
}

.cub-14 .face {
    background-color: #97979b;
}

/* .cub-15 styles */
.cub-15 {
    transform: translate3D(-3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
    opacity: 1;
    width: 2.3em;
    height: 0.25em;
    margin: -0.125em 0 0 -1.15em;
}

.cub-15 .ft {
    transform: translateZ(0.05em);
}

.cub-15 .bk {
    transform: translateZ(-0.05em) rotateY(180deg);
}

.cub-15 .rt,
.cub-15 .lt {
    width: 0.1em;
    height: 0.25em;
}

.cub-15 .tp,
.cub-15 .bm {
    width: 2.3em;
    height: 0.1em;
}

.cub-15 .face {
    background-color: #97979b;
}

/* .cub-16 styles */
.cub-16 {
    transform: translate3D(3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
    opacity: 1;
    width: 2.3em;
    height: 0.25em;
    margin: -0.125em 0 0 -1.15em;
}

.cub-16 .ft {
    transform: translateZ(0.05em);
}

.cub-16 .bk {
    transform: translateZ(-0.05em) rotateY(180deg);
}

.cub-16 .rt,
.cub-16 .lt {
    width: 0.1em;
    height: 0.25em;
}

.cub-16 .tp,
.cub-16 .bm {
    width: 2.3em;
    height: 0.1em;
}

.cub-16 .face {
    background-color: #97979b;
}

/* .cub-17 styles */
.cub-17 {
    transform: translate3D(-8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
    opacity: 1;
    width: 2.5em;
    height: .1em;
    margin: -0.05em 0 0 -1.25em;
}

.cub-17 .ft {
    transform: translateZ(1.75em);
}

.cub-17 .bk {
    transform: translateZ(-1.75em) rotateY(180deg);
}

.cub-17 .rt,
.cub-17 .lt {
    width: 3.5em;
    height: .1em;
}

.cub-17 .tp,
.cub-17 .bm {
    width: 2.5em;
    height: 3.5em;
}

.cub-17 .face {
    background-color: #bfc9c5;
}

.cub-17 .tp {
    background-color: darkmagenta;
}

/* .cub-18 styles */
.cub-18 {
    transform: translate3D(8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
    opacity: 1;
    width: 2.5em;
    height: .1em;
    margin: -0.05em 0 0 -1.25em;
}

.cub-18 .ft {
    transform: translateZ(1.75em);
}

.cub-18 .bk {
    transform: translateZ(-1.75em) rotateY(180deg);
}

.cub-18 .rt,
.cub-18 .lt {
    width: 3.5em;
    height: .1em;
}

.cub-18 .tp,
.cub-18 .bm {
    width: 2.5em;
    height: 3.5em;
}

.cub-18 .face {
    background-color: #bfc9c5;
}

.cub-18 .tp {
    background-color: darkmagenta;
}

/* .cyl-13 styles */
.cyl-13 {
    transform: translate3D(-12.25em, -4em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.cyl-13 .tp,
.cyl-13 .bm {
    width: 2em;
    height: 2em;
}

.cyl-13 .side {
    width: 1.1797005383792514em;
    height: 1em;
}

.cyl-13 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}

.cyl-13 .face,
.cyl-13 .side {
    background-color: #bfc9c5;
}

/* .cub-19 styles */
.cub-19 {
    transform: translate3D(-12.25em, -4em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.25em;
    height: 0.25em;
    margin: -0.125em 0 0 -0.125em;
}

.cub-19 .ft {
    transform: translateZ(1.5em);
}

.cub-19 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-19 .rt,
.cub-19 .lt {
    width: 3em;
    height: 0.25em;
}

.cub-19 .tp,
.cub-19 .bm {
    width: 0.25em;
    height: 3em;
}

.cub-19 .face {
    background-color: #b1bbb7;
}

/* .cub-20 styles */
.cub-20 {
    transform: translate3D(12.25em, -4em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.25em;
    height: 0.25em;
    margin: -0.125em 0 0 -0.125em;
}

.cub-20 .ft {
    transform: translateZ(1.5em);
}

.cub-20 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-20 .rt,
.cub-20 .lt {
    width: 3em;
    height: 0.25em;
}

.cub-20 .tp,
.cub-20 .bm {
    width: 0.25em;
    height: 3em;
}

.cub-20 .face {
    background-color: #b1bbb7;
}

/* .cub-21 styles */
.cub-21 {
    transform: translate3D(12.25em, 5em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.25em;
    height: 0.25em;
    margin: -0.125em 0 0 -0.125em;
}

.cub-21 .ft {
    transform: translateZ(1.5em);
}

.cub-21 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-21 .rt,
.cub-21 .lt {
    width: 3em;
    height: 0.25em;
}

.cub-21 .tp,
.cub-21 .bm {
    width: 0.25em;
    height: 3em;
}

.cub-21 .face {
    background-color: #b1bbb7;
}

/* .cub-22 styles */
.cub-22 {
    transform: translate3D(-12.25em, 5em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 0.25em;
    height: 0.25em;
    margin: -0.125em 0 0 -0.125em;
}

.cub-22 .ft {
    transform: translateZ(1.5em);
}

.cub-22 .bk {
    transform: translateZ(-1.5em) rotateY(180deg);
}

.cub-22 .rt,
.cub-22 .lt {
    width: 3em;
    height: 0.25em;
}

.cub-22 .tp,
.cub-22 .bm {
    width: 0.25em;
    height: 3em;
}

.cub-22 .face {
    background-color: #b1bbb7;
}

/* .cyl-14 styles */
.cyl-14 {
    transform: translate3D(3.5em, -2em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-14 .tp,
.cyl-14 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-14 .side {
    width: 0.8910254037844386em;
    height: 5em;
}

.cyl-14 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}

.cyl-14 .face,
.cyl-14 .side {
    background-color: #7a716b;
}

/* .cyl-15 styles */
.cyl-15 {
    transform: translate3D(-3.5em, -2em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-15 .tp,
.cyl-15 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-15 .side {
    width: 0.8910254037844386em;
    height: 5em;
}

.cyl-15 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}

.cyl-15 .face,
.cyl-15 .side {
    background-color: #7a716b;
}

/* .cyl-16 styles */
.cyl-16 {
    transform: translate3D(-3.5em, 3em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-16 .tp,
.cyl-16 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-16 .side {
    width: 0.8910254037844386em;
    height: 5em;
}

.cyl-16 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}

.cyl-16 .face,
.cyl-16 .side {
    background-color: #7a716b;
}

/* .cyl-17 styles */
.cyl-17 {
    transform: translate3D(3.5em, 3em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    width: 1.5em;
    height: 5em;
    margin: -2.5em 0 0 -0.75em;
}

.cyl-17 .tp,
.cyl-17 .bm {
    width: 1.5em;
    height: 1.5em;
}

.cyl-17 .side {
    width: 0.8910254037844386em;
    height: 5em;
}

.cyl-17 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}

.cyl-17 .face,
.cyl-17 .side {
    background-color: #7a716b;
}

/* .cyl-18 styles */
.cyl-18 {
    transform: translate3D(12.25em, -4em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.cyl-18 .tp,
.cyl-18 .bm {
    width: 2em;
    height: 2em;
}

.cyl-18 .side {
    width: 1.1797005383792514em;
    height: 1em;
}

.cyl-18 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}

.cyl-18 .face,
.cyl-18 .side {
    background-color: #bfc9c5;
}

/* .cyl-19 styles */
.cyl-19 {
    transform: translate3D(12.25em, 5em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.cyl-19 .tp,
.cyl-19 .bm {
    width: 2em;
    height: 2em;
}

.cyl-19 .side {
    width: 1.1797005383792514em;
    height: 1em;
}

.cyl-19 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}

.cyl-19 .face,
.cyl-19 .side {
    background-color: #bfc9c5;
}

/* .cyl-20 styles */
.cyl-20 {
    transform: translate3D(-12.25em, 5em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
    width: 2em;
    height: 1em;
    margin: -0.5em 0 0 -1em;
}

.cyl-20 .tp,
.cyl-20 .bm {
    width: 2em;
    height: 2em;
}

.cyl-20 .side {
    width: 1.1797005383792514em;
    height: 1em;
}

.cyl-20 .s0 {
    transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .s1 {
    transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .s2 {
    transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .s3 {
    transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .s4 {
    transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .s5 {
    transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}

.cyl-20 .face,
.cyl-20 .side {
    background-color: #bfc9c5;
}

.heart {
    position: relative;
    top: 0.1em;
    width: 1.1em;
    animation: pulse 1s ease infinite;
}

.colour {
    color: darkmagenta !important;
}

.colour1 {
    color: crimson !important;
}

.colour2 {
    color: darkorange !important;
}

.colour3 {
    color: chartreuse !important;
}

.colour4 {
    color: dodgerblue !important;
}

.colour5 {
    color: darkgoldenrod !important;
}

.colour6 {
    color: darkslateblue !important;
}

.colour7 {
    color: coral !important;
}

hr {
    max-width: 100px;
    height: 2px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

hr.colored {
    border-color: #cdb49a;
}

hr.colored2 {
    border-color: #A2A9AF !important;
    z-index: 1099;
}


@media (min-width: 992px) {
    hr {
        max-width: 150px;
    }
}

section.page-section {
    padding: 60px 0;

}

@media (max-width: 767px) {
    section.page-section {
        padding: 75px 0;
    }
}

section.page-section2 {
    padding: 35px 0 20px;
    margin-top: 30px;
    margin-bottom: 40px;
    background-color: transparent;
}

@media (max-width: 1679px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 1450px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 1250px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 100px;
        margin-bottom: 40px;
    }
}


@media (max-width: 991px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 0px;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 50px;
        margin-bottom: 40px;
    }
}

@media (max-width: 468px) {
    section.page-section2 {
        padding: 35px 0 20px;
        margin-top: 50px;
        margin-bottom: 40px;
    }
}

::-webkit-input-placeholder {
    font-weight: 300;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:-moz-placeholder {
    font-weight: 300;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

::-moz-placeholder {
    font-weight: 300;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:-ms-input-placeholder {
    font-weight: 300;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

a {
    color: #cdb49a;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

a:hover,
a:focus {
    color: #fff;
    text-decoration: none;
}

p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #FFF;
}


.pad-black {
    background-color: #A2A9AF;

}

p.lead {
    font-size: 24px;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    h1 {
        font-size: 62px;
    }

    h2 {
        font-size: 50px;
    }
}

#mainNav {
    background-color: #9a9a9a !important;
    opacity: 0.7;
}

#mainNav .navbar-toggler {
    padding: 15px;
    color: white;
    font-size: 14px;
}

#mainNav .navbar-toggler:focus,
#mainNav .navbar-toggler:hover {
    color: #FFF;
    background-color: white;
}

#mainNav .navbar-brand {
    color: white;
    font-size: 24px;
    line-height: 44px;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

#mainNav .navbar-brand img {
    height: 40px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    color: white;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link:focus,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover {
    color: rgba(255, 255, 255, 0.5);
}

#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:focus,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:hover {
    color: #cdb49a;
}

@media (min-width: 992px) {
    #mainNav {
        height: auto;
        padding: 30px 0;
        -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
        transition: padding-top 0.3s, padding-bottom 0.3s;
        background-color: transparent;
    }

    #mainNav.navbar-shrink {
        padding: 5px 0;
        background-color: #222;
    }

    #mainNav .navbar-brand {
        font-size: 26px;
        line-height: 50px;
    }

    #mainNav .navbar-brand img {
        height: 46px;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item {
        margin-right: 5px;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item:last-child {
        margin-right: 0;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link {
        padding: 15px;
    }

    #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active,
    #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:focus,
    #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:hover {
        color: #cdb49a;
        border-radius: 0;
        border-radius: 5px;
        background-color: white;
    }
}


.foel-top {
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 1030;

    left: 0;
    background-color: transparent;
    background-image: url(../img/shop.png);
}


@media (max-width: 1666px) {
    .foel-top {
        display: none;
    }
}

@media (max-width: 1795px) {
    .foel-top {
        background-repeat: no-repeat;
        width: 200px;
        height: 200px;
        position: absolute;
        z-index: 1031;

        left: 0;
        background-color: transparent;
        background-image: url(../img/shop.png);
    }
}


svg {
    padding-top: 100px;
    height: 100vmin;
    left: calc(50% - 50vmin);
    position: absolute;
    width: 100vmin;
}

.home-isometric {
    width: 100%;
    display: block;
    background: linear-gradient(#f2f2f2, #FFF);
}

.background-linear {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent !important;

}

.wrapper {
    position: relative;
    width: 100%;
    display: block;
    padding-top: 30px;
    padding-bottom: 30px;

}


.services {
    color: #A2A9AF;
    text-align: center;
}

.description {
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
}


.banksy {
    background: url("img/banksy.png");
    width: 100px;
    height: auto;
    z-index: 9999;
    float: left;
}

.design {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.design__initials {
    display: inline-block;
    font-size: 85vh;
    line-height: 1em;
    color: #2a3340;
    background: url("https://cdn.dribbble.com/users/566524/screenshots/4169266/purppple01.gif");
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: contain;
    background-position: center;
}

.design__title {
    position: absolute;
    text-align: center;
    color: #2a3340;
}

.design__title h2 {
    font-size: 48px;
    letter-spacing: 1.2px;
    margin-bottom: 0;
}

.design__title p {
    font-size: 14px;
    letter-spacing: 0.7px;
    margin: 0;
    text-transform: uppercase;
}

.winter-wrapper {
    position: rel ative;
    width: 600px;
    height: 450px;
    display: block;
    margin: 0 auto;
    z-index: 2;
    overflow: hidden;
}

@media (max-width: 768px) {
    .winter-wrapper {
        position: relative;
        margin-top: 20%;
        width: 300px;
        height: 225px;
    }
}

.winter-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.snow-wrapper {
    position: absolute;
    top: -900px;
    left: 0;
    width: 600px;
    height: 1350px;
    display: block;
    margin: 0 auto;
    z-index: 200;
    overflow: hidden;
    animation: moveSnow-one 18s linear infinite;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

.snow-wrapper.big {
    top: -875px;
    left: 10px;
    animation: moveSnow-two 20s linear infinite;
}

@keyframes moveSnow-one {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-20px, 8.33333333333333%);
    }

    50% {
        transform: translate(-40px, 16.6666666666666%);
    }

    75% {
        transform: translate(-20px, 24.99999999999999%);
    }

    100% {
        transform: translate(0, 33.333333333333%);
    }
}

@keyframes moveSnow-two {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(15px, 8.33333333333333%);
    }

    50% {
        transform: translate(30px, 16.6666666666666%);
    }

    75% {
        transform: translate(15px, 24.99999999999999%);
    }

    100% {
        transform: translate(0, 33.333333333333%);
    }
}

.snow-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 450px;
    display: block;
    margin: 0 auto;
    z-index: 1;
    overflow: hidden;
}

.snow-wrap.snd {
    top: 450px;
}

.snow-wrap.trd {
    top: 900px;
}

.snow-wrapper.big .snow-wrap span {
    width: 3px;
    height: 3px;
}

.snow-wrap span {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fefefe;
}

.snow-wrap span:nth-child(2) {
    top: 25px;
    left: 70px;
}

.snow-wrap span:nth-child(3) {
    top: 30px;
    left: 120px;
}

.snow-wrap span:nth-child(4) {
    top: 35px;
    left: 180px;
}

.snow-wrap span:nth-child(5) {
    top: 20px;
    left: 240px;
}

.snow-wrap span:nth-child(6) {
    top: 40px;
    left: 310px;
}

.snow-wrap span:nth-child(7) {
    top: 30px;
    left: 365px;
}

.snow-wrap span:nth-child(8) {
    top: 10px;
    left: 415px;
}

.snow-wrap span:nth-child(9) {
    top: 20px;
    left: 470px;
}

.snow-wrap span:nth-child(10) {
    top: 50px;
    left: 535px;
}

.snow-wrap span:nth-child(11) {
    top: 35px;
    left: 585px;
}

.snow-wrap span:nth-child(12) {
    top: 100px;
    left: 15px;
}

.snow-wrap span:nth-child(13) {
    top: 90px;
    left: 65px;
}

.snow-wrap span:nth-child(14) {
    top: 70px;
    left: 135px;
}

.snow-wrap span:nth-child(15) {
    top: 80px;
    left: 165px;
}

.snow-wrap span:nth-child(16) {
    top: 90px;
    left: 215px;
}

.snow-wrap span:nth-child(17) {
    top: 60px;
    left: 265px;
}

.snow-wrap span:nth-child(18) {
    top: 80px;
    left: 305px;
}

.snow-wrap span:nth-child(19) {
    top: 110px;
    left: 325px;
}

.snow-wrap span:nth-child(20) {
    top: 85px;
    left: 375px;
}

.snow-wrap span:nth-child(21) {
    top: 95px;
    left: 415px;
}

.snow-wrap span:nth-child(22) {
    top: 60px;
    left: 465px;
}

.snow-wrap span:nth-child(23) {
    top: 75px;
    left: 515px;
}

.snow-wrap span:nth-child(24) {
    top: 95px;
    left: 545px;
}

.snow-wrap span:nth-child(25) {
    top: 65px;
    left: 575px;
}

.snow-wrap span:nth-child(26) {
    top: 135px;
    left: 55px;
}

.snow-wrap span:nth-child(27) {
    top: 145px;
    left: 115px;
}

.snow-wrap span:nth-child(28) {
    top: 120px;
    left: 175px;
}

.snow-wrap span:nth-child(29) {
    top: 105px;
    left: 215px;
}

.snow-wrap span:nth-child(30) {
    top: 140px;
    left: 230px;
}

.snow-wrap span:nth-child(31) {
    top: 125px;
    left: 275px;
}

.snow-wrap span:nth-child(32) {
    top: 145px;
    left: 335px;
}

.snow-wrap span:nth-child(33) {
    top: 105px;
    left: 405px;
}

.snow-wrap span:nth-child(34) {
    top: 125px;
    left: 475px;
}

.snow-wrap span:nth-child(35) {
    top: 140px;
    left: 525px;
}

.snow-wrap span:nth-child(36) {
    top: 120px;
    left: 590px;
}

.snow-wrap span:nth-child(37) {
    top: 180px;
    left: 15px;
}

.snow-wrap span:nth-child(38) {
    top: 190px;
    left: 60px;
}

.snow-wrap span:nth-child(39) {
    top: 210px;
    left: 115px;
}

.snow-wrap span:nth-child(40) {
    top: 190px;
    left: 160px;
}

.snow-wrap span:nth-child(41) {
    top: 175px;
    left: 210px;
}

.snow-wrap span:nth-child(42) {
    top: 190px;
    left: 245px;
}

.snow-wrap span:nth-child(43) {
    top: 175px;
    left: 300px;
}

.snow-wrap span:nth-child(44) {
    top: 200px;
    left: 340px;
}

.snow-wrap span:nth-child(45) {
    top: 195px;
    left: 410px;
}

.snow-wrap span:nth-child(46) {
    top: 180px;
    left: 490px;
}

.snow-wrap span:nth-child(47) {
    top: 210px;
    left: 530px;
}

.snow-wrap span:nth-child(48) {
    top: 185px;
    left: 585px;
}

.snow-wrap span:nth-child(49) {
    top: 235px;
    left: 35px;
}

.snow-wrap span:nth-child(50) {
    top: 245px;
    left: 95px;
}

.snow-wrap span:nth-child(51) {
    top: 220px;
    left: 135px;
}

.snow-wrap span:nth-child(52) {
    top: 235px;
    left: 205px;
}

.snow-wrap span:nth-child(53) {
    top: 250px;
    left: 250px;
}

.snow-wrap span:nth-child(54) {
    top: 245px;
    left: 315px;
}

.snow-wrap span:nth-child(55) {
    top: 225px;
    left: 385px;
}

.snow-wrap span:nth-child(56) {
    top: 240px;
    left: 425px;
}

.snow-wrap span:nth-child(57) {
    top: 255px;
    left: 485px;
}

.snow-wrap span:nth-child(58) {
    top: 220px;
    left: 515px;
}

.snow-wrap span:nth-child(59) {
    top: 245px;
    left: 545px;
}

.snow-wrap span:nth-child(60) {
    top: 230px;
    left: 575px;
}

.snow-wrap span:nth-child(61) {
    top: 280px;
    left: 35px;
}

.snow-wrap span:nth-child(62) {
    top: 295px;
    left: 85px;
}

.snow-wrap span:nth-child(63) {
    top: 300px;
    left: 145px;
}

.snow-wrap span:nth-child(64) {
    top: 310px;
    left: 205px;
}

.snow-wrap span:nth-child(65) {
    top: 270px;
    left: 275px;
}

.snow-wrap span:nth-child(66) {
    top: 290px;
    left: 335px;
}

.snow-wrap span:nth-child(67) {
    top: 265px;
    left: 395px;
}

.snow-wrap span:nth-child(68) {
    top: 300px;
    left: 415px;
}

.snow-wrap span:nth-child(69) {
    top: 285px;
    left: 465px;
}

.snow-wrap span:nth-child(70) {
    top: 270px;
    left: 535px;
}

.snow-wrap span:nth-child(71) {
    top: 290px;
    left: 565px;
}

.snow-wrap span:nth-child(72) {
    top: 310px;
    left: 595px;
}

.snow-wrap span:nth-child(73) {
    top: 350px;
    left: 25px;
}

.snow-wrap span:nth-child(74) {
    top: 340px;
    left: 70px;
}

.snow-wrap span:nth-child(75) {
    top: 350px;
    left: 135px;
}

.snow-wrap span:nth-child(76) {
    top: 330px;
    left: 190px;
}

.snow-wrap span:nth-child(77) {
    top: 320px;
    left: 245px;
}

.snow-wrap span:nth-child(78) {
    top: 355px;
    left: 300px;
}

.snow-wrap span:nth-child(79) {
    top: 345px;
    left: 355px;
}

.snow-wrap span:nth-child(80) {
    top: 350px;
    left: 415px;
}

.snow-wrap span:nth-child(81) {
    top: 320px;
    left: 450px;
}

.snow-wrap span:nth-child(82) {
    top: 360px;
    left: 495px;
}

.snow-wrap span:nth-child(83) {
    top: 355px;
    left: 545px;
}

.snow-wrap span:nth-child(84) {
    top: 350px;
    left: 575px;
}

.snow-wrap span:nth-child(85) {
    top: 390px;
    left: 5px;
}

.snow-wrap span:nth-child(86) {
    top: 400px;
    left: 55px;
}

.snow-wrap span:nth-child(87) {
    top: 380px;
    left: 115px;
}

.snow-wrap span:nth-child(88) {
    top: 410px;
    left: 175px;
}

.snow-wrap span:nth-child(89) {
    top: 385px;
    left: 235px;
}

.snow-wrap span:nth-child(90) {
    top: 390px;
    left: 305px;
}

.snow-wrap span:nth-child(91) {
    top: 370px;
    left: 375px;
}

.snow-wrap span:nth-child(92) {
    top: 385px;
    left: 425px;
}

.snow-wrap span:nth-child(93) {
    top: 405px;
    left: 485px;
}

.snow-wrap span:nth-child(94) {
    top: 410px;
    left: 515px;
}

.snow-wrap span:nth-child(95) {
    top: 395px;
    left: 545px;
}

.snow-wrap span:nth-child(96) {
    top: 400px;
    left: 595px;
}

.snow-wrap span:nth-child(97) {
    top: 420px;
    left: 25px;
}

.snow-wrap span:nth-child(98) {
    top: 430px;
    left: 75px;
}

.snow-wrap span:nth-child(99) {
    top: 420px;
    left: 125px;
}

.snow-wrap span:nth-child(100) {
    top: 425px;
    left: 170px;
}

.snow-wrap span:nth-child(101) {
    top: 440px;
    left: 235px;
}

.snow-wrap span:nth-child(102) {
    top: 410px;
    left: 270px;
}

.snow-wrap span:nth-child(103) {
    top: 425px;
    left: 335px;
}

.snow-wrap span:nth-child(104) {
    top: 435px;
    left: 385px;
}

.snow-wrap span:nth-child(105) {
    top: 410px;
    left: 440px;
}

.snow-wrap span:nth-child(106) {
    top: 440px;
    left: 500px;
}

.snow-wrap span:nth-child(107) {
    top: 430px;
    left: 535px;
}

.snow-wrap span:nth-child(108) {
    top: 435px;
    left: 585px;
}

.sun {
    position: absolute;
    top: 40px;
    left: 70px;
    width: 37px;
    display: block;
    height: 37px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 8px #e9fcf6,
        0 0 0 20px #dcf7ee;
    z-index: 1;
    animation: brilla-sun 3s alternate infinite;
}

@keyframes brilla-sun {

    0%,
    100% {
        box-shadow:
            0 0 0 8px #e9fcf6,
            0 0 0 20px #dcf7ee;
    }

    50% {
        box-shadow:
            0 0 0 5px #e9fcf6,
            0 0 0 14px #dcf7ee;
    }
}

.bottom-snow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 21px;
    background-color: #fff;
    z-index: 1;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
}

.bottom-snow span {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 7px;
    display: block;
    background-color: #e6fcf9;
    border-radius: 4px;
}

.bottom-snow-over {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 21px;
    z-index: 60;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
}

.bottom-snow-over span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65%;
    display: block;
    height: 7px;
    background-color: #e6fcf9;
    z-index: 1;
    border-radius: 4px;
}

.middle-snow {
    position: absolute;
    bottom: 21px;
    left: 15px;
    width: calc(100% - 30px);
    display: block;
    height: 30px;
    background-color: #d2f0e6;
    z-index: 1;
    overflow: hidden;
}

.buildings {
    position: absolute;
    bottom: 51px;
    left: 15px;
    width: calc(100% - 30px);
    height: 399px;
    display: block;
    z-index: 2;
    overflow: hidden;
}

.buildings span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 180px;
    background-color: #9ac8bb;
}

.buildings span:nth-child(2) {
    left: 40px;
    width: 55px;
    height: 240px;
}

.buildings span:nth-child(3) {
    left: 95px;
    width: 65px;
    height: 140px;
}

.buildings span:nth-child(4) {
    left: 160px;
    width: 50px;
    height: 120px;
}

.buildings span:nth-child(5) {
    left: 210px;
    width: 10px;
    height: 80px;
}

.buildings span:nth-child(6) {
    left: 220px;
    width: 60px;
    height: 140px;
}

.buildings span:nth-child(7) {
    left: 280px;
    width: 50px;
    height: 270px;
}

.buildings span:nth-child(8) {
    left: 330px;
    width: 30px;
    height: 170px;
}

.buildings span:nth-child(9) {
    left: 360px;
    width: 20px;
    height: 120px;
}

.buildings span:nth-child(10) {
    left: 380px;
    width: 60px;
    height: 230px;
}

.buildings span:nth-child(11) {
    left: 440px;
    width: 40px;
    height: 170px;
}

.buildings span:nth-child(12) {
    left: 480px;
    width: 50px;
    height: 190px;
}

.buildings span:nth-child(13) {
    left: 530px;
    width: 40px;
    height: 150px;
}

.buildings.back {
    z-index: 1;
}

.buildings.back span {
    width: 20px;
    height: 140px;
    background-color: #acd7cd;
}

.buildings.back span:nth-child(2) {
    left: 20px;
    width: 60px;
    height: 200px;
}

.buildings.back span:nth-child(3) {
    left: 80px;
    width: 40px;
    height: 220px;
}

.buildings.back span:nth-child(4) {
    left: 120px;
    width: 20px;
    height: 170px;
}

.buildings.back span:nth-child(5) {
    left: 140px;
    width: 60px;
    height: 250px;
}

.buildings.back span:nth-child(6) {
    left: 200px;
    width: 60px;
    height: 290px;
}

.buildings.back span:nth-child(7) {
    left: 260px;
    width: 40px;
    height: 210px;
}

.buildings.back span:nth-child(8) {
    left: 300px;
    width: 65px;
    height: 310px;
}

.buildings.back span:nth-child(9) {
    left: 365px;
    width: 45px;
    height: 200px;
}

.buildings.back span:nth-child(10) {
    left: 410px;
    width: 60px;
    height: 260px;
}

.buildings.back span:nth-child(11) {
    left: 470px;
    width: 50px;
    height: 240px;
}

.buildings.back span:nth-child(12) {
    left: 520px;
    width: 50px;
    height: 220px;
}

.swing {
    position: absolute;
    bottom: 2px;
    left: 240px;
    width: 50px;
    height: 100px;
    border: 5px solid #366a78;
    border-color: #366a78 #366a78 transparent #366a78;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: block;
    z-index: 5;
    overflow: hidden;
}

.swing-over-wrap {
    position: absolute;
    bottom: 2px;
    left: 265px;
    z-index: 6;
    perspective: 400px;
}

.swing-over {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -25px;
    width: 50px;
    height: 95px;
    display: block;
    transform-origin: center top;
    animation: swinging 3s ease infinite;
}

@keyframes swinging {

    0%,
    100% {
        transform: rotateX(25deg);
    }

    50% {
        transform: rotateX(-25deg);
    }
}

.swing-over span {
    position: absolute;
    bottom: 22px;
    left: 10px;
    width: 30px;
    height: 6px;
    border-radius: 3px;
    background-color: #f08139;
    display: block;
    z-index: 5;
    overflow: hidden;
}

.swing-over span:nth-child(2) {
    bottom: auto;
    top: 0;
    left: 13px;
    width: 2px;
    height: 74px;
    border-radius: 0;
    background-color: #4f4c4d;
    z-index: 4;
}

.swing-over span:nth-child(3) {
    bottom: auto;
    top: 0;
    left: auto;
    right: 13px;
    width: 2px;
    height: 74px;
    border-radius: 0;
    background-color: #4f4c4d;
    z-index: 4;
}

.swing-left {
    position: absolute;
    bottom: 2px;
    left: 195px;
    width: 50px;
    height: 80px;
    border: 5px solid #366a78;
    border-color: #366a78 transparent transparent #366a78;
    border-top-left-radius: 10px;
    display: block;
    z-index: 4;
}

.swing-left-back {
    position: absolute;
    bottom: 2px;
    left: 195px;
    width: 50px;
    height: 80px;
    display: block;
    z-index: 3;
}

.swing-left-back span {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 54px;
    height: 4px;
    border-radius: 2px;
    display: block;
    background-color: #986233;
}

.swing-left-back span:nth-child(2) {
    top: 30px;
}

.swing-left-back span:nth-child(3) {
    top: 46px;
}

.swing-left-back span:nth-child(4) {
    top: 62px;
}

.box {
    position: absolute;
    bottom: 7px;
    left: 100px;
    display: block;
    z-index: 30;
}

.box span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 12px;
    background-color: #986233;
    display: block;
    z-index: 5;
}

.box span:nth-child(2) {
    bottom: 12px;
    height: 4px;
    background-color: #5e3e25;
}

.box span:nth-child(3) {
    bottom: 16px;
    height: 8px;
    left: -6px;
    width: 112px;
    border-radius: 2px;
    background-color: #f08139;
}

.box span:nth-child(4) {
    bottom: -16px;
    left: 0;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 4;
}

.box span:nth-child(5) {
    bottom: 12px;
    left: 10px;
    height: 20px;
    width: 90px;
    border-top-right-radius: 150%;
    border-top-left-radius: 150%;
    background-color: #fff;
    z-index: 4;
}

.box span:nth-child(6) {
    bottom: 7px;
    left: 25px;
    height: 30px;
    width: 60px;
    border-top-right-radius: 150%;
    border-top-left-radius: 150%;
    background-color: #b6ded5;
    z-index: 3;
}

.bucket {
    position: absolute;
    bottom: 30px;
    left: 42px;
    display: block;
    z-index: 5;
    perspective: 100px;
}

.bucket span {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    height: 25px;
    width: 16px;
    display: block;
    background-color: #b94b00;
    z-index: 1;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    transform-origin: center bottom;
    transform: rotateX(-55deg);
}

.bucket span:nth-child(2) {
    bottom: 15px;
    left: 50%;
    margin-left: -12px;
    height: 5px;
    width: 24px;
    background-color: #ef8136;
    z-index: 2;
    border-radius: 2px;
    transform-origin: center bottom;
    transform: rotateX(0);
}

.shovel {
    position: absolute;
    bottom: 22px;
    left: 13px;
    display: block;
    z-index: 2;
    transform-origin: center bottom;
    transform: rotateZ(-20deg);
}

.shovel span {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    height: 18px;
    width: 14px;
    border-bottom-left-radius: 70%;
    border-bottom-right-radius: 70%;
    background-color: #366a78;
}

.shovel span:nth-child(2) {
    bottom: 13px;
    left: 5px;
    display: block;
    z-index: 2;
    height: 33px;
    width: 4px;
    border-radius: 2px;
    background-color: #4c9cb5;
}

.shovel span:nth-child(3) {
    bottom: 42px;
    left: 2px;
    z-index: 2;
    height: 4px;
    width: 10px;
    border-radius: 2px;
    background-color: #4c9cb5;
}

.lamp {
    position: absolute;
    bottom: 21px;
    left: 340px;
    display: block;
    z-index: 2;
    transform-origin: center bottom;
    perspective: 40px;
}

.lamp-wrap {
    position: absolute;
    bottom: 0;
    left: -9px;
    display: block;
    z-index: 2;
}

.lamp-wrap span {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 18px;
    display: block;
    z-index: 2;
    background-color: #666;
}

.lamp-wrap span:nth-child(2) {
    bottom: 6px;
    left: 2px;
    height: 55px;
    width: 14px;
    background-color: #333;
    transform-origin: center bottom;
    transform: rotateX(20deg);
}

.lamp-wrap span:nth-child(3) {
    bottom: 38px;
    left: 4px;
    height: 8px;
    width: 10px;
    background-color: #666;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.lamp-wrap span:nth-child(4) {
    bottom: 46px;
    left: 6px;
    height: 40px;
    width: 6px;
    background-color: #333;
}

.lamp-wrap span:nth-child(5) {
    bottom: 86px;
    left: 3px;
    height: 6px;
    width: 12px;
    border-radius: 4px;
    background-color: #666;
}

.lamp-wrap span:nth-child(6) {
    bottom: 92px;
    left: 7px;
    height: 18px;
    width: 4px;
    background-color: #333;
}

.lamp-wrap span:nth-child(7) {
    bottom: 110px;
    left: 4px;
    height: 4px;
    width: 10px;
    background-color: #333;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.lamp-wrap span:nth-child(8) {
    bottom: 114px;
    left: 4px;
    height: 6px;
    width: 10px;
    box-shadow:
        inset 4px 0 0 0px #fffdf1,
        12px 0 14px -0.6px #fceea5,
        -12px 0 10px -0.6px #fceea5;
    background-color: #fceea5;
    transform-origin: center bottom;
    transform: rotateX(-50deg);
    z-index: 1;
    animation: lamp 2s alternate infinite;
}

@keyframes lamp {

    0%,
    100% {
        box-shadow:
            inset 4px 0 0 0px #fffdf1,
            12px 0 14px -0.6px #fceea5,
            -12px 0 10px -0.6px #fceea5;
    }

    50% {
        box-shadow:
            inset 4px 0 0 0px #fffdf1,
            9px 0 11px -1px #fceea5,
            -9px 0 7px -1px #fceea5;
    }
}

.lamp-wrap span:nth-child(9) {
    bottom: 133px;
    left: 1px;
    height: 5px;
    width: 16px;
    border-radius: 2px;
    background-color: #333;
    z-index: 3;
}

.lamp-wrap span:nth-child(10) {
    bottom: 132px;
    left: 3px;
    height: 12px;
    width: 12px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    background-color: #333;
    z-index: 3;
}

.lamp-wrap span:nth-child(11) {
    bottom: 140px;
    left: 7px;
    height: 8px;
    width: 4px;
    border-radius: 2px;
    background-color: #333;
    z-index: 3;
}

.lamp-wrap span:nth-child(12) {
    left: 3px;
    bottom: 137px;
    border-radius: 4px;
    width: 10px;
    height: 5px;
    background-color: #fff;
    z-index: 12;
    transform: skew(32deg, -4deg);
}

.bench {
    position: absolute;
    bottom: 21px;
    left: 370px;
    display: block;
    z-index: 2;
    transform-origin: center bottom;
    perspective: 40px;
}

.bench-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 2;
}

.bench-wrap span {
    position: absolute;
    bottom: 0;
    left: 5px;
    display: block;
    z-index: 5;
    width: 7px;
    height: 40px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #be7435;
}

.bench-wrap span:nth-child(2) {
    left: 85px;
}

.bench-wrap span:nth-child(3) {
    left: 0;
    bottom: 33px;
    border-radius: 4px;
    width: 12px;
    height: 7px;
}

.bench-wrap span:nth-child(4) {
    left: 85px;
    bottom: 33px;
    border-radius: 4px;
    width: 12px;
    height: 7px;
}

.bench-wrap span:nth-child(5) {
    left: 5px;
    bottom: 10px;
    border-radius: 0;
    width: 85px;
    height: 6px;
    background-color: #8c592c;
    z-index: 4;
}

.bench-wrap span:nth-child(6) {
    left: 5px;
    bottom: 22px;
    border-radius: 0;
    width: 85px;
    height: 6px;
    background-color: #5e3e25;
    z-index: 4;
}

.bench-wrap span:nth-child(7) {
    bottom: 35px;
    width: 7px;
    height: 20px;
    background-color: #8c592c;
    z-index: 4;
}

.bench-wrap span:nth-child(8) {
    left: 85px;
    bottom: 35px;
    width: 7px;
    height: 20px;
    background-color: #8c592c;
    z-index: 4;
}

.bench-wrap span:nth-child(9) {
    left: 5px;
    bottom: 47px;
    border-radius: 0;
    width: 85px;
    height: 6px;
    background-color: #5e3e25;
    z-index: 3;
}

.bench-wrap span:nth-child(10) {
    left: 50px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(11) {
    left: 62px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(12) {
    left: 74px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(13) {
    left: 38px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(14) {
    left: 26px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(15) {
    left: 14px;
    bottom: 25px;
    width: 9px;
    height: 26px;
    background-color: #be7435;
    border-radius: 0;
    z-index: 1;
}

.bench-wrap span:nth-child(16) {
    left: 11px;
    bottom: 52px;
    border-radius: 30%;
    width: 65px;
    height: 4px;
    background-color: #fff;
    z-index: 12;
    transform: skew(52deg, 1deg);
}

.bin {
    position: absolute;
    bottom: 21px;
    right: 30px;
    width: 25px;
    height: 40px;
    display: block;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #ce6f13;
    z-index: 2;
}

.bin span {
    position: absolute;
    top: 4px;
    right: 3px;
    width: 19px;
    height: 10px;
    display: block;
    border-radius: 4px;
    background-color: #333;
    z-index: 2;
}

.bin span:nth-child(2) {
    top: 7px;
    background-color: #ff8f45;
    z-index: 1;
}

.tree {
    position: absolute;
    bottom: 7px;
    left: 40px;
    display: block;
    z-index: 50;
    perspective: 100px;
}

.tree.right {
    bottom: 21px;
    left: auto;
    right: 120px;
    transform: scale(0.9);
}

.tree span {
    position: absolute;
    bottom: 72px;
    left: -4px;
    display: block;
    z-index: 3;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f2fefc;
    box-shadow: inset -10px 0 14px 0 #c5f2ed;
    transform: rotate(20deg);
}

.tree span:nth-child(2) {
    bottom: 72px;
    left: -24px;
    z-index: 2;
    width: 70px;
    height: 70px;
    box-shadow: inset 5px 0 7px 0 #c5f2ed;
    transform: rotate(-20deg);
}

.tree span:nth-child(3) {
    bottom: 97px;
    left: -9px;
    z-index: 2;
    width: 90px;
    height: 90px;
    box-shadow: inset 5px 0 7px 0 #c5f2ed;
    transform: rotate(40deg);
}

.tree span:nth-child(4) {
    bottom: 0;
    left: 31px;
    z-index: 1;
    width: 18px;
    height: 100px;
    border-radius: 0;
    background-color: #625044;
    box-shadow: inset 6px 0 13px 0 #b58d74;
    transform: rotate(0);
    transform-origin: center bottom;
    transform: rotateX(10deg);
}

.tree span:nth-child(5) {
    bottom: 40px;
    left: 36px;
    z-index: 0;
    width: 6px;
    height: 40px;
    border-radius: 0;
    background-color: #625044;
    box-shadow: none;
    transform: rotate(0);
    transform-origin: center bottom;
    transform: rotate(20deg);
}

.tree span:nth-child(6) {
    bottom: 50px;
    left: 29px;
    z-index: 1;
    width: 6px;
    height: 40px;
    border-radius: 0;
    background-color: #625044;
    box-shadow: none;
    box-shadow: inset -3px -4px 22px -4px #b18b73,
        0 5px 7px -7px #b18b73;
    transform: rotate(0);
    transform-origin: center bottom;
    transform: rotate(-25deg);
}



.main-color {
    color: #A2A9AF;
}

@media (max-width:468px) {
    .main-color {
        font-size: 24px;
        color: #6b6b6b;
        text-align: center;
    }
}

.home {
    ;
    padding-top: 100px;
    min-height: 100vh;
    position: relative;
    margin: 0;
}


@media (max-width: 991px) {
    .home {
        min-height: 100vh;
        position: relative;
    }
}

.home.store {
    background: #FFF;
    background-image: none;
}

.home-static {
    padding-top: 30px;
}

.home-static-title-small {
    font-size: 14px;
    color: #fff;
    opacity: 1;
    max-width: 600px;
    margin: 0 auto;
    text-transform: uppercase;
    position: relative;
}

.home-static-title-small:after {
    content: '';
    width: 70px;
    height: 4px;
    background: #FFF;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.home-static-title-main {
    color: #fff;
    max-width: 600px;
    margin: 0 auto 30px;
    position: relative;
}

.home-slider-title-small {
    font-size: 14px;
    color: #FFF;
    opacity: 1;
    max-width: 600px;
    margin: 0 auto;
    text-transform: uppercase;
    position: relative;
    padding: 0 45px;
}

.home-slider-title-small.inverted {
    color: #fff;
}

.home-slider-title-small:after {
    content: '';
    width: 70px;
    height: 4px;
    background: #a966d8;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.home-slider-title-main {
    font-size: 50px;
    color: #FFF;
    margin: 50px auto 20px;
    position: relative;
    padding: 0 20px;
}

@media (max-width: 479px) {
    .home-slider-title-main {
        font-size: 25px;
    }
}

.home-slider-title-main.inverted {
    color: #fff;
}

.home-slider .swiper-slide {
    padding: 0 15px;
}

.home-isometric .home-slider-title-small {
    color: #a966d8;
}

.home-isometric .home-slider-title-main {
    color: #828282;
}

.home-isometric-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

@media (min-width: 480px) and (max-width: 991px) {
    .home-isometric-wrapper {
        top: 50%;
    }
}

@media (max-width: 479px) {
    .home-isometric-wrapper {
        top: 100%;
    }
}

.home-isometric-wrapper img {
    width: 100%;
}

.home-isometric-wrapper img.layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}


.home-isometric-wrapper img-1 {
    z-index: 1;
}

.home-isometric-wrapper img-1 {
    opacity: 1;
}

.home-isometric-wrapper img-2 {
    z-index: 2;
}

.home-isometric-wrapper img-3 {
    z-index: 3;
}

.home-isometric-wrapper img-4 {
    z-index: 4;
}

.home-isometric-wrapper img-5 {
    z-index: 5;
}

.home-isometric-wrapper img-6 {
    z-index: 6;
}

.home-isometric-wrapper img-7 {
    z-index: 7;
}

.home-isometric-wrapper img-8 {
    z-index: 8;
}

.home-isometric-wrapper img-9 {
    z-index: 9;
}

.home-isometric-wrapper img-10 {
    z-index: 10;
}

.home-isometric-wrapper img-11 {
    z-index: 11;
}

.home-isometric-wrapper img-12 {
    z-index: 12;
}

.home-isometric-wrapper img-13 {
    z-index: 13;
}

.home-isometric-wrapper img-14 {
    z-index: 14;
}

.home-isometric-wrapper img-15 {
    z-index: 15;
}

.home-isometric-wrapper img-16 {
    z-index: 16;
}

.home-isometric-wrapper img-17 {
    z-index: 17;
}

.home-isometric-wrapper img-18 {
    z-index: 18;
}

.home-isometric-wrapper img-19 {
    z-index: 19;
}

.home-isometric-wrapper img-20 {
    z-index: 20;
}

.home-isometric-wrapper img-21 {
    z-index: 21;
}

.home-isometric-wrapper img-22 {
    z-index: 22;
}

.home-isometric-wrapper img-23 {
    z-index: 23;
}

.home-isometric-wrapper img-24 {
    z-index: 24;
}

.home-isometric-wrapper img-25 {
    z-index: 25;
}

.home-isometric-wrapper img-26 {
    z-index: 26;
}

.home-isometric-wrapper img-27 {
    z-index: 27;
}

.home-isometric-wrapper img-28 {
    z-index: 28;
}

.home-isometric-wrapper img-29 {
    z-index: 29;
}

.home-isometric-wrapper img-30 {
    z-index: 30;
}

.home-isometric-wrapper img-31 {
    z-index: 31;
}

.home-isometric-wrapper img-32 {
    z-index: 32;
}

.home-isometric-wrapper img-33 {
    z-index: 33;
}

.home-isometric-wrapper img-34 {
    z-index: 34;
}

.home-isometric-wrapper img-35 {
    z-index: 35;
}

.home-isometric-wrapper img-36 {
    z-index: 36;
}

.home-isometric-wrapper img-37 {
    z-index: 37;
}

.home-isometric-wrapper img-38 {
    z-index: 38;
}

.home-isometric-wrapper img-39 {
    z-index: 39;
}

.home-isometric-wrapper img-40 {
    z-index: 40;
}

.home-isometric-wrapper img-41 {
    z-index: 41;
}

.home-isometric-wrapper img-42 {
    z-index: 42;
}

.home-isometric-wrapper img-43 {
    z-index: 43;
}

.home-isometric-wrapper img-44 {
    z-index: 44;
}

.home-isometric-wrapper img-45 {
    z-index: 45;
}

.home-isometric-wrapper img-46 {
    z-index: 46;
}

.home-isometric-wrapper img-47 {
    z-index: 47;
}

.home-isometric-wrapper img-48 {
    z-index: 48;
}

.home-isometric-wrapper img-49 {
    z-index: 49;
}

.home-isometric-wrapper img-50 {
    z-index: 50;
}

.home-isometric-wrapper img-51 {
    z-index: 51;
}

.home-isometric-wrapper img-52 {
    z-index: 52;
}

.home-isometric-wrapper img-53 {
    z-index: 53;
}

.home-isometric-wrapper img-54 {
    z-index: 54;
}

.home-isometric-wrapper img-55 {
    z-index: 55;
}

.home-isometric-wrapper img-56 {
    z-index: 56;
}

.home-isometric-wrapper img-57 {
    z-index: 57;
}

.home-isometric-wrapper img-58 {
    z-index: 58;
}

.home-isometric-wrapper img-59 {
    z-index: 59;
}

.home-isometric-wrapper img-60 {
    z-index: 60;
}

.home-isometric-wrapper img-61 {
    z-index: 61;
}

.home-isometric-wrapper img-62 {
    z-index: 62;
}

.home-isometric-wrapper img-63 {
    z-index: 63;
}

.home-isometric-wrapper img-64 {
    z-index: 64;
}

.home-isometric-wrapper img-65 {
    z-index: 65;
}

.home-isometric-wrapper img-66 {
    z-index: 66;
}

.home-isometric-wrapper img-67 {
    z-index: 67;
}

.home-isometric-wrapper img-68 {
    z-index: 68;
}

.home-isometric-wrapper img-69 {
    z-index: 69;
}

.home-isometric-wrapper img-70 {
    z-index: 70;
}

.home-isometric-wrapper img-71 {
    z-index: 71;
}

.home-isometric-wrapper img-72 {
    z-index: 72;
}

.home-isometric-wrapper img-73 {
    z-index: 73;
}

.home-isometric-wrapper img-74 {
    z-index: 74;
}

.home-isometric-wrapper img-75 {
    z-index: 75;
}

.home-isometric-wrapper img-76 {
    z-index: 76;
}

.home-isometric-wrapper img-77 {
    z-index: 77;
}

.home-isometric-wrapper img-78 {
    z-index: 78;
}

.home-isometric-wrapper img-79 {
    z-index: 79;
}

.home-isometric-wrapper img-80 {
    z-index: 80;
}

.home-isometric-wrapper img-81 {
    z-index: 81;
}

.home-isometric-wrapper img-82 {
    z-index: 82;
}

.home-isometric-wrapper img-83 {
    z-index: 83;
}

.home-isometric-wrapper img-84 {
    z-index: 84;
}

.home-isometric-wrapper img-85 {
    z-index: 85;
}

.home-isometric-wrapper img-86 {
    z-index: 86;
}

.home-isometric-wrapper img-87 {
    z-index: 87;
}

.home-isometric-wrapper img-88 {
    z-index: 88;
}

.home-isometric-wrapper img-89 {
    z-index: 89;
}

.home-isometric-wrapper img-90 {
    z-index: 90;
}

.home-isometric-wrapper img-91 {
    z-index: 91;
}

.home-isometric-wrapper img-92 {
    z-index: 92;
}

.home-isometric-wrapper img-93 {
    z-index: 93;
}

.home-isometric-wrapper img-94 {
    z-index: 94;
}

.home-isometric-wrapper img-95 {
    z-index: 95;
}

.home-isometric-wrapper img-96 {
    z-index: 96;
}

.home-isometric-wrapper img-97 {
    z-index: 97;
}

.home-isometric-wrapper img-98 {
    z-index: 98;
}

.home-isometric-wrapper img-99 {
    z-index: 99;
}

.home-isometric-wrapper img-100 {
    z-index: 100;
}

.home.image-slider {
    padding-top: 0px;
    padding-bottom: 0;
    position: relative;
    background: none;
}

.home.image-slider .home-slider {
    min-height: 100vh;
}

.home.image-slider .swiper-slide {
    min-height: 100vh;
    padding: 33vh 15px 0;
    box-sizing: border-box;
    background-size: cover !important;
    background-position: center !important;
}

@media (max-width: 479px) {
    .home.image-slider .swiper-slide {
        padding-top: 90px;
    }
}

.home.image-slider .home-pagination {
    position: absolute;
    bottom: 30px;
    z-index: 10;
}

.home-buttons {
    margin: 90px auto 60px;
    position: relative;
}

.home-buttons a {
    padding: 15px 30px;
}

.home .left-arrow,
.home .right-arrow,
.home .left-arrow-negative,
.home .right-arrow-negative {
    top: 50%;
}

.pad-grey {
    background-color: #A2A9AF;
    padding: 30px 0px !important;
    margin: 30px auto !important;
}

header.masthead {
    position: relative;
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #FFF;
    background-size: cover;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    header.masthead {
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    header.masthead {
        background-attachment: scroll;
    }
}

header.masthead .masthead-img {
    max-width: 150px;
    max-height: 150px;
}

header.masthead .masthead-title {
    font-size: 2rem;
    line-height: 4rem;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

header.masthead .masthead-subtitle {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

header.masthead .scroll-down {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

header.masthead .scroll-down .btn {
    font-size: 30px;
    line-height: 50px;
    width: 50px;
    height: 50px;
    padding: 0;
    letter-spacing: normal;
    color: white;
    border: 2px solid white;
    border-radius: 100% !important;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

header.masthead .scroll-down .btn:hover {
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

header.masthead .scroll-down .btn:active,
header.masthead .scroll-down .btn:focus {
    -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}

@media (min-width: 992px) {
    header.masthead {
        height: 100vh;
        min-height: 700px;
        padding-top: 0;
        padding-bottom: 0;
    }

    header.masthead .masthead-img {
        max-width: 250px;
        max-height: 250px;
    }

    header.masthead .masthead-title {
        font-size: 60px;
        line-height: 5rem;
    }

    header.masthead .masthead-subtitle {
        font-size: 2rem;
        line-height: 2rem;
    }
}

header.video {
    background: #222;
    overflow: hidden;
}

header.video .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: black;
}

header.video .container {
    position: relative;
}

header.video .container,
header.video .scroll-down {
    z-index: 999;
}

header.video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 9;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}



.team-carousel .item {
    position: relative;
    margin-right: 15px;
    margin-left: 15px;
}

.team-carousel .item .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #222;
}

.team-carousel .item .team-caption {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: auto;
    padding: 15px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.7);
}

.team-carousel .item .team-caption h3 {
    margin: 0;
}

.team-carousel .item .team-caption hr {
    max-width: 50px;
    margin: 5px auto;
}

.team-carousel .item .team-caption p {
    margin: 0;
}

.team-carousel .item .team-caption .list-team-social {
    margin-top: 5px;
}

.team-carousel .item .team-caption .list-team-social li a {
    color: rgba(255, 255, 255, 0.7);
}

.team-carousel .item .team-caption .list-team-social li a:hover,
.team-carousel .item .team-caption .list-team-social li a:focus {
    color: white;
}


.border-style {
    height: 100px;
    background-image: linear-gradient(to right, #262626, #4b454a, #796669, #a78a82, #cdb49a);
    margin-top: 50px;
    margin-bottom: 50px;
}

.call-to-action {
    padding: 40px 0;
    text-align: center;
    color: white;
    background-color: #FFF;
    background-size: cover;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    .call-to-action {
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .call-to-action {
        background-attachment: scroll;
    }
}

.call-to-action span.quote {
    font-size: 30px;
    font-weight: 300;
    line-height: 32px;
    display: block;
    color: #262626;
}

@media (min-width: 768px) {
    .call-to-action {
        padding: 180px 0;
    }

    .call-to-action span.quote {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (min-width: 992px) {
    .call-to-action {
        padding: 100px 0;
    }

    .call-to-action span.quote {
        font-size: 40px;
        line-height: 48px;
    }
}

.services .media {
    margin-bottom: 30px;
}

.services .media i.fa {
    font-size: 30px;
    color: #cdb49a;
    line-height: 70px;
    width: 75px;
    height: 75px;
    text-align: center;
    border: 3px solid #cdb49a;
}

.services .media .media-body {
    min-width: none;
    padding-left: 15px;
}

.services .media .media-body h3 {
    margin-top: 5px;
    margin-bottom: 15px;
}

.services .media .media-body ul {
    padding: 0;
    list-style: inside;
}

.services .media .media-body ul li {
    margin-bottom: 10px;
}

@media (min-width: 992px) {
    .services .media {
        margin-bottom: 0;
    }
}

.portfolio-carousel {
    padding: 0;
    color: #828282;
    background-color: white;
}

.portfolio-carousel .item {
    padding: 75px 30px;
    text-align: center;
    background-color: white;
    background-size: cover;
}

.portfolio-carousel .item .project-details .project-name {
    font-size: 40px;
    line-height: 40px;
    display: block;
    margin-bottom: 5px;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}


@media(max-width: 768px) {
    .portfolio-carousel .item .project-details .project-name {
        font-size: 25px;
        line-height: 30px;
        display: block;
        margin-bottom: 5px;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 300;
        text-transform: uppercase;
    }
}


@media(max-width: 500px) {
    .respo-500 {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px 0;
        background-color: #FFF;
    }
}

.text-color-grey {
    color: #A2A9AF;
}

.portfolio-carousel .item .project-details .project-description {
    font-size: 18px;
    line-height: 18px;
    display: block;
}

.portfolio-carousel .item .device-container {
    padding: 25px;
}

@media (min-width: 768px) {
    .portfolio-carousel .item {
        padding: 155px 30px;
        text-align: left;
    }

    .portfolio-carousel .item .project-details img.client-logo {
        margin: 0 auto 25px 0;
    }

    .portfolio-carousel .item .project-details .project-name {
        font-size: 40px;
        line-height: 40px;
        display: block;
    }

    .portfolio-carousel .item .project-details .project-description {
        font-size: 24px;
        line-height: 20px;
    }

    .portfolio-carousel .item hr.colored {
        margin: 20px auto 20px 0;
    }
}

.portfolio-gallery .item {
    padding: 15px;
}

.portfolio-modal {
    background-size: cover;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    .portfolio-modal {
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .portfolio-modal {
        background-attachment: scroll;
    }
}

.portfolio-modal .modal-backdrop {
    display: none;
}

.portfolio-modal .modal-dialog {
    max-width: none;
}

.portfolio-modal .modal-dialog .modal-content {
    min-height: 100%;
    padding: 100px 0;
    margin: 150px 0;
    text-align: left;
    color: white;
    border: none;
    border-radius: 0;
    background: #000;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

@media (max-width:768px) {
    .portfolio-modal .modal-dialog .modal-content {
        margin: 0px 0;
    }
}

.portfolio-modal .modal-dialog .modal-content h2 {
    font-size: 46px;
    margin: 0;
}

.portfolio-modal .modal-dialog .modal-content .item-details {
    margin: 30px 0;
}

.portfolio-modal .modal-dialog .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    cursor: pointer;
    background-color: transparent;
}

.portfolio-modal .modal-dialog .close-modal:hover {
    opacity: 1.0;
}

.portfolio-modal .modal-dialog .close-modal .lr {
    /* Safari and Chrome */
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: white;
}

.portfolio-modal .modal-dialog .close-modal .lr .rl {
    /* Safari and Chrome */
    z-index: 1052;
    width: 1px;
    height: 75px;
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background-color: white;
}

.mockup-carousel .item {
    margin: 0;
    padding: 0;
}

.mockup-carousel .item img {
    margin: 0;
}

.portfolio-grid .mix {
    float: left;
    overflow: hidden;
    width: 48%;
    margin: 1%;
}

.portfolio-grid .mix .portfolio-wrapper {
    position: relative !important;
    overflow: hidden;


}

.portfolio-grid .mix .portfolio-wrapper img {
    position: relative;
    max-width: 100%;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.portfolio-grid .mix .portfolio-wrapper img:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.portfolio-grid .mix .portfolio-wrapper .caption {
    position: absolute;
    bottom: -75px;
    width: 100%;
    height: 75px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.portfolio-grid .mix .portfolio-wrapper .caption .caption-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cdb49a;
}

.portfolio-grid .mix .portfolio-wrapper .caption .caption-text {
    position: relative;
    z-index: 500;
    padding: 15px 8px;
    color: white;
}

.portfolio-grid .mix .portfolio-wrapper .caption .caption-text a.text-title {
    color: white;
}

.portfolio-grid .mix .portfolio-wrapper .caption .caption-text .text-category {
    font-size: 12px;
    display: block;
}

.portfolio-grid .mix:hover .portfolio-wrapper .caption {
    bottom: 0;
}

@media (min-width: 768px) {
    .portfolio-grid .mix {
        width: 31%;
        margin: 1%;
    }
}

.testimonials {
    text-align: center;
}

.testimonials .testimonials-carousel .item .testimonial-img {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.testimonials .testimonials-carousel .item .testimonial-img img {
    vertical-align: baseline;
}

.testimonials .testimonials-carousel .item .testimonial-author {
    display: inline-block;
}

.testimonials .testimonials-carousel .item .testimonial-author .name {
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.testimonials .testimonials-carousel .item .testimonial-author hr.colored {
    max-width: 50px;
    margin: 3px auto;
}

.testimonials .testimonials-carousel .item .testimonial-author p {
    margin: 0;
}

.testimonials .testimonials-carousel .item .testimonial-author .stars {
    color: #f1c40f;
}

@media (min-width: 992px) {
    .testimonials .testimonials-carousel .item {
        padding: 0 100px;
    }
}

#cookie-popup {
    text-align: center;
    background: #fff;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 9999;
    font-size: 14px;
    line-height: 20px;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.hinweis {
    font-size: 14px !important;
}

.pricing {
    color: white;
    background-color: #FFF;
    background-size: cover;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    .pricing {
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .pricing {
        background-attachment: scroll;
    }
}

.pricing .pricing-item {
    z-index: 1;
    margin-bottom: 30px;
    padding: 30px;
    text-align: center;
    color: #828282;
    background: white;
    -webkit-box-shadow: 0 0 30px 5px rgba(34, 34, 34, 0.75);
    box-shadow: 0 0 30px 5px rgba(34, 34, 34, 0.75);
}

.pricing .pricing-item h3 {
    margin: 0;
}

.pricing .pricing-item hr {
    max-width: 100px;
}

.pricing .pricing-item .price {
    margin-bottom: 20px;
}

.pricing .pricing-item .price .number {
    font-size: 50px;
    font-weight: 900;
}

.pricing .pricing-item .price .number sup {
    font-size: 30px;
}

.pricing .pricing-item .list-group-item {
    border-radius: 0;
}

@media (min-width: 992px) {
    .pricing .pricing-item {
        margin-bottom: 0;
    }

    .pricing .pricing-item.featured-first {
        margin-top: 15px;
        margin-right: 10px
    }

    .pricing .pricing-item.featured {
        position: absolute;
        left: 0;
        width: 100%;
        margin-top: 15px;

    }

    .pricing .pricing-item.featured-last {
        margin-top: 15px;
        margin-left: 10px;
    }
}

.signup-form .input-group .form-control {
    border: 0;
    border-color: white;
    border-radius: 0;
}

.signup-form .input-group .input-group-btn .btn {
    padding: 12px 18px;
}

.signup-form .input-group .input-group-btn .btn-primary {
    border: 0;
    border-radius: 0;
    background-color: #cdb49a;
    font-size: 1rem;
}

.signup-form .input-group .input-group-btn .btn-primary:hover,
.signup-form .input-group .input-group-btn .btn-primary:focus {
    color: white;
    background-color: #cdb49a;
}

.floating-label-form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #e1e1e1;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 1.2em;
    background: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    resize: none;
}

.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 0.85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top 0.5s ease, opacity 0.5s ease;
    transition: top 0.5s ease, opacity 0.5s ease;
}

.floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #e1e1e1;
}

.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: #cdb49a;
}

form .row:first-child .floating-label-form-group {
    border-top: 1px solid #e1e1e1;
}

footer.footer {
    padding: 50px 0 20px;
    color: rgba(255, 255, 255, 0.7);
    background-size: cover;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    footer.footer {
        background-attachment: fixed;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    footer.footer {
        background-attachment: scroll;
    }
}

footer.footer a {
    color: rgba(255, 255, 255, 0.7);
}

footer.footer a:hover {
    color: white;
}

footer.footer p {
    font-size: 22px;
}

footer.footer .footer-contact-details {
    margin: 75px 0;
}

footer.footer .footer-social {
    margin-bottom: 75px;
}

footer.footer .copyright {
    font-size: 1rem;
}

.btn {
    font-weight: 900;
    padding: 12px 18px;
    letter-spacing: 1px;
    border-radius: 0;
    z-index: 999;
}

.btn-primary {
    border: 1px solid white;
    background-color: transparent;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    color: #cdb49a !important;
    border-color: white !important;
    background-color: white !important;
}


.btn-secondary {
    border: 1px solid #222;
    background-color: transparent;
    color: #222;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    color: white !important;

    background-color: #cdb49a !important;
}

.btn-secondary:active,
.btn-secondary:focus {
    -webkit-box-shadow: 0 0 0 3px rgba(239, 64, 53, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(239, 64, 53, 0.5) !important;
}

.button {
    cursor: pointer;
    background-color: transparent !important;
    border: none;
}

button:hover {
    cursor: pointer;
    background-color: transparent !important;
    border: none;
    color: rgb(205, 180, 154);
}

.btn-full-width {
    font-size: 26px;
    font-weight: 200;
    padding: 50px 0;
    letter-spacing: normal;
    text-transform: none;
    border: 0;
    border-radius: 0;
}


.btn-full-width:focus {
    color: white;
}

.text-primary {
    color: #cdb49a !important;
}

a.text-primary {
    color: #cdb49a !important;
}

a.text-primary:focus,
a.text-primary:hover {
    color: #c81b10 !important;
}

.bg-inverse {
    background-color: #222 !important;
}

.owl-carousel.owl-theme .owl-controls {
    margin-top: 0;
}

.owl-carousel.owl-theme .owl-controls .owl-prev,
.owl-carousel.owl-theme .owl-controls .owl-next {
    font-size: 30px !important;
    line-height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 60px;
    margin: auto 0 !important;
    text-align: center;
    color: white !important;
    border-radius: 0 !important;
    background-color: #cdb49a !important;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.owl-carousel.owl-theme .owl-controls .owl-prev:hover,
.owl-carousel.owl-theme .owl-controls .owl-next:hover {
    opacity: 1;
}

.owl-carousel.owl-theme .owl-controls .owl-prev {
    left: 15px;
}

.owl-carousel.owl-theme .owl-controls .owl-next {
    right: 15px;
}

.owl-carousel.owl-theme .owl-controls .owl-page span {
    background: rgba(34, 34, 34, 0.5);
}

.owl-carousel.owl-theme.portfolio-carousel .owl-controls .owl-prev {
    left: 0;
}

.owl-carousel.owl-theme.portfolio-carousel .owl-controls .owl-next {
    right: 0;
}