body {
	position: fixed;
	overflow: hidden;
	height:100%;
	width:100%;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

* {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#index-wrapper {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

#index-c {
	display: table;
	width:100%;
	height:calc(100% - 90px);
	margin-top:60px;
}

#index-i {
	display:table-cell;
	vertical-align: middle;
	text-align: center;
}

#fb {
	text-align: center;
}

.description {
	position: relative;
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	width:100%;
}

.description.pre {
	margin-left:40px;
	opacity:0;
	transform: rotate(5deg);
	margin-top:20px;
}

.description.over {
	margin-left:-300px;
	opacity:0;
	transform: rotate(-5deg);
	margin-top:40px;
}

/*.featured {
	width:20px;
	height:20px;
	margin: 0 auto;
	margin-bottom:10px;
	background-image:url(/img/star.png);
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
	transform: scale(0,0);
}*/

.texted {
	line-height:54px;
	font-size:56px;
	width:580px;
	display: inline-block;
	font-weight: bold;
	/*cursor: e-resize;*/
	cursor: default;
	margin-bottom:30px;
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	position: relative;
}

@media screen and (max-width: 581px) {
	.texted {
		width:300px;
	}
}

.description.pre .texted {
	margin-left:100px;
} 

.description.over .texted {
	margin-left:-200px;
}

.created {
	font-size:16px;
	height:20px;
	margin-bottom:10px;
}


.created .dim {
	opacity: .75;
}


.love {
	font-size:20px;
	padding: 15px 20px;
	background-color: #0066cc;
	border-radius:4px;
	color: white;
	font-weight:900;
	display:inline-block;
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
	transition: transform .1s ease-out;
	-webkit-transition: transform .1s ease-out;
	-moz-transition: transform .1s ease-out;
	-ms-transition: transform .1s ease-out;
	box-shadow: 2px 2px 0 rgba(0,0,0,.1);
}

.love.beat {
	transform: scale(1.1,1.1);
}

.love:hover {
	background-color: #1177dd;
}

.love:active {
	background-color: #2288ee;
}


.notexpected {
	padding: 15px 20px;
	border-radius:4px;
	color: white;
	cursor: pointer;
	display: inline-block;
}

.notexpected:hover {
	text-decoration: underline;
}




.submitted {
	color: #0AF;
	display: none;
	margin-top: 20px;
}

#about {
	position: fixed;
	z-index:2;
	width:100%;
	text-align: center;
	top:16px;
	left:0;
	font-size:20px;
	color: #444;
	opacity:.5;
}

#about2 {
	position: fixed;
	z-index:3;
	width:100%;
	font-size:12px;
	text-align: center;
	bottom:0;
	left:0;
	color: #444;
	opacity:.5;
	padding:10px;
	width:calc(100% - 20px);
}


/* Save! */

.save {
	font-size:20px;
	padding: 15px 20px;
	background-color: #ff0066;
	border-radius:4px;
	color: white;
	font-weight:900;
	display: inline-block;
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
	box-shadow: 2px 2px 0 rgba(0,0,0,.1);
}

.save:hover {
	background-color: #ff2288;
}

.save:active {
	background-color: #ff44aa;
}

/* Link loading */

.link-loading {
	font-size:20px;
	padding: 15px 20px;
	white-space:nowrap;
	display: inline-block;
}

/* See site */

.link {
	font-size:20px;
	padding: 15px 20px;
	background-color: #65f0db;
	border-radius:4px;
	font-weight:900;
	display: inline-block;
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
	white-space:nowrap;
	box-shadow: 2px 2px 0 rgba(0,0,0,.1);
}

.link:hover {
	background-color: #75ffeb;
}

.link:active {
	background-color: #85fffb;
}

/* Bookmarks */

.bookmarks-wrapper {
	padding-top:60px;
	height:calc(100% - 60px);
	background-color: white;
	width:100%;
	position: fixed;
	z-index:6;
	top:0;
	left:0;
}

.close-bookmarks {
	position: fixed;
	top:10px;
	right:10px;
	width:40px;
	height:40px;
	background-image: url(/img/close.png);
	background-size:20px;
	background-position: center;
	background-repeat: no-repeat;
	z-index:10;
	opacity:.2;
	cursor: pointer;
}

.close-bookmarks:hover {
	opacity:1;
}



/* Login explainer */

#login-explainer {
	padding-top:60px;
	height:calc(100% - 60px);
	background-color: white;
	width:100%;
	position: fixed;
	z-index:5;
	top:0;
	left:0;
}

/* External site */

.site-wrapper-inner {
	padding-top:60px;
	height:calc(100% - 60px);
	background-color: white;
	width:100%;
	position: fixed;
	z-index:7;
	top:0;
	left:0;
}

.close-site {
	width:40px;
	height:40px;
	background-image: url(/img/close.png);
	background-size:20px;
	background-position: center;
	background-repeat: no-repeat;
	opacity:.2;
	cursor: pointer;
	position: absolute;
	right:10px;
	top:10px;
}

.close-site:hover {
	opacity:1;
}

