/*
Lily in the Grinder player
*/

html { }

body { font-family: 'UniversLTStd-UltraCn', sans-serif; letter-spacing: .015em; overflow: hidden; }

a { color: #e5e5e5; text-decoration: none; cursor: pointer;}

.ifembedded {
	display:none;
}

#playerbody {
	overflow: hidden;
	color: #e5e5e5;
	border: 1px solid #333;
	border-radius: 20px;
	width: 800px;
	height: 400px;
	background: url(https://s3.amazonaws.com/lilysite/images/player_bg-large.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	text-align: center;
	transform-origin: top left;
	-webkit-transform-origin: top left;
}

#mainfilmcontainer, #concertfilmcontainer {display: none; color:#ccc; text-align:center; font-size:18px;}
#mainfilmcontainer a, #concertfilmcontainer a { color:#ccc; line-height: 160%; text-decoration:underline; }

#playerbody.chooseversion {
	background: url(https://s3.amazonaws.com/lilysite/images/eyes.jpg);
	background-size: cover;
	background-position: center;
}

.chooseversion .btn {
	padding: 0 20px;
	width: 250px;
	height: 190px;
	top: 150px;
}

#mainfilm {
	left: 74px;
}

.chooseversion h2 {
	font-size: 38px;
}

.chooseversion .ifnotembedded h2 {
	margin-top: 33px;
}

.chooseversion .ifnotembedded p {
	margin-top: 6px;
}

#mainfilm h2 {
	/* margin-top: 35px; */
}

.chooseversion h3 {
	margin-top: 0;
	font-size: 24px;
	line-height: 130%;
}

.chooseversion p {
	margin-top: 6px;
	line-height: 117%;
	font-size: 16px;
	text-align: left;
	letter-spacing: .35px;
}

.fbwatchbuttons h2 {
	margin-top: 20px !important;
}

h3 {
	margin-bottom: -4px !important;
}

#altfilm {
	right: 74px;
}

#bottomtext { color:#ccc; text-align:center; font-size:18px; }
#bottomtext a { color:#ccc; line-height: 160%; text-decoration:underline; }

#trailerbottomtext { color:#ccc; text-align:center; font-size:22px; }
#trailerbottomtext a { color:#ccc; line-height: 160%; }

#facebookshare { display:none; }

#filmplayercontainer { display: none; position: absolute; height: 100%; width: 100%; }

h1 {
	font-size: 44px;
	margin-top: 12px;
	display:none
	
}

h1.ifembedded {
text-shadow: 3px 3px 3px rgba(40,40,40,.5);
margin-top: 25px;
color: #efefef;
}

h5 {
text-shadow: 3px 3px 3px rgba(40,40,40,.5);
margin-top: 20px;
color: #efefef;
font-size: 35px;
}

h6 {
text-shadow: 2px 2px 3px rgba(20,20,20,1), 0px 0px 1px rgba(40,40,40,.7);
margin-top: 295px;
color: #efefef;
font-size: 20px;
}


sup {
	font-size: 50%;
	vertical-align: top;
}

#initialscreen .isembedded.btn {
	top: 86px;
}

.isembedded.btn {
	top: 134px;
}

.btn {
	width:238px;
	height:212px;
	background: url(https://s3.amazonaws.com/lilysite/images/dark_bg.png);
	border: 1px solid #afafaf;
	border-radius: 50px/45px;
	position: absolute;
	top: 60px;
	box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, .2);
	cursor: pointer;
	rgba(40,40,40,.9);
}

.btn div {
	text-align: left;
	margin: 0 28px;
	font-size: 17px;
	line-height: 118%;

}

/* #paid, #paid a {
	color: #888;
} */

.btn:hover {
	background: rgba(40,40,40,.84);
}

.btn:hover h2, .btn:hover h3 {
	color: #fcfae6;
}

#paid {
	left: 60px;
/*	cursor: default; */
}

#free {
	right: 60px;
}

h2 {
	font-size: 86px;
	margin-top: 20px;
}

