/*
Theme Name: Arches Paper
Description: Rien de mieux que le papier d'Arches pour des articles lumineux.
Author: Hugues Tavernier
Author URI: http://huguestavernier.com
Version: 2017
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arches-paper
*/


/*
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
/* --------------------------------------------- */

.clear{height:1px;clear:both;margin:0!important;padding:0}


body{background-image:url(img/fond_papier.jpg)}
/*body > div {padding-left:10px; padding-right: 10px;}*/

#header, #footer, #content { padding-left: 10px; padding-right: 10px; }

/* Header & Footer */
#wrap-header::before, #wrap-footer::before { display: block; height:15px; background-image:url(img/header-top.jpg);background-position:center top; content:"";}
#wrap-header::after, #wrap-footer::after { display: block; height:15px; background-image:url(img/header-bottom.jpg);background-position:center top; content:"";}
    #header, #footer {margin:0 auto;max-width:1220px; padding-top: 15px; padding-bottom: 15px;}
    
        #header .hgroup{float:left;}
            #header h1{font-size: 4em;}
            #header h2{text-indent:100px}
        #header nav {float: right;}
            #header li{display:inline-block;width:126px;margin:0 15px}
            #header li:first-child{margin-left:0}
            #header li:last-child{margin-right:0}
            #header a:active,#header a:focus{outline:none}    


        @media (max-width: 1150px) {
            #header .hgroup, #header nav {float: none; text-align: center;}
            #header .hgroup {margin-bottom: 5px;}
                #header h1{display: none;}
                #header h2{font-size: 3em;text-indent:0px;}
                #header h2 a{ color: black;}
                
            #header li{width:auto; margin-top: 10px; margin-bottom: 10px;}
            .menu-item a img.menu-image{display: none !important;}
        }   
        @media (max-width: 600px) {
            #header nav { max-width: 400px; margin: 0 auto;}
            #header-menu li{margin-left: 10px; margin-right: 10px;}
        }
        
        #footer { flex-flow: row wrap; -webkit-flex-flow: row wrap;justify-content: center;
            display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;}
            #footer > div {margin: 0px 15px;min-width: 170px;
                flex: 1;-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;}

                ul.page-numbers {text-align: center; }
                ul.page-numbers li {display: inline-block;}
                ul.page-numbers li .page-numbers {display: inline-block; padding: 3px 10px; background-color: white;}
    
            
/* Content */    

#content {padding-bottom: 50px;}
    #widget-before-content {max-width:1220px; margin: 0 auto; }

    #content p.date{position:absolute;top:5px;right:5px;margin:0;}
    
    #content p { margin: 15px 0;}
    @media (max-width:420px) { img.size-medium, img.size-large {width:calc(100vw - 120px); height: auto;}}

    






    
    .grid {margin: 0 auto; }
        @media (min-width:420px) { .grid {width: 400px;}}
        @media (min-width:920px) { .grid {width: 900px;}}        
        @media (min-width:1420px) { .grid {width: 1400px;}}        
        @media (min-width:1920px) { .grid {width: 1900px;}}        
        @media (min-width:2420px) { .grid {width: 2400px;}}        

        .grid-item { width: 400px; margin:0 0 100px 0; box-sizing: border-box;}
        .grid-item--width2 { width: 900px;}
        .grid-item--width3 { width: 1400px;}
        
            @media (max-width:1420px) { .grid-item--width3 {width: 900px;}}
            @media (max-width:920px) { .grid-item--width3, .grid-item--width2 {width: 400px;} img.size-large {width: 300px; height: auto;}}
            @media (max-width:420px) { .grid-item, .grid-item--width2, .grid-item--width3 {width:calc(100vw - 20px);}}



