/* 
    Created on : 28 juil. 2016, 22:42:41
    Author     : Richounet
*/

@import url("../basic/commons.css");

@media (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) {

    /* Header  Part */
    #menu::after {
        height: 1px;
    }

    #menu nav {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }

    #menu nav #about {
        display: none;
    }

    #menu nav ul {
        display: inline-block;
        margin: 0;
        width: 46%;
        height: 100%;
    }

    #menu nav div {
        display: flex;
        width: 100%;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #menu nav div #socials {
        width: 30%;
        margin: 0;
        flex-wrap: wrap;
    }

    #menu nav div #socials li {
        margin: 5%;
    }

    #menu nav div #socials li a img {
        width: 100%;
        margin: 0;

        transition-property: none !important;
    }

    #menu nav div ul:nth-child(2) {
        width: 100%;
    }

    #menu nav div ul:nth-child(2) li {
        margin: 0 5%;
    }

    #menu nav div ul:nth-child(2) li a {
        font-size: 5vw;
    }

    /* Body Part */
    #page,
    .timeline {
        margin: 0 0 1% 0;
        width: 100%;
    }

    #page #content {
        width: 95%;
        margin: 0 2.5%;
        font-size: 0;
    }

    /* Footer  Part */
    #footer {
        border-top: 1px solid var(--main2-color);
    }

    #footer #message {
        display: none;
    }

    #footer nav {
        margin: 2% 10%;
        width: 80%;
        font-size: 0;
    }

    #footer ul {
        margin: 5% 0;
    }

    #footer li {
        margin: 0 8% 0 8%;
        width: 8%;
    }

    #footer li:nth-child(1) {
        margin: 0 10% 0 8%;
    }

    #footer #copyright,
    #footer #copyright a {
        font-size: 3.2svw;
    }
}

@media (min-width: 320px) and (max-width: 1024px) {
    #menu nav ul #about:before {
        display: none !important;
        transition-property: none !important;
    }

    #menu nav ul #about:after {
        display: none !important;
        transition-property: none !important;
    }
}

@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) {

    /* Header  Part */
    #menu {
        margin: 0;
        padding: 0;
    }

    #menu::after {
        height: 1px;
    }

    #menu nav #about {
        display: none;
    }

    #menu nav ul {
        display: inline-block;
        margin: 0;
        width: 46%;
        height: 100%;
    }

    #menu nav div {
        display: flex;
        width: 100%;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #menu nav div #socials {
        width: 15%;
        margin: 0;
        flex-wrap: wrap;
    }

    #menu nav div #socials li {
        margin: 5%;
    }

    #menu nav div #socials li a img {
        width: 100%;
        margin: 0;

        transition-property: none !important;
    }

    #menu nav div ul:nth-child(2) {
        width: 100%;
    }

    #menu nav div ul:nth-child(2) li {
        margin: 0 3.5%;
    }

    #menu nav div ul:nth-child(2) li a {
        font-size: 2vw;
    }

    /* Footer  Part */
    #footer {
        border-top: 1px solid var(--main2-color);
    }

    #footer #message {
        display: none;
    }

    #footer nav {
        margin: 2% 20%;
        width: 60%;
        font-size: 0;
    }

    #footer li {
        margin: 0 5.5% 0 5.5%;
        width: 12.5%;
    }

    #footer li:nth-child(1) {
        margin: 0 7.5% 0 7.5%;
    }

    #footer #copyright,
    #footer #copyright a {
        font-size: 2.8vw;
    }
}