#free h2 {
	font-size: 62px;
	margin-top: 27px;
}

#paid h2 {
	margin-right: 11px;
}

#paid h2 img {
	position: absolute;
	width: 34px;
	right: 17px;
	top: 16px;
	opacity: .3;
}

#free h2 img {
	position: absolute;
	width: 28px;
	top: 22px;
	right: 18px;
	opacity: .4;
}

#shareonfb h2 {
	margin-top: 16px;
}

h3 {
	font-size: 18px;
	margin-top: -5px;
}

#free div {
	margin-top: 16px;
}

#facebookshare div {
	text-align: left;
	margin: 10px 30px 20px;
	font-size: 20px;
	line-height: 120%;
}

#shareonfb.btn {
top: 10%;
width: 65%;
right: 17.5%;
height: auto;
}

#shareonfb img {
float: right;
margin: 0 0 5px 5px;
}

#facebookshare #back {
position: absolute;
left: 0;
bottom: 0;
font-size: 28px;
padding: 24px 20px;
}

#facebookshare h2 {
	font-size: 60px;
}

#facebookshare div p {
margin-bottom: 6px;
}

#bottomlinks, #helptext {
	position: absolute;
	bottom: 19px;
	width: 100%;
	font-size: 19px;
	text-align: center;
	line-height: 300%;
}

#helptext {
	display: none;
	line-height: 100%;
}

.chooseversion #bottomlinks {
	text-align: right;
	right: 28px;
	bottom: 11px;
}
	
#trailercontainer {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

#embedsharelinks {
	display: none;
	background-color: rgba(200,200,200,.6);
	width: 30px;
	right: 0;
	position: absolute;
	border-top-right-radius: 20px;
	overflow: visible;
	top: 0;
}

#embedsharelinks a div {
	display:none;
	position: absolute;
	right: 30px;
	background-color: rgba(200,200,200,.6);
	padding: 2px 5px 0 6px;
	font-size: 18px;
	line-height: 22px;
	bottom: 0;
}

#embedsharelinks a {
	display: block;
	padding-top: 2px;
}

#embedsharelinks a:first-of-type {
	padding-top: 8px;
}

#embedinstructions {
	background-color: rgba(200,200,200,.8);
	width: 400px;
	margin: 0 auto;
	border-radius: 10px;
	margin-top: 100px;
	padding: 10px 14px;
	color: black;
	border: 1px dotted black;
	text-align: left;
	position: relative;
	display: none;
}

#embedinstructions h3 {
	text-align: left;
	font-size: 26px;
	font-weight: bold;
	color: #111;
}

.chooseversion p {
	margin-top: 6px;
	line-height: 117%;
	font-size: 16px;
	text-align: left;
	letter-spacing: .35px;
}

.embedbuttons {
	width: 400px;
	margin: 10px 0;
	text-align: center;
}

a.embedbutton {
	color: black;
	border: 1px #333 outset;
	border-radius: 5px;
	background-color: rgba(140,140,140,.9);
	font-size: 18px;
	width: 102px;
	height: 50px;
	margin-right:10px;
	display: inline-block;
	vertical-align: middle;
}

a.embedbutton#second {
	margin-right: 0;
	width: 76px;
	height: 38px;
}

.embedbutton div {
font-size: 60%;
line-height: 120%;
}

#embedcode {
	margin: 4px auto 2px;
	width: 393px;
	font-size: 9px;
	height: 26px;
	resize: none;
}

.embedbutton span {
	margin-top: 9px;
	display: block;
}

.embedbutton#second span {
	margin-top: 4px;
	display: block;
}

.embedbutton:hover {
	background-color: rgba(200,200,200,.9);
}

.embedbutton.buttonselected {
	background-color: rgba(180,180,180,.9);
}

a#closeembed {
	color: black;
	position: absolute;
	top: -18px;
	right: -12px;
	padding: 20px;
	font-size: 22px;
}

.onmobile {
display: none;
}

.btn.onmobile, .btn.onmobile:hover h2 {
	color: #ccc !important;
	cursor: default;
	
}