/* uncompressed */

* {
  text-decoration: none;
}

a {
  cursor: hand;
}

.hide {
  display: none;
}

.show.video {
  display: block;
}

.opacityanimation {
  opacity: 0;
  -webkit-transition: 1s;
}

body {
  background: #231f20 url("../../images/bg.jpg") no-repeat;
  background-position: top center;
}

.site-wrapper {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.site-wrapper .site-ctnr {
  float: left;
  width: 100%;
}

nav {
	position: relative;
	z-index: 20;
  float: left;
  width: 100%;
  height: 36px;
}

nav h1 span {
  display: none;
}

nav h1 a {
  display: block;
  float: left;
  margin-left: 20px;
}

nav h1 img {
  float: left;
  width: 30px;
  height: 34px;
}

 #continue {
  display: block;
  float: right;
  height: 20px;
  width: auto;
  padding: 20px;
  font-family: 'georgia',"georgiaNeue-CondensedBold", "georgia Neue", serif;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}

 #continue a {
	color: #aa8f41;
	font-size: 12px;
	letter-spacing: 0px;

}

 #continue a:hover {
	color: #fff;
}

 #continue img {
  height: auto;
  width: 196px;
}

#fortune-wrapper {
  position: relative;
  float: left;
  width: 100%;
}

#fortune-wrapper #fortune-ctnr {
  position: relative;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}

#fortune-wrapper #fortune-ctnr #fortune-img {
  width: 100%;
  height: 500px;
}

#fortune-wrapper #fortune-ctnr #fortune-img .animation {
  position: absolute;
  left: 50%;
  margin-left: -245px;
  top: 0;
  height: 542px;
  width: 490px;
}

#fortune-wrapper #fortune-ctnr #fortune-img .animationstart {
  background-image: url(../../images/frames.png);
}

#fortune-wrapper #fortune-ctnr #fortune-img .animationmove {
  background-image: url(../../images/frames.png);
}

#fortune-wrapper #fortune-ctnr #fortune-img .animationinside {
  background-image: url(../../images/frames.png);
}

#fortune-wrapper #fortune-ctnr #fortune-img .animationreveal {
  background-image: url(../../images/frames.png);
}

#fortune-wrapper #fortune-ctnr #fortune-img img {
  float: none;
  position: relative;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  height: auto;
}

#fortune-wrapper #fortune-ctnr #fortune-img #fortune-revealed {
  width: 700px;
  margin-left: -380px;
}

#fortune-wrapper #fortune-ctnr #fortune-img #transition {
  width: 700px;
  margin: -100px 0 0 -400px;
}

#fortune-wrapper #fortune-ctnr #fortune-title {
  float: left;
  width: 100%;
  height: 80px;
}

#fortune-wrapper #fortune-ctnr #fortune-title img {
  float: left;
  height: 34px;
  width: auto;
}

#fortune-wrapper #fortune-ctnr #fortune-input {
  float: left;
  width: 100%;
  position: relative;
}

#fortune-title {
  opacity: 1;
}

.transition {
  background: url("../../images/fortune.gif") no-repeat;
  background-size: 60%;
  background-position: center 0px;
}

.fortune-revealed {
  background: url("../../images/fortune-revealed.gif") no-repeat;
  background-size: 60%;
  background-position: center 0px;
}

.fortune-revealed-static {
  background: url("../../images/fortune-revealed.png") no-repeat;
  background-size: 50%;
  background-position: center 0px;
}

#choice-ctnr {
  width: 100%;
  height: 400px;
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0;
}

#choice-ctnr a {
  display: block;
  float: left;
  width: 275px;
  height: 200px;
  text-indent: -999999px;
}

.input {
  width: 100%;
  margin: 0 auto;
  max-width: 370px;
  height: 50px;
  border: #959595 solid 1px;
}

.input p {
  color: #959595;
  font-family: georgia, sans-serif;
  text-align: center;
}

