/*html * {
	font-smoothing: antialiased;
	osx-font-smoothing: grayscale;
}*/w3c
 *:after, *:before {
	box-sizing: border-box;
}
* a{
	text-decoration:none
}
body {
	font-size: 100%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: black;
	background-color: #f2f2f2;
}
div#slider { 
    overflow: hidden;
    width: 98.5%;
    /*height: 22.5em;*/
    margin-left: 0.7%;
    margin-top: 2%;
    /* border: 10px solid #fff; */
    animation: ombre 10s ease infinite;
    transition: 1s;
}
div#slider figure img { 
width: 20%; 
float: left;
height: 10%;
}
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slide infinite; 
}
@keyframes slide {
0%{ left: 0%; }
15%{ left: 0%; }
20% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
55% { left: -200%; }
60% { left: -300%; }
75% { left: -300%; }
80% { left: -400%; }
100% { left: -400%; 
}
}
/*........................................................................................................Contenant*/
#contenair {
	top: 5em;
	max-width: 1170px;
	margin: 0 auto;
	margin-left: 7.2%;
}
main {
	max-width: 1170px;
	margin: 0 auto;
}
#logoburger {
	display: none;
}
/*............................................................................................................header*/
header {
    position: relative;
    height: 31em;
    background-color: #fff;
}
/*..............................................................................................................logo*/
a#logo {
    display: inline-block;
    background-repeat: no-repeat;
    width: 241px;
    height: 114px;
    text-indent: -9000px;
    margin-left: 3%;
    margin-top: 2%;
    background-image: url(../img/logo.png)
}
a#logo:link, a#logo:visited {
	background-position: center center;/*Pour afficher le logo du milieu*/
}
a#logo:hover {
	background-position: center top;/*Pour afficher le logo du haut*/
}
a#logo:active {
	background-position: center bottom;/*Pour afficher le logo du bas*/
}
.fixedTop a.logotop {
    display: inline-block;
    background-repeat: no-repeat;
    width: 338px;
    height: 37px;
    margin-left: -64%;
    margin-top: 5.6%;
    background-image: url(../img/logotop.png);
}
.fixedTop a.logotop:link, .fixedTop a.logotop:visited {
	background-position: center center;/*Pour afficher le logo du milieu*/
}
.fixedTop a.logotop:hover {
	background-position: center top;/*Pour afficher le logo du haut*/
}
.fixedTop a.logotop:active {
	background-position: center bottom;/*Pour afficher le logo du bas*/
}
/*.................................................................................................................main*/
main {
	height: 100%;
	/*overflow-x:hidden;	*/
}
main::before {/*création 1er block en ccs*/
	content: '';
	position: fixed;
	width: 100%;
	max-width: 1170px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	height: 47.5%;
	z-index: -1;
	animation: moveColor 10s ease infinite;
	transition: 0.05s;
/*	overflow-x: hidden;	*/
}
hr {
	border: 1px solid;
}
/*..........................................................................................................Nav*/
#imgburger {
	display: inline;
}
nav {
	right: 27px;
	top: 3.5em;
	position: absolute;
}
nav li {
	display: inline-block;
	list-style: none;
	font-weight: bold;
	padding-top: 3.5%;
}
li a {
	text-decoration: none;
	color: #F8BF54;
}
#menu {
	text-align: center;
}
.fixedTop {
    position: fixed;
    top: -27px;
    width: 1170px;
    max-width: 100%;
    height: 135px;
    background-color: #fff;
	animation: ombre 10s ease infinite;
	transition: 0.05s;   
	z-index: 20;
}
/*....................................................................................................bouton-nav*/
.btntaille {
	width: 23px;
	height: 23px;
	top: 72px;
	border-radius:50%;
	position: absolute;
	box-shadow: 0 0 0 0 #fff;
	animation: pulse 3s infinite cubic-bezier(0, 0, 0, 0);
}
.btntailleanim {
	width: 23px;
	height: 23px;
	top: 31px !important;
	border-radius:50%;
	position: absolute;
	box-shadow: 0 0 0 0 #fff;
	animation: pulse 3s infinite cubic-bezier(0, 0, 0, 0);
}
@keyframes pulse {
to {
box-shadow: 0 0 0 12px #fff;
}
}
.presentation {
	left: -15px;
	position: absolute;
	top: -45px;
}
#btnpresentation {
	right: 644px;
	top: 15px;
	}
