/* Feuille de styles CSS pour le site jeromedeluca.fr. Intégration sur jeromedemuca.fr 2021-10-31
Dernière mise à jour le 10/10/2018 */

#buttons > div {
	padding: 1rem 1rem 2rem 1rem;
	cursor: pointer;
}
#buttons .nav-title {
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1.4rem;
	color: inherit;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}
#buttons .nav-text {
	height: 65%;
	margin: 0;
	padding: 0;
}
#buttons .nav-bouton {
	margin: 0;
	padding: 0;
}
.open, .closed:hover, .closed:focus, .closed:active, .open:hover, .open:focus, .open:active, #prof1, #guitar1, compo1 {
	outline: none;
	-moz-transition-property: background;
	-moz-transition-duration: .3s;
	-o-transition-property: background;
	-o-transition-duration: .3s;
	-webkit-transition-property: background;
	-webkit-transition-duration: .3s;
	transition-property: background;
	transition-duration: .3s;
	font-style: normal;
}

.blabla {
	display: none;
	padding: 1rem;
}
.blabla > p:first-child {
	padding: 1rem;
}
.blabla h4 {
	font-size: 1.2rem;
}
.accordion-title {
	padding: 0.75rem!important;
}
.accordion-content {
	padding: 2rem;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	border-left-width: 1rem;
}

#prof1, #prof:hover, #prof:focus, #prof:active, #prof[class~="open"], .couleur1 {
	background: #E6E3D9;
	background: rgba(230, 227, 217, 0.6);
}
#guitar1, #guitar:hover, #guitar:focus, #guitar:active, #guitar[class~="open"], .couleur2 {
	background: #E8EAEF;
	background: rgba(232, 234, 239, 0.6);
}
#compo1, #compo:hover, #compo:focus, #compo:active, #compo[class~="open"], .couleur3 {
	background: #EFE8E8;
	background: rgba(239, 232, 232, 0.6);
}
.open:hover, .open:focus, .open:active {
	background: #828282;
	background: rgba(130, 130, 130, 0.6);
}

table tr td:first-child {
	width: 8rem;
}

.audio-comment {
	font-size: 1rem;
	color: #7C7C7C;
	font-style: italic;
}
.yt-image {
	display: block;
}
.yt-marg-a {
	margin: -40% 0 40% 45%;
}
.yt-marg-b {
	margin: -35% 0 35% 45%;
}


#navigation-container {
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 64px;
	height: 86px;
	border-radius: 2rem;
	background-color: #E9E9E9;
	border: 1px solid black;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}

#navigation-top {
	visibility: hidden;
	height: 42px;
	background: url("/images/arrow-top.png") no-repeat center top;
	cursor: pointer;
}

#navigation-bottom {
	visibility: hidden;
	height: 42px;
	background: url("/images/arrow-bottom.png") no-repeat center top;
	cursor: pointer;
}

/*======================================================================================================================== */
/*               ========================================================================================================= */
/* MEDIA QUERIES ========================================================================================================= */
/*               ========================================================================================================= */
/*======================================================================================================================== */
@media screen and (min-width: 64em) {
	#buttons .nav-title { font-size: 1.1875rem; }
}
@media screen and (min-width: 40em) {
	#buttons .nav-title { font-size: 1.9375rem; }
}

@media screen and (max-width: 39.9375em) {
	.yt-image {
	width: 12%!important;
	height: 12%!important;
	}
}

@media print{
	#buttons .nav-title {
		orphans: 3;
		widows: 3;
		page-break-after: avoid;
	}
}