@font-face {
	font-family: "fontwawasome";
	src: url("./font/fontwasome.otf");
}

.wa{
	font-family: fontwawasome;
}

.socialButton {
    margin-bottom: 30px;
    width: 100%;
}

.socialButton span{
	display: inline-block !important;
	height: 45px;
	width: calc(25% - 4px);
	box-sizing: border-box;
	text-align: center;
	border: 1px solid #ccc;
	line-height: 45px;
	color: #666
}


#menu-mobile{
		display: none;		
		overflow: hidden;
		overflow-y: scroll;
	}


/* 
#menu-mobile-content > li:last-child{
		margin-top: 30px;
	}
 */


#menu-mobile .bottomLink span:active{
	color: rgb(33,33,33);
}

#nav-icon3 {
width: 25px;
height: 25px;
position: absolute;
top: 0px;
right: 0px;
margin: 10px 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
/* 
-webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
 */
cursor: pointer;}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  opacity: 1;
  left: 0;
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -o-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  /* 
-webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
 */
}


#nav-icon3 span:nth-child(1) {
  top: 6px;
}

#nav-icon3 span:nth-child(2){
  top: 18px;
}

#nav-icon3 span:nth-child(3){
  top: 12px;
}


#nav-icon3.open span:nth-child(1) {
  top: 12px;
}

#nav-icon3.open span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 12px;
}

#nav-icon3.open span:nth-child(3) {
  /* left: 100px; */
  opacity: 0;
}


#menuBar a span {
	position: absolute;
	left: 45px;
	left: 13px;
	top: 0px;
	transition: 0.25s;
}

/* 
#menuBar.swap a span {
	left: 7px;
}
 */

#menuBar img{
	position: absolute;
	top: 8px;
	left: 7px;
	height: 30px;
	transition: 0.25s;
}

/* 
#menuBar.swap a img {
    left: -30px;
    opacity: 0;
}
 */

#menu-mobile #menu-mobile-content{
	padding: 6px 10px 10px;
	height: calc(100vh - 45px);
	overflow-y: scroll;
}





#menu-mobile .secondLevel{
	color: #777;
}

#menu-mobile .secondLevel span::before{
	/* 
font-family: fontwasome;
	content: "\F067";
	position: relative;
	margin-left: -17px;
	margin-top: 3px;
	font-size: 18px;
	width: 17px;
	display: inline-block;
 */
}

#menu-mobile .secondLevel span.ouvert::before{
	/* content: "\F068"; */
}


#menu-mobile .thirdLevel{
	color: #aaa;
}

#menu-mobile > ul ul li {
	padding-left: 14px;
}

#menu-mobile span{
	display: inline-block;
}

/* 
.firstLevel::after {
    content: "\f107";
    font-family: fontwasome;
    padding-left: 3px;
    font-size: 80%;
}
 */

#menu-mobile span,
#menu-mobile a{
	cursor: pointer;
}


#menu-mobile span.menuBarTickets.bouton {
	width: auto;
	height: 20px;
	line-height: 20px;
	float: right;
	font-size: 13px;
	padding: 0px 10px;
	position: absolute;
	right: 50px;
	margin: 9px 0
}


#menu-mobile .bouton{
	width: 100%;
	padding: 10px 0px;
	margin: 10px 0px;
	height: auto;
	font-size: 20px;
	display: inline-block;
}

	
@media only screen and (max-width: 768px) {
	*{
		box-sizing: border-box;
	}
	

	body {
		width: 100%;
		margin: 0;
		padding: 0 7px;
		
	}
	#menuBar a span,
	#menu-mobile  #menu-mobile-content {
    font-size: 30px;
    
    }
	

	/* Hide */
	.share-nav,
	.nav-page,
	.sharrre,
	.twitter_hashtag,
	#menu-1,
	#menu-fixed,
	#header-bloc,
	#focusImg,
	#focusTitre,
	.billeterie a:nth-child(2)
	{
		display: none!important;
	}
	
	#focusMobile {
		display: block !important;
	}
	
	div#sharebox.share.fixed{
		position: relative;
		top: inherit;
	}
	.share-nav{
		z-index: 1;
	}
	
    .share ul li.full,
    .share ul,
    .share-nav{
        width: 100%;
    }
    
    .share .bouton.vert.full {
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		margin-bottom: 20px;
    }
    
    .share .bouton.vert.full:active{
    	background-color: #11CF25;
    	color: #fff;;
    	border-color: #fff;
    }
	
	/* MENU */

    li#small-logo {
        width: 100%;
        padding: 0px !important;
    }
    
    li.billeterie{
    	position: absolute;
    	top: 0px;
    	right: 0px;
    }
	
	#billeterie{
		margin-bottom: 20px;
		display: block !important;
	}
	
	#billeterie a{
		margin: 0px 0px 1em 2.5px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		padding: 0 3px;
		width: calc(50% - 12px);
		width: calc(100%);
		display: inline-block;
		vertical-align: middle;
}
	#billeterie a:first-child{
		;
}

#tools{
	border-bottom: 1px solid #ccc;
	padding: 2px 0;
	margin: 0 10px 0px;
}

