@media screen {
	
	/* General */
	
	.main-container {
		overflow-x: hidden;
	}
	
	.header {
		background: rgba(60,60,65,1);
	}
	
	.header.transparent {
		background: linear-gradient(to bottom, rgba(60,60,65,0.4) 0%, rgba(60,60,65,0) 100%);
		box-shadow: none;
	}
	
	/* Hero Section */
	
	.hero {
		position: relative;
		width: 100%;
		text-align: center;
		overflow: hidden;
		background: rgba(0,0,0, 0.2);
		margin-top: -116px;
	}
	
	.hero .background {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0.4;
		height: 100%;
	}
	
	.hero .content {
		display: inline-block;
		position: relative;
		text-align: left;
		z-index: 1;
		padding: 116px 6vw 0 6vw;
	}
	
	.hero.banner .content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.hero.banner img {
		margin: 10px 0 24px 0;
	}
	
	.hero h1 {
		margin: 2.8vw 0 0 0;
		padding: 0 2vw;
		font-size: 6vw;
		font-weight: 400;
	}
	
	.hero h2 {
		margin: 3vw 0 0 0;
		padding: 0 2vw;
		font-size: 4vw;
		font-weight: 400;
		opacity: 0.8;
	}
	
	.hero .buttons {
		display: flex;
		align-items: stretch;
		width: 100%;
		padding: 7vw 0 8vw 0;
	}
	
	.hero .button:first-child {
		margin-right: 3.5vw;
	}
	
	.hero .button {
		text-align: center;
		background: #f9a11b;
		color: rgba(0,0,0, 0.7);
		padding: 0 6vw;
		box-sizing: border-box;
		border-radius: 100px;
		font-size: 4vw;
		font-weight: 600;
		line-height: 13vw;
		height: 13vw;
		flex-grow: 1;
	}
	
	/* How it works overlay */
	
	.how-it-works .bullets {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin-top: 30px;
		padding: 5vw;
	}
	
	.how-it-works .bullet {
		width: 100%;
		margin-bottom: 10vw;
	}
	
	.how-it-works .icon {
		width: 30vw;
		height: 30vw;
		float: left;
		border-radius: 100%;
		margin-right: 5vw;
	}
	
	.how-it-works .icon.robot {
		background: url('https://cfm.yidio.com/redesign/img/ico-robot-125-1x.png') center no-repeat rgba(0,0,0, 0.3);
		background-size: 60%;
	}
	
	.how-it-works .icon.search {
		background: url('https://cfm.yidio.com/redesign/img/ico-search-125-1x.png') center no-repeat rgba(0,0,0, 0.3);
		background-size: 60%;
	}
	
	.how-it-works .icon.you {
		background: url('https://cfm.yidio.com/redesign/img/ico-face-125-1x.png') center no-repeat rgba(0,0,0, 0.3);
		background-size: 60%;
	}
	
	.how-it-works .text {
		margin-left: 35vw;
	}
	
	.how-it-works .title {
		font-size: 5.6vw;
		font-weight: 500;
	}
	
	.how-it-works p {
		margin: 1.5vw 0 0 0;
		padding: 0;
		font-size: 3.9vw;
	}
	
	.site-description {
		display: flex;
		font-size: 80%;
		line-height: 1.4em;
		color: rgba(255,255,255, 0.7);
		padding: 20px;
		border-bottom: 1px solid rgba(0,0,0, 0.5);
		align-items: center;
		justify-content: center;
	}
	
	.site-description img {
		margin-right: 16px;
		opacity: 0.8;
	}
	
	/* Browse Section */
	
	.section {
		border-bottom: 1px solid rgba(0,0,0, 0.3);
	}
	
	.section .titlebar {
		padding: 12px 10px 10px 10px;
		font-size: 0.95em;
	}
	
	.section .titlebar .title {
		float: left;
		font-weight: 400;
	}
	
	.section .titlebar .more {
		float: right;
	}
	
	.section .titlebar .more .label {
		float: left;
		padding-right: 14px;
		opacity: 0.5;
	}
	
	.section .titlebar .more .arrow {
		height: 0;
		width: 0;
		position: relative;
		top: 8px;
		float: right;
		right: -11px;
	}
	
	.section .titlebar .more .arrow:after {
		content: '';
		position: absolute;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		height: 7px;
		width: 7px;
		top: 50%;
		right: 12px;
		margin-top: -3px;
		-webkit-transform: rotate(45deg);
		opacity: 0.35;
	}
	
	.section .posters {
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		overflow-x: scroll;
		padding-left: 10px;
		padding-top: 2px;
		height: 241px;
	}
	
	.section.empty .posters {
		background: url(https://cfm.yidio.com/mobile/img/activity-indicator.gif) center 85px no-repeat;
		background-size: 33px 33px;
		position: relative;
	}
	
	.section .poster {
		display: inline-block;
		position: relative;
		width: 130px;
		white-space: normal;
		vertical-align: top;
		margin-right: 7px;
	}
	
	.section.not-loading .poster:last-child {
		margin-right: 10px;
	}
	
	.section.stop-loading .poster:last-child:after {
		background: none;
	}
	
	.section .activity-indicator {
		width: 33px;
		height: 33px;
		margin: 81px 10px 0 5px;
	}
	
	.section.stop-loading .activity-indicator {
		display: none;
	}
	
	.section .poster .prime-banner {
		display: block;
		position: absolute;
		top: -2px;
		left: -2px;
		width: 67px;
		height: 67px;
	}
	
	.section .poster img {
		width: 130px;
		height: 195px;
		background: rgba(0,0,0, 0.2);
		display: block;
		border: 0px;
	}
	
	.section .poster span {
		height: 34px;
		display: block;
		opacity: 0.5;
		overflow: hidden;
		font-size: 0.8em;
		margin: 4px 3px 8px 3px;
	}
	
	/* Backdrop section */
	
	.section .banners {
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		overflow-x: scroll;
		padding-left: 10px;
		padding-top: 2px;
		height: 145px;
	}
	
	.section.empty .banners {
		background: url(https://cfm.yidio.com/mobile/img/activity-indicator.gif) center 85px no-repeat;
		background-size: 33px 33px;
		position: relative;
	}
	
	.section .banner {
		display: inline-block;
		position: relative;
		width: 160px;
		white-space: normal;
		vertical-align: top;
		margin-right: 7px;
		background:none;
		height: 145px;
	}
	
	.section.not-loading .banner:last-child {
		margin-right: 10px;
	}
	
	.section.stop-loading .banner:last-child:after {
		background: none;
	}
	
	.section .banner img {
		width: 160px;
		height: 90px;
		background: rgba(0,0,0, 0.2);
		display: block;
		border: 0px;
	}
	.section .banner span {
		height: 34px;
		display: block;
		color:#fff;
		opacity: 0.5;
		overflow: hidden;
		font-size: 0.8em;
		margin: 4px 3px 8px 3px;
	}
	
	/* Top 10 Banner */

	section + .banner {
		display: block;
		border-top: 1px solid rgba(0, 0, 0, 0.3);
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		padding: 18px;
		margin: 10px;
	}

	section + .banner .text {
		font-weight: bold;
		font-size: 120%;
		float: left;
		width: 70%;
	}

	section + .banner .button {
		text-align: center;
		float: right;
		background: #f9a11b;
		color: rgba(0, 0, 0, 0.7);
		padding: 0 6vw;
		box-sizing: border-box;
		border-radius: 100px;
		font-size: 4vw;
		font-weight: 600;
		line-height: 13vw;
		height: 13vw;
		flex-grow: 1;
	}
}

/* Landscape */

@media (orientation: landscape) {
	
	.hero .buttons {
		padding: 4.6vw 0 6vw 0;
	}
	
	.how-it-works .bullets {
		flex-direction: row;
		justify-content: center;
		text-align: center;
		align-items: center;
		margin: 0;
		padding: 44px 0 0 0;
	}
	
	.how-it-works .bullet {
		margin: 0 2vw;
	}
	
	.how-it-works .icon {
		display: inline-block;
		float: none;
		width: 18vw;
		height: 18vw;
		margin: 0 0 2vw 0;
	}
	
	.how-it-works .text {
		margin-left: 0;
	}
	
	.how-it-works .title {
		font-size: 2.7vw;
	}
	
	.how-it-works p {
		margin: 1vw 0 0 0;
		font-size: 2vw;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	
	.hero {
		text-align: left;
	}
	
	.hero .wrapper {
		margin-left: 40px;
	}
	
	.hero h1 {
		margin: 96px 0 0 0;
	}
	
	.hero .button {
		height: 9vw;
		padding: 0 4vw;
		line-height: 8vw;
		font-size: 3vw;
		margin: 0 3vw 0 0;
		background: none;
		border: 0.6vw solid #f9a11b;
		color: white;
	}
	
	.hero .button:hover {
		border: none;
		line-height: 60px;
		background: #f9a11b;
		color: rgba(0,0,0, 0.6);
	}
	
}

/* Tablet */

@media (min-device-width: 640px) {
	.hero {
		text-align: left;
	}
	
	.hero h2 {
		font-size: 3vw;
	}
	
	.hero .buttons {
		width: 100%;
		padding: 6vw 0 8vw 0;
	}
	
	.hero .button {
		height: 9vw;
		padding: 0 4vw;
		line-height: 8.1vw;
		font-size: 2.8vw;
		margin: 0 3vw 0 0;
		background: none;
		border: 0.5vw solid #f9a11b;
		color: white;
	}
	
	.hero .background {
		height: auto;
		width: 100%;
	}
}