/* ############################################## */
/* ### GLOBAL */

:root {
	--primary-color: white;
	--secondary-color: #99ae95;
	--submenu-background-color: #2d2d2d;
	--footer-color: white;
	--footer-background-color: #2d2d2d;
	--background-color: #f4f2e9;
}
.tmpl_home{
	--primary-color: #ff5134;
	--secondary-color: #dab354;
	--submenu-background-color: #2d2d2d;
	--footer-color: white;
	--footer-background-color: #ff5134;
}
.tmpl_who{
	--primary-color: white;
	--secondary-color: #2d2d2d;
	--submenu-background-color: #dab354;
	--footer-color: white;
	--footer-background-color: #dab354;
}
.tmpl_festival{
	--primary-color: white;
	--secondary-color: #2d2d2d;
	--submenu-background-color: #99ae95;
	--footer-color: white;
	--footer-background-color: #99ae95;
}
.tmpl_support{
	--primary-color: white;
	--secondary-color: #2d2d2d;
	--submenu-background-color: #dab354;
	--footer-color: white;
	--footer-background-color: #dab354;
}
.tmpl_annual{
	--submenu-background-color: #ff5134;
	--secondary-color: #2d2d2d;
}
.tmpl_contact{
	--submenu-background-color: #ff5134;
	--secondary-color: #2d2d2d;
}
/*.tmpl_ecoagenda{

}*/
.tmpl_error{
	--primary-color: #ff5134;
	--footer-background-color: #ff5134;
}
header{
	background-image: url("../images/background.jpg");
}
.tmpl_home header{
	background-image: url("../images/headers/Home_Header.png");
}
.tmpl_who header{
	background-image: url("../images/headers/QuiSommeNous_Header.png");
}
.tmpl_festival header{
	background-image: url("../images/headers/Festival_Header.png");
}
.tmpl_support header{
	background-image: url("../images/headers/NousSoutenir_Header.png");
}
.tmpl_annual header{
	background-image: url("../images/headers/ActivitesAnnuelles_Header.png");
}
.tmpl_contact header{
	background-image: url("../images/headers/Contact_Header.png");
}
.tmpl_ecoagenda header{
	background-image: url("../images/headers/EcoAgenda_Header.png");
}
.tmpl_error header{
	background-image: url("../images/headers/Erreur404_Header.png");
}

@media only screen and (max-width: 800px){
	.tmpl_home header{
		background-image: url("../images/mobile_headers/Home_Header_Mobile.png");
	}
	.tmpl_who header{
		background-image: url("../images/mobile_headers/QuiSommesNous_Header_Mobile.png");
	}
	.tmpl_festival header{
		background-image: url("../images/mobile_headers/Festival_Header_Mobile.png");
	}
	.tmpl_support header{
		background-image: url("../images/mobile_headers/NousSoutenir_Header_Mobile.png");
	}
	.tmpl_annual header{
		background-image: url("../images/mobile_headers/ActivitesAnnuelles_Header_Mobile.png");
	}
	.tmpl_contact header{
		background-image: url("../images/mobile_headers/Contact_Header_Mobile.png");
	}
	.tmpl_ecoagenda header{
		background-image: url("../images/mobile_headers/EcoAgenda_Header_Mobile.png");
	}
}

.tmpl_error .ot_subtitle{
	margin-top: 150px;
	margin-bottom: 200px;
}
.tmpl_error .ot_subtitle h1{
	font-size: 62px;
	color: #ff5134;
}
.tmpl_error .ot_subtitle p{
	font-size: 22px;
}

@font-face {
  font-family: 'SpaceGrotesk';
  src: url('../webfonts/SpaceGrotesk-VariableFont_wght.ttf');
  font-weight: normal;
  font-style: normal;
}

body.objectifterre{
	font-family: "SpaceGrotesk";
	font-size: 24px;
	color: #2d2d2d;
    background-color: var(--background-color);
}

.content {
max-width: 1200px;
margin: 0px auto;
}


/* ############################################## */
/* ### TYPOGRAPHY */