.posts {max-width: 1450px;margin: 0 auto;} 
    .posts.no-grid .post {margin:20px 0;}       



    #lightweight-contact-form { max-width: 700px; margin: 0 auto;}

        

        

     



        /* Menu item image */
        .menu-item a {outline: none;}
        .menu-item a:hover img{border:1px solid #000}
        .menu-item a img{border:1px gray solid;box-shadow:none;vertical-align:middle;width:auto;display:inline}
        .menu-item a.menu-image-hovered img.hovered-image,.menu-item a.menu-image-hovered:hover img.menu-image{
            opacity:0;transition:opacity .25s ease-in-out 0}
        .menu-item a.menu-image-hovered{position:relative}
        .menu-item a.menu-image-hovered img.hovered-image{position:absolute;margin-left:0!important;left:0}
        .menu-item a.menu-image-hovered:hover img.hovered-image{opacity:1}
        .menu-item a.menu-image-title-after.menu-image-not-hovered img,
          .menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper{margin-right:10px}
        .menu-item a.menu-image-title-before.menu-image-not-hovered img,
          .menu-item a.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper{margin-left:10px}
        .menu-item a.menu-image-title-above,.menu-item a.menu-image-title-below{text-align:center; }
        .menu-item a.menu-image-title-above.menu-image-not-hovered img,
          .menu-item a.menu-image-hovered.menu-image-title-above .menu-image-hover-wrapper{display:block;margin:0 auto}
        .menu-item a.menu-image-title-below.menu-image-not-hovered img,
          .menu-item a.menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper{display:block;margin:0 auto}
        .menu-item a.menu-image-title-hide .menu-image-title{display:none}
        img.hovered-image{opacity:1}






#home-image{margin:30px 10px 10px;}
 #home-image img {width:1200px;margin: 0 auto;display: block;}

#home-content {position: relative; padding-top: 1px;text-align: center;}
 
#home-content h1, #home-content h2{margin:20px 0px; }

#home-header-menu {position: static; width:auto;height:auto;float:none;text-align: center;}
 #home-header-menu li {display: inline-block; padding: 5px 15px;}
 #home-header-menu li:last-child { padding-right: 20px;}
 #home-header-menu li img {margin-bottom: 5px;}
#home-menu {}
         @media (max-width: 1240px) {
             #home-image img {width: calc(100% - 24px);}

        }  
         @media (max-width: 500px) {
             #home-image img {width: calc(100% - 24px);}
             #home-header-menu li {display: block; }
        }  




/***************************************************************************************************************************
***************   COLOR
***************************************************************************************************************************/

.enveloppe_mosaique a p{color:#fff}
#principal h1{color:#ccc}
h1{color:#313131}
.date{color:#bbb}
.fond_full_screen{background-color:#000}
.soustitre{color:#999}
.titre_noeud_mosaique{color:#fff}
.signature{color:#555}
.sous_menu_fullscreen{color:#ddd}
.formulaire_element ul{color:red}
.formulaire_element ul.apres_label{color:#000}
div.arbre_noeud ul{color:#000}

.alerte{color:#8b0000}
.nonPublie button{color:#8b0000}

/* --- */
.ariane{color:#daa520;text-shadow:0 0 0 #cd853f; font-style:italic;}
a {color:#7d7d7d}
a:hover {color:#222}
a .link-content {text-decoration: underline;}



/***************************************************************************************************************************
***************   STYLE
***************************************************************************************************************************/

@font-face{font-family:'champagne';src:url(fonts/champagne__limousines-webfont.eot);src:url(fonts/champagne__limousines-webfont.eot?#iefix) format("embedded-opentype"),url(fonts/champagne__limousines-webfont.woff) format("woff"),url(fonts/champagne__limousines-webfont.ttf) format("truetype"),url(fonts/champagne__limousines-webfont.svg#webfont) format("svg")}
body{font-family:"champagne","DejaVu Serif",Arial,sans-serif}
a{text-decoration:none}

#header-menu{font-size:1.5em}
#home-header-menu{font-size:2em}
h1{font-size:4em;font-weight:100;text-shadow:0 1px 1px #AAA}
#wrap-content h2{font-size:2em}
h3 {font-size: 1.5em; color: #444;}
#principal h1{font-size:5em}
#home_titre,#home-header-menu li{text-shadow:1px 1px 1px #aaa}
.soustitre{font-size:2em;font-weight:100}
#wrap-content h2,.soustitre, h3{margin-bottom:30px;text-shadow:0 1px 1px #AAA;text-align:center}
h4{font-size:1.1em;font-weight:400;font-style:italic}


li{list-style-type:none}
#front-page img,.post-content img{border-width:7px;border-style:solid;-moz-box-shadow:1px 1px 3px gray;box-shadow:1px 1px 3px gray;-webkit-box-shadow:1px 1px 3px gray;border-color:#f7f7f7}

.post-content p{margin:15px 0; font-size: 1.2em;}
.post-content img {margin: 15px 0;}
.post-content .wp-caption img {margin-bottom: 0px;}
.post-content .wp-caption-text{margin-top:5px;text-align:right}
.post-content .aligncenter {display: block;margin-left: auto;margin-right: auto;}
.post-content .alignright {float: right;margin: 1.5em 0 1.5em 3em;}
.post-content .alignleft {float: left;margin: 1.5em 3em 1.5em 0;}

@media (max-width:600px) {
    .post-content .alignright, .post-content .alignleft {float: none;margin: 1.5em auto; display: block;}    
}


.gallery-content {margin: 20px 0;}

.post-content blockquote{background:url(img/quotes1.png) no-repeat scroll 0 2px transparent;position: relative;float:left;padding:5px 5px 5px 30px}
.post-content blockquote::after{content:""; position: absolute; right: 0; width: 15px;
height: 12px;background:url(img/quotes2.png) no-repeat scroll right bottom transparent;margin:0;padding-right:24px}
blockquote p.date{text-align:right;margin-right:25px}









/* KENBURNS STYLES 
-------------------------------------------------------*/
/*  kenburns_slideshow is the wrapper div. 
Our list of Images scrolls inside of this frame
To compute the minimum frame size needed:;
image width * scale
image height * scale

if the image size is smaller than the frame size,
gaps may appear. If image sizes are exactly the same,
the images will fade over one another and not move. 
*/
.kenburns-slideshow {
	position: relative;

	height: 500px;
	background-color:#292929;

	z-index: 1;
	overflow: hidden;
        -moz-box-shadow:1px 1px 3px gray;box-shadow:1px 1px 3px gray;-webkit-box-shadow:1px 1px 3px gray;
}
#content .kenburns-slideshow img {border: 0; box-shadow: none;margin: 0;}
/*  The plugin wraps the images in div.kb-slide. This
allows me to run separate animations simultaneously. */
.kb-slide{
	position: absolute;
	z-index: 1;
	opacity: 0;
}


/* I used position relative here because IE8
didnt like the opacity when the img was set to absolute*
translate3d(000) kicks them into HW acceleration, and 
backface-visibility gives some performance boosts.*/
.kb-slide img{
	position: relative;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;

}




/* button éditer */


.edit-shortcut-wrap {
    position:absolute;
    width: 0px;
    height: 0px;
    top:-28px;
    right: 0px;
}
.edit-shortcut-wrap button {
    position:absolute;
    left:10px;
    width:30px;
    height:30px;
    line-height:1em;
    font-size:18px;
    z-index:5;
    background:#0085ba;
    -webkit-border-radius:50%;
    border-radius:50%;
    border:2px solid #fff;
    -webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);
    box-shadow:0 2px 1px rgba(46,68,83,.15);
    text-align:center;
    cursor:pointer;
    padding:1px;
}

.event .edit-shortcut-wrap button {
    left:-10px;
    top:-25px;
}

.video .edit-shortcut-wrap button {
    left:5px;
    top:-6px;
}
.translatedpage-nav .edit-shortcut-wrap button {
    margin: 0 20px 0 5px; position: static;
}

.edit-shortcut-wrap button svg {
    fill: #fff;
}


.edit-shortcut-wrap button:hover {
    background:#008ec2!important
}
.edit-shortcut-wrap button:focus {
    -webkit-box-shadow:0 0 0 2px #008ec2;
    box-shadow:0 0 0 2px #008ec2
}