/*!

Theme Name: abloc
Theme URI: https://www.abloc-webzine.org
Author: BDPNL
Author URI: https://www.bdpnl.fr
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: basewpsite
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

BaseWPSITE is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

*/


/**--------------------------------------------------------------------------------------**/
/**----------------------------------------------------------     MAX 1024px -------------**/
/**--------------------------------------------------------------------------------------**/

@media screen and (max-width: 1024px) {

    #wrapper-articles article.w25 {
        flex: 0 1 33.3%;
    }

    /* SINGLE */
    .single article.post #header-bottom {
        position: relative;
        max-width: 100%;
    }
    .single-post #content, 
    .search #content, 
    .page-home #content, 
    .archive #content {
        max-width: 100%;
        overflow: hidden;
        padding-left: 30px;
        padding-right: 30px;
    }
    p iframe {
        max-width: 100%;
        max-height: auto;
        transform: translateX(0%);
        left: 0%;
    }
    #content-related > .item:nth-child(5) {
        display: none; 
    }
    #content-related > .item.w20 {
        flex: 0 1 33.3%; 
    }
    .site-branding {
        width: calc( 100vw / 3);
    }
    .main-navigation {
        width: calc( 100vw / 1.5);
    }
}


/**--------------------------------------------------------------------------------------**/
/**----------------------------------------------------------     MAX 768px -------------**/
/**--------------------------------------------------------------------------------------**/

@media screen and (max-width: 768px) {

    figure.thumbnail-med{
        position: relative;
        display: block;
        margin: 0px;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
    figure.thumbnail-large{
        display: none;
    }

    .gallery-columns-2 .gallery-item {
        max-width: 49%;
        margin-right: 2%;
    }
    .gallery-columns-2 .gallery-item:nth-of-type(2n) {
        margin-right: 0em;
    }
    .gallery-columns-3 .gallery-item {
        max-width: 31.9%;
        margin-right: 2%;
    }
    .gallery-columns-3 .gallery-item:nth-of-type(3n) {
        margin-right: 0em;
    }
    .gallery-columns-4 .gallery-item {
        max-width: 49%;
        margin-right: 2%;
    }
    .gallery-columns-4 .gallery-item:nth-of-type(2n) {
        margin-right: 0em;
    }
    .gallery-columns-5 .gallery-item {
        max-width: 31.9%;
        margin-right: 2%;
    }
    .gallery-columns-5 .gallery-item:nth-of-type(3n) {
        margin-right: 0em;
    }
    .gallery-columns-6 .gallery-item {
        max-width: 31.9%;
        margin-right: 2%;
    }
    .gallery-columns-6 .gallery-item:nth-of-type(3n){
        margin-right: 0em;
    }
    .gallery-columns-7 .gallery-item {
        max-width: 14.28%;
    }
    .gallery-columns-8 .gallery-item {
        max-width: 12.5%;
    }
    .gallery-columns-9 .gallery-item {
        max-width: 11.11%;
    }

    h1 {
        font-size: 2.6em;
    }
    #wrapper-articles article.w25 {
        flex: 0 1 50%;
    }
    #content-related > .item:nth-child(4) {
        display: none; 
    }
    #content-related > .item.w20 {
        flex: 0 1 50%; 
    }

    /* MENU */

    header#masthead {
        flex-wrap: wrap;
    }
    .site-branding {
        width: calc( 100vw / 3);
    }
    #site-navigation{
        position: absolute;
        right: 0px; 
        top: 0px;
    }
    #site-navigation .menu-toggle{
        border-top: 0px;
        position: absolute;
        right: 26px;
        top: 26px;
        width: auto;
    }
    #site-navigation .menu-menu-principal-container{
        position: fixed;
        left: 0px; 
        right: 0px; 
        top: 0px; 
        bottom: 0px;
        z-index: 66;
        background: var(--main-color-1-B4);
        transform: scale(0.0);
    }
    #site-navigation.toggled .menu-menu-principal-container{
        transform: scale(1.0);
        transition: all 0.2s ease-in;
    }
    #site-navigation.toggled #primary-menu{
        display: flex;
        flex-direction: column;
    }
    .main-navigation a {
        font-size: 20px;
    }
    #category-menu {
        justify-content: space-between;
        padding: 8px 26px;
    }
    #category-menu .nav-links {
        margin-top: 8px;
    }
    ul#menu-menufooter {
        flex-wrap: wrap;
    }
    ul#menu-menufooter > li {
        flex: 0 1 20%;
        border-bottom: 1px solid var(--main-color-border);
    }

    /* SINGLE */

    .entry-title-768px{
        display: inline-block;
        flex: 0 1 100%;
        padding: 20px;
        line-height: 1.2;
        visibility: visible;
    }
    .single .entry-header.musique h1.entry-title{
        display: none;
    }
    .single .entry-header.musique {
        flex-wrap: wrap;
    }
    .single .entry-header.musique #header-left {
        flex: 0 1 50%;
    }
    .single .entry-header.musique img {
        flex: 0 1 50%;
    }

    .w20 { flex: 0 1 20%; }
    .w20-G { flex: 0 1 18%; margin: 0% 1% }
    .w25 { flex: 0 1 25%; }
    .w25-G { flex: 0 1 23%; margin: 0% 1% }
    .w30 { flex: 0 1 30%; }
    .w33 { flex: 0 1 33.3%; }
    .w33-G { flex: 0 1 31.3%; margin: 0% 1% }
    .w40 { flex: 0 1 40%; }
    .w50 { flex: 0 1 50%; }
    .w50-G { flex: 0 1 48.5%; margin-right: 3% } .w50-G:nth-of-type(2n) { margin-right: 0% }
    .w60 { flex: 0 1 60%; }
    .w66 { flex: 0 1 66.6%;}
    .w75 { flex: 0 1 75%; }
    .w80 { flex: 0 1 80%; }
    .w90 { flex: 0 1 90%; }
    .w100 { flex: 0 1 100%;}
}


/**--------------------------------------------------------------------------------------**/
/**----------------------------------------------------------     MAX 425 px -------------**/
/**--------------------------------------------------------------------------------------**/

@media screen and (max-width: 425px) {

    .gallery > .gallery-item{
        max-width: 100%!important;
    }

    blockquote:before {
        font-size: 3em;
    }
    blockquote {
        padding: 30px 30px 30px 3em;
    }

    #wrapper-articles article.w25 {
        flex: 0 1 100%;
    }
    ul#menu-menufooter > li {
        flex: 0 1 50%;
    }
    .site-branding {
        width: calc( 100vw / 1.5);
        padding: 30px 26px;
    }

    #category-menu {
        justify-content: flex-start;
    }

    /* SINGLE */

    #content-related {
        flex-wrap: wrap;
    }
    #content-related > .item.w20 {
        flex: 0 1 100%;
    }
    #content-related > .item.w20:nth-child(3) {
        display: none;
    }
    #relatedposts .content-title h2 {
        font-size: 2em;
    }
    .entry-title-768px {
        padding: 20px 20px 0px 20px;
    }
    .single .entry-header.musique img,
    .single .entry-header.musique #header-left {
        flex: 0 1 100%;
        padding-top: 0px;
    }
}