/*SMARPHONE*/

@media screen and (max-width: 1100px){
  
  .aa-photo-float-40 {
	float: inherit;
	margin-right: 0;
	width: 100% !important;
	border-radius: 12px !important;
	margin-bottom: 10px !important;
}

/* BOUTON JAUNE*/

ul#nav {
    padding-top: 10px;
}
  
.actuvr .p-2.actu-icon {

    display: none;
}
.adh {
    background: yellow;
    height: 20px;
    display: flex;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    margin: 0;
    margin-bottom: 0px;
    /* vertical-align: middle; */
    align-items: center;
    color: var(--main-color);
    justify-content: center;
}

#samysvg {
    height: 200px;
  width:140px;
}
  .hamburger-overlay #samysvg {
	width: 100px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 113px;
}

  .div1 svg {
	
	top: 85px;
	
}
  
  .mod-menu__sub li:hover {
	background: var(--main-color)!important;
}
.mod-menu__sub li a {
	color: gainsboro;
	text-decoration: none;
}


.mod-menu__sub li:hover, .mod-menu__sub li:hover a {
	color: gainsboro;
	/* border-radius: 10px; */
}
  

  
.ic-info.ic-clearfix {
	display: flex;
	flex-wrap: wrap;
}
  
  .items-more{
    width:initial;
}

.com-content-blog__links {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    width: 98%;
}


.com-content-blog__links {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;

}

.items-more a {
    background: white;
    border-radius: 8px;
    line-height: 20px;
    padding: 6px;
    border: 3px solid var(--main-color);
    margin-right: 4px;
    max-width: 94.6%;
    display: inline-block;
    overflow: hidden;
}
.com-content-blog__link a {

    text-overflow: ellipsis;
}
  li.com-content-blog__link {
    /* max-width: 100%; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
}
  

  .no-wide{
  width: inherit!important;
  height: inherit!important;
}
  .horaires-cell {
	
	font-size: 13px;
}
  .campus-copy{
  position:relative;
    display:block!important;
    
	background-color: var(--main-color);
	border-radius: 20px 20px 0 0;
    margin-bottom:70px;
}
.campus-copy img {
	border-radius: 20px 20px 0 0 !important;
}
.campus-copy iframe {
	position: absolute;
	left: 0;
	bottom: -55px;
}
.campus-intro{
  display:block!important;
}

  
.week_block td{
  
  display: table-cell;
}
.week_block .pointjour{
  min-width: 20px!important;
  
}
.superdiv {
	display: flex;
	height: 200px;
    /*background-color:var(--main-color);*/
  	background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
	border-radius: 10px 10px 0 0;
	min-width: 300px;
  background-color:white;
}
  
  

.div1, .div2, .div3 {
	width: 33.3333%;
	/*position:relative;*/
	text-align: center;
	height :200px;

}

#sidebar-copy{
	display: none!important;
}
.burger2 {
	height: 50px;
	width: 50px;
	margin: auto;
	position: relative;
	top: 76px;
	/* transform: translateY(-50%); */
	/* background: var(--main-color); */
	border-radius: 10px;
	z-index: 3;
	border: 4px solid var(--main-color);
}

.logo {
	
}
.div1 img {
	width: 40px;
	padding-top:80px;
}
.div1 svg {
	width: 40px;
	
	position: relative;
  fill: var(--main-color);
}

.div3 img {
	width: 70px;
	position: relative;
	top: 35px;
				cursor: pointer;

}

.div2 img {
	height: 160px;
	width: auto;
	min-width: 140px;
	margin-top:20px;
}

  .div2 svg {
	fill: var(--main-color);
	width: 140px;
    top: 6px;
	position: relative;
}

.menu-img{
	
}

.div2  {
min-width: 140px;
}

.div3 {

}

.custom_footer {
	
}

.footer {

	border-radius: 0 0 20px 20px;
}


		.avant {
	margin-top: initial;
	height: inherit;
	display: inherit;
	width: inherit;
	margin-left: inherit;
	margin-right: inherit;
}

	body {
	width: 97%;
	margin: auto;
}
	
.custom_header a {
	color: white;
}
.custom_header a:hover {
	color: #9ddaff;
}

	.banner {
	
		display:none;
		
	}
	.custom_banner-mobile {
		display: block;
		z-index:-1;
		width:97%;
		text-align: center;
		background: var(--main-color)!important;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.custom_banner-mobile p {
		margin : 0;
	}
	
}







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


.legend0 {
  display: flex!important;
  width: 100%!important;
  justify-content: center!important;
}

