body {
	
	font-family:"Nunito";
	-webkit-font-smoothing: antialiased !important;
	color:#333333;
}



html, body {
	margin:0;
	padding:0;
	/*min-width: fit-content;*/
	/*width:100%;*/
	box-sizing: border-box;
}


#topBanner {
	
	
	width:100%;
	padding:15px 0px;
	display:flex;
	justify-content: center;
	align-self: center;
	box-shadow:0px 5px 5px 1px #D3D3D3;
	background-color:white;
	box-sizing:border-box;
}


#topBanner div {
	
	margin:0px 15px;
}

#topBanner div:hover {
	
	text-decoration:underline;
	cursor:pointer;
}


#pagecontent {
	
	width:100%;
	background-color:white;
}



/* Index */

.maintitle {
	
	font-size:25px;
	font-style:italic;
	text-align:center;
	color:rgba(160,82,45, 1);
	margin-bottom:25px;
}

/*
.maintitle blockquote:before {
	
	content:'"';
}

.maintitle blockquote:after {
	
	content:'"';
}*/

.maintitle span {
	
	font-style:normal;
	color:#333333;
}


.reserve_contact {
	
	width:100%;
	margin:35px 0px;
	text-align:center;
	box-sizing:border-box;
}


.reserve_contact .btn {
	
	background-color:rgba(160,82,45, 1);
	color:white;
	padding:10px 15px;
	display:inline-block;
	font-weight:bold;
	border-radius:5px;
	cursor:pointer;
	font-size:20px;
	min-width:150px;
	margin:0px 2%;
}

.reserve_contact .btn:hover {
	
	background-color:rgba(160,82,45, 0.5);
}


.fermettes, .fermettes2 {
	
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background-color:#FAFAFA;
	border-radius:15px;
	box-sizing:border-box;
	padding:2%;
	display:flex;
}

.fermettes .imgs_shadow_zoom, .fermettes2 .imgs_shadow_zoom {
	
	border-radius:15px;
	width:35%;
	max-width:400px;
	max-height:300px;
	margin:0px 3%;
	height:auto;
	aspect-ratio: 16/9;
}


.fermettes .desc {
	
	display:inline-block;
	width:70%;
	font-size:15px;
	margin-left:5%;
	justify-content: center;
	align-self: center;
}


.fermettes2 .desc {
	
	display:inline-block;
	width:65%;
	font-size:15px;
	margin-right:5%;
	justify-content: center;
	align-self: center;
}


.fermettes .desc div, .fermettes2 .desc div {
	
	font-size:27px;
	font-weight:bold;
	margin-bottom:20px;
}


.titles {
	
	font-size:35px;
	font-weight:bold;
	margin:20px;
}


.moretext {
	display:none;
	text-align:center;
	font-size:20px;
	font-style:italic;
	color:gray;
}

.visite, .nous_retrouver {
	
	width:100%;
	background-color:#FAFAFA;
	padding:2% 0px;
	box-sizing:border-box;
}

.visite .btns_cats {
	
	
	display:flex;
	justify-content: center;
	align-self: center;
	flex-wrap: nowrap;
}

.visite .btns_cats .img_categorie {
	
	margin:0% 2%;
}



.details_visite  {
	
	display:none;
	width:100%;
	height:600px;
}

.details_visite > div {
	
	display:none;
	width:100%;
	justify-content: center;
	align-self: center;
	margin:5% 0%;
}


.details_visite .imgs_shadow_zoom {
	
	margin:0% 2%;
}





.access_desc {
	
	text-align:center;
	width:100%;
}

.access_desc img {
	
	width:90%;
	margin-left:auto;
	margin-right:auto;
	
	border-radius:15px;
}

.access_desc div {
	
	margin:10px;
	font-size:18px;
}



.nous_retrouver {
	

}

.contain_external {
	
	display:flex;
	justify-content: center;
	align-self: center;
}

