@font-face {font-family:'arrows'; font-weight:normal; font-style:normal;
    src:url('fonts/arrows/arrows.eot'); 
    src:url('fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
		url('fonts/arrows/arrows.woff') format('woff'),
		url('fonts/arrows/arrows.ttf') format('truetype'),
		url('fonts/arrows/arrows.svg#arrows') format('svg'); }

@font-face { font-family: 'antonioregular';
    src: url('fonts/antonio-regular-webfont.eot');
    src: url('fonts/antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/antonio-regular-webfont.woff') format('woff'),
         url('fonts/antonio-regular-webfont.ttf') format('truetype'),
         url('fonts/antonio-regular-webfont.svg#antonioregular') format('svg'); font-weight: normal; font-style: normal;}


@font-face {font-family: 'antoniolight'; 
    src: url('fonts/antonio-light-webfont.eot');
    src: url('fonts/antonio-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/antonio-light-webfont.woff') format('woff'),
         url('fonts/antonio-light-webfont.ttf') format('truetype'),
         url('fonts/antonio-light-webfont.svg#antoniolight') format('svg'); font-weight: normal; font-style: normal;}
         
@font-face { font-family: 'JDS-icon';
    src: url('fonts/JDS-icon/JDS-icon.eot');
    src: url('fonts/JDS-icon/JDS-icon.eot?#iefix') format('embedded-opentype'),
         url('fonts/JDS-icon/JDS-icon.woff') format('woff'),
         url('fonts/JDS-icon/JDS-icon.ttf') format('truetype'),
         url('fonts/JDS-icon/JDS-icon.svg#JDS-icon') format('svg');
    font-weight: normal; font-style: normal; }


/*** MAIN STYLE ***/

body,html{height: 100%;}
body,html, ul, li, h1, h2, h3, h4, h5, h6, span, sup, p{ margin: 0; padding: 0;}
ul, ol{ list-style:none; margin: 0; padding: 0;}
a{color:  #0063ac; text-decoration: none; font-style: normal;}
p a{text-decoration: underline;}
a img {border: none;}
a:hover{text-decoration: none;}
hr{background:#785e39; height: 2px; border: none; }
select, button, input, textarea{ appearance:none; outline:none; background:none; border:none; padding:0; margin:0; font-family:inherit; font-size:inherit; }
button{cursor:pointer;}
body, input, textarea, select, button { text-rendering:optimizelegibility; -moz-osx-font-smoothing:grayscale; font-feature-settings:"liga", "kern"; }
a{text-decoration:none; color:#0063AC;}
i, address{font-style:normal; }
strong{ font-weight:600;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display:none; }
h1, h2, h3, h4, h5, h6{font-weight: normal;}
fieldset.grid{border: none; margin: 0 auto;}

h1{font-size:36px; font-family:'antonioregular', sans-serif;  color:#0063ac; padding:2% 0; text-transform:uppercase; }
h2{ color: #000000; font-family: 'antonioregular',sans-serif;font-size:30px; padding: 0% 0 0; text-align:center; font-weight:normal; text-transform:uppercase; }
h3{color:#0063ac;  font-size: 26px; text-align:center; font-family: 'antonioregular',sans-serif; text-transform:uppercase;}
h4{color: #1081d5; font-size: 16px; text-align: center; text-transform:uppercase; margin: 5px 0; font-weight: 900; font-family: "helvetica";}
h6{font-size: 14px; color: #90b10c;}
h5{text-transform: uppercase; font-size: 14px; margin:20px 0; color:#0063ac; }
h5 span{color:#0063ac; font-weight:600;}

/* [class*="grid"] { text-align:justify; } */
[class*="grid"]{margin-left:-20px; }
[class*="grid"]:after { content:""; display:inline-block; width:100%; }
[class*="grid"] > * { display:inline-block; vertical-align:top; text-align:left; }
:root [class*="grid"] { font-size:0; text-justify:distribute-all-lines; }
:root [class*="grid"] > * { font-size:14px; font-size:1.4rem; }
[class*="grid"]:-o-prefocus { word-spacing:-0.43em; }

.grid2 > *:not(.fullW), .w50 { width:50%; }
.grid3 > *:not(.fullW), .w33 { width:33.333%; }
.grid4 > *:not(.fullW), .w25 { width:25%; }
.grid5 > *:not(.fullW), .w20 { width:20%; }
.grid6 > *:not(.fullW), .w16 { width:16.667%; }
.grid8 > *:not(.fullW), .w12 { width:12.5%; }
.grid10 > *:not(.fullW), .w10 { width:10%; }
.grid12 > *:not(.fullW){ width:8.333%; }

.w100{width: 100%;}
.w50{width: 50%;}
.w40{width: 40%;}
.w25

.color1{color: #0063AC;}
.color2{color: #1081d5;}

.bgcolor1{background: #0063AC;}
.bgcolor2{background: #1081d5;}
/* ----------------------------- */
/*           Formulaire          */
/* ----------------------------- */

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#222222; opacity:.8; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#222222; opacity:.8;}
input::-moz-placeholder, textarea::-moz-placeholder { color:#222222; opacity:.8;}

.w100 input, .w100 textarea{width: 95%;}
input, textarea{ background:#FFF; border-radius:3px; display:block; width:90%; padding: 10px; color:#222222; font-family: inherit; }
textarea{ height:12.2em; }
form{text-align: center;}
label{ position:relative; margin-top:1em; font-size:1.5rem; font-weight:600; font-family: 'antonioregular';}
span.error{ font-size:1.1rem; color:#F05050; padding:0 5px; display:table; position:absolute; top:.3em; right:0; }

.form-wrapper{ margin:0 auto 3%; position:relative; }
.form-inner > label{ vertical-align:bottom; }
.form-container .btn{ display:table;}

span.select{ display:block; pointer-events:none; height:2.5em;  }
span.select select{width:100%; cursor:pointer; padding:.5em 40px .5em .5em; background:#F4F6F7; color:#9FA2A4; border-radius:3px; height:100%; pointer-events:all;}
span.select select option{ height: 100%; display:block; }
.filtre span.select select{background:#fff; color:#BFC3C6; border:2px solid #DEE2E5; border-radius:8px; width:auto;}
span.select::after { background:#F4F6F7; content:"\ec4d"; padding:0 10px; pointer-events:none; position:absolute; right:4px; font-size:150%; transition:all .5s; color:#81939E; font-weight:bold; border-radius:5px; margin:0; top:50%; bottom:auto; transform:translateY(-50%); }
.filtre span.select::after{ background:#fff; color:#DADFE2; content:"\ec50"; }

.btn{color: #fff; padding: 0.5em 1em; margin: 1em auto; border-radius: 5px; font-size: 1.7rem; font-weight: 800; font-family: 'antonioregular';}

/* HOME PAGE */

body{overflow-x: hidden;}

header{padding: 0 3%;}
header .cont{font-family: 'antonioregular'; font-size: 30px !important; text-align: right; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 5%;}
header h3{color: #FFF; background: #0063ac; padding: 2px; width: 50%; font-size: 1.8rem; margin: 0px auto;}
header h3:hover{background: #1081d5; transition:1s;}
header li:nth-child(-n+2) {text-align: center;}
.omc{ padding-top: 3%;}
.main-container{padding: 3%; background: #f7f8f9;}

.bk-list li {perspective: 1800px;}
.bk-list li .bk-book {transition: transform .5s;}
.bk-list li .bk-book:hover {transform: rotate3d(0,1,0,35deg);}
.bk-list li .bk-page {width: 60%; height: 100%; margin: 2% auto; position: relative;}
.bk-page img{width: 100%; height: 100%;}
.bk-page::after{content: ''; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.2)); position: absolute; width: 5%; height: 100%; left: 0;}

.txt-book{text-align: center; margin-bottom: 10%;}
.txt-book a{color: inherit; text-decoration: none;}
.txt-book p{color: #5b5f60; font-family: "antonioregular"; font-size: 1.5rem;}

footer{background: #0063ac; padding: 1% 5%; color: #FFF; font-family: 'antoniolight'; font-size: 1.5rem; }