@charset "UTF-8";

@font-face { font-family: Hemisphers Bold Sans; src: url(/fonts/Hemisphers\ Bold\ Sans.otf) } 

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	-webkit-tap-highlight-color: transparent;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

button {
	border: 0px;
}

:focus { outline: none !important;}

html{
	scroll-behavior: smooth;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

h1 {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 3px;
	font-size: 55px;
}

h2 {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	text-align: left;
	font-size: 29px;
	line-height: 32px;
	letter-spacing: 0.8px;
}

h3 {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	text-align: left;
	font-size: 29px;
	line-height: 32px;
	color: #FFFFFF;
	letter-spacing: 1px;
}

h4{
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	text-align: left;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 900;
	font-size: 14px;
}

h5{
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 29px;
	text-align: center;
}

body {
	background-color: #12D5FF;
	width:100%;
    height:100%;
}


.wrapper {
	padding: 32px;
  }
  
  .cookie-container {
	position: fixed;
	bottom: -100%;
	left: 30px;
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 25px;
	padding-top: 0px;
	width: 300px;
	box-shadow: 0 0px 20px #00000029;
}
  
  .cookie-container.active {
	bottom: 30px;
  }
  
  .cookie-btn {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	background-color: #12D5FF;
	border: 0ch;
	border-radius: 5px;
	padding-top: 4px;
	font-size: 17px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 900;
	margin-top: 10px;
	margin-right: 0.5%;
	letter-spacing: 0.5px;
}

.cookie-btn:hover {
	background-color: #12d4ffab;
}

u {    
    border-bottom: 2.5px dotted #000;
    text-decoration: none;
	display: inline-block;
	padding-bottom: 3px;
	line-height: 15px;
}

.body_w {
	background-color: #FFFFFF;
}

.instructions {
	height: 45px;
	width: 45px;
	border-radius: 100px;
	margin-left: 5px;
}

.instructions:hover {
opacity: 0.5;
}


.history {
	height: 45px;
	width: 45px;
	border-radius: 100px;
}

.history:hover {
opacity: 0.5;
}



.twitter {
	height: 45px;
	width: 45px;
	border-radius: 100px;
}

.twitter:hover {
	opacity: 0.5;
}

.logo {
	margin-left: 25%; 
	margin-right: 25%; 
	margin-top: 270px;
}


.instagram{
	height: 45px;
	width: 45px;
	border-radius: 100px;
	margin-top: 10px;
}

.instagram:hover{
	opacity: 0.5;
}


.start {
	margin-top: 130px;
	padding-left: 17px;
	padding-right: 17px;
	padding-top: 8px;
	letter-spacing: 1px;

	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #12D5FF;
	background-color: #FFFFFF;
	border: 0px;
	border-radius: 100px;
	padding-top: 6px;
	font-size: 29px;
	text-align: center
}

.start:hover {
	background-color: #ffffff7e;
	color: #FFFFFF;
}


.buttons_w {
	position: absolute;
	right: 30px;
	top: 30px;
}

.x{
	height: 45px;
	width: 45px;
	right: 30px;
	top: 30px;
	cursor: pointer;
}

.x:hover{
	content: url(/images/x_wH.svg);
}

.buttonplay {
	font-size: 40px;
}




a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
	cursor: pointer;
}

.history_b {
	height: 45px;
	width: 45px;
	cursor: pointer;
}

.history_b:hover {
	opacity: 0.5;
}

.instructions_b {
	height: 45px;
	width: 45px;
	margin-left: 5px;
	cursor: pointer;
}

.instructions_b:hover {
	opacity: 0.5;
}

.home{
	height: 45px;
	width: 45px;
	cursor: pointer;	
}

.home:hover {
	opacity: 0.5;
}


.home_b{
	height: 45px;
	width: 45px;
	border-radius: 100px;
}

.home_b:hover {
	opacity: 0.5;
}


.alignleft {
	position: absolute;
	left: 30px;
	top: 30px;
}

.gamebutton {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	background-color: #12D5FF;
	border: 0ch;
	border-radius: 10px;
	padding-top: 6px;
	font-size: 29px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 900;
	letter-spacing: 1px;
}

.gamebutton:hover {
	color: #FFFFFF;
	background-color: #12d4ffab;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 900;
}

.gamebutton2 {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #12D5FF;
	background-color: #FFFFFF;
	border: 2px;
	border-style: solid;
	border-radius: 10px;
	padding-top: 6px;
	font-size: 29px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 900;
	letter-spacing: 1px;
}

