/* CSS Document */

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

h2 {
	font-family: 'Playfair Display', serif;
	background-position: left 2.5px;
	z-index: 99;
	position: sticky;
}

strong {
	font-weight: 501;
}

.navbar {
	padding: 0;
}

.navbar-expand-lg .navbar-collapse {
	justify-content: flex-end;
}

#couverture {
	background: url("img/fond.jpg") no-repeat center;
}

#couverture2 {
	background: url("img/geo.jpg") no-repeat center;
}

#couverture3 {
	background: url("img/plage_drone.jpg") no-repeat center;
}

#couverture4 {
	background: url("img/fleur.jpg") no-repeat center;
}

#couverture5 {
	background: url("img/bateau.jpg") no-repeat center;
}

#couverture6 {
	background: url("img/villa_facade.jpg") no-repeat center;
}

#couverture7 {
	background: url("img/cafe.jpg") no-repeat center;
}

#couverture, #couverture2, #couverture3, #couverture4, #couverture5, #couverture6, #couverture7 {
	min-height: 100vh;
	color: white;
	padding-top: 20px;
	background-size: cover;
}

.p_accueil .bg-light {
	width: 80%;
	margin: auto;
}

.p_accueil h1 {
	text-align: center;
	padding-top: 15%;
	font-size: 70px;
}

.p_accueil p {
	text-align: center;
	font-size: 19px;
	text-shadow: 2px 2px 4px #030303;
}

#accueil img {
	width: 60%;
	box-shadow: 50px 50px 0 0 #221F19;
}

#accueil .row:nth-child(3) img {
	box-shadow: -50px -50px 0 0 #221F19;
}

#accueil {
	background: url("img/palmier.png") no-repeat 650px 390px;
	background-size: 320px;
}

#accueil .row {
	padding: 50px 0;
}

#accueil .container .row:nth-child(2) .col:nth-child(2), #accueil .container .row:nth-child(3) .col:nth-child(2) {
	text-align: right;
}

#blocs {
	padding-top: 100px;
	text-align: center;
}

#blocs h3 {
	font-size: 20px;
	font-weight: 501;
	padding: 20px 0;
}

#blocs a {
	display: block;
	background-color: #221F19;
	color: white;
	padding: 10px;
	text-decoration: none;
	transition: all 0.3s;
}

#blocs a:hover {
	background-color: #57544F;
}

#blocs p {
	height: 110px;
	font-size: 15px;
	padding: 0 8px;
}

.sous_titre {
	position: relative;
}

.blue_line {
	background-color: #DFEEF5;
	position: absolute;
	width: 55vw;
	height: 9vh;
	margin-left: -82px;
	margin-top: -22px;
}

footer {
	background-color: #221F19;
	color: white;
	margin-top: 100px;
	text-align: center;
}

footer a {
	text-decoration: none;
	transition: all linear 0.3s;
}

.title_footer {
	text-transform: uppercase;
	border-bottom: 1px solid;
	margin-bottom: 20px;
	padding-top: 17px;
	font-size: 23px;
	font-weight: bolder
}

footer ul {
	padding: 0;
}

footer a:hover {
	text-decoration: underline;
}

.text {
	width: 80%;
	padding: 100px 0;
}

#geographie {
	background: url("img/carte_golf.svg") no-repeat 600px 150px;
	background-size: 50%;
}

span {
	font-family: 'Patrick Hand SC', cursive;
	font-size: 50px;
	display: contents;
}

.pastille_position {
	position: relative;
	padding-top: 100px;
}

.pastille {
	background-color: #FBF8F3;
	width: 70px;
	height: 70px;
	position: absolute;
	-webkit-box-shadow: -10px -10px 0 0 #DFEEF5;
	box-shadow: -10px -10px 0 0 #DFEEF5;
	left: -13px;
	top: 65px;
	z-index: -1;
}

.marron {
	background-color: #221F19;
	position: relative;
}

.marron img {
	position: absolute;
	top: 25px;
	right: 25px;
}

.beige {
	background-color: #F2ECDD;
}

#nous .container-fluid .row, #geographie .container-fluid .row {
	height: 60vh;
	margin-right: 80px;
}

