/* Général*/
@font-face {
    font-family: rammstein;
    src: url('polices/rammstein/rammstein-webfont.eot');
    src: url('polices/rammstein/rammstein-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/rammstein/rammstein-webfont.woff2') format('woff2'),
         url('polices/rammstein/rammstein-webfont.woff') format('woff'),
         url('polices/rammstein/rammstein-webfont.ttf') format('truetype'),
         url('polices/rammstein/rammstein-webfont.svg#rammstein_by_wojciecrammstein') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    padding:1%;
    background: url(images/background_nid.jpg) fixed no-repeat;
    color: white;
    font-family: calibri; 
}

header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 2px solid white;
    position: fixed;
    top: 0;
    width:100%;
    padding-top:1%;
    background: url(images/background_nid.jpg) fixed no-repeat;
}

h4 {
    margin-bottom: 2%;
}

/*Header*/
.div_header {
    position:relative;
}

#header-img {
    width: 60px;
}

header p {
    font-family: rammstein;
}

.block_logo {
    width: 30%;
    display: flex;
    align-items: baseline;
}

.block_logo p {
    padding-left: 3%;
}

nav {
    width: 30%;
    padding-right:3%;
}

nav ul {
   list-style-type: none;
   display: flex;
   justify-content: space-around;
   align-content: flex-end ;
}

nav a, footer a {
    color: white;
    text-decoration: none;
}

nav a:hover, footer a:hover {
    text-decoration: underline;
}

/*Section général*/

section {
    padding: 12% 0 3% 0;
}

.block_section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
}

/*Section formulaire*/

#form {
    display: flex;
    justify-content: center;
    padding-bottom: 3%;
}

.p_form {
    width: 140px;
}

.email {
    width:200px;
}

#email {
    width: 90%;
}

#submit {
    background: floralwhite;
    color: black;
    border-radius: 2%;
    font-family: calibri;
}

/*Section accroche commerciale*/

.avantages {
    width:25%;
}

.avantages p {
    padding:5%;
}

/*Section vidéo*/

.video {
    width: 40%;
}

#video {
    width: 100%
}

/*Section merchandising*/
aside p {
    width :38%;
    text-align: center;
    background-color: floralwhite;
    border: solid floralwhite;
    border-radius: 3%;
}

aside a {
    color: black;
    text-decoration: none; 
}

aside a:hover {
    text-decoration: underline;
}

aside {
    display: flex;
    justify-content: space-around;
}

.concert {
    padding-bottom: 5%;
}

.aside {
    border: 2px solid white;
    border-radius: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1%;
}

aside img {
    width: 90%;
}

.prix {
    margin-top: 0;
    text-decoration: underline;
    width:90%;
}

/*Footer*/

footer {
    border-top: 2px solid white;
}

.footer {
    padding :0 2% 0 2%;
    display: flex;
    justify-content: space-between;
    width:100%;
    height:auto;
}

.rgpd {
    width: 75%;
    padding-right: 5%;
}

.contact {
    width: 20%;
}

/*Media quieries*/
@media screen and (max-width: 1024px) {
    h4 {
        padding-bottom: 20px;
        text-align: center;
    }
    
    nav {
        width: 55%;
    }

    #form {
        display: flex;
        flex-direction: column;
        align-items:center;
    }
    
    #form p {
        margin: 8px auto 8px auto;
    }

    .block_section {
        display: flex;
        flex-direction: column;
    }

    .video {
        width: 80%;
    }

    .avantages {
        width:300px;
    }

    .aside {
        width: 30%;
    }

    .rgpd {
        width: 75%;
    }
    
    .contact {
        width: 40%;
    }
}