@font-face {
    font-family: 'lato';
    src: url('font/lato/Lato-Regular.ttf');
}

body, html {
    font-family: 'lato';
    background-color: hsl(233, 100%, 98%);
    margin:0;
    padding:0;
}

#content {
    opacity: 0;
    display: none;
    width:100%;
    position: relative;
    height: 100vh;
    background-color: white;
    transition: opacity 0.3s ease;
}
.banner {
    position: relative;
}
#image {
    width: 100%;
}
#logo {
    width: 25%;
    position: absolute;
    top: 25%;
    left:5%;
    transform: rotate(-12deg);
}
.message {
    color: hsl(0, 0%, 100%);
    background-color: hsl(17, 98%, 61%);
    padding: 3vh;
    box-shadow: 0px 0px 1vh black;
}
.message-title {
    font-size: 3vh;
}
.message-subtitle {
    color: hsl(0, 0%, 85%);
    font-size: 2.5vh;
    margin-top:1vh;
}

.networks {
}
.network {
    position: relative;
    display: block;
    text-decoration: none;
    color: black;
    height: 9vh;
    border-bottom: 1px solid #ddd;
}
.network > img {
    display: inline-block;
    width: 4vh;
    margin: 2.5vh;
}
.network-text {
    display: inline-block;
    position: absolute;
    left: 9vh;
    height: 9vh;
    display: inline-flex; /* contexte sur le parent */
    flex-direction: column; /* direction d'affichage verticale */
    justify-content: center; /* alignement vertical */
}
.network-title {
    font-size: 2.3vh;
}

.network-subtitle {
    font-size: 2vh;
    color: #a5a5a5;
}
@media only screen and (min-device-width: 768px){
    #content {
        margin:auto;
        max-width:50vh;
    }
}

#loader-img {
    opacity: 0;
    position: absolute;
    left: 50vw;
    top: 40vh;
    width: min(60vw,60vh);
    transform: translate(-50%,-50%);
    transition: opacity 1.5s ease, transform 1.5s ease;

}
#loader {
    width: 100vw;
    height: 100vh;
}