html{
background-color: rgb(108, 163, 185);
}

body{
background-color:white;
margin:auto;
max-width:760px;
}

header,main,footer{
font-family: 'Josefin Sans', sans-serif;
margin:auto;
background-color: white;
}

header{
overflow:hidden;
border-bottom: thin solid rgb(108, 163, 185);
margin-left:5%;
margin-right:5%;
}

h1,.nav1{
color:rgb(108, 163, 185);
margin-bottom:12px;
}

h1>a{
font-size:1.7em;
font-weight:bold;
float:left;
width:50%;
margin-top:3.5%;
text-decoration:none;
color:rgb(108, 163, 185);
}

h1>a:hover{
text-decoration:underline;
}

.nav1{
font-size:0.9em;
float:right;
margin-top:3.5%;
}

.nav1 li{
display:inline;
}

.nav1 li a{
text-decoration:none;
color:rgb(108, 163, 185);
}

.nav1 li a:hover{
text-decoration:underline;
color:rgb(108, 163, 185);
}

.nav1 .active{
text-decoration:underline;
}

li.puce:before, li.puce:after{
content:'•';
padding-left:1em;
padding-right:1em;
}

b{
clear:both;
margin-left:5%;
margin-right:5%;
margin-top:10px;
}

main,footer{
margin-left:5%;
margin-right:5%;
}

/*Index/Portfolio*/

#presentation{
font-size: 0.9em;
color: grey;
padding-top:10px;
padding-bottom:10px;
border-bottom: thin solid rgb(108, 163, 185);
line-height:120%;
text-align:justify;
}

#graph, #design{
width:335px;
height:335px;
margin:auto;
float:left;
margin-top:20px;
}

#graph{
background-image:url(../img/Index_Graph_BD.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:100%;
margin-right:14px;
}

#graph:hover{
-moz-transition-duration:1s;
background-size:120%;
}

#design{
background-image:url(../img/Index_Design.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:100%;
}

#design:hover{
-moz-transition-duration:1s;
background-size:120%;
}

h2{
font-size:1.3em;
}

#graph a, #design a{
display:block;
color:white;
font-size:1.3em;
text-transform:uppercase;
text-decoration:none;
font-size:2em;
height:65px;
background-color:rgba(108,163,185, 0.7);
text-align:right;
padding-top:270px;
}

.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #ffffff transparent transparent transparent;
  float:right;
  margin-bottom:0;
  margin-left:8px;
  margin-top: 33px;
}

footer{
font-size: 0.6em;
color: grey;
clear:both;
padding-top: 50px;
padding-bottom:20px;
}


 @media screen and (max-width:760px){
   .nav1{
   float:none;
   width:100%;
   margin-top:2%;
   }
    
   h1{
   margin-top: 10px;
   }   

   h1>a{
   float:none;
   width:100%;
   }
 }
 
 @media screen and (max-width:710px){
   #graph a, #design a{
   padding-left:0;
   }
 }
 
 
/*Graphisme*/


/* MENU 2 TEMPORAIRE*/

.soustype{
visibility:hidden;
}

/* FIN MENU 2 TEMPORAIRE*/

.nav2{
margin-top:1em;
color:grey;
font-size:0.9em;
text-align:right;
float:left;
width:50%;
margin-left:50%;
}

.nav2 li{
display:inline;
}

.nav2 li a{
text-decoration:none;
color:grey;
}

.puce2{
color:grey;
font-size: 0.9em;
}

li.puce2:before, li.puce2:after{
content:'•';
padding-left:1em;
padding-right:1em;
}

li.puce3:after{
content:'•';
padding-left:1em;
padding-right:1em;
}

.etiquette{
background-image:url(../img/etiquette.png);
background-repeat:no-repeat;
background-size:contain;
width:121px;
height:49px;
float:left;
padding-top:22px;
margin-left:-59px;
text-align:right;
}

.etiquette a{
text-decoration:none;
color:white;
padding-right:12px;
font-size:1.1em;
}

.etiquette a:hover{
text-decoration:underline;
color:white;
}

#Courtage, #optivie, #kernat{
width:32%;
float:left;
margin-top:2px;
}

#socarenID, #socarenWeb, #HUB3{
width:32%;
float:left;
margin-top:20px;
}

#Courtage{
background-image:url(../img/CNP_Graph.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:118%;
margin-right:2%;
}

#optivie{
background-image:url(../img/Optivie_Graph.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:118%;
margin-right:2%;
}

#kernat{
background-image:url(../img/KerNat_Graph.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:120%;
}

#socarenWeb{
background-image:url(../img/Socaren_Graph_1b.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:118%;
margin-right:2%;
}

#socarenID{
background-image:url(../img/SocarenID_Graph.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:120%;
margin-right:2%;
}

#HUB3{
background-image:url(../img/Hub3_Graph.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:105%;
}

/*Design*/

#ETM, #OAC, #love {
width:32%;
float:left;
margin-top:2px;
}

#look {
width:32%;
float:left;
margin-top:20px;
}

#ETM{
background-image:url(../img/ETM_Design_A.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:100%;
margin-right:2%;
}

#OAC{
background-image:url(../img/OAC_Design.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:115%;
margin-right:2%;
}

#love{
background-image:url(../img/Love_Design.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:100%;
}

#look{
background-image:url(../img/Look_Design.jpg);
background-size:contain;
background-repeat:no-repeat;
background-size:100%;
margin-right:2%;
}


/*vignettes graph design */

#Courtage a, #optivie a, #socarenWeb a, #socarenID a, #kernat a, #HUB3 a, #ETM a, #OAC a, #love a, #look a {
display:block;
height:100%;
padding-top:50%;
padding-bottom:10%;
opacity:0;
text-align:right;
padding-right:10%;
}

#Courtage a:hover, #optivie a:hover, #socarenWeb a:hover, #socarenID a:hover, #kernat a:hover, #HUB3 a:hover , #ETM a:hover, #OAC a:hover, #love a:hover, #look a:hover {
opacity:1;
color:white;
background-color:rgba(108,163,185, 0.7);
text-decoration:none;
}

#Courtage a h3, #optivie a h3, #socarenWeb a h3, #socarenID a h3, #kernat a h3, #HUB3 a h3, #ETM a h3, #OAC a h3, #love a h3, #look a h3 {
font-size:0.8em;
}

sup{
font-size:0.7em;
vertical-align:super;
}

.triangle2{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #ffffff transparent transparent transparent;
  float:left;
  margin-bottom:0;
  margin-left:101%;
  margin-top:1px;
}


 @media screen and (max-width:760px){
 
 .nav2{
 clear:both;
 text-align:left;
 width:100%;
 margin-left:0;
 }
 
 .etiquette{
 margin-left:0;
 background-image:none;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 20px 20px 0 0;
 border-color: #6ca2b9 transparent transparent transparent;
 margin-top:18px;
 float:left;
 padding:0;
 margin-bottom:5px;
 }
 .etiquette a{
 color:rgb(108,163,185);
 margin-left:20px;
 margin-top:-15px;
 float:left;
 }
 
 #Courtage, #optivie, #socarenWeb, #socarenID, #kernat, #HUB3, #ETM, #OAC, #love, #look {
width:48%;
margin:auto;
float:left;
margin-top:20px;
}

#Courtage, #socarenWeb, #kernat, #ETM, #love {
margin-right:4%;
}

 .triangle2{
visibility:hidden;
}

#Courtage a, #optivie a, #socarenWeb a, #socarenID a, #kernat a, #HUB3 a, #love a, #ETM a, #OAC a, #look a {
text-align :center;
padding-right:0;
}

#Courtage h2, #optivie h2, #socarenWeb h2, #socarenID h2, #kernat h2, #HUB3 h2, #love h2, #ETM h2, #OAC h2, #look h2 {
font-size:2em;
}

#Courtage a h3, #optivie a h3, #socarenWeb a h3, #socarenID a h3, #kernat a h3, #HUB3 a h3, #love a h3, #ETM a h3, #OAC a h3, #look a h3{
font-size:1.2em;
}

.etiquette a:hover{
text-decoration:underline;
color:rgb(108,163,185);
}

.nav2{
margin-bottom:2em;
}

.divbottom{
visibility:hidden;
}

input, textarea {
width:98% !important;
max-width:98% !important;
min-width:98% !important;
}

#submit{
width:102.5%;
 }
 
 h4{
margin-top:8%;
} 
 
 }

 
 @media screen and (max-width:660px){

#Courtage, #optivie, #socarenWeb, #socarenID, #kernat, #HUB3, #love, #ETM, #OAC, #look {
 float:none;
 width:100%;
 margin-top:20px;
 margin-left:0;
 }
  
#Courtage h2, #optivie h2, #socarenWeb h2, #socarenID h2, #kernat h2, #HUB3 h2, #love h2, #ETM h2, #OAC h2, #look h2 {
font-size:2.6em;
background-color:rgba(108,163,185, 0.7);
padding-top:2%;
}

#Courtage a h3, #optivie a h3, #socarenWeb a h3, #socarenID a h3, #kernat a h3, #HUB3 a h3, #love a h3, #ETM a h3, #OAC a h3, #look a h3{
font-size:1.9em;
background-color:rgba(108,163,185, 0.7);
padding-bottom:2%;
}

#Courtage a, #optivie a, #socarenWeb a, #socarenID a, #kernat a, #HUB3 a, #love a, #ETM a, #OAC a, #look a{
opacity:1;
color:white;
text-decoration:none;
}

.job{
 margin-left:10%;
 }
  
 }
 
 /*Web*/
 
 .nav2 .active{
 text-decoration:underline;
 }
 

/*Apropos*/

.nav2 li a:hover{
text-decoration:underline;
}

.apropos{
font-weight:bold;
font-size:1em;
color:rgb(108, 163, 185);
margin-bottom: 1em;
}

#Apropos p{
font-size: 0.8em;
line-height: 2em;
text-align : justify;
margin:5%;
}


#parcours h2{
margin-bottom:2em;
}

.container{
  width:20%;
  float:left
}

.verti{
  width:1px;
  height:70px;
  border: thin dashed grey;
}

.date, .dateD{
color:white;
font-size:0.9em;
font-weight:bold;
background-image:url(../img/FondCercle.svg);
background-repeat:no-repeat;
background-size:cover;
width:70px;
height:70px;
margin-left:33px;
}

#V2, #V2D{
margin-bottom:-10px;
}

#V2D{
margin-top:-2px;
}

.date2{
color:white;
font-size:0.7em;
font-weight:bold;
background-image:url(../img/FondCercle2.svg);
background-repeat:no-repeat;
background-size:cover;
width:70px;
height:60px;
margin-left:33px;
}

.date, .job, .date2, dateD {
float:left;
}

.job{
width:70%;
margin-top:10px;
}

.date span{
margin-top:28px;
margin-left:20px;
float:left;
}

.date2 span{
margin-top:30px;
margin-left:23px;
float:left;
}

.dateD span{
text-align:center;
margin-top:21px;
float:left;
}

.poste, .groupe, .descriptif{
font-size:0.8em;
line-height:1.5em;
}

.poste{
font-weight:bold;
}

.descriptif{
color:grey;
}

#DNSEP .descriptif a{
color:rgb(108, 163, 185);
text-decoration: none;
}

#DNSEP .descriptif a:hover{
color:rgb(108, 163, 185);
text-decoration: underline;
}

#Freelance, #Lactalis, #Batteur, #Ldesign, #Eureka, #DNSEP, #DNAP{
margin-bottom:2em;
}

hr{
clear:both;
border:none;
}

/*Contact*/

#Pcontact{
font-size: 0.9em;
color: grey;
padding-top:10px;
padding-bottom:10px;
border-bottom: thin solid rgb(108, 163, 185);
margin-bottom:2em;
line-height:120%;
text-align:justify;
}

input{
color:rgb(108, 163, 185);
border:1px solid rgb(108, 163, 185);
margin:0;
margin-bottom:-1px;
font-family: 'Josefin Sans', sans-serif;
width:50%;
height:2em;
padding-left:2%;
padding-top:1%;
}

textarea{
color:rgb(108, 163, 185);
border:1px solid rgb(108, 163, 185);
margin:0;
margin-bottom:-1px;
font-family: 'Josefin Sans', sans-serif;
width:50%;
max-width:50%;
min-width:50%;
height:10em;
padding-left:2%;
padding-top:1%;
}

#submit input{
width:52.5%;
background-color:rgb(108, 163, 185);
color:white;
}

#submit input:hover{
background-color:white;
color:rgb(108, 163, 185);
cursor:pointer;
}

/* pages projets */

.projet{
text-align:center;
}

h4{
color:rgb(108, 163, 185);
margin-bottom:5px;
font-weight: bold;
font-size:1.8em;
}

h4, h5 {
text-align:left;
}

.projet>p{
text-align:justify;
}

h5{
color:rgb(108, 163, 185);
font-size:1.2em;
margin-bottom:3%;
}

.projet>p{
margin-bottom: 5%;
line-height:140%;
margin-left: 2%;
margin-right:2%;
font-size:0.95em;
}

img{
margin-bottom: 5%;
width:80%;
}

i{
font-style:italic;
font-size: 0.9em;
color:grey;
}