/*
YUI 3.16.0-rc-1 (build c2054c6)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,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{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:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html {
	background: #DDE2E7;
	color: #08262E;
	text-align: center;
	font-family: "source-sans-pro-n4", "source-sans-pro", "Helvetica Neue", sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.loading {
	visibility: hidden;
}

.header {
	background: #000 url(img/bg-repeatable.jpg) repeat-x -10% 66px;
	color: #12C3A2;
	height: 724px;
	position: relative;
	overflow: hidden;
}
.header-links {
	max-width: 926px;
	margin: 0 auto;
	position: relative;
}

/* - - - - SMALL CAPS - - - - */

.drinks-meter-link a,
h3,
#submit,
.footer-links {
	font-family: "source_sans_proregular", "source-sans-pro-n4", "source-sans-pro", "Helvetica Neue", sans-serif;
	letter-spacing: 0.05em;
}


.section-inner {
	max-width: 926px;
	margin: 0 auto;
	padding: 30px 16px;
	position: relative;
}

.header .section-inner {
	padding-top: 38px;
	position: static;
}

.section--icons {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 4px 0 8px;
}

.logo {
	width: 258px;
	height: 39px;
	float: left;
	background: url(img/logo.png) no-repeat center;
	text-indent: -9999em;
}

.drinks-meter-link {
	position: absolute;
	top: 0;
	right: 0;
}
.drinks-meter-link a {
	display: block;
	padding: 8px 18px;
	border: 1px solid #6E8E98;
	border-radius: 3px;
	color: #6E8E98;
	text-decoration: none;
	-webkit-transition: color .125s linear, border-color .125s linear;
	-moz-transition: color .125s linear, border-color .125s linear;
	-o-transition: color .125s linear, border-color .125s linear;
	transition: color .125s linear, border-color .125s linear;
}
.drinks-meter-link a:hover {
	color: #fff;
	border-color: #fff;
}

h1 {
	font-family: "source-sans-pro-n2", "source-sans-pro", "Helvetica Neue", sans-serif;
	font-weight: 200;
	font-size: 3.25em;
	line-height: 1.12307692307692;
	max-width: 680px;
	margin: 85px auto 0;
	position: relative;
	top: 0;
}
@media only screen and (max-width: 500px) {
	h1 {
		font-size: 2.6em;
		margin-top: 35px;
	}
	.header {
		height: 640px;
	}
}

h2 {
	font-family: "source-sans-pro-n3", "source-sans-pro", "Helvetica Neue", sans-serif;
	font-weight: 300;
	font-size: 1.625em;
	margin: 22px 0 0;
}

.section--sign-up {
	position: relative;
}
.section--sign-up:before {
	content: "";
	display: block;
	position: absolute;
	top: -46px;
	left: 0;
	right: 0;
	height: 46px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0));
}

#form {
	margin: 28px 0;
}
.input-holder {
	max-width: 332px;
	margin: 0 auto;
	background: #fff;
	border-radius: 3px;
	position: relative;
}
#email-label {
	display: block;
	padding: 12px 14px;
	font-size: 1.125em;
	color: #A2B9BE;
	text-align: left;
	-webkit-transition: color .125s linear;
	-moz-transition: color .125s linear;
	-o-transition: color .125s linear;
	transition: color .125s linear;
}
#email-label.hidden {
	color: #fff;
}
#email {
	font-family: "source-sans-pro-n4", "source-sans-pro", "Helvetica Neue", sans-serif;
	font-size: 1.125em;
	color: #08262E;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	border: none;
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 12px 14px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
}
#submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100px;
	border: none;
	background: #5933FF;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	border-radius: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	font-size: 0.875em;
	outline: none;
	cursor: pointer;
}
.sending #submit {
	background-image: url(img/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999em;
}

h3 {
	font-family: "source_sans_probold", "source-sans-pro-n7", "source-sans-pro", "Helvetica Neue", sans-serif;
	font-weight: normal;
	font-size: 1.125em;
	margin-bottom: 12px;
	letter-spacing: 1px;
}

h2,
.footer-links a:hover {
	color: #5933FF;
}

/* - - - - DEVICES - - - - */

.device-desktop {
	width: 666px;
	/* height: 472px; */
	height: 396px;
	background: url(img/desktop.png) no-repeat;
	text-indent: -9999em;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -402px;
}
.device-phone {
	width: 235px;
	/* height: 455px; */
	height: 335px;
	background: url(img/phone.png) no-repeat;
	text-indent: -9999em;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: 152px;
}

.device-desktop,
.device-phone {
	-webkit-transition: margin-left .25s ease-out;
	-moz-transition: margin-left .25s ease-out;
	-o-transition: margin-left .25s ease-out;
	transition: margin-left .25s ease-out;
}

/* - - - - APP ICONS - - - - */

.dm-apps {
	max-width: 774px;
	margin: 0 auto;
	overflow: hidden;
	cursor: default;
	text-align: center;
}
.dm-apps li {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	*display: inline;
}
.dm-apps a {
	position: relative;
	display: block;
	margin: 8px 12px;
	width: 62px;
	height: 63px;
	background-image: url(img/apps-sprite.png);
	background-repeat: no-repeat;
	text-indent: -9999em;
	-webkit-transition: -webkit-transform .125s ease;
	-moz-transition: -moz-transform .125s ease;
	-o-transition: -o-transform .125s ease;
	transition: transform .125s ease;
}
.dm-apps a span {
	position: absolute;
}
.dm-apps.dm-apps__cannabis a {
	margin: 8px auto;
}
.dm-apps a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.dm-cocaine {
	background-position: -90px 0;
}
.dm-ketamine {
	background-position: -181px 0;
}
.dm-mephedrone {
	background-position: -272px 0;
}
.dm-alcohol {
	background-position: -363px 0;
}
.dm-ghb-gbl {
	background-position: -454px 0;
}
.dm-amphetamine {
	background-position: -545px 0;
}
.dm-mdma {
	background-position: -635px 0;
}
.dm-tobacco {
	background-position: -726px 0;
}


.footer-links a {
	display: inline-block;
	padding: 6px 18px;
	text-decoration: none;
	color: #6E8E98;
	-webkit-transition: color .125s linear;
	-moz-transition: color .125s linear;
	-o-transition: color .125s linear;
	transition: color .125s linear;
}

.section-inner--footer {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* - - - - - - - - - - - - MQ - - - - - - - - - - - - */

@media only screen and (max-width: 820px) {

	.dm-apps {
		width: 258px;
	}

}

@media only screen and (max-width: 800px) {

	.device-desktop {
		margin-left: -333px;
	}
	.device-phone {
		margin-left: -220px;
		margin-bottom: -32px;
	}

}

@media only screen and (max-width: 660px) {

	.device-desktop {
		display: none;
	}
	.device-phone {
		margin-left: -118px;
		margin-bottom: 0;
	}

}

@media only screen and (max-width: 500px) {

	.logo {
		margin: 0 auto;
		float: none;
	}
	.drinks-meter-link {
		display: none;
	}

}

/* - - - - - - - - - - - - RETINA - - - - - - - - - - - - */

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {

	.logo {
		background-image: url(img/logo@2x.png);
		background-size: 257px;
	}
	.device-desktop {
		background-image: url(img/desktop@1.25x.png);
		background-size: 666px;
	}
	.device-phone {
		background-image: url(img/phone@2x.png);
		background-size: 235px;
	}
	.dm-apps a {
		background-image: url(img/apps-sprite@2x.png);
		background-size: 789px;
	}

}