body{
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}

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

b {
	font-weight: 600;
}

.citation {
	font-family: 'Caligna';
	color: #1E325C;
	position: absolute;
	top: 650px;
	left: 0px;
	background-color: white;
	padding: 15px 25px 15px 75px;
	font-size: 62px;
}

nav li {
	font-size: 16px;
	font-weight: 600;
}

nav .nav-link {
	color: #1E325C;
	font-size: 1.1rem;
}
nav .nav-link:hover {
	color: #CE1327;
}

nav img {
	max-width: 165px;
}

.carousel_accueil {
	width: 100vw;
	height: 95vh;
	background: url(images/carousel_accueil.JPG);
	max-width: 100%;
	background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
}

#histoire {
	position: relative;
}

	#histoire #bg{
		background: url(images/plan_background.JPG);
		background-size: cover;
		height: 85vh;
		opacity: 0.2;
		z-index: 1;
		position: absolute;
		background-size: cover;
  	background-repeat:no-repeat;
  	background-position:center;
	}

	#histoire .col {
		text-align: center;
		margin: auto;
		height: 85vh;
		width: 65vw;
		font-size: 24px;
		opacity: 1;
		z-index: 2;
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	
	#histoire .col h1 {
    width: 65vw;
    line-height: 150%;
    margin-top: 12%;
    font-size: 36px;
    font-weight: 600;
	}

		#histoire .col p{
			width: 65vw;
			line-height: 150%;
			margin-top: 20px;
	}


	#histoire p {
		text-align: justify;
	}


#bandeau_accueil {
	background: url(images/beach_accueil.jpg);
	background-size: cover;
	width: 100%;
	height: 60vh;
	margin-top: 50px;
	position: relative;
	background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
}

#bonheur {
	font-family: 'Caligna';
	color: #1E325C;
	position: absolute;
	top: 30%;
	right: 0px;
	background-color: white;
	padding: 15px 75px 15px 25px;
	font-size: 48px;
}


footer {
	background-color: #1f325b;
	color: white;
	padding: 50px;
	line-height: 150%;
	text-align: center;
}

	#footer_left {
		padding-right: 50px;
	}

		#footer_left a:hover {
			color: #CE1327;
		}

	#footer_right {
		padding-left: 50px;
	}

	#footer_right a {
			text-decoration: none !important;
			color: white;
			transition: all 0.2s;
		}

	#footer_right a:hover {
			color: #CE1327;
		}

		footer img {
		max-width: 200px;
	}

@media (max-width: 1400px) {

}


@media (max-width: 1200px) {
	#histoire .col h1 {
    font-size: 34px;
	}
}


@media (max-width: 992px) {
	#footer_right {
			padding-left: 0px;
			margin-top: 25px;
		}

		#footer_left {
			padding-right: 12px;
			margin-bottom: 25px;
		}

		#histoire .col {
			height: 70vh;
		}

		#histoire #bg {
			height: 70vh;
		}

		.carousel_accueil {
		height: 60vh;
		}

		.citation {
	    top: 273px;
	    background-color: white;
	    padding: 10px 20px 10px 70px;
	    font-size: 55px;

		}

		#histoire .col p {
	   font-size: 22px;
		}

		#histoire .col h1 {
    font-size: 26px;
		}
}



@media (max-width: 770px) {
	.carousel_accueil {
		height: 50vh;
	}

	.citation {
    top: 273px;
    background-color: white;
    padding: 10px 20px 10px 70px;
    font-size: 40px;

	}

	#histoire .col p {
	   font-size: 18px;
		}

	
}


@media (max-width: 576px) /*md*/{
		#histoire .col p {
	   font-size: 16px;
		}

		.navbar-brand {
			width: 65%;
		}

		.navbar-brand img {
			width: 90%;
		}

		.citation {
    top: 195px;
    padding: 10px 20px 10px 70px;
    font-size: 26px;
	}

	#histoire #bg {
    height: 100%;
	}

	#histoire .col {
    height: auto;
    margin-bottom: 50px;
	}

	#bandeau_accueil {
		display: none;
	}

	#footer_left {
		display: none;
	}

	footer li {
		font-size: 12px;
	}

	footer img {
		max-width: 200px;
	}

	#histoire .col h1 {
    font-size: 20px;
	}
}