/* General */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;	
}

html{
font-family: 'RepoRegular', sans-serif;
font-weight: normal;
font-style:normal;
font-size:16px;
color:#3a3a3a;
background-color:#fafafa; 	
}

ul, nav {
	list-style:none;	
} 
a {
	text-decoration:none;
	color:inherit;
	cursor:pointer;
	opacity:0.9;
}
a:hover{
	opacity:1;
	padding:0px 0px 5px 0px;
	border-bottom:#c0e99f 1px dotted;
	}
	
a.btn {
color:#fff;
border-radius: 4px;
text-transform:uppercase;
background-color:none;
border:#ffffff 1px solid;
font-family:'RepoRegular', sans-serif;
font-weight:800;
font-style:normal;
font-size:18px;
line-height:26px;
text-align:center;	
}

hr {width:150px; height:2px;background-color:#47b3a0;border:0;
margin-bottom:60px;}

section {
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:100px 100px;	
}

@media (max-width:1000px) {
	section {padding:100px 50px;}	
}

@media (max-width:600px) {
	section {padding:80px 30px;}	
}

section h3.title {
 color:#3a3a3a;
text-transform:none;
font-family:'Comfortaa', cursive;
font-weight:600;
margin-bottom:50px;
text-align:center;	
}

section p {
max-width:800px;
text-align:center;
margin-bottom:35px;
padding:0px 20px;
line-height: 26px;
	
}
ul.grid {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

/* header */
header {
position:absolute;
top:0;
left:0;
z-index:10;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
padding:40px 100px 52px 100px;	
}

header h2 {
	font-family:'Comfortaa', cursive;
}

header nav {
	display: flex;	
}

header nav li {
	margin:0 15px;	
}

header nav li:first-child{margin-left:0;}
header nav li:last-child{margin-left:0;}

#logo {width:93px; height:36px;}

@media(max-width:1000px) {
	header{padding: 20px 50px;}	
}

@media(max-width:700px) {
	header{flex-direction:column;}	
	header h2 {margin-bottom:15px;}
}
/* Hero section */
.hero {
	position:relative;
	justify-content: center;
	min-height:100vh;
	color:#fff;
	text-align:center;	
}

.hero .background-image {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-color:#fafafa;
	z-index:-1;	
}
.hero .background-image:after {
	content:'';
	position:absolute;
	top:0;left:0;
	width:100%; height:100%;
}

.hero h1 {
	font-family:'Comfortaa', cursive;
	font-weight:600;
	font-size:60px;
	margin-bottom:50px;	
}
.hero p {
	font-family:'RepoRegular', sans-serif;
	font-weight:normal;
	font-size:18px;
	line-height:26px;
	margin-bottom:35px;	
} 

.hero a.btn {
	padding:20px 80px;
	margin-bottom:602px; margin-top:10px;	
}
.hero a.btn:hover {
	background-color:#c0e99f;
	border:1px solid #c0e99f;
	color:#3db6aa; opacity:1;
}
#heroBgr {background-image:url(../img/hero.png);}

@media(max-width:800px) {
	.hero {min-height:600px;}
	.hero h1 {font-size:48px; margin-bottom:20px;}
	.hero h3 {font-size:24px;}
	.hero p {font-size:16px; margin-bottom:20px; line-height:18px;}
	.hero a.btn, .hero a.btn:hover {padding:15px 40px;}
}

@media(max-width:600px) {
	#heroBgr{background-image:none;background-color:#3cb0a3;}
	.hero h1 {font-size:40px; margin:50px 0px;}
	#btnReadMore {margin-bottom:50px;}
}
/* examples */
.our-works {
	background-color:#fafafa;	
}
.our-works .grid li {
	padding:20px;
	height:350px;
	border-radius:3px;
	background-clip:content-box;
	background-size:cover;
	background-position:center;	
}
#flat-img-1{background-image:url(../img/img-1.jpg);}
#flat-img-2{background-image:url(../img/img-2.jpg);}
#flat-img-3{background-image:url(../img/img-3.jpg);}
#flat-img-4{background-image:url(../img/img-4.jpg);}

.our-works  .grid li.small {flex-basis:40%;}
.our-works  .grid li.large {flex-basis:60%;}

@media(max-width:1000px) {
	.our-works  .grid li.small, .our-works  .grid li.large {flex-basis:100%;}
	
}

#examples h3.title{
	font-family:'Comfortaa', cursive;
	font-weight:600;
	font-size:50px;
	}
