*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: 'RepoRegular', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    color:#4e4e4e;
    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: 1px dotted #ffd785;
 }

 a.btn {
     color:#ffffff;
     border-radius: 4px;
     text-transform: uppercase;
     background-color: none;
     border:1px solid #ffffff;
     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: #972f5a; border:0; margin-bottom: 60px;}

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

 }

 section h3.title {
    color:#26264f;
    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:0 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:0 15px;}
header nav li:first-child{margin-left:0;}
header nav li:last-child{margin-right:0;}
#logo {width: 93px; height:36px;}

/*------------ Header --------*/
.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%;
}
#heroBgr {background-image: url(../img/hero.png);}
.hero h1 {
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    font-size: 55px;
    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 {
    background-color: #ffc244;
    border:1px solid #ffc244;
    color:#9337b2; opacity: 1;
}

/*------------ Examples --------*/

.our-work {background-color: #fafafa;}
.our-work h3 {
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    font-size: 55px;

}
.our-work .grid li {
    padding: 20px;
    height: 350px;
    border-radius: 4px;
    background-size: cover;
    background-clip: content-box;
    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);}

/*------------ Evolutuion --------*/
.evolutions {
    background-color: #fafafa; padding-top: 0;
}

.evolutions img {margin: 0px 0px 60px 0px; align-items: flex-start;}

.evolutions p {
    text-align: center;
    width:80%;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 20px;
    padding: 0;
}

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

/*------------ Contact --------*/
.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:1px solid #dddddd;
    border-radius: 4px;
}

.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 #a93087; outline: none;
    border:0;
}
.contact form .btn {
    padding: 16px 40px;
    color:#ffffff;
    border-radius: 4px;
    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;
   background: #ab2f87; /* Old browsers */
background: -moz-linear-gradient(top,  #ab2f87 0%, #7d3078 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ab2f87 0%,#7d3078 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ab2f87 0%,#7d3078 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab2f87', endColorstr='#7d3078',GradientType=0 ); /* IE6-9 */

}

.contact form .btn:hover {
  background: #7d3078; /* Old browsers */
background: -moz-linear-gradient(top,  #7d3078 0%, #ab2f87 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d3078 0%,#ab2f87 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d3078 0%,#ab2f87 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d3078', endColorstr='#ab2f87',GradientType=0 ); /* IE6-9 */

}
@media (max-width:800px) {

.contact form input {flex-basis: 100%; margin: 0 0 20px 0;}
}

/*------------ Footer --------*/

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

footer ul {display: flex; margin:25px 0px;font-size:32px;}
footer ul li {
    margin:0 8px;
}

footer ul li a:hover {border-bottom:none;}

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;}
footer p a{color:#ffffff;} 
footer p a:hover{color:#ab2f87;padding:0; border-bottom:none;} 
@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
	}

}

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


@media (max-width: 700px){
	header{
		flex-direction: column;		
	}

	header h2{
		margin-bottom: 15px;
	}

}
@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: #ab2f87; /* Old browsers */
background: -moz-linear-gradient(top,  #ab2f87 0%, #7d3078 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ab2f87 0%,#7d3078 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ab2f87 0%,#7d3078 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab2f87', endColorstr='#7d3078',GradientType=0 ); /* IE6-9 */
} 
.hero h1{
	font-family: 'Comfortaa', cursive;
	font-weight: 600;
	font-size:40px;
	margin: 50px 0px;
}
	#btnReadMore {margin-bottom: 50px;}
}
@media (max-width: 1000px){

	.evolutions p{
		font-size: 16px;
	}
.evolutions h4 {color: #a93087;
	font-family: 'Comfortaa', cursive;
	font-weight: 600;
    font-size: 20px;
    margin-bottom: 25px;}
	
}
@media (max-width: 700px){

	footer{
		padding: 80px 15px;
	}

}