body{margin: 0;
    background-image: url(images/grey-bg.png);
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #f6f8f8 ;
   font-family: 'kaushan script',cursive;}

main{max-width:1900px;margin: 0 auto; }

a{text-decoration: none;color: black}
a:hover{text-decoration: none;color: black;}
nav>ul>li{display: inline-block;
    width:8%;
    border-top:1px dashed pink;;
    border-bottom: 1px dashed pink;
    margin:1%;
    padding:1%;
    text-align: center; }

nav>ul>li:hover{cursor: pointer;transform: scale(1.5);}
nav>ul>li:nth-child(5){border: 0;}
nav img{width: 100%;}


#etiquette{background:#f0b7d4;width: 15%;
    transform: rotate(45deg);
    text-align: center;
    position:absolute;
    top:4%;
    left:89%;
}

#etiquette p{border-top:2px solid white;padding: 1%;border-bottom:2px solid white;color: white; }



#slide{overflow: hidden;width: 100%;max-height: 500px;margin: 0 auto;}


.chevron-gauche{height: 80px;width: 80px;background-image: url(images/large_left.png);z-index: 1000;position: absolute;top:40%;}

.chevron-droite{height: 80px;width: 80px;background-image: url(images/large_right.png);z-index: 1000;position: absolute;top:40%;right: 50%;}







#services{margin: 5% 0;}
h2{width: 50%;text-align: center;margin:1% auto;}

hr{width: 50%;margin: 0 auto;}

.vignette{margin:1.5%;width: 18%;float: left;}

#services div:nth-child(6){clear:both;}
#pink1{clear: both;}

.vignette img{float:left;width: 40%;margin-right: 2%;}

#service1,#service4{margin-left:19.5%;}


#pink1,#pink2{width: 50%;
    float: left;
    background-image: url(images/pink-bg.png);
    padding: 1%;height: 300px;}

#pink2{opacity: 0.8;
    
    }

#pink1 p{width:65%;
    margin-left: 30%;
    text-align: right}

#pink1 h6{margin-left:50%;}
#pink2 p{width:65%;}

.guillemet{ font-size: 5em;
    left: 30%;
    position: relative;
    width: 5%;
    height:20px;color: white;}
.guillemet2{font-size: 5em;
    left: 60%;
    position: relative;
    width: 5%;
    color: white;
    bottom:10%;
}
#pink1 .guillemet2{opacity: 0;}
#pink2 .guillemet{opacity: 0;}


#portfolio{clear: both;margin: 2% 0;}


#portfolio h3{width: 50%;
    text-align: center;
    margin:1% auto;}

#portfolio ul{width: 50%;margin-left:35%;}
#portfolio>ul>li{display: inline-block;
    padding:1% 2%;color:white;}

#portfolio>ul>li:first-child{background:#E0A6A5;} 
#portfolio>ul>li:nth-child(2){background:#A5DCE1;}
#portfolio>ul>li:nth-child(3){background:#E0D9A3;}
#portfolio>ul>li:nth-child(4){background:#94CDC6;}
#portfolio>ul>li:nth-child(5){background:#BFE1A4;}


.portfolio{width: 21.5%;
    margin-left:2.5%;
    position: relative;
    text-align: center;
    float:left;
    background-color: #F5F5F5;
    margin-bottom: 2.5%;
    border-bottom:10px solid #F0D2D2 ;
    
    
}
.img-portfolio{width:  100%;position: relative;}

.img-portfolio img{width: 100%;}

.fleche{background-image:url(images/large_left.png);
    background-position:bottom;
    height: 80px;
    width: 80px;
    transform: rotate(90deg);
    left: 40%;
    position: absolute;
    top:80%;
z-index: 1;}

#portfolio h6{margin: 18% 0 1% 0;}

#prices{clear: both;background-image: url(images/green-bg.png);text-align: center;}

#top-price{width: 90px;height: 26px;background-image: url(images/topprices.png);margin: 0 auto;}

#top-prices{width: 90px;height: 26px;background-image: url(images/bottomprices.png);margin: 0 auto;transform: rotate(180deg);}

#prices>h3{margin-top:10%;}

.container-price {width: 20%;
    background-color: #F5F5F5;
    padding-bottom: 2%;
    float:left;
    margin:3% 0 7% 4%;
    
}
.price{background-color: #F5F5F5;height: 100px;
    position: relative;}

.price img { bottom: 30%;
    left: 35%;
    position: absolute;
    width: 30%;
    
}

.first-container-price {
    position: relative;
}

.price200 {
    background-image: url(images/green-bg.png);padding:2%;
}

.description li{list-style-image: url(images/star.png);border-bottom: 1px dotted;}

.description li:nth-child(3){border: 0px;}
   
.description > ul{padding-right: 10%;}


#team {
    text-align: center;
    
}
#team ul{padding: 0;}

#team li{display: inline-block;width: 10%;font-size:2em;}

.cv{background:#F5F5F5;padding-bottom: 1%;float: left;width: 20%;margin:3% 0 7% 4%; border-bottom: 10px solid #f0d2d2; }

#bottom-skills{text-align: center;transform: rotate(180deg);width: 90px;height: 26px;background-image: url(images/topprices.png);margin: 0 auto;}



#skills{background-image: url(images/pink-bg.png);}

#creation,#progress-bar{width: 50%;float: left;}


.crea{width:80%;margin-left: 18%;margin-top: 3%}
.crea img{float: left;width: 20%;margin: 2%;}
.crea > p{float: left;width: 70%;}

.container-progress-bar{width: 50%;margin-top:8%;}

.container-bar{width: 85%;
    height: 20px;
    background-color: beige;padding-top:2.5px;
    padding-left: 2.5px;
    margin-top:15px;
}
   

.bar{height: 15px;background-image: url(images/progresbar.jpg);}

.numero-bar{background-image: url(images/bgnumberbar.png);
    background-position: center;
    height: 31px;
    width:31px;
text-align: center;
    padding-top: 6px;
float: right;}



#skills > h3{text-align: center;}

#bar60{width: 0%;}

#bar82{width: 0%;}

#bar45{width: 0%;}

#bar95{width: 0%;}