/*** Il faut reflechir avant sur la maquette au titre que l'on veut mettre 
Est-ce qu'il y a des resemblence su rle titre ? 
- Titre = > H1 ou  h2 ( centrer, majuscule, gras ...)

Noter sur un papier les nom de class  a coté pour pourvoir prévoir ls class en avance.








/*** Générale ***/
*{
font-family: 'Open Sans', sans-serif;
color: #7e8287
}
a, a:hover, a:focus {
	text-decoration: none !important;
}
.tagline{
    font-size: 15px;
    color: white; /** couleur du texte en blanc **/
}

p{ 
    font-size: 15px;
        
}
#home .color {
    color: white;
}

h3{
    font-weight: bold !important;
    font-size: 20px !important;;
}

body{
    height: 100%;
}

.title {
	text-transform: uppercase;
	font-size: 50px;
	color: rgba(39,129,155,1); 
	background-image: url(images/zigouigoui.png);
	background-repeat: no-repeat;
	background-position: center  100px;
	padding: 30px;
    padding-top: 80px;
    margin: 0px;
    font-weight: bold;
}
.titlecenter{
    text-align: center;
}
.title2{
    font-weight: bold;  
}

/*************************** Navigation ***************************/
.navigation{
	text-transform: uppercase;
	min-height: 60px; /** Permet de garder la couleur verte**/
	background-color: rgba(39,129,155,1);
	color: rgba(225,225,225,1);
	font-weight: bold;
    position: fixed;
    width: 100%;
    z-index: 100;

}

/*** logo ***/
.logo {
	float: left;
	height: 60px;
	line-height: 60px;
	font-size: 25px;
	font-weight: lighter;
    color: white;
}
.logo span {
	color: rgba(207,201,29,1);
	font-weight: bold;
}

/*** Level1 ***/

#level1 { 
	float: right;
	height: 60px;
	line-height: 60px; 
	font-size: 12px;
}
#level1 ul {
 	list-style-type: none;
    margin: inherit;
    padding: inherit;
}
#level1 ul li {
	display: inline-block;
	
}

#level1 ul li a{
	color: white;
    padding: 20px 20px 12px 20px;

    border-bottom:1px solid rgba(39,129,155,1);
    -webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: border .6s ease-in;
    
}

#level1 ul li a:hover {
	/*color: rgba(207,201,29,1);*/
	border-bottom: 10px solid rgba(207,201,29,1);
   
    
}

 #level1 ul li a:active {
	
   
    
}



/**************** Accueil ****************/
#home{
	background-image: url(../images/home.jpg);
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	background-size:cover;
	min-height: 100%;
	text-align: center;
	padding-top: 150px;
	}
#home h1{
	font-size: 50px;
	margin-bottom: 10px;
	font-weight: bold;
    letter-spacing: 6px;
}
#home h3{
	text-transform: thin;
	margin: 15;
}
#home .deco{
	height: 100px;
	background-image: url(../images/deco.jpg);
	background-repeat: no-repeat;
	background-position: center;
    margin-top: 150px;
}




.boouton {
  background-color: rgb(207, 201, 29);
  width: 150px;
  padding:10;
  text-align: center;
  text-transform: uppercase;
  border-radius: 0px;
    
}

.boxx{
   position: absolute;
    bottom: 250px;
    left: 65px;
    right: 65px; 
    color: white;
}

.deco1{
    position: absolute;
    bottom: 100px;
    left: 65px;
    right: 65px;
}

.bouton {
    
     vertical-align: middle;
            position: absolute;
    bottom: 34px;
    left: 65px;
    right: 65px;
}

.bouton a {
    padding: 15px 80px 15px 80px;
    width: 150px;
    margin: auto;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: rgba(207,201,29,1);
    border: rgba(207,201,29,1) solid 4px;
       
    text-decoration:none;
    background:none;
    -webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.bouton a:hover{
    color:#fff;
    background:rgba(39,129,155,1);
}

/****************  a propos ***********************/

/**************** Row 1***************/
#about_me {
    min-height: 700px;
    margin-bottom: 100px;
}

.deco2{
	margin: auto;
    text-align: center;  
}

.texte-about-me p{
    margin: 60px;
    text-align: center;
    font-size: 20px;
}

/**************** Row 2***************/

.row2{
	margin-top: 60px;
	margin-bottom: 100px;
}
.row2 p{
    text-align: justify;
}

/******** COL 1 **********/

#about_me .amp {
	text-align: center;
	background-image:url(../images/amp.png); 
	background-repeat: no-repeat;
	padding: 50px 60px 0px 60px;
	background-position: center  0px;
	text-align: center;
	border-right: 1px solid #7e8287;
    
}

/******** COL 2 **********/

#about_me .crai {
	text-align: center;
	background-image: url(../images/crai.png); 
	background-repeat: no-repeat;
	padding: auto;
	padding: 50px 60px 0px 60px;
	background-position: center  0px;
	text-align: center;
	border-right: 1px solid #7e8287;
}
#about_me .crai li{
	text-align: left;
	}

/******** COL 3 **********/

#about_me .gre{
	text-align: center;
	background-image: url(../images/gre.png); 
	background-repeat: no-repeat;
	padding: auto;
	padding: 50px 60px 0px 60px;
	background-position: center  0px;
	text-align: center;
	border-right: 1px solid #7e8287;
}

/********* COL 4 **********/

#about_me .ecrans{
	text-align: center;
	background-image: url(../images/ecrans.png); 
	background-repeat: no-repeat;
	padding: auto;
	padding: 50px 60px 0px 60px;
	background-position: center  0px;
	text-align: center;
	
}




/************************************ Services ********************************/

/****** ROW 1 **********/

#Services {
	min-height: 650px;
    background-color: #e5e3e1;
    text-align: left;
}
#service p{
    text-align: left;
    
}

#service col-sm-7 {
    text-align: left;
}


.row_service{
    margin-right: 50px;
}


.textleft p{
    text-align: left;
}
.center {
    padding-right: 50px !important;
    padding-left: 50px !important;
   
}
.Service {
    background-color:darkgray;
    min-height: 650px;
}


.row_service p{
        padding: 0px 0px 30px 30px;
    }
#services col-sm-6{
    text-align: justify;
}

#part2-img {
    padding: 0px;
    overflow: hidden;
    min-height: 650px;
    
}
.img1 {
    height: 100%;
}

#services .row_service p{
    font-size: 20px;
}





/************************************ mon travail ********************************/


#my_work .deco3{
	margin: auto;
    text-align: center;
    
}

.text_my_work{
    text-align: center;
    width: auto;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    
}

#my_work .col-sm-3 {
    padding: 0px;
}

#my_work .imgage_work{
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.niveau1{
    position: relative;
}

.hover_image{
    position: absolute;
    display: none;
    background-color: rgba(39,129,155,0.5);
    width: auto;
    height: auto;
    text-align: center;
    color: white;
    top:25;
    right:25px;
    left:25px;
    bottom:25px;
    padding:30px;
    

    
    
}

.niveau1:hover .hover_image {
    display: block;
}



/************************************ Contact ********************************/

#contact{
    min-height: 400px;
    text-align: center;
    text-decoration: none;
}
.black{
    background-color: black;
    height: 400px;
}

.contact{
    margin:auto;
    width: 800px;
}

.box{
      margin: 30px;
}

.box, #message{
    background-color: black;
    color:dimgray;
    border: none;
    border-bottom: 1px solid grey;
    text-align: center;
    width: 600px;
    font-size: 20px;
    font-weight: bold;
}


#message{
    width: 800px;
}