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

/*@font-face {
    font-family: 'andantino_scriptregular';
    src: url("../fonts/andantino_script-webfont.woff2") format('woff2'),
         url("../fonts/andantino_script-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;

}

p{
	font-family: 'andantino_scriptregular';
	}*/

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: point;
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:0px;
	margin-bottom: 60px;
}
section {
display:flex;
flex-direction: column;
align-items: center;
padding: 100px 100px;
}
section h3.title {
	color: #3a3a3a;
	text-transform: none;
	font-family:'Comfortaa', cursive;
	font-weight: 600;
	font-size: 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;}

/*-------------- Hero -------------*/

.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: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-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(../images/hero.png);}

/*-------------- Examples -------------*/
#flat-img-1 {background-image: url(../images/img-1.jpg);}
#flat-img-2 {background-image: url(../images/img-2.jpg);}
#flat-img-3 {background-image: url(../images/img-3.jpg);}
#flat-img-4 {background-image: url(../images/img-4.jpg);}
.our-work {background-color:#fafafa;}
.our-work .grid li {
	padding: 20px;
	height: 350px;
	border-radius: 4px;
	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%;}

/*-------------- Features -------------*/
.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;
}
/*-------------- Evolution -------------*/
.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;
}

.evolutions hr {margin-top: 50px;}

/*-------------- Contact -------------*/
.contact {background-color: #f7f7f7;}
.contact hr {margin-top: 50px;}
.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:1px solid #dddddd;
}

.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: #ffffff;
border-radius: 4px;
border:0px;
text-transform: uppercase;
font-family: 'RepoRegular', sans-serif;
font-weight: 800;
font-style: normal;
font-size: 18px;
line-height: 27px;
text-align: center;
opacity: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ec6758+0,e95055+100 */
background: #ec6758; /* Old browsers */
background: -moz-linear-gradient(top,  #ec6758 0%, #e95055 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ec6758 0%,#e95055 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ec6758 0%,#e95055 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec6758', endColorstr='#e95055',GradientType=0 ); /* IE6-9 */

}

.contact form .btn:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e95055+0,ec6758+100 */
background: #e95055; /* Old browsers */
background: -moz-linear-gradient(top,  #e95055 0%, #ec6758 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e95055 0%,#ec6758 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e95055 0%,#ec6758 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e95055', endColorstr='#ec6758',GradientType=0 ); /* IE6-9 */
	}

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

footer ul {
	display: flex;
	margin-bottom: 25px;
	font-size:32;
}
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;
}