.cta {
  display: block;
  width: 130px;
  height: 41px;
  background: #aa8f41;
  color: #fff;
  text-align: center;
  font-family: georgia, sans-serif;
  line-height: 41px;
  margin: 20px auto 0 auto;
font-family: 'georgia',"georgiaNeue-CondensedBold", "georgia Neue", serif;
 text-transform:uppercase;
 font-size:15px; letter-spacing:0.6px;
}

.cta.play-again {
	background: transparent;
	outline: #fff solid 1px;
}

.cta.play-again:hover {
	background: #fff;
	color: #aa8f41;
}

.cta:hover {
  background: #957d39;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
.clearfix {
  display: block;
}

/* close commented backslash hack */


/* end uncompressed */

nav {
    float: none;
    height: auto;
    width: 100%;
    position:absolute;
    top:0;
}

#continue {position:absolute; top:0px; right:0; z-index: 999999;}

.site-wrapper {
    height:auto;
    max-height: 1200px;
    }


.animation {
    position: absolute;
    left: 50%;
    margin-left: -245px;
    top: -0px !important;
    height: 542px;
    width: 490px;
}

.animationstart {
    background-image: url('../../images/frames.png'); display:block; opacity:0.13;
}
.animationmove {
    background-image: url('../../images/frames.png'); display:none;
}
.animationinside {
    background-image: url('../../images/frames.png');  display:none;
}
#fortune-wrapper #fortune-ctnr #fortune-img .animation.animationreveal {
    width:900px;
    height:940px;
    margin-left:-450px;
    top:-188px !important;
    background-image: url('../../images/frames-large.png');
    display:none;
}

a.terms {position:fixed; z-index:333; bottom:10px; right:20px; font-family: "georgia Neue", georgia ,  serif; color:#fff; font-weight:normal; font-size:10px;   }
a.terms:hover {color:#aa8f41;}
#revealmessage  {position:absolute; z-index:99999; max-width:440px; width: 100%; margin-left:-220px;top:150px; left:50%;  display:none; color:white; text-align:center;}
#revealmessage h3 {font-family: 'georgia',"georgiaNeue-CondensedBold", "georgia Neue", serif; text-transform: uppercase;   font-size:26px; font-weight:normal; margin:45px auto 25px;  line-height: 31px;}
#revealmessage h4 {margin:0px;}

#revealmessage p {font-size:14px; margin-top:0;}
/*  Click Handlers */
#choice-ctnr {display:none;}
#choice-set-1 a  {position:absolute; cursor:pointer;}
#choice-set-1 a.simon {left:10%; height:55%; width:40%; top:5%;}
#choice-set-1 a.john {left:50%; height:55%; width:40%; top:5%;}
#choice-set-1 a.nick {left:10%; height:50%; width:40%; top:60%;}
#choice-set-1 a.roger {left:50%; height:50%; width:40%; top:60%;}

#choice-set-2 a,#choice-set-3 a {position:absolute; cursor:pointer;}
#choice-set-2 a#sequenceTwo { height: 33%;left: 50%;top: 37%;width: 26%; }
#choice-set-2 a#sequenceThree {height: 29%;left: 50%;top: 70%;width: 26%; }
#choice-set-2 a#sequenceSix { height: 29%;left: 22%;top: 70%;width: 27%; }
#choice-set-2 a#sequenceSeven {height: 33%;left: 22%;top: 37%;width: 27%; }

#choice-set-3 a#sequenceOne { height: 40%;left: 50%;top: 22%;width: 26%; }
#choice-set-3 a#sequenceFour {height: 36%;left: 47%;top: 63%;width: 26%; }
#choice-set-3 a#sequenceFive { height: 36%;left: 22%;top: 63%;width: 25%; }
#choice-set-3 a#sequenceEight {height: 40%;left: 22%;top: 22%;width: 27%; }


/* Data Capture */
.data_wrap {
	position: absolute;
	z-index: 9000;
	left: 50%;
	margin-left: -330px;
	margin-top: 130px;
	max-width:660px;
	width: 100%;
}

#social {
	padding: 22px 0;
	margin-bottom: 30px;
}

#social-ctnr {
	position: relative;
	left: 50%;
	margin-left: -60px;
	width: 120px;
	height: 30px;
	float: left;
}

