﻿/*--------------------------------- BACKGROUNDS MP -------------------------------------*/



.container_bg_mp_gray {
    background-color: #c8e1e5;
}

.container_bg_mp_gray_darker {
    background-color: #a7cbd9;
}

    .background_shadow_light_blue {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: linear-gradient(0deg,rgba(4, 111, 179, 1) 0%, rgba(4, 111, 179, 1) 5%, rgba(4, 111, 179, 0) 30%, rgba(4, 111, 179, 0) 70%, rgba(4, 111, 179, 1) 95%, rgba(4, 111, 179, 1) 100%);
    }

.background_shadow_dark_blue {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(0deg,rgba(4, 62, 98, 1) 0%, rgba(4, 62, 98, 1) 5%, rgba(4, 62, 98, 0) 30%, rgba(4, 62, 98, 0) 70%, rgba(4, 62, 98, 1) 95%, rgba(4, 62, 98, 1) 100%);
}

.background_radial_light_blue {
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: radial-gradient(circle,rgba(8, 126, 200, 1) 0%, rgba(8, 126, 200, 0) 50%);
    background-size: 150% 150%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.background_pattern {
    width: 400vw; /*fallback*/
    width: max(400vh, 400vw);
    height: 400vh; /*fallback*/
    height: max(400vh, 400vw);
    position: absolute;
    z-index: -2;
    top: -200vh;
    left: 200vw;
    transform: rotate(-20deg) translate(-50%, -50%);
    background-repeat: repeat;
    background-size: 140px;
    background-position: center;
}

.pattern_animated {
    animation: pattern 600s linear infinite;
}

  

    .pattern_opacity_1 {
        opacity: 0.05;
    }

.pattern_opacity_2 {
    opacity: 0.1;
}

.pattern_opacity_3 {
    opacity: 0.15;
}

.background_pattern_crowns {
    background-image: url(../img/backgrounds/patterns/crown_300x300.png);
}

.background_pattern_towers {
    background-image: url(../img/backgrounds/patterns/tower_300x300.png);
}

@keyframes pattern {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 10000px 0;
    }
}

.background_light_blue {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #087EC8;
    z-index: -3;
}

.background_dark_blue {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #043e62;
    z-index: -3;
}

.background_light_grey {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c8e1e5;
    z-index: -3;
}

.background_dark_grey {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #a7cbd9;
    z-index: -3;
}

.bg_wood {
    
    background-image: url("/img/wip-multiplayer/footer/wood-footer-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 110%;
}
