*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1{
    color: #fff;
    font-size: 2.5em;
    text-transform: uppercase;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    margin-right: 5vw;
    margin-left: 5vw;
}

h3{
    color: #fff;
    font-size: 1.5em;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 100;
    margin-right: 5vw;
    margin-left: 5vw;
    margin-top: 5vh;
}

.container{
    width: 100svw;
    height: 100svh;
    background-color: black;
    display: flex;
    flex-direction: row;
}

@media (min-width: 1500px) {

    /*--------------   LEFT  ------------- */

    #left{
        width: 50%;
        height: 100%;
        display: flex;
        background: radial-gradient(circle at right, #6eee47, #1a2b07);
        transition: width .5s ease-in-out 0s;
    }

    #description_green{
        display: flex;
        flex-direction: row;
        align-content:flex-start;
    }

    #data_green{
        display: flex;
        flex-direction: column;
        margin-left: 5%;
    }

    #count_green{
        color: #fff;
        font-size: 0em;
        text-transform: uppercase;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 800;
        margin-right: 2vw;
        margin-left: 2vw;
        transition:  font-size .5s ease-in 0s;
    }

    .beetle_green_img{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        background-image: url(img/green_beetle.png);
        background-repeat: no-repeat;
        background-position: 250% 50%;
        background-size: 75%;
        transition: background-position .5s ease-in 0s, background-size .5s ease-in 0s;
    }

    .beetle_green_img_active{
        display: flex;
        justify-content: center ;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        background-image: url(img/green_beetle.png);
        background-repeat: no-repeat;
        background-position: 130% 0%;
        background-size: 55%;
        transition: background-size .5s ease-in 0s, background-position .5s ease-in 0s;
    }

    .map_green{
        width: 0;
        height: 0;
        transition: width .5s ease-in 0s, height .5s ease-in 0s;
    }

    #diagram_green{
        width: 0;
        height: 0;
        transition: width .5s ease-in 0s, height .5s ease-in 0s;
    }

    #description_left_02{
        font-size: 0em;
        transition: font-size .5s ease-in 0s;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .beetle_green_img p{
        color: #fff;
        font-size: .75em;
        font-family:sans-serif;
        font-weight: 200;
        width: 50%;
        margin-left: 5vw;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .beetle_green_img_active p{
        color: #fff;
        font-size: .75em;
        font-family:sans-serif;
        font-weight: 200;
        width: 40%;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 2%;
        margin-bottom: 2%;
    }






    #button_green{
        display: flex;
        margin-right: calc(50% - 25px);
        width: 200px;
        height: 50px;
        margin-right: 5vw;
        margin-left: 5vw;
        margin-bottom: 5vh;
        background-color: #6eee47;
        border-radius: 25px;
        color: #fff;
        font-family:sans-serif;
        font-weight: 200;
        text-align: center;
        align-content: center;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    #button_green:hover{
        background-color:#8efa82;
    }

    /*--------------   RIGHT  ------------- */

    #right{
        display: flex;
        width: 50%;
        height: 100%;
        background: radial-gradient(circle at left, #501abf, #020942);
        transition: width .5s ease-in-out 0s;
    }

    #description_blue{
        display: flex;
        flex-direction: row;
        align-content:flex-start;
    }

    #data_blue{
        display: flex;
        flex-direction: column;
    }

    #count_blue{
        color: #fff;
        font-size: 0em;
        text-transform: uppercase;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 800;
        margin-right: 2vw;
        margin-left: 2vw;
        transition:  font-size .5s ease-in 0s;
    }

    .beetle_blue_img{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        background-image: url(img/blue_beetle.png);
        background-repeat: no-repeat;
        background-position: -150% 50%;
        background-size: 75%;
        transition: background-size .5s ease-in 0s, background-position .5s ease-in 0s;
    }

    .beetle_blue_img_active{
        display: flex;
        justify-content: center ;
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        background-image: url(img/blue_beetle.png);
        background-repeat: no-repeat;
        background-position: -30% 0%;
        background-size: 55%;
        transition: background-size .5s ease-in 0s, background-position .5s ease-in 0s;
    }

    .map_blue{
        width: 0;
        height: 0;
        transition: width .5s ease-in 0s, height .5s ease-in 0s;
    }

    #diagram_blue{
        width: 0;
        height: 0;
        transition: width .5s ease-in 0s, height .5s ease-in 0s;
    }

    #description_right_02{
        font-size: 0em;
        transition: font-size .5s ease-in 0s;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .beetle_blue_img p{
        color: #fff;
        font-size: .75em;
        font-family:sans-serif;
        font-weight: 200;
        width: 50%;
        margin-right: 5vw;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .beetle_blue_img_active p{
        color: #fff;
        font-size: .75em;
        font-family:sans-serif;
        font-weight: 200;
        width: 40%;
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    #button_blue{
        display: flex;
        margin-right: calc(50% - 25px);
        width: 200px;
        height: 50px;
        margin-right: 5vw;
        margin-left: 5vw;
        margin-bottom: 5vh;
        background-color: steelblue;
        border-radius: 25px;
        color: #fff;
        font-family:sans-serif;
        font-weight: 200;
        text-align: center;
        align-content: center;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    #button_blue:hover{
        background-color:#61d2fb;
    }

}