* {box-sizing: border-box;}
html, body {margin:0; padding:0;}
body {overflow:visible; overflow-x:hidden;}

#onepage {font-size:17px; font-weight:normal !important;}
#onepage.section .cs-section-inner {min-height:100vh;}
#onepage h2 {font-size:3em; text-align:center; margin:0 0 1em 0; text-transform: uppercase; font-family:heavitasregular;} 
#onepage h3 {font-size:2.5em; margin:0 0 0.3em 0; text-transform: uppercase; font-family:heavitasregular;} 
#onepage h4 {font-size:1.2em; margin:0 0 0.3em 0; text-transform: uppercase; font-family:heavitasregular;} 
#onepage h5 {font-size:0.9em; margin:0 0 0.3em 0; text-transform: uppercase; font-family:heavitasregular; letter-spacing:1px;} 
.cs-padding-top {padding-top:35px;}
.cs-padding-bottom {padding-bottom:35px;}
.cs-padding-left {padding-left:150px;}
.cs-padding-right {padding-right:150px;}


.cs-petite-fleche {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40px;
    height: 40px;
    background: 
  /*  transparent url("https://egwineco.com/wp-content/themes/egwineco/assets/images/global/hero-arrow-small.png") center 50%/10px auto no-repeat;*/
    opacity: 1;
    visibility: visible;
    transform: translate(-50%);
    z-index: 100;
    transition: opacity .3s 1.5s,visibility .3s 1.5s;
    animation: b 3s infinite;
	cursor:pointer;
}
@keyframes b {
 0% {
  background-position:center 50%
 }
 80% {
  background-position:center 50%
 }
 90% {
  background-position:center 60%
 }
 to {
  background-position:center 50%
 }
}

.button {
    padding: 8px 15px;
    padding-right: 15px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font: 600 normal 14px/1.4 Open Sans,Helvetica,Arial,sans-serif;
    letter-spacing: .12em;
    border-radius: 10px 0 0 10px;
    position: relative;
    transition: background-color 0.2s linear;
	color:#fff;
	cursor:pointer;
}
.button::after {
    content: "";
    position: absolute;
    left: 100%;
    height: 100%;
    width: 25px;
    top: 0;
    background-image: url(https://egwineco.com/wp-content/themes/egwineco/assets/images/global/button-arrow-line.png),url(https://egwineco.com/wp-content/themes/egwineco/assets/images/global/button-arrow-end.png);
    background-position: 0,calc(100% - 10px) 50%;
    background-size: 7px 10px,13px 10px;
    background-repeat: no-repeat;
    border-radius: 0 10px 10px 0;
    transition: background-color 0.2s linear, width 0.2s linear;
}
.button,
.button::after {background-color:rgba(0,0,0,0.2);}
.button:hover, 
.button:hover::after {background-color:rgba(0,0,0,0.3);}
.button:hover::after {width:30px; background-color:rgba(0,0,0,0.3);}


.jcs-menu-slide {position:absolute;width:100%; bottom:0; z-index:300; width:100%; text-align:center;}
.jcs-menu-slide a.button {border-radius:10px; background-color:rgba(255,255,255,1); margin:0 1em; }
.jcs-menu-slide a.button:hover {background-color:rgba(255,255,255,0.8);}
.jcs-menu-slide a.button::after {display:none;}


#wrapper {
    transform: none;
    transition: transform .8s cubic-bezier(.24,.72,.35,1.01);
    transition-delay: 0s;
}
#wrapper.nav-in {
    transform: translateX(-200px);
}



#s-video {position:fixed; display:flex; left:0; top:0; width:100%; height:100vh;text-align: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-ms-flex-align: center;
align-items: center;overflow: hidden;}

.cs-over-s-video {position:relative; display:flex; left:0; top:0; width:100%; height:100vh; text-align: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-ms-flex-align: center;
align-items: center;overflow: hidden;}

