/*--loading--*/
.loadingArea {
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transition: opacity .45s;
}

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    padding: 45%;
    width: 100%;
    transition: all .25s;
}

.logoIcon {
    position: relative;
    width: 50%;
    margin-bottom: 10%;
    display: inline-block;
    overflow: hidden;
    animation: logoIconIn .8s ease both;
}

.logoIcon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.9) 50%, transparent 66%);
    background-size: 230% 100%;
    -webkit-mask: url(../images/logo-icon.svg) center / contain no-repeat;
    mask: url(../images/logo-icon.svg) center / contain no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: logoIconShine 1.15s 0.25s ease both;
}

#logo {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 0 rgba(91, 184, 172, 0));
}

@keyframes logoIconIn {
    0% {
        opacity: 0;
        filter: drop-shadow(0 0 0 rgba(91, 184, 172, 0));
        transform: translateY(-8px) scale(0.96);
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 12px 24px rgba(39, 104, 161, 0.18));
        transform: translateY(0) scale(1);
    }

}

@keyframes logoIconShine {
    0% {
        opacity: 0;
        background-position: 120% 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        background-position: -120% 0;
    }
}

.logo_text {
    opacity: 0;
    animation-name: logoText;
    animation-duration: 0.5s;
    animation-delay: 0.1s;
    animation-fill-mode: both;
    overflow: hidden;
}

.loadingArea.ok{
    z-index: -1;
    pointer-events: none;
    transition-delay: .65s;
}
.loadingArea.ok .logo_text {
    opacity: 1;
    animation-name: fadeupOut;
    animation-duration: .5s;
}

.loadingArea.ok .logoIcon {
    opacity: 1;
    animation-name: fadeupOut;
    animation-duration: 0.45s;
}
@keyframes logoText {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}
@keyframes fadeupOut {
    0% {
         opacity: 1;
        transform: translateY(0);
       
    }

    100% {
         opacity: 0;
        transform: translateY(-10px);
       
    }

}


.loadingArea.ok {
  opacity: 0;
    pointer-events: none;
    transition-delay: .65s;


}

.loadingArea.ok .loading {
    transition: all 0.2s;
}



.first {
  /*border: 1px solid red;*/
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.loadingArea.ok .first {
    -webkit-animation: load-anime 650ms cubic-bezier(.77, 0, .11, 1) 180ms both;
    animation: load-anime 650ms cubic-bezier(.77, 0, .11, 1) 180ms both;

}

.second {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #f3f3f5;
    width: 100%;
    height: 100%;
}

.loadingArea.ok .second {

    -webkit-animation: load-anime 800ms cubic-bezier(.77, 0, .11, 1) 0ms both;
    animation: load-anime 800ms cubic-bezier(.77, 0, .11, 1) 0ms both;
}

@-webkit-keyframes load-anime {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@-webkit-keyframes load-parts {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes load-anime {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes load-parts {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}


body a.navbar-brand{
    opacity: 0;
    transform: translateY(-100%);
    transition: all 1s 1.3s;
}


body.show a.navbar-brand{
    opacity: 1 !important;
    transform: translateY(0);

}

body  .SocialBox,body .copyright{
    opacity: 0;
    transform: translateX(-40%) translateY(-50%);
    transition: all 1s 1.5s;

}

body.show  .SocialBox,body.show .copyright{
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}


body .bannerBox:after{
    content: '';
    opacity: 0;
    right: -10%;
    transition: all 1s 1.3s;
}

body.show .bannerBox:after{
    opacity: 1;
    right: 0;

}
.navbar-toggler{
     content: '';
    opacity: 0;

    transition: all 1s 1.3s;
}

body.show .navbar-toggler{
    opacity: 1;

}

@media(max-width: 768px){
    .loading{
        padding: 30%;
    }
}