h1 {
font-size: 2em;
padding-bottom : 0.5em;
}

h2 {
font-size: 1.8em;
padding-bottom : 0.5em;
}

h3 {
font-size: 1.5em;
padding-bottom : 0.5em;
}

h4 {
font-size: 1.3em;
padding-bottom : 0.5em;
}

h5 {
font-size: 1em;
padding-bottom : 0.5em;
}

h6 {
font-size: 0.8em;
padding-bottom : 0.5em;
}

p {
padding-bottom : 0.5em;
font-size: 0.8em;
}

.shrink-content {
padding : 0px 100px 0px 100px;
}

/* ############################################## */
/* ### HEADER */


header{
	/* background-image : see GLOBALS */
	background-size: 100% auto;
	background-attachment: fixed;
	background-position: top 0px right 0px;
	position: relative;
	min-height: 18vw;
	display: inline-block;
	width: 100%;
	padding-bottom: 0px!important; /* Because can have secondary menu wrapper */
}
.logocontainer{
	width: 12vw;
	height: 12vw;
	position: absolute;
	left: 3vw;
	bottom: calc(-6vw + 30px);
}

.logocontainer .logo{
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: unset;
	border-radius: 50%;
}

.logocontainer .logo svg{
	fill: var(--primary-color);
	height: 90%;
}

div.topheader{
	display: flex;
	flex-direction: row;
	position: relative;
    justify-content: flex-end;
}

div.topheader_right{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: 80%;
	height: 10vw;
}

div.topheader_right div.sharing{
	display: inline-flex;
	flex-direction: row;
	margin-top: 25px;
	color: var(--primary-color);
	font-weight: 900;
}


div.topheader_right div.sharing > *{
	border-radius: 20px;
	height: 40px;
	min-width: 30px; /* take into account padding */
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	margin-right: 15px;
}

div.topheader_right div.sharing .facebook svg {
	width: 20px;
	fill: var(--primary-color);
}

div.topheader_right div.sharing .instagram svg {
	width: 20px;
	fill: var(--primary-color);
}

div.topheader_right div.sharing .fairedon{
	border: 2px solid var(--primary-color);
	padding: 0 15px;
	font-size: 16px;
}
div.topheader_right div.sharing .fairedon a{
	color: var(--primary-color);
}

/* Primary menu */

div.topheader nav.primary{
	width: 100%;
	display: flex;
	align-items: end;
}


div.topheader nav.primary ul{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 60px;
}