.block_ligne {
  display: block!important;
  width: 173px!important;
}

	td img {
		width: 100%;
		height: auto;
	}

	body {
	width: 97%;
	margin: auto;
}
	/*Mise en forme du component*/

	/*Bloquer la taille des image a la largeur du mobile*/
	.component, .component img {

		width: 100%;
		height: auto;
		margin:auto;
	}

	.component {
		position: relative;
	

	margin: auto;
	width: 93%;
}

.component p {
	text-align: justify-all;
}
	.avant.active .component{
		display:none;
	}
	
	/*Diminuer la taille du titre*/
	.custom_header p {
		font-size: 26pt;
		line-height: 60px;
	}
	.footer.active{
		display: none;
	}

.custom_header {
	z-index:2;
	position: relative;
}
	/*Faire disparaitre navig*/
	.navig {
		display: none;
	}

	/*Mettre le menu en colonne*/
/*.mobile-content {
	display: block;
	transform: translateX(-110%);
	width:68%;
	position: absolute;
	z-index: 2;
	transition: 0.3s transform ease-in-out;
	background: #b6e4ff;
	border-radius: 10px;
	top: 0px;
}*/
  
  .mobile-content {
	display: block;
	transform: translateX(-110%);
	width: 68%;
	position: absolute;
	z-index: 2;
	transition: 0.3s transform ease-in-out;
	background: var(--main-color);
	border-radius: 10px;
	top: 0px;
}
.custom_banner-mobile img {
	height: auto;
	width: 40%;
}

	.component .item-page{
		width: 100%;
	}
	
  .nav li {
	text-transform: uppercase;
	font-size: 13pt;
	cursor: pointer;
	line-height: 24px;
}
.page-header h2 {
	margin-top: 13.4px;
	margin-bottom: 13.4px;
}
#roue{
	display: none;
}
.bluefoot{
	display: none;
}
#samy{
	display: none;
}
	.banner {
		height: auto;
		width: 100%
	}

	.custom_banner img {
		
		height: auto;
		width: 100%;
		min-height: inherit;
	}
	.custom_banner {
	display: none;
	}
	#logo{
		display: none;
	}
	.custom_banner-mobile {
		display: block;
		border-radius: 20px;
	}
	.custom_banner-mobile p {
		margin : 0;
	}

	/*Virer les puces*/
	.mobile-content li {
		display: block;
		width: initial;
		list-style: none;
		
	}

	.mod-menu_sub li:hover {
	background-color: initial;
}
/*.parent:hover .separator {
	color: var(--main-color)!important;
}*/
	.mod-menu_sub.unstyled.small.active {
	background: #b6e4ff;
}

	.nav > li:hover {
	/*border: 1px solid #b6e4ff;*/
	background-color: initial;
}

	/*Mettre en forme le texte de menu*/

.mobile-content a {
	text-decoration: none;
	color: var(--logo-color2);
}


	/*Faire apparaitre disparaitre me menu mobile*/
	.parent span {
		color: var(--logo-color2)!important;
	}

	.mobile.active .mobile-content {
		transform: translateX(0);
		transition: transform 0.3s ease-in-out;

	}
	.mod-menu_sub{
		box-shadow: inherit;
	}

	.mobile-content .parent:hover .mod-menu_sub {
		position: inherit;
		display: none;
		width: 100%;
		line-height: 40px;
	}

	.custom_banner div{
		height:auto;
		width:100%;


	}

.hamburger-overlay svg {
	fill: var(--main-color);
	width: 100px;
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
}
.hamburger-overlay {
	
	display:none;
	
}
.mobile.active .hamburger-overlay{
	display:block;
  	width: 97%;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	margin-left: 1.5%;
	background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
	height: 100%;
	background-color: white;
    border-radius:10px;
}

.mobile.active footer {
	display:none;
}


	/*.banner {
position: relative;

	}*/
	.header {
		z-index: 10;
		background-color: white;
		display: none;
	}

/*	.custom_banner.active {
		position: static;
		transform: translateX(0%);
		transition: transform 0.3s ease-in-out;
		z-index: -10;
	}*/


	.nav {
		padding-left: 0px;
		width: 100%;
	}


	/*CREATION DU BOUTTON HAMBURGER*/
	
	
.burger {
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 10;
	position: absolute;
	top: 11px;
	right: 9.8px;
}


