/*
      COULEURS

bleu       		 #0434A1
vert 			  #007A3D
rouge			#811020
noir			  #000000

//bleu clair 		#6a96d7
//degradé bleu #AAC4EB	 => jaune #fbdd97  
//jaune  			#fbdd97

 */

@font-face {
  	font-family: 'Oregon-Book';
  	src: url('../fonts/Oregon/Oregon-Book.ttf') format('truetype');
}
@font-face {
  	font-family: 'Oregon-Bold';
  	src: url('../fonts/Oregon/Oregon-Bold.ttf') format('truetype');
}
@font-face {
  	font-family: 'Oregon-Black';
  	src: url('../fonts/Oregon/Oregon-Black.ttf') format('truetype');
}
@font-face {
  	font-family: 'Oregon-Light';
  	src: url('../fonts/Oregon/Oregon-Light.ttf') format('truetype');
}

@font-face {
  	font-family: 'Lato-Regular';
  	src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
}
@font-face {
  	font-family: 'Lato-Light';
  	src: url('../fonts/Lato/Lato-Light.ttf') format('truetype');
}
@font-face {
  	font-family: 'Lato-Bold';
  	src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
}

.spip-admin-bloc, .spip-admin-float { z-index: 20000!important;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
    background: #6a96d7;
    color: #fbdd97;
    text-shadow: none;
}
::selection {
    background: #6a96d7;
    color: #fbdd97;
    text-shadow: none;
}

/* A better looking default horizontal rule */
 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/** SCROLL UP   **/
a.scrollup{
	height:48px;
	width:48px;
	color:#0434A1!important;
	font-size:2em;
	text-align:center;
	text-decoration:none;
	position:fixed;
	bottom:30px;
	right:50px;
	z-index:9999;
	opacity:0.5;
	background-color: antiquewhite;
}
a.scrollup:hover{
	opacity:1;
	color:#0434A1;
}

/* Images */
.overflow-image {
    margin-top: -65px;
}
.spip_logo {float:none;}
.img-com {
    position:relative;
    width:100%;
}
.img-centered {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
 /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440  */
 img {
    vertical-align: middle;
}   
/*
 * Allow only vertical resizing of textareas.
 */
 textarea {
    resize: vertical;
}


/* ======================================================================
   General styles
====================================================================== */
html, body {
    height: 100%;
}

.modal-header {
	background: #811020;
}
.modal-header h4 {
	color: white;
}
.modal-footer {
	background: #2b2b2b;
}

/* =========================
         NAVBAR
========================== */
#navbarContent {
    background-color: #007A3D;
    margin:-29px -12px;
    padding: 20px
}
.navbar {
    background-color: #007A3D;
    border-bottom:.25em #007A3D ridge;
    max-height:80px;
}
.navbar-brand {
    
}
.navbar-toggler {
    border-color: #007A3D;
    border: 0px solid #007A3D;
    margin:0 50px 0;
}
.nav-item-lang{
    margin:.80em 10px 0;
}
a.nav-link{
	margin:0;
    font-size: 1.5em;
	font-family: 'Oregon-Bold';
    color:#811020;
	background-color:#FFF;
	padding:5px;
	border-radius: 5px;
}
a:hover.nav-link{
    color:#007A3D;
}
li.nav-item.artSympo {
	padding : 0 0 0 10px;
	font-size: 1.3em;
	text-decoration: none!important;
}
li.nav-item.artSympo a {
	text-decoration: none!important;
}
li.nav-item.artSympo a:hover {
	    color:#007A3D;
	font-weight: bold;
}
/* =========================
   Paragraph & Typographic
========================= */
html,button,input,select,textarea {
    color: #222;
}
body {
    font-family: 'Lato-Light';
    font-weight: 300;
    font-size: 16px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Oregon-Book";
    color: #333;
}

hr {
    position: relative;
    border: none;
}
hr:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #ccc;
}

a img {
    /*background: white;*/
}
.odd a img {
    background: #f5f5f5;
}

p {
    font-size: 2em;
    line-height: 2em;
    margin-bottom: 25px;
}

.centered {
    text-align: center;
}
.paragraph-lead {
    font-size: 20px;
    color: #811020;
}

strong {
    font-weight: 700;
}
em {
    font-weight: 300;
}
pre {
    background: #ebebeb;
    border: none;
    font-family: "Monaco";
    font-size: 16px;
    color: #666;
    padding: 20px;
    line-height: 28px;
}
small {
    font-size: 12px;
}

blockquote, blockquote p {
    line-height: 28px;
    color: #999;
    font-weight: 300;
    font-style: italic;
}
blockquote {
    position: relative;
    margin: 0 0 40px -30px;
    padding-left: 30px;
    border-left: 5px solid #811020;
}
blockquote cite {
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 12px;
    font-style: italic;
    color: #333;
    font-weight: 300;
}
blockquote cite:before {
    content: "-- "
}

