@font-face {
	font-family: "Komika Tight";
	src: url("/fonts/KOM_T.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Tight Italic";
	src: url("/fonts/KOM_T_I.ttf") format("truetype");
}

@font-face {
	font-family: "Komika";
	src: url("/fonts/KOM.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Bold";
	src: url("/fonts/KOM_B.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Italic";
	src: url("/fonts/KOM_I.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Bold Italic";
	src: url("/fonts/KOM_BI.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Kaps";
	src: url("/fonts/KOM_K.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Kaps Bold";
	src: url("/fonts/KOM_K_B.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Kaps Italic";
	src: url("/fonts/KOM_K_I.ttf") format("truetype");
}

@font-face {
	font-family: "Komika Kaps Bold Italic";
	src: url("/fonts/KOM_K_BI.ttf") format("truetype");
}

@font-face {
	font-family: "Great Vibes";
	src: url("/fonts/GreatVibes.ttf") format("truetype");
}

html,
body {
	height: 100%;
}

body {
	background: linear-gradient(43deg, #68a9ff, #d45555);
	background-size: auto;
	background-position: left;
	background-attachment: fixed;
	background-repeat: no-repeat;
	padding: 16px 0;
	height: fit-content;
}

header > img {
	width: 100%;
	margin-top: 16px;
}

header > div {
	position: absolute;
	top: 11vw;
	margin-left: 30%;
	text-align: center;
	font-size: 3em;
	color: red;
	font-weight: bolder;
	border: 2px solid red;
	padding: 0 15px;
}

footer {
	text-align: center;
}

footer > blockquote {
	font-family: 'Great Vibes', cursive;
	font-weight: bold;
	font-size: 1.75em;
	margin: 0;
}

footer > img {
	width: 100%;
}

img {
	max-width: 100%;
}

hr {
	display: block;
    width: 89%;
    border-top: 1px solid rgba(0,0,0,.5);
    margin-top: 0;
}

p.text-center {
	text-indent: 0 !important;
}

.nav-card {
	border: 2px solid black;
	border-radius: 2px;
}

.container-lg {
	background-color: #fff;
	box-shadow: 0px 0px 40px 1px rgb(0 0 0 / 50%), 0 2px 10px 0 rgb(0 0 0 / 50%);
	min-height: 100%;
	padding: 0 15px 15px 15px;
	display: flex;
	flex-direction: column;
}

.bg-prim {
	background-color: #808080;
}

.bg-sec {
	background-color: #e6e6e6;
}

@media (max-width: 991.98px) { /* MOBILE */
	body {
		background: linear-gradient(43deg, #68a9ff70, #d4555570);
		background-size: auto;
		background-position: left;
		background-attachment: fixed;
		background-repeat: no-repeat;
		padding: 0;
	}

	.container-lg {
		background-color: transparent;
		box-shadow: none;
	}

	header {
		margin: 0;
	}

	footer {
		margin: 0;
	}

	.title-card {
		margin-left: 0 !important;
	}

	.bd-image,
	.bd-card {
		margin-left: 0 !important;
	}

	.bd-card-title {
		margin: -2px 0 0 -2px !important;
		border-radius: 2px !important;
		width: calc(100% + 4px) !important;
	}

	.mobile-nav {
		display: block;
		box-shadow: 0px -2px 6px 2px black;
	}

	.nav-link {
		color: grey;
	}

	.nav-link:hover {
		color: black;
		background-color: rgb(255 255 255 / 40%);
	}

	.col-lg-8.fix-padding {
		padding-right: 15px !important;
		padding-left: 0 !important;
	}

	.col-lg-6.fix-padding {
		padding-right: 15px !important;
	}

	.modal {
		padding-right: 0 !important;
	}

	.mob-no-margin {
		margin: 0 !important;
	}

	.fix-pad {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.auteur-card .bd-auteur-content,
	.parrain-card .bd-auteur-content,
	.parrain-card .bd-auteur-content .main-content	{
		height: auto !important;
		max-height: fit-content !important;
	}
}

@media (min-width: 992px) { /* LARGE */
	.mobile-nav {
		display: none;
	}

	.nav-link {
		color: black;
	}

	.nav-link:hover {
		color: #007bff;
		background-color: #ffffff;
	}

	.bd-image {
		margin-left: 15px;
	}

	.fixed-pad-in > div:nth-child(even) {
		padding-left: 7.5px;
	}

	.fixed-pad-in > div:nth-child(odd) {
		padding-right: 7.5px;
	}

	.lg-right-divider {
		border-right: 1px solid grey;
	}
}

.height-fixer {
	height: fit-content;
}

.flex {
	display: flex;
}

.flex .bd-card {
	width: 100%;
}

.no-margin {
	margin: 0 !important;
}

.nav-col {
	display: flex;
	flex: 0 1;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 0;
}

.content-col {
	display: flex;
	flex-direction: column;
	padding-top: 15px;
	padding-bottom: 15px;
}

.container-lg > .row {
	flex: 1;
}

nav.classic {
	width: 250px;
}

.nav-card {
	background-color: #e6e6e6;
}

.nav-card:not(:first-child),
.bd-card:not(:first-child) {
	margin-top: 15px;
}

.contact-icon {
	width: 48px;
	margin-right: 8px;
}

h2.contact-link {
    font-family: "Komika";
    color: black;
    margin-bottom: 16px;
}

.bd-card-content > p:last-child {
	margin-bottom: 0;
}

.nav-card-title {
	font-family: "Komika Kaps";
	border: 2px solid black;
	border-radius: 8px;
	padding: 4px 12px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -12px;
	background-color: #ffd24c;
	color: #007bff;
	font-size: 1.5rem;
	text-align: center;
}

.nav-link {
	color: black;
	font-family: "Komika Kaps Bold";
}

.nav-link:hover {
	color: #007bff;
	background-color: #ffffff;
}

#content {
	flex: 1;
}

h2 {
	font-family: "Komika Kaps";
}

.bd-card {
	border: 2px solid black;
	border-radius: 2px;
	margin-left: 12px;
	background-color: #e6e6e6;
}

.bd-card.no-gap {
	margin-top: -2px;
}

.bd-image {
	background-color: #e6e6e6;
	border: 2px solid black;
	border-radius: 2px;
}

.bd-card-title {
	border: 2px solid black;
	border-radius: 8px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 4px 12px;
	margin-left: -19px;
	margin-right: 15px;
	margin-top: 8px;
	margin-bottom: 0;
	background-color: #ffd24c;
	color: #007bff;
}

.bd-top-centered-title {
	font-family: "Komika Kaps";
	border: 2px solid black;
	border-radius: 8px;
	padding: 4px 12px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: -12px;
	margin-bottom: 0;
	background-color: #ffd24c;
	color: #007bff;
	font-size: 1.25rem;
	text-align: center;
}

.bd-card.with-top-title {
	margin-top: 16px;
	margin-left: 0;
}

.bd-parrain-name {
	border-bottom: 2px solid black;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0 8px;
	margin-bottom: 0;
	background-color: #ffd24c;
	color: #007bff;
	width: 100%;
}

.parrain-card .bd-card-content {
    height: calc(100% - 40px);
}

.auteur-card div {
	height: -webkit-fill-available;
}

.auteur-card img {
	height: 70px;
	max-width: fit-content;
}

.auteur-card {
	display: flex;
    width: 100%;
    min-height: 90px;
    border: 2px solid black;
}

.parrain-card {
    width: 100%;
    border: 2px solid black;
	min-height: 144px;
    margin-top: 8px;
}

.parrain-card img {
	height: 128px;
	max-width: fit-content;
}

.card-content-left {
	width: fit-content;
	height: 100%;
}

.card-content-right {
	flex: auto;
	margin-left: 8px;
	height: 100%;
}

.space-up {
	margin-top: 16px;
}

.bd-auteur-content {
	padding: 0;
	font-family: "Komika";
	text-align: justify;
	width: 100%;
	overflow: hidden;
}

.parrain-card .bd-auteur-content {
	height: 144px;
}

.auteur-card .bd-auteur-content {
	height: 86px;
}

.bd-card-content {
	padding: 8px;
	font-family: "Komika";
	text-align: justify;
	width: 100%;
	height: 100%;
}

.parrain-card .bd-auteur-content .main-content {
    height: 144px;
}

.parrain-card .bd-auteur-content .second-content {
    min-height: 144px;
}

.auteur-card .bd-auteur-content .main-content {
    height: 86px;
}

.bd-auteur-content .second-content {
    height: fit-content;
}


.bd-auteur-content .main-content,
.bd-auteur-content .second-content {
	width: 100%;
    display: flex;
	padding: 8px;
	z-index: 0;
	background-color: #E6E6E6;
}

.bd-auteur-content .unique-content {
	width: 100%;
    display: block;
	padding: 8px;
	z-index: 0;
	background-color: #E6E6E6;
}

.modal p:last-child,
.main-content > p:last-child,
.second-content > p:last-child,
.unique-content > p:last-child {
	margin-bottom: 0;
}

.offset-l-0 {
	margin-left: 0 !important;
}

.col-left {
	padding-right: 4px;
}

.col-right {
	padding-left: 4px;
}

.col-left-in {
	padding-left: 0;
	padding-right: 4px;
}

.col-right-in {
	padding-left: 4px;
}

.toggle-button {
	height: inherit;
    display: block;
    width: calc(100% - 34px);
    position: absolute;
    z-index: 162;
}

.toggle-button,
.pointer {
	cursor: pointer;
}
a.active {
	color: #0a86ab;
}

.home {
	text-align: center;
}

.home > a {
	background-color: grey;
		color: white;
}

.title-card {
	border: 2px solid black;
	border-radius: 2px;
	margin-left: 12px;
	background-color: grey;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	font-family: 'Komika Kaps';
	font-size: 2em;
	padding: 4px;
}

.title-card > p {
	margin: 0;
}

p.center {
	text-align: center;
}

.affiche-card,
.affiche-card > a,
.affiche-card > a > img {
	width: inherit;
}

.affiche-card {
	padding: 4px;
	height: 100%;
	border: 2px solid black;
	border-radius: 2px;
	background-color: #ffffff;
}

.affiche-card > div {
	position: sticky;
	bottom: 17px;
	text-align: center;
	background-color: #d0d0d0;
	margin: -4px -4px 4px -4px;
	border-bottom: 2px solid black;
	font-family: 'Komika Italic';
}

.affiche {
	padding: 0px 15px 15px 0;
}

.row.affiches {
	margin-top: 15px;
	margin-left: 15px;
}

.nav-title {
	display: inherit;
	left: 90px;
	position: absolute;
	font-family: 'Komika Kaps Bold';
	color: silver;
	font-size: 1.5em;
}

.mobile-nav h4 {
	font-family: 'Komika Kaps Bold';
	color: #007bff;
}

.content-height {
	display: block;
	height: fit-content;
}

.see-more {
    color: grey;
    text-align: right;
    text-decoration: underline;
	margin-bottom: 0;
}

.modal-content {
    border: none !important;
    border-radius: 0 !important;
}

.modal-dialog {
    border: 2px solid black;
    border-radius: 2px;
}

.modal-header {
    border-bottom: 2px solid black;
    background-color: #ffd24c;
    border-radius: 0;
}

button.close {color: #000;opacity: 1;}

h5.modal-title {
    font-family: 'Komika Kaps Bold';
}

.modal-body p {
    font-family: "Komika";
    text-align: justify;
    text-indent: 2em;
}

.modal-footer button {
    border: 2px solid black;
    color: black;
    font-family: 'Komika Kaps';
    background-color: #FFF;
}

.modal-footer {
    background-color: lightgray;
    border-top: 2px solid black;
    border-radius: 0;
}

.btn,
.form-control,
.with-border {
    border: 2px solid black;
}

.with-border {
    border-radius: 4px;
}