/* CSS MEDIA QUERIES */
@media (max-width: 1100px) {

    #headline {
        flex: 2;
    }
}

@media (max-width: 1024px) {

    nav ul {
        font-size: small;
    }

    .murodeimigranti button {
        font-size: small;
    }

    #MyWebsite {
        display: none;
    }

    #MyLegal {
        flex: 1;
    }

    section.content-container {
        display: flex;
        flex-direction: column;
    }

    .contact-content {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 970px) {

    #headline {
        flex: 1.5;
    }
}

@media (max-width: 860px) {

    main {
        overflow-x: hidden;
        /* supprime la scroll bar verticale inutile */
    }

    header {
        height: max-content;
        margin-top: 110px;
    }

    .row-header {
        flex-direction: column;
        height: max-content;
    }

    #logo-asso,
    #logo-mdm {
        display: none;
    }

    #headline {
        display: none;
    }

    #message {
        position: fixed;
        top: 85px;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    nav {
        position: fixed;
        /* permet de maintenir en haut avec scroll */
        top: 0;
        left: 0;
        z-index: 100;
        height: 10%;
    }

    .nav-connect {
        display: flex;
        align-items: center;
        margin-left: 3%;
    }

    .nav-connect button {
        width: max-content;
        background-color: var(--MDM_NAVY);
        border-color: var(--WWW_BACK);
        border-radius: 15px;
        font-size: medium;
    }

    .nav-connect button a {
        text-decoration: none;
        color: var(--WWW_TEXT);
    }

    .logo-nav {
        display: flex;
    }

    nav ul {
        justify-content: flex-start;
    }

    nav ul div.menu-items {
        display: none;
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        padding: 0;
        margin: 0;
    }

    input[type="checkbox"]:checked~.menu-items {
        /* appelle ici un autre control */
        display: flex;
        flex-direction: column;
    }

    .menu-items li {
        width: 100%;
        text-align: center;
        background-color: var(--WWW_BLUE);
        border-top: 1px solid var(--WWW_BACK);
    }

    .menu-items a {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    .menu-items a:hover {
        background: var(--WWW_BACK);
        border-bottom: 1px solid var(--WWW_BLUE);
    }

    nav label[for=nav-button] {
        display: block;
        width: 40px;
        height: 100%;
        left: 0;
        top: 0;
        cursor: pointer;
        margin: 0 2%;
    }

    nav label[for=nav-button] span {
        display: flex;
        flex: 0.2;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .menu-langues {
        display: none;
    }

    #nav-langues {
        display: block;
        padding-left: 2%;
    }

    #nav-langues form {
        display: flex;
        flex-direction: row;
    }

    #nav-langues select {
        border: none;
        background: transparent;
        color: var(--WWW_TEXT);
        background-color: var(--WWW_BLUE);
    }

    #nav-langues label i {
        font-size: 1em;
        color: var(--WWW_TEXT);
        display: flex;
        padding-right: 2px;
    }

    section.content-container {
        border-top: 0;
    }

    .page-text {
        padding: 0;
        font-size: 1rem;
    }

    .home-main {
        flex: 1;
    }

    .home-side {
        display: none;
    }

    .search-content {
        flex-direction: column;
    }

    .search-side {
        padding: 0;
    }

    .tab-reg, .tab-2col, .tab-services {
        flex-direction: column;
        align-items: center;
        padding-top: 0px;
    }  

    .tab-2{
        padding-top: 10px;
    }

    .tab-2col img {
        padding-top: 20px;
    }

    .media-openpanel{
        display: block;
        text-align: center;
        height: max-content;
    }
}

@media (max-width: 690px) {
    header {
        margin-top: 110px;
    }

    .row-footer {
        flex-direction: column;
        display: flex;
    }

    #MyFooter {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    #MyLegal {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    section.content-container {
        border-top: 0;
        position: relative;
    }

    .tab-column-name a { /* title event/press */
        font-size: small;
    }

    .field-date{ 	/* date, author */
        font-size: small;
    }

    .field-name{ 	/* newsletters */
        font-size: small;
    }
}

@media (max-width: 510px) {
    .nav-connect button {
        font-size: small;
    }
}