/*         L I E N S       */
a {
    color: #811020;
    word-wrap: break-word;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover, a:focus {
    color: #2257a7;
    text-decoration: none;
    outline: 0;
}
a:before, a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.divers{
    text-align: center;
}
.divers a:hover, .divers a:focus {
  color: #2257a7
}

/*         T A B L E S       */
.table.spip {font-size: 1.4em;}
.table.spip td{
	border:none;
}
/*         T A B L E S    2   C O L O N N E S    */
.container-2colonnes p {
	font-size: 1.2em;
}
/* =======================================================================
             S E C T I O N S   ACCUEIL et PAGES
======================================================================= */
section {
    padding:0 0 3em 0;
}
section h1 {
   text-align: center;
}
section h2 {
   text-align: center;
   font-size: 3em;
   margin:0 0 1em;
}
section h3 {
   text-align: center;
   font-size: 2em;
   margin:0 0;
}
section p {
    font-size: 1.4em;
    line-height: 1.5em;
}

section.separateur {
    background-repeat: no-repeat; 
    background-size: cover;
    background-attachment: fixed;
    background-position:  50% center;
}
section#sep_tour {
    min-height: 480px;
}
section#sep_ND {
     min-height: 420px;
}
section#sep_mosquee {
    min-height: 480px;
}
section#sep_metro  {
    min-height: 420px;
}
section#sep_souk  {
    min-height: 420px;
}
section#sep_pieton {
    min-height: 720px;
}


section.bienvenue {
	
}
section.resumes{
	background-color:aliceblue;
    padding:0 4em;
}
section.inscription{
	background-color:honeydew;
    padding:0 4em;
	font-size:1.2em;
}

#header {	    
    background-repeat: no-repeat; 
    background-size: contain;
    background-attachment: fixed;
    background-attachment: relative;
    background-position:  60% center;
    height: 100vh;
	width: 100%;
	margin-top: 60px;
    text-align: center;
}
#header h1 {
	color:#2257a7;
	margin-top: 1em;
    font-size: 2.5em;
    letter-spacing: .1em;
	font-weight: bold;
	text-shadow: 2px 2px 2px #DDD;
    line-height:1em;
    position:absolute;
    top: 85%;
    left:15%;
}
#header h2 {
	color:#2257a7;
	font-size: 4em;
    line-height:1em;
    position:absolute;
    top: 85%;
    left:15%;
}
#header #date{
    position:absolute;
    top: 60%;
    left:5%;
    font-size: 3em;
    font-weight:bold
}
#header p {
	color:#2257a7;
	font-size: 2em;
    padding: 0 4em;
}

section#welcome {
	
}

section#invite  {
    padding: 2em 0 8em;
    color:#2257a7;
}
section#invite h2 {
    color:#2257a7;
	font-size: 3em;
    line-height:1.2em;
    padding : .4em;
}
section#invite p {
	font-size: 1.4em;
    line-height:1.2em;
}
section#invite .fd_blanc { 
	max-height: 320px;
	overflow: scroll;
	
    background-color:#FFF;
    padding: 1em 2em 0 2em;
    margin: 0 auto;
    width:80%;
    border-radius:20px;
    border: #000 1px solid;
    text-align: justify;
    opacity:90%;
}


section#comites  {
    padding: 6em;
}
section#comites p {
  	font-size: 1.2em;
    padding:0;
    line-height:1.2em;
    overflow-wrap: normal;
    text-align: center!important; 
}
section#comites img {
	max-height:200px;
}


section#thanks {
    padding:1em 0;
    background-repeat: no-repeat; 
    background-size: contain;
    background-attachment: scroll;
    background-position: center;
}
section#thanks .container-fluid {  
    background-color:rgba(255,255,255,0.7);
}
#thanks h1 {
 font-size: 3.5em;
     margin:0 0 1em 0;
}
#thanks h5, #thanks p {
    font-family: Oregon-Bold;
  	font-size: 1.8em;
    padding: 0 2em;
    line-height:1.2em;
    text-align: center;
}



/* ==========================================================================
   PAGES Sections
   ========================================================================== */
#header_rubrique, #header_article {
    margin:120px 0 0 0;
    background-repeat: no-repeat; 
    background-size: contain;
    background-attachment: relative;
    background-position:   center;
    border-bottom: #000 ridge 4px;
    height: 180px;
}

/*   RUBRIQUE TUILES   */
#section-rubrique,#section-article {
    margin: 3em 0;
    text-align: center;
}
.tuiles_articles {
    border: 2px #2257a7 solid;
    background-color:bisque; 
    padding: 10px 20px;
}
.tuiles_articles h2 {
    font-size:1.5em;
    font-weight: bold;
    margin:10px 0 ;
    text-align: center;
}
.tuiles_articles p {
    text-align: justify;
    font-size:1.2em;
    line-height:1.1em;
}
  
/*   RUBRIQUE DIVERS   */
#section-article-divers h3 {
    font-size:1.8em;
    font-weight: bold;
    margin-top:40px;
    margin-bottom:10px;
    text-align: left;
}
#section-article-divers p {
    text-align: justify;
    font-size:1.3em;
    line-height:1.2em;  
    margin:0 0 20px 20px;  
}
#section-article-divers .menu a{
    font-size:1.4em;
    text-decoration: none; 
}

