header, section, footer, aside, nav, main, article, figure {
  display: block;
}

*{
	margin:0px;
	padding:0px;
	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:#ffffff;
	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;
	font-size:50px;
	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:#ffffff;
	padding:40px 100px 52px 100px;
}
header h2{font-family:'Comfortaa', cursive;}
header nav{
display:flex;	
}
header nav li {margin:0px 15px;}
header nav li:first-child{margin-left:0px;}
header nav li:last-child{margin-right:0px;}
#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:#ffffff;
	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{
	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-style: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 {
	padding:20px 80px;
	margin-bottom:602px;margin-top:10px;
	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 section */
.our-work {background-color:#fafafa;}
.our-work .grid li {
	padding:20px;
	height:350px;
	border-radius:3px;
	background-clip:content-box;
	background-size:cover;
	background-position:center;
	background-color:#333333;	
}

.our-work .grid li.small {
	flex-basis:40%;	
}
.our-work .grid li.large {
	flex-basis:60%;	
}
@media (max-width:1000px) {
	.our-work .grid li.small, .our-work .grid li.large {
	flex-basis:100%;
}	
}
#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);}
/* 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:0;	
}
@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%; }
	
}


