@import url('https://fonts.googleapis.com/css?family=Raleway');

html {
	scroll-behavior: smooth;
  }
body{
	padding: 0;
	margin: 0;
	background:#ececec;
}
html,h1,h2,h3,h4,h5,h6,a{
	font-family: "Raleway";
}
.navbar{
	background:rgba(50, 84, 236, 0.651);
}
.nav-link , .navbar-brand{
	color: #f4f4f4;
	cursor: pointer;
}
.nav-link{
	margin-right: 1em !important;
}
.nav-link:hover{
	background: #f4f4f4;
	color: rgba(50, 84, 236, 0.651);
	border-radius: 10px;
	transition: all .6s ease;


}
.nav-link.two {
	color: rgba(50, 84, 236, 0.651);
}
.navbar-brand {
	padding : 5px 9px;
}
.navbar-brand:hover {
	background: #f4f4f4;
	color: rgba(50, 84, 236, 0.651);
	border-radius: 10px;
	padding : 4px  9px;
	transition: all .6s ease;
}

.navbar-collapse{
 justify-content: flex-end;
}
.navbar-toggler{
  background:#fff !important;
}

/*header style*/
.fa-info-circle {
	color : rgba(50, 84, 236, 0.651);

}
.header{
	position: relative;
	background-image: url("../images/headerback.jpg");

	background-size: cover;
	background-position: center;
}
.overlay{
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	left: 0;
	top: 0;
	background: rgba(244, 244, 244, 0.79);
}
.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;

}
.description h1{
	color: rgba(50, 84, 236, 0.651);
	
}
.description p{
	color:rgb(102, 102, 102);
	font-size: 20px;
	width: 70%;
	line-height: 1.5;
}
.description button{
	background:rgba(50, 84, 236, 0.651);
	color:#fff;
}
.description img {
	margin : auto
}
.aboutButton {
	background-color:rgba(50, 84, 236, 0.651);
	color : white;
}
.aboutButton:hover{
	background-color:white;
	color : rgba(50, 84, 236, 0.651);
	transition: all .6s ease;
}
.about{
	margin: 4em 0;
	position: relative;
	margin-top : 93px;
	
}
.about h1{
	color:rgba(50, 84, 236, 0.651);;
	text-align: center;

}
.about img{
	height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
	display: block;
	color: #888;
	position: absolute;
	left: 115px;
}
.blockToPad {
	padding-top: 10%;
}
.about .desc{
	padding: 2em;
	

}
.about .desc2{
	padding: 2em;

}

.about .desc h3{
	color: #10828C;
}
.about .desc p{
	line-height:2;
	color:rgb(102, 102, 102);
	text-align: justify;
}
.about .desc2 p{
	line-height:2;
	color:#888;
}
.container2 {
    width: 75%;
    height: 75%;
}
.container2 i {
	padding-top: 1.5%;
}
.subtitle {
	margin-left: 28%;
	width : 60%;

}
.subtitle2 {
	margin-left: 37%;
	width : 60%;

}
/* resize images */
.container2 i {
    width: auto;
	height: auto;
	float: right;
	color : rgb(51, 196, 37);


}
/*Portfolio*/
.portfolio{
	margin: 4em 0;

}
.portfolio h1{
	color:rgba(50, 84, 236, 0.651);;
	margin: 1em;

	
}
.portfolio p {
	color:rgba(102, 102, 102, 0.685);
	line-height:2;
	color:#888;

}
.carousel-item{
    height: 50vh;
} 
.carousel-item img{
    height: 50vh;
}

.contact-form{
	margin: 6em 0;
	position: relative;		
}

.contact-form h1{
	padding:2em 1px;
	color: rgba(50, 84, 236, 0.651);; 
}
.contact-form .right{
	max-width: 600px;
}
.contact-form .right .btn-secondary{
	background:  rgba(50, 84, 236, 0.651);;
	color: #fff;
	border:0;
}
.contact-form .right .form-control::placeholder{
	color: #888;
	font-size: 16px;
}

.container4 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-auto-rows: 300px;
	grid-gap: 30px;
	margin: auto 0;
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
	.container4 {
	  width: 540px;
	}
  }
  
  @media (min-width: 768px) and (max-width: 991.98px) {
	.container4 {
	  width: 720px;
	}
  }
  
  @media (min-width: 992px)
  {
	.container4 {
	  width: 960px;
	}
  }
  
  @media (min-width: 1200px)
  {
	.container4 {
	  width: 1140px;
	}
  }
  
  .container4 .box {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 10px;
  }
  
  .container4 .box .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
  }
  /*
  .container4 .box:hover .icon {
	top: 20px;
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	border-radius: 50%;
  }*/
  
  .container4 .box .icon .fa {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }
  
  .container4 .box .icon .fas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }
  .container4 .box .icon .far {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }/*
  .container4 .box:hover .icon .fa {
	font-size: 40px;
  }
  .container4 .box:hover .icon .fas {
	font-size: 40px;
  }
  .container4 .box:hover .icon .far {
	font-size: 40px;
  }*/
  .container4 .box .content {
	position: absolute;
	top: 100%;
	height: calc(100% - 100px);
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	transition: 0.5s;
  }
  /*
  .container4 .box:hover .content {
	top: 100px;
  }*/
  
  .container4 .box .content h3 {
	margin: 0 0 10px;
	padding: 0;
	color: #fff;
	font-size: 24px;
  }
  
  .container4 .box .content p {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 16px;
  }
  
  .container4 .box:nth-child(1) .icon {
	background-color: #319635;
  }
  
  .container4 .box:nth-child(1) {
	background-color: #4caf50;
  }
  
  .container4 .box:nth-child(2) .icon {
	background-color: #d03852;
  }
  
  .container4 .box:nth-child(2) {
	background-color: #f54967;
  }
  
  .container4 .box:nth-child(3) .icon {
	background-color: #23798e;
  }
  
  .container4 .box:nth-child(3) {
	background-color: #328fa5;
  }
  


  /* CONTAINER 5 , LA GRID SOLO */
  