/*   COPYRIGHT   */
.copyright-section {
    background-color:#111;
    color:#FFF;
    padding-top: 4em;
	padding-bottom: 4em;
}
.copyright-section a{
    font-family: 'Oregon-Book';
}
.copyright-section a:hover{
     color:#FFF;
}


/* ==========================================================================
   Box Sections
   ========================================================================== */

.white h1 {
	padding-top: 35px;
}
.white p {
	padding-top: 25px;
}


/* ==========================================================================
   Services Section
   ========================================================================== */
.service-trigger {
    display: block;
	position: relative;
    margin-bottom: 15px;
    color: white;
    font-size: 20px;
    text-align: center;
    height: 168px;
    cursor: pointer;
	padding: 90px 20px 50px 20px;
    border: none;
    background: #333;
}
.service-trigger:before {
    width: 100%;
    top: 50px;
    color: #811020;
    font-size: 36px;
    text-align: center;
	position: absolute;
	left: 0;
}
.service-active .service-trigger {
    background: #222;
}
.service-active p {
	font-family: 'Lato', sans-serif;
	padding-top: 10px;
}
.service-content {
    padding: 15px 20px;
    background: #e6eaed;
    display: block;
    height: auto
}
.service-content p:last-child {
    margin: 0;
}


/* ==========================================================================
   Image Mask
   ========================================================================== */
.grid figure {
	margin: 0;
	position: relative;
}
.grid figure img {
	width: 100%;
	display: block;
	position: relative;
}
.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	color: #fff;
	background: #811020;
}
.grid figcaption h5 {
	margin: 0;
	padding-top: 0px;
	padding-left: 20px;
	padding-bottom: 5px;
	color: #fff;
	font-weight: 700;
	text-align: left;
	letter-spacing: 2px;
	
}
.grid figcaption a {
	text-align: left;
	padding: 5px 10px;
	margin-left: 20px;
	display: inline-block;
	background: #2f2f2f;
	color: #fff;
	font-size: 13px;
}

/* Caption Style */
.mask figure {
	overflow: hidden;
}
.mask figure img {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}
.no-touch .mask figure:hover img,
.mask figure.cs-hover img {
	-webkit-transform: translateY(-30px);
	-moz-transform: translateY(-30px);
	-ms-transform: translateY(-30px);
	transform: translateY(-30px);
}
.mask figcaption {
	height: 50px;
	width: 100%;
	top: auto;
	bottom: 0;
	opacity: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .mask figure:hover figcaption,
.mask figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}
.mask figcaption a {
	position: absolute;
	top:10px;
	bottom: 10px;
	right: 30px;
}


/* ==========================================================================
   Blog Section
   ========================================================================== */
.blog-bg {
	background: #2b2b2b;
	padding-right: 0px;
	padding-left: 0px;
	
}
.blog-bg h4 {
	color: #dadada;
	padding-top: 0px;
}
.blog-bg h5 {
	color: #dadada;
	font-size: 11px;
}
.blog-content {
	padding-top: 10px;
	background: #f2f2f2;
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
/*
@media screen and (max-width:1050px), screen and (max-device-width:1050px){
	/*body .header{background-attachment: scroll;}
}
*/

@media screen and (max-width:1500px) {
    #header h2 {
        font-size: 3em;
        line-height:1.2em;
    }
}
@media screen and (max-width:1400px) {
   #invite p {
	    font-size: 1.6em;
        padding: 0 2em;
        line-height:1.2em;
    } 
}
@media screen and (max-width:1024px), screen and (max-device-width:1024px){
 	#header h1 { 
    	display:none;
	}
    #header h2 {
        font-size: 3em;
        line-height:1.2em;
    }
    #header #date{
        position:relative;
        font-size: 2em;
    }
}
@media screen and (max-width:1024px) {
    section#header {	    
        background-attachment: scroll;
        background-position:  center;
        background-size: cover;
        height: 420px;
        margin-top: 100px;
        padding: 1.8em 0 0;
    }

    section.separateur {
        background-size: cover;
        background-position: center ;
        background-attachment:scroll; 
    }
    section#sep_tour{
        display:none;
    }
    #header h2 {
        font-size: 2em;
		margin:0;
    }
    #welcome h2, #comites h2{
       font-size: 2.5em; 
    }
    #welcome p,#comites p  {
        color:#2257a7;
	    font-size: 1.3em;
        padding: 0 .5em;
        line-height:1.2em;
    } 
    #comites p {
	     color:#000;
    } 
    section#invite p {
        font-size: 1.2em;
   }
}

/* ipad portrait */
@media  screen and (min-device-width:720px) and (max-device-width : 1024px){
	section#header{
        background-attachment: scroll;
    }
    section#sep_tour{
        display:none;
    }
    section.separateur {
        background-size: cover;
        background-position: center ;
        background-attachment:scroll; 
    }
} 


@media screen and (max-width:567px){
    section#invite p {
	    font-size: 1.1em!important;
    }
    #header h2 {
        font-size: 2.2em;
        position:relative;
        top: 0%;
        left:0%;
        text-align: center;
    }
    

}