#lang{			
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	}

#lang a.active{
			border-bottom: 2px solid;
	}	


	#billeterie a.abo{
		border-color: #ccc;
		color: #666
	}
	
	
	#jdpName{
		display:block;
	}
	
	
	article{
		padding: 0 0px;
	}
	
	article,
	.module{
		margin-left: 0;
		margin-right: 0;
		width:100%
	}
	
	.module h2 {
    	padding: 0 5px;
	}
	
	
	#menu-mobile{
		position: fixed;
		top: 0px;
		left: 0px;
		display: block;
		background-color: rgba(250, 250, 250, 0.87);
		z-index: 10000000;
		width: 100%;
	}
	
	#menu-mobile li ul{
		display: none;
	}
	
	#menu-mobile hr{
		margin: 0.5em 0 0;
		border: 0px
	}
	
	#menuBar{
		height: 45px;
		background-color: #FAFAFA;
		padding: 3px;
		line-height: 45px;
		border-bottom: 1px solid #ccc;
	}
	
	.menuOpen #menuBar{
		background-color: transparent;
	}
	/* DIAPORAMA */
	
	#start.article {
    	margin-top: 30px;
    }
	
	.flex-direction-nav{
		 display: none;
	}
	
	
	
	

    .lb-image-wrapper {
        float: none;
		width: 100% !important;
		min-width: 100% !important;
		max-width: inherit !important;
		text-align: inherit;
    }
	
	.lightbox .lb-image {
		    
	}
	
    #lb-wrapper {
        margin: 0 0px;
        padding: 0 0px;
    }

	/* MODULE */

    .module .four-cols {
        width: 49%;
		margin: 0 0px 20px !important;
		padding: 0 7px;
		float: none;
		display: inline-block;
		vertical-align: top
    }

	.downIcon {
		width: 20px;
	}    

    .fileTitle {
        width: calc(100% - 70px);
    }
	
	#hubHeader {
    margin-top: 45px;
}

    section#hubHeader .infoHub {
        max-width: 100%;
        font-size: 16px;
        line-height: 18px;
        display: block;
        padding: 0 5px
    }
    
    section#hubHeader .infoHub div.btContainer {
    display: none;
}
	
	.hubSection.cartes .half {
		width: 100%;
		float: none;
	}
	
    .liste .theItems li.cal_event,
    .liste .theVids li{
        max-width: 100%;
        width: 100%;
    }
    
    
	
	/* HOME */
	
	#focus {
    margin-top: 45px;
    padding: 0 10px
    }
    
    #focusImg, #focusTitre {
        width: 100%;
    }
    
    #focusTitre .not,
	.city{
		display: none !important;
	}
    
    .video.hop {
    	background-size: cover !important;
    	display: none;
    }
    
    .video-container {
	    margin: 1em 0;
	}
    
    #focusImg li,
    #focusImg iframe {
		height: auto;
		height: calc(100vh - 90px - 75px)
    }

     #focusImg {
     	margin-bottom: 10px
     }
     
    
    
    #visite.homeSection {
        width: 100%;
    }
	
	#magazine.widget{
		display: none;
	}
	
    #twitter, #agenda, #infoPlus, #magazine {
        width: 50%;
        margin: 0px;
        padding: 0 10px;
    }
	
	
	.homeSection {
    width: 100% !important;
	}
	
	#focus.homeSection {
		margin: 0px;
		padding: 55px 0 0;
		border-bottom: 0px;
	}
	
	#focusMobile ul {
		margin-top: 00px;
	}
	
	.homeSection#actualites {
		margin-top: 0px;
	}
	
	
	section.homeSection#focus h3 {
		font-size: 30px;
		line-height: 1;
		margin: 0.5em 0 0;
    }
	
	.homeSection#actualites ul {
    width: 100% !important;
	}
	
	section.hubSection,
	section.hubSection.half{
		width: 100%;
	}
	
	section.hubSection h1,
	section.hubSection h2,
	section.hubSection h3 {
		margin-top: 0.5em !important;
	}
	
	
	section.hubSection.one .events li img,
	section.hubSection.one .events li hgroup,
	.liste .theItems li
	{
		width: 100%;
	}
	
	section.homeSection.quart li,
	section.homeSection.sixth li,
	section.hubSection.sept li,
	section.hubSection.sixth .events li,
    section.hubSection.sept .events li
	{
		width: 49.5%;
		margin: 0 0px 20px !important;
		padding: 0 5px;
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	
	section.hubSection .events li,
	#focusMobile li{
        margin: 0 0 30px;
        padding: 0 5px;
		float: none;
		display: inline-block;
		vertical-align: top;
    }
    
    
    #focusMobile li{
    	width: 100%
    }
    
    #focusMobile figure {
    	max-height: calc(100vh - 220px);
    	text-align: center;
    }
    
    #focusMobile figure img{
    	max-height: 100%;
		/* height: auto; */
		width: auto;
		max-width: 100%
    }
    
    section.hubSection.tiers .events li {
        width: 100%;
		
    }
    
    section.hubSection.quart .events li,
    section.hubSection.sixth .events li{
        width: 49.5%;
		height: auto;
    }
    
    section.hubSection.sept .events li{
        width: 32.8%;
    }
    
    section#hubHeader h1{
    	margin: 24px 5px 0;
    }
    
    
    .accesPlus {
		right: 6px;
		top: 15px;
	}
	
	#accesArchives {
    	width: 100%;
		font-size: 18px;
		line-height: 1
    }
    
    #accesArchives .bouton {
		width: 100%;
		padding: 8px;
		height: auto;
		font-size: 16px;
	}

    
	
	section#actualites.homeSection li img {
		width: 100%;
	}

	section#actualites.homeSection hr.clearfix,
	.module-content-wrapper hr{
		display: none;
	}
	
	
	#footer-mcc,
	#footer-infos,
	#footer-mecenes,
	#footer-amis {
    	display: none;
    }
    
    #mobileFooter{
    	display: block !important;
    	float: left;
		font-size: 18px;
		line-height: 24px;
		color: #666;
		width: 100%
    }
    
    #mobileFooter a{
    	border-bottom: 1px solid #bbb;
    }
    
    #mobileFooter > ul{
    	width: ;
		box-sizing: border-box;
		float: left;
		padding: 0 5px
    }
    
    #mobileFooter ul li{
    	margin-bottom: 0.2em;
    }
    
    #mobileFooter li li{
    	margin-left: 1em;
    }
    
    #mobileFooter hr.clearfix{
    margin-bottom: 1em;
    }
    
    
    
    section.hubSection h2, section.homeSection h2, h2.sectionTitle {
	    margin: 12px 5px 12px;
}
	
	
	
	
	
