/*
Theme Name: EAG
Theme URI: https://www.ensemble-a-gauche.ch
Author: Niels Wehrspann
Author URI: https://www.niels-wehrspann.com
Text Domain: eag
*/


@font-face {
  font-family: 'Trivia';
  src: url('fonts/TriviaGothicC3-Bold.eot') format('eot'),
	  url('fonts/TriviaGothicC3-Bold.ttf')  format('truetype'),
	  url('fonts/TriviaGothicC3-Bold.woff') format('woff'); 
	font-weight: bold;
}

* {box-sizing: border-box;}
body {background-color: #fff; font-family: 'Roboto', Helvetica Neue, Helvetica, sans-serif;  margin:0; padding:0; font-size:2vw; font-size:1.5vw; color:black; font-weight: 500;}

body, div {scroll-behavior: smooth;}
table {border-collapse: collapse;}

h1, h2, h3, h4 {font-family: Trivia, 'Trivia', Arial Narrow, sans-serif;}
h1 {font-size:6vw; font-weight: bold; line-height:0.8em; height:auto; padding:0; margin-top:0.2em; hyphens: manual; text-transform: uppercase; text-align:center;}
#titre {height:0px; width:0px; opacity:0; margin:0; padding:0;}
h2 {font-size:2em; font-weight: bold; line-height:0.8em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual; text-transform: uppercase;}
h3 {font-size:2em; font-weight: bold; line-height:0.75em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual; text-transform: uppercase;}

h4 {font-size:1.2em; line-height:1.2em; height:auto; padding:0; margin:0.2em 0 0; hyphens: manual; text-align: center; text-transform: uppercase;}
p {margin:0; padding:0; hyphens:manual;}
p b, p strong {font-size: 1.2em;}
.color_change_fill {fill:rgb(240,0,32); }
.color_change_color {color:rgb(240,0,32);}
.color_change_images {filter: hue-rotate(0deg) saturate(100%) grayscale(0%);}
.color_change_background {background-color:rgb(240,0,32); transition: all 2s;}
.has-drop-cap:not(:focus)::first-letter {font-family:Trivia, 'Trivia', Arial Narrow, sans-serif; font-size:3em;}

#anim_titre {width:100%; height:90vh; overflow: hidden;}
#anim_titre img {width:110%; height:105%; overflow: hidden; position: relative; left:-5%; top:-2%; }
#eag-slogan-titre {width:100%; height:100%;}

#header {margin:0; padding:0; width:100%; height:7vw; position:fixed; top:0; clear:both; background-color:white; z-index:200; transition: all 1s;}
#header::after {content:" ";}

#header_simple, #header_simple_subpages {position: fixed; top:0.4em; left:0; z-index:2; width:92vw; height:7vh; padding:0 1vw;}
#eag_header {margin:0; padding:0;}

.vert {color:#18b418;}
.rouge {color:#f00014;}
.violet {color:#5c00a0;}
.bleu {color:#0064c8;}

a {text-decoration: none; color:inherit;}
#nav a {color:white;}
a:visited, a:active {text-decoration: none;}
#topbar {width: -webkit-calc(100% - 5em); width: -moz-calc(100% - 5em); width:calc(100% - 5em); height:auto; z-index:2; position: fixed; top:0.9em; left:1.1vw; font-size: 0.75em; line-height:0.8em; visibility: visible;}
#topbar tr {margin:0; padding:0; width:100%;}
#topbar td {margin:0; padding: 0.2em; vertical-align: top; text-transform:uppercase;}
#bouton_menu {width:4vw; height:auto; position:fixed; right:0.7em; top:0.8em; z-index:30; cursor: pointer; margin:0; padding:0; fill:rgb(255,0,0); display: block;}
#bouton_menu:hover {width:4.4vw; right:0.6em; top:0.7em;}
#bouton_menu_close {width:0.8em; height:0.8em; display: inline; position:fixed; right:0.45em; top:0.4em; z-index:4; cursor: pointer; margin:0; padding:0; fill:rgb(255,255,255);}
#bouton_menu_close:hover {width:0.9em; height:0.9em; right:0.4em; top:0.35em;}
#bouton_top {width:2em; height:2em; display: block; position:fixed; left:1.5vw; bottom:1em; z-index:25; cursor: pointer;}
#bouton_top a:visited {}
#nav {z-index:31; position:fixed; top:0; left:0; width:100%; height:100%; display: none; font-size:6vh; line-height: 5vh; font-weight: bold; padding:2%; overflow:scroll; text-transform: uppercase; mix-blend-mode: luminosity; opacity: 0.7; font-family: Trivia, 'Trivia', Arial Narrow, sans-serif;}
nav ul {list-style-type: none; margin-left:0; padding:0;}
nav li {border-top: 0.15em solid white; margin-bottom:1em; padding-top:0.5vh;}
#top_menu {width:100%; height:90vh; overflow-y:auto; margin:0; padding:0;}
.current_page_item, .current-menu-item {opacity:0.5;}

.wp-block-image {margin:2em 0 2em 35vw; padding-right:3vw;}
.wp-block-image img {max-width:200%; width:100%; height:100%; object-fit: contain;}

.wp-video {width:100% !important; height:auto;}
.video { margin:1em 0 2em 0; border:3px solid #5bc5f2;}
#video {margin:3em 0 3em 0; padding:0;}
#video h2 {border-top: 0.8vw solid;}
.mejs-controls {background-color: #5bc5f2 !important;} 

#content {position:relative; clear:both; padding:2vh 1.3vw; z-index:20; margin:5vh 0; mix-blend-mode: darken;}
#intro_divider {display:block; z-index:20; position: relative; height:25vh;  margin:5vh 0;}
.intro, .accueil {margin:10em 0 4em 0;}
.intro h1, .intro h2, .accueil h2 {width:33vw; padding-right:2vw; float:left; font-size:3em; line-height:1em; text-align: left;}
.intro p:first-of-type {font-size:2.25vw; padding-top:0.5vh;}
.accueil .wp-block-pullquote {margin:0; padding:0;}
.intro p, .accueil p, .accueil ul, .accueil .wp-block-pullquote {width:60vw; margin-left:35vw; padding-right:2vw; margin-bottom:1em; }
.intro h4 {width:33vw; float:left; text-align:left; font-size:2em; line-height:1em; padding-top:0.2em;}
.intro div.wpcf7 {width:60vw; margin:0; padding:0;}

.accueil ul {list-style-type: none; font-weight: bold; font-size: 1.25em; margin-left:32vw;}
.accueil li:before {content:"→  \a0\a0\a0"; margin-left:-3vw; width:3vw;}
.accueil_image {display: block; width:96vw; height:80vh; padding:0; margin:1.2vw auto 0 auto; position: relative; clear: both; }
.accueil_image img {width:100%; height:100%; object-fit: cover; }
.accueil .wp-block-pullquote p {margin:0; color:white; font-weight: bold; font-size:1.25em;}
.wp-block-pullquote blockquote {margin:2em 0 0.5em 0; padding:0; text-transform: uppercase; height:2em;}
.intro .links {font-weight:bold; font-size:1.5em; line-height: 1em; font-family: Trivia, 'Trivia', Arial Narrow, sans-serif; text-transform: uppercase;}
.intro .links tr td {width:auto; vertical-align: top; padding-right:1em;}
.links a::after {content: "\0020\2197"; font-family: Arial Unicode MS, 'Arial Unicode MS', Arial, sans-serif;}
.intro .wp-block-table {width:62vw; margin-left:35vw; margin-bottom:1em;}
.intro .wp-block-table td {padding-right:2em;}

#content.page, #content.appel {margin:10em 0 25em 0;}
.page h4, .appel h2, .appel h3, .appel h4 {text-transform: uppercase; margin-top:2vh; width:33vw; float:left;}
.page h1 {margin-bottom:20vh;}
.page h2 {width:35vw; position: relative; margin:0; float:left;}
.page h3 {width: 60vw; float:right; margin:0 0 1vh 0; line-height:1em;}
.page ul {list-style-type: none;}
.page ul li::before {content:"\2192\2007";}
.page ul li {font-weight: bold; margin-bottom:1em; font-size:1.25em;}
.page p, .page ul, .page .wp-block-image {float:right; width:60vw; margin-bottom:1em;}
.page ul {padding-left:3em;} 
.wp-block-spacer {clear:both; position:relative; margin:3vh 0;}
.page h3:first-letter {padding: 0 1em 0 0; float:left; margin-bottom: 1em;}

.is-style-wide {height:2em; width:100%; clear:both; position: relative; border:0px solid;}
hr {border-bottom:0.5em solid black;}
.appel h1 {margin:2em 0;}
.appel h2, .appel h3, .appel h4 {width:51%; float:left; }
.appel p {width: 100%; margin:1em 0; font-size:1.25em; padding:0 2vw 0 1vw; }
.wpcf7 {width:45%; float:right; position: relative; right:1.1vw;}
.appel .wpcf7 p {width:100%; float:none;}
.appel blockquote p {padding:0; height:2em; margin:0; font-weight: bold; font-size:1.25em; width:100%; color:white;}
.appel .wp-block-pullquote {width:100%; height:auto; display: block; clear:both; margin:0; padding:0; background-color:red;}

.appel table {border-collapse: collapse; margin:2em 1.1vw; padding:0; display: block; vertical-align: top; width:100%; clear:both; position: relative;}
.appel table tr { vertical-align: top; height:auto;}
.initiale {border-top:0px; width:5%;}
.nom {border-top:0.1em solid black; width:15%;}
.prenom {border-top:0.1em solid black; width:15%;}
.profession {border-top:0.1em solid black; width:41%;}
.lieu {border-top:0.1em solid black; width:20%;}
.appel td {vertical-align: top; padding:0.1em 0.5em 0 0;}
#appel {border:1px solid; height:100%; color:white; padding:1em; margin:1em 0 2em 0;}

#captcha {margin-top:1em;}
span.wpcf7-not-valid-tip {color:white;}
#appel input {width:97%; height:3em; margin:1em;}
#appel label {width:auto; margin:0 0 0 1.5%; font-size:1em;}
#appel input.wpcf7-submit {font-size:1em; height:3em; margin:4% 0 0 1.5%; width:97%; padding:0; border:none; background-color: none; }
.your-message textarea {width:90%;}


.titre {margin-top:25vh; margin-left:1.1vw; margin-bottom:1em; font-size: 7.5vw; letter-spacing: -1px; }
#content_medias {margin:0 auto 4em auto; padding:4em 1.1vw 20em 1.1vw;  display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap; z-index:20; position: relative; justify-content: space-between;}
.medias {flex-basis: 100vw; flex-grow:1; padding:0 1em 2em 0; hyphens: manual;  color:black; margin-right:2vw; max-width:400px; position: relative;}
.medias a {}
.medias h3 {width:100%; margin-top:1em; font-size:2em;}
.medias h5 {width:50%; text-align:right; position:absolute; top:0; right:0; font-size:0.75em; font-weight: normal; margin: 0; padding: 0;}
.medias p {color:black; padding:1em 0; height:auto; }
.medias pre {font-family: 'Trivia', Trivia, sans-serif; position:absolute; top:0; left:0; height:1.5em; padding:0; margin:0; font-size:0.75em; text-transform: uppercase;}
#media_divider {width:100%; clear:both; background-color: white; margin:15vh 0 10vh 0; text-align:center; text-transform:uppercase;}

.arrow {width:2em;}
tr, td {vertical-align: top;}
td {padding-top:1em;}
.fleche_externe {font-size:1.5em; flex-basis: auto; text-align:right; }

#ccp {background:white; color:#5bc5f2; padding:2em 0.5em;}
#fb-page {text-align:center;}


#content_communiques {color:black; padding:0 1.1vw; position: relative; z-index:20;}
#content_communiques:first-child {margin-top:25vh;}
#content_communiques::after {content: "   "}
.spacer_communiques {border-top:0.8vh solid; margin-top:2em; clear:both;}
.date_communiques {width:20%; float:left; padding-top:0.3em;}
.communiques {width:77%; float:right; position: relative;}
.communiques h3 {margin-top:1.5em;}
.communiques p, #communique p  {margin-top:1em;}
#com {float:left; padding:0 1vw; margin-top:25vh;}
#date_communique {float:right; text-align:right; padding:1vw 0; margin-top:25vh;}
#communique {margin:2em 1.1vw; clear:both; position: relative;}
#communique h2 {width:35%; float:left; padding:1.5em 0.5em 1em 0;}
#communique p, #communique figure {width:62%; float:right; padding-right:1vw;}
.more-link {position: absolute; right:1.1vh; bottom:1vh; color:black; text-align:right; padding:0.1em;}
.back {width:100%; clear:both;}


#adresses {display:flex; flex-wrap:wrap; width:97vw; padding-left:1.2vw; position: relative; margin:10vh 0 2vh 0; z-index: 20;}
#adresses table {font-size:0.75em; width:23%; margin-right:2%;}
.adresses-col1 {width:16%;}
#adresses table td {padding:0 0 0.1em 0; margin:0; height:1.3em;}
#adresses a {padding:0 0 0.05em 0; margin:0;}
a:hover {color: rgb(255,0,0)}

#content::after {content: "\a0\a0\a0";} 
figcaption {display: none;}


/** candidat·e·s */
.intro_candidats {width:92vw; margin-left:2vw; font-size:1.5em; margin-top:7vh; margin-bottom:10vh; clear:both; display: block;}
#content_candidats h1 {width:100%; position: relative; margin: 15vh 0; text-align: center;}
#content_candidats, #content_axes, #content_revendications {margin-top:35vh;}
#grid_candidats {display:-ms-flexbox; display:-webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex; flex-wrap: wrap; width:97vw; margin-left:2vw; position: relative; margin-top:5vh;}
#grid_candidats .wp-block-image {width:100%; margin:0; padding:0;}

.candidat {padding:0 2vw 0 0; height: auto; margin:1.5vh 0; width:20%; position:relative;}
.candidat figcaption {display: block; font-size:1em; color:black; text-align: left; font-weight: bold; margin: 0.1em 0 0 0; text-transform: uppercase;}
.candidat ul {list-style-type: none; padding:0; margin:0;}
.candidat ul li {border-top: 0.1em solid; padding:0.1em 0;}

/** revendications **/
#content_axes h1, #content_revendications h1 {height:15vh;}
#intro_revendications {margin-bottom:10vh;}
#content_revendications p {padding-right:2em;}
#content_revendications h2 {float:left; width:33vw; text-align: center; font-size:6vw;}
.revendication {position:relative; height:auto; padding:0 1vw 0 ; margin:30vh 0 0 2vw; clear:both;}
#intro_revendications::after, .revendication::after {content:"   "; clear:both; position: relative; display: block; width:100%;}
.revendication ul {width:34vw; left:3vw; position: absolute; top:16em; left:0;}
.revendication {position:relative; height:auto; padding:0 1vw 0 ; margin:30vh 0 0 2vw; clear:both;}
.revendication h2 {width:34vw; margin-bottom:2em; text-align:center; font-size:6vw; padding:0 3vw; position: absolute; top:0; left:0;}
.revendication p {width:60vw; top:0vh; float:right; padding-right:2em;}
#content_revendications .revendication:nth-child(2) h2 {color:#5c00a0;}
#content_revendications .revendication:nth-child(3) h2 {color:#18b418;}
#content_revendications .revendication:nth-child(4) h2 {color:#f00014;}
.revendication .wp-block-image {width:60vw; height:auto; float:left; margin:0 0 3em 0; float:right;}
.revendication .wp-block-image img {width:100%; height:100%;}

.axe ul, .revendication ul {list-style: none; padding: 0;}
.axe ul li, .revendication ul li {padding-left: 2em; margin-bottom:1em;}
.axe ul li:before, .revendication ul li:before {content: "\2192"; display: inline-block; margin-left: -2em; width: 2em; font-weight: bold; font-family: Arial Unicode MS, 'Arial Unicode MS', Arial, sans-serif;}

/** axes **/
.axe {position:relative; height:auto; padding:0 1vw 0 ; margin:30vh 0 0 2vw; clear:both;}
.axe p {margin-top:1em;}
.axe h2 {width:60vw; margin-bottom:2em; text-align:center; font-size:6vw; padding:0 3vw;}
.axe .wp-block-image {width:60vw; height:auto; float:left; margin:1em 0 2em 0;}
.axe .wp-block-image img {width:100%; height:100%;}
#content_axes .axe:nth-child(2) h2 {color:#18b418;}
#content_axes .axe:nth-child(3) h2 {color:#5c00a0;}
#content_axes .axe:nth-child(4) h2 {color:#0064c8;}
#content_axes .axe:nth-child(5) h2 {color:#f00014;}
#content_axes .axe:nth-child(2) blockquote {background-color:#18b418;}
#content_axes .axe:nth-child(3) blockquote {background-color:#5c00a0;}
#content_axes .axe:nth-child(4) blockquote {background-color:#0064c8;}
#content_axes .axe:nth-child(5) blockquote {background-color:#f00014;}

.axe h2 span {position:absolute; left:0; color:black;}
.axe p {width:60vw; }
.axe ul {width:30vw; position:absolute; top:5vh; left:66vw;}
.axe .wp-block-pullquote {height:1em; width:30vw; margin:0;}
.axe .wp-block-pullquote blockquote { position:absolute; top:0.1em; left:66vw; margin:0;}
.axe .wp-block-pullquote blockquote p {width:30vw; color:white !important; margin:0.25em 0 0 0; font-size:1em;}
.axe figure.wp-block-pullquote {padding:0;}

.revendication .sfsi_plus_widget {position:absolute; bottom:0;}
.axe .sfsi_plus_widget {position:relative; bottom:0; clear:both; margin-top:2em;}
.axe .sfsi_plus_wicons:first-child {margin-left:0 !important;}


@media (max-width: 2600px) {
.candidat {width:25%;}
}
@media (max-width: 2000px) {
	.candidat {width:33%;}
}
@media (max-width: 1400px) {
	.candidat {width:50%;}
}
@media (max-width: 800px) {
	.candidat {width:100%;}
}


@media screen and (max-width:1024px) and (orientation:portrait) {
	body {font-size:4.5vw;}
	#anim_titre {height:80vh;}
	#header {height:10vw;}
	#header_simple, #header_simple_subpages {top:0.7em; left:0; z-index:2; width:88vw; }
		#header_lettrage svg {margin:0; padding:0; height:20vw;}
	#header_lettrage #eag_logos {height:auto;}
	
	#bouton_menu {width:6vw;}
	.intro, .accueil {margin: 5em 0 4em 0;}
	.intro h1, #content_candidats h1 {font-size:3em; text-align: center; margin:0 0 10vh 0;}
	.intro p:first-of-type {font-size:1.25em; padding-top:0.5vh;}
	.intro h1, intro h2, .accueil h2, #content_candidats h1 {width:90vw; margin-left:4vw;}
.intro p, .accueil p, .accueil ul {width:95vw; margin-left:1vw; padding-right:0; }
	.accueil .wp-block-pullquote {width:94vw; margin-left:1vw;}
.accueil ul {margin-left:1vw;}
.accueil li:before {content:"→  \a0\a0\a0"; margin-left:0; }
.accueil_image {display: block; width:96vw; height:70vh; margin:2vh 0;}
.accueil_image img {}
.accueil .wp-block-pullquote p {}
	.intro .wp-block-table {width:100%; margin:0;}
	.intro .links {font-size:1.5em; text-align: center; line-height: 0.75em;}
	.intro .links a::after {padding-top:3em;}
	.intro table td {font-size:0.75em;}
	.page p:first-of-type:first-letter {font-size:2.5em; padding:0 0.2em 0 0; float:left;}
	.page h1, h1 {font-size:4em;}
	.page h2 {text-align:center;}
	.page h3 {margin-top:1em; float:left;}
	.wp-block-spacer {margin:0;}
	.content.page {margin:5em 0 5em 0;}
	
.wp-block-pullquote blockquote {}
	.wp-block-image {margin-left:auto;}
.appel h2, .appel h3, .appel h4, .page h2, .page h3, .page h4 {width:95vw; margin-left:1vw; margin-bottom:1em;}
.appel p, .page p, .page ul, .page .wp-block-image {width: 95vw; margin-bottom:1em; margin-left:1vw; float:none;}
	
	.wpcf7 {width:96vw; float:left; margin-left:1vw;}
.appel .wpcf7 p {width:96vw; float:none; margin-left:1vw;}
.appel blockquote p {padding:0; height:2em; margin:0; font-weight: bold; font-size:1.25em; width:100%; color:white;}
	
.intro h4, h4 {width:95vw; float:left; text-align:left; font-size:2em; line-height:1em; padding-top:0.2em; margin:1em 0 1em 2vw;}
.intro div.wpcf7 {width:95vw; margin:1em 0 1em 2vw; padding:0; font-size:1.25em;}
span.wpcf7-not-valid-tip {color:white;}
#appel input {width:90%; height:3em; margin:1em;}
#appel label {width:auto; margin:0 0 0 1.5%; font-size:1em;}
#appel input.wpcf7-submit {font-size:1em; height:3em; margin:4% 0 0 1.5%; width:97%; padding:0; border:none; background-color: none; }
.your-message textarea {width:90%;}
	
	#content_revendications h2 {float:none; width:100%; font-size:3em; clear:both;}
	.revendication h2 {position:relative;}
	.revendication ul {position:relative; top:auto; margin-top: 3em; clear:both;}
	.revendication .wp-block-image, .axe .wp-block-image {margin:2em 0; width:98%; padding:0; height:45vh;}
	#intro_revendications .wp-block-image {margin:2em 1vw; width:97vw; padding:0; height:45vh;}
	.revendication .wp-block-image img, .axe .wp-block-image img, #intro_revendications .wp-block-image img {object-fit: cover;}
	
	.axe h2 {font-size:4em; width:100%; clear:both; padding:0 6vw; margin-bottom:1em;}
	.axe ul {width:100%; position: relative; margin:2em 0 0 0; padding:0 1em 0 0; left:0; top:0; clear:both;}
	.axe .wp-block-pullquote {width:100%;}
.axe .wp-block-pullquote blockquote { position:relative; top:0; left:0; margin:0;}
.axe .wp-block-pullquote blockquote p {width:100%; font-size:1.25em;}
	.axe p {width:100%;}
	
.signataires {width:100%; height:auto; font-size: 0.5em}
.initiale {border-top:0px; width:3vw;}
.nom {border-top:0.1em solid black; width:15vw;}
.prenom {border-top:0.1em solid black; width:15vw;}
.profession {border-top:0.1em solid black; width:41vw;}
.lieu {border-top:0.1em solid black; width:20vw;}
.appel td {vertical-align: top; padding:0.2em 0.2em 0 0;}
#appel {border:1px solid; height:100%; color:white; padding-top:1em; margin-bottom:2em;}
	
	#topbar {width: -webkit-calc(100% - 7em); width: -moz-calc(100% - 7em); width:calc(100% - 7em); font-size:2.5vw; top:2vw; }

	#intro {margin-top:20vh;}
	#content_medias {padding:4em 0.5em 20em 0.5em; flex-wrap: wrap; width:100%;}
	.medias {min-width:90%;}
	.medias p {font-size:0.8em;}
	
	.date_communiques {width:100%; float:none; clear:both; padding-top:0.5em;}
	.communiques {width:98%; float:none;}
	#com, #date_communique {font-size: 0.75em;}
	#com {float:left; padding:2em 0 0 0.5em;}
#date_communique {float:right; text-align:right; padding:2em 0.5em 0 0;}
#communique, #communique h2, #communique p, #communique figure {padding:1vw 0.5em; clear:both; width:100%; margin:1em 0;}
#communique h1 {font-size:2em;}
	
	
	#adresses table {width:47%; margin-bottom:2em;}
	
	.revendication .sfsi_plus_widget {position:relative; width:100%; clear:both; margin-top:2em;}
}