.gamebutton2:hover {
	color: #12d4ffab;
}

.tinybutton {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	background-color: #12D5FF;
	border: 0ch;
	border-radius: 5px;
	padding-top: 3px;
	font-size: 17px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 900;
	margin-top: 10px;
	pointer-events: none;
}

.tinybutton:hover {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	background-color: #12D5FF;
	border: 0ch;
	border-radius: 5px;
	padding-top: 3px;
	font-size: 17px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 900;
	margin-top: 10px;
	pointer-events: none;
}

p{
	font-family: "Hemisphers Bold Sans";
	font-size: 29px;
	text-align: center;
}

.montserrat{
	padding-top: 0px;
}

.montserrat:hover {
	padding-top: 0px;
}


.question {
	position:relative;
	margin-left: -122px;
	letter-spacing: 0.5px;

	margin-top: 90px;
}


.fillin {
	border: 2px;
	border-style: dashed;
	border-color: #707070;
	width: 122px;
	height: 33px;
	border-radius: 10px;
	display: inline-block;

	position: absolute;
	top: -7px;
	margin-left: 10px;
}

.secondfillin {
	border: 2px;
	border-style: dashed;
	border-color: #707070;
	width: 122px;
	height: 33px;
	border-radius: 10px;
	display: inline-block;

	position: absolute;
	top: -7px;
	margin-left: 10px;
	margin-top: 50px;
}

.secondfillinSAM {
	border: 2px;
	border-style: dashed;
	border-color: #707070;
	width: 122px;
	height: 33px;
	border-radius: 10px;
	display: inline-block;

	position: absolute;
	top: -7px;
	margin-left: 10px;
	margin-top: 50px;
}



.linetwo {
	margin-top: 50px;
}

.gamebuttonhidden {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	color: #FFFFFF;
	background-color: #12D5FF;
	border: 0ch;
	border-radius: 10px;
	padding-top: 6px;
	font-size: 29px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 900;
	letter-spacing: 1px;

	position: absolute;
	top: -7px;
	margin-left: 10px;
	display: none;
}





.text{
	font-family:'Montserrat', sans-serif;
	font-size: 18px;
	text-align: left;
	font-weight: 400;
	line-height: 28.5px;
	letter-spacing: normal;
	hyphens: auto;
}

.text2{
	font-family:'Montserrat', sans-serif;
	font-size: 18px;
	text-align: left;
	font-weight: 400;
	line-height: 28.5px;
	letter-spacing: normal;
	hyphens: auto;
}

.text_w{
	font-family:'Montserrat', sans-serif;
	font-size: 18px;
	text-align: left;
	font-weight: 400;
	line-height: 28.5px;
	color: #FFFFFF;
	hyphens: auto;
}

.source{
		font-family:'Montserrat', sans-serif;
		font-size: 18px;
		text-align: left;
		font-weight: 400;
		line-height: 28.5px;
		color: #FFFFFF;
}

.source:hover {
	opacity: 0.75;
}

.domsub{
	padding-top: 25px;
}

.background {
	height: 100%; 
	width: 100%; 
	background-color: #000000; 
	opacity: 0.3; 
	position: fixed; 
	top: 0; 
	left: 0;

	display: none;
}

.background2 {
	height: 100%; 
	width: 100%; 
	background-color: #000000; 
	opacity: 0.3; 
	top: 0; 
	left: 0;
	position: fixed;

	display: none;
}



.sm2 {
	border: #FFFFFF;
	border-style: solid;
	border-radius: 40px;
	border-width: 34px;
	background-color: #000000;
	margin: 30px;
	margin-left: 22px;
	margin-right: 22px;
	text-align: center;
	position: fixed;
	display: none;
	top: 78px;
}

.sm3 {
	margin: 30px;
	height: 292px;
}





.backgroundpopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 120vh;
    background-color: #000000; /* Start with a fully transparent background */
    opacity: 0; /* Initially hidden */
    animation: fadeIn 0.5s forwards; /* Apply fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.5; /* Change opacity to desired level */
    }
}


.popupbox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    animation: slideInFromBottomAnimation 2s ease forwards;
    animation-delay: 0s;
}