div.topheader nav.primary ul a,
div.topheader nav.primary ul a:link,
div.topheader nav.primary ul a:visited,
div.topheader nav.primary ul a:active{
	color: white;
	font-size: 20px;
	font-weight: 900;
	text-decoration: none;
}
div.topheader nav.primary ul a:hover{
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

div.topheader nav.primary ul .current-menu-item a{
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

/* Secondary menu */

.ot_sec_menu_wrapper{
	background-color: var(--submenu-background-color);
	padding: 25px;
}

nav.secondary{
	text-align: center;
}

nav.secondary ul{
	display: inline-flex;
	align-items: center;
	height: 45px;
}

nav.secondary ul li{
	border: 3px solid var(--secondary-color);
	border-radius: 30px;
	padding: 5px 15px;
	margin: 0 10px;
}

nav.secondary ul li:hover{
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
}
nav.secondary ul li:hover a{
	color: var(--primary-color);
}

nav.secondary ul a,
nav.secondary ul a:link,
nav.secondary ul a:visited,
nav.secondary ul a:active{
	font-size: 18px;
	text-decoration: none;
	color: var(--secondary-color);
	font-weight: 900;
}
nav.secondary ul .current-menu-item a{
	color: var(--primary-color);
}
nav.secondary ul li.current-menu-item{
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
}

/* ############################################## */
/* ### CONTENT */

.content-container{
	margin-left: 0px;
	margin-right: 0px;
}

.content-container .content > *:first-child:not(.wp-block-cover){
	margin-top: 50px; 
}

article p{
	margin-bottom: 15px;
}

a,
a:link,
a:visited,
a:active{
	color: #ff5134;
	text-decoration: none;
}
a:hover{
	color: ff5134;
	text-decoration: underline;
}

.ot_subtitle{
	font-size: 56px;
	font-weight: 700;
	text-align: center;
	width: 50%;
	color: white;
	margin: 50px auto 100px auto;
}
.ot_subtitle p{
	margin-bottom: 30px;
}
.ot_subtitle a,
.ot_subtitle a:link,
.ot_subtitle a:visited,
.ot_subtitle a:active{
	font-size: 32px;
	font-weight: 900;
	border: 3px solid var(--secondary-color);
	color: var(--secondary-color);
	border-radius: 30px;
	padding: 5px 15px;
}
.ot_subtitle a:hover{
	text-decoration: none;
}

.ot_bottom_buttons{
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin: 30px 0px;
}

.ot_bottom_buttons a{
	font-size: 22px;
	font-weight: 900;
	border: 3px solid #2d2d2d;
	color: #2d2d2d;
	border-radius: 37px;
	padding: 10px 10px;
	min-width: 32px;
	text-align: center;
}
.content > .wp-block-cover{
	-webkit-transform: translateX(calc(-50vw + 600px));
	width: 100vw;
	padding: 0;
}
.content > .wp-block-cover:not(.has_columns){
	height: unset;
}
.content > .wp-block-cover a{
	font-size: 22px;
	font-weight: 900;
	border: 3px solid white;
	color: white;
	border-radius: 37px;
	padding: 10px 10px;
	min-width: 32px;
	text-align: center;
}
.wp-block-cover.has_columns > .wp-block-cover__inner-container{
    height: 100%;
}
.wp-block-cover > .wp-block-cover__inner-container:has(> p){
    background-color: blue;
}
.wp-block-cover .wp-block-columns .wp-block-cover__inner-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.wp-block-cover .wp-block-cover__inner-container p{
	font-size: 52px;
	font-weight: 900;
}
.wp-block-cover .wp-block-columns{
	height: 100%;
}
.wp-block-cover .wp-block-column{
	margin:0!important;
}
.wp-block-cover .wp-block-column img{
	width: 100%;
	height: 100%;
}

.ot_eco_agenda_table{
    border-collapse:collapse;
    margin-bottom: 30px;
}
.ot_eco_agenda_table td{
	padding: 10px;
}
.ot_eco_agenda_table tr:nth-child(4n), .ot_eco_agenda_table tr:nth-child(4n-1){
	background-color: rgba(0,0,0,0.05);
}
.ot_eco_agenda_table tr:nth-child(4n-2), .ot_eco_agenda_table tr:nth-child(4n-3){
	background-color: rgba(0,0,0,0.1);
}


/* ############################################## */
/* ### FOOTER */

.ot_footer{
	background-color: var(--footer-background-color);
	color: var(--footer-color);
	padding: 50px 0;
}

.ot_footer_main{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-around;
}
.ot_footer .ot_footer_main a {
	color: var(--footer-color);
}

.ot_footer_end{
	text-align: center;
}

.ot_editions_precedentes{
	text-align: center;
}

.ot_editions_precedentes a{
	color: var(--footer-color);
	font-size: 0.6em;
}


/* ############################################## */
/* ### RESPONSIVENESS */

#ot_mobile_menu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: calc(99999 + 1); /* To be above wordpress admin bar ...*/
	opacity: 0.9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
}
	
.ot_mobile_menu_cross{
	position: absolute;
	top: 2vw;
	right: 4vw;
	font-size: 60px;
	line-height: 60px;
}

.ot_mobile_menu_cross a{
	color: #2d2d2d;
}

.ot_mobile_menu_primary{
	text-align: center;
}

.ot_mobile_menu_primary a{
	color: #2d2d2d;
}


.ot_mobile_sharing{
	display: inline-flex;
	flex-direction: row;
	justify-content: space-around;
	color: #2d2d2d;
	font-weight: 900;
	margin-top: 30px;
	width: 100px;
}


.ot_mobile_sharing > *{
	border-radius: 20px;
	height: 40px;
	min-width: 30px; /* take into account padding */
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}

.ot_mobile_sharing .facebook svg {
	width: 20px;
	fill: #2d2d2d;
}

.ot_mobile_sharing .instagram svg {
	width: 20px;
	fill: #2d2d2d;
}

.ot_mobile_fairedon{
	color: #2d2d2d;
	border: 2px solid #2d2d2d;
	padding: 0 15px;
	border-radius: 20px;
	font-size: 16px;
	margin-top: 30px;
	display: inline-block;
	position: absolute;
	bottom: 5vh;
	left: 50vw;
	-webkit-transform: translateX(-50%);
}
.ot_mobile_fairedon a,
.ot_mobile_fairedon a:link,
.ot_mobile_fairedon a:visited,
.ot_mobile_fairedon a:active{
	color: #2d2d2d;
}


@media only screen and (max-width: 800px){
	.ot_mobile_menu_icon{
		display: block!important;
	}

	.ot_page_top_full{
		display: none!important;
	}
	.ot_page_top_mobile{
		display: inline-block!important;
	}

	div.topheader_right div.sharing > .facebook, div.topheader_right div.sharing > .instagram, div.topheader_right div.sharing > .fairedon{
		display: none;
	}
	
	div.topheader nav.primary{
		display: none;
	}
	
	header{
		background-size: cover;
	}
	
	.ot_subtitle{
		width: 90%;
		padding-top: 30px;
		font-size: 32px;
	}
	.ot_subtitle a,
	.ot_subtitle a:link,
	.ot_subtitle a:visited,
	.ot_subtitle a:active,
	.ot_subtitle a:hover{
		font-size: 22px;
	}
	
	.logocontainer{
		width: 80px;
		height: 80px;
		position: absolute;
		left: 2vw;
		top: 2vw;
	}
	
	.ot_mobile_menu_icon{
		font-size: 80px;
		line-height: 80px;
		position: absolute;
		right: 2vw;
		top: 2vw;
	}
	.ot_mobile_menu_icon a{
		color: var(--primary-color);
	}
	
	.content{
		width: 90%;
	}
	
	.ot_footer_main{
		flex-direction: column;
		width: 90%;
		margin: 0 auto;
	}
	
	.ot_footer_main > *{
		margin-bottom: 30px;
	}
	
	nav.secondary ul{
		flex-direction: column;
		height: unset;
	}
	nav.secondary ul li{
		width: 100%;
	}
	nav.secondary ul li:not(:last-child){
		margin-bottom: 10px;
	}
	
	h1 {
	font-size: 1.2em;
	padding-bottom : 0.2em;
	}

	h2 {
	font-size: 1em;
	padding-bottom : 0.2em;
	}

	h3 {
	font-size: 0.8em;
	padding-bottom : 0.2em;
	}

	h4, ul {
	font-size: 0.7em;
	padding-bottom : 0.2em;
	}

	h5 {
	font-size: 0.6em;
	padding-bottom : 0.2em;
	}

	h6 {
	font-size: 0.5em;
	padding-bottom : 0.2em;
	}

	p {
	font-size: 0.5em;
	padding-bottom : 0.2em;
	}
	
	.wp-block-columns{
		flex-direction: column;
		height: unset!important;
		margin: 0!important;
		padding: 0!important;
	}
	.wp-block-column{
		width: 100vw;
		margin: 0!important;
		padding: 0!important;
	}
	.wp-block-cover.has_columns > .wp-block-cover__inner-container{
		height: unset;
	}
	.wp-block-cover{
		height: unset!important;
	}
	
}

@media only screen and (max-width:1300px) and (min-width:801px){
	.content{
		width: 90%;
	}
}

@media only screen and (max-width:1200px){
	.content > .wp-block-cover{
		-webkit-transform: translateX(-5vw);
		width: 100vw;
	}
}


/* ############################################## */
/* ### HACKINESS */

.alignleft{
	float: unset;
}