/*TELEPHONE*/
@media only screen 
  and (max-device-width: 812px) 
{
.page
{
	height: 100%;
	width: auto;
}
#total
{
	position: absolute;
	top: 0%;
	left: 0%;
	height: 200%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#page_web
{
	height: 50%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

#page_droite
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
	height: 50%;
	width: 100%;
}

#about p
{
	color: black;
	text-align: justify;
	font-size: 1.2em;
	font-family: Glacial Indifference;
	height: 100%;
}

#mapstr
{
	height: 25%;
	width: 99%;
}
}
/*ORDINATEUR*/
@media screen 
  and (min-device-width: 800px) 
{
.page
{
	height: 100%;
	min-width: 480px;
	width: 49.8%;
}
#total
{
	position: absolute;
	top: 0%;
	left: 0%;
	height: 200%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#page_web
{
	height: 50%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

#page_droite
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	

}

#about p
{
	color: black;
	text-align: justify;
	font-size: 1.05em;
	font-family: Glacial Indifference;
	height: 100%;
}

#mapstr
{
	height: 50%;
	width: 99%;
}
}


@font-face {
    font-family: BigNoodleTitling;
    src: url(../fonts/big_noodle_titling.ttf);
}
@font-face {
    font-family: Tox Typewriter;
    src: url(../fonts/Tox_Typewriter.ttf);
}
@font-face {
    font-family: Glacial Indifference;
    src: url(../fonts/GlacialIndifference_Regular.otf);
}
@font-face {
    font-family: Glacial Indifference Bold;
    src: url(../fonts/GlacialIndifference_Bold.otf);
}




body
{
	
	background-color: white;
	
}


#page_gauche
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
	background-image: url("photo_couverture.JPG");
	background-size: 100% 100%;
}

#page_gauche_haut
{
	font-family: Tox Typewriter;
	color: white;
	text-align: center;
	height: 17%;
	width: 90%;
	margin-left: 5%;
}

#page_gauche_haut p
{
	border-bottom: 1px white solid;
	border-left: 1px white solid;
	border-right: 1px white solid;
	padding-bottom: 2%;
}

#bloc_vertical
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 75%;
	width: 16%;
	margin-left: 5%;
}

#logo_pc
{
	height: 18%;
	width: auto;
}

#logo_pc img
{
	width: 100%;
	height: 100%;
}

#pied_de_page
{
	font-family: Glacial Indifference;
	color: white;
	text-align: right;
	height: 25%;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 5%;
}

#pied_de_page p
{
	
	border-right: 1px white solid;
	
}

#texte_vertical
{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	height: 80%;
	/*margin-left: -16%;
	margin-top: 3%;
	margin-bottom: 5%;*/
	flex-direction: row;
}

#lien_sommaire
{
	height: 85%;
	width: auto;
}

#lien_sommaire img
{
	height: 100%;
	width: 100%;
}

#fb
{
	height: 10%;
	width: 50%;
}

#fb img
{
	width: 100%;
	height: 100%;
}

#insta
{
	height: 10%;
	width: 35%;
}

#insta img
{
	width: 100%;
	height: 100%;
}


#photo_page_droite
{
	height: 40%;
	width: 90%;
	margin-left: 5%;
	margin-top: 5%;
	background-image: url("visu_vin1.jpg");
	background-size: 100% 100%;
}

#photo_page_droite img
{
	height: 100%;
	width: 100%;
	background-color: grey;
}

#zone_recherche_keywords
{
	position: relative;
	height: auto;
	width: 20%;
	left: 75%;
	top: 35%;
}

#zone_recherche_keywords input
{
	height: auto;
	width: 100%;
	font-family: Glacial Indifference;
}

#about
{
	height: 45%;
	width: 40%;
	margin-left: 5%;
	border-bottom: 1px black solid;
	border-right: 1px black solid;
	border-left: 1px black solid;
	border-top: 1px white solid;
	padding-left: 3%;
	padding-right: 3%;
	overflow: auto;
	transition: border-top 1s, border-bottom 1s;
}

#about:hover
{
	border-top: 1px black solid;
	border-bottom: 1px white solid;
}


#about h2
{
	/*color: #D72127;*/
	color: white;
	background-color: black;
	text-align: center;
	font-family: BigNoodleTitling;
}

#zone_recherche_avancee
{
	
	height: 40%;
	width: 40%;
	margin-right: 5%;
	font-family: Tox Typewriter;
	text-decoration: underline;
}

#zone_recherche_avancee form
{
	width: 100%;
	height: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#zone_recherche_avancee div
{
	width: 40%;
}

#bt
{
	height: 10%;
	width: 20%;
	margin: auto;
}

option
{
	font-family: Tox Typewriter;
	font-size: 1em;
}

select
{
	font-family: Tox Typewriter;
	font-size: 1em;
}



#mapstr iframe
{
	height: 100%;
	width: 100%;
}