@keyframes slideInFromBottomAnimation {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideOutToBottomAnimation {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}




.xx {
	height: 45px;
	width: 45px;

	top: 30px;
	right: 30px;

	position: fixed;
	cursor: pointer;
	display: none;
}

.xx:hover{
	content: url(/images/x_wH.svg);
}

.instructions_arrowR {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	height: 92px;
	width: 92px;
	text-align: center;
	border-radius: 10px;
	font-weight: 900;
	font-size: 14px;
	margin-right: 12px;

}



.instructions_arrowR:hover {
	background-color: #000000ab;
}

.instructions_arrowL {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	height: 92px;
	width: 92px;
	background-color: #000000;
	text-align: center;
	border-radius: 10px;
	font-weight: 900;
	font-size: 14px;
	margin-left: 12px;

}

.instructions_arrowL:hover {
	background-color: #000000ab;
}



.instructionsButton {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	height: 110px;
	width: 110px;
	background-color: #000000;
	color: #FFFFFF;
	text-align: left;
	font-weight: 900;
	font-size: 14px;
	border-radius: 10px;

	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 78px;
	padding-right: 46.5px;
	letter-spacing: 0.5px;

	margin-bottom: 15px;
	margin-left: 15px;
}

.IBL {
	margin-left: 0px;
}

.instructionsButton:hover {
 opacity: 0.75;
}

.topbutton{
	margin-top: 30px;
}

.montserratButton{
	padding-top: 0px;
}




div.center {
	text-align: center;
}





.box {
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 25px;
	padding-top: 7px;
	margin: 30px;
	margin-left: 15px;
}

.boxindex {
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 25px;
	padding-top: 25px;
	margin: 30px;
	margin-left: 22px;
}

.topbox {
	margin-top: 100px;
}

.instructionsbox {
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 25px;
	padding-top: 7px;
	margin: 30px;
	margin-left: 22px;
	margin-top: 100px;

	height: 420px;
	padding: 0px;
}


.finishedbox {
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 25px;
	padding-top: 0px;
	margin: 30px;
	margin-left: 22px;


	margin-top: 100px;

}



.grindr {
	margin-bottom: 50px;
	margin-top: 50px;
}



.hank {
 	margin-top: 170px;
	margin-bottom: 40px;
	margin-right: -50px;
}

.hank2 {
	margin-top: 170px;
   margin-bottom: 90px;
   margin-right: -50px;
}



.wrong{
	top: 45%;
	left: 50%;
	position: fixed;
	transform: translate(-50%, -50%);
	display: none;
}

 
.video_overlay{
	position: absolute;
	right: 0px;
}


.gamebuttonsquare {
	height: 70px;
	width: 70px;
	border-radius: 10px;
	display:inline-block;
	cursor: pointer;
}

.gamebuttonsquare:hover {
	opacity: 0.5;
}

.instructions_arrow2 {
	height: 70px;
	width: 70px;
	background-color: #000000;
	text-align: center;
	border-radius: 10px;
	font-weight: 900;
	font-size: 14px;
}

.instructions_arrow2:hover {
	opacity: 0.5;
}


.instructions_arrow3 {
	background-color:#12D5FF ;
	height: 40px;
	width: 40px;
	text-align: center;
	border-radius: 10px;

	display: inline-block;
	position: absolute;
	top: -9px;
	margin-left: 269px
}

.instructions_arrow4 {
	background-color:#12D5FF ;
	height: 40px;
	width: 40px;
	text-align: center;
	border-radius: 10px;

	display: inline-block;
	position: absolute;
	top: -9px;
	margin-left: 269px
}

.instructions_arrow3:hover {
	background-color: #ED1C24;
}

.instructions_arrow4:hover {
	background-color: #ED1C24;
}






input {
	border-radius: 10px;
	border-color: #000000ab;
	border-width: 2px;
	border-style: solid;
	padding-left: 7px;
	padding-top: 6px;
	font-size: 29px;
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	font-weight: 900;
	color: #12D5FF;
	
	width: 140px;
	display: inline-block;
	position: absolute;
	top: -9px;
	margin-left: 100px;
	text-transform:lowercase;
}

.input2 {
	border-radius: 10px;
	border-style: solid;
	border-color: #000000ab;
	border-width: 2px;
	padding-left: 7px;
	padding-top: 6px;
	font-size: 29px;
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	font-weight: 900;
	color: #12D5FF;
	
	width: 140px;
	display: inline-block;
	position: absolute;
	top: 48px;
	margin-left: 10px;
	text-transform:lowercase;
}



.responsive {
	display: inline;
}

.wink {
	width: 400px;
	position:  absolute; 
	bottom: 0px;
	margin-left: 32%;
}



.wink2 {
	width: 400px;
	position:  absolute; 
	bottom: 0px;
	margin-left: 32%;
}

.centerfooter {
	text-align: left;
}

.brhidden {
	display: none;
}

.q2line {
	margin-top: -10px;
}

.q3line {
	margin-top: 55px;
}

.q4line {
	margin-top: 37px;
}

.q5line {
	margin-top: 37px;
}

.h5questionone {
	margin-top: -20px;
}

.doubleanswer{
	margin-left: 145px;
}

.input1 {
	display: auto;
}

.historyvideo {
	width: 311;
	height: 311;
}



#lottie{
	display:block;
	transform: translate3d(0,0,0);
	text-align: center;
	opacity: 1;
	width: 60px;
	height: 120px;

	position: absolute;
	right: 24px;
	top: 85px
}

