@media (max-width: 622px) {


#navbar {
	width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

#view {
    padding: 85px 15px 75px 15px;
    background-position: center calc(50% + 18px);
}

#logo {
	left: calc(50% - 25px);
	top: 15px;
}
#logo a {
	background-image: url(../img/logo-mobile.svg);
	width: 56px;
	height: 56px;
}


#view.home {
	background-image: url(../img/home-vertical.jpg);
	background-size: 255px;
}
#logo.home {
	left: calc(50% - 92px / 2);
	top: calc(50% - 106px);
}
#logo.home a {
	width: 92px;
	background-image: url(../img/logo-small-home.svg);
}
.home_title {
	left: calc(50% - 6px);
	top: calc(50% - 171px);
}


#view.about {
	background-image: url(../img/about-small.jpg);
	background-size: 305px;
	background-position: calc(50% - 25px) 42px;
}
.about_container {
    width: auto;
    height: auto;
    margin: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 155px;
    padding-bottom: 0px;
    position: initial;
}
.about_container strong {
	display: none;
}

#view.book_grid {
	background-size: 420px;
	/*height: auto;*/
}

.book_filters {
	display: none;
}

.book_boxes_container {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    max-height: none;
    height: auto;
}
.book_boxes_container .book_item {
	position: initial;
	width: 100%;
	height: auto;
	min-height: 150px;
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
	-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(50%);
	padding: 0px;
}

.book_details_container img{
	margin-bottom: 10px  !important;

}

.book_boxes_container .book_item * {
	display: none !important;
}

#view.book_details {
    background-position: center 35px;
    background-size: 950px;
}
.book_details_container {
	position: initial;
	padding: 120px 0px 0px 0px;
	overflow: visible;
	margin-top: 0px;
}
.book_details_container .column { display: none; }
.book_details_title {
	position: absolute;
	top: 102px;
	left: 15px;
	right: auto;
	bottom: auto;
	text-align: left;
	width: 100%;
}
.book_details_title h1 { float: none; width: 100%; font-size: 1.9em;}
.book_details_title img { display: none; }
.book_details_container .nav_buttons { width: 52%; margin-top: 14px; }
.book_details_container .nav_buttons a { width: 50%; margin: 0px; }
.book_details_container .nav_buttons img { display: block; width: 100%; margin: 0px; }
.book_details_container .video-responsive{
    margin-top:-20px;   
}
.contact_container {
	position: initial;
	width: 100%;
	min-height: 100%;
	height: auto;
    display: flex;
}
.contact_container form {
	padding: 0px;
	margin: 0px;
	width: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.contact_container .form_row {
	position: relative;
	margin-top: 26px;
	width: 100%;
	text-align: center;
}
.contact_container .form_row_extend {
	flex-grow: 10;
    min-height: 200px;
}
.contact_container label {
	top: 12px;
	left: 15px;
}
.contact_container input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
	margin: 0px;
	border-width: 2px;
}
.contact_container textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
	padding: 12px;
	border-width: 2px;
	margin: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    position: absolute;
}
.contact_container input[type=submit] {
	width: 60%;
	margin: 0px;
	display: inline-block;
}
.contact_container .separator { display: none; }


#view.skills {
	background-size: 546px;
	background-position: calc(50% - 4px) calc(50% - 6px);
	padding-top: 85px;
}
.skills_container {
	position: relative;
    width: 0px;
    height: 0px;
    align-self: center;
    margin-top: 200px;
    margin-bottom: 230px;
    top: 0px;
    left: 0px;
}
.skills_container .skill_circle svg {
	transform: scale(0.72);
}
.skills_container .skill_circle0 	{ top: -124px;	left:   +0px; }
.skills_container .skill_circle1 	{ top:  -61px;	left: +117px; }
.skills_container .skill_circle2 	{ top:  +61px;	left: +117px; }
.skills_container .skill_circle3 	{ top: +124px;	left:   +0px; }
.skills_container .skill_circle4 	{ top:  +61px;	left: -117px; }
.skills_container .skill_circle5 	{ top:  -61px;	left: -117px; }
.skills_container .skill_title0 	{ top: -184px;	left:   +0px; }
.skills_container .skill_title1 	{ top: -118px;	left: +119px; }
.skills_container .skill_title2 	{ top: +118px;	left: +119px; }
.skills_container .skill_title3 	{ top: +184px;	left:   +0px; }
.skills_container .skill_title4 	{ top: +118px;	left: -119px; }
.skills_container .skill_title5 	{ top: -118px;	left: -119px; }




}


/* media query supplémentaire pour affichage des compétences */

@media (max-width: 370px) {

.legal_container .top {
	height: auto;
}

#view.skills {
	background-size: 400px;
	padding-top: 70px;
}
.skills_container {
    margin-top: 160px;
    margin-bottom: 160px;
}
.skills_container .skill_circle svg {
	transform: scale(0.65);
}
.skills_container .skill_circle0 	{ top:  -92px;	left:   +0px; }
.skills_container .skill_circle1 	{ top:  -41px;	left:  +80px; }
.skills_container .skill_circle2 	{ top:  +41px;	left:  +80px; }
.skills_container .skill_circle3 	{ top:  +92px;	left:   +0px; }
.skills_container .skill_circle4 	{ top:  +41px;	left:  -80px; }
.skills_container .skill_circle5 	{ top:  -41px;	left:  -80px; }
.skills_container .skill_title0 	{ top: -151px;	left:   +0px; }
.skills_container .skill_title1 	{ top:  -86px;	left:  +88px; }
.skills_container .skill_title2 	{ top:  +93px;	left:  +88px; }
.skills_container .skill_title3 	{ top: +151px;	left:   +0px; }
.skills_container .skill_title4 	{ top:  +90px;	left:  -88px; }
.skills_container .skill_title5 	{ top:  -97px;	left:  -88px; }

}