@media only screen 
  and (max-device-width: 812px) 
{
.page
{
	height: 100%;
	width: auto;
}

#article_preview
{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
}
}

@media screen 
  and (min-device-width: 800px) 
{
.page
{
	height: 100%;
	min-width: 480px;
	width: 49.8%;
}
#article_preview
{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 50%;
	height: 100%;
	display: none;
}
#droite_top p:hover
{
	border-bottom: 1px black solid;
	border-top: 1px black solid;
}
.div_articles p:hover
{
	color: #D72127;
}
}

@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;
}


.class_preview
{
	border: none;
	position: absolute;
	top: 0%;
	left: 0%;
	display: none;
}

#page_web
{
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	left: 0%;
	top: 0%;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	
}


#page_gauche
{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #D72127;
}

#gauche_top
{
	width: 100%;
	height: 10%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#gauche_top p
{
	font-family: BigNoodleTitling;

}

#sommaire
{
	width: 70%;
	height: 200%;
	font-size: 7em;
	color: white;
	padding-left: 2%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#gauche_top_droite
{
	width: 20%;
	height: 200%;
	font-size: 4em;
	color: white;
	margin-right: 5%;
	display: flex;
	
}

#logo_pc
{
	width: 70%;
	height: 60%;
	margin: auto;
}

#on_picture
{
	margin-top: 10%;
	margin-left: 0%;
	height: 78%;
	width: 96%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-image: url("photo_sommaire2.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#on_picture form
{
	height: 5%;
	width: 35%;
	margin-top: 15%;
	margin-left: 5%;
}

#input_keywords
{
	width: 100%;
	height: 100%;
	font-family: Glacial Indifference;
}

#visu_horizontal
{
	height: auto;
	width: 55%;
	margin-bottom: 3%;
	margin-left: 5%;
}

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

#page_droite
{
	
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#droite_top
{
	margin-left: 10%;
	margin-top: 2%;
	width: 80%;
	height: 10%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	border-bottom: 2px black solid;

}

#droite_top p
{
	font-family:  BigNoodleTitling;
	font-size: 1.2em;
	border-bottom: 1px white solid;
	border-top: 1px white solid;
	transition: border-top 1s, border-bottom 1s;
}


#zone_articles
{
	height: 87%;
	width: 94%;
	margin-left: 3%;
	margin-top: 0%;
	overflow: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.div_articles
{
	height: 30%;
	width: 32%;

}

.liens_articles
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	height: 100%;
}

.liens_articles p
{
	text-align: center;

	font-family: Glacial Indifference;
	color: black;
}


a
{
	text-decoration: none;
}

.visus
{
	width: 100%;
	height: 80%;
}