.usefulresourcesh2 {
	margin-top: 60px;
}

.marginbottom60 {
	margin-bottom: 60px
}

#instructionscircle {
	width: 50%;
	padding-bottom: 5%; 
	padding-top: 5%;
	padding-left: 25%;
} 

#placeholder {
	width: 50%;
	padding-bottom: 5%; 
	padding-top: 5%;
	padding-left: 25%;
	padding-bottom: 6%;


	display: none;
}

.inputmobiletext {
	margin-left: -240px;
}

.inputmobile {
	margin-left: 105px;
}

#hank {
	width: 65%;
	margin-top: 170px;
	margin-left: 20%;
}

.SAMSAM {
	margin-left: 145px;
}

.SAMFISTING {
	margin-left: 145px;
}

#sanimation {
	position: fixed;
	bottom: -60px;
	right: -20px;
	width: 20%;
	transition: transform .3s ease-out;
	cursor: pointer;
}

.globe {
	width: 20px;
	position: absolute;
	right: 15px;
	bottom: 15px;
	cursor: pointer;
}

#hiddenimageid {
	cursor: pointer;
}











































@media (max-width:599px)  {

	.logo {
		margin-left: 10%; 
		margin-right: 10%; 
		margin-top: 70%;

	}


.buttonplay {
	font-size: 30px;
}


	.cookie-container {
		position: fixed;
		bottom: -100%;
		left: 8%;
		right: 8%;
		background-color: #FFFFFF;
		border-radius: 40px;
		padding: 25px;
		padding-top: 0px;
		width: auto;
	}

	.cookie-container.active {
		bottom: 4%;
	  }

	a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
		cursor: default;
	}
	
	.history_b {
		cursor: default;
	}
	
	
	.instructions_b {
		cursor: default;
	}
	
	.home{
		cursor: default;
	}

	.xx {
		cursor: default;
	}

	.gamebuttonsquare {
		cursor: default;
	}

	#hiddenimageid {
		cursor: default;
	}
	
	.x{
		cursor: default;
	}

	.tinybutton {
		padding-top: 4px;
	}

	.instructions_arrowR {
		height: 80px;
		width: 80px;

		margin-right: 20px;
	}

	.instructions_arrowL {
		height: 80px;
		width: 80px;

		margin-left: 20px;
	}

	.question {
		margin-top: 0px;
	}

	.h5questionone {
		margin-top: 20px;
	}

	#hank {
		width: 95%;
		margin-left: 6%;
		margin-top: 25%;
	}

	.inputmobiletext {
		margin-left: -170px;
	}

	.inputmobile{
	font-size: 26px;
	width: 90px;
	display: inline-block;
	position: absolute;
	top: -9px;
	margin-left: 95px;
	text-transform:lowercase;
	}

	.instructions_arrow3 {
	display: inline-block;
	position: absolute;
	top: -11px;
	margin-left: 207px;
	}

	.instructions_arrow4 {
		display: inline-block;
		position: absolute;
		top: 40.5px;
		margin-left: 198px;
	}
	

	

	.start {
		margin-top: 102px;
	}
	

	#lottie{
		right: 11px;
		top: 83px;
		width: 55px;
	}

	.finishedfooter {
		margin-top: 232px;
	}

	.input1 {
		display: none;
	}

	.input3 {
		display: auto;
	}
	

	#together {
		width: 330px;
	}

	body {
		overflow-x: hidden;
	}

	.wink {
		width: 250px;
		bottom: -1020px;
	}

	.wink2 {
		width: 250px;
		bottom: -1000px;
	}

	.buttons_w {
		position: absolute;
		right: 15px;
		top: 30px;
	}


	.hank {
		margin-top: 20%;
	   margin-bottom: 45px;
	   margin-right: -30px;
   }
   
   .hank2 {
	   margin-top: 20%;
	  margin-bottom: 45px;
	  margin-right: -30px;
   }

   h5{
	font-size: 26px;
	}


   .gamebutton {
	font-size: 25px;
	}

	.gamebutton2 {
		font-size: 25px;
	}


	.fillin {
	height: 30px;
	top: -9px;
	}

	.secondfillin {
		height: 30px;
		top: -9px;
		margin-top: 45px;
	}

	.secondfillinSAM {
		height: 30px;
		top: -9px;
		margin-top: 45px;
		width: 105px;
	}

	.SAMSAM {
		margin-left: 130px;
	}

	.SAMQQ {
		margin-left: -20px;
	}

	.SAMFISTING {
		margin-left: 130px;
	}

	.linetwo {
		margin-top: 45px;
	}


	.gamebuttonhidden {
	font-size: 26px;
	}

	#video {
		width: 340px;
		margin-left: -10px;
	}

	#video2 {
		width: 340px;
		margin-left: -10px;
	}

	#video3 {
		width: 340px;
		margin-left: -10px;
	}

	#video4 {
		width: 340px;
		margin-left: -10px;
	}

	.instructionsButton {
	font-family: "Hemisphers Bold Sans",'Montserrat', sans-serif;
	background-color: #000000;
	color: #FFFFFF;
	text-align: left;
	font-weight: 900;
	font-size: 14px;
	border-radius: 10px;

	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 78px;
	padding-right: 49.5px;
	letter-spacing: 0.5px;

	height: 85px;
	width: 85px;
	margin-bottom: 10px;
	margin-left: 7px;
	font-size: 13px;
	}

	.IBL {
		margin-left: -0px;
	}

	.montserratButton{
		height: 85px;
		padding-top: 5px;
	}

	.instructionsbox {
		padding-top: 7px;
		margin: 30px;
		margin-left: 22px;
		margin-top: 100px;
		height: 295px;
		padding-bottom: 20px;
	}

	.topbutton{
		margin-top: 15px;
	}

	.sm2 {
		border: #FFFFFF;
		border-style: solid;
		border-radius: 40px;
		border-width: 24px;
		background-color: #000000;
		margin: 30px;
		margin-left: 22px;
		margin-right: 30px;
		text-align: center;
		position: fixed;
		display: none;
		top: 78px;
	}

	.sm3 {
		margin: 15px;
		height: 230px;
	}

	h3 {
		font-size: 29px;
		line-height: 0px;
	}

	.xx {
		right: 23px;
	}


	.text_w{
	font-size: 16px;
	line-height: 26px;
	}

	.q2line {
		margin-top: -15px;
	}

	.q3line {
		margin-top: 40px;
	}

	.q4line {
		margin-top: 25px;
	}

	.q4line {
		margin-top: 25px;
	}

	.q5line {
		margin-top: 40px;
	}

	input {
		font-size: 26px;		
		width: 142px;
	}

	.input2 {
		font-size: 26px;	
		width: 142px;
	}

	.text{
		font-size: 16px;
		line-height: 26.5px;
	}
	
	.text2{
		font-size: 16px;
		line-height: 26.5px;
	}
	
	.text_w{
		font-size: 16px;
		line-height: 26.5px;
	}
	
	.source{
		font-size: 16px;
		line-height: 0px;
	}

	#instructionscircle {
		width: 80%;
		padding-left: 10%;
	}

	#placeholder {
		width: 80%;
		padding-left: 10%;
		padding-bottom: 18px;
	}

	#sanimation {
		width: 45%;
		right: -13px;

		position: fixed;
		bottom: -52px;
		cursor: default;
	}


	#uslottie {
		width: 100%;
		margin-left: 3%;
	}

	.globe {
		width: 15px;
		position: absolute;
		right: 15px;
		bottom: 15px;
		cursor: default;
	}
	
}




