@charset "UTF-8";
/* CSS Document */


	.portfolio-projets{
		display: flex;
		justify-content: flex-end;
		padding-right: 1rem;
	}

	.wrap-btn-portfolio-projets{
		
		position: relative;
		top:0px;
		max-width: 400px;
		height: 100%;
		width: 100%;
		z-index: 1000;
		
		float:none;
		margin-top: 20px;
		
	}

	
	#clickBtnPortfolio{ 
		cursor:pointer;
		
		position: relative; 
		top:0px; 
		z-index: 1;
		
		/*background: #CC6606;*/
		
		border-radius:10px;
		
		display: block;
    	padding: 15px 20px 15px 0px !important;
		text-align: center;
		
		font-family: 'campaign', Arial, sans-serif;
		font-size:12px !important;
		line-height: 14px !important;
		font-weight:400;
		letter-spacing: 1px;
		color:#E7D9CC !important;
		text-transform: uppercase !important;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	 .btn-bg{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 5px;
		background-color:#CC6606;
		transform: skewX(-10deg); /* Texte initial incliné */
		//transform: skew(-10deg);
		z-index: -1;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.1s cubic-bezier(0.4, 0, 0.2, 1);
	}

	#clickBtnPortfolio:hover .btn-bg,
	#clickBtnPortfolio.open-btn .btn-bg{
		transform: skewX(0deg); 
	}
	#clickBtnPortfolio.open-btn .btn-bg{
		border-top-left-radius: 0;
		border-top-right-radius: 0; 
	}
	

	
	.wrap-portfolio-projets{
		
		background: #CC6606;
		 
		position:absolute;
		bottom:44px;	
		width:100%;
		max-width: 400px;
		z-index: 100;
		
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	
	.menu-portfolio-projets, .menu-portfolio-projets li{
		list-style-type:none;
		margin:0 !important;
		padding: 0 !important;
	}
	

	.click-type-projets:first-child{
		border-top:none;
	}
	.click-type-projets:last-child{
		border-bottom:1px solid #E7D9CC;
	}
	
	.click-type-projets{
		border-top:1px solid #E7D9CC;
	}


	.sous-menu-portfolio-projets{
		
		list-style-type:none;
		padding:20px 0;
		margin:0;	
			
		display: flex;
		flex-flow: wrap;
		align-content: center;
		align-items: center;
		justify-content: center;
		
	}
	
	.sous-menu-portfolio-projets li{

		width: 100%;
		max-width: 115px;
		padding: 15px 0px !important;
		text-align: center;
			
	}
	
	
	.titre-type-projets {
		
		
		cursor:pointer;
		font-family: 'campaign', Arial, sans-serif;
		font-size:12px !important;
		line-height: 14px !important;
		letter-spacing: 1px !important;
		font-weight: 400 !important;
		color:#E7D9CC !important;
		text-transform: uppercase !important;
		display: block;
		padding:15px 0 15px 15px;
		margin:0 !important;
		position: relative;
		text-align:left;
	}

	#clickBtnPortfolio:after,
	.titre-type-projets:after{
		
		content:" ";
		background:url("../img/arrow.png") no-repeat left top;
		display: block;
		width:9px;
		height: 14px;
		background-size: cover;
		
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translate(0, -50%);
		transition: all 200ms linear;

	}


	.titre-type-projets.open-arrow:after{
		transform:rotate(90deg);
	}

	#clickBtnPortfolio.open-arrow:after{
		transform:rotate(-90deg) translate(0, 0);
		top:15px;
	}



@media (max-width:768px){

	.wrap-portfolio-projets{
		bottom:56px;	
	}
	.wrap-btn-portfolio-projets{
		float:none;
		margin:40px auto 0 auto;
	}
	
	.sous-menu-portfolio-projets{
		justify-content: center;
	}
	
	.sous-menu-portfolio-projets li{
		max-width: 33%;
		padding:15px;
	}
	
	

}


@media (max-width:400px){
	
	#clickBtnPortfolio,
	.titre-type-projets{ 
		
		font-size:11px !important;
		line-height: 14px !important;
	}	
	
}