/*
 * Banner
 */

.mantalo_banner {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    cursor: default;
    height: 100vh;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    text-align: center;

    .logo_federations {
        -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        bottom: 7em;
        position: absolute;
        width: 100%;
        
        img {
            width: 12vh;
            margin: 0 0 0 20px;
            filter: drop-shadow(1px 1px 1px black);
            vertical-align: middle;
        }
    }
    .logo_meudon {
        position: absolute;
        bottom: 1em;
        right: 1em;
    }

    .logo_meudon img {
        width: 80%;
    }

    .logo_calendar {
        position: absolute;
        bottom: 0em;
        left: 0;
    }

    .logo_calendar img {
        width: 50%;
        height: auto;
        bottom: 1em;
        position: relative;
    }
} 



		#banner h2 {
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			display: inline-block;
			opacity: 1;
			padding: 0.35em 1em;
			position: relative;
			z-index: 1;
		}

			#banner h2:before, #banner h2:after {
				-moz-transition: width 0.85s ease;
				-webkit-transition: width 0.85s ease;
				-ms-transition: width 0.85s ease;
				transition: width 0.85s ease;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				background: #fff;
				content: '';
				display: block;
				height: 2px;
				position: absolute;
				width: 100%;
			}

			#banner h2:before {
				top: 0;
				left: 0;
			}

			#banner h2:after {
				bottom: 0;
				right: 0;
			}

		#banner p {
			letter-spacing: 0.225em;
		}

			#banner p a {
				color: inherit;
			}

		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 3.5s;
			-webkit-transition-delay: 3.5s;
			-ms-transition-delay: 3.5s;
			transition-delay: 3.5s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			bottom: 0;
			color: inherit;
			font-size: 0.8em;
			height: 5.5em;
			left: 50%;
			letter-spacing: 0.225em;
			margin-left: -8.5em;
			opacity: 1;
			outline: 0;
			padding-left: 0.225em;
			padding-bottom: 1em;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 16em;
			z-index: 1;
		}

		@media screen and (max-width: 736px) {
			#banner .more {
				height: 10em;
			}
		}

			#banner .more:after {			
				background-image: url("/images/site/icons/arrow.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				bottom: 4em;
				content: '';
				display: block;
				height: 1.5em;
				left: 50%;
				margin: 0 0 0 -0.75em;
				animation: jumpInfinite 1.5s infinite;
			}
			#banner .more2:after {
				content: " ";
				position: absolute;
				top: 12px;
				left: -10px;
				width: 16px;
				height: 16px;
				border-bottom: 4px solid;
				border-right: 4px solid;
				border-radius: 4px;
				transform: rotateZ(45deg);
				animation: jumpInfinite 1.5s infinite;
			}
			@keyframes jumpInfinite {
				0% {
				  margin-top: 0;
				}
				50% {
				  margin-top: 20px;
				}
				100% {
				  margin-top: 0;
				}
			  }
			  

		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 1s ease-in-out;
			-webkit-transition: opacity 1s ease-in-out;
			-ms-transition: opacity 1s ease-in-out;
			transition: opacity 1s ease-in-out;
			-moz-transition-delay: 1.25s;
			-webkit-transition-delay: 1.25s;
			-ms-transition-delay: 1.25s;
			transition-delay: 1.25s;
			content: '';
			background:rgba(255,255,255);
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}

		@media screen and (max-width: 736px) {
			#banner {
				height: auto;
				min-height: 0;
			}

				#banner h2 {
					font-size: 1.25em;
				}

				#banner br {
					display: none;
				}
		}
	
	body.is-preload #banner h2 {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		opacity: 0;
	}

		body.is-preload #banner h2:before, body.is-preload #banner h2:after {
			width: 0;
		}

	body.is-preload #banner .more {
		-moz-transform: translateY(8.5em);
		-webkit-transform: translateY(8.5em);
		-ms-transform: translateY(8.5em);
		transform: translateY(8.5em);
		opacity: 0;
	}



/* Landing */

	body.landing #page-wrapper {
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 0;
	}

	body.landing #footer {
		background-color: rgba(29, 36, 42, 0.9);
	}

	body.is-mobile.landing #page-wrapper {
		background: none;
	}

	body.is-mobile.landing #banner {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		min-height: 100vh;
	}
	
	body.is-mobile.landing section#cta {
		height: auto;
	}

	body.is-mobile.landing .main_logo {
		-webkit-filter: drop-shadow(1px 1px 1px #777777);
        		filter: drop-shadow(1px 1px 1px #777777);
		margin: 1em auto 0 auto;
		top: 0px;
		filter: drop-shadow(1px 1px 1px black);
	}

	body.is-mobile.landing .logo_calendar {
		display: none;
	}
	body.is-mobile.landing .logo_meudon {
		display: none;
	}
	body.is-mobile.landing #footer {
		background-color: #1d242a;
	}

	#video_back {
		height: 100vh;
		width: 100vw;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -2;
		filter: brightness(80%) blur(0px);
	}
	  
.main_logo {
    display: flex;
	position: absolute;
	filter: drop-shadow(1px 1px 1px black);
	left: 0;
    right: 0;
	top: 5%;
    margin: 0em auto 0 auto;
	max-width: 80vw ;
	max-height: 40vh;
}




