/*
Theme Name: EnactingTheCommons2
Author: Basile Jesset

Description: Refonte complète du thème Enacting the Commons à partir d'un dérivé du thème Surfurama
Version: 3.1
License: GNU General Public License v2.0
Tags: post-formats

*/

/******************************************************************/
@import url(https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i);

/******************************************************************
RESET STYLES
******************************************************************/
/* general reset */
html, body, div, span, object, embed, ruby, output, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video { 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
    font-family: 'Lato', sans-serif;
}






/*                  GENERAL                 */

body{
    position: relative;
    overflow-x: hidden;
    margin-bottom: 30px;
}

#grand_fond{
    margin: 12px;
    width: 100% - 12px;
}

img{
    display: block;
    width: 100%;
    height: auto;
}

a{
    color: inherit;
    text-decoration: none;
}

p{
    margin-bottom: 20px;
}









/*                  HEADER                 */

#main_header{
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 70px;
    align-items: flex-start;
}

#intitule{
    margin: 0.2rem;
    width: 30%; 
}

#sous_titre{
    width: 80%;
    padding: 10px;
    border-top: 0;
}

.ensemble_menu{
    height: auto;
    width: 55%;
    display: none;
    flex-wrap: wrap;
    align-items: flex-start;
}

.menu_general{
    padding: 1vmax;
    padding-top: 0.8vmax;
    cursor: pointer;
    margin: 0.2rem;
}

.apparait_index{
    display: none;
}

#language{
    position: absolute;
    top: 0;
    right: 0px;
}





/*                  DESTINATION                 */


#ensemble_destination{ 
    width: 99.5%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 100px;
/*    justify-content: space-between;*/
}

.ensemblecol{
    position: relative;
    box-sizing: border-box;
    margin-right: 6px;
    width: 24.2%;
}

.imagecol{
    position: relative;
    height: 300px;
    width: 100%;
    background-color: blue;
    overflow: hidden;
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}

.imagecol img{
    height: 120%;
    width: auto;
}

.textcol{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: white;
}




.imagecol img{
    filter: grayscale(100%);
    mix-blend-mode: lighten;
}

@supports not (mix-blend-mode: lighten) {
    .imagecol img{
      opacity: 50%;
    }
}










/*                  PAGE                 */

.bloc_page{
    position: relative;
    margin: 0.2rem 0.2rem 50px 0.2rem;
    width: 80%;
    padding-bottom: 50px;
}

.interieur_page{
    overflow: hidden;
    width: 80%;
    margin: 50px;
    color: black;
}

.interieur_page a{
    text-decoration: underline;
}

#retour_fin_page{
    position: absolute;
    bottom: 20px;
    right: 25px;
}








/*                  LOGO PARTENAIRES                 */

#logo_partenaire{
    width: 40vw;
    float: right;
    margin: 0 0 30px 0;
}






/*                  MEDIA QUERIES                                            */
/*                  (adaptation sur des écrans plus petits)                  */

@media screen and (max-width: 1000px){
    
    #intitule{
        width: 40%; 
    }
    
    .ensemble_menu{
        width: 40%;
    }
    
    #sous_titre{
        width: 80%;
        padding: 10px;
        border-top: 0;
    }
    
    .ensemblecol{
        width: 49%;
        margin-right: 5px;
    }
    

}



@media screen and (max-width: 600px){
    
 
    
    #main_header{
        width: 95%;
        position: relative;
        display: inline-block;
    }
    
    #intitule{
        width: 60%; 
    }
    
   #logo_partenaire{
        width: 60vw;
    } 
     
    .ensemble_menu{
        width: 95%;
    }
    
    .menu_general{
        padding: 10px;
        padding-top: 8px;
        cursor: pointer;
        margin: 0.2rem;
    }
    
   #ensemble_destination{ 
        width: 100% - 15px;
    }
    
    
    .ensemblecol{
        width: 100%;
    }
    
    
    .bloc_page{
        width: 90%;
    }
}












/*                  MODIF POUR LA 27                 */



/* COULEUR PRINCIPALES
    Ne changer que les couleurs */

.type_principal{
    color: #992153;
    border: 0.1rem #992153 solid;
    background-color: white;
}

.ensemblecol{
    margin-bottom: 20px;
    color: #992153;
    border: 0.1rem #00cc99 solid;
    background-color: white; 
}

.imagecol{
    border-color: #992153;
}






/* STYLE DE TEXTE
    Uniquement pour changer la taille des textes des articles et des pages */


.titre_page{
    font-size: 32px; /* for IE8 */
	font-size: 2rem; 
	line-height: 32px; /* for IE8 */
	line-height: 2rem;
    margin-bottom: 40px;
}


h1, .h1 {
	font-size: 32px; /* for IE8 */
	font-size: 2rem; 
	line-height: 32px; /* for IE8 */
	line-height: 2rem;
}

h2, .h2 { 
	font-size: 24px; /* for IE8 */
	font-size: 1.5rem; 
	line-height: 28px; /* for IE8 */
	line-height: 1.75rem;
}

h3, .h3 { 
	font-size: 19px; /* for IE8 */
	font-size: 1.2rem; 
	line-height: 24px; /* for IE8 */
	line-height: 1.5rem;
}

h4, .h4 { 
	font-size: 16px; /* for IE8 */
	font-size: 1.05rem; 
	line-height: 19px; /* for IE8 */
	line-height: 1.2rem;
}

h5, .h5 { 
	font-size: 13px; /* for IE8 */
	font-size: 0.846rem; 
	line-height: 33px; /* for IE8 */
	line-height: 2.09rem; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
}

h6, .h6 { 
	font-size: 12px; /* for IE8 */
	font-size: 0.75rem; 
	line-height: 30px; /* for IE8 */
	line-height: 1.85rem; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
}