/* 
	#diaporama{
		background-color: yellow;
	}
	
	#diaporama .slides{
		background-color: orange;
	}
	
	#diaporama .slides li{
		background-color: red;
	}
 */
	
	#diaporama li figure{
		margin: 0px;
	}
	
	#diaporama{
		
	}
	
	.slideCount {
    font-size: 18px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-variant-numeric: tabular-nums;
    }
	
	
    .menuOpen section,
    .menuOpen footer {
    	/* transition: filter 0.5s; */
    	filter: blur(10px);
	}

	body.menuOpen {
	    overflow: hidden;
    	height: 100vh;
}
	
}

@media only screen and (min-width: 415px) and (max-width: 768px) {
	
	
	/* DIAPORAMA */
	body {
		width: 100%;
		max-width: 569px;
		margin: 0 auto
	}
	
	#diaporama .slides li{
		width: 569px !important;
		height: 435px !important;
		margin: 0 auto;
	}	

}

@media only screen and (min-width: 415px) and (max-width: 768px) and (orientation: landscape) {
	#focusMobile figure,
	#focusMobile hgroup{
		width: 50%;
		float: left;
		padding: 0 10px
	}
	
	section.homeSection#focus h3{
		margin: 0;
	}

}


@media only screen and (max-width: 415px) {
	
	
	
	/* DIAPORAMA */
	body {
		width: 100%;
		max-width: 376px;
		margin: 0 auto
	}
	
		
	
    #twitter, #agenda, #infoPlus, #magazine {
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

	#agenda,
	#infoPlus{
		display: none;
	}

	#diaporama {
        height: calc(500px + 30px);
        width: 360px;
    }
    
 
    #diaporama .slides li {
        height: 500px;
        width: 360px !important;
        
    }
    
    #diaporama li figure img {
		max-width: 360px;
		max-height: 500px;
		height: auto;
		width: auto;
}
	


}


@media only screen and (max-width: 374px) {
	body {
		width: 100%;
		max-width: 320px;
		margin: 0 auto
	}
	
	/* 
		.module .four-cols {
        width: 100%;
    }
 */
    
    .module .four-cols img {
        width: 100% !important;
    }
    
    #menuBar a span,
    #menu-mobile > ul {
	font-size: 30px;
	}
	
	#menuBar a span {
	font-size: 20px;
	}
	
	#menu-mobile > ul {
	line-height: 1.1;
	}
    
    /* HOME */
    
    section.homeSection.quart li,
	section.homeSection.sixth li{
    width: 49%;
	margin: 0px 0px 30px !important;
	padding: 0 5px;
	overflow: hidden;
	float: none !important;
	display: inline-block;
	vertical-align: top;
	}

	
	/* DIAPORAMA */
	
	
    #diaporama {
        height: calc(360px + 30px);
        max-height: calc(100vh - 100px);
        width: 306px;
        margin-bottom: 15px;
    }
    
    
    .article article {
        margin-top: 15px;
    }
 
    #diaporama .slides li {
        height: 360px;
        max-height: calc(100vh - 120px);
        width: 306px !important;
        
    }
    
    #diaporama li figure img {
		max-width: 306px;
		max-height: 350px;
		max-height: 100%;
		height: auto;
		width: auto;
}
	#mobileFooter{
		font-size: 14px;
		line-height: 18px;
    }
    
    .slideCount {
        font-size: 14px;
    }

}