/* POLICE CUSTOM */

@font-face {
  font-family: 'Gentona Book';
  src: url('../fonts/Gentona-Book.eot');
  src: url('../fonts/Gentona-Book.eot?#iefix') 		format('embedded-opentype'),
       url('../fonts/Gentona-Book.woff') 			format('woff'),
       url('../fonts/Gentona-Book.ttf')  			format('truetype'),
       url('../fonts/Gentona-Book.svg#svgFontName') format('svg');
}
@font-face {
  font-family: 'Gentona Bold';
  src: url('../fonts/Gentona-Bold.eot');
  src: url('../fonts/Gentona-Bold.eot?#iefix') 		format('embedded-opentype'),
       url('../fonts/Gentona-Bold.woff') 			format('woff'),
       url('../fonts/Gentona-Bold.ttf')  			format('truetype'),
       url('../fonts/Gentona-Bold.svg#svgFontName') format('svg');
}


/* STYLES PAR DEFAUT */

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	position: absolute;
	font-family: 'Gentona Book';
	background-color: #DEDEDE;
	color: #1E284B;
	font-size: 16px;
	overflow-x: hidden;
	overflow-y: auto;
}

#view {
    margin: 0px;
	width: auto;
	min-height: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-position: center calc(50% + 50px);
	/*transition: opacity 0.1s ease-in-out;*/
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 116px 50px 35px 50px;
    box-sizing: border-box;
    overflow: visible;
    background-attachment: fixed;
}
/*#view.ng-enter { opacity: 0; }*/
/*#view.ng-enter-active { opacity: 1; }*/
/*#view.ng-leave-active { opacity: 0; }*/

#logo {
	position: absolute;
	top: 40px;
	left: 50px;
	/*background-color: #DEDEDE;*/
}
#logo a {
	display: block;
    height: 65px;
    width: 130px;
	background-image: url(../img/logo-large.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

#navbar {
	position: fixed;
	top: 40px;
	right: 44px;
	pointer-events: none;
}
#navbar a {
	pointer-events: auto;
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-left: 15px;
	margin-top: -10px;
	padding: 6px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: relative;
	background-color: #DEDEDE;
    border-radius: 50px;
    background-size: calc(100% - 12px);
}
#navbar a.selected::after {
	content:'';
	display: block;
	position: absolute;
	width: 22px;
	height: 6px;
	top: 28px;
	background-image: url(../img/nav_selected.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
#navbar a.inside::after {
	content:'';
	display: block;
	position: absolute;
	width: 22px;
    height: 13px;
    top: 20px;
	background-image: url(../img/nav_inside.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
#navbar a.book { background-image: url(../img/book.svg); }
#navbar a.about { background-image: url(../img/about.svg); }
#navbar a.skills { background-image: url(../img/skills.svg); }
#navbar a.contact { background-image: url(../img/contact.svg); }
#navbar a.book:hover { background-image: url(../img/book_hover.svg); }
#navbar a.about:hover { background-image: url(../img/about_hover.svg); }
#navbar a.skills:hover { background-image: url(../img/skills_hover.svg); }
#navbar a.contact:hover { background-image: url(../img/contact_hover.svg); }

#legal_link {
	display: block;
	position: fixed;
	right: 50px;
	bottom: 15px;
	width: 16px;
	height: 16px;
	background-image: url(../img/legal.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
#legal_link:hover { background-image: url(../img/legal_hover.svg); }


/* VUE HOME */

#view.home {
	color: white;
	background-image: url(../img/home-medium.jpg);
	background-position: center calc(50% + 4px);
}

#logo.home {
	left: calc(50% - 10px);
	top: calc(50% - 64px);
	color: white;
	background-color: transparent;
}
#logo.home a {
	height: 142px;
	width: 85px;
	background-image: url(../img/logo-large-home.svg);
}

.home_title {
	position: absolute;
	left: calc(50% + 63px);
	top: calc(50% - 178px);
	font-weight: normal;
    font-size: 2.5em;
    line-height: 0.6em;
}
.home_title small {
	font-size: 0.5em;
}


/* VUE BOOK GRILLE */

#view.book_grid {
	background-image: url(../img/book.jpg);
	background-size: 1370px;
    flex-direction: column;
    align-content: stretch;
}

