/**
 * Affichage responsive
 * 
 * @copyright (c) ontheway.ch
 * @author Joëlle Galloni et Pascal Favre
 */

/**
 * < 1280px (Galaxy tablets height)
 */
@media only screen and (max-width: 1279px) {
    /**
     * Colonnes
     */
    /* 5 deviennent 4 */
    .columns-container .column.one-fifth {
        flex-basis:calc(25% - 15px);
        max-width:calc(25% - 15px)
    }
}

/**
 * < 1200px (Laptops width)
 */
@media only screen and (max-width: 1199px) {
    /*
     * Colonnes
     */
    /* 5 et 4 deviennent 3 */
    .columns-container .column.one-fourth,
    .columns-container .column.one-fifth {
        flex-basis:calc(33.33333% - 13.33px);
        max-width:calc(33.33333% - 13.33px)
    }
    
    /* 3/4 devient 2/3 */
    .columns-container .column.three-fourths {
        flex-basis:calc(66.66667% - 6.66px);
        max-width:calc(66.66667% - 6.66px)
    }
}

/**
 * < 1024px (iPad height)
 */
@media only screen and (max-width: 1023px) {
    #menu {
        position: fixed;
        right: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: transparent;
        z-index: -2000;
        font-size: 20px;
        font-weight: 300;
        transition: background 0.3s ease-in-out, z-index 0s ease 0.3s;
        -webkit-transition: background 0.3s ease-in-out, z-index 0s ease 0.3s;
        -o-transition: background 0.3s ease-in-out, z-index 0s ease 0.3s;
    }
    #menu.active {
        z-index: 2000;
        background: rgba(0,0,0,0.6);
        transition: background 0.3s ease-in-out;
        -webkit-transition: background 0.3s ease-in-out;
        -o-transition: background 0.3s ease-in-out;
    }
    #menu ul {
        position: fixed;
        right: 0;
        top: 0;
        width: 300px;
        min-height: 100vh;
        padding: 70px 20px;
        background: white;
        text-align: left;
        transform: translateX(110%);
        -webkit-transform: translateX(110%);
        -ms-transform: translateX(110%);
        transition: .3s all ease-in-out;
        -webkit-transition: .3s all ease-in-out;
        -o-transition: .3s all ease-in-out;
    }
    #menu.active ul {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
    #menu ul li {
        display: block;
    }
    #icon-menu {
        display: block;
        color: #7A7A7A;
        background: white;
        position: fixed;
        z-index: 3000;
        top: 15px;
        right: 15px;
        font-family: icomoon;
        font-size: 30px;
        font-weight: 400;
        cursor: pointer;
        padding: 5px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        box-sizing: unset;
    }
    #icon-menu:hover {
        color: #3A3A3A;
    }
    #icon-menu:before {
        content: "\e5d2";
    }
    #icon-menu.close:before {
        content: "\e5cd";
    }
    #menu .sub-menu {
        opacity: 1;
        visibility: visible;
        position: relative;
        box-shadow: none;
        padding-left: 10px;
        display: contents;
    }
}

/**
 * < 906px (Nexus tablets height)
 */
@media only screen and (max-width: 905px) {
    /**
     * Colonnes
     */
    /* Toutes deviennent 2 */
    /* 3/4 et 2/3 deviennent 1/2 */
    .columns-container .column.one-third,
    .columns-container .column.one-fourth,
    .columns-container .column.one-fifth,
    .columns-container .column.three-fourths,
    .columns-container .column.two-thirds {
        flex-basis:calc(50% - 10px);
        max-width:calc(50% - 10px);
    }
}

/**
 * < 800px (Galaxy tablets width)
 */
@media only screen and (max-width: 799px) {
    /**
     * En-tête
     */
    #header {
        padding: 10px;
    }
    #header #title {
        font-size: 1.2em;
        margin-left: 0;
    }
    #header img {
        height: 20px;
    }
    
    /* Boutons de navigation dans le voyage */
    .title-button {
        position: relative;
        display: block;
        top: unset;
        right: unset;
        text-align: center;
        margin: 10px auto;
    }
    .title-button .trip-button {
        margin: 0 5px 10px 5px;
        padding: 5px 10px;
    }
    .title-button.tag-title {
        padding: 5px 10px;
        margin-bottom: 20px;
    }
    .title-button + h1 {
        padding-right: 0 !important;
    }
    
    /* Tableaux */
    table .hide {
        display: none;
    }
    
    /* Diaporama photos */
    #picture-lightbox {
        padding: 0;
    }
    #picture-lightbox .previous-picture,
    #picture-lightbox .next-picture,
    #picture-lightbox .previous-picture .icon,
    #picture-lightbox .next-picture .icon {
        background: transparent;
    }
    #picture-lightbox .picture-container img {
        max-width: 100vw;
        max-height: 100vh;
    }
    #picture-lightbox .close-lightbox .icon:before,
    #picture-lightbox .previous-picture .icon:before,
    #picture-lightbox .next-picture .icon:before {
        background: rgba(0,0,0,0.6);
        border-radius: 4px;
    }
    #picture-lightbox .previous-picture .icon:before,
    #picture-lightbox .next-picture .icon:before {
        width: 50px;
    }
    #picture-lightbox .previous-picture .icon:before {
        left: 5px;
    }
    #picture-lightbox .next-picture .icon:before {
        right: 5px;
    }
    
    
}

/**
 * < 650px
 */
@media only screen and (max-width: 649px) {
    /**
     * Colonnes
     */
    /* Une seule colonne */
    .columns-container .column {
        max-width:100%!important;
        flex-basis:100%!important;
        margin-bottom:10px;
    }
    
    /* Header */
    #header {
        text-align: left;
    }
    
    /* Footer */
    #footer .two-thirds {
        display: none;
    }
    
    /* En-tête des articles */
    .article-header.article-info .title {
        font-size: 2em;
    }
    .article-header.article-info .bottom,
    .article-footer.article-info .bottom {
        font-size: 0.8em;
    }
    .article-footer.article-info .bottom.left {
        float: left;
    }
    
    /* Images des articles */
    .article-image.center,
    .article-image.right,
    .article-image.left {
        float: none;
        margin: 10px 0;
        max-width: none;
        width: 100%;
    }
    
    /* Formulaires */
    form fieldset > label > span,
    form label input[type=text],
    form label input[type=password],
    form label input[type=email],
    form label select,
    form label textarea {
        width: 100%;
    }
}