.external {
	
	width:350px;
	height:70px;
	border-radius:15px;
	box-shadow:0px 0px 3px 1px #D3D3D3;
	overflow:hidden;
	cursor:pointer;
	margin:15px 2%;
	display:flex;
}

.external:hover {
	
	transform:scale(1.1);
	transition:0.5s ease;
	opacity:0.8;
}


.external div {
	
	height:100%;
	line-height:70px;
	width:70%;
	font-size:20px;
	font-weight:bold;
	cursor:pointer;
	padding-left:20px;
	color:white;
}

.external img {
	
	width:30%;
}



#airbnb {
	
	background-color:#FF5252;
	background:linear-gradient(#FF5252, #FF7272);
}

#airbnb img {
	
	transform:scale(0.7);
	 -webkit-filter: brightness(0) invert(1);
}


#crozon {
	
	background:linear-gradient(#606167, #828282);
}

#sharedhouse {
	
	background:linear-gradient(#8BC542, #E4EDB6);
}

#sharedhouse img {
	
	transform:scale(0.7);
}


#gitesfr {
	
	background:linear-gradient(#C2DC7B, #D2EC8B);
}

#gitesfr img {
	
	transform:scale(0.7);
	-webkit-filter: brightness(0) invert(1);
	width:70px;
}

#leboncoin {
	
	background:linear-gradient(#F66A2C, #F66A2C);
}

#leboncoin img {
	
	transform:scale(0.7);
	width:70px;
}


/* La région */


.fermettes3 {
	
	
	width:90%;
	background-color:#FAFAFA;
	border-radius:15px;
	box-sizing:border-box;
	padding:2%;
	margin-left:auto;
	margin-right:auto;
}

.fermettes3 img {
	
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
}

.fermettes3 div {
	
	margin-top:25px;
}





/* Contact */

#contain_contact {
	
	width:1050px;
	height:850px;
	
	margin-left:auto;
	margin-right:auto;
	
	display:flex;
	justify-content: center;
	align-self: center;
	flex-direction:column;
	flex-wrap:wrap;
}


.alert-confirm {
	
	display:inline-block;
	background-color:green;
	color: #155724;
	background-color: #d4edda;
	border:1px solid #c3e6cb;
	padding:15px;
	border-radius:5px;
}



#coords {
	
	width:500px;
    background-color: #EEEEEE;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 2%;
	display:inline-block;
}

#coords .line_coords {
	
	width:100%;
	box-sizing: border-box;
}

#coords .line_coords:not(:last-child) {
	
	width:100%;
	box-sizing: border-box;
	margin-bottom:40px;
}


#coords .line_coords div {

	font-size:25px;
	margin-bottom:10px;
}

#coords .line_coords div i {

	color:rgba(160,82,45, 1);
	margin-right:10px;
}

#coords .line_coords a {

	font-size: 21px;
	text-decoration:none;
	color:gray;
}




#googlemaps  {
	
	width:500px;
	border-radius: 15px;
	overflow:hidden;
	margin-top:20px;
}






#contactform {
	
	width:500px;
    background-color: #EEEEEE;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 2%;
	display:inline-block;
}

#contactform form {
	
	display:inline;
}

#contactform h3 {

	font-size:25px;
	margin-bottom:10px;
	padding:0;
	margin:0;
	margin-bottom:30px;
}


#contactform i {

	color:rgba(160,82,45, 1);
	margin-right:10px;
}

#contactform .line_contact  {

	width:100%;
	box-sizing: border-box;
	margin-bottom:30px;
}


#contactform .line_contact label  {

	width:100%;
	display:block;
	box-sizing: border-box;
}



#contactform .line_contact input  {

	width:100%;
	padding:5px;
	border:1px solid #D3D3D3;
	border-radius:5px;
	height:40px;
	box-shadow:inset 0px 2px 3px 1px #D3D3D3;
}


