/*------------ font family ----------*/
@font-face { font-family:main; src:url(../font/AvenirNextLTPro-Bold.otf) } 
@font-face { font-family:footer-text; src:url(../font/AvenirNextLTPro-Demi.otf) } 
@font-face { font-family:bold-cn; src:url(../font/AvenirNextLTPro-BoldCn.otf) } 
@font-face { font-family:medium-cn; src:url(../font/AvenirNextLTPro-MediumCn.otf) } 
@font-face { font-family:light; src:url(../font/AvenirLT35Light.ttf) } 
@font-face { font-family:regular; src:url(../font/AvenirNextLTPro-Regular.otf) } 
@font-face { font-family:impact; src:url(../font/impact_0.ttf) } 
@font-face { font-family:roboto-black; src:url(../font/Roboto-Black_0.ttf) } 
/*-------------------*/

header {
    background: #29468e;
    text-align: center;
    text-transform: uppercase;
    display: flex;
}
header div {
    padding: 30px;
}
header div:first-child{
    width: 66.2%;
    border-right: 20px solid #BDBDC0;
}
header div:nth-child(2){
    flex: 1;
}

header h1,header h3 {
    color: #FCF5E3;
    font-size: 50px;
    font-family: impact;
    margin-bottom: 10px;
}
header h2 {
    color: #67bee5;
    font-family: roboto-black;
    font-size: 30px;
    width: 70%;
    margin: 0 auto;
}

.bottom-particles {
    position: absolute;
bottom: 9.5%;
left: -37%;
width: 90%;
height: 219%;
transform: scale(.085);
transform-origin: bottom center;
/* background: blue;
opacity: 0.5; */
}
.bottom-particles .bubble {
opacity: 0;
position: absolute;
bottom: -0rem;
width: 8rem;
height: 8rem;
background-color: #C9A63F;
/* C9A63F */
border-radius: 50%;
border: 1px solid #B8A87A;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.bottom-particles .bubble:nth-child(1) {
left: 33%;
animation: blow 5000ms infinite;
animation-delay: 5091ms;
}
.bottom-particles .bubble:nth-child(2) {
left: 79%;
animation: blow 9669ms infinite;
animation-delay: 2244ms;
}
.bottom-particles .bubble:nth-child(3) {
left: 54%;
animation: blow 7977ms infinite;
animation-delay: 9525ms;
}
.bottom-particles .bubble:nth-child(4) {
left: 84%;
animation: blow 10917ms infinite;
animation-delay: 2730ms;
}
.bottom-particles .bubble:nth-child(5) {
left: 58%;
animation: blow 13545ms infinite;
animation-delay: 2712ms;
}
.bottom-particles .bubble:nth-child(6) {
left: 54%;
animation: blow 5000ms infinite;
animation-delay: 2088ms;
}
.bottom-particles .bubble:nth-child(7) {
left: 79%;
animation: blow 8352ms infinite;
animation-delay: 4791ms;
}
.bottom-particles .bubble:nth-child(8) {
left: 42%;
animation: blow 9901ms infinite;
animation-delay: 3641ms;
}
.bottom-particles .bubble:nth-child(9) {
left: 90%;
animation: blow 7134ms infinite;
animation-delay: 5616ms;
}
.bottom-particles .bubble:nth-child(10) {
left: 29%;
animation: blow 6233ms infinite;
animation-delay: 1120ms;
}
.bottom-particles .bubble:nth-child(11) {
left: 22%;
animation: blow 14513ms infinite;
animation-delay: 2652ms;
}
.bottom-particles .bubble:nth-child(12) {
left: 80%;
animation: blow 7552ms infinite;
animation-delay: 10261ms;
}
.bottom-particles .bubble:nth-child(13) {
left: 45%;
animation: blow 11816ms infinite;
animation-delay: 2993ms;
}
.bottom-particles .bubble:nth-child(14) {
left: 90%;
animation: blow 9987ms infinite;
animation-delay: 9753ms;
}
.bottom-particles .bubble:nth-child(15) {
left: 97%;
animation: blow 5000ms infinite;
animation-delay: 5251ms;
}
.bottom-particles .bubble:nth-child(16) {
left: 44%;
animation: blow 7063ms infinite;
animation-delay: 3597ms;
}
.bottom-particles .bubble:nth-child(17) {
left: 76%;
animation: blow 13532ms infinite;
animation-delay: 39ms;
}
.bottom-particles .bubble:nth-child(18) {
left: 4%;
animation: blow 13183ms infinite;
animation-delay: 5943ms;
}
.bottom-particles .bubble:nth-child(19) {
left: 68%;
animation: blow 5000ms infinite;
animation-delay: 2714ms;
}
.bottom-particles .bubble:nth-child(20) {
left: 73%;
animation: blow 5000ms infinite;
animation-delay: 4832ms;
}
.bottom-particles .bubble:nth-child(21) {
left: 99%;
animation: blow 5000ms infinite;
animation-delay: 2665ms;
}
.bottom-particles .bubble:nth-child(22) {
left: 95%;
animation: blow 10616ms infinite;
animation-delay: 11994ms;
}
.bottom-particles .bubble:nth-child(23) {
left: 20%;
animation: blow 5000ms infinite;
animation-delay: 3444ms;
}
.bottom-particles .bubble:nth-child(24) {
left: 81%;
animation: blow 6085ms infinite;
animation-delay: 10415ms;
}
.bottom-particles .bubble:nth-child(25) {
left: 33%;
animation: blow 5000ms infinite;
animation-delay: 3493ms;
}
.bottom-particles .bubble:nth-child(26) {
left: 2%;
animation: blow 12784ms infinite;
animation-delay: 5878ms;
}
.bottom-particles .bubble:nth-child(27) {
left: 40%;
animation: blow 7039ms infinite;
animation-delay: 376ms;
}
.bottom-particles .bubble:nth-child(28) {
left: 47%;
animation: blow 5000ms infinite;
animation-delay: 10567ms;
}
.bottom-particles .bubble:nth-child(29) {
left: 46%;
animation: blow 6622ms infinite;
animation-delay: 11536ms;
}
.bottom-particles .bubble:nth-child(30) {
left: 20%;
animation: blow 13438ms infinite;
animation-delay: 10166ms;
}
.bottom-particles .bubble:nth-child(31) {
left: 55%;
animation: blow 5000ms infinite;
animation-delay: 8822ms;
}
.bottom-particles .bubble:nth-child(32) {
left: 25%;
animation: blow 8668ms infinite;
animation-delay: 2840ms;
}
.bottom-particles .bubble:nth-child(33) {
left: 43%;
animation: blow 6171ms infinite;
animation-delay: 2560ms;
}
.bottom-particles .bubble:nth-child(34) {
left: 52%;
animation: blow 5276ms infinite;
animation-delay: 3970ms;
}
.bottom-particles .bubble:nth-child(35) {
left: 72%;
animation: blow 5000ms infinite;
animation-delay: 57ms;
}
.bottom-particles .bubble:nth-child(36) {
left: 50%;
animation: blow 12793ms infinite;
animation-delay: 7380ms;
}
.bottom-particles .bubble:nth-child(37) {
left: 81%;
animation: blow 9845ms infinite;
animation-delay: 1689ms;
}
.bottom-particles .bubble:nth-child(38) {
left: 35%;
animation: blow 10573ms infinite;
animation-delay: 2081ms;
}
.bottom-particles .bubble:nth-child(39) {
left: 93%;
animation: blow 5000ms infinite;
animation-delay: 7085ms;
}
.bottom-particles .bubble:nth-child(40) {
left: 3%;
animation: blow 11742ms infinite;
animation-delay: 5674ms;
}

