.game-back{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b0bb+0,004352+100 */
	background: #00b0bb; /* Old browsers */
	background: -moz-linear-gradient(top, #00b0bb 0%, #004352 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #00b0bb 0%,#004352 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #00b0bb 0%,#004352 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0bb', endColorstr='#004352',GradientType=0 ); /* IE6-9 */
	width: 100%;
    height: 100%;
    position: fixed;
}

@font-face {
    font-family: "brush-script";
    src: url("../fonts/BrushScriptStd.woff") format('woff');
}

@font-face {
    font-family: "grand-hotel";
    src: url("../fonts/GrandHotel-Regular-webfont.woff") format('woff');
}

@font-face {
    font-family: "effra";
    src: url("../fonts/effra-regular.woff") format('woff');
}

@font-face {
    font-family: "didot";
    src: url("../fonts/Didot.woff") format('woff');
}

@font-face {
    font-family: "helveticaneue";
    src: url("../fonts/helveticaneue.woff") format('woff');
}

@font-face {
    font-family: "BebasNeue-webfont";
    src: url("../fonts/BebasNeue-webfont.woff") format('woff');
}




html, body {
  overflow-x:hidden;
}

.wheel{
   position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;

  

}

.ui-btn{
	background-color: #00b0bb!important;
    border: none!important;
    color: #fff!important;
    text-shadow: none!important;
}

.stars{
	width: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-top: -8vh;
}

.tp-padding{
	    margin-top: 6vh;
}

.arrow{
	user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
	     position: relative;
    top: 3vh;
    z-index: 500;
    width: 3vh;
}

.label-info{
       background: white;
    border: none;
    padding-bottom: .7vh;
    padding-top: .7vh;
    font-size: 1em;
    width: 39vh;
    border-radius: 3px;
    text-align: CENTER;
    font-weight: lighter;
}

.text-center{
	text-align: center;
}

.logo-sm{
	      width: 10vh;
    margin-top: 3vh;
}

.md-title,.md-text{
	color: #00b0bb;
}

.title{
	    margin: 8px;
	        color: #fec242;
    font-weight: bolder;
    text-shadow: -1px 4px 4px rgba(10, 10, 10, 0.61);
}

.sub-title{
	color: white;
	    margin-bottom: 0px;
}

.text{
	color: white;
	    margin-bottom: 0px;
}

.modal {
			text-align: center;
			padding: 0!important;
		}

		.modal:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-right: -4px;
		}

		.modal-dialog {
			display: inline-block;
			text-align: left;
			vertical-align: middle;
		}

		.modal-content{
			    background-color: #ffffff!important;
		}

		.modal-body{
			border: 1px solid white;
			margin: 10px;
			text-align: center;
		}

		.lose-icon{
			    width: 6vh;
		}

		.btn-mod{
		       background-color: #00b0bb;
    color: white;
    padding: 1.5vh;
    border: none;
    width: 100%;
		}


		.btn-mod2{
		         background-color: #00b0bb;
    color: white;
    padding: 1.5vh;
    border: none;
    width: 40%;
		}

		.confirm-btn{
			position: absolute;
		    bottom: 70px;
		    width: 100%;
		    z-index: 6000;
		}


		.game-back-loading{
			background-color:#00b0bb;
			width: 100%;
		    height: 100%;
		    position: fixed;

		}

		.loading{
			padding-top: 16vh;
		}

		.logo-big{
			    width: 80%;
		}

		.loading-container{
			    width: 29%;
    height: 12px;
    border: 1px solid white;
    border-radius: 6px;
    margin: 0 auto;
		}

		.loader{
		width: 0%;
    height: 6px;
    background-color: white;
    display: block;
    border-radius: 8px;
    float: left;
    margin: 2px auto;
    margin-left: .3vh;
		}

		.loading-title{
			    margin-top: 6vh;
    color: white;
    font-size: .8em;
		}

		.well-logo{
			float: right;
    width: 15vh;
    margin-top: 15vh;
    margin-right: 4vh;
		}

		.zero-pad{
			padding: 0;
		}

		.ban-margin{
			margin-bottom: 1.6vh;
		}

		.banner{
			width: 100%;
		}

		.banner-bottom{
			width: 64vh;
    margin: 0 auto;
		}

		.game-back-top{
			background-color: #00b0bb;
    width: 100%;
    height: 15.7vh;
    position: fixed;
		}

		.btm-buttons{
			    margin-bottom: 5vh;
		}

		.title-setup{
			font-size: 1em;
    		margin-top: 3vh;
		}

		.sub-title-setup{
			    font-size: 1em;
    width: 90%;
    margin: 2vh auto;
		}

		.text-setup{
			     font-size: 1em;
    width: 90%;
    margin: 0 auto;
		}

		.profile-preview{
			width: 50%;
		}

		/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
      position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #025362;
    z-index: 50000;
}