#rentabilite .beige, #villa .beige {
	width: 80%;
	float: right;
	-webkit-box-shadow: -20px 20px 0 0 #221F19;
	box-shadow: -20px 20px 0 0 #221F19;
}

#villa .marron {
	width: 80%;
	float: left;
	-webkit-box-shadow: 20px -20px 0 0 #F2ECDD;
	box-shadow: 20px -20px 0 0 #F2ECDD;
}

.retour {
	clear: both;
}

.soustitre_rent {
	text-transform: uppercase;
	font-weight: 501;
	font-size: 26px !important;
}

#chiffres li {
	list-style: square;
}

#villa .beige p, #villa .marron p {
	font-size: 11px;
}

#villa .marron p {
	color: white;
}

#villa {
	background: url("img/plan_dessin.svg") no-repeat 627px 179px;
	background-size: 50%;
	position: relative
}

#villa #plan {
	position: absolute;
	z-index: -1;
	bottom: 40px;
	width: 80%;
}

.form-control, .form-control:focus {
	background-color: #F2ECDD;
	border: white;
}

#check {
	padding: 70px 0 25px;
}

.form-check-input:checked {
    background-color: #221F19;
    border-color: #221F19;
}

#contact label {
	font-weight: 501;
}

#contact legend {
	text-decoration: underline;
}

#contact .btn-primary:focus, #contact .btn-primary:hover {
	background-color: #57544F;
	border-color: white;
}

#contact .btn-primary {
    background-color: #221F19;
    border-color:white;
}

.zoomdiv {
	transition: all 0.3s ease-out;
	background-color: #F2ECDD;
}

.zoomdiv:hover {
	transform: scale(1.1);
}

.navbar-toggler-icon {
	width: 1em;
	height: 1em;
}

.navbar-light .navbar-toggler {
    color: white;
    border-color: white;
}

.navbar-toggler:focus {
    box-shadow: 0;
}

@media (max-width: 1199.98px) {
	.p_accueil nav {
		font-size: 13px;
	}
}

@media (max-width: 991.98px) {

	.p_accueil h1 {
		padding-top: 22%;
	}
	
	#accueil img {
		width: 100%;
		box-shadow: -10px -10px 0 0 #221F19;
	}
	
	#accueil .row:nth-child(3) img {
		box-shadow: 10px 10px 0 0 #221F19;
	}
	
	#accueil, #geographie, #villa {
		background: none;
	}
	
	.zoomdiv {
		margin-bottom: 23px;
	}
	
	#nous .container-fluid .row, #geographie .container-fluid .row {
		height: 37vh;
	}
	
	#villa #plan {
		display: none;
	}
	
	.blue_line {
		width: 75vw;
		height: 6vh;
	}
}

@media (max-width: 575.98px) {
	
	body {
		font-size: 13px;
		overflow-x: hidden;
	}
	.p_accueil h1 {
		padding-top: 50vh;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 50px;
		font-weight: 501;
	}
	
	.p_accueil p {
		font-size: 18px;
		font-weight: 501;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#accueil img {
		margin: auto;
		display: block;
		width: 60%;
	}
	
	#accueil .row:nth-child(2) {
		flex-wrap: wrap-reverse;
	}
	
	.blue_line {
		width: 100vw;
	}
	
	.zoomdiv {
		margin: 0 15px 30px;
	}
	
	#geographie .text, #villa .text {
		width: 100%;
	}
	
	#geographie span {
		line-height: 0;
	}
	
	#nous .container-fluid .row, #geographie .container-fluid .row {
		height: 15vh;
	}
	
	
	.title_footer {
		font-size: 15px;
	}
	
	.pastille {
		display: none;
	}
	
	#accueil .row {
		padding: 30px 0;
	}
	
	#geographie .beige, #geographie .marron, #nous .beige, #nous .marron {
		background: none;
	}
	
	#geographie .marron img, #nous .marron img {
		max-width: 200%;
		top: -55px;
		right: -20px;
	}
	
	.pastille_position {
		padding-top: 70px;
		padding-bottom: 40px;
	}
}