.cs-over-s-video .cs-fond-une {max-width:80%; max-height:80%; }

#onepage {position:relative; min-height:200vh;}

#video-home {
	position:absolute;
	min-width: 100%;
	min-height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
.font-heavitasregular {font-family:heavitasregular !important;}
#baseline {position: relative; z-index: 1;	color:#FFF; text-align:center; overflow:hidden; background:rgba(0,0,0,0.7)
; width:100%; padding:1em 1em 2em 1em; cursor:pointer;}
#baseline h1 {font-size:10vh; margin:0; line-height:100%; transform: translateY(-100%); transition: transform .8s cubic-bezier(.24,.72,.35,1.01); transition-delay:0s; padding-top:0.2em; width:100%; text-align:center; font-size:2em;
border-bottom:1px #fff solid;}
#baseline p {margin:0; transform: translateY(100%); transition: transform .2s cubic-bezier(.24,.72,.35,1.01); transition-delay:0.8s; }
#baseline p.genre {transform: translateY(-100%); text-transform: uppercase; }
#baseline.montree h1 {transform: translateY(0);}
#baseline.montree p {transform: translateY(0);}

.jcs-play-button {position: relative; z-index: 1; margin-top:2vh; text-align:center; overflow:hidden;
transition:opacity 0.7s cubic-bezier(.24,.72,.35,1.01); cursor:pointer; height:60px; top:50%; transform:translateY(-50%) }

.jcs-play-button svg {
	width:auto; height:60px;
	fill: none;
	stroke:#fff;
	stroke-width: 10;
	stroke-linejoin: round;
	stroke-linecap:round;
	stroke-miterlimit: 10;
}

.jcs-evenement-visuel .cs-annule {display:inline-block !important; position:absolute; left:50%; top:40%; z-index: 3; text-align:center; font-weight:bold; color:#FFF; text-transform:uppercase; font-size:4em; padding:0.5em 1em; background-color:#900; font-family: 'quicksandbold'; transform:translateY(-50%);  transform:translateX(-50%) }

.jcs-evenement-visuel .jcs-sur-texte {display:inline-block !important; position:absolute; left:50%; top:40%; z-index: 3; text-align:center; font-weight:bold; color:#333; font-size:3em; padding:0.5em 1em; font-family: 'quicksandbold'; transform:translateY(-50%);  transform:translateX(-50%); width:90%; background-color:rgba(255,255,255,0.5); }

#play-button-circle {
    transform-origin: center center;
    stroke-dashoffset: 340;
    stroke-dasharray: 340;
}
.jcs-play-button.animate #play-button-circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease-in-out 0.6s;
}
#play-button-triangle {
    stroke-dashoffset: 180;
    stroke-dasharray: 180;
}
.jcs-play-button.animate #play-button-triangle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease-in-out 0.8s;
}
#play-button-circle, #play-button-triangle {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
   /* transition-delay: 1s;*/
}




#s-home {height:100vh; max-height:100vh; position:relative;}
.fleche-vers-bas {
	position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    height: 33px;
    width: 80px;
    background: transparent url("visuels/fleche-vers-le-bas.png") bottom/100% 100% no-repeat;
    cursor: pointer;
    z-index: 3;
	opacity:0;
}
.fleche-vers-bas.cachee {transform: translateX(-50%) rotateX(-90deg); transition-delay: 0s;}


.header-button-wrapper {
    overflow: hidden;
}
.header-button {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 0;
    position: relative;
	cursor:pointer;
}
.jcs-logo-edr {
   	height: 55px;
    border: 0;
    border-radius: 0;
	cursor:pointer;
	position: fixed;
	z-index: 1000;
	left: 20px;
	top: 20px;
	display:inline-block;
	text-align:left;
	/*background: transparent url("https://egwineco.com/wp-content/themes/egwineco/assets/images/global/line-texture2.png") 50%/5px auto repeat;*/
	padding:0px 10px 0 10px;
	overflow:visible;
}
.jcs-logo-edr img {
   	height: 55px; margin-top:-10px;
}
.jcs-logo-edr svg {height: 50px; width:auto;}
.jcs-logo-edr .colore {
 fill:#2BB88B;
}
.jcs-logo-edr .clair {
 fill:#969798;
}


