/* GENERALITIES */
body {
    margin: 0;
    padding: 0;
   /* background-color: #111;*/
    color: #ccc;
}
.fourniBg{
    background-color: #395493 !important;
}

a {
    color: #ccc;
}
.sites-list{
    margin-top: 0px;
}


/* MAIN */

.grid {
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: repeat(10, 1fr);
    grid-gap: 4px;
    width: 80vw;
    height: 100vh;
    margin: 0 auto;
   /* background-color: rgba(0,0,0,0.9);*/
    padding-top: 1%;

}

.grid [class*="photo"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid [class*="image"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


h1 {
    color: white;
    text-align: center
}

h2 {
    text-align: center;
    position: relative;
    top:15%;


}

.grid .image-1 {
    grid-area: 3 / 4 / 4 / 8;
    background: linear-gradient(0.25turn, #ee8826, #BFCE01);
}

.grid .image-2 {
    grid-area: 4 / 3 / 7 / 6;
}

.agrid{
 position:relative;
    top:36%;
    left:42.5%
}

.grid .photo-17 {
    grid-area: 9 / 5 / 10 / 7;
}

.grid .photo-13 {
    grid-area: 2/6/3/7;
}

.grid .image-3 {
    grid-area: 4 / 6 / 7 / 9;
}

.grid .photo-4 {
    grid-area: 5 / 2 / 7 / 3;
}

.grid .photo-5 {
    grid-area: 5 / 9 / 7 / 10;
}

.grid .image-6 {
    grid-area: 7 / 7 / 8 / 9;
    background-color: rgba(238, 136, 38, 1);
    color: gray;
}

.grid .photo-7 {
    grid-area: 7 / 6 / 9 / 7;
}

.grid .photo-8 {
    grid-area: 8 / 7 / 9 / 8;
    background-color: gray;
}

.grid .image-5 {
    grid-area: 7 / 3 / 8 / 5;
    background-color: rgba(191, 206, 1, 1);
    color: gray;
}

.grid .photo-11 {
    grid-area: 8 / 4 / 9 / 6;
}

.grid .photo-12 {
    grid-area: 7 / 5 / 8 / 6;
    background-color: gray;
}

.grid .photo-14 {
    grid-area: 1 / 5 / 3 / 6;
}

.grid .photo-15 {
    grid-area: 2 / 4 / 3 / 5;
}


@media screen and (min-width: 480px) and (max-width: 960px) {
    .grid {
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(6, 1fr);
    }

    .grid .image-1 {
        grid-area: 1 / 1 / 2 / 9;
    }

    h1 {
        vertical-align: middle;
    }


    .grid .image-2 {
        grid-area: 2 / 1 / 3/ 4;
    }

    .grid .image-5 {
        grid-area: 3 / 1 / 4/ 4;
    }


    .grid .image-3 {
        grid-area: 2 / 4 / 3/ 9;
    }

    .grid .image-6 {
        grid-area: 3 / 4 / 4/ 9;
    }

    .grid [class*="image"] {

    }

    .grid [class*="photo"],
    .grid [class*="color"] {

        display: none;
    }

    /*	.grid .title {
            grid-area: 3 / 1 / 4 / 4;
            font-size: 4em;
            color: #fff;
        }
        .grid .description {
            grid-area: 3 / 5 / 4 / 7;
            font-size: 1.5em;
        }*/
}

@media screen and (max-width: 480px) {
    .grid {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(5, 1fr);
    }

    .grid .image-1 {
        grid-area: 1 / 1 / 2 / 9;
    }

    h1 {
        vertical-align: middle;
    }


    .grid .image-2 {
        grid-area: 2 / 1 / 2/ 9;
    }


    .grid .image-3 {
        grid-area: 3 / 1 / 4/ 9;
    }

    .grid [class*="image"] {

    }

    .grid [class*="photo"],
    .grid [class*="color"] {

        display: none;
    }
}