@font-face {
    font-family: AP_regular;
    src: url("fonts/OTF/AP-Regular.otf");
}

body {
	font-family: AP_regular;
	font-weight: normal;
}

.body-page-bg {
    background: linear-gradient(101.93deg, #00445F -11.24%, #00588E 3.3%, #00445F 35.26%);
}

.main-header-bg {
     padding: 3rem;
     height: 255px;
     background: linear-gradient(177.88deg, rgba(168, 150, 135, 0.5) -5.12%, rgba(168, 150, 135, 0) 94.63%);
 }

.h3Size {
    font-size: 1.75rem;
}

.frameSize {
    width: 39%;
}

.frameSizeSmall {
    width: 30%;
}

.logoSize {
    width: 48%;
}

.rowListFont {
    font-size: 20px;
}

.headText {
    font-size: 55px;
    font-weight: bold;
}

.facilImg-size {
    margin-bottom: 10px;
    width: 22%;
}

.image-center {
    height: 100%;
    object-fit: contain;
    max-width: 100vw;
}

.main-wrapper {
    position: relative;
    height: calc(100vh - 255px - 145px);
    display: inline-block;
}

.body-height {
    height: calc(100vh - 255px - 145px);
}

.main-bg {
    /*background: url("../img/main-layer.jpg");*/
    /*background-size: cover;*/
    /*width: 1080px !important;*/
    /*height: 1512px !important;*/
    background-color: white;
    text-align: center;
}

.facility-bg {
    padding: 1.5rem;
    background: url('../img/facility-bg.jpg');
    background-size: cover;
    position: relative;
    width: 1080px !important;
    height: 1512px !important;
}
.facility-ready {
    padding: 1.5rem;
    background: url('../img/facility-ready.jpg');
    background-size: cover;
    position: relative;
    width: 1080px !important;
    height: 1512px !important;
}

.unitfunc-bg {
    background: url('../img/unit.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3rem;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.footer-bg {
    padding: 3rem;
    height: 153px;
	background: linear-gradient(137.51deg, #00445F 21.82%, #00588E 42.35%, #00445F 76.87%);
}

.without-footer {
    flex: 1;
}

.footer-flex {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.rounded-circle {
    width: 40px;
    height: 40px;
    padding-right: 13px;
    padding-top: 8px;
}

.btn-footer {
    color: #FFFFFF !important;
    border-radius: 45px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    width: 205px;
    height: 57px;
    background: transparent;
    border: solid 3px #853A27;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-footer:hover,.btn-footer.disabled {
    opacity: 1;
    background: linear-gradient(132.75deg, #C67251 -24.63%, #853A27 9.3%, #C67251 51.11%, #853A27 79.45%);
}

.logoStyle {
    width: 18vh;
    top: 12vh;
    right: 10%;
    border-radius: 4px;
    position: absolute;
    z-index: 2 !important;
}

.shine-me {
    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.5,.9,.9,.4);
}

.btn-func {
    color: #E5E5E5;
    background-color: #11435F;
    border-radius: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    padding: 10px 30px;
    width: 25%;
}

.btn-func:hover,.btn-func-active {
    color: #11435F;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    padding: 10px 30px;
    width: 25%;
}

.facilText-head {
    opacity: 0;
    animation: appear 1s ease;
    animation-delay: .5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.facilImg-1 {
    opacity: 0;
    padding: 0 20px;
    animation: appear 1s ease;
    animation-delay: 1s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.facilImg-2 {
    opacity: 0;
    padding: 0 20px;
    animation: appear 1s ease;
    animation-delay: 1.5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.facilImg-3 {
    opacity: 0;
    padding: 0 20px;
    animation: appear 1s ease;
    animation-delay: 2s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.facilImg-4 {
    opacity: 0;
    padding: 0 20px;
    animation: appear 1s ease;
    animation-delay: 2.5s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat: no-repeat;
        background-image: -webkit-linear-gradient(
                top left,
                rgba(255, 255, 255, 0.0) 0%,
                rgba(255, 255, 255, 0.0) 45%,
                rgba(255, 255, 255, 0.5) 48%,
                rgba(255, 255, 255, 0.8) 50%,
                rgba(255, 255, 255, 0.5) 52%,
                rgba(255, 255, 255, 0.0) 57%,
                rgba(255, 255, 255, 0.0) 100%
        );
        background-position: -500px -500px;
        background-size: 600px 600px;

    }

    to {
        background-repeat: no-repeat;
        background-position: 500px 500px;

    }
}

@keyframes logoShining{
    10% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }
    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}

@-webkit-keyframes slowShine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: bottom right;
    }
}

@-webkit-keyframes appear {
    from {
        opacity: 0;
    }
    to{
        opacity: 1;

    }
}

/* for Laptop */
@media (min-width: 1367px) {

    .footer-bg {
        width: 100%;
    }

    .facility-bg {
        padding: 3rem;
        background: url('../img/facility-bg.jpg');
        background-repeat: no-repeat;
        position: relative;
        height: 100%;
    }

    div#panoDIV {
        width: 100%;
        height: 100%;
    }
}