/*  Fonts  */

@font-face {
 font-family: 'Archivo Black';
 src: url(FONT_FILE_NAME.woff2) format('woff2');
}


/* Colors */

.gold{
	color:#987147;
}

.gris{
	background-color: #ECECEC;
}

.black{
	background-color: #0F0F0F /*#0F0F0F*/;
}

.gabarito{
	font-family: 'Gabarito';
}


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

html {
  scroll-behavior: smooth;
}

body{
	margin: 0px;
	font-family: 'Gabarito';
	min-width: 1200px;
}


/* ----- header ----- */

@media screen and (min-width: 1250px) {
	header{
		position: fixed;
	  top: 0;
	  left: 0%;
	  z-index: 999;

		display: flex;
		align-items: center;
		box-sizing: border-box;
	  background-color: #FFFFFF;

		box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
		transition: 0.15s;
		border-left: solid 10px;
		border-color: #987147;
		border-radius: 0px 0px 20px 0px;

		width: 56%;
		min-width: 670px;
		margin: 0% 0% 0% 10%;
	}
}
@media screen and (max-width: 1250px) {
	header{
		position: fixed;
	  top: 0;
	  left: 0%;
	  z-index: 999;

		display: flex;
		align-items: center;
		box-sizing: border-box;
	  background-color: #FFFFFF;

		box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
		transition: 0.15s;
		border-left: solid 10px;
		border-color: #987147;
		border-radius: 0px 0px 20px 0px;

		width: 56%;
		height: 92px;
		min-width: 670px;
		margin: 0% 0% 0% 120px;
	}
	header h3{
		display: none;
	}
}

/*header:hover{
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}*/

header h1{
	width: 40%;
	min-width: 290px;
	margin: 0%;
	padding: 0% 4%;

	font-family: 'Raleway';
	font-weight: bold;
	font-weight: 900;
	font-size: 48px;
}

header ul{
	list-style: none;

	display: flex;
	flex-flow: row;
	padding: 0%;
	width: 60%;
	min-width: 310px;
	justify-content: space-around;

}

header ul li{
	/*margin: 0% 2%;*/
}

header ul li a{
	text-decoration: none;
	font-weight: bold;
	color: black;
	display: flex;
	flex-flow: row;
	align-items: center;
}

header ul li a img {
	margin-left: 5%;
	margin-right: 3%;
}

header ul li a:hover{
	text-decoration: none;
	font-weight: bold;
	color: #987147;
}

header ul li a:hover img {
	filter: invert(50%) sepia(6%) saturate(2970%) hue-rotate(350deg) brightness(90%) contrast(93%);
}

/* ----- Présentation ----- */

div.top-banner{
	display: flex;
	flex-flow: row wrap;
	align-items: space-arround;

	width: 80%;
	margin: 75px 10% 5% 10%;
}

div.presentation{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	box-sizing: border-box;

	flex: 1;

	width: 50%;
	min-width: 610px;
	padding: 0%;

	/*background-color: #ECECEC;*/
	background: #ECECEC/*linear-gradient(0deg, rgba(152,113,71,1) 0%, rgba(236,236,236,1) 91%, #ECECEC 100%)*/;
	border-radius: 0px 0px 20px 20px;
	/*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
	transition: 0.15s;

	border-left: solid 10px;
	border-color: #987147;

	& h2{
		font-size: 48px;
		font-weight: 900;
	}
	& p{
		font-size: 24px;
		width: 80%;
	}
	& text{
		margin-left: 1%;
	}
}

div.presentation:hover{
	/*box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;*/
}

div.pres-pp {
	height: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-end;
}

div.presentation img{
	height: 400px;
	border-radius: 0px 0px 20px 20px;
}

div.langue{
	width: 90%;
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
	& a{
		margin: 0% 2% ;
	}
	& a img{
		height: 35px;
		border-radius: 0;
		margin: 0% 2% ;
	}
}



div.cta-section{
	display: flex;
	flex-flow: column;
	align-items: center;

	width: 20%;
	margin: 2% 2.5%;
	padding: 2.5%;
}

p.cta-title{
	font-size: 48px;
	font-weight: 700;
	align-items: center;
}

a.cta-a{
	background-color:#987147 ;
	color: #FFFFFF;
	text-decoration: none;

	padding: 5%;
	border-radius: 10px;

	-webkit-animation: bgcolor 10s ease-in-out infinite;
    animation: bgcolor 5s ease-in-out infinite;
    -webkit-animation-direction:  alternate;
    animation-direction: alternate;

    background-size: contain;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    transition: 0.15s;
}