/* features section */
.features {background-color:#fdfdfd;}
.features .grid li {
	padding:0px 30px 30px 30px;
	flex-basis:33%;
	text-align:center;	
}
.features .grid li i {font-size:50px; margin-bottom:25px;}

#greenBtn{color:#3cb0a3;}
#orangeBtn{color:#f1835c;}
#lightGreenBtn{color:#7db54e;}
#yellowBtn{color:#f6ac40;}
#blueBtn{color:#1a83ba;}
#redBtn{color:#eb5757;}

.features .grid li h4 {color:#3a3a3a;
font-family:'Comfortaa', cursive; font-weight:600; font-size:24px;
margin-bottom:25px;}

.features .grid li p {margin:0px;}

@media(max-width:1000px) {
.features .grid li{flex-basis:70%; margin-bottom:65px;}	
.features .grid li:last-child{margin-bottom:0px;}	
	
}

@media(max-width:600px) {
.features .grid li{flex-basis:100%;}
	
}

#about h3.title {font-size:50px;}

/* evolution section */
.evolutions {background-color:#fafafa; padding-top:0px;}
.evolutions img{margin:0px 0px 60px 0px; align-items:flex-start;}
.evolutions p {
	text-align:center;
	width:80%;
	font-size:18px;
	font-weight:300;
	line-height:1.5;
	margin-bottom:20px;
	padding:0;	
}

.evolutions h4 {color:#47b3a0;
font-family:'Comfortaa', cursive;
font-weight:600;
font-size:24px; margin-bottom:25px;}

#evolution h3.title {font-size:50px;}

/* newsletter section */

#informed h3.title {font-size:50px;}
.contact {background-color:#f7f7f7;}
.contact form {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	max-width:800px;
	width:80%;	
}
.contact form input {
	padding:15px;
	flex:1;
	margin-right:30px;
	font-size:22px;
	color:#3a3a3a;
	border:#dddddd 1px solid;	
} 

.contact form input[type="text"]:focus, 
.contact form input[type="password"]:focus,
.contact form input[type="email"]:focus,
.contact form select:focus, .contact form textarea:focus {
	box-shadow:inset 0 0 0 2px #47b3a0;
	
}

.contact form .btn {
	padding:16px 40px;
	color:#fff;
	border-radius: 4px;
	border:0px;
	text-transform:uppercase;
	font-family:'RepoRegular', sans-serif;
	font-weight:600;
	font-style:normal;
	font-size:18px;
	line-height:27px;
	text-align:center;
	opacity:1;
	
background: rgba(236,103,88,1);
background: -moz-linear-gradient(top, rgba(236,103,88,1) 0%, rgba(233,80,85,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(236,103,88,1)), color-stop(100%, rgba(233,80,85,1)));
background: -webkit-linear-gradient(top, rgba(236,103,88,1) 0%, rgba(233,80,85,1) 100%);
background: -o-linear-gradient(top, rgba(236,103,88,1) 0%, rgba(233,80,85,1) 100%);
background: -ms-linear-gradient(top, rgba(236,103,88,1) 0%, rgba(233,80,85,1) 100%);
background: linear-gradient(to bottom, rgba(236,103,88,1) 0%, rgba(233,80,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec6758', endColorstr='#e95055', GradientType=0 );

	
}

.contact form .btn:hover {
	
background: rgba(233,80,85,1);
background: -moz-linear-gradient(top, rgba(233,80,85,1) 0%, rgba(236,103,88,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(233,80,85,1)), color-stop(100%, rgba(236,103,88,1)));
background: -webkit-linear-gradient(top, rgba(233,80,85,1) 0%, rgba(236,103,88,1) 100%);
background: -o-linear-gradient(top, rgba(233,80,85,1) 0%, rgba(236,103,88,1) 100%);
background: -ms-linear-gradient(top, rgba(233,80,85,1) 0%, rgba(236,103,88,1) 100%);
background: linear-gradient(to bottom, rgba(233,80,85,1) 0%, rgba(236,103,88,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e95055', endColorstr='#ec6758', GradientType=0 );

	
}

@media(max-width:800px) {
	.contact form input{flex-basis:100%;margin:0 0 20px 0;}
	
}

/* footer section */

footer {
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	color:#f7f7f7;
	background-color:#47b3a0;
	padding:60px 0;
	
}

footer ul {
	display:flex;
	margin-bottom:25px;
	font-size:32px;
}

footer ul li{margin:0 8px;}

footer ul li:first-child{margin-left:0;}
footer ul li:last-child{margin-right:0;}

footer p {text-transform:none; font-size:18px; color:#f7f7f7; 
margin-bottom:25px;}

footer p a {color:#fff;}
footer p a:hover {color:#bae794; padding:0px; border-bottom:none;}
footer #socialBtn:hover {border-bottom:none;}





