/******************************* GENERAL ************************************/
body, html
{
	margin: 0 0;
	padding: 0 0;
}
html{
	scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6
{
	text-align: center;
	color: #B5C39A; 
	font-family: 'Russo One', sans-serif;
}

#container{
	display: flex;
	flex-direction: column;
}
@font-face {
	font-family: 'Patchy Robots Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Patchy Robots Regular'), url('Patchy Robots.woff') format('woff');
}
/********************************* SECTION 1 ********************************/
header
{
	height: 90px;
	background-color: #FFFFFF;
	width: 100%;
	border-bottom: 1px solid rgba(196, 189, 189, 0.5);
	position: absolute;
}

header h2
{
	float: left;
	color: #5F5F5F;
	padding-left: 15px;
	font-family: 'Patchy Robots Regular';
	margin-bottom: 0px;	
	font-weight: normal;
}
header nav{
	float: right;
	margin-right: 50px;
	margin-top: 8px;
}
header nav ul{
	list-style: none;	
}
header nav ul li{
	display: inline;
	margin-left: 60px;
	font-size: 1em;
}
nav a{
	text-decoration: none;
	outline: none;
	color: #5F5F5F;
}
@media only screen and (max-width: 600px){
	.hidden{
		display: none;
	}
}

.shake{
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}
.sticky{
	position: fixed;
}

@keyframes shake {
	10%, 90% {
	  transform: translate3d(-1px, 0, 0);
	}
	
	20%, 80% {
	  transform: translate3d(2px, 0, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(-4px, 0, 0);
	}
  
	40%, 60% {
	  transform: translate3d(4px, 0, 0);
	}
  }
/******************************* SECTION PRESENTATION *************************/
#presentation
{
	height: 550px;
	background-image: url("images/maison-intelligente-2.jpg");
	background-repeat: no-repeat;
	background-position:  65% 50%;
	background-size: cover;
	margin-top: 90px;
	z-index: -1;
}

/********************************* ACTIVITY *********************************/
#activity 
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-columns: repeat(auto-fit,minmax(260px, 1fr));
	column-gap: 10px;
	grid-row-gap: 10px;
	padding: 20px;
}
#activity p{
	margin-top: 40px;
}
#article1, #article2
{
	border: 1px #909C6D solid;
	border-radius: 5px;
	box-shadow: 2px 5px 2px #909C6D;
}

#architecture{
	height: 100%;
	width: 100%;
}
#architecture img{
	width: 100%;
	height: auto;
}
#integration{
	text-align: left;
}
#integration p{
	font-family: "work sans", sans-serif;
	color: #5F5F5F;
	padding-left: 10px;
}
#integration span{
	font-family: 'Russo One', sans-serif;
	color: #B5C39A; 
}
@media only screen and (min-width: 600px) {
	.invisible{
		opacity: 0;
		transition: opacity 1s linear;
	}
}
.visible{
	opacity: 1;
}
/********************************* GALLERY *******************************/
#gallery{
	padding: 50px 10px 50px 10px;
	background-image: linear-gradient(to bottom, #909C6D, #BFCE8F);
}
#gallery h3{
	color: #ffffff;
}
#port-folio
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-columns: repeat(auto-fit,minmax(270px, 1fr));
	grid-column-gap: 10px;
	grid-row-gap: 10px;		
}
#port-folio img{
	justify-self: stretch;
}
/********************************* CONTACT ***********************************/
#contact{
	background-image: url('images/Housing_FeaturedImage_compressed_1300.png');
	height: 500px;
	background-repeat: no-repeat;
	background-position-x: 50%;
	padding-left: 55px;
}
#contact h2{
	padding-top: 150px;
	text-align: left;
	color: #5F5F5F;
	font-family: 'Patchy Robots Regular';
	font-weight: normal;
}
#contact p{
	font-size: 0.8em;
	color: #ffffff;
}

/********************************* FOOTER ***********************************/
footer
{	
	height: 80px;
	background-color: #34373D;
	text-align: center;
	color: #B5C39A;
	padding-top: 60px;
}