@keyframes bgcolor {
    0% {
        background-color: #987147
    }

    50% {
    	background-color: #E5E5E5
    }

    100% {
        background-color: #0F0F0F
    }
}


.cta-a-back:hover{
	background-color:#987147 ;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* ----- Sections ----- */

div.Sections{
	flex: 1;
	width: 75%;
	margin: 3% 10%;
	padding: 2.5%;

	background-color: #ECECEC;
	border-radius: 20px;
	/*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
	transition: 0.15s;

	display: flex;
	flex-flow: column;
	align-items: center;
}

div.Sections:hover{
	/*box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;*/
}

div.sides_section{
	display: flex;
	flex-flow: row-wrap;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	min-width: 950px;
	margin: 2.5% 0%;

		& h2{
		font-size: 32px;
		margin-bottom: 2.5%;
	}
}

div.first_section{
	display: flex;
	flex-flow: column;
	justify-content: space-between;

	width: 40%;
	min-width: 450px;
	margin: 2.5%;
}

div.first_side_section{
	display: flex;
	flex-flow: column;
	justify-content: space-between;

	height: 100%;
	width: 40%;
	min-width: 450px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

div.first_side_title{

}

div.first_side_logo-entreprise{
	display: flex;
	flex-flow: row-wrap;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

div.Section_2{
	width: 80%;
	border: 5px 0px 5px 0px;
	border-color: black;
}

h2.titre-entreprise{
	color: #E5E5E5 ;
	font-size: 60pt;
	font-weight: 900;
	
	width: 50%;
	display: flex;
	flex-flow: row;
	justify-content: left;
}

/* ---- Entreprise ---- */

div.entreprises{
	margin: 2.5% 0%;
	width: 50%;
	display: flex;
	flex-flow: column;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

div.entreprise{
	/*padding: 0% 0% 0% 40%;*/
	margin: 2.5% 0%;
	width: 75%;
	display: flex;
	flex-flow: row;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

img.logo-entreprise{
	height: 100px;
}

.entreprise-desc{
	width: 200px;
	height: 50px;
	align-content: center;
	justify-content: center;
}

.entreprise-desc p,h2{
	margin: 0px;
}


div.background-entreprise{
	background-image: url("../img/background-work.png");
	background-repeat: no-repeat;
	background-size: cover;

	flex-flow: row;
}

/*---- Bandeau skill ----*/

.skills-grp {
	display: flex;
	flex-flow: row;
	width: 80%;
	margin: 5% 10%;
	align-items: center;
	justify-content: space-between;
}

.skills{
	margin: 0% 2.5%;
	& h2{
		color: black;
  	font-weight: 900;
		font-size: 140px;
	}
}

div.bandeau-logo{
	width: 60%;
	height: 250px;
	
	display: flex;
}

.card {
  display: flex;
  height: 240px;
  width: 180px;
  background-color: #ECECEC;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
/*   margin-left: -50px; */
  transition: 0.3s ease-out;
  position: relative;
  left: 0px;
}

.card:not(:first-child) {
    margin-left: -50px;
}

.card:hover {
  transform: translateY(-30px);
  transition: 0.4s ease-out;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}

.title {
  	color: black;
  	font-weight: 700;
		font-size: 24px;
  	position: absolute;
  	left: 20px;
  	top: 15px;
}

.bar {
  position: absolute;
  top: 100px;
  left: 00px;
  height: 5px;
  width: 100%;
}

.emptybar {
  background-color: #E1E1E1;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: rgb(0,154,217);
  background: rgba(152,113,71,1);
  transition: 0.6s ease-out;
}

.card:hover .filledbar {
  width: 120px;
  transition: 0.4s ease-out;
}

.card:hover .stroke {
  stroke-dashoffset: 100;
  transition: 0.6s ease-out;
}

.card-img{
	position: absolute;
  	top: 125px;
  	left: 20px;
}

.dots3{
	filter: invert(50%) sepia(6%) saturate(2970%) hue-rotate(350deg) brightness(90%) contrast(93%);
}

/* ----- Footer ----- */

footer {
	display: flex;
	justify-content: space-around;
	width: 90%;
	padding: 2% 5%;

	background-color: #0F0F0F;
}

div.reseaux {
	margin: 0%;
	width: 50%;
}

img.reseaux {
	margin: 2%;
	height: 35px;

}

div.footer_info {

	width: 30%;
	margin: 0%;
	color: #E5E5E5;
}

div.footer_info ul{
	list-style: none;
}

a.email{
	text-decoration: none;
	color:#FFFFFF;
}

a.email:hover{
	text-decoration: none;
	font-weight: bold;
	color:#987147;
}