/*BOUTTON BURGER*/
	.burger span{
		width:100%;
		height:6px;
		background-color: var(--main-color)!important;
		display:block;
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		transition: background-color 0.3s ease-in-out;
		border-radius:5px;
	}

	.burger span::before, .burger span::after{
		content: '';
		position:absolute;
		width:100%;
		left: 0px;
		height:6px;
		background-color: var(--main-color)!important;
		transition: transform 0.3s ease-in-out;
		border-radius:5px;
	}

	.burger span::before{
		transform:translateY(-9px);
	}
	.burger span::after{
		transform: translateY(9px);
	}


	.burger.active span{
		background-color: transparent!important;

	}

	.burger.active span::before{
		transform: translateY(0px) rotateZ(315deg);
		

	}
	.burger.active span::after{

		transform: translateY(0px) rotateZ(-315deg);


	}


	.horiz {
	position: absolute;
	width: 12px;
	height: 4px;
	background-color: var(--main-color);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: background-color 0.3s ease-in-out;
}

	.vertic{
		top:10px;
		left: 6px;
		position: absolute;
		width:12px;
		height:4px;
		background-color: var(--main-color);
		transform:rotateZ(90deg);

		transition: transform 0.3s ease-in-out;

	}

.plus {
	height: 24px;
	width: 24px;
	float: right;
	background-color: var(--logo-color2) !important;
	z-index: 10;
	position: relative;
	border-radius: 4px;
}

	.mod-menu__sub.active{
		display:block!important;
		position: static;
		background-color:var(--main-color);
		color: white!important;
		border: none;
		box-shadow: 0px 0px black;
		width: 100%;
		line-height: 40px;
		margin-top: 10px;	
		margin-left: 20px;
		text-indent: 0px;
	}

	.vertic.active{
		transform: rotateZ(360deg);
	}
.divider.deeper.parent {
	/* background: var; */
	/* border: 1px solid; */
	border-radius: 20px;
	margin: 0;
}

#nav {
	height: max-content;
}

#blockrandom {
	width: 100%!important;
}
}


/*@media screen and (max-width: 400px)
{
	td img {
		width: 100%;
		height: auto;
	}
	td {
	display: block;
}body {
	width: 97%;
	margin: auto;
}
#blockrandom {
	width: 100%!important;
}


	.custom_header p {
		font-size: 20pt;
	}


	#sidebar-copy{
		display:none;
	}


}*/

/*@media screen and (max-device-width: 350px)
{td {
	display: block;
}body {
	width: 97%;
	margin: auto;
}

	.burger{

		position:absolute;
		top: 20px;
	}

}
*/






 #input {
    color: grey;
    width: 163px;
     font-family : 'Fredoka', sans-serif;


}
.date_affichee_jour {
  color: black;
  font-weight: 500;
  position: relative;
}

.date_affichee_numero_mois {
  color: black;
  font-weight: 500;
}
.week_block td {
  /* border: 1px solid #80808078; */
  height: 25px;


 

}

/*lmm #d70079
apero #4f0
samedi #f0d600
nonmix #ea0202*/
.tag_samedi {
  background: #f0d600;
  border-radius: 5px;
  padding: 5px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  height: 10px;
}

.tag_apero {
  background: #4f0;
  border-radius: 5px;
  padding: 5px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  height: 10px;
}

.week_block {
  margin-bottom: 25px;
  background: white;
  border-radius: 17px;
  padding: 8px;
  border: 2px solid;
  overflow: auto;
}
.tag_nmix {
  background: #ea0202;
  border-radius: 5px;
  padding: 5px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  height: 10px;
}
.point td{
  width: 20px;
}
.tag_lmm {
  background: #d70079;
  border-radius: 5px;
  padding: 5px;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  height: 10px;
}
.date_affichee {
  color: black;
  font-weight: bold;
}


#input:focus {
    color: black;
       font-family : 'Fredoka', sans-serif;

}



.inscrit {
  border: 2px solid black;
  width: max-content;
  border-radius: 4px;
  color: black;
  font-weight: 500;
  padding: 1.5px;
  font-size: 12px;
  padding-right: 4px;
  padding-left: 4px;
   font-family : 'Fredoka', sans-serif;
  margin: 2px;
  position: relative;
}
table {
  border-collapse: collapse;
}
.inscrits {
  display: inline-flex;
}
.point {
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 20px;
  margin: auto;
}
.block_date td{
  min-width: 20px!important;
  max-width: 75px;
  display: table-cell;
}
.ligne {
  line-height: 28px;
   font-family : 'Fredoka', sans-serif;
  font-size: 14px;
}

/*@font-face {
  font-family: 'robotoregular';
  src: url('roboto-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;*/

}
body {
  font-family: 'Fredoka', sans-serif;

}
span div {
  font-family: 'Fredoka', sans-serif;

}

h2 {
	font-size: 20px;
	color: var(--main-color) !important;
	font-weight: 500;
}
.croix {
  width: 12px;
  height: 12px;
  z-index: 10;
  position: absolute;
  left: 3px;
  top: 4px;
}
.croix span {
  width: 10px;
  height: 2.5px;
  background-color: black;
  display: block;
  position: absolute;
  top: 50%;
  transform: ;
  transition: background-color 0.3s ease-in-out;
  border-radius: 5px;
  right: 50%;
  transform: ;
  transform: translateY(-50%) translateX(50%) rotate(45deg);
}

