/* Loader Styles */
#page-loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #842f31;
    z-index: 100001;
    transform: translateY(0%);
    transition: all ease-in-out 3s;
}

#page-loader.active {
    transform: translateY(-100%);
    transition: all ease-in-out 6s;
}

#lighthouse {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #7F1518;
    perspective: 700px;
    overflow: hidden;
    /* Hide the overflow to prevent scroll */
}

.load-imgs {
    width: 100%;
}

.sand {
    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 0;
    background-color: #e3d7d3;
    z-index: 3;
}

.sea {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
    background-color: #4d91a3;
}

.building {
    width: 19%;
    height: 56%;
    position: absolute;
    bottom: 10%;
    left: calc(42% - 30px);
    z-index: 1;
}

.base {
    width: 120px;
    height: 5%;
    position: absolute;
    left: -30px;
    bottom: -40px;
    background-color: #6b6b6b;
    border-radius: 20px 20px 0 0;
}

.base:after {
    content: "";
    width: 1.2em;
    height: 2.3em;
    position: absolute;
    left: calc(50% - 0.6em);
    bottom: 50%;
    background-color: #383838;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 -60px 0 -5px #383838, 0 -100px 0 -5px #383838,
        0 -140px 0 -5px #383838;
}

.main {
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to top,
            #cf6766,
            #cf6766 1.25em,
            #fff 1.25em,
            #fff 3em);
    -webkit-transform: perspective(200px) rotateX(40deg);
}

.main:after {
    content: "";
    height: 100%;
    width: 50%;
    position: absolute;
    background-color: rgba(56, 56, 56, 0.3);
}

.roof {
    width: 60px;
    height: 15%;
    position: absolute;
    top: 20%;
    left: calc(50% - 30px);
    background-color: #707070;
    border-radius: 30% 30% 0 0;
    z-index: 9;
}

.roof:after {
    content: "";
    height: 100%;
    width: 50%;
    position: absolute;
    background-color: rgba(56, 56, 56, 0.3);
    border-radius: 50% 0 0 0;
}

.roof:before {
    content: "";
    width: 0.2em;
    height: 2em;
    position: absolute;
    left: calc(50% - 0.1em);
    bottom: 15%;
    background-color: #ffffff;
    border-radius: 20%;
    box-shadow: -10px 0 0 #ffffff, -20px 0 0 #ffffff, 10px 0 0 #ffffff,
        20px 0 0 #ffffff;
}

.lights {
    width: 411px;
    height: 10%;
    position: absolute;
    top: 35%;
    left: calc(50% - 206px);
    z-index: 8;
    animation: lighthouse 10s linear infinite both;
}

.light-left {
    width: 70%;
    height: 40%;
    position: absolute;
    top: 23%;
    right: 35%;
    background-image: linear-gradient(to left, #ffffff 40%, transparent);
    -webkit-transform: perspective(100px) rotateY(40deg);
}

.light-right {
    width: 70%;
    height: 40%;
    position: absolute;
    top: 23%;
    left: 35%;
    background-image: linear-gradient(to right, #ffffff 40%, transparent);
    -webkit-transform: perspective(100px) rotateY(-40deg);
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ffffff;
    z-index: 10;
    opacity: 0;
    animation: shine 2s linear infinite both;
}

#lighthouse:after {
    content: "";
    width: 2px;
    height: 2px;
    position: absolute;
    top: 3%;
    left: 5%;
    border-radius: 50%;
}

@keyframes lighthouse {
    0% {
        -webkit-transform: perspective(100px) rotateY(0deg);
    }

    100% {
        -webkit-transform: perspective(100px) rotateY(360deg);
    }
}

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

    25% {
        opacity: 0.1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width:767px) {

    .load-imgs {
        height: 40%;
    }

    .building {
        width: 31%;
        height: 56%;
        position: absolute;
        bottom: 8%;
        left: calc(42% - 30px);
        z-index: 1;
    }
}