/* General */

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

html {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	çolor: #797979;
	background-color: #f6f7f9;
}
ul, nav {
	list-style: none;
}

a {text-decoration: none;
color:inherit;cursor: pointer;
opacity: 1;
font-family: 'Poppins', sans-serif;
font-size: 24px;
color:#312a87; }
a:hover {
	opacity: 1;
	padding: 0px 0px 5px 0px;
	border-bottom: #312a87 1px dotted;
}

a.btn {
	color:#fff;
	border-radius: 40px;
	text-transform: uppercase;
	background-color: #d4609f;
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	line-height: 44px;
	text-align: center;
}

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

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

section p {
	max-width: 800px;
	text-align: center;
	margin-bottom: 32px;
	font-size: 18px;
	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: flex-start;
	align-items: center;
	color: #fff;
	padding: 72px 100px 50px 100px;
}

header h2{
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	font-size: 42px;
	color:#312a87;
	margin-right:180px;
}

header h2 a:hover {border-bottom: none;}
header h2 img {
	vertical-align: middle;
	height: 64px;
}

header nav {
	display: flex;	
}

header nav li {
	margin: 0px 15px;
	
}

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

#logo {
	width: 64px;
	height:64px;
	margin-right: 28px;
	vertical-align: middle;

}

/* Hero section */
section#home {
	padding: 104px 0px 0px 100px;
	justify-content: flex-start;
	align-items: flex-start;
}

.hero {
	position: relative;
	justify-content: left;
	min-height: 100vh;
	color:#797979;
	text-align: left;	
}

.hero .background-image {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	background-size: contain;
	background-position: top right;
	background-color: #f6f7f9;
	z-index: -1;
}

.hero .background-image:after {
 content:'';
 position: absolute;
 top:0;
 right:0;
 width: 100%;
 height:100%;
 background-size:cover;
}
.hero h1 {
	font-family: 'Raleway', sans-serif;
	font-weight:900;
	font-size: 96px;
	margin-bottom: 72px;
	text-align: left;
	color:#312a87;
	padding-top: 104px;   
}

.hero p{

	font-family: 'Poppins', sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 35px;
	color:#797979;
	text-align: justify;
	max-width: 478px;
	padding-left: 0px;
}

.hero a.btn {
	padding: 20px 50px;
	margin-bottom: 602px;
	margin-top: 10px;
	border:2px solid #df609f;
}

.hero a.btn:hover {
	padding: 20px 50px;
	margin-bottom: 602px;
	margin-top: 10px;
	border:2px solid #df609f;
	background-color:rgba(255,255,255,0);
	color:#df609f;
	opacity: 1;
}

#heroBgr {
	background-image: url(../images/headerBgr.png);
	background-repeat: no-repeat;
}

/* Trends */
.ui-trends {
	background-color: #f6f7f9;
}

.ui-trends .grid li {
	padding: 20px;
	height: 350px;
	border-radius:3px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
	background-color: #333333;
}

.ui-trends .grid li.small {
	flex-basis: 40%;
}

.ui-trends .grid li.large {
	flex-basis: 60%;
}

#flat-img-1 {
	background-image: url(../images/img-01.jpg);
}
#flat-img-2 {
	background-image: url(../images/img-02.jpg);
}
#flat-img-3 {
	background-image: url(../images/img-03.jpg);
}
#flat-img-4 {
	background-image: url(../images/img-04.jpg);
}