@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,300,300italic,700,700italic&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Fira+Sans:400,300italic,300,400italic,500,500italic);
* { -webkit-tap-highlight-color: rgba(0,0,0,0);padding: 0; margin: 0 auto; text-align:center; text-decoration:none; clear:both;-webkit-hyphens-locale: auto; hyphens: auto; -webkit-hyphens: auto;}
body { font-family: Roboto, Helvetica, Arial,Verdana, sans-serif; background-color: #fafafd;}
@-moz-document url-prefix() {
* {font-family:'Fira Sans', "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;}
}
@font-face {
    font-family: 'LatoLatinLight';
    src: url('../font/LatoLatinLight-Regular.woff') format('woff'), /* Modern Browsers */
         url('../font/LatoLatinLight-Regular.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
::-webkit-scrollbar{margin-right:5px;background-color:#dfdfdf;width:11px}
::-webkit-scrollbar-track{box-shadow:0 0 2px #ccc}
::-webkit-scrollbar-thumb{border:1px #eee solid;border-radius:4px;background:#777;box-shadow:0 0 8px #555 inset;-webit-transition:all .3s ease-out;transition:all .3s ease-out}
::-webkit-scrollbar-thumb:window-inactive{background:#bbb;box-shadow:0 0 8px #999 inset}
::-webkit-scrollbar-thumb:hover{background:rgb(205,24,30)}


@-webkit-keyframes bg {25% {background-color: rgb(255,255,255)} 100% {background-color:rgb(255,52,48)} }
@-moz-keyframes bg { 25% {background-color: rgb(255,255,255)} 100% {background-color:rgb(255,52,48)} }
@-ms-keyframes bg { 25% {background-color: rgb(255,255,255)} 100% {background-color:rgb(255,52,48)} }
@-o-keyframes bg { 25% {background-color: rgb(255,255,255)} 100% {background-color:rgb(255,52,48)} }
@keyframes bg { 25% {background-color: rgb(255,255,255)} 100% {background-color:rgb(255,52,48)} }
.home {margin:0; padding:0; background-color: rgb(255,52,48);;-webkit-animation: bg 2s ease-in-out;animation-iteration-count:1;-moz-animation: bg 2s ease-in-out; -ms-animation: bg 2s ease-in-out; -o-animation: bg 2s ease-in-out; animation: bg 2s ease-in-out; }
.home, h1, h2, h3, h5 {color:white; padding:10px}
h2, h3, h4, h5 {font-weight:normal; margin-bottom: 3%;font-family: "LatoLatinLight" }
h3 {-webkit-animation: anim 4s ease-in-out;animation-iteration-count:1;-moz-animation: anim 4s ease-in-out; -ms-animation: anim 4s ease-in-out; -o-animation: anim 4s ease-in-out; animation: anim 4s ease-in-out; }
h5 {
	-webkit-animation: anim 5s ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-moz-animation: anim 5s ease-in-out;
	-ms-animation: anim 5s ease-in-out;
	-o-animation: anim 5s ease-in-out;
	animation: anim 5s ease-in-out;
	color: rgba(255,255,255,.75) !important;
	margin-top: 2em
}
.bordRed {border-top:10px solid rgb(235,8,30);}
header {background-color: rgb(255,52,48); width:100%; alignment-adjust:central; margin:0; padding:3% 0 1% 0;-webkit-animation: bg 2s ease-in-out;animation-iteration-count:1;-moz-animation: bg 2s ease-in-out; -ms-animation: bg 2s ease-in-out; -o-animation: bg 2s ease-in-out; animation: bg 2s ease-in-out;}
header h1 { color:rgb(255,255,255); line-height:50px; text-decoration:none; padding-top:2.5%; padding-bottom:4%;}
header > * {-webkit-animation: anim 4s ease-in-out;animation-iteration-count:1;-moz-animation: anim 4s ease-in-out; -ms-animation: anim 4s ease-in-out; -o-animation: anim 4s ease-in-out; animation: anim 4s ease-in-out;}
header.orange {background-color:rgb(255,99,71); margin-top:-10px;}
div {display:block;}
.home img {width:90%;margin-top:10%; margin-bottom:20px;max-width:980px; max-height:641px;}
.homeImg {-webkit-animation: anim 3s ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1;-moz-animation: anim 3s ease-in-out; -ms-animation: anim 3s ease-in-out; -o-animation: anim 3s ease-in-out; animation: anim 3s ease-in-out;}
.indexcorpus { background: -webkit-linear-gradient(top, #fff 0%, #fafafd 100%); min-width:200px; max-width:74%; -webkit-border-radius:0.5em; border-radius:0.5em; border:5px solid #fff; margin-top:5%; margin-bottom:2%; padding-top:1%;}
.corpus { background: -webkit-linear-gradient(bottom, #fff 0%, #fafafd 100%); width:95%; max-width:960px; -webkit-hyphens: auto; hyphens: auto; -webkit-border-radius:0.5em; border-radius:0.5em; margin-top:5%; margin-bottom:2%; padding:2% 0}
p { text-align:justify; font-size:1.12em;font-weight:300; line-height:150%; color:#001; margin:10px; list-style-type: none; -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word;}
.corpus p:first-child:first-letter:not(.bouton) { font-weight:bold; font-size:175%; color: rgb(255,52,48)}
a, a:visited { color:inherit; text-decoration:none; }
a:link { text-decoration: none; color: #C00; }
a:hover, a:active { color:#ff0000; text-decoration:none; }

.redline { height:5px; width:100%; background-color:#F00; margin-bottom:5px;}
footer {width:100%; padding-bottom:3%;display:block;background-color: #181e23;}
footer .redline { margin-bottom:20px;}
footer a, footer a:visited, footer a:link {color:#b3bfcb;}
footer h2 a:hover {color:White;}
footer .mail { padding: 15px; line-height:3em;}
footer .Fb, footer .Tw, footer .Vm, footer .Sh, footer .In, footer .Da { display:inline-table; width:42px; height:35px; background-color:#fafafb; padding-top:5px; margin:5px; font-weight:bold; color:Black;-webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -o-border-radius: 0.2em; border-radius: 0.2em; text-align:center; font-size:1.3em; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;}
footer .Fb:hover, footer .Tw:hover, footer .Vm:hover, footer .Sh:hover, footer .In:hover, footer .Da:hover { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; color:#fff;}
footer .Fb:hover { background-color:#255297;}
footer .Tw:hover { background-color:#4099FF;}
footer .Vm:hover { background-color:#4EBBFF;}
footer .Sh:hover { background-color:rgb(255,52,48);}
footer .In:hover { background-color:#0074C4;}
footer .Da:hover { background-color:#607860;}
article.orange {background-color:rgb(255,99,71) /*rgba(255,52,48,.8)*/; width:100%; color:White; margin-top:-10px;}
section.dark {background-color:#1f262d; color:White; margin-top:10px; margin-bottom:5%}
.orange p {color:White;}
.orange p:first-child { padding-top: 4%}
article div { max-width:960px;  width: 95%; padding-bottom:4%}
#mySlide {-webkit-animation: myslide 0.3s ease-in-out;}
.blink { animation:fade 3000ms infinite; -webkit-animation:fade 3000ms infinite; }
.clair { color:#d0d3d2; margin-left:9px; margin-top:5px; margin-bottom:5px; margin-right:3px; }
.copyright { color:#8e9396; margin-left:0 auto; text-shadow:1pt 1pt white; }
img { width:100%; height: auto; max-width:300px; display:block; padding-bottom:3%; padding-top:2%}
.logoAction {
	display: inline-block;
	margin-top: 5%;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 3%;
	max-width: 75px;
}

.bouton { width:90%; max-width:520px; display:inline-block; clear:none; background-color:#1f262d; padding:2%; margin:3% 2%; -webkit-border-radius: 0.2em; border-radius: 0.2em;-webit-transition:all .3s ease-out;transition:all .3s ease-out; text-transform:uppercase;}
.bouton:hover, .bouton:focus, .boutonLong:hover, .boutonLong:focus { background-color:rgb(255,52,48); -webkit-border-radius: 1em; border-radius: 0.6em}
.bouton p, .boutonLong p { color: White; text-align:center;-webit-transition:all .3s ease-out;transition:all .3s ease-out; padding-bottom:0.5% }
.Gris { color:#83848f}
.dark { color:#1f262d}
.blue {color: Blue;}
.green {color: Green;}
.yellow {color: Yellow;}
.sweetred-arrow, .orange-arrow, .head-arrow {width: 0px; height: 0px; border-style: solid;border-width: 1em 1em 0 1em; margin-bottom:1em}
.orange-arrow, .head-arrow {border-color: rgb(255,99,71) transparent transparent transparent;}
.head-arrow {margin-top:0}
.next {display:none}

@-webkit-keyframes anim { 0% {opacity:0;} 60% {opacity:0} 100% {opacity:1;} }
@-moz-keyframes anim { 0% {opacity:0;} 60% {opacity:0} 100% {opacity:1;} }
@-ms-keyframes anim { 0% {opacity:0;} 60% {opacity:0} 100% {opacity:1;} }
@-o-keyframes anim { 0% {opacity:0;} 60% {opacity:0} 100% {opacity:1;} }
@keyframes anim { 0% {opacity:0;} 60% {opacity:0} 100% {opacity:1;} }
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes myslide { 0% { margin-left:100%;} 100% {margin-left:auto;} }	
@-webkit-keyframes anim3 { 0% {opacity:0;} 40% {opacity:0} 100% {opacity:1;}}		
/* Pour les affichages selon l'orientation */
@media screen and (max-width:360px) {
    /*.home img {margin-top:10%;width:50%;max-width:120px; height:auto;}*/
	.corpus p:first-child:first-letter { padding-top:3%}
	.corpus, .indexcorpus {margin-top:10%; margin-bottom:5%;}
	p, .corpus ul li {font-size:1.093em;text-align:left; }
	.sender p, .receiver p { font-size:1em;}
}
@media screen and (min-width:361px) {
	h1 { font-size:2.2em;}
	h2 { font-size:2em;}
    h3 { font-size:1.5em;}
    h5 { font-size:1em;}
	.sous-head {padding:1.5% 0 1% 0}
	p, .corpus ul li, .corpus ul li:first-child, h4 {margin-right:4%; margin-left:4%;}
}
@media screen and (max-width:420px) {
	.sous-head h1, .under-head h3  { padding-top:5%}
	.bouton { width:90%;}
}

@media screen and (min-width:786px) {
	h1 { font-size:2.5em;}
	h2 { font-size:2em;}
    h3 { font-size:1.5em;}
    h4, h5 { font-size:1.12em;}
    .sous-head {padding:1% 1% 0.3% 1%}
	p, .corpus ul li, .corpus ul li:first-child, h4 { font-size:1.25em; margin-right:7%; margin-left:7%;}
	.sender, .receiver {max-width:480px;}
	.sender p, .receiver p { font-size:1.2em;}
	.sender span, .receiver span, .sender p, .receiver p { margin:10px;}
	.corpus li { padding-left: 2%}
	img.vert {padding-top:12%}
}
@media screen and (min-width:786px) and (orientation:landscape) {
    section header {padding:2% 0 1% 0}
}
@media screen and (min-width:981px) {
	h1 { font-size:3em; }
    h2 { font-size:2.5em;}
    h3 { font-size:1.85em;}
    h4 { font-size:1.25em;}
}
@media screen and (min-width:360px) and (max-width:420px) and (min-height:600px) and (orientation:portrait),
screen and (min-width:421px) and (max-width:480px) and (min-height:800px) and (orientation:portrait),
screen and (min-width:599px)and (orientation:portrait),
screen and (device-aspect-ratio: 16/9) and (orientation:portrait) {
    .homeImg, .homeTitle {margin:20% 0;}
    .homeTitle { bottom: 4%}
}
@media screen and (orientation:portrait) {
	.horz {display:none;}
	.vert {display:block;}
	span.vert {display:inline-block}
    .homeImg, .homeTitle {display:block; width:100% }
}
@media screen and (orientation:landscape) {
	.horz {display:block;}
	.vert {display:none;}
	span.horz {display:inline-block}
	.homeImg, .homeTitle {display:inline-block;width:40%;vertical-align:middle; margin-top:7%}
	.homeTitle {width:50%;}
	.home { padding-bottom:10%}
}