.header-button.open {
    position: fixed;
    z-index: 1000;
    right: 20px;
    top: 20px;
    /*background: transparent url("https://egwineco.com/wp-content/themes/egwineco/assets/images/global/line-texture2.png") 50%/5px auto repeat;*/
}
.header-nav.open .header-button.close {
    transform: translateY(0);
    transition: transform .5s cubic-bezier(.24,.72,.35,1.01) .7s;
}
.header-button.close {
    position: relative;
    transition-delay: .8s;
    transform: translateY(100%);
    background: 
    /*transparent url("https://egwineco.com/wp-content/themes/egwineco/assets/images/global/line-texture.png") 50%/5px auto repeat;*/
}
.header-button.close::after, .header-button.close::before {
    content: "";
    display: block;
    position: absolute;
    width: 35px;
    left: 50%;
    top: 23px;
    transform: translateX(-50%);
    background-color: 
    #8b8782;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
    transform-origin: center center;
}
.header-button.close::before {
    transform: translateX(-50%) rotate(45deg);
}
.header-button.close::after {
    transform: translateX(-50%) rotate(-45deg);
}





.header-button.open::before {
    top: 15px;
    height: 6px;
    border-top: 3px solid #fff;
}

.header-button.open::after {

    top: 33px;
    border-bottom: 3px solid #fff;

}
.header-button.open::after, .header-button.open::before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 3px solid #fff;
    margin-left: auto;
    margin-right: auto;
}

.header-logo-wrapper {
    perspective: 300px;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 20px;
	cursor:pointer;
}
.header-logo {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #e0570f;
    padding: 12px 17px 13px 14px;
}

.header-nav {
    width: 30vw;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform .8s cubic-bezier(.24,.72,.35,1.01);
    transition-delay: 0s;
	text-align:left;
}

.header-nav.open {transform: translateX(0);}

.header-nav ul.header-nav-items { list-style:none; padding:0; margin:5vh 0 0 0;}
.header-nav-items a {display: block;text-decoration: none;position: relative; overflow: hidden;text-decoration:none; cursor:pointer;}
.header-nav-items a span {
    position: relative;
    z-index: 2;
    display: block;
    padding: 10px 20px 10px 10px;
    padding: 0.2em 1em 0.2em 0.5em;
    transform: translateY(100%);
    transition-delay: .8s;
	text-transform:uppercase;
}
.header-nav.open .header-nav-items span {transform: translateY(0);}

.header-nav.open .header-nav-items li:nth-child(1) span {transition-delay: .1s;}
.header-nav.open .header-nav-items li:nth-child(2) span {transition-delay: .2s;}
.header-nav.open .header-nav-items li:nth-child(3) span {transition-delay: .3s;}
.header-nav.open .header-nav-items li:nth-child(4) span {transition-delay: .4s;}
.header-nav.open .header-nav-items li:nth-child(5) span {transition-delay: .5s;}
.header-nav.open .header-nav-items li:nth-child(6) span {transition-delay: .6s;}
.header-nav.open .header-nav-items li:nth-child(7) span {transition-delay: .7s;}
.header-nav.open .header-nav-items li:nth-child(8) span {transition-delay: .8s;}
.header-nav.open .header-nav-items li:nth-child(9) span {transition-delay: .9s;}
.header-nav.open .header-nav-items li:nth-child(10) span {transition-delay: 1s;}

.header-nav.open .header-nav-items li a span {transition: transform .5s cubic-bezier(.24,.72,.35,1.01);}

