

.bloc {
    width: 100%;
    clear: both;
    background: 50% 50% no-repeat;
    padding: 0 50px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    display: flex;
}



.bloc .container {
    padding-left: 0;
    padding-right: 0;
}



/* Sizes */



.bloc-xl {
    padding: 150px 50px;
}



.bloc-lg {
    padding: 100px 50px;
}



.bloc-md {
    padding: 50px;
}



.bloc-sm {
    padding: 20px 50px;
}



/* = Half Screen Blocs


-------------------------------------------------------------- */


.bloc-half-fill-screen {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    padding-top: 0px;
    padding-bottom: 0px;
}



.bloc-half-fill-screen > .container {
    align-self: flex-middle;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}



.bloc-half-fill-screen > .container > .row {
    flex-grow: 1;
    align-self: center;
    width: 100%;
}



.bloc-half-fill-screen .fill-bloc-top-edge, .bloc-half-fill-screen .fill-bloc-bottom-edge {
    flex-grow: 0;
}



.bloc-half-fill-screen .fill-bloc-top-edge {
    align-self: flex-start;
}



.bloc-half-fill-screen .fill-bloc-bottom-edge {
    align-self: flex-end;
}



/* = Full Screen Blocs


-------------------------------------------------------------- */


.bloc-fill-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
}



.bloc-fill-screen > .container {
    align-self: flex-middle;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}



.bloc-fill-screen > .container > .row {
    flex-grow: 1;
    align-self: center;
    width: 100%;
}