#contactform .line_contact textarea  {

	width:100%;
	padding:5px;
	border:1px solid #D3D3D3;
	border-radius:5px;
	height:300px;
	box-shadow:inset 0px 2px 3px 1px #D3D3D3;
}

#contactform input[type='submit'] {
	
	
	width:100%;
	background-color:rgba(160,82,45, 1);
	color:white;
	font-size:20px;
	padding:15px 0px;
	border:none;
	border-radius:5px;
	cursor:pointer;
}

#contactform input[type='submit']:hover {
	
	
	background-color:rgba(160,82,45, 0.7);
}





/* Livre d'or */

#contain_livre_d_or .album {
	
	margin-left:calc(50% - 220px);
	margin-right:auto;
	margin-top:200px;
	width:600px;
}


#livre_interactif {
	
	
	background-color: #EEEEEE;
    border-radius: 15px;
    box-sizing: border-box;
	box-shadow:0px 0px 5px 3px #D3D3D3;
	
	margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	
	width:900px;
	padding:2%;
}


/* Confidentialite */

#contain_confidentialite {
	
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

#contain_confidentialite h2 {
	
	margin-top:50px;
	font-size:30px;
}

#contain_confidentialite a {
	
	color:rgba(160,82,45, 1);
}




/* Tarifs */

#contain_tarifs {
	
	text-align:center;
}


#contain_tarifs table th {
	
	background-color:rgba(160,82,45, 1);
	color:white;
}


#contain_tarifs table  {
	
	width:300px;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse;
	border:1px solid #D3D3D3;
	margin-bottom:15px;
	margin-top:50px;
}

#contain_tarifs table td, #contain_tarifs table th {
	
	border:1px solid #D3D3D3
}

#contain_tarifs span {
	
	color:gray;
}


.petit_encadre {
	
	background-color:#FAFAFA;
	border-radius:15px;
	box-sizing:border-box;
	display:inline-block;
	padding:25px;
	position:relative;
}

.petit_encadre .fa-info-circle {
	
	margin-right:10px;
}

.petit_encadre a {
	
	color:rgba(160,82,45, 1);
}


#planning {
	
	width: 800px;
	height: 800px;
    margin: 0 auto;
	margin:2% auto;
	border:none;
}


#planning h2 {
	
	margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}






/* Réservation */

#reservation {
	
	width: 500px;
	margin-left:auto;
	margin-right:auto;
    background-color: #EEEEEE;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 2%;
}

#reservation input[type='text'], #reservation input[type='date'], #reservation input[type='tel'], #reservation input[type='email'], #reservation select {
	
	width: 100%;
    padding: 5px;
    border: 1px solid #D3D3D3;
    border-radius: 5px;
    height: 40px;
    box-shadow: inset 0px 2px 3px 1px #D3D3D3; 
}

#reservation input[type='date'], #reservation input[type='tel'], #reservation input[type='email'], #reservation select  {
	text-align:center;
}

#reservation textarea {
	
    width: 100%;
    padding: 5px;
    border: 1px solid #D3D3D3;
    border-radius: 5px;
    height: 200px;
    box-shadow: inset 0px 2px 3px 1px #D3D3D3;
	margin-bottom:25px;
}

#reservation h3 {
    font-size: 25px;
    margin-bottom: 10px;
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
}


#reservation .dates div:first-child {
	
	width: 47%;
	display:inline-block;
	margin:0px 2.5% 0px 0px;
}


#reservation .dates div {
	
	width: 47%;
	display:inline-block;
	margin:0px 0px 0px 2.5%;
}

#reservation .dates {
	
	margin-bottom:20px;
}

#reservation input[type='submit'] {
	
    width: 100%;
    background-color: rgba(160, 82, 45, 1);
    color: white;
    font-size: 20px;
    padding: 15px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#reservation input[type='submit']:hover {
	
	background-color:rgba(160,82,45, 0.7);
}

#reservation .teleffectif div:first-child {
	
	width: 65%;
	display:inline-block;
	margin:0px 2.5% 0px 0px;
}

