body, html { height:100%; }
.screensize { background: url('../img/background.jpg') no-repeat center; background-size: cover; color:#FFFFFF; }
#content { min-width: 722px; max-width: 1300px; min-height: 950px; height: 100%; margin: 0 auto; padding: 45px 0 0; }
.column { display: inline-block; float: left; }
.two-col { max-width: 740px; margin:0 auto; }
.two-col .column { width:50%; position: relative; height:405px; }

.column h2, .column h3 { text-align: center; margin:0; }
.column h2.white { font-family: Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; font-size: 22px; font-weight: 100; color:#FFFFFF; }
.column h2.yellow { font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 200; color:#F8DE12; }
.column h3.white { font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; color:#FFFFFF; font-weight: 100; font-size:15px; }
#instruction { margin-top: 35px; position: relative; }
#instruction:before { content: ' '; position: absolute; padding: 38px; top: -22px; left: 4px; background: url('../img/arrow.png') no-repeat center; background-size: 100%; }

.start { background: #F8DE12; display: block; position: relative; text-decoration: none; color: #000000; font-size: 24px; margin: 35px auto 0; width: 200px; padding: 10px 0; border-radius: 10px; }
.start span { padding-left: 65px; }
.start span:before { content: ' '; position: absolute; padding: 32px; left: 6px; top: -7px; background: url('../img/key.png') no-repeat center; background-size: 100%; }

.social { margin: 20px auto 0; padding: 0; position: relative; max-width: 312px; }
.social li { display: inline-block; float: left; width:33%; position: relative; }

.social li:hover:after { display: block; }

.social li:after { content:' '; position: absolute; top:100%; left:50%; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,0.4); display: none; }

.social li a { background-position: center; background-repeat: no-repeat; background-size: 100%; padding:25px; max-width: 25px; display: block; margin:0 auto; position: relative; }

.social li:hover a:after { display: block; }

.social li a:after { display: none; color:#FFFFFF; position: absolute; top:112%; left:0; width:100%; text-align: center; background: rgba(0,0,0,0.4); padding:3px 0; border-radius: 5px; font-size: 12px; }

.social li a.facebook { background-image: url('../img/facebook.png'); }
.social li a.facebook:after { content: 'share'; }
.social li a.twitter { background-image: url('../img/twitter.png'); }
.social li a.twitter:after { content: 'tweet'; }
.social li a.google { background-image: url('../img/googleplus.png'); }
.social li a.google:after { content: 'share'; }
.social li a.linked { background-image: url('../img/linkedin.png'); }
.social li a.linked:after { content: 'connect'; }

.links { max-width: 500px; margin:35px auto 0; padding:0 0 50px; }
.links a { display: inline-block; float:left; width:50%; }
.links a img { display: block; width:80%; margin:0 auto; }
/*#napkin { position: absolute; width: 400px; height: 400px; top: 215px; left: 90px; background: url('../img/napkin.png') no-repeat center; background-size: 100%; }*/

#mug-highlight { height: 470px; width: 421px; top: -33px; margin: 0 auto; background: url('../img/highlights-only.png') no-repeat center; background-size: 100%; position: absolute; pointer-events:none; }

#mug-bg { height: 470px; width: 421px; top: -33px; margin: 0 auto; background: url('../img/mug-bg.png') no-repeat center; background-size: 100%; position: absolute; }
.slider-mask { position: absolute; left: 100px; top: -17px; height: 334px; width: 192px; overflow: hidden; }
#slider { height: 196px; width: 192px; position: absolute; bottom: 54px; left: 0; }
#slider .ui-slider-handle { width:100%; position: absolute; }

#slider .ui-slider-handle:before { content: ' '; height: 106px; width: 100%; position: absolute; top: -86px; background: url('../img/foam.png') no-repeat center top; }

#slider .ui-slider-handle:after { content: " "; height: 267px; width: 100%; position: absolute; top: 100%; background: url('../img/beer.png') no-repeat center top; }

#amount { position: absolute; top: 20px; right: 0px; color: orange; background: transparent; font-size: 15px; border: none; width: 30px; }

.rehab img { padding: 8px 0 0; }