* {
	padding:0; margin:0; border:0;
}

@font-face {
    font-family: Raleway;
    src: url(Raleway-Light.ttf);
}
body {
   font-family: Raleway,sans-serif;
   font-weight: 200;
}

p, p a {
	font-size:20pt;
	color:#aaa;
   transition:color .4s ease;
}

p a:hover {
   color:#c66;
   transition:color .4s ease;
}

#output {
	position:absolute; top:50%; left:50%;
	margin-top:-220px; margin-left:-355px;
	height:440px; width:710px;
}

.tile_visible {
	position:absolute;
	margin-top:0px;
	height:80px; width:80px;
	background-size:500% !important;
	border-radius:4px;
	opacity:1;
	cursor:default;
	transition:background-position 0s, background-size 0s, opacity .2s ease-out, height .2s ease-out, margin .2s ease-out;
}

.tile_back {
	position:absolute; 
	margin-top:0px;
	height:80px; width:80px;
	background-image: url("bg@2x.png") !important;
	background-size: 80px 80px !important;
	border-radius:4px;
	opacity:1;
	cursor:pointer;
	transition:opacity .2s ease-out, height .2s ease-out, margin .2s ease-out, top .4s ease, left .4s ease;
}

.tile_half {
	position:absolute;
	margin-top:20px;
	height:20px; width:80px;
	background-image: url("bg@2x.png") !important;
	background-size: 80px 80px !important;
	border-radius:4px;
	opacity:0;
	cursor:pointer;
	transition:opacity .2s ease-in, height .2s ease-in, margin .2s ease-in;
}

#counter {
	position:absolute; top:-43px; left:450px;
	width:200px;
}

#copy_twb {
	position:absolute; top:-50px; left:0;
}

#title {
	position:absolute; top:-53px; left:50px;
	font-size: 28pt;
   color: #c66;
}

#reset {
	position:absolute; top:-50px; left:677px;
}

#overlay {
	position:absolute; top:142px; left:126px;
}

#caption {
	position:absolute; top:452px;
	opacity: 0;
	transition:opacity .4s ease;
}

#hand {
	height: 40px; width: 40px;
	position:absolute; top: 50%; left: 50%; margin: -40px 0 0 -38px;
	transform-origin: 100% 100%;
	transition: transform .2s ease;
}

#hand td {
	height: 20px; width: 20px;
}

#line {
	border-right: 1px #aaa solid;
}

#percentage {
	height:80px; width: 80px;
	position:absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px;
	display: flex; align-items: center; justify-content: center;
}

#percentage p {
   font-size:14pt;
}

.overlay_visible {
	height:160px; width:462px;
	visibility:visible; opacity:1;
	transition:opacity .4s ease-in;
}

.overlay_invisible {
	height:0; width:0;
	visibility:hidden; opacity:0;
}

#congrats {
	height:160px; width:462px;
	cursor:pointer;
}

.button {
	height:33px; width:33px;
	cursor:pointer;
}

.clicked {
	height:35px; width:35px;
	cursor:pointer;
}

@media only screen and (min-device-width: 320px) and (max-width: 1080px) and (orientation: portrait){
   body {
      zoom:1.3;
   }
}

@media only screen and (min-device-width: 320px) and (max-width: 1080px) and (orientation: landscape){
   body {
      zoom:.7;
   }
}