#reservation .teleffectif div {
	
	width: 29%;
	display:inline-block;
	margin:0px 2.5% 0px 0px;
}


#reservation input[type='submit']:hover {
	
	background-color:rgba(160,82,45, 0.7);
}

#reservation i {
	
	font-size:14px;
	color:gray;
	margin-right:3px;
	margin-left:5px;
}


#reservation h3 i {
    color: rgba(160, 82, 45, 1);
    margin-right: 10px;
	font-size:25px;
}



::placeholder {
	color:#D3D3D3;
}



/* Plage Drone */

#contain_plage_drone {
	
	text-align:center;
	
}






/* Misc */


#imageviewer {
	
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.7);
	text-align:center;
	box-sizing:border-box;
	padding-top:5%;
	z-index:3;
}

#imageviewer img {
	
	max-width:90%;
	max-height:90%;
	margin-left:auto;
	margin-right:auto;
}




.zoomable:hover {
	
	transform:scale(1.05);
	transition:0.5s ease;
	background-color:#EEEEEE;
	cursor:pointer;
	box-shadow:0px 0px 5px 1px #D3D3D3;
}



.selected {
	
	font-weight:bold;
	text-decoration:underline;
}

@media only screen and (min-width: 430px) {

	#burgermenu, #burger {

		display:none;
	}
}


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

	body {

		padding:15px 1%;

	}

	#topBanner {

		display:none;
	}

	#burgermenu {

		padding-top:15px;
		display:none;
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		background-color:white;
		z-index:4;
		box-shadow:0px 0px 2px 1px gray;
		overflow:hidden;
		box-sizing:border-box;
	}

	#burgermenu div {

		padding:2px 15px;
		cursor:pointer;
		text-decoration: underline;
	}
	


	#burger {

		z-index:5;
		position:fixed;
		top:10px;
		right:10px;
		font-size:20px;
		border:1px solid #D3D3D3;
		padding:5px;
		border-radius:5px;
		background-color:white;
		cursor:pointer;
	}
	
	.fermettes, .fermettes2 {

		display:block;
		width:95%;
	}

	.fermettes .imgs_shadow_zoom, .fermettes2 .imgs_shadow_zoom  {

		width:95%;
		padding: 10px 0px;
	}

	.fermettes .desc, .fermettes2 .desc {

		width:90%;
		margin-top:10px;
	}

	.fermettes2 .desc {
		margin-left:15px;
	}

	.reserve_contact .btn {

		width:80%;
		margin:5px;
	}

	.visite {

		overflow-x: auto;
	}

	.btns_cats {
		width:400%;
		overflow-x: auto;
	}

	.details_visite {
		width:400%;
		overflow-x: auto;
	}

	.contain_external {

		display:block;
	}

	.external {
		width:95%;
	}


	#contain_contact {
		width:95%;
		display:block;
	}

	#coords,  #contactform {

		width:100%;
		padding:15px 15px;
	}

	#googlemaps {

		width:100%;
	}

	 #contactform {

		margin-top:15px;
	}

	#contain_livre_d_or {
		display:none;
	}

	#livre_interactif {
		width:320px;
		margin-top: 0px;
	}

	#contain_confidentialite {

		width:90%;
	}

	#planning {
		width:320px;
		height:500px;
	}


	#reservation {

		width:95%;
		padding:15px;
	}

	.teleffectif div, 
	#reservation .teleffectif div:first-child,  
	#reservation .dates div, 
	#reservation .dates div:first-child,
	#reservation .teleffectif div {

		width:95%;
		margin:10px 0px;
	}

	.videothumbs {

		width:95%;
		height:150px;
	}

	input, select {

		background-color:white;
	}


	#reservation select, #reservation input[type='date'], #reservation input[type='tel'] {

		width:105%;
	}

	quote {
		padding:0% 5%;
		display:block;
		text-align:center;
	}

	.maintitle span {

		padding:0% 5%;
	}

}