.fixedTop #btnpresentation {
	right: 644px;
	top: 15px;
	
}
.portfolio {
	left: 151px;
	position: absolute;
	top: -45px;
}
#btnportfolio {
	right: 488px;
	top: 15px;
	}
.fixedTop #btnportfolio {
	right: 488px;
	top: 15px;
	}
.cv {
	left: 329px;
	position: absolute;
	top: -45px;
}
#btncv {
	right: 332px;
	top: 15px;
	}
.fixedTop #btncv {
	right: 332px;
	top: 15px;
	} 
.reseaux {
	left: 465px;
	position: absolute;
	top: -45px;
}
#btnreseaux {
	right: 172px;
	top: 15px;
	}
.fixedTop #btnreseaux {
	right: 172px;
	top: 15px;
	}
.contact {
	left: 626px;
	position: absolute;
	top: -45px;
}
#btncontact {
	right: 15px;
	top: 15px;
	}
.fixedTop #btncontact {
	right: 15px;
	top: 15px;
	}
/*............................................................................................................section*/
h2 {
	font-size: 40px;
	font-weight: bold;
}
section {
	/*creation du block(section) contenant le texte,la couleur et la marge a droite pour le decaler vers la gauche */ 
	position: relative;
	min-height: 50px;
	margin-left: 30px;
	background-color: #fff;
	padding: 1em 1em 4em;
	font-size: 12px;
	color: black;
}
.sectionanim {margin-left: 0 !important;}
/*.........................................................................*/
.cd-service::before /*creation d'un block vide en css pour preparer le contenu de l'icone*/, .cd-service::after {/*block vide pour preparer le contenu de la ligne entre chaque icone*/
	content: '';
	position: absolute;
	width: 114px;
	right: 100%;
	z-index: 2;
}
.cd-service::before {
	top: 0;
	height: 50px;
	background-repeat: no-repeat;
}
.cd-service::after {
	top: 50px;
	bottom: 0;
	background-image: url(../img/cd-pattern-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
	background-repeat: repeat-y;
}
.cd-service.cd-service-divider:last-child {
	top: 50px;
	bottom: 0;
	background-image: url(../img/cd-pattern-small-1.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
	background-repeat: repeat-y;
}
.cd-service.cd-service-divider::after {
	top: 0;
	background-image: url(../img/cd-pattern-small-1.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-1::before {
	background-image: url(../img/cd-icon-2-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-2::before {
	background-image: url(../img/cd-icon-1-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-3::before {
	background-image: url(../img/cd-icon-1-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-4::before {
	background-image: url(../img/cd-icon-1-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-5::before {
	background-image: url(../img/cd-icon-3-small.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
.cd-service.cd-service-5::after {
	background-image: url(../img/cd-pattern-small-1.svg);/*fond de 1px de hauteur et de 56px de large, permet de rendre la ligne responsive*/
}
/*..........................................................................................................PRESENTATION*/
#iconepresentation {
	margin-left: 5%;
    margin-top: 3.5%;
    margin-right: 3%;
}
#paragraphepresentation {
    max-width: 72%;
    display: inline-block;
    padding-left: 2%;
    font-size: 13px;
    line-height: 151%;
}
#presentation {
	top: -30px;
    color: #F8BF54;
    display: inline-block;
    height: 50px;
    padding-top: 2%;
    position: relative;
}
.blockpresentation {
    height: auto;
    margin-top: 3%;
    margin-bottom: 5%;
}
/*.............................................................................................................PORTFOLIO*/
#portfolio {
	color: #F9975A;
    top: -25px;
    display: inline-block;
    height: 50px;
    padding-top: 2%;
    position: relative;
}/*titre*/
.blockcontenant {
	width: 100%;
    height: auto;
    margin-left: 1%;
    padding-top: 10%;
    padding-bottom: 15%;
}
#blockun, #blockdeux, #blocktrois, #blockquatre, #blockcinq  {
	margin-left: 4%;
    width: 100%;
}
/*...............................................................................................................bouton */
#capturerun, #decapturerun {
	width: 145px;
	height: 145px;
	border: none;
	display: inline-block;
	cursor: pointer;
	background-image:url(../img/formation.jpg);
	margin-left: 3%;
	margin-top: 3%;
}
#capturerun:hover, #decapturerun:hover{
	opacity:0.7;
}
#capturerdeux, #decapturerdeux {
	width: 145px;
	height: 145px;
	border: none;
	display: inline-block;
	cursor: pointer;
	background-image:url(../img/pro.jpg);
	margin-left: 3%;
	color: #fff;
	margin-top: 3%;
}
#capturerdeux:hover, #decapturerdeux:hover{
	opacity:0.7;
}
#capturertrois, #decapturertrois {
	border-radius: 50%;
	width: 145px;
	height: 145px;
	border: none;
	cursor: pointer;
	display: inline-block;
	background-image:url(../img/asso.jpg);
	margin-left: 3%;
	color: #fff;
	margin-top: 3%;
}
#capturertrois:hover, #decapturertrois:hover{
	opacity:0.7;
}
#capturerquatre, #decapturerquatre {
	border-radius: 50%;
	width: 145px;
	height: 145px;
	border: none;
	cursor: pointer;
	display: inline-block;
	background-image:url(../img/perso.jpg);
	margin-left: 3%;
	color: #fff;
	margin-top: 3%;
}
#capturerquatre:hover, #decapturerquatre:hover{
	opacity:0.7;
}
#capturercinq, #decapturercinq {
	border-radius: 50%;
	width: 145px;
	height: 145px;
	border: none;
	cursor: pointer;
	display: inline-block;
	background-image:url(../img/stage.jpg);
	margin-left: 3%;
	color: #fff;
	margin-top: 3%;
}
#capturercinq:hover, #decapturercinq:hover{
	opacity:0.7;
}
/*.....................................................................Hover photo */
.morphun, .morphdeux, .morphtrois, .morphquatre, .morphcinq {
    width: 128px;
    height: 125px;
    border-radius: 50%;
    transition: border-radius 2s, border-color 3s;
}
.morphun {
    border: 2.5px solid #71CA6C;
}
.morphdeux {
    border: 2.5px solid #4CB2E2;
}
.morphtrois {
    border: 2.5px solid #F8BF54;

}
.morphquatre {
    border: 2.5px solid #EC9C5C;
}
.morphcinq {
    border: 2.5px solid #7CA595;
}
.morphun:hover, .morphdeux:hover, .morphtrois:hover, .morphquatre:hover, .morphcinq:hover {
	transform: rotate(720deg);
	border-radius: 50%;
	transition: all 1s; /* transition when the mouse over */
}
/*..............................................................................Formation after/hover*/
canvas {
	max-width:100%;
	margin:0 auto;
}
a#formatun:after, a#formatdeux:after, a#formattrois:after, a#formatquatre:after, a#formatcinq:after, a#formatsix:after, a#formatsept:after, a#formathuit:after, a#formatneuf:after,a#formatdix:after  { 
    position: relative;
    top: 18px;
    left: -10%;
    font-size: 1.25em;
	font-weight:bold;
	margin: 22px 0 0 -100px;
    color: #71CA6C;
    opacity: 0;
    transition: opacity 1s;;
    display: inline-block;
    width: 72px;
    white-space: nowrap;
}
a#formatun:after { 
    content: "Site factice boostrap";
}
a#formatdeux:after { 
    content: "Site factice php";

}
a#formattrois:after { 
    content: "Site factice";
}
a#formatquatre:after { 
    content: "Montage Vidéo";
}
a#formatcinq:after { 
    content: " Ébauche Animation";
}
a#formatsix:after { 
    content: "Colorisation";
}
a#formatsept:after { 
    content: "Mise en page";
}
a#formathuit:after { 
    content: "Affiche";
}
a#formatneuf:after { 
    content: "Refonte d'un logo";
}
a#formatdix:after { 
    content: "Mailing";
}

