.modal-dialog {
    max-width: 80%;
    margin: 30px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.Portfolio {
    position: relative;
    margin: 5px;
    border: 2px solid black;
    float: left;
    width: 280px;
    transition-duration: 0.4s;
    border: 1px solid gray;
    border-radius: 5px;
    animation: winanim 0.5s;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.Portfolio:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    border-color: white;
}

.Portfolio img {
    width: 100%;
    height: auto;
    border-radius: 5px
}

.desc {
    padding: 5px;
    text-align: center;
    font-size: 90%;
    color: white;
}

.nav {
    padding: 20px;
    margin-top: -30px;
}

.nav li a {
    margin: 5px;
    padding: 15px 50px;
    font-size: 16px;
    color: #431772;
    background: #fff;
    transition-duration: 0.4s;
}

.nav a:hover {
    background: #333;
    color: #fff;
}

.nav .active {
    background-color: #431772 !important;
    color: #fff;
}

@keyframes winanim {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

a {
    color: #4d247e;
}

.ftco-navbar-light.scrolled .nav-link.active {
    /*color: #4d247e !important;*/
    color: #265ba7 !important;  
}

.ftco-owl .owl-dots .owl-dot.active span {
    /*background: #4d247e;
    color: #4d247e;*/
    background: #265ba7;
    color: #265ba7;
}

.color-neoma_violet {
    color: #4d247e;
}

.color-popup_bluelight {
    color: #265ba7;
}
.color-human_roads {
    color: #ff4d4f;
}
.color-popup_yellow {
    color: #ffd769;
}
.btn-with-icon {
    min-height: 63px;
    padding-top: 24px;
}

.icon-location {
    padding: 0px 10px 0px 0px;
    font-size: 18px;
}

.icon-location.icon-big,
.icon-big {
    FONT-SIZE: 44PX;
    MARGIN-BOTTOM: 20PX;
}

.link-bloc {
    cursor: pointer;
    display: inline-block;
}

a.link-bloc p {
    color: #859196;
}


.navbar-brand div {
    width: 67px;
    height: 36px;
    background: url("../images/pod-nav_white.png") no-repeat;
}
.awake .navbar-brand div {
    background: url("../images/pod-nav_black.png") no-repeat;
}


/*anim svg human roads*/
#PRoad {
    stroke-dasharray: 680;
    stroke-dashoffset: 680;
    animation: roads 4s cubic-bezier(0.55, 0, 0.5, 0.7) forwards;
}

#RRoad {
    stroke-dasharray: 545;
    stroke-dashoffset: 545;
    animation: roads 4s cubic-bezier(0.55, 0, 0.5, 0.7) forwards;
    animation-delay: 2s;
}

#GRoad {
    stroke-dasharray: 795;
    stroke-dashoffset: 795;
    animation: roads 4s cubic-bezier(0.55, 0, 0.5, 0.7) forwards;
    animation-delay: 1s;
}

@keyframes roads {
    to {
        stroke-dashoffset: 0;
    }
}

#p-crossroad-1,
#p-crossroad-1-2,
#p-node-1,
#p-node-2,
#p-node-3,
#g-crossroad-1,
#g-crossroad-2,
#g-node-1,
#g-node-2,
#g-node-3,
#r-crossroad-1,
#r-crossroad-2,
#r-crossroad-3,
#r-node-1,
#r-node-2,
#r-node-3 {
    opacity: 0;
    animation: appear 0.5s;

    animation-fill-mode: both;
}

#p-crossroad-1 {
    animation-delay: 1.6s;
}

#p-node-1 {
    animation-delay: 1.9s;
}

#p-crossroad-1-2 {
    animation-delay: 2.35s;
}

#p-node-2 {
    animation-delay: 3.1s;
}

#p-node-3 {
    animation-delay: 3.65s;
}

#g-crossroad-1 {
    animation-delay: 2.5s;
}

#g-node-1 {
    animation-delay: 3.15s;
}

#g-crossroad-2 {
    animation-delay: 3.3s;
}

#g-node-2 {
    animation-delay: 3.5s;
}

#g-node-3 {
    animation-delay: 4.6s;
}

#r-crossroad-1 {
    animation-delay: 3s;
}

#r-crossroad-2 {
    animation-delay: 3.75s;
}

#r-node-1 {
    animation-delay: 4.2s;
}

#r-crossroad-3 {
    animation-delay: 4.65s;
}

#r-node-2 {
    animation-delay: 4.9s;
}

#r-node-3 {
    animation-delay: 5.52s;
}

@keyframes appear {
    100% {
        opacity: 1;
    }
}

#bot {
    animation: hover 3s ease-in-out alternate infinite;
}

@keyframes hover {
    0% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(-30px);
    }

}

#shadowbot {
    transform-origin: 157.3px 730.3px;
    animation: shadowgrow 3s ease-in-out alternate infinite;
}

@keyframes shadowgrow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

#light-1 {
    animation: lightning 3.5s infinite;
    stroke: #ff4e50;
}

#light-2 {
    animation: lightning 4s infinite;
    stroke: #ff4e50;
}

@keyframes lightning {
    0% {
        stroke-width: 0;
    }

    48% {
        stroke-width: 0;
    }

    50% {
        stroke-width: 7;
    }

    60% {
        stroke-width: 0;
    }

    100% {
        stroke-width: 0;
    }
}