.croix span::after {
  width: 10px;
  content: '';
  height: 2.5px;
  background-color: black;
  display: block;
  position: absolute;
  top: 50%;
  transition: background-color 0.3s ease-in-out;
  border-radius: 5px;
  right: 50%;
  transform: translateY(-50%) translateX(50%) rotate(-90deg);
}

.text {
  padding-left: 15px;
}
 button {
  top: 3px;
  position: absolute;
  width: 15px;
  border: none;
  left: 2px;
  height: 15px;
  background: none;
  z-index: 100;
}
     










.videsideral {
  width: 41px;
}


/********************************************
 * Démo 3 
 *******************************************/


input[type="checkbox"].tag_lmm {
  display: none;
}

input[type="checkbox"].tag_lmm:checked + label::before {
    content: url('check.svg');
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);
}
input[type="checkbox"].tag_lmm + label::before {
  content: url('checkpleinsvg.svg');
filter: invert(89%) sepia(9%) saturate(6996%) hue-rotate(166deg) brightness(96%) contrast(99%);position: absolute;  right: -94px;
  top: 6px;
}





input[type="checkbox"].tag_samedi {
  display: none;
}

input[type="checkbox"].tag_samedi:checked + label::before {
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);


    content: url('check.svg');

}


input[type="checkbox"].tag_samedi + label::before {
  content: url('checkpleinsvg.svg');
filter: invert(79%) sepia(54%) saturate(745%) hue-rotate(287deg) brightness(101%) contrast(94%);  position: absolute;
  right: -94px;
  top: 6px;
}

input[type="checkbox"].tag_nmix {
  display: none;
}

input[type="checkbox"].tag_nmix:checked + label::before {
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);

   content: url('check.svg');

}


input[type="checkbox"].tag_nmix + label::before {
  content: url('checkpleinsvg.svg');
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);position: absolute;
  right: -94px;
  top: 6px;
}
input[type="checkbox"].tag_apero {
  display: none;
}

input[type="checkbox"].tag_apero:checked + label::before {
      content: url('check.svg');
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);


    content: url('check.svg');

}


input[type="checkbox"].tag_apero + label::before {
  content: url('checkpleinsvg.svg');
filter: invert(97%) sepia(22%) saturate(7010%) hue-rotate(311deg) brightness(108%) contrast(105%);position: absolute;
  right: -94px;
  top: 6px;
}


input[type="checkbox"].tag_vide {
  display: none;
}

input[type="checkbox"].tag_vide:checked + label::before {
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);
      content: url('check.svg');


}


input[type="checkbox"].tag_vide + label::before {
  content: url('checkpleinsvg.svg');
  filter: invert(97%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(92%) contrast(83%);
position:absolute;
  right: -94px;
  top: 6px;
}
tr {
  height: 31px;
}

.apero_legend{
  content: url('checkpleinsvg.svg');
  margin-right: 5px;
filter: invert(97%) sepia(22%) saturate(7010%) hue-rotate(311deg) brightness(108%) contrast(105%);
}
.nmix_legend{
  content: url('checkpleinsvg.svg');
filter: invert(19%) sepia(6%) saturate(1412%) hue-rotate(182deg) brightness(86%) contrast(83%);
margin-right: 5px; 
}
.samedi_legend{
   content: url('checkpleinsvg.svg');
filter: invert(79%) sepia(54%) saturate(745%) hue-rotate(287deg) brightness(101%) contrast(94%); 
margin-right: 5px;
}
.lmm_legend{
  content: url('checkpleinsvg.svg');
margin-right: 5px;
filter: invert(84%) sepia(7%) saturate(4208%) hue-rotate(164deg) brightness(96%) contrast(98%);}
.vide_legend{
  content: url('checkpleinsvg.svg');
margin-right: 5px;
filter:invert(97%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(92%) contrast(83%);}
.inline-block {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  width: 161px;
  /* justify-content: space-between; */
}
.legend0 {
  padding: 4px;
  width: 100%;
  /* position: sticky; */
  top: 0px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  /* margin-left: 24px; */
  display: flex;
  justify-content: space-between;
}


.block_ligne {
  width: 100%;
  position: sticky;
  top: 0px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: unset;
  justify-content: space-around;
}

.week_block table {
	table-layout: fixed;
	min-width: max-content;
}

.pointjour {
	width: 20px;
}

.date_affichee_jour {
	width: 41.1833px;
}

.date_affichee_numero_mois {
	width: 69px;
}

.videsideral {
	width: 43px;
}