.mantalo_membre {
    background-color: darkred; /* !important; */
    left: 0;
}
.mantalo_bureau {
    background-color: black; /* !important; */
    left: 0;
}

@media screen and (max-width: 736px) {
    .mantalo_banner {
        .logo_federations {
            bottom: 9em;
            left: 0 !important;
        }
        .logo_federations img {
            width: 8vh;
            margin: 0 5% 0 5%
        }	
    }
}

/*
 * Galeries Portraits (moniteurs)
 */
.wrapCards {
	overflow: hidden;
	margin: 10px;
	 margin-bottom: 0px;
 }
.boxCard {
	float: left;
	position: relative;
	width: 25%;
	border: 0;
	margin: 0;

	padding: 1.5em;

	.alt {
		border: 0;
		border-radius: 0;
		padding: 0;
	}
}
.boxInner {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
	margin: 0;
	border: 0;
 
 	img {
		width: 100%;
		height: 100%;
		border-radius: 0.8em;
	}
 	.titleBox {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: -50px;
		background: #000;
		background: rgba(0, 0, 0, 0.5);
		color: #FFF;
		padding: 5px;
		text-align: center;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		font-size: large;
		text-wrap: nowrap;
		white-space: nowrap;
		overflow: hidden;        /* Masque tout dépassement */
	}
}

.boxInner:hover .titleBox, .titleBox .div.titleBox:hover {	
	margin-bottom: 0;
 }

@media only screen and (max-width : 480px) {
	/* Smartphone view: 1 tile */
	.boxCard {
	   width: 50%;
	   padding-bottom: 50%;
	}
 }
 @media only screen and (max-width : 650px) and (min-width : 481px) {
	/* Tablet view: 2 tiles */
	.boxCard {
	   width: 25%; 
	   padding-bottom: 25%;
	}
 }
 @media only screen and (max-width : 1050px) and (min-width : 651px) {
	/* Small desktop / ipad view: 3 tiles */
	.boxCard {
	   width: 25%;
	   padding-bottom: 25%;
	}
 }
 @media only screen and (max-width : 3000px) and (min-width : 1051px) {
	/* Medium desktop: 4 tiles */
	.boxCard {
	   width: 20%;
	   padding-bottom: 20%;
	}
 }

 /*
 * Compteurs (landing page)
 */
.counters {
	color: #fff;
	padding: 40px 20px;

	display: flex;
	flex-direction: row;
	align-items: center;
}
.counter_container {
	max-width: 1100px;
	margin: 0 auto;
	overflow: auto;

	display: flex;
	flex-direction: row;
	align-items: center;
	align-items: start;
}
.counters .counter_container {
	display: flex;
	grid-gap: 30px;
	text-align: center;
	justify-content: center;
}
.counters i {
	color: lightskyblue;
	margin-bottom: 5px;
}
.counters h3 {
	font-size: normal;
	text-transform: none;
}
.counters .counter {
	font-size: xxx-large;
	margin: 10px 0;
}

@media (max-width: 700px) {
	.counters .counter_container {
		grid-template-columns: repeat(2, 1fr);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/*
 * News
 */
 .news {
	box-shadow: 0 0 30px rgb(3 6 108 / 30%);
	width: 50%;
	height: 30px;
	margin: 10px auto;
	overflow: hidden;
	border-radius: 8px;
	padding: 0px;
	-webkit-user-select: none;
	user-select: none;
	top: 0px;
    position: absolute;
    left: 0;
    right: 0;
	background: #ffffff78;
    color: midnightblue;
    font-weight: 600;

    span {
        float: left;
        color: #fff;
        padding: 6px;
        position: relative;
        top: 1%;
        border-radius: 10px;
        box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
        font: 16px;
        -webkit-font-smoothing: antialiased;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer
    }
    ul {
        padding-left: 20px;
        animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
        -webkit-user-select: none;
        border-radius: 10px;
        user-select: none;
        text-align: center;
        padding: 0px;

        li {
            list-style: none;

            a {
                color: #fff;
                font-weight : bold;
                text-decoration: none;
                border-radius: 10px;
                font: 14px;
                -webkit-font-smoothing: antialiased;
                -webkit-user-select: none;
                user-select: none;
            }
        }
    }
}

.news ul:hover { 
    animation-play-state: paused;
}
.news span:hover+ul {
    animation-play-state: paused;
} 

@keyframes ticker {
	0%   {	
			margin-top: 0em;
		}
	25%  {
			margin-top: -1.65em;
	}
	50%  {
			margin-top: -3.3em;
		}
	75%  {	
			margin-top: -4.95em;
	}
	100% {margin-top: 0}
}  

body.is-mobile.landing .news {
	display: none;
}  


@media screen and (min-width: 480px) {
    .news_mobile {
        display: none;
    }
}

/* (A) FIXED WRAPPER */
.news_mobile {
	overflow: hidden; /* HIDE SCROLL BAR */
	margin: 0 5.5em 0 2.7em;
	color: midnightblue;
	font-weight: 600;
  }
   
/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex; }

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}
   
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
	0% { transform: translate3d(100%, 0, 0); }
	100% { transform: translate3d(-400%, 0, 0); }
}
.hmove { animation: tickerh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }