/* -------------------------------- 

styles generales 

-------------------------------- 
@font-face {
        font-family: 'museo100regular';
        src: url('../fonts/museo/museo100regular.eot');
        src: local('../fonts/museo/museo100regular'), url('../fonts/museo/museo100regular.woff') format('woff'), url('../fonts/museo/museo100regular.ttf') format('truetype');
}*/
@font-face {
	font-family: 'Oswald', sans-serif;	
}
@font-face{
font-family: 'Raleway', sans-serif;
}
p{
font-weight:400;
}
*{
box-sizing: border-box;
}
body {
  font-size: 100%;
  font-family: 'Raleway', sans-serif;	
  color: /*#7f8c97*/ #000;
 background-color: #fff/* #F4F3F3  #333534*/;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
margin-bottom:0;
font-weight:light;
}

a {
  color: #333534;
  text-decoration: none;
}
a:hover{
border-bottom: 2px solid #FFCD38;
 }
 footer a:hover{
 border-bottom: 1px solid #FFCD38;
 }

img {
  max-width: 100%;
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
}
h1{
 font-weight: 800;
}
h2{
font-size:1.1em;
 font-weight: 600;
}

.titre{
 text-transform: uppercase;
font-weight: 600;
font-size:50px;
text-align:center;
font-family: 'Raleway', sans-serif;
}

.contenu{
	min-height: 350px;
	padding-top:50px;
	padding-bottom:50px;
}
.container{
width:100%;
}
.centrer{
max-width:1080px;
margin:0 auto;
padding-top: 70px;
text-align:center;
}
#main{
position: relative;
top:0px;
}
/*----------------------Logo-------------------*/

#logo{
width:150px;
position:fixed;
  top:15px;
  left:12.8%;
  z-index: 2;
 
}
#logo[alt]{
	/*display:none;*/
}

/*----------------------Menu principal-------------------*/
/*------------------- couleur de base #ffd73d-----------*/
#menu{
background-color:#fff;
color:#000;
  width:100%;
  position: fixed;
  top:0;
  z-index: 1;
  opacity: 1;
}
#menu ul{
  list-style: none;
  line-height: 70px;
  padding-bottom:0;
  width:75%; /*soit 1080px*/
 margin:0 0 0 52%;
}
#menu ul li{
  width:auto;
  display: inline-block;
  margin-right: 50px;
  text-transform: uppercase;
  font-weight: bold;
  vertical-align:top;
}
#menu ul li a {
    color: #000;
    font-size: 1.05em;
}

/*----------------------class section1-------------------*/
.section1{
  width:100%;
    background-blend-mode:overlay;
  background-repeat: no-repeat;
  background-position: center; 
  background-color: #FFCD38 /*#ffd73d */;
  opacity:0.8;

}
.section1 div{
width:75%;
}
#titre{
width:100%;
font-size:2em;
margin-top:75px;
text-transform:uppercase;
}

.section1 .centrer{
padding-top: 150px;
}

.section1 p{
font-size:1.3em;
/*width:960px;*/
}
/*----------------------id section1-------------------*/
#section1{
  height:700px;
  background-size: 1817px 1280px;
  background-image:linear-gradient(to right,white 0%,black 100%), url('../img/fond1.jpg');
  margin-bottom: 0;
}
.underline{
	border-bottom: 1px solid #000;
}
/*----------------------Page about--------------------
------------------------------------------------------*/
#about{
  height:700px;
  background-size: 1944px 1296px;
  background-image:linear-gradient(to right,white 0%,black 100%), url('../img/fond.jpg');
  margin-bottom: 0;
   background-position:100% 50%;
}
#cv{
width:20%;
background-color:#333534;
opacity:0.9;
margin:0 auto;
padding:20px 20px;
text-transform:uppercase;
font-size:0.8em;
font-weight:bold;
}
#download{
font-weight:600;
color:#fff;
}
#download:hover{
border-bottom: 0px;
}

#about h2{
font-weight: 500;
}
.important{
font-weight:800;
}
#about p{
font-weight:300;
}
/*----------------------skills-------------------*/
.titre2{
width:auto;
font-size:2em;
margin-top:40px;
text-transform:uppercase;
font-weight:600;
}

#skills{
/*background-color:#73d5ca;*/
width:100%;
margin:0 auto;
padding-bottom:100px;
margin-right:0;
}

/*problème avec le responsive*/
#skills ul{
width:98%;
}
.unquart{
width:20%;
margin-right:6%;
text-align:left;
background-color: #f9de5e/*#f7e695#fff8d8 /*#ffdd46*/;
padding:10px 10px;
}

.unquart:nth-of-type(4){
margin-right:0px;
}
.inline{
display:inline-block;
vertical-align:top;
}
/*-------------------Expérience-----------------*/
.demi{
width:45%;
text-align:left;
margin-right:5%;
}
.demi:first-of-type{
border-box: 2px solid #000;
}
.demi:nth-of-type(2){
margin-top:100px;
margin-right:0;
}
.grey{
/*background-color:#cae8e8;*/
background-color:#f5f5f5;
padding:20px 30px;
}
.titre3{
font-size:1.7em;
}
#experience .centrer{
margin-bottom:100px;
}
/*----------------------Page projects--------------------
------------------------------------------------------*/

#project{
  height:700px;
  background-size: 1944px 1296px;
  background-image:linear-gradient(to right,yellow 0%,red 100%), url('../img/wallpaper-5790.jpg');
  margin-bottom: 0;
   background-position:50% 50%;
   color:#fff;
}
/*----------------------Page blog--------------------
------------------------------------------------------*/

#blog{
  height:700px;
  background-size: 1800px 930px;
  background-image:linear-gradient(to right,blue 0%,red 100%), url('../img/usaro.jpg');
  margin-bottom: 0;
   background-position:50% 50%;
  
}

/*----------------------hobbies-------------------
.petit{
font-size: 16px;
}
#ci{
vertical-align: top;
width:980px;
margin-top:70px;
text-align:center;
display:block;
margin: 0 auto;
}
#ci p{
width:300px;
text-align:center;
margin-left:28%;
font-weight:light;
font-family: 'Oswald', sans-serif;

}
#ci li img{
width: 70px;
height:70px;
vertical-align:top;
}
#ci li:nth-of-type(n+2) img{
position:relative;
right:120px;
}

#ci li{
width:70px;
margin-right:90px;
display:inline-block;
}
#ci  p{
position:relative;
top:10px;
}
#ci li:last-of-type{
margin-right:0;
}
#ci li figure{
display: inline-block;
position: relative;
right:30px;
}
/*animer course vtt*/
#ci li figure:hover #vtt{
 -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
    
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
  }/* Chrome, Safari, Opera */
		@-webkit-keyframes mymove {
    		from {transform: rotate(0deg);}
   			 to {transform: rotate(-20deg);}
		}
	/* Standard syntax */
		@keyframes mymove {
   		 from {transform: rotate(0deg);}
   		 to {transform: rotate(-20deg);}
		}
		
/*  		
#ci li figure figcaption{
display: none;
}
#ci li:hover figure figcaption{
position: absolute;
right:0px;
width:70px;
}
#VTT figcaption{
right:60px;
}
#ci li:first-of-type{
width:200px;
}
*/

/*----------------------projects-------------------*/
#project{
width:100%;
background-color:#333534; /*#007070*/
padding-top:50px;
padding-bottom:100px;
}

.liste{
list-style:none;
}
.liste a li{ 
background: #fff;
text-align:center;
margin-bottom:20px;
margin-left:20px;
}
.liste a li p{
margin: 10 10 10 10;}
/*.liste a:first-of-type li{ 
background: #fff;
background-image:url('../img/img.JPG');
}
.liste a:nth-of-type(2) li{ 
 background-image:url('../img/IMG_3118.jpg');
}
.liste a:nth-of-type(3) li{ 
 background-image:url('../img/IMG_1716.jpg');
}
.liste a:nth-of-type(4) li{ 
 background-image:url('../img/IMG_3118.jpg');
}
.liste a:nth-of-type(5) li{ 
 background-image:url('../img/IMG_1716.jpg');
}*/
.liste a:hover li{ 
background:#ffd73d;
}
.liste a li{
display:inline-block;

width:250px;
}
.legend{
}


/*----------------------footer-------------------*/


footer{
 background-color:#fff;
 padding:10px 0;
 opacity:0.9;
 color:#000;
 }
 .grid{
 width:75%;
 margin:0 auto;
 }
 #copyright{
 width:100%;
 background-image:linear-gradient(to right,white 0%,black 100%);
  background-blend-mode:overlay;
 background-color:#ffd73d;
 padding:20px 0;
 }
  .grid .col6 p{
 width:420%;
 
 margin:0 auto;
 text-align:center;
 }
 .grid div{
 display:inline-block;
 width:24%;
 vertical-align: text-top;
 margin-left:0.5%;
 }
 .grid div h1{
  text-transform: uppercase;
  font-weight: bold;
  font-size:1em;
  }
 .grid div ul li{
 list-style:none;
 position: relative;
 right:40px;
 }
 .col3 p{
 padding-right:10px ;
 text-align: left;
 color:#FFCD38;
 }
 .col3 p q{
 display:block;
 margin-right:40px;
font-weight:300;
color:#474948;
width:100%;
}

  .col5 h1{
margin-left:50px;
}
.col5 a ul li{
display:inline-block;
}
.col5 a ul li a{
  color:#fff;
  background: #DB6E82;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  display: inline-block;
  width:40px;
  height:28px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
   }

 
 /*---------- Réseaux sociaux ---------------- */
#follow {
/*background-color:pink;*/
  width:200px;
  display: inline-block;
  position:absolute;
  padding-left:40px;
  padding-top:20px;
  height:50px;
  /*top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);*/
}

/* Icons */

#follow  a {
  color:#fff;
  background: #ffd73d /*#474948*/;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  position: relative;
  display: inline-block;
  width:40px;
  height:40px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}

#follow a:hover {
  background: /*#ffd73d*/ #474948;
}

/* pop-up text */

#follow  a span {
  color:#666;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:10;/*-1*/
  font-size:14px;
  border-radius:2px;
  background:#F1F1F1 /*#e6dddd*/;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

#follow  a span:before {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #e6dddd;
  position:absolute;
  bottom:-5px;
  left:40px;
}
#follow  a img{
width:20px;
}
#follow  a:last-of-type{
top:5px;
}
/* text pops up when icon is in hover state */

#follow  a:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}

/*---------------------------------CONTACT---------------------------------*/
/*-------------------------------------------------------------------------*/
#contact1{
width:auto
  height:400px;
  background-size: 2000px 1600px;
  background-image:linear-gradient(to right,white 0%,black 100%), url('../img/IMG_0323.JPG');
  padding-bottom: 100px;
  background-position:10% 35%;
}

#contact{
width:70%;

margin-left: 12%;
margin-bottom:20px;
}
.leMail:before{
content:"dedee.florence@gmail.com";
}
#contact h1{
text-align:center;
}
#ledrequis{
margin-bottom: 10px;
font-size:10px;
}
#ledrequis span{
color:red;
font-weight:bold;
}
.form-style{
	max-width: 900px;
}
#col1{
display:inline-block;
 width: 46%;
 margin-right:30px;
}
#col2{
width: 50%;
display:inline-block;
margin:0 0;
vertical-align:top;
}
.form-style label{
    display: block;
    margin: 0px 0px 15px 0px;
}
.form-style label > span{
display:none;
    width: 100px;
    font-weight: bold;
    float: left;
    padding-top: 8px;
    padding-right: 5px;
}
.form-style span.required{
    color:red;
}
.form-style .tel-number-field{
    width: 40px;
    text-align: center;
}
.form-style  .long{
    width: 120px;
}
.form-style input.input-field{
    width: 100%;
	height:50px; 
}
#message{
  width: 124%;
	height:180px; 
}

.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
 .form-style .select-field{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out; 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #EBEBEB;
    padding: 7px;
    outline: none;
    /* background-color:#ffd73d;*/

}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,  
.form-style .select-field:focus{
    border: 1px solid #0C0;
}
.form-style .textarea-field{
    height:100px;
    width: 100%;
}
.form-style input[type="button"],
.form-style input[type="submit"] {
    -moz-box-shadow: inset 0px 1px 0px 0px #ffd73a;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffd73a;
    box-shadow: inset 0px 1px 0px 0px #ffd73a;
    background-color: #ffd73d;
    border: 1px solid #ffd73a;
    display: inline-block;
    cursor: pointer;
    color: #000;
    font-weight:300;
    font-size:1.3em;
    padding: 8px 18px;
    text-decoration: none;
   width:112%;
    line-height:50px;
}
.form-style input[type="button"]:hover,
.form-style input[type="submit"]:hover {
  opacity:0.8;
}
.form-style .success{
	background: #D8FFC0;
	padding: 5px 10px 5px 10px;
	margin: 0px 0px 5px 0px;
	border: none;
	font-weight: bold;
	color: #2E6800;
	border-left: 3px solid #2E6800;
}
.form-style .error {
	background: #FFE8E8;
	padding: 5px 10px 5px 10px;
	margin: 0px 0px 5px 0px;
	border: none;
	font-weight: bold;
	color: #FF0000;
	border-left: 3px solid #FF0000;
}
#splus, #contactMailme{
margin-bottom:15px;
margin-right:10px;
}
/*-----------------responsive petits écrans------------------------------*/
@media screen and (max-width: 1300px) {
#message{
  width: 100%;
  }
  }
@media screen and (max-width: 1200px) {
main .centrer{
max-width: 840px;
margin-left:0;
}
/*--navigation--*/
#menu ul{
 margin:0 0 0 50%;
}
#menu ul li{
margin-right: 30px;
}
/*--logo--*/
#logo{
left:10%;
}

/*--skills--*/
.unquart{
width:40%;
margin-right:50px;
}
.unquart:nth-of-type(4), .unquart:nth-of-type(2){
margin-right:0px;
}
.unquart{
margin-bottom: 20px;
}

#skills ul{
max-width:91%;
margin-left:5%;
}
#skills ul li{
margin-left:0px;
}
.grid{
margin-left:10%;
}
/*--contact--*/
#contact{
width:75%;
margin-left:10%;
}
#col1{
 width: 45%;
}
/*#col2{
width: 45%;
}*/
.form-style input[type="button"],
.form-style input[type="submit"] {
    font-size:2vw;
    width:100%;
}

}
@media screen and (max-width: 950px) {
#menu ul{
 margin:0 0 0 38%;
}
/*--About--*/
#cv{
width:50%;
}

/*--skills--*/
.unquart{
}
#skills{
margin:0 auto;
}
#skills ul{
margin-left:5%;
}
#logo{
left:5%;
}
.grid{
margin-left:5%;
margin-right:0;
}
#follow {
  width:150px;
  padding-left:0px;
}
 .col5 h1{
margin-left:7px;
}
.col3{
width:34%;
}
.grey1{
background-color:#f5f5f5;
}
#contact{
width:80%;
margin-left:5%;
}

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

#menu ul li{
margin-right: 25px;
}
footer .container .grid div{
width:100%;
display:block;
margin-right:0;
font-size:1.1em;
padding: 10px 10px;
margin-bottom:20px;
}
#follow{
padding: 0px 0px;
margin-top:20px;
}
#follow  a:last-of-type{
top:2px;
}
#col5{
/* marche pas */height:150px;

}

 .grid{
 width:80%;
 }