.notexpected-site {
	font-size:20px;
	cursor: pointer;
	display: inline-block;
	margin-bottom: -15px;
	color: #ccc;
}

.notexpected-site:hover {
	text-decoration: underline;
}



.save-from-site {
	font-size:20px;
	padding-top:10px;
	padding-bottom:10px;
	margin-right: 20px;
}

.site-iframe {
	background-color: white;
	border: none;
	width:100%;
	height:100%;
}

.site-wrapper-top {
	height: 52px;
	padding-top:8px;
	text-align: center;
	position:  absolute;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 2px rgba(0,0,0,.3);
	z-index:1;
}


@media screen and (max-width: 581px) {
	#index-wrapper {
		padding: 0 10px;
		width:calc(100% - 20px);
	}
	.anonymous {
		font-size:48px;
	}
	.texted  {
		font-size:32px;
		line-height:30px;
	}
	.explanation {
		display: none;
	}
	#about {
		text-align: center;
		font-size:16px;
		width:220px;
		top:10px;
		left:0;
		left:calc(50% - 110px);
	}
}

/* Device hints */

.device-hints {
	cursor: default;
	font-size:16px;
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	width: 480px;
	padding-left:calc(50% - 240px);
	text-align: center;
}

@media screen and (max-width: 581px) {
	.device-hints {
		width:100%;
		padding-left:0;
	}
}

.device-hints.over {
	margin-left:-200px;
	opacity:0;
}

.device-hints-header {
	font-size:48px;
	margin-bottom:40px;
	color: #444;
	font-weight:900;
	line-height:46px;
}

/* No-touch device hints */

#notouch-hints-space {
	font-weight: 900;
	padding:15px 0;
	width:60%;
	text-transform: uppercase;
	border: solid 1px #444;
	color: #444;
	border-radius:4px;
	margin: 10px auto;
}

@media screen and (max-width: 581px) {
	#notouch-hints-space {
		width:80%;
	}
}

/* Touch device hints */

#touch-hints-swipe {
	height:80px;
	width:80px;
	background-image:url(/img/swipe-left.png);
	background-size:100%;
	margin: 10px auto;
}


/* Submitted products */

.products-wrapper {
	padding-top:60px;
	height:calc(100% - 60px);
	background-color: white;
	width:100%;
	position: fixed;
	z-index:6;
	top:0;
	left:0;
}

.close-products {
	position: fixed;
	top:10px;
	right:10px;
	width:40px;
	height:40px;
	background-image: url(/img/close.png);
	background-size:20px;
	background-position: center;
	background-repeat: no-repeat;
	z-index:10;
	opacity:.2;
	cursor: pointer;
}

.close-products:hover {
	opacity:1;
}

.product{
	text-align: left;
}

.product {
	display: block;
	padding:20px;
	border-bottom: solid 1px #eee;
	padding-bottom:20px;
	text-decoration: none;
}

#products {
	width:100%;
	height:100%;
	overflow-y: auto;
}

#products-list {
	max-width:600px;
	margin: 0 auto;
	border-top: solid 1px #eee;
}

/* Users to follow */

.userstofollow-wrapper {
	margin-top:20px;
}

.userstofollow-text {
	font-size:12px;
	font-weight:900;
}

.userstofollow {
	text-align: center;
	margin-top:10px;
}

.usertofollow {
	width:60px;
	display: inline-block;
	margin:0 5px;
}

.usertofollow-img {
	width:100%;
	border-radius:4px;
}

.usertofollow-follow {
	width:50px;
	padding:5px;
	background-color: rgba(0,0,0,0.6);
	border-radius:4px;
	color: white;
	font-size:12px;
	font-weight:900;
	text-align: center;
	cursor: pointer;
}

.usertofollow-follow:hover {
	background-color: #222;
}

.usertofollow-following {
	width:50px;
	padding:5px;
	font-size:12px;
	text-align: center;
}


/* Would you like join */

#wouldyoulikejoin {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.7);
	display: table;
	z-index:40;
}

#wouldyoulikejoin-inner {
	display: table-cell;
	vertical-align: middle;
}

#wouldyoulikejoin-box {
	width:520px;
	height:320px;
	padding: 40px;
	border-radius:4px;
	background-color: white;
	margin: 0 auto;
}

#wouldyoulikejoin-h {
	text-align: center;
	font-size: 48px;
}

#wouldyoulikejoin-e {
	text-align: center;
	margin-top:20px;
}

#wouldyoulikejoin-f {
	text-align: center;
	font-weight: 700;
	margin-top:40px;
}

#wouldyoulikejoin-cta {
	margin-top:20px;
	text-align: center;
}

#wouldyoulikejoin-login {
	padding: 15px 20px;
	background-color: #0066cc;
	border-radius:4px;
	color: white;
	font-weight:900;
	display:inline-block;
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
}

#wouldyoulikejoin-no {
	padding: 15px 20px;
	border-radius:4px;
	display:inline-block;
	background-repeat: no-repeat;
	background-size:100%;
	cursor: pointer;
}

#wouldyoulikejoin-no:hover {
	text-decoration: underline;
}