/** BODY **/
*{	box-sizing: border-box;}

html, body {
	width : 100%;
	height : 100%;
	margin : 0 0 0 0;
	padding : 0 0 0 0;
	font-family: 'Lato', sans-serif;
	color : white;
	background-color : #eff1f3;
}

.drapeau_fr
{
background-color : #323c46;
width: 50px;
height: auto;
margin-left: 155px;
padding-top:  25px;
  

}

#drapeau_fr
{
display : inline;
}

a, p {font-size : 17px; line-height : 25px;  font-weight : 500; letter-spacing : 1px; color: #323c46;}
p1 {font-size : 18px; line-height : 25px;  font-weight : 500; letter-spacing : 1px; color: #323c46; }
p2 {color: #54b808; text-decoration: underline;}
p3 { color: white; font-size: 15px}
p4 { color: white; font-size: 15px}
p5 { color: white; font-size: 11px; font-weight: 100; }
p6 { color: #323c46; font-size: 12px; font-weight: 100; }
p7 { color: #54b808; font-size: 12px; font-weight: 100; text-decoration: underline;}
p9 { color: white; font-size: 15px}

p {margin : 0 0 0 0; text-align: center}
p1 {margin : 0 0 0 0;font-weight : 300 ; letter-spacing: 1px; text-align: justify;}
a {text-decoration : none; color : white;}
b {font-weight : 800;}

/* BLOC */

.COL_1, .COL_2, .COL_3, .COL_4, .COL_9 {float : left;}
.COL_2 {width : 22.2222222%; text-align : left; padding : 60px 15% 60px 60px; color : black;}
.COL_3 {width : 33.333333%; text-align : left; padding : 0px 40px 0px 0px;}
.COL_4 {width : 50%; text-align : left; padding : 0px 50px 20px 50px; color : white; text-align : justify;}
.COL_7 {width : 77.77777777%; text-align : left; padding : 60px 15% 60px 60px; color : black;}
.COL_9 {width : 100%; text-align : center; padding : 0px 150px 0px 150px;}
.COL_10 {width : 45%; float: left; padding : 0px 0px 0px 0px;}
.COL_11 {width : 45%; float: right; }

/* ajout bloc */
.COL_8 { height: 50px; text-align : left; padding : 50px 150px 0px 0px;}


.espace {padding-top: 10px;}

.CONTENT {position : relative; width : 900px; margin : 0 auto 0 auto; padding : 50px 0px 10px 0px; text-align: justify;}
.CONTENT::after {display :table;content: " ";clear: both;}



.IMG {background-size : cover; background-position : center;}
.REEL {background-size : 80px; background-position : top center; }
.H400 {min-height : 400px;}

.LEFT {text-align : left;}
.JUST {text-align : justify;}

.PC {display : block;}
.TABLETTE {display : none;}
.MOBILE {display : none;}
.NOPADDING {padding : 0 0 0 0;}

.valign { position: relative; display : inline-block; vertical-align : middle; }
.valigndiv { position : relative; display : inline-block; height: 100%; width : 0px; vertical-align : middle;}

.FLEX {	 	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  			display: -ms-flexbox;      /* TWEENER - IE 10 */
  			display: -webkit-flex;     /* NEW - Chrome */
  			display: -o-flex;     /* NEW - Chrome */
  			display: flex; 
		flex-flow : row wrap; 
		-webkit-flex-flow : row wrap;
		-ms-flex-flow : row wrap;
		-moz-flex-flow : row wrap;
		-o-flex-flow : row wrap;
		-webkit-justify-content	: center;
		-ms-justify-content	: center;
		-o-justify-content	: center;
		-moz-justify-content	: center;
		justify-content	: center;
		width : 100%;
}

/* SVG */
.logoSVG,.sourisSVG,.oeilSVG,.cibleSVG,.tasseSVG,.crayonSVG    {display : none; width : 150px; height : 210px;}
#contact .logoSVG, #contact .sourisSVG, #contact .oeilSVG,#contact .cibleSVG,#contact .tasseSVG,#contact .crayonSVG  {display : none; width : 80px; height : 112px;}
#contact .crayonSVG, .crayonSVG {display : inline;}

/* BOUTON */
.BOUTON {display : block; color : rgb(0,255,255); background-color : rgba(0,255,255,0); width : 268px; height : 42px;border-radius: 3px;margin : 5px auto 60px auto;border : solid 1px rgb(0,255,255); padding : 9px 0px 0px 0px; font-size : 16px; font-weight : 300; letter-spacing : 1px;
transition : background-color 0.5s, color 0.5s, border 0.5s;
-o-transition : background-color 0.5s, color 0.5s, border 0.5s;
-webkit-transition : background-color 0.5s, color 0.5s, border 0.5s;
-ms-transition : background-color 0.5s, color 0.5s, border 0.5s;
-moz-transition : background-color 0.5s, color 0.5s, border 0.5s; 

}
.BOUTON:hover {background-color : rgba(0,255,255,1); color : black;}

.BOUTON_HOME {display : block; color : rgb(0,255,255); background-color : rgba(0,0,0,0.5); width : 268px; height : 42px;border-radius: 3px;margin : 5px auto 60px auto;border : solid 0px rgb(0,255,255); padding : 9px 0px 0px 0px; font-size : 16px; font-weight : 300; letter-spacing : 1px;
transition : background-color 0.5s, color 0.5s, border 0.5s;
-o-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-moz-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-webkit-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-ms-transition : background-color 0.5s, color 0.5s, border 0.5s;  

}
.BOUTON_HOME:hover {background-color : rgba(0,255,255,1); color : black;}

.BOUTON_BLACK {display : block; color : rgb(0,0,0); background-color : rgba(0,255,255,0); width : 268px; height : 42px;border-radius: 3px;margin : 5px auto 35px auto;border : solid 1px rgb(0,0,0); padding : 9px 0px 0px 0px; 
transition : background-color 0.5s, color 0.5s, border 0.5s;
-ms-transition : background-color 0.5s, color 0.5s, border 0.5s;
-o-transition : background-color 0.5s, color 0.5s, border 0.5s;
-webkit-transition : background-color 0.5s, color 0.5s, border 0.5s;
-moz-transition : background-color 0.5s, color 0.5s, border 0.5s;
}
.BOUTON_BLACK:hover {cursor : pointer; background-color : #54b808; color : rgb(0,0,0);border : solid 1px #54b808;}

.BOUTON_RETOUR { display : block; width : 100%; height : 35px; text-align : center; background-color : white; font-size : 14px; font-weight : 300; letter-spacing : 1px; text-transform : uppercase; padding : 9px 0 0 0; color : rgba(0,0,0,1);

transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
-webkit-transition: color 0.2s;

} 
.BOUTON_RETOUR:hover {color : 54b808;}

.DESCENTE {background-image : url('dg/fleche.png'); background-size : 25px; background-position : center; background-repeat : no-repeat; display : block; background-color : rgba(255,255,255,0); width : 44px; height : 44px;border-radius: 22px; margin : 5px auto 5px auto; padding : 9px 0px 0px 0px; 
transition : background-color 0.5s;
-o-transition : background-color 0.5s;
-webkit-transition : background-color 0.5s;
-moz-transition : background-color 0.5s;
-ms-transition : background-color 0.5s;

}
.DESCENTE:hover {background-color : rgba(255,255,255,0.5); }


.INLINE {display : inline-block; margin : 5px 5px 5px 5px;}

/* FONTS */
h1 { font-size : 14px; line-height : 16px; margin : 10px 0 0 0; font-weight : 800; text-transform : uppercase; letter-spacing: 2px;color:#323c46}
h2 { font-size : 14px; line-height : 16px; margin : 10px 0 0 0; font-weight : 800; text-transform : uppercase; letter-spacing: 1px;}
h3 { font-size : 14px; line-height : 16px; margin : 0 0 0 0; font-weight : 300; text-transform : uppercase;}
h4 { font-size : 21px; line-height : 28px; font-weight : 800;letter-spacing: 1px; margin-top: 100px; color:white;}
h4bis { font-size : 21px; line-height : 28px; font-weight : 500;letter-spacing: 1px; color:#323c46;}
h5 { font-size : 14px; line-height : 16px; font-weight : 300; letter-spacing: 1px; text-transform : uppercase; color:#323c46;}
h5bis { font-size : 20px; line-height : 22px; font-weight : 500; letter-spacing: 1px; text-transform : uppercase; color: #54b808;}
h5ter { font-size : 14px; line-height : 16px; font-weight : 400; letter-spacing: 1px; text-transform : uppercase; color:#323c46;}
h2bis { font-size : 14px; line-height : 30px; margin : 10px 0 0 0; font-weight : 800; text-transform : uppercase; letter-spacing: 1px; color: white}



h6 { font-size : 20px; line-height : 20px; margin : 25px 0 3px 0; font-weight : 190; text-transform : uppercase; letter-spacing: 2px;}
h7 { font-size : 20px; line-height : 20px; margin : 20px 0 0 0; font-weight : 300; text-transform : uppercase; letter-spacing: 2px;}

h8 { color:white;}


h4 span {font-weight : 300;}
.UNDERLINE {border-bottom : solid 3px #54b808;padding : 0 0 5px 0; }
.UNDERLINEBLANC {border-bottom : solid 3px rgb(255,255,255);padding : 0 0 5px 0; }
.CT {text-align : center;}

/* COULEUR */
.BLACK {color : black;}
.GREEN {color : #54b808;}
.BLANC {color : white;}
.GREY {color : #323c46;}
.BG_GREY {background-color : #323c46;}
.BG_BLANC {background-color : white;}
.BG_GREEN {background-color : #54b808;}
.BG_LIGHTGREEN {background-color : #e8f6dd;}
.BG_NOIR {background-color : black;}
.BG_GRIS {background-color : rgb(240,240,240);}


/* HOME*/
#home {	position:relative; width : 100%;height : 100%;	background-size : cover; background-position : center; }
#home img2 {width : 400px;}


.ACCROCHE {	position : relative; width : 580px; height : 260px; margin : 30px auto 0px auto; background-image : url('dg/accroche.png');	background-size : cover ;background-repeat : no-repeat;background-position: center;}	
#home .COL_9:nth-child(2){padding : 0px;}
#home .COL_9:first-child {margin-top:100px;}
#home .COL_9 a:hover { color : #54b808;}
#home .CONTENT {padding : 0px 0px 0px 0px;}

.BDP {position : absolute; bottom : 50px; width : 100%;}

/* MENU */
#menu .CONTENT {padding : 0px 0px 0px 0px;}
#menu {position : absolute; margin-top : 0px; width : 100%; background-color : rgb(255,255,255);}
#menu ul {width : 100%; height : 35px ;margin : 0px auto 0px auto; text-align : center; padding : 5px 0 0 0;}
#menu ul li {vertical-align : top;  display : inline-block; font-size : 14px; font-weight : 300; letter-spacing : 1px; margin : 0px 10px 0px 10px; text-transform : uppercase; padding : 0px 0px 5px 0px; border-bottom : 0px solid black;
transition : border-bottom 0.2s;
-o-transition : border-bottom 0.2s;
-moz-transition : border-bottom 0.2s;
-ms-transition : border-bottom 0.2s;
-webkit-transition : border-bottom 0.2s;
}
#menu ul a {color : #323c46;}
#menu ul a:hover li {opacity : 1; border-bottom : 3px solid #54b808;}

/* EN QUELQUES MOTS */
#enquelquesmots { margin-top : 0px; padding : 35px 0px 30px 0px;}
.NOVISIBLE{visibility: hidden;}
#enquelquesmots img {width : 280px;}
//.ENQUELQUESMOTS {position : absolute; background-image : url('dg/enquelquesmots.png'); background-size : cover; height : 23px; width : 217px;top : 50%; left : 50%; margin : -12px 0px 0px -170px;}

/* SAVOIR-FAIRE */
#experience img {width : 400px;}
#experience .CONTENT:first-child {padding : 70px 50px 70px 50px;}

/* MON EXPERIENCE */
#monexperience ul {display : block; text-align : left; list-style:none; padding : 0;}
#monexperience .CONTENT:first-child {padding : 50px 0 50px 0;}
#monexperience ul li {display : inline-block; width : 100px; 
transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
}
#monexperience .COL_9:nth-child(3) {padding : 0px 100px 0px 150px;}
#monexperience ul li img {width : 100%;padding : 0px 5px 0px 5px;vertical-align: middle;}
#monexperience { background-repeat : repeat-x repeat-y;}



/* BOUCLE */
#portfolio a {display : inline-block; height : 280px;}
#portfolio .CONTENT {text-align : center; padding : 0px 0 60px 0; width : 100%;}
#portfolio .CONTENT:first-child {text-align : center; padding : 60px 0 60px 0;}


#conteneur
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


ul_portfolio

{
    
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    


/* On supprime les puces, on précise une largeur et on centre la liste par rapport à la page. */
    list-style: none;
    width: 100%;
    margin: auto;

}

menuflottant
{ 

/* On fixe les dimensions des éléments de notre liste. */
    width: auto;
    height: auto;



}


lig

{

/* On fixe les dimensions des éléments de notre liste. */
    width: 300px;
    height: 280px;


/* On met en forme le texte. */
    text-align: center;
    font-weight: 300;

  

/* On modifie l'affichage pour que les éléments soient sur la même ligne. */
    display: inline-block;
    

    

/* On ajoute une petite bordure et on définit les marges.  */
    margin: 0px;
    padding: 0px;

      

/* On centre l'arrière-plan. */
    background-position: center;

      

/* On modifie la position pour pouvoir ensuite placer comme on le souhaite la description des liens. */
    position: relative;
    


/* On n'affiche pas ce qui dépasse de nos éléments ! */
    overflow: hidden;   

}


/* On indique les images à afficher en arrière-plan pour chaque élément. */
#item1{background-image: url('images/vignette_atbs.jpg')}
#item2{background-image: url('images/vignette_espe.jpg')}
#item3{background-image: url('images/vignette_itmag.jpg')}
#item4{background-image: url('images/vignette_pds.png')}
#item5{background-image: url('images/vignette_rdv.png')}
#item6{background-image: url('images/vignette_digilab.jpg')}
#item7{background-image: url('images/vignette_click.jpg')}
#item8{background-image: url('images/vignette_convention_si.jpg')}
#item9{background-image: url('images/vignette_csh_appli.jpg')}
#item10{background-image: url('images/vignette_dd.jpg')}
#item11{background-image: url('images/vignette_visuels.jpg')}


lig a

{

/* Pour fixer les dimensions d'un lien, il est nécessaire de l'afficher en tant qu'élément de type block. */
    display: block;
    width: 300px;
    height: 100%;
    text-decoration: none;
}


lig span

{
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;

        

/* La taille des lignes est égale à la hauteur de l'élément. Cela permet de centrer verticalement le texte. */
    
      

/* Abusons du CSS3 en affichant un arrière-plan semi-transparent ! */
        background-color: rgba(83,184,8,0.9);


/* Position absolue pour afficher la description avec précision. */
    position: absolute;

    

/* L'ordonnée de l'élément est égale à la hauteur de son parent (150px) : la description sera donc située sous son parent. */
    left: 0px;
    top: 300px;

/* N'oublions pas les transitions ! */
    transition-property: top;
    transition-duration: 0.5s;
}



lig:hover span

{
    top: 0px;
}



#portfolio .VIGNETTE { position : relative; height : 280px; display : inline-block; background-size : cover; background-position : center; float : none; clear : both; padding : 0 0 0 0;  margin :0; opacity : 1; vertical-align : top;
 transition : opacity 0.8s;
 -o-transition : opacity 0.8s;
 -ms-transition : opacity 0.8s;
 -webkit-transition : opacity 0.8s;
 -moz-transition : opacity 0.8s;
 }

#portfolio .VIGNETTE>div {opacity : 0;
transition : opacity 1s;
-o-transition : opacity 1s;
-ms-transition : opacity 1s;
-webkit-transition : opacity 1s;
-moz-transition : opacity 1s;

}

#portfolio .INFOS {position : relative; width : 100%; height : 280px; margin : 0 0 0 0; opacity : 0; background-color : rgba(0,255,255,0.9); overflow : hidden; 
transition : opacity 0.5s;
-o-transition : opacity 0.5s;
-ms-transition : opacity 0.5s;
-webkit-transition : opacity 0.5s;
-moz-transition : opacity 0.5s;
}
#portfolio .COL_4, #portfolio .COL_3, #portfolio .COL_2, #portfolio .COL_7 {width : 300px; text-align : center;}
.SEPARATEUR {display: block; width : 50px; margin : 10px auto 10px auto; border-top : solid 3px black;}
.SEPARATEUR_GAUCHE {display: block; width : 50px; margin : 10px 0 10px 0; border-top : solid 3px #54b808;}
#creation .COL_4 {padding : 30px 30px 30px 30px;}
#creation .COL_3 {padding : 30px 30px 30px 30px;}
#portfolio h5 {margin : 30px 0 0 0;color : black; opacity : 0;
transition : margin-top 0.2s, opacity 0.2s;
-o-transition :  margin-top 0.2s, opacity 0.2s;
-ms-transition :  margin-top 0.2s, opacity 0.2s;
-webkit-transition :  margin-top 0.2s, opacity 0.2s;
-moz-transition :  margin-top 0.2s, opacity 0.2s;

}
#portfolio a:hover .INFOS {opacity : 1;}
#portfolio a:hover .INFOS h5 {margin-top : 5px; opacity : 1;}

/*CREATION*/
#creation {background-color : rgb(240,240,240);}
#creation .COL_4 {padding : 30px 50px 30px 50px; color : black; text-align : left;}
#creation h5 {font-size : 18px; line-height : 18px;}
#creation .CREATION {margin-top : -130px;}
#creation img {width : 100%; margin : 0;}
#creation .CONTENT {margin-top : 0px; margin-bottom : 0px; padding : 0 0 0 0 }
#creation .COL_9 {margin : 0 0 0 0; padding : 0 0 0 0;}
#creation .CONTENT p {color : black; padding: 0px 0px 30px 0; text-align : justify; font-size : 14px; line-height: 19px;}

/* APPARITION */
.APPARITION_SIMPLE{opacity : 0; 
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s;}

.APPARITION_NEWS_SUPP{
opacity : 0; 
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s;}	

.APPARITION{opacity : 0; 
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s;}
.APPARITION_2{opacity : 0; 
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s; 
transition-delay : 0.3s;
-o-transition-delay : 0.3s;
-webkit-transition-delay : 0.3s;
-moz-transition-delay : 0.3s;
-ms-transition-delay : 0.3s;}
.APPARITION_3{opacity : 0; 
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s; 
transition-delay : 0.6s;
-o-transition-delay : 0.6s;
-ms-transition-delay : 0.6s;
-webkit-transition-delay : 0.6s;
-moz-transition-delay : 0.6s;}

/* NEWS */
.NEWS { width : 30% ; padding : 0 0 0 0; margin : 5px;
opacity : 0;
border-radius: 3px;
transition : opacity 0.8s;
-o-transition : opacity 0.8s;
-moz-transition : opacity 0.8s;
-ms-transition : opacity 0.8s;
-webkit-transition : opacity 0.8s; 
}

.NEWS img { width : 100% ;}
.NEWS p {font-size : 13px; line-height : 16px;  font-weight : 300; }
.NEWS h3 {margin-top : 0px;}
.NEWS h4 {margin-bottom : 0px;}
.NEWS div {padding : 0 10px 20px 10px;}

.boutonImageActu:hover {cursor : pointer;}
#actualite .BOUTON_BLACK CT:hover {cursor:pointer;}
#masqueNoir {position : fixed; top:0; left :0; width : 100%; height : 100%;opacity : 0.5; background-color : black; z-index : 101; display : none;}
#zoomActu {text-align : center; position : absolute; left :50%; width : 700px; margin-left : -350px; z-index : 102; display : none;}
#zoomActu .imagesActu {width : 700px;}
#zoomActu #fermer {width : 60px; margin-top : -30px;margin-bottom : 10px;}
#zoomActu #fermer:hover {cursor : pointer;}


/* FORMULAIRE */
form {width : 300px; margin : 25 auto 0 auto; font-family: 'Lato', sans-serif;}

form input, form textarea { font-family: 'Lato', sans-serif; display : block; border-radius : 3px; width : 100%; margin-top : 5px; height : 50px;font-size : 16px; font-weight : 300; letter-spacing : 1px; background-color : white; border : 0px solid gray; padding : 5px 5px 5px 5px;}
form textarea {height : 250px; font-family: 'Lato', sans-serif;}
form button {font-family: 'Lato', sans-serif; display : block; color : #48555e; background-color : rgba(0,255,255,0); width : 100%; height : 42px;border-radius: 3px;margin : 5px auto 60px auto;border : solid 1px #48555e; padding : 0px 0px 0px 0px; font-size : 16px;  letter-spacing : 1px; font-weight : 800; cursor:pointer;
transition : background-color 0.5s, color 0.5s, border 0.5s; 
-o-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-ms-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-moz-transition : background-color 0.5s, color 0.5s, border 0.5s; 
-webkit-transition : background-color 0.5s, color 0.5s, border 0.5s; 
}
form button:hover {background-color : #54b808; color : black; cursor:pointer; border-color : #54b808}

/* CONTACT */ 
#contact {padding : 30px 0 30px 0;}
#contact svg {margin-top : -30px;}
#contact .COL_3 h4 {padding : 0 0 0 0; margin : 0 0 5px 0;}
#contact .COL_3 p, #contact .COL_3 a {font-size : 13px; opacity : 2; 
transition : opacity 0.3s;
-o-transition : opacity 0.3s;
-ms-transition : opacity 0.3s;
-webkit-transition : opacity 0.3s;
-moz-transition : opacity 0.3s;}
#contact .COL_3 a:hover {color : #54b808;}
#contact .COL_3:nth-child(3) img {width : 30px; margin-right : 5px; margin-bottom : 20px;}
#contact .CONTENT {padding : 30px 0 30px 0}

/* RESULTAT FORMULAIRE */
#RESULTAT {position : fixed; top : 0px; left : 0px; width : 100%; height : 100%; background-color : rgba(0,0,0,0.5);}
#RESULTAT>div {position : absolute;top : 50%;left : 50%;width : 300px;margin-left : -150px;height : 160px;margin-top : -100px;background-color : rgb(0,255,255);padding : 40px 0px 0px 0px;font-size : 13px;line-height : 13px;text-align : center;color : black;text-transform : uppercase; cursor:pointer;}


#RESULTAT .CLOSE {display : inline-block;width : 43px;height : 43px;background-image : url('dg/close.png');background-size : cover;margin-top : 10px;}