footer{
height:800px;
}
#col1{
 width: 100%;
}
#col2{
width: 100%;
}
}
@media screen and (max-width: 700px) {
/*--skills--*/
.unquart{
width:70%;
}
.unquart:nth-of-type(1), .unquart:nth-of-type(3){
margin-right:0px;
}
.section1 #titre{
margin-top:10px;
}
#experience .centrer{
margin-bottom:500px;}

/*----experience----*/
#experience{
width:100%;
height:600px;
}
.demi{
display:block;
margin-left:20%;
margin-top:0px;
width:65%;
}
.demi:nth-of-type(2){
margin-top:10px;
margin-left:30%;
}
.titre3{
font-size:1.3em;
}
/*--contact--*/
#contact{
width:85%;
}
#contact h1{
font-size: 5vw;
}
#col1{
 width:95%;
}
#col2{
width:95%;
}
.form-style input[type="button"],
.form-style input[type="submit"] {
    font-size:3vw;
    width:95%;
}

}

@media screen and (max-width: 400px) {
.section1 .centrer{
padding-top: 50px;
}
}
/*-----------------responsive tablettes------------------------------

@media screen and (max-width: 760px) {
/*body{
 box-sizing: border-box;
 }*/
 
 /*---------------navigation---------------- 

body nav:hover ul li{
left:5px;
}
body nav ul li{
position:relative;
top:80px;
right:400px;
}
body nav ul li:last-of-type{
left:300px;
top:-150px;
}
body nav ul li{
  display: block;
}
.header .skew:before {
  left: 0;
  top: -10px;
  overflow: visible;
  height: 280px;
  background-image: url('../img/responsive.png');
  background-repeat:no-repeat;
  background-position: 24% 20%;
}
/*--------------------About-------------------
#presentation #ci{
width: 400px;
}
#presentation ul li{
width:70px;
display:inline-block;
margin-right:0;
}
#presentation #ci p{
margin-left:-100px;
}
#presentation #ci li img{
width: 70px;
height:70px;
vertical-align:top;

}
  	
/* contact  	
  	.form-style{
		max-width: 400px;
		margin: 50px 0px 50px 50px;
	}
#competences div ul{
width:300px;
margin-left:0px;
padding-left:0;
right:90px;
}
#competences div ul li{ 
width:100px;
}
#competences{
width:600px;
margin-left: 10%;
}
#competences h2{
margin-left:5%;
margin-right:0;
}


#competences:before {
  height: 570px;
}

}
/*-----------------responsive smartphone------------------------------
@media screen and (max-width: 360px) {

	.form-style{
		max-width: 250px;
		margin: 0px 0px 50px 0px;
		padding: 20px 10px 20px 10px;
}
 footer p{
 margin-left: 50%;
 width:150px;
 }
#competences div ul{
width:250px;
margin-left:0px;
padding-left:0;
right:0px;
top:20px;
}
#logiciel ul li{
width:300px;
}
#logiciel ul li span{
display:none;
}
#logiciel figure{
margin-right:0px;
}
#logiciel figure:first-of-type{
margin-left:0px;
}
#logiciel figure:hover figcaption{
font-size:12px;
}
#presentation ul{
width: 200px;
}
#presentation ul:nth-of-type(2){
width: 200px;
}
#presentation ul li{
list-style: none;
line-height:31px;
width:200px;
}
#presentation>img{
margin-left : 0px;
}
#competences div ul li{ 
width:100px;
}
#competences{
width:300px;
margin-left:0;
height:700px;
}
#competences ul{
width:100px;
}
#competences h1{
font-size:35px;
}
#competences h2{
margin-left:0;
margin-right:0;
display:inline-block;
}
#competences div:nth-of-type(3) ul li, #competences div:nth-of-type(2) ul li, #competences div:nth-of-type(4) ul li{
width: 200px;
}
#competences:before {
  height: 830px;
}
body nav ul li{
  width:60px;
  display:block;
}
}