video::-internal-media-controls-overlay-cast-button {
    display: none;
}






@media only screen and (min-width: 600px) {

	#sanimation {
		bottom: -45px;

	}

	#sanimation:hover {
		transform: translate(0, -10px);
	}


	#hank {
		width: 70%;
		margin-left: 19%;
	}

	#phonelottie {
		width: 70%;
		margin-left: 15%;
	}

	#hankandcodylottie {
		width: 70%;
		margin-left: 15%;
	}

	#uslottie {
		width: 70%;
		margin-left: 15%;
	}

	#flaglottie {
		width: 70%;
		margin-left: 15%;
	}


	.wink {
		bottom: -850px;
	}

	.wink2 {
		bottom: -660px;
	}

	.box{
		margin-left: 4%;
		margin-right: 5%;
	}

	.boxindex {
		margin-left: 4%;
		margin-right: 5%;
	}

	.instructionsbox{
		margin-left: 4%;
		margin-right: 5%;
	}

	.finishedbox{
		margin-left: 4%;
		margin-right: 5%;
	}

	.sm2{
		margin-left: 4%;
		margin-right: 5%;
		margin-right: 22px;
	}

	.input3 {
		display: none;
	}
}

@media only screen and (min-width: 720px) {

	#logo {
		margin-left: 15%;
		margin-right: 15%;
	}

	#sanimation {
		bottom: -50px;
	}

	#hank {
		width: 50%;
		margin-left: 28%;
	}

	.box{
		margin-left: 20%;
		margin-right: 20%;
	}

	.boxindex{
		margin-left: 20%;
		margin-right: 20%;
	}

	.finishedbox{
		margin-left: 20%;
		margin-right: 20%;
	}

	.instructionsbox{
		margin-left: 20%;
		margin-right: 20%;
	}


	.sm2{
		margin-left: 20%;
		margin-right: 19%;
	}

	.wink{
		margin-left: 35%;
	}

	.wink2{
		margin-left: 35%;
	}

	.brhidden {
		display: inline;
	}
}

