* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	&:focus {
		outline: none;
	}
}

span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, em, img, small, strong, ol, ul, li, form, label, table, tr, th, td {
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

html,
body {
	color: #fff;
	font-family: 'Markazi Text', sans-serif, serif;
	background-color: #1e1e25; /* #232323 */
}

.fr {
	float: right;
}

.fl {
	float: left;
}

.fix:after {
	content: "";
	position: relative;
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
	font-size: 0;
}

.flex {
	display: flex;
}

.flex-mid {
	align-items: center;
}

.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

header {
	display: flex;
	align-items: center;
	height: 60px;
	background-color: transparent;
}

	header .header-logo {
		padding: 0 20px;
		display: flex;
		align-items: center;
	}
	
	header .logo {
		width: 20px;
		height: 30px;
		margin-right: 12px;
	}
		
		header .logo-drop {
			fill: #fff;
		}
		
		header .logo-smile {
			fill: #232323;
		}
	
		header .header-logo span {
			font-size: 20px;
		}
		
.search {
	height: 100%;
	padding: 0 0 0 10px;
	flex-grow: 2;
}

	.search-box {
		height: 100%;
		display: flex;
		align-items: center;
		border-left: 1px solid #2d2e38;
		padding-left: 20px;
	}
	
	.search-icon {
		fill: #fff;
		width: 20px;
		height: 20px;
	}
	
	.search-input {
		background: transparent;
		border: 0;
		height: 100%;
		width: 100%;
		outline: none;
		color: #fff;
		font-size: 16px;
		margin-left: 18px;
	}
	
	.no-results {
		display: none;
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}

		.no-results div {
			width: 100%;
			height: 100%;
			text-align: center;
			display: flex;
			align-items: center;
		}
		
		.no-results span {
			position: relative;
			top: -45px;
			font-size: 40px;
			width: 100%;
		}

.main {
	height: calc(100% - 60px);
}

.wrap {
	height: 100%;
    min-height: 100%;
    display: block;
    width: auto;
}

.list {
	position: absolute;
	top: 60px;
	left: 0;
	bottom: 0;
    height: calc(100% - 60px);
    width: 100%;
}

.list2 {
	overflow-x: scroll;
    overflow-y: hidden;
    height: 100%;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}

.main ul {
	background-color: #17181c; /* #111111 */
	display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
	flex-direction: row;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 5px;
}

.main li {
	width: 35vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
	contain: layout;
	flex: none;
	padding-right: 5px;
}

.main li .list-body {
	position: relative;
	height: 100%;
    display: flex;
    align-items: center;
    background: 0 0 no-repeat;
    background-size: cover;
    border-radius: 4px;
}

.main li .list-body:before {
	content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    height: 100%;
    background: rgba(0,0,0,.12);
}

.main li .list-body:after {
	content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    height: 25%;
    background-image: linear-gradient(-180deg, transparent, #17181c 97%);
}

.main li .list-main {
	position: absolute;
    z-index: 999;
    bottom: 80px;
    left: 0;
    padding: 0 50px;
}

.main li .list-main h2 {
	font-size: 48px;
	color: #fff;
	margin-bottom: 12px;
	line-height: 50px;
}


button {
	background-color: #009eff;
    color: #fff;
    border: 0;
    height: 44px;
    line-height: 44px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: block;
    border-radius: 3em;
    outline: none;
}

.disclaimer {
	position: fixed;
	bottom: 4px;
	left: 10px;
}

.disclaimer small {
	font-family: helvetica, arial, sans-serif;
	color: #fff;
	opacity: .4;
	font-size: 10px;
}