#social-ctnr:before, #social-ctnr:after {
	content: "";
	position: absolute;
	top: 10px;
	width: 110px;
	height: 1px;
	background: #fff;
}

#social-ctnr:before {
	left: -150px;
}

#social-ctnr:after {
	right: -150px;
}

#social span {
	float: left;
	display: inline-block;
	width: auto;
	height: 20px;
	margin: 2px 20px 0 0;
}

#social a:hover {
	opacity: .6;
}

a#twitter, a#facebook {
	float: left;
	display: inline-block;
	width: 20px;
	height: 20px;
}

a#twitter {
	background: url('../../images/icon-twitter.svg') no-repeat;
	background-size: contain;
	margin: 2px 10px 0 0;
	height: 17px;
}

a#facebook {
	background: url('../../images/icon-facebook.svg') no-repeat;
	background-size: contain;
}



.socials {clear:both;background:url('../../images/socialpng.png') no-repeat; background-size:119px; width:119px; height:26px; position:fixed; left:0; bottom:0;text-indent:-999999px; text-align:left;display:block; margin:6px; }
.socials a {position:relative; display:block;   width:23px; height:25px; opacity:0.3; float:left;  }
@media (max-width: 600px) {

a.terms {position:static; clear:both;z-index:333;   font-family:  "georgia Neue", georgia, serif; color:#fffff; font-weight:normal;  text-align:center; display:none; margin-bottom:12px;}

nav h1 a {
    display:block;
    float: none;
    margin-left: auto;
    margin:10px auto;
    text-align:center;

}

.socials {margin:45px auto 15px; position:relative;}
h1 {
    font-size: 14px;
    margin: 20px auto 0;
}
nav h1 img {float:none;}
  #continue {clear:both;float:none; position:static; height:auto; padding:0px 20px 3px;  width:auto; margin:0px 12% 2px;  display:none;text-align:center;}


#fortune-wrapper #fortune-ctnr {position:absolute;}
	#choice-ctnr {
		height: 250px;
		top: 80px;
	}

	 #continue a {
		color: #aa8f41;
		font-size: 18px;
		letter-spacing: 0px;
		margin-top: 10px;
	}

	.data_wrap {
		position: relative;
		z-index: 9000;
		float: left;
		left: auto;
		margin-left: auto;
		margin-top: 80px;
		max-width:660px;
		width: 100%;
	}

	#fortune-wrapper #fortune-ctnr #fortune-img .animation {
	    margin: 80px 0 0 -160px;
	    height: 352px;
	    width: 320px;
	}
	#fortune-wrapper #fortune-ctnr #fortune-img .animation.animationstart {
	    background-image: url('../../images/frames-mobile-test.png'); display:block; opacity:0.13;
	}
	#fortune-wrapper #fortune-ctnr #fortune-img .animation.animationmove {
	    background-image: url('../../images/frames-mobile-test.png'); display:none;
	}

	#revealmessage {
		margin-left: -150px;
		width: 300px;
		top: 80px;
	}

	#revealmessage h3 {
		font-size: 24px;
		line-height: 24px;
		font-family: georgia ,"georgiaNeue-CondensedBold", "georgia Neue", serif;
	}

#fortune-wrapper #fortune-ctnr {margin-top:0;}
	#fortune-wrapper #fortune-ctnr #fortune-img {
		overflow: hidden;
		position: relative;
		top: -20px; height:389px ;
		margin-bottom:-20px;
	}


	#fortune-wrapper #fortune-ctnr #fortune-img .animation.animationreveal {
	    width:588px;
	    height:614px;
	    margin-left:-294px;
	    top:-148px !important;
	    background-image: url('../../images/frames-large-mobile.png');
	}

	#social-ctnr:before, #social-ctnr:after {
		width: 40px;
	}

	#social-ctnr:before {
		left: -60px;
	}

	#social-ctnr:after {
		right: -60px;
	}

}