@keyframes blow {
0% {
opacity: 0;
transform: translate(0, 0);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(0, -200vh) scale(0.2);
}
}

@-webkit-keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

.close {
    text-decoration: none;position: absolute; right: 10px;top: 10px;color: #fff; font-size: 25px; font-family: medium-cn; border-radius: 100%; border : 1px solid #fff; padding: 4px 12px; cursor: pointer; z-index: 2;
}

.wow {visibility: hidden;}

.img-box {
    width: 100%;
    position: relative;
}
.img-box img {width: 100%;}

.img-box a {
 position: absolute;
 text-decoration: none;
 transition: all 0.3s;
 text-transform: uppercase;
 font-family: roboto-black;
 color: #fff;
}

.img-box a:hover {
    transform: scale(1.5);
}

.shelves {
    left: 32.5%;
    top: 3%;
    font-size: 1vw;
}

.walls {
    left: 48.2%;
    top: 5.5%;
    font-size: 1vw;
}

.sinks {
    left: 5%;
    top: 20%;
    font-size: 1vw;
}

.appliances {
    left: 29.7%;
    top: 43.5%;
    font-size: 0.9vw;
    color: #000 !important;
}

.floors {
    left: 6%;
    top: 55%;
    font-size: 1vw;
    color: #000 !important;
}

.prep {
    left: 55%;
    top: 59.5%;
    font-size: 1vw;
    color: #000 !important;
}

.counter {
    left: 53%;
    top: 89.5%;
    font-size: 0.95vw;
}

.grease {
    left: 12.9%;
    top: 83.2%;
    font-size: 0.95vw;
    color: #000 !important;
    width: 5%;
    text-align: center;
}

.garbage {
    left: 81.5%;
    top: 57.2%;
    font-size: 0.9vw;
    width: 11%;
    text-align: center
}

.ground {
    right: 21.1%;
    top: 92.2%;
    font-size: 0.8vw;
    color: #000 !important;
}