/*//////////////////////////////////////////////////////////////////////////////
// - Snowman Challenge - Created by CraftedByChris.com - Game version 1.0	  //
// - Please report any bugs to me via the website you purchased this from 	  //
// - You can find CraftedByChris on Twitter/ Envato / Dribble 		          //
// - If you need a custom version of the game then please contact me          //
// - Please do not distribute or upload to sharing sites 					  //
//////////////////////////////////////////////////////////////////////////////*/

/*  Load Webfont First  */
@font-face {
	font-family: 'IndieFlower';
	src: url('../fonts/IndieFlower.eot?#iefix') format('embedded-opentype'),  url('../fonts/IndieFlower.woff') format('woff'), url('../fonts/IndieFlower.ttf')  format('truetype'), url('../fonts/IndieFlower.svg#IndieFlower') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*  Html & Body settings  */
html,body{
	border:0;
	margin:0;
	height:100%;
	overflow: hidden;
}

/*  Main Page Style  */
.holder{
	top:0;
	position:relative;
	font-family: 'IndieFlower';
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	-o-user-select: none; 
    user-select: none;
	text-decoration: none;
	width: 100%;
	height: 100%;
	/* A set height can be used if you are inserting the game into a prexisting site. */  
	/*height: 700px;	*/
	border:0;
	margin:0;
	overflow: hidden;
	background-color:#2e6067;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.sitting{
	top:0;
	width: 100%;
	height: 100%;	
	position:relative;
	border:0;
	margin:0;
}

/*  Preloader  */
.loaderbg{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:100;
	background: #2e6067;
	background:-moz-linear-gradient(top, #4C98AA 0%, #2e6067 55%); 
	background:-webkit-linear-gradient(top, #4C98AA 0%,#2e6067 55%);
	background:linear-gradient(to bottom, #4C98AA 0%,#2e6067 55%);
}
.loader {
	border:0;
	margin:0;
	margin: 60px auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #e65073;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: loadanim 1.1s infinite linear;
	animation: loadanim 1.1s infinite linear;
}
.loader, .loader:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
}

/*  Animation For Preloader  */
@-webkit-keyframes loadanim {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loadanim {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*  Background Style  */
.background{
	position:absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	z-index:1;
	background: url(../img/bg.png), #2e6067;
	background-image:url(../img/bg.png), -moz-linear-gradient(top, #2e6067 0%, #4C98AA 75%); 
	background-image:url(../img/bg.png), -webkit-linear-gradient(top, #2e6067 0%,#4C98AA 75%);
	background-image:url(../img/bg.png), linear-gradient(to bottom, #2e6067 0%,#4C98AA 75%);
	background-position:bottom right;
	background-size:cover;
	background-repeat:no-repeat; 	
}

/*  Icon Webfont  */
@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?hp1rse');
    src:    url('../fonts/icomoon.eot?hp1rse#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?hp1rse') format('truetype'),
        url('../fonts/icomoon.woff?hp1rse') format('woff'),
        url('../fonts/icomoon.svg?hp1rse#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
	font-size:65% !important;
	vertical-align:central;

}
.icon-cog:before {
    content: "\e900";
}
.icon-volume-high:before {
    content: "\e901";
}
.icon-volume-mute:before {
    content: "\e902";
}
.icon-info:before {
    content: "\e903";
}
.icon-cycle:before {
    content: "\e904";
}
.icon-cw:before {
    content: "\e905";
}
.icon-ccw:before {
    content: "\e906";
}
.icon-arrow-left:before {
    content: "\e907";
}
.icon-uniE908:before {
    content: "\e908";
}

/*  Game Styles  */

/*  Snow Flake  */
.paint{
	z-index:2;
	width:100%;
	height:60%;
	position:absolute;
	top:0;
	left:0;
}
.paint .flake{
	cursor: default; 
	position:absolute;
	top:-24px;
	color: #fff;
	margin-left:-4px;
}

/*  Container For Top Bar  */
.container{
	position:absolute;
	visibility:hidden;
	z-index:50;
	top:0;
	left:0;
	right:0;
}

/*  Container For Word and Virtual Keyboard  */
.container2{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	padding:20px 0 20px 0;
	z-index:3;
}

/*  Tells the snowman where to sit  */
.snowman{
	position:absolute;
	left:0;
	right:0;
	z-index:2;
	text-align:center;
}

/*  General CSS  */
.hold{
	max-width:820px;
	margin:0 auto;
	text-align:center;
}
.center{
	position:relative;
	top: 50%;
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%); 
	transform:translateY(-50%);
}
.overlay{
	visibility:hidden;
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:rgba(33,79,86,0.6);
}
#overlay1{
	z-index:52;
}
#overlay2{
	z-index:51;
}

/*  Tells the Intro and Help where to sit  */
.intro, .help{
	top: 48%;
	max-width:870px;
	position:absolute;
	margin:0 auto;
	z-index:50;
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%); 
	transform:translateY(-50%);
	left:0;
	right:0;
}
.intro{
	visibility:hidden;
}

/*  The intro screens color etc  */
.introhold{
	background-color:rgba(188,210,211,0.4);
	border-radius: 5px;
	padding:30px;
	margin:10px;
	position: relative;
	text-align:center;
}

/*  Tells the game to load the logo from the image folder  */
.logo{
	visibility:hidden;
	background-image:url(../img/logo.png);
	max-width:100%;
	height:153px;
	background-position:bottom center;
	background-size:contain;
	background-repeat:no-repeat; 
	margin:0 20px 0 20px;
}

 /*  Retina-Images  */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {    
	.background{
		background-image:url(../img/bg-x2.png), -moz-linear-gradient(top, #2e6067 0%, #4C98AA 75%); 
		background-image:url(../img/bg-x2.png), -webkit-linear-gradient(top, #2e6067 0%,#4C98AA 75%);
		background-image:url(../img/bg-x2.png), linear-gradient(to bottom, #2e6067 0%,#4C98AA 75%); 	
	}
	.logo{
		background-image:url(../img/logo-x2.png);
	}
}

.hide{
	overflow:hidden
}

/*  Help and Settings screen text  */
.htext{
	margin:10px;	
	padding:30px;
	border-radius: 5px;
	background-color:rgba(33,79,86,0.95);
	text-align:center;
	z-index:60;
}

/*  Settings Buttons  */
.opt {
	max-width:300px;
	display:block;
	background-color:rgba(16,55,61,0.6);
	border-radius: 5px;
	margin:0 auto;
	margin-bottom:10px;
	padding:10px;
	cursor:pointer;
}
.opt:hover {
	background-color:rgba(16,55,61,0.9);
}

/*  Close Buttons  */
.close{
	width:50px;
	height:50px;
	text-align: center;
	position:absolute;
	background-color:rgba(255,255,255,0.8);
	top:15px;
	right:25px;
	color:rgba(230, 80, 115, 0.8);	
	font-size:1.6em;
	line-height:48px;
	border-radius: 25px;
	cursor:pointer;
}
.close:hover{
	background-color:rgba(255,255,255,1);
	color:#DF214D;
}

/*  Main Game Text  */
.title{
	color:#fff;
	font-size:2em;
	text-align:center;	
	line-height:36px;
	letter-spacing:0;
	cursor:default;	
}
.smaller{
	font-size:85%;	
}

/*  The Info Bar containg lives, guesses etc  */
.top{
	display:inline-block;
	margin: 20px 2px 10px 2px;
	background-color:#bcd2d3;
	background-color:rgba(188,210,211,0.8);	
	padding:0;
	top:0;
	vertical-align: top;
	line-height:47px;
	border-radius: 5px;
	border:2px solid #ADC8C9;
	height:47px;
}

/*  Defines lives, guesses and level  */
#b1,#b2,#b3{
	width:200px;
}
#b4{
	width:47px;
	cursor:pointer;
	color:#fff;
	
}
#b4 i{
	opacity:0.7;
}
#b4:hover i{
	opacity:1;
}

/*  The pop text in the game  */
#gametext2{
	top:120px;
	left:0;
	right:0;
	position:absolute;
	z-index:50;
}

/*  Main game pink colour  */
.title span, .top span{
	color:#e65073;	
}
.btn span{
	color:#FFBACA;
}

/*  Intro text  */
.hq{
	font-size:130%;
	margin-bottom:40px;
}
.introtext{
	visibility:hidden;
	margin: 30px 15px 30px 15px;
	border-radius: 5px;
	color:#fff;
	text-shadow:1px 1px 2px #111;
	background-color:rgba(188,210,211,0.6);
	padding:20px;
}

/*  How the virtual keyboard and main word looks and sits  */
#board1{
	margin-bottom:20px;
}
.word, .letters, .btn{
	position:relative;	
	height:60px;
	color:#fff;
	font-size:2.2em;
	margin:0 auto;
	text-align:center;
	display:inline-block;
	line-height:67px;
	text-transform:uppercase;
	z-index:70;
}
.word, .letters, .btn, .close, .opt{
	-webkit-transition: background-color ease-out 0.4s;
    -moz-transition: background-color ease-out 0.4s;
    -o-transition: background-color ease-out 0.4s;
	-ms-transition: background-color ease-out 0.4s;
    transition: background-color ease-out 0.4s;
}
.close{
	-webkit-transition: all ease-out 0.4s;
    -moz-transition: all ease-out 0.4s;
    -o-transition: all ease-out 0.4s;
	-ms-transition: all ease-out 0.4s;
    transition: all ease-out 0.4s;
}
#b4 i{
	font-size:90% !important;
	line-height:47px;
	-webkit-transition: opacity ease-out 0.4s;
    -moz-transition: opacity ease-out 0.4s;
    -o-transition: opacity ease-out 0.4s;
	-ms-transition: opacity ease-out 0.4s;
    transition: opacity ease-out 0.4s;
}
.word{
	width:60px;
	visibility:hidden;
	background-color:#D2DFE0;
	margin:2px 2px 0 0;
	cursor:default;
	-o-transform:translateY(57px);
	-ms-transform:translateY(57px);
	-moz-transform:translateY(57px);
	-webkit-transform:translateY(57px); 
	transform:translateY(57px);
	border-radius: none;
}
.letters{
	width:60px;
	background-color:#e65073;
	background-color:rgba(230, 80, 115, 0.8);
	margin:1px;
	cursor:pointer;
	visibility:hidden;
	border-radius: 2px;
}
.letters:hover, .btn:hover{
	background-color:#DF214D;
}

