/* -------------------------------------- */
/* Global reset
/* -------------------------------------- */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none }
img { vertical-align:middle; }
strong, b, strong *, b * { font-weight: bold; } em, i, em *, i * { font-style: italic; }
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html { overflow-x: hidden }
a { text-decoration:none; }

/* -------------------------------------- */
/* General
/* -------------------------------------- */
body {
	font-family:"Roboto", sans-serif;
}
.sp-container {
	max-width:1440px;
	width:100%;
	margin:0 auto;
}

/* -------------------------------------- */
/* Header
/* -------------------------------------- */
#topbar {
	position:absolute;
	width:100%;
	padding:30px 40px 0;
	z-index:999;
}
#logo {
	float:left;
}
.menu {
	float:right;
}
.menu li {
	display:inline-block;
	margin-left:25px;
}
.menu li a {
	font-size:12px;
	font-weight:700;
	color:#000;
	text-transform:uppercase;
	letter-spacing:1.5px;
}
.menu li a.buy {
	display:inline-block;
	background:#c3a26e;
	background:#f78a74;
	color:#fff;
	padding: 12px 10px 12px 18px;
	font-family:Roboto;
	font-weight:700;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:2px;
	box-shadow: 0px 0px 18px 6px rgba(138,138,138,0.16);
	-o-transition:.18s;
	-ms-transition:.18s;
	-moz-transition:.18s;
	-webkit-transition:.18s;
	transition:.18s;
}
.menu li a.buy:hover {
	background:#f7755a;
	box-shadow: 0px 0px 18px 6px rgba(138,138,138,0.22);
}

/* -------------------------------------- */
/* Hero Section
/* -------------------------------------- */
#hero {
	width:100vw;
	height:100vh;
	background-image:url(landing-img/hero6.jpg);
	background-position:center center;
	background-size:cover;
	display:flex;
	justify-content:center;
	align-items:center;
}
.hero-content {
	text-align:center;
	margin-top:-20px;
}
.hero-content h1 {
	font-size:56px;
	font-family:"Prata";
	color:#000;
	margin-bottom:25px;
	margin-top:40px;
}
.hero-content p {
	line-height:35px;
	font-size:22px;
	color:#888;
	font-weight:300;
	letter-spacing:0.5px;
	margin-bottom:50px;
}
.subtitle {
	text-transform:uppercase;
	letter-spacing:2.5px;
	font-weight:700;
	font-size:14px;
}
.subtitle {
	position: relative;
    text-align: center;
}
.subtitle:before, .subtitle:after {
    position: absolute;
    top: 50%;
    overflow: hidden;
    width: 50px;
    height: 1px;
    border-top: 1px solid #cdcfd6;
    content: '';
}
.subtitle:before {
    margin-left: -68px;
    text-align: right;
}
.subtitle:after {
    margin-left: 15px;
}
.button {
	display:inline-block;
	background:#f78a74;
	color:#fff;
	padding: 19px 23px 19px 31px;
	font-weight:700;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:3.5px;
	box-shadow: 0px 0px 22px 6px rgba(138,138,138,0.25);
	margin:0 12px;
	-o-transition:.18s;
	-ms-transition:.18s;
	-moz-transition:.18s;
	-webkit-transition:.18s;
	transition:.18s;
}
.button:hover {
	background:#f7755a;
	box-shadow: 0px 0px 22px 6px rgba(138,138,138,0.32);
}

#hero {
	-webkit-animation: fadein 2s;
	-moz-animation: fadein 2s;
	-ms-animation: fadein 2s;
	-o-animation: fadein 2s;
	animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -------------------------------------- */
/* Demos
/* -------------------------------------- */
#demos-wrap {
	background:#f5f5f5;
	padding:130px 0 160px;
}
#demos-wrap:focus {
	outline:none;
}

