html {
scroll-behavior: smooth;
}


body {
font-family: 'Nanum Gothic', sans-serif;
}

h5{
margin-bottom:30px!important;
}

.brand-logo{
font-family: 'Dancing Script', cursive;
}

.lighten-1  {
background-color:transparent;			
}

.light {
  font-weight: 300;
  text-align: center;
}

.header-img img{	
width:37%;	
}

.header-banner{
height:800px;	
background-image: url("../img/background2.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-65px;
}

.material-icons-1{
color:#8d8d8d  !important;		
}


.material-icons-2{
color:#8d8d8d  !important;		
}

.material-icons-3{
color:#8d8d8d  !important;	
}

.material-icons-4{
text-align:center;
color: #a9a9a9!important;	
width:100%;
border-bottom:2px solid #cbcbcb;
padding-bottom:40px;
padding-top:20px;
text-align: center;
font-size: 80px!important;
}

.header-container{
margin-top:	250px;
}

.header-index-sombre{
background-color:rgba(50, 50, 50, 0.5);	
height: 800px;
}

.intro-header{	
color:#dddddd;	
}

.waves-light{
background-color:#2471a3 !important;
margin-top:30px;
padding-left:70px;	
padding-right:70px;
}

.waves-light-send{
background-color:#2471a3 !important;
margin-top:40px;
width:100%;
padding-left:70px;	
padding-right:70px;
}
nav ul a{	
color:#dddddd;
font-size:18px;	
}

#porfolio,#features,#contact{
width:100%;	
}

.col-icon{
margin-top:30px;	
padding:30px;
background:#f9f9f9;
border-top: 10px #2471a3 solid;
border-right: #dedede 1px solid;
border-left: #dedede 1px solid;
border-bottom: #dedede 1px solid;
}

.col-icon h5{
padding-top: 30px;
border-top: 2px solid #acacac;
}


.container-icon,.portfolio-container{
max-width:1124px !important;
margin:4% auto !important;
}

.container-icon{
margin:6% 7%;
}

.material-icons{
font-size:60px;
}

.parallax-img{
background-image: url("../img/background1.jpg");
} 

.parallax-container .section {
 width: 100%;
}

.parallax-container {
height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#index-sombre{
background-color:rgba(50, 50, 50, 0.5);
color:white!important;
padding:100px;
}

.row{
width:100%;
margin:auto;
}

#porfolio{
background:#ffffff;
border-top:#ededed 10px solid;
}

#porfolio h2{
font-size:40px;
}

#porfolio p{ 
padding:40px 20px;
text-align:center;
}
.loupe-icons{
color:#ffffff;	
}

.page-footer{
background-color:#2471a3;	
}

#col-projets1,#col-projets2, #col-projets3, #col-projets4, #col-projets5, #col-projets6{
margin-top:15px;
}

#col-projets1 img,#col-projets2 img,#col-projets3 img, #col-projets4 img,#col-projets5 img, #col-projets6 img{
width:110%;		
}

.form-container{
max-width:850px !important;
margin:6%  auto !important;
background:#fafafa;
padding:50px;
border-top: 10px #2471a3 solid;
border-right: #dedede 1px solid;
border-left: #dedede 1px solid;
border-bottom: #dedede 1px solid;
}

#index-contact{
margin-top: 20px;
  border: 1px solid #d1d1d1;
  padding: 40px;
  border-radius: 5px;
  background: #f6f6f6;
}

#index-contact label{
color:black!important;
font-size:20px;
}

#index-contact input{
color:black!important;
font-size:20px;
}

.contact-title{
font-size:40px;
color:#6d6d6d;	
padding:10px;
}


@media only screen and (max-width : 1024px) {

	#col-features1,#col-features2,#col-features3{	
	width:50%!important;	
	}
	
	.form-container{	
	width:70% !important;
	margin:3% 15% 8%;
	}
	
	.waves-light-send{
    width:100% !important;
    padding:0px 0px 20px 0px;
    }
	
}

@media only screen and (max-width : 800px) {
	#index-sombre{
	padding:50px;
	}
	
	#col-features1,#col-features2,#col-features3{	
	width:100%!important;	
	}
	
	.form-container{
	width:80% !important;
	margin:3% 10% 8%;
	}
	
}

@media only screen and (max-width : 500px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:-55px;
	}
	
	.form-container{
	width:96% !important;
	margin:3% 2% 8%;
	padding: 50px 17px;
	}
	
	.header-banner img{	
	width:70%;	
	}
	
	.parallax-container h2 {
	 font-size:30px;
	}
	
	.parallax-container p {
	 font-size:15px;
	}
	#index-sombre{
	 padding:5px;
	}

	
}


@media only screen and (max-width : 300px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:-12px;
	}
	
	.header-banner img{	
	width:80%;	
	}
	

}

@media  screen and (min-width: 1419px) {
	 .header-banner img{	
	margin-top:90px;	
	}

	.header-banner,.header-index-sombre{
	height:900px;
	}
}

@media  screen and (min-width: 1919px) {
	.header-banner img{	
	margin-top:200px;	
	}

	.header-banner,.header-index-sombre{
	height:1120px;
	}  
}