.header-nav-items li {list-style-type:none; font-size:1.6vw; letter-spacing:.01em;}
.header-nav-items a {color:#8b8782; transition:color 0.5s;}
.header-nav-items a.secondary {opacity:0.75;}
.header-nav-items a.secondary span {padding-top: 0.2em; padding-bottom:0.2em;}

.header-nav-items a:hover,
.header-nav-items .active a
 {color:#0071ba;}

.header-nav a.cs-machecoul-lien {width:30%; margin:1em auto 0 auto; display:block; overflow:hidden;}
.header-nav a.cs-machecoul-lien img {width:100%;}

.cs-avec-contour {color:#000; text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;}
#item-323 .cs-avec-contour {color:#fff !important; text-shadow:none !important;}
/*
@media (min-aspect-ratio: 16/9) {
    #video-home {
        width:100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    #video-home { 
        width:auto;
        height: 100%;
    }
}
@media (max-width: 767px) {
}
*/
div.cs-spectacle-item.jcs-covid-prochainement div.cs-overlay {cursor:default !important;}
.jcs-prochainement li div.cs-spectacle-item.jcs-covid-prochainement div.cs-cont {
    top: 0 !important;
    position: absolute !important;
    height: 100% !important;
}
.jcs-prochainement li div.cs-spectacle-item.jcs-covid-prochainement div.cs-cont p {font-size:1.1em;}

div.cs-spectacle-item .annule {display:none !important;}
div.cs-spectacle-item.cs-spectacle-annule-1 .annule {display:inline-block !important; text-align:center; width:100%; font-weight:bold; color:#FFF; 
text-transform:uppercase; font-zize:1.5em; padding:0.5em 0; background-color:#900; margin-bottom:1em; }

div.cs-spectacle-item .jcs-sur-texte {display:inline-block !important; text-align:center; width:100%; font-weight:bold; color:#000; 
font-zize:1.5em; padding:0.5em 0; background-color:rgba(255,255,255,0.5); margin-bottom:1em; }

table.tlv td {padding-bottom:0.5em; font-size:1.2em;}
table.tlv td.visuel {padding-right:0.5em;}
table.tlv td.visuel img {width:2em; height:2em; border-radius:50% !important;}
table.tlv td.titre {font-weight:bold !important; padding-right:0.5em;}
table.tlv td.texte {}

#baseline.jcs-tlv {color:#000; background:rgba(255,255,255,0.7); padding-bottom:10em;
background-image:url("https://www.saison-culturelle-machecoul.fr/20242025/visuels/tisse-la-ville-logo.png");
background-position:bottom center; background-repeat:no-repeat; background-size:10em; }
#baseline.jcs-tlv h1 {border-bottom-color:#000;}


#js-contenu-evenement-995 .cs-evenement .cs-left,
#js-contenu-evenement-999 .cs-evenement .cs-left,
#js-contenu-evenement-998 .cs-evenement .cs-left,
#js-contenu-evenement-987 .cs-evenement .cs-left,
#js-contenu-evenement-1000 .cs-evenement .cs-left,
#js-contenu-evenement-1001 .cs-evenement .cs-left,
#js-contenu-evenement-1002 .cs-evenement .cs-left
{
	padding-right:7em;
	background-image:url("https://www.saison-culturelle-machecoul.fr/20242025/visuels/tisse-la-ville-logo.png");
	background-position:top right; background-repeat:no-repeat; background-size:7em;
	width:74% !important;
}

#js-contenu-evenement-995 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-999 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-998 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-987 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-1000 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-1001 .cs-evenement .cs-left .jcs-partenaires,
#js-contenu-evenement-1002 .cs-evenement .cs-left .jcs-partenaires
{
	display:block !important;
	height:2em; margin-top:3em;
	background-image:url("https://www.saison-culturelle-machecoul.fr/20242025/visuels/tisse-la-ville-partenaires-logos.png");
	background-position:center top; background-repeat:no-repeat; background-size:contain;
}

#js-contenu-evenement-995.jcs-no-date  .cs-evenement .cs-left,
#js-contenu-evenement-999.jcs-no-date .cs-evenement .cs-left,
#js-contenu-evenement-998.jcs-no-date .cs-evenement .cs-left,
#js-contenu-evenement-987.jcs-no-date .cs-evenement .cs-left,
#js-contenu-evenement-1000.jcs-no-date .cs-evenement .cs-left,
#js-contenu-evenement-1001.jcs-no-date .cs-evenement .cs-left,
#js-contenu-evenement-1002.jcs-no-date .cs-evenement .cs-left
{width:100% !important;}

.cs-texte-categorie {padding:0.5em 0; margin:0.5em 0; border-top:1px dotted #ccc; display:none; /*border-bottom:1px dotted #ccc;*/ }

.csHome {background-color:#0071ba;}
.csHome img {height:90%;}
.csHome.csBientot img {}
.csHome.csBientot h1,
.csHome.csBientot h2 {color:#FFF; text-align:center;
	opacity:0;
	animation-name: fadeIn;
	animation-duration: 0.5s;
	animation-fill-mode: forwards; }
.csHome.csBientot h1 {padding-top:20px; font-size:40px !important;}

.csLogoAnime {
    text-align:center;
}
.csLogoAnime .csContenair {
    text-align:center;
	position:relative; height:60%; display:inline-block; width:100%;
}
.csLogoAnime.csHomeAnimeHidden {opacity:0;}
.csLogoAnime.csHomeAnime .csContenair {height:90%; width:100%;}
.csLogoAnime.csHomeAnime .fleche-vers-bas {
	opacity:0;
	animation-name: fadeIn;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 11.7s;
}


.csLogoAnime.csBientot .csContenair {height:60%; max-height:60%;}
.csLogoAnime div.img {
	height:100%; width:100%; top:0; left:0;
	position:absolute;
	opacity:0;
	animation-name: fadeIn;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}

.csLogoAnime .cs01 {animation-delay: 1s; background-image:url("visuels/animation/01.png");}
.csLogoAnime .cs02 {animation-delay: 2s; background-image:url("visuels/animation/02.png");}
.csLogoAnime .cs03 {animation-delay: 3s; background-image:url("visuels/animation/03.png");}
.csLogoAnime .cs04 {animation-delay: 4s; background-image:url("visuels/animation/04.png");}
.csLogoAnime .cs05 {animation-delay: 4.9s; background-image:url("visuels/animation/05.png");}
.csLogoAnime .cs06 {animation-delay: 5.7s; background-image:url("visuels/animation/06.png");}
.csLogoAnime .cs07 {animation-delay: 6.3s; background-image:url("visuels/animation/07.png");}
.csLogoAnime .cs08 {animation-delay: 6.8s; background-image:url("visuels/animation/08.png");}
.csLogoAnime .cs09 {animation-delay: 7.1s; background-image:url("visuels/animation/09.png");}
.csLogoAnime .cs10 {animation-delay: 8.2s; background-image:url("visuels/animation/10.png");}
.csLogoAnime .cs11 {animation-delay: 9.7s; background-image:url("visuels/animation/11.png");}
.csLogoAnime .cs13 {animation-delay: 10.7s; background-image:url("visuels/animation/13.png");}

.csHome.csBientot h1 {animation-delay: 11.7s;} 
.csHome.csBientot h2 {animation-delay: 13.2s;} 

 @keyframes fadeIn {
       from { opacity: 0; }
   	 to   { opacity: 1; }
    }

.csLieu {vertical-align:bottom;}
.csLieu em {vertical-align: bottom; display:inline;}
.csLieu::before 
{
content: "";
background:url('visuels/ico-lieu.png') no-repeat left;
display: inline-block;
vertical-align: bottom;
background-size:contain;
width:1.1em;
height:1.1em;
}
.cs-evenement .cs-infos .csLieu::before {background-image:url('visuels/ico-lieu-444.png'); opacity:0.8;}