.section-title {
	text-align:center;
	margin-bottom:90px;
}
.section-title h2 {
	font-size:48px;
	font-weight:300;
	letter-spacing:1px;
	margin-bottom:10px;
}
.section-title p {
	font-size:18px;
	color:#999;
	font-weight:300;
}
.demos {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:80px;
}
.demo-item {
	text-align:center;
}
.demo-item img {
	max-width:100%;
	margin-bottom:35px;
	border-radius:4px;
	box-shadow: 0 10px 60px rgba(0, 0, 0, 0.13);
    transition: all .25s ease;
    transform: translate3d(0,0,0);
    -webkit-transition: all .25s ease;
}
.demo-item img:hover {
	box-shadow: 0 10px 60px rgba(0, 0, 0, 0.25);
	transform: translate3d(0,-.5rem,0);
    -webkit-transform: translate3d(0,-.5rem,0);
}
.demo-item h4 {
	color:#000;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:3px;
	font-weight:700;
}

/* -------------------------------------- */
/* Features
/* -------------------------------------- */
#feature-wrap {
	padding:130px 0 160px;
}
#feature-wrap:focus {
	outline:none;
}

.features {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:70px 60px;
}
.feature-item {
	text-align:center;
}
.feat-icon{
	width:48px;
	margin-bottom:25px;
}
.feature-item h5 {
	font-weight:500;
	font-size:18px;
	margin-bottom:14px;
}
.feature-item p {
	font-size:16px;
	line-height:27px;
	font-weight:300;
	color:#888;
}

/* -------------------------------------- */
/* Footer
/* -------------------------------------- */
#footer {
	background:#121212;
	height:440px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.footer-content {
	text-align:center;
}
.footer-content h4 {
	color:#fff;
	font-size:48px;
	font-weight:300;
	margin-bottom:42px;
}
.footer-content .button {
	box-shadow:none;
	background:none;
	color:#fff;
	font-size:13px;
	border:1px solid #fff;
	-o-transition:.18s;
	-ms-transition:.18s;
	-moz-transition:.18s;
	-webkit-transition:.18s;
	transition:.18s;
}
.footer-content .button:hover {
	background:#fff;
	color:#191919;
}

/* -------------------------------------- */
/* Icon
/* -------------------------------------- */
@font-face {
  font-family: 'fontello';
  src: url('./landing-fonts/fontello.eot?80846787');
  src: url('./landing-fonts/fontello.eot?80846787#iefix') format('embedded-opentype'),
	   url('./landing-fonts/fontello.woff?80846787') format('woff'),
	   url('./landing-fonts/fontello.ttf?80846787') format('truetype'),
	   url('./landing-fonts/fontello.svg?80846787#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.arrow-icon {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none; 
	display: inline-block;
	text-decoration: inherit;
	font-size:13px;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	margin-left: .2em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width:768px) {
	.hero-content {
		padding:0 20px;
	}
	.hero-content h1 {
		font-size:36px;
		line-height:1.5;
		margin-bottom:15px;
	}
	.hero-content p {
		font-size:18px;
		line-height:28px;
		margin-bottom:30px;
	}
	.hero-content p br {
		display:none;
	}
	.subtitle {
		display:none;
	}
	#logo {
		float:none;
		text-align:center;
	}
	#logo img {
		padding-left:10px;
	}
	.menu {
		display:none;
	}
	#demos-wrap {
		padding:100px 20px 130px;
	}
	.demos {
		grid-template-columns:1fr;
		grid-gap:50px;
	}
	.section-title h2 {
		font-size:38px;
	}
	.section-title p {
		font-size:16px;
		line-height:26px;
	}
	.section-title {
		margin-bottom:50px;
	}
	#feature-wrap {
		padding:100px 20px 130px;
	}
	.features {
		grid-template-columns:1fr;
		grid-gap:30px;
	}
	.footer-content {
		padding:0 20px;
	}
	.footer-content h4 {
		font-size:44px;
		line-height:54px;
	}
}


.demo-item:nth-child(2):before, .demo-item:nth-child(3):before {
    content: "NEW";
    position: absolute;
    top: -15px;
    right: -17px;
    background: #ff2e03;
    color: #fff;
    height: 42px;
    /* font-weight: 700; */
    width: 43px;
    padding-left: 1px;
    line-height: 43px;
    letter-spacing: 1px;
    font-size: 12px;
    font-family: Roboto;
    border-radius: 100%;
    z-index: 9;
}
.demo-item {position:relative;}