site-aurore/assets/css/perso.css

/***********************************************/
/*                  Sous-menu                  */
/***********************************************/

#header nav ul.left {
	position: absolute;
	right: 50%;
	border-radius: 4px 0 0 4px;
}

#header nav ul.right {
	position: absolute;
	left: 50%;
	border-left: 0;
	border-radius: 0 4px 4px 0;
}

#header nav ul.simple {
	display: none;
}

	#header nav ul li {
		display: block;
		position: relative;
		width: max-content;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -ms-max-content;
	}

		#header nav ul li ul {
			display: none;
			z-index: 1000;
			position: absolute;
			width: calc(100% + 2px);
			border-radius: 0 0 4px 4px;
			left: -1px;
		}

			#header nav ul li ul li {
				border-left: 0;
				border-top: solid 1px #ffffff;
				width: 100%;
			}

			#header nav ul li ul li:first-child {
				border-top: 0;
			}

		#header nav ul li:hover ul {
			display: block;
		}

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

	#header nav ul {
		max-width: none;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -ms-max-content;
		width: max-content;
	}

		#header nav ul li {
			width: 100%;
		}

}

@media screen and (max-width: 528px) {
	
	#header nav ul.left, #header nav ul.right {
		display: none;
	}

	#header nav ul.simple {
		display: block;
	}

}



/***********************************************/
/*          Couleur non transparentes          */
/***********************************************/

#header nav ul {
	background-color: rgba(27, 31, 34, 0.85);
}

#header .content {
	background-color: rgba(27, 31, 34, 0.85);
}



/***********************************************/
/*                   Soutien                   */
/***********************************************/

#header .soutien {
	background-color: rgba(27, 31, 34, 0.85);
	height: 100%;
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	margin-top: calc(2.75rem + 3.5rem);
}

	#header .soutien .left, #header .soutien .right {
		margin: 0 2rem;
	}

	#header .soutien span {
		vertical-align: middle;
	}

	#header .soutien a {
		border-bottom-color: transparent;
	}

		#header .soutien img {
			height: 130px;
			vertical-align: middle;
			padding: 10px;
		}

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

	#header .soutien {
		margin-top: calc(2.75rem + 2rem);
	}

		#header .soutien img {
			height: 100px;
		}

}

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

	#header .soutien {
		margin-top: calc(2*3rem + 2rem);
	}

		#header .soutien .left, #header .soutien .right {
			float: none;
		}
	
}

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

	#header .soutien {
		margin-top: calc(2rem);
	}

		#header .soutien img {
			height: 70px;
		}

}

.left {
	float: left;
}

.right {
	float: right;
}




/***********************************************/
/*             Ajustement vertical             */
/***********************************************/

body:not(.is-article-visible) #wrapper {
	padding: 0;
}




/***********************************************/
/*                   Events                    */
/***********************************************/

.event {
	margin: 2rem;
	position: relative;
	border: 1px solid #ffffff;
	border-radius: 4px;
	display: block;
}

	.event:hover {
		background-color: rgba(255, 255, 255, 0.075);
		border-bottom-color: #ffffff;
	}

	.event::before {
		content: '';
		display: block;
		position: absolute;
		top: calc(-2rem - 1px);
		left: calc(50% - 1px);
		width: 1px;
		height: calc(2rem + 1px);
		background: #ffffff;
	}

	.event .date, .event .title {
		position: absolute;
		top: 0.5rem;
		font-size: 1.1rem;
		color: #ffffff;
		font-weight: 600;
		letter-spacing: 0.1rem;
	}

		.event .date {
			right: 1rem;
		}

		.event .title {
			left: 1rem;
		}

	.event .description {
		max-height: 20rem;
		overflow: hidden;
		border-top: 1px solid #ffffff;
		margin-top: 3rem;
		padding: 15px;
	}

#main article .major .date {
	position: absolute;
	right: 2rem;
	top: 4.5rem;
}

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

	#main article .major .date {
		right: 1.5rem;
		top: 3.5rem;
	}

}

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

	#main article .major .date {
		right: 1rem;
		top: 3rem;
	}

}

#main article .previous {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	text-indent: 4rem;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

	#main article .previous::before {
		-moz-transition: background-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		content: '';
		display: block;
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 100%;
		background-position: center;
		background-image: url("../images/baseline_arrow_back_white_24dp.png");
		background-size: 20px 20px;
		background-repeat: no-repeat;
	}

		#main article .previous:hover::before {
			background-color: rgba(255, 255, 255, 0.075);
		}