.btn-group, .btn-group-vertical{
	width: 100%;
}

.btn-btm{
	display: inline-block;
    height: 60px;
        width: 20%;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-color: #025362;
    border: 1px solid rgb(0, 94, 108);
}

.btn-icon{
	width: 32%;
}

#app-canvas canvas{
	z-index: 500;
	position: absolute;
	bottom: 60px;
}

.menu-holder{
	width: 100%;
    display: inline-table;
}

.popup-container{
      
    z-index: 1000;
    width: 100%;
    position: absolute;
    bottom: 60px;
    top: 11.7%;
       
    text-align: CENTER;
}



#avatar-holder{
	background: #f1e5d4;
    padding-top: 3vh;
    width: 100%;
    height: 100%;
   
}



.br-1{
	border: 1px dashed #00b0bb;
	

}
.br-2{
	border-right: 1px dashed #00b0bb;
	border-top: 1px dashed #00b0bb;
	border-bottom: 1px dashed #00b0bb;
}

.br-3{
	border-left: 1px dashed #00b0bb;
	border-right: 1px dashed #00b0bb;
	border-bottom: 1px dashed #00b0bb;
	

}
.br-4{
	border-right: 1px dashed #00b0bb;
	border-bottom: 1px dashed #00b0bb;
}


#sticker-holder,#frames-holder{
	padding-top: 5vh;
	    background: #fff;
    width: 100%;
    height: 100%;
     position: -webkit-sticky; /* for safari */
   position: sticky;
    z-index: 1000;
    top: 11.7%;
    text-align: CENTER;
}

.modal-footer{
	text-align: center;
}

.sticker,.frame{
	    width: 100%;
    padding: 10px;
}

#btn-holder,#text-container{
	padding-top: 12vh;
		background-color: #fff;
	 height: 88%;

}

.backdrop{
	position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
}

.take-image{
	      width: 8vh;
}

.text-image{
	      width: 8vh;
}
.upload-photo, .choose-avatar{
	    width: 10vh;
}

.horizontal-line{
	width: 10%;
    background-color: #075665;
    height: 1px;
}

#header{
	background-color: #00b0bb;
}

.avatar{
	    width: 100%;
    border-radius: 50%;
    margin-bottom: 20px;
}


#textinput{
	    background-color: #f0f0f0;
    color: #025362;
    height: 15vh;
    border: none;
   font-size: 1.5em;
}

.text-holder .row{
	margin-bottom: 10%;

}

.v-sep{
	height: 44px;
    background: #00b0bb;
    width: 1px;
    display: inline-block;
    vertical-align: top;
    margin-left: 10%;
    margin-right: 10%;
}

.game-setup .container .row{
	margin-bottom: 3vh;
}

.fonts hr{
	border-top:1px dashed #00b0bb!important;
}

.fonts span{
	font-weight: bold;
    color: #025362;
}

.fonts .arial{
	font-family: Arial;
}

.fonts .impact{
	font-family: impact;
}


.fonts .brush-script{
	 font-family: "brush-script";
}

.fonts .grand-hotel{
	 font-family: "grand-hotel";
}

.fonts .effra{
	 font-family: "effra";
}

.fonts .didot{
	 font-family: "didot";
}

.fonts .helveticaneue{
	font-family: "helveticaneue";
}

.fonts .BebasNeue-webfont{
	font-family: "BebasNeue-webfont";
	
}

.fonts span:hover{
	cursor: pointer;
}

.color-bar .row span{
	width: 9vh;
    height: 9vh;
    display: block;
    border-radius: 50%;
}

.color-bar .row{
	margin-bottom: 3%;
}

.color-1{
	background-color: #dc3b1c;
}

.color-2{
	background-color: #fa593a;
}

.color-3{
	background-color: #ff9000;
}

.color-4{
	background-color: #f7c101;	
}

.color-5{
	background-color: #faf703;
}

.color-6{
	background-color: #cade2d;
}

.color-7{
	background-color: #79d600;
}

.color-8{
	background-color: #fa593a;
}

.color-9{
	background-color: #00b078;
}

.color-10{
	background-color: #00b09d;
}

.color-11{
	background-color: #00b1bb;
}

.color-12{
	background-color: #00699a;
}

.color-13{
	background-color: #004353;
}

.color-14{
	background-color: #000d89;
}

.color-15{
	background-color: #4815b0;
}

.color-16{
	background-color: #7602c7;
}

.color-17{
	background-color: #a002c7;
}

.color-18{
	background-color: #74727d;
}

.color-19{
	background-color: #ffffff;
	border:1px solid grey;
}

.color-20{
	background-color: #231f20;
}