@media only screen and (min-width: 873px) {

	#logo {
		margin-left: 25%; 
		margin-right: 25%; 
	}

	#sanimation {
		bottom: -60px;
	}

	br.responsive {
		display: none;
	  }

	  #hank {
		width: 40%;
		margin-left: 33%;
	}
}

@media only screen and (min-width: 1100px) {

	#logo {
		margin-left: 30%; 
	margin-right: 30%; 
	}

	#sanimation {
		bottom: -75px;
	}

	#hank {
		width: 32%;
		margin-left: 36%;
	}

	.box{
		margin-left: 30%;
		margin-right: 30%;
	}

	.boxindex{
		margin-left: 30%;
		margin-right: 30%;
	}

	.instructionsbox{
		margin-left: 30%;
		margin-right: 30%;
	}

	.finishedbox{
		margin-left: 30%;
		margin-right: 30%;
	}


	.sm2{
		margin-left: 30%;
		margin-right: 29%;
	}

	br.responsive {
		display: inline;
	  }

	.wink{
		margin-left: 70%;
	}

	.wink2{
		margin-left: 70%;
	}


	.text2 {
		text-align: center;
	}
}


@media only screen and (min-width: 1311px) {

	#sanimation {
		width: 17%;
		right: -20px;
		bottom: -70px;
	}

	#hank {
		width: 30%;
		margin-left: 37%;
	}

	.box{
		margin-left: 30%;
		margin-right: 30%;
	}

	.boxindex{
		margin-left: 30%;
		margin-right: 30%;
	}

	.instructionsbox{
		margin-left: 30%;
		margin-right: 30%;
	}

	.finishedbox{
		margin-left: 30%;
		margin-right: 30%;
	}

	.sm2{
		margin-left: 30%;
		margin-right: 29%;
	}

	br.responsive {
		display: none;
	  }

	  .wink{
		margin-left: 75%;
	}

	.wink2{
		margin-left: 75%;
	}

}

@media only screen and (min-width: 1530px) {


	#hank {
		width: 20%;
		margin-left: 40%;
		bottom: -72px;
	}
}

@media only screen and (min-width: 1700px) {

	#logo {
		margin-left: 30%;
		margin-right: 30%;
	}

	#sanimation {
		width: 15%;
		bottom: -75px;
	}

	#hank {
		width: 25%;
		margin-left: 39%;
	}
}

@keyframes slideInFromBottom {
	0% {
	  transform: translateY(200%);
	}
  }


.slideInFromBottom {  
	animation: 1s ease-out 0s 1 slideInFromBottom;
  }