/*  How the buttons look  */
.btn{
	width:300px;
	vertical-align: top;
	padding: 0 20px 0 20px;
	visibility:hidden;
	background-color: #e65073;
	background-color:rgba(230, 80, 115, 0.8);
	cursor:pointer;
	z-index:10;
	border-radius: 5px;
	border:2px solid #EC4B71;
	height:60px;
	margin-bottom:5px;
}
#btn2{
	position:absolute;
	margin-top:-40px;
	left:50%;
	top:50%;
	z-index:30;
	visibility:hidden;
	-o-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-webkit-transform:translateX(-50%); 
	transform:translateX(-50%);
	white-space:nowrap;
}

 /*  Responsive Sizes  */
@media screen and (max-width: 1020px), (max-height: 900px) {
	.letters, .word{	
		width:50px;
		height:50px;
		font-size:2em;
		line-height:54px;
	}
	.btn{
		width:240px;
		height:50px;
		font-size:2em;
		line-height:54px;
	}
	.hold{
		max-width:720px;
	}
	.word{
		-o-transform:translateY(47px);
		-ms-transform:translateY(47px);
		-moz-transform:translateY(47px);
		-webkit-transform:translateY(47px); 
		transform:translateY(47px);
	}
	.title{
		font-size:2em;	
		line-height:36px;
	}
}
@media screen and (max-width: 710px), (max-height: 720px) {
	#b1,#b2,#b3{
		width:140px;	
	}
	.logo{
		height:120px;
	}
	.letters, .word{	
		width:40px;
		height:40px;
		font-size:1.6em;
		line-height:44px;
	}
	.btn{
		height:40px;
		width:190px;
		font-size:1.6em;
		line-height:44px;	
	}
	.hold{
		max-width:570px;
	}
	.word{
		-o-transform:translateY(38px);
		-ms-transform:translateY(38px);
		-moz-transform:translateY(38px);
		-webkit-transform:translateY(38px); 
		transform:translateY(38px);
	}
	.title{
		font-size:1.6em;	
		line-height:32px;
	}
	.container2{
		padding:10px 0 10px 0;
	}
}
@media screen and (max-height: 600px) {
	.letters, .word{	
		width:30px;
		height:30px;
		font-size:1.2em;
		line-height:32px;
	}	
}
@media screen and (max-width: 580px), (max-height: 600px) {
    .word{	
		width:40px;
		height:40px;
		font-size:1.6em;
		line-height:44px;
		-o-transform:translateY(38px);
		-ms-transform:translateY(38px);
		-moz-transform:translateY(38px);
		-webkit-transform:translateY(38px); 
		transform:translateY(38px);
	}
	.logo{
		height:100px;
	}
	.top{
		height:40px;
		line-height:40px;
	}
	#b1, #b3{
		width:90px;	
	}
	#b2{
		width:120px;	
	}
	#b4{
		width:40px;
	}
	.introtext{
		padding:15px;
	}
	.btn{
		width:170px;
		height:30px;
		font-size:1.4em;
		line-height:36px;	
	}
	.introhold{
		padding:15px;
	}
	.hold{
		max-width:420px;
	}
	.title{
		font-size:1.4em;	
		line-height:25px;
		letter-spacing:-1px;
	}
	.top{
		margin-top: 10px;
	}
	#gametext2{
		top:90px;
	}
	.close{
		width: 35px;
		height: 35px;
		top:10px;
		right:20px;
		line-height:35px;
		font-size:1.4em;
	}
	.htext{
		padding:20px;
	}
	.hq{
		margin-bottom:20px;
	}
	#b4 i{
		line-height:40px;
	}
}
@media screen and (max-height: 400px) {
	.letters, .word{	
		width:22px;
		height:22px;
		font-size:1em;
		line-height:22px;
	}
}
@media screen and (max-width: 407px), (max-height: 400px) {
	.word{	
		width:22px;
		height:22px;
		font-size:1em;
		line-height:22px;
		-o-transform:translateY(21px);
		-ms-transform:translateY(21px);
		-moz-transform:translateY(21px);
		-webkit-transform:translateY(21px); 
		transform:translateY(21px);
	}
	.logo{
		height:80px;
	}
	.introtext{
		margin: 20px 15px 20px 15px;
		padding:10px;
	}
	.introhold{
		padding:5px;
	}
	#b4 i{
		line-height:30px;
	}
	.hold{
		max-width:320px;
	}
	.top{
		margin-top: 5px;
		height:30px;
		line-height:30px;
	}
	#b1, #b3{
		width:55px;	
	}
	#b2{
		width:95px;			
	}
	#b4{
		width:36px;	
	}
	.title{
		font-size:1.2em;	
		line-height:21px;
		letter-spacing:-1px;
	}
	.close{
		width: 25px;
		height: 25px;
		top:10px;
		right:15px;
		line-height:25px;
		font-size:1.4em;
	}
	.htext{
		margin:5px;	
		padding:15px 10px 10px 10px;
	}
}

.hov2{
	cursor:default !important;
	background-color:#e65073;
}

/*  Fade each part of the snowman  */
#P1, #P2, #P3, #P4, #P5, #P6, #P7, #P8, #P9, #P10{
	opacity:0;  
}