.book_filters {
	position: absolute;
	top: 40px;
	left: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.book_filters .filter {
	height: 28px;
	width: 28px;
	position: relative;
	border: none;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
}
.book_filters .filter title {
	display: block;
	position: absolute;
	color: #FB8A89;
	top: 36px;
	width: 100px;
	left: calc(14px - 100px / 2);
	overflow: visible;
	text-align: center;
	opacity: 0;
	font-size: 0.9em;
	transition: opacity 0.15s ease-in-out;
	pointer-events: none;
}
.book_filters .filter:hover title {
	opacity: 1;
}
.book_filters .filter.toggled::after {
	content:'';
	display: block;
	position: absolute;
	width: 28px;
	height: 6px;
	top: 32px;
	background-image: url(../img/nav_selected.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
.book_filters .filter_a { background-image: url(../img/letter-a-dark.svg); }
.book_filters .filter_s { background-image: url(../img/letter-s-dark.svg); }
.book_filters .filter_b { background-image: url(../img/letter-b-dark.svg); }
.book_filters .filter_d { background-image: url(../img/letter-d-dark.svg); }
.book_filters .filter_e { background-image: url(../img/letter-e-dark.svg); }
.book_filters .filter_i { background-image: url(../img/letter-i-dark.svg); }
.book_filters .filter_p { background-image: url(../img/letter-p-dark.svg); }
.book_filters .filter_a:hover { background-image: url(../img/letter-a-hover.svg); }
.book_filters .filter_s:hover { background-image: url(../img/letter-s-hover.svg); }
.book_filters .filter_b:hover { background-image: url(../img/letter-b-hover.svg); }
.book_filters .filter_d:hover { background-image: url(../img/letter-d-hover.svg); }
.book_filters .filter_e:hover { background-image: url(../img/letter-e-hover.svg); }
.book_filters .filter_i:hover { background-image: url(../img/letter-i-hover.svg); }
.book_filters .filter_p:hover { background-image: url(../img/letter-p-hover.svg); }
.book_filters .separator {
	width: 35px;
	height: 0px;
	border: 1px solid #1E284B;
}

.book_boxes_container {
	position: relative;
	/*width: 1170px;*/
	width: 1110px;
	max-height: 530px;
	min-height: 350px;
	height: auto;
	flex-grow: 1;
	background-color: rgba(255, 255, 255, 0.2);
}

.book_boxes_container .book_item {
	display: block;
	position: absolute;
	text-decoration: none;
	color: white;
	text-align: center;
	background-size: cover;
	background-position: center center;
    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 0px 1px 1px;

/*	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);*/

    transition: filter,-moz-filter,-o-filter,-webkit-filter 0.15s ease-in-out,
    	opacity 0.5s ease-in-out;
    text-shadow: 0px 0px 10px rgb(1, 13, 74);

}

.book_boxes_container .book_item.dark {
	color: #1E284B;
	text-shadow: none !important;
}


.book_boxes_container .book_item.filtered_out {
	opacity: 0.2;
	pointer-events: none;
/*	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px)*/;
}
.book_boxes_container .book_item:hover {
	filter: none;
	-moz-filter: none;
	-o-filter: none;
	-webkit-filter: none;
}

.book_boxes_container .book_item .eye {
    position: absolute;
    height: 28px;
    top: calc(50% - 32px);
    left: calc(50% - 44px / 2);
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.book_boxes_container .book_item:hover .eye {
	opacity: 1;
}

.book_boxes_container .book_item .name {
    font-size: 1.3em;
    display: block;
    top: 50%;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.book_boxes_container .book_item:hover .name {
	opacity: 1;
}

.book_boxes_container .book_item .tags {
    top: calc(50% + 34px);
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.book_boxes_container .book_item:hover .tags {
	opacity: 1;
}
.book_boxes_container .book_item .tags img {
	height: 22px;
	margin-left: 4px;
	margin-right: 4px;
}

/* positionnement et dimensions des items du book */
.book_boxes_container .book_item0 { left: 0%; top: 0%; width: 32%; height: 46%; }
.book_boxes_container .book_item1 { left: 0%; top: 46%; width: 18%; height: 54%; }
.book_boxes_container .book_item2 { left: 18%; top: 46%; width: 14%; height: 54%; }
.book_boxes_container .book_item3 { left: 32%; top: 0%; width: 18%; height: 30%; }
.book_boxes_container .book_item4 { left: 32%; top: 30%; width: 18%; height: 70%; }
.book_boxes_container .book_item5 { left: 50%; top: 0%; width: 50%; height: 37%; }
.book_boxes_container .book_item6 { left: 50%; top: 37%; width: 25%; height: 38%; }
.book_boxes_container .book_item7 { left: 50%; top: 75%; width: 25%; height: 25%; }
.book_boxes_container .book_item8 { left: 75%; top: 37%; width: 25%; height: 28%; }
.book_boxes_container .book_item9 { left: 75%; top: 65%; width: 25%; height: 35%; }




/* VUE BOOK DETAILS */

#view.book_details {
	background-image: url(../img/book_details.jpg);
	background-size: 1150px;
}

.book_details_title {
	position: fixed;
	left: 50px;
	top: 50%;
	font-size: 1.1em;
	width: 200px;
}
.book_details_title h1 {
	margin-bottom: 10px;
	margin-top: 0px;
	font-family: 'Gentona Bold';
	font-size: 1.9em;
}
.book_details_title img {
	height: 28px;
	margin-right: 8px;
}

.book_details_container {
	padding-left: 204px;
	padding-right: 82px;
	text-align: center;
}
.book_details_container p.column {
	width: 38%;
	float: left;
	margin-bottom: 63px;
	margin-top: 0px;
	margin-right: 55px;
	text-align: left;
}
.book_details_container p.column span {
	font-family: 'Gentona Bold';
}
.book_details_container .column_short { display: none; }
.book_details_container p.first { margin-left: 0px !important; }
.book_details_container img {
	max-width: 100%;
	display: block;
	margin-left: 0px;
	margin-right: auto;
	width: 100%;
	margin-top: 10px;


}


.book_details_container img{
		margin-bottom: 50px;
}

.book_details_container .video-responsive{
	overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-top:-50px;
}

.book_details_container .video-responsive iframe{
	left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.book_details_container .nav_buttons {
	display: flex;
	justify-content: space-between;
	width: 33%;
	min-width: 124px;
	min-width: 100px;
	margin-top: 66px;
	margin-left: auto;
	margin-right: auto;
}
.book_details_container .nav_buttons * { width: 38px; height: 38px; margin: 2px; }


/* VUE A PROPOS */

#view.about {
	background-image: url(../img/about-medium.jpg);
	background-position: calc(45% - 250px) 100px;
	background-size: 615px;
}

.about_container {
	width: 450px;
	/*height: 500px;*/
	padding: 6px;
	margin-left: 450px;
}
.about_container strong {
	font-size: 1.1em;
}
.about_container p {
	line-height: 1.2em;
    margin-top: 4px;
    margin-bottom: 4px;
}


/* VUE CONTACT */

#view.contact {
	background-image: url(../img/contact.jpg);
	background-size: 730px;
}

.contact_container {
	width: 445px;
	height: 535px;
	top: calc(50% - 535px / 2);
	left: calc(50% - 445px / 2);
}
.contact_container .social_links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 138px;
	margin-left: auto;
	margin-right: auto;
}
.contact_container .social_links a {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
.contact_container .social_links a.social_fb { background-image: url(../img/social_fb.svg); }
.contact_container .social_links a.social_twitter { background-image: url(../img/social_twitter.svg); }
.contact_container .social_links a.social_linkedin { background-image: url(../img/social_linkedin.svg); }
.contact_container .social_links a.social_behance { background-image: url(../img/social_behance.svg); }
.contact_container .social_links a.social_fb:hover { background-image: url(../img/social_fb_hover.svg); }
.contact_container .social_links a.social_twitter:hover { background-image: url(../img/social_twitter_hover.svg); }
.contact_container .social_links a.social_linkedin:hover { background-image: url(../img/social_linkedin_hover.svg); }
.contact_container .social_links a.social_behance:hover { background-image: url(../img/social_behance_hover.svg); }

.contact_container .separator { height: 10px; }
.contact_container .form_row {
	display: block;
	position: relative;
}
.contact_container label {
	position: absolute;
	top: 42px;
	left: 13px;
	pointer-events: none;
	transition: opacity 0.08s ease-in-out;
	opacity: 0;
	color: rgba(30, 40, 75, 0.6);;
}
.contact_container input {
	border: 3px solid #1E284B;
	width: calc(100% - 26px);
	margin-top: 30px;
	padding: 10px;
	border-radius: 0px;
	background-color: white;
	transition: background-color 0.08s ease-in-out,
		opacity 0.15s ease-in-out;
}
.contact_container textarea {
	border: 3px solid #1E284B;
	width: calc(100% - 26px);
	height: 218px;
	margin-top: 30px;
	padding: 10px;
	border-radius: 0px;
	background-color: white;
	transition: background-color 0.08s ease-in-out,
		opacity 0.15s ease-in-out;
}
.contact_container input[type=submit] {
	border: none;
	background-color: #1E284B;
	width: 115px;
	margin-left: calc(445px / 2 - 115px / 2);
	margin-top: 30px;
	padding: 10px;
	color: white;
}
.contact_container *:focus {
	border-color: #FB8A89;
	outline: none;
	background-color: white;
}
.contact_container *.empty {
	background: none;
}
.contact_container *.empty + label {
	opacity: 1;
}
.contact_container *:focus + label {
	opacity: 0;
}
.contact_container input[type=submit]:hover {
	background-color: #FB8A89;
}
.contact_container input[type=submit]:disabled {
	opacity: 0.5;
	pointer-events: none;
}
.contact_container .submit_icon {
    transition: all 0.3s ease-in-out;
    width: 25px;
    height: 40px;
    background-image: url(../img/icon_success.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    display: inline-block;
    margin-left: 18px;
    bottom: 0px;
}
.contact_container .submit_icon.ng-hide { opacity: 0; bottom: -12px; }

/* vérification champs du formulaire */


/* VUE COMPETENCES */

#view.skills {
	background-image: url(../img/skills.jpg);
	background-position: calc(50% - 4px) calc(50% + 96px / 2);
	background-size: 720px;
	background-attachment: initial;
}

.skills_container {
	position: relative;
	width: 0px;
	height: 0px;
    margin-top: 260px;
    margin-bottom: 260px;
}

.skills_container .skill_title {
	width: 100px;
	position: absolute;
	text-align: center;
	line-height: 40px;
    margin-top: -20px;
    margin-left: -50px;
    /*pointer-events: none;*/
}
.skills_container .skill_circle {
	width: 200px;
	height: 200px;
	position: absolute;
    margin-top: -100px;
    margin-left: -100px;
}
.skills_container .skill_circle span.value {
	/*font-family: 'Gentona Bold';*/
	font-weight: bold;
	display: block;
	text-align: center;
	line-height: 200px;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
	position: relative;
}
.skills_container .skill_circle svg {
	position: absolute;
	left: calc(50% - 100px);
	top: calc(50% - 100px);
	fill: rgba(255, 255, 255, 0.0);
	stroke: #1E284B;
	stroke-width: 4;
	transition: fill 0.15s ease-in-out;
}
.skills_container .skill_circle:hover span.value { opacity: 1; }
.skills_container .skill_circle:hover svg { fill: rgba(255, 255, 255, 0.5); }
.skills_container .skill_circle0 	{ top: -164px;	left:   +0px; }
.skills_container .skill_circle1 	{ top:  -83px;	left: +156px; }
.skills_container .skill_circle2 	{ top:  +83px;	left: +156px; }
.skills_container .skill_circle3 	{ top: +164px;	left:   +0px; }
.skills_container .skill_circle4 	{ top:  +83px;	left: -156px; }
.skills_container .skill_circle5 	{ top:  -83px;	left: -156px; }
.skills_container .skill_title0 	{ top: -250px;	left:   +0px; }
.skills_container .skill_title1 	{ top: -110px;	left: +266px; }
.skills_container .skill_title2 	{ top: +110px;	left: +263px; }
.skills_container .skill_title3 	{ top: +250px;	left:   +0px; }
.skills_container .skill_title4 	{ top: +110px;	left: -258px; }
.skills_container .skill_title5 	{ top: -110px;	left: -265px; }


/* MENTIONS LEGALES */

#view.legal {

}

.legal_container {
	display: flex;
	flex-direction: row;
}

.legal_container .top {
	width: 212px;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.legal_container .body {
	width: 930px;
}
.legal_container .body p {
	margin-top: 0px;
	margin-bottom: 1em;
}
.legal_container .body div:nth-child(2) {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}