.container5 {
	padding-left: 2%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-auto-rows: 400px;
	grid-gap: 30px;
	margin: auto 0;
	padding-top: 2%;
  }
  
  @media (min-width: 576px) and (max-width: 767.98px) {
	.container5 {
	  width: 540px;
	}
  }
  
  @media (min-width: 768px) and (max-width: 991.98px) {
	.container5 {
	  width: 720px;
	}
  }
  
  @media (min-width: 992px)
  {
	.container5 {
	  width: 960px;
	}
  }
  
  @media (min-width: 1200px)
  {
	.container5 {
	  width: 1140px;
	}
  }
  
  .container5 .box {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 10px;
  }
  
  .container5 .box .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
  }
  /*
  .container4 .box:hover .icon {
	top: 20px;
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	border-radius: 50%;
  }*/
  
  .container5 .box .icon .fa {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }
  
  .container5 .box .icon .fas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }
  .container5 .box .icon .far {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 80px;
	transition: 0.5x;
	color: #fff;
  }/*
  .container4 .box:hover .icon .fa {
	font-size: 40px;
  }
  .container4 .box:hover .icon .fas {
	font-size: 40px;
  }
  .container4 .box:hover .icon .far {
	font-size: 40px;
  }*/
  .container5 .box .content {
	position: absolute;
	top: 100%;
	height: calc(100% - 100px);
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	transition: 0.5s;
  }
  /*
  .container4 .box:hover .content {
	top: 100px;
  }*/
  
  .container5 .box .content h3 {
	margin: 0 0 10px;
	padding: 0;
	color: #fff;
	font-size: 24px;
  }
  
  .container5 .box .content p {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 16px;
  }
  
  .container5 .box:nth-child(1) .icon {
	background-color: rgb(181, 182, 179);
  }
  
  .container5 .box:nth-child(1) {
	background-color: rgba(50, 84, 236, 0.651);
  }
    .container5 .box:nth-child(2) .icon {
	background-color: rgb(182, 179, 179);
  }
  
  .container5 .box:nth-child(2) {
	background-color: #7e7e7e;
  }

/* HOVER A CHANGER */


 
  .triggerAnimation .icon {
	top: 20px !important;
	left: calc(50% - 40px)!important;
	width: 80px!important;
	height: 80px!important;
	border-radius: 50%!important;
	transition: all 1s ease !important;
  }
 .triggerAnimation .icon .fa {
	font-size: 40px!important;
	transition: all 1s ease !important;
  }
  .triggerAnimation .icon .fas {
	font-size: 40px!important;
	transition: all 1s ease !important;
  }
  .triggerAnimation .icon .far {
	font-size: 40px!important;
	transition: all 1s ease !important;
  }

  
  .triggerAnimation .content {
	top: 100px!important;
	transition: all 1s ease !important;
  }



 /* DES BOITES POUR PORTFOLIO */
 .card{float: left; width:100%; height: 50%;}
 .title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
 .text-time{color: #ff0000; font-weight: 600;}

 .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}


.card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 34, 51, 0.1);
    box-shadow: 2px 4px 10px 0 rgba(0, 34, 51, 0.05), 2px 4px 10px 0 rgba(0, 34, 51, 0.05);
    border-radius: 0.15rem;
}

/* Tabs Card */

.tab-card {
  border:1px solid #eee;
}

.tab-card-header {
  background:none;
}
/* Default mode */
.tab-card-header > .nav-tabs {
  border: none;
  margin: 0px;
}
.tab-card-header > .nav-tabs > li {
  margin-right: 2px;
}
.tab-card-header > .nav-tabs > li > a {
  border: 0;
  border-bottom:2px solid transparent;
  margin-right: 0;
	color:rgb(102, 102, 102);
  padding: 2px 15px;
}

.tab-card-header > .nav-tabs > li > a.show {
    border-bottom:2px solid #007bff;
    color: #007bff;
}
.tab-card-header > .nav-tabs > li > a:hover {
    color: #007bff;
}

.tab-card-header > .tab-content {
  padding-bottom: 0;
}
.tab-card {
	height:  auto;
	min-height: 400px	!important;
	
	
}
.card-text  {
	color:rgb(102, 102, 102) !important;
}

.contact-form p {
	color:rgb(102, 102, 102);
}