/*
Theme Name: Dei Lenk 2018
Author: Isamu Reuter - Reveib
Description: Site web sous wordpress pour présentation de la société "2018 Dei Lenk"
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*--Reset---------------------------------------------------------------------*/
body, header, footer, nav,
p, ul, ol, li,
h1, h2, h3, h4, h5, h6, 
form, input, textarea, fieldset, blockquote, 
section, article, aside,
dl, dt, dd, 
table, td, th, tr, 
button, div, span {margin: 0;padding: 0;font-size: 100%;box-sizing: border-box;}
table {border-collapse: collapse;border-spacing: 0}
ul, ol {list-style: none;}
img, fieldset {border: 0;}
hr {display: none;}
sup {vertical-align: super;font-size: .7em;line-height: .8em;}
sub {vertical-align: sub;font-size: .7em;line-height: .8em;}
address {font-style: normal;}
a, a:hover, a:visited, a:focus, a:active {text-decoration: none;box-sizing: border-box;outline: 0;}
button, button:hover, button:visited, button:focus, button:active {border: none;outline: none;cursor: pointer;}
input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;box-sizing: border-box;}

/*--Fonts---------------------------------------------------------------------*/
@font-face {
    font-family: 'Karbon';
    src: url('assets/fonts/Karbon-Light.eot');
    src: url('assets/fonts/Karbon-Light.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Karbon-Light.woff2') format('woff2'),
        url('assets/fonts/Karbon-Light.woff') format('woff'),
        url('assets/fonts/Karbon-Light.ttf') format('truetype'),
        url('assets/fonts/Karbon-Light.svg#Karbon-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Karbon';
    src: url('assets/fonts/Karbon-Regular.eot');
    src: url('assets/fonts/Karbon-Regular.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Karbon-Regular.woff2') format('woff2'),
        url('assets/fonts/Karbon-Regular.woff') format('woff'),
        url('assets/fonts/Karbon-Regular.ttf') format('truetype'),
        url('assets/fonts/Karbon-Regular.svg#Karbon-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Karbon';
    src: url('assets/fonts/Karbon-RegularItalic.eot');
    src: url('assets/fonts/Karbon-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Karbon-RegularItalic.woff2') format('woff2'),
        url('assets/fonts/Karbon-RegularItalic.woff') format('woff'),
        url('assets/fonts/Karbon-RegularItalic.ttf') format('truetype'),
        url('assets/fonts/Karbon-RegularItalic.svg#Karbon-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Karbon';
    src: url('assets/fonts/Karbon-Semibold.eot');
    src: url('assets/fonts/Karbon-Semibold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Karbon-Semibold.woff2') format('woff2'),
        url('assets/fonts/Karbon-Semibold.woff') format('woff'),
        url('assets/fonts/Karbon-Semibold.ttf') format('truetype'),
        url('assets/fonts/Karbon-Semibold.svg#Karbon-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
}



/*--Utils---------------------------------------------------------------------*/
.clearfix::after {content: "";clear: both;display: table;}
.left {float: left;}
.right {float: right;}

.white {color: #fff;}
.black {color: #000;}
.red {color: rgb(228, 1, 52);}

.green-bg {background: rgb(43,174,125);}
.red-bg {background-color: rgb(228, 1, 52);}
.white-bg {background-color: rgb(255, 255, 255);}
.blue-bg {background-color: rgb(210, 236, 243);}

.pad2 {padding: 2% 0;}

.bold {font-weight: 600;}

/*--General-------------------------------------------------------------------*/
body {font-size: 24px;line-height: 1.6rem;font-family: "Karbon", sans-serif;background: #fff;}

/*--@Media body---------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	
}

@media screen and (max-width: 1280px) {
	body {font-size: 16px;line-height: 1.3rem;width: 100%;}
}

@media screen and (max-width: 768px) {
	body {font-size: 14px;line-height: 1.2rem;width: 100%;}
}

@media screen and (max-width: 432px) {
	body {font-size: 14px;line-height: 1.2rem;width: 100%;}
}

/*--Layout--------------------------------------------------------------------*/
.wrapper {width: 75%;margin: auto;}

/*--Header--------------------------------------------------------------------*/
header {position: fixed;width: 100%;z-index: 1001;}
#top-header {background: #fff;padding: 2.51% 0 1.75%;}
#socials {margin-top: 10px;}
#socials li {float: left;margin-right: 10px;}
#socials a {display: block;width: 30px;height: 30px;overflow: hidden;}
#socials a img {width: 30px;height: 60px;position: relative;top: -30px;display: block;}
#socials a:hover img {top: 0;}

/*--Footer--------------------------------------------------------------------*/


/*--Nav-----------------------------------------------------------------------*/
.menu-main-fr-container {background: rgb(43,174,125);padding: 0 15%;}
#main {}
#main li {float: left;padding: .4% 1% .4%;margin-right: 1%;}
#main li:hover {background: rgb(228, 1, 52);}
#main li a {color: #fff;font-weight: 600;text-transform: uppercase;font-size: .9rem;vertical-align: sub;}

/*--Page----------------------------------------------------------------------*/
#container {padding-top: 9.7%;}
.wrapper-content {padding: 0 15%;}
h2 {font-size: 2.7rem;line-height: 2.9rem;font-weight: 600;padding: 0 0 5%;}
p, li, a {font-size: 1rem;}
p, ul {margin-bottom: 1.2rem;}

/*--Slideshow--*/
#slideshow, #videoshow {background: rgb(77, 77, 77);position: relative;}
#slideshow .slide img {width: 100%;height: auto;}
#slideshow .slick-prev, #slideshow .slick-next {width: 60px;height: 60px;background: transparent;overflow: hidden;position: absolute;top: calc((100% - 10rem) / 2 - 30px);z-index: 1000;}
#videoshow .slick-prev, #videoshow .slick-next {width: 60px;height: 60px;background: transparent;overflow: hidden;position: absolute;top: calc((100% - 16rem) / 2 - 30px);z-index: 1000;}
#slideshow .slick-prev {left: 5%}
#slideshow .slick-next {right: 5%}
#videoshow .slick-prev {left: 12.2%}
#videoshow .slick-next {right: 12.2%}
#slideshow a {display: block;}
#slideshow .slick-prev img, #slideshow .slick-next img, #videoshow .slick-prev img, #videoshow .slick-next img {width: 120px;height: 60px;}
#slideshow .slick-next img, #videoshow .slick-next img {position: relative;left: -60px;}

#slideshow .slick-dots {position: absolute;bottom: calc(3% + 10rem);left: 15%;width: 15%;}
#slideshow .slick-dots li {border-radius: 50%;width: 1rem;height: 1rem;background: rgb(43,174,125);float: left;margin-right: 2.5%;cursor: pointer;display: inline;}
#slideshow .slick-dots li button {display: none;}

#videoshow .video {text-align: center;}
#videoshow .video iframe {width: 70%;display: block;margin: auto;}

#slideshow .slideText {height: 10rem;}
#videoshow .slideText {height: 16rem;text-align: left;}
#slideshow .slideText h2, #videoshow .slideText h2 {padding: 2% 0;text-align: left;}
#videoshow .slideText h2 {padding: 4% 0 2%;}

.eight {width: 6rem;height: 6rem;line-height: 7.6rem;font-size: 6rem;text-align: center;background: rgb(43,174,125);border-radius: 50%;position: absolute;z-index: 500;right: 20%;bottom: 13rem;}

/*--Tabs Programme--*/
#programme {padding-top: 7%;}
#tabs-buttons {columns: 3;list-style: decimal;margin-bottom: 4%;margin-top: 4%;}
#tabs-buttons li {margin: 0 0 0 30px;padding: 0 5px 0 0;cursor: pointer;font-weight: 600;-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid;}
#tabs-buttons li:hover, #tabs-buttons li.active {color: rgb(43,174,125);}

#wrapper-tabs {position: relative;height: 400px;overflow-y: auto;padding: 5% 8%}
#wrapper-tabs .tab {display: none;}
#wrapper-tabs .tab.active {display: block;}

/*--PDF programme--*/
#pdf {color: rgb(228, 1, 52);background: #000;width: 20%;text-align: center;padding: 1% 0 .5%;position: relative;z-index: 2;}
#pdf::after {content: '';background-color: #fff;height: 1px;position: absolute;top: calc(50% - 1px);left: 100%;width: 400%;}

.progPDF {display: block;float: left;background-repeat: no-repeat;background-position: 0 0;background-size: cover;width: 10rem;}
#fr {background-image: url('assets/images/FR.svg');height: 3.25rem;margin-left: 1rem;}
#de {background-image: url('assets/images/DE.svg');height: 3.5625rem;}
#fr:hover {background-position: 0 -3.25rem;}
#de:hover {background-position: 0 -3.5625rem;}

/*--Candidats--*/
#candidats {padding: 7% 0;}
#candidates-buttons {padding-bottom: 3%;position: relative;z-index: 30;}
#candidates-buttons li {float: left;text-align: center;width: calc(25% - 15px);background-color: #fff;color:  rgb(228, 1, 52);text-transform: uppercase;font-weight: 600;margin: 0 10px;padding: 1.5% 0 1%;cursor: pointer;}
#candidates-buttons li:first-child {margin-left: 0;}
#candidates-buttons li:last-child {margin-right: 0;}
#candidates-buttons li:hover, #candidates-buttons li.active {color: #fff;background-color: rgb(43,174,125);}

.candidate-tab {display: none;}
.candidate-tab.active {display: block;}

.candFlex {display: flex;}
.candidat {width: calc(25% - 15px);margin: 0 10px;padding: calc(25% - 10px) 1.5% 0;position: relative;}
.candidat:first-child {margin-left: 0;}
.candidat:last-child {margin-right: 0;}
.candidat>div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.portrait {z-index: 1;}
.details {display: none;z-index: 2;padding: 12%;}
.nom {font-weight: 600;margin-bottom: 12%;font-size: 1.3rem;}
.candidat:hover .details {display: block;font-size: 1.1rem;}
.ribon {height: 2rem;}

.portrait img {width: 100%;height: auto;position: absolute;bottom: 0;}

/*--Publications--*/
#publications {padding-top: 4%;}
#downloadPublication {columns: 2;}
#downloadPublication li {margin-bottom: 1rem;margin-left: 30px;list-style: disc;color: rgb(228, 1, 52);}
#downloadPublication li a {color: rgb(228, 1, 52);}
#downloadPublication li a:hover {color: rgb(43,174,125);}

/*--Campagne--*/
#campagne {padding-top: 4%;}

/*--Mouvement--*/
#mouvement {padding: 4% 0;}

/*--Events--*/
#agenda {padding-top: 7%;}
#event-list {padding: 0 0 7%;margin-bottom: 0;}
#event-list li {padding: 0 25px;columns: 3;}
#event-list .slick-prev, #event-list .slick-next {width: 60px;height: 60px;background: transparent;overflow: hidden;position: absolute;top: calc(43.5% - 30px);z-index: 1000;}
#event-list .slick-prev {left: -10%}
#event-list .slick-next {right: -10%}
#event-list .slick-prev img, #event-list .slick-next img {width: 120px;height: 60px;}
#event-list .slick-next img {position: relative;left: -60px;}

.card {padding: 100% 0 0 0;border: 1px solid #fff;-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid;position: relative;margin-bottom: 5%;}
.front-card, .back-card {position: absolute;top: 8%;left: 8%;max-width: 84%;height: 84%;width: 84%;}
.front-card {z-index: 1;}
.back-card {z-index: 2;display: none;background: rgb(43,174,125);}
.card:hover {background: rgb(43,174,125);border: 1px solid rgb(43,174,125)}
.card:hover .back-card {display: block;}

.start-date {font-size: 3.75rem;line-height: 3.43rem;font-weight: 600;margin-bottom: .2%;}
.start-date small {font-size: 2rem;line-height: 1rem;}
.location {font-size: 1.2rem;text-transform: uppercase;font-weight: bold;font-weight: 600;line-height: 1.2rem;}
.more {position: absolute;bottom: 0;right: 0;text-align: right;font-size: 1.2rem;line-height: 1.3rem;}

/*--faq--*/
#faq {padding: 7% 0;}
#faqs {margin-top: 8%;}
.question {background: rgb(43,174,125);color: #fff;padding: 1% 2%;cursor: pointer;}
.question:hover, .question.active {background: rgb(228, 1, 52);}

.answer {padding: 3% 5%;}

/*--soutenir--*/
#soutenir {padding: 7% 0;}

/*--@Media--------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	
}

@media screen and (max-width: 1280px) {
	
}

@media screen and (max-width: 768px) {
	.wrapper {width: 90%;}
	.wrapper-content {padding: 0 5%}
	.menu-main-fr-container {font-size: 12px;padding: 0 5%}
	
	.details {padding: 6%;}
	.details p {font-size: 1rem;margin-bottom: .4rem;}
	
	.start-date {font-size: 2.65rem;line-height: 3rem;}
	.location {font-size: 0.9rem;line-height: 0rem;}
	.more {font-size: 0.9rem;line-height: 1.1rem;}
	
	#videoshow .video iframe {width: 100%;}
	#videoshow .slick-prev {left: 2%}
	#videoshow .slick-next {right: 2%}
	.eight {right: 10%;}
}

@media screen and (max-width: 432px) {
	.wrapper {width: 90%;}
	.wrapper-content {padding: 0 5%}
	.menu-main-fr-container {display: none;}
	#container {padding-top: 64px;}
	
	#tabs-buttons {columns: 2;}
	
	.candidate-tab {overflow: hidden;}
	.candFlex {display: block;}
	.candidat {width: 100%;padding: 100% 1.5% 2rem;margin: 0;}
	.candidat .portrait {top: -2rem;}
	.candidat::after {content: '';position: absolute;bottom: 0;left: -10%;width: 120%;height: 2rem;background-color:  rgb(228, 1, 52);z-index: 20;}
	.ribon {display: none;}
	
	#event-list li {columns: 1;}
	
	#videoshow .video iframe {width: 100%;}
	#videoshow .slick-prev {left: 2%}
	#videoshow .slick-next {right: 2%}
	
	.eight {width: 5rem;height: 5rem;line-height: 5rem;font-size: 5rem;right: 5%;bottom: 7.5rem;}

}