*{
    margin:0;
    padding:0;
}


@font-face{
    font-family:"Raleway-Thin";
    src:url(../typo/Raleway-Thin.ttf);
}
    
@font-face{
    font-family:"Raleway-Light";
    src:url(../typo/Raleway-Regular.ttf);
}
   
body{
    background:url(../images/Fond_portFolio.png);
}

.fleche{
    width:50px;
    margin-top:-800px;
    box-shadow:rgba(50, 50, 50, 1) 0 1px 5px;
}


/*COMPETENCES*/

    
    span{
        font-size:30px;
        color:#a40255;
    }

    #texte_competences{
        line-height:30px;
        font-size:18px;
        color:#000000;
        font-family:"Raleway-Light";
        text-align:center;
        margin-left:50px;
        margin-right:50px;
        margin-bottom:100px;
    }

#texte_cv{
        line-height:30px;
        font-size:18px;
        color:#000000;
        font-family:"Raleway-Thin";
        text-align:center;
        margin-left:50px;
        margin-right:50px;
        margin-bottom:100px;
    }

    #texte_competences img{
        width:40px;
    }

    h1{
        font-size:28px;
        color:#a40255;
        font-family:"Raleway-Thin";
        text-align:center;
        margin-bottom:40px;
        margin-top:150px;
    }

 h4{
        font-size:16px;
        color:#a40255;
        font-family:"Raleway-Light";
        text-align:center;
        margin-bottom:3px;
        margin-top:3px;
    }

h5{
        font-size:14px;
        color:#000000;
        font-family:"Raleway-Thin";
        text-align:center;
        margin-bottom:3px;
        margin-top:3px;
    }
    
/*****LOGOTYPE_CHARTE_EDITION_PACKAGING_DIVERS*****/

 

    }
#logotype img{
        width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }

#charte img, #edition img, #pack img, #cv2023 img{
        width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }

#divers img{
        width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }

#reco img{
        width:200px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }

 #montage img{
        width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }




#btn_logotype{
    padding-top: 100px;
}



section{
        text-align: center;

}

    h2{
        font-size:26px;
        color:#a40255;
        font-family:"Raleway-Thin";
        text-align:center;
        margin-bottom:50px;
        margin-top:50px;
    }




/*****VERSION TELEPHONE*****/

  #logo_graphiste{
	float:right;
	width:80px;
	margin-top:5px;
    margin-right:100px;
}

#logo_graphiste img{
	width:70%;
}
    #bandeau_bureau{
       display:none; 
}



#bandeau_tel{
	background:#a40255;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
}

#btn_burger{
	background:none;
	border:none;
	margin-top:-7px;
	margin-left:-5px;
	margin-right:-3px;
	float:left;
}


#menu_tel{
	position:fixed;
	left:-320px;
	top:0;	
	min-width:320px;
	height:100%;
	background:rgba(0,0,0,0.7);
	font-size:20px;
}
#btn_fermer{
	float:right;
	margin-right:12px;
	margin-top:17px;
	margin-bottom:17px;
}

#menu_tel ul{
	margin-top:16px;
}
#menu_tel li{
	list-style:none;
	margin-bottom:15px;
}
#menu_tel li a{
    font-family:"Raleway-Light";
	display:block;
	color:#FFF;
	text-decoration:none;
	padding:10px 0;
	margin-left:60px;
}

.active{
	border-bottom:#FFF 1px solid;
}

#web img, #divers img, #logotype img, #montage img, #pack img{
     width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }




/******* VERSION TABLETTE ************/

@media screen and (min-width:1024px) and (max-width:1199px){
    
    
     #logo_graphiste{
	float:right;
	width:90px;
	margin-top:5px;
    margin-right:100px;
}

#logo_graphiste img{
	width:80%;
}
    
    #bandeau_bureau{
       display:none; 
    }
    
    #menu_bureau li a {
    text-decoration: none !important;
    color: #ffffff;
    font-family: "Raleway-Light";
    font-size: 13px;
    letter-spacing:-0.5px;
    margin-left: 30px;
    border: none !important;
}
    
   } 


/******** VERSION BUREAU ************/

@media screen and (min-width:1200px){
    
  
    #logo_graphiste{
	float:right;
	width:150px;
	margin-top:5px;
    margin-right:100px;
}

#logo_graphiste img{
	width:100%;
}

    
    #bandeau_tel{
       display:none; 
     } 
    
    #bandeau_bureau{
       display:block;
        position:fixed;
	   top:0;
	   left:0;
	   width:100%;
	   height:80px;
    }
    
    #texte_competences{
        line-height:30px;
        font-size:22px;
    }
    
    #menu_bureau li a {
    text-decoration: none !important;
    color: #ffffff;
    font-family: "Raleway-Thin";
    font-size: 16px;
    letter-spacing:-0.5px;
    margin-left: 30px;
    border: none !important;
}
    
    
 
    #menu_bureau{
        background:#a40255;
        width:100%;
        height:65px;
        padding-top:20px;
        margin-top: -4px;
    }  

    #menu_bureau li{
        display:inline;
        text-align:right;
    }

    #menu_bureau ul{
        margin-left:25px;
        margin-top:10px;
    }

    #menu_bureau a{
        text-decoration:none;
        color:#ffffff;
        font-family:"Raleway-Thin";
        font-size:20px;
        margin-left:30px;
        
} 
    #cv2023 img{
    width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    } 
    #logotype img{
     width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }
     #web img{
     width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }

#divers img{
     width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }
    
    #montage img{
     width:350px;
        box-shadow:rgba(50, 50, 50, 1) 0 3px 10px;
        margin-bottom:30px;
        margin-left:20px;
        margin-right:20px;
        transition:0.5s ease;
    }
    
  }  
 
/****** MISE EN PAGE SUITE *****/
    

   
/***** Pied *****/

    h3{
        font-size:20px;
        color:#a40255;
        margin-top:50px;
    }

    #contact{
        font-family:"Raleway-Light";
        justify-content:center;
    }

    footer{
        font-family:"Raleway-Thin";
        display:inline;
        text-align:center;
    }

    #copyright{
        margin-bottom:50px;
    }