/*..............................................................................Pro after/hover*/
a#proun:after, a#prodeux:after, a#protrois:after, a#proquatre:after, a#procinq:after, a#prosix:after, a#prosept:after { 
    position: relative;
    top: 18px;
    left: -7%;
    font-size: 1.25em;
	font-weight:bold;
	margin: 22px 0 0 -100px;
    color: #4CB2E2;
    opacity: 0;
    transition: opacity 1s;;
    display: inline-block;
    width: 72px;
    white-space: nowrap;
}
a#proun:after { 
    content: "Catalogue";
}
a#prodeux:after { 
    content: "Catalogue";
}
a#protrois:after { 
    content: "Logo";
}
a#proquatre:after { 
    content: "Logo";
}
a#procinq:after { 
    content: "Logo";
}
a#prosix:after { 
    content: "Retouche Portrait";
}
a#prosept:after { 
    content: "Retouche Bijoux";
}
/*..............................................................................Asso after/hoverr*/
a#assozero:after, a#assoun:after, a#assodeux:after, a#assotrois:after, a#assoquatre:after, a#associnq:after, a#assosix:after, a#assosept:after, a#assohuit:after, a#assoneuf:after  { 
    position: relative;
    top: 18px;
    left: -10%;
    font-size: 1.25em;
	font-weight:bold;
    color: #F8BF54;
    opacity: 0;
    transition: opacity 1s;
	margin: 22px 0 0 -56px;
    display: inline-block;
    width: 30px;
    white-space: nowrap;
}
a#assozero:after { 
    content: "Site CMS";
}
a#assoun:after { 
    content: "Affiche";
}
a#assodeux:after { 
    content: "Affiche";
}
a#assotrois:after { 
    content: "Affiche";
}
a#assoquatre:after { 
    content: "Affiche";
}
a#associnq:after { 
    content: "Affiche";
}
a#assosix:after { 
    content: "Affiche";
}
a#assohuit:after { 
    content: "Affiche";
}
a#assosept:after { 
    content: "Logo";
}
a#assoneuf:after { 
    content: "Cahier des charges";
}
/*..............................................................................Perso after/hover*/
a#persoun:after, a#persodeux:after,a#persotrois:after   { 
    position: relative;
    top: 18px;
    left: -10%;
    font-size: 1.25em;
	font-weight:bold;
	margin: 22px 0 0 -100px;
    color: #F8BF54;
    opacity: 0;
    transition: opacity 1s;;
    display: inline-block;
    width: 72px;
    white-space: nowrap;
}
a#persoun:after { 
    content: "Affiche";
}
a#persodeux:after { 
    content: "Carte invitation";
}
a#persotrois:after { 
    content: "Logo";
}
.pic {
    margin-right: 6%;
    margin-top: 25px;
}/*marge photo*/
/*..............................................................................stage after/hover*/
a#stageun:after, a#stagedeux:after, a#stagetrois:after, a#stagequatre:after, a#stagecinq:after, a#stagesix:after, a#stagesept:after, a#stagehuit:after, a#stageneuf:after, a#stagedix:after { 
    position: relative;
    top: 18px;
    left: -10%;
    font-size: 1.25em;
	font-weight:bold;
	margin: 22px 0 0 -100px;
    color: #A3C0B5;
    opacity: 0;
    transition: opacity 1s;;
    display: inline-block;
    width: 72px;
    white-space: nowrap;
}
a#stageun:after { 
    content: "Maquette";
}
a#stagedeux:after { 
    content: "Maquette";
}
a#stagetrois:after { 
    content: "Site fictif";
}
a#stagequatre:after { 
    content: "Maquette";
}
a#stagecinq:after { 
    content: "Maquette";
}
a#stagesix:after { 
    content: "Site CMS";
}
a#stagesept:after { 
    content: "Gestion de contenu";
}
a#stagehuit:after { 
    content: "Gestion de contenu";
}
a#stageneuf:after { 
    content: "Gestion de contenu";
}
a#stagedix:after { 
    content: "Site CMS";
}
a#formatun:hover:after, a#formatdeux:hover:after, a#formatdeux:hover:after, a#formattrois:hover:after, a#formatquatre:hover:after, a#formatcinq:hover:after, a#formatsix:hover:after, a#formatsept:hover:after, a#formathuit:hover:after, a#formatneuf:hover:after,  a#proun:hover:after, a#prodeux:hover:after, a#protrois:hover:after, a#proquatre:hover:after, a#procinq:hover:after, a#prosix:hover:after, a#prosept:hover:after, a#prohuit:hover:after, a#assoun:hover:after, a#assodeux:hover:after, a#assotrois:hover:after, a#assoquatre:hover:after, a#associnq:hover:after, a#assosix:hover:after, a#assosept:hover:after,a#assohuit:hover:after, a#persoun:hover:after, a#persodeux:hover:after, a#persotrois:hover:after, a#stageun:hover:after, a#stagedeux:hover:after, a#stagetrois:hover:after, a#stagequatre:hover:after, a#stagecinq:hover:after, a#stagetrois:hover:after, a#assozero:hover:after, a#assoneuf:hover:after, a#stagesix:hover:after, a#stagesept:hover:after, a#stagehuit:hover:after, a#stageneuf:hover:after, a#stagedix:hover:after, a#formatdix:hover:after{
	opacity: 1;
	transition: opacity 0.5s 0.5s;
}
/*.........................................................................CV*/
#cv {
	color: #7CC56A;
    top: -25px;
    display: inline-block;
    height: 50px;
    padding-top: 2%;
    position: relative;
}
h3 {
	font-size: 12px;
	font-weight: bold;
	margin-top: 2%;
}
legend p {
	padding-left: 2%;
	font-size: 14px;
	font-weight: bolder;
	margin-top: 2%;
	margin-bottom: 0.5%;
}
.paragraphecv {
	max-width: 68%;
	display: inline-block;
	font-size: 13px;
	line-height: 151%;
}
#boutoncv {
    background-color: #71CA6C;
    display: inline-block;
    padding: 13px 2% 11px 13px;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 13px;
    color: white;
    margin-right: 30%;
    margin-top: 1.5%;
    max-width: 52%;
    height: 11px;
    border-radius: 20px;
    float: right;
    white-space: nowrap

    
}
#boutoncv:hover, #boutoncv:focus {
	color: white;
	background-color: #F9975A;
}
/*............................................................................................................reseaux*/
#reseaux {
	color: #40A4A7;
    top: -25px;
    display: inline-block;
    height: 50px;
    padding-top: 2%;
    position: relative;
}
.hauteur {
	height: 37em;
}
.blockreseau {
	width: 96%;
    height: auto;
    margin-left: 20%;
    padding-top: 8%;
}
#googleplus {
	margin-left:4%;
}
#googleplus:hover {
	opacity:0.7;
}
#linkedin {
	margin-left:4%;
}
#linkedin:hover {
	opacity:0.7;
}
#viadeo {
	margin-left:4%;
}
#viadeo:hover {
	opacity:0.7;
}
/*............................................................................................................contact*/
#contact {
	color: #4CB2E1;
    top: -60px;
    display: inline-block;
    height: 50px;
    padding-top: 6%;
    position: relative;  
}
footer {
	height: 20%;
}
footer p {
	float: right;
    margin-right: 4%;
	color: #EB9D5C;
}
/*..............................................................................................changement de couleur */
@keyframes moveColor {
 from {
 background-color:#F8BF54;
}
 10% {
 background-color:#F9975A;
}
 20% {
 background-color:#71CA6C;
}
 30% {
 background-color:#40A4A7;
}
 40% {
 background-color:#4CB5EE;
}
 50% {
 background-color:#F8BF54;
}
 60% {
 background-color:#F9975A;
}
 70% {
 background-color:#71CA6C;
}
 85% {
 background-color:#40A4A7;
}
 100% {
 background-color:#4CB5EE;
}
 to {
 background-color:#F8BF54;
}
}
@keyframes ombre {
from {
 box-shadow:0 7px 15px -5px #F8BF54;
}
 10% {
 box-shadow:0 7px 15px -5px #F9975A;
}
 20% {
 box-shadow:0 7px 15px -5px #71CA6C;
}
 30% {
 box-shadow:0 7px 15px -5px #40A4A7;
}
 40% {
 box-shadow:0 7px 15px -5px #4CB5EE;
}
 50% {
 box-shadow:0 7px 15px -5px #F8BF54;
}
 60% {
 box-shadow:0 7px 15px -5px #F9975A;
}
 70% {
 box-shadow:0 7px 15px -5px #71CA6C;
}
 85% {
 box-shadow:0 7px 15px -5px #40A4A7;
}
 100% {
 box-shadow:0 7px 15px -5px #4CB5EE;
}
 to {
 box-shadow:0 7px 15px -5px #F8BF54;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*CSS pour IE versions 10, 11*/
html,main {
	overflow-x:inherit !important;
}
section {
	margin-left: -81px !important;
    position: inherit !important;
	background-color:#FFF;
}
main::before {
	display: none !important
}
#Message {
	margin-left:134px;
	}
#formulaire {
	left:-1px;
}
}