/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
*,
*:before,
*:after {
	box-sizing: border-box;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}

html,body{
	height: 100%;
	overflow: hidden;
}
html{
	font-size: 1em;
	line-height: 1.4;
}
body{
	position: relative;
	background-color: #148AB4;
	color: #fff;
	font-family: 'Roboto', sans-serif;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
a, button, input, textarea{
	outline: none;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

#premiazione-buttons{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 25px;
}
#premiazione-buttons .btn,
#premiazione-back .btn{
	height: 55px;
	line-height: 45px;
	font-size: 24px;
}


/*
QUESTIONS
*/
#premiazione-wrapper{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 99;
    background-color: #f8f8f8;
    color: #212121;
}
	#premiazione-wrapper #premiazione-classifica{
		position: absolute;
		top: 0;
		bottom: 124px;
		right: 45px;
		left: 45px;
		text-align: center;
	}
		#premiazione-wrapper .panel{
			position: relative;
			width: 100%;
			height: 100%;
		}
		#premiazione-wrapper #premiazione-classifica h1{
			font-weight: 500;
			font-size: 31px;
			margin: 0 0 30px;
		}
		#premiazione-wrapper #premiazione-classifica label{
			text-align: left;
			width: 100%;
		}

		#premiazione-wrapper #premiazione-classifica input,
		#premiazione-wrapper #premiazione-classifica .btn{
			font-size: 21px;
		    color: #212121;
		    border: none;
		    border-bottom: 1px solid #148AB4;
		    width: 100%;
		    outline: none;
		    background-color: transparent;
		    text-align: left;
		    padding: 7px 0;
		    border-radius: 0;
		    box-shadow: none;
		    height: 49px;
		}
			#premiazione-wrapper #premiazione-classifica input.error{
			    border-bottom: 1px solid #c9302c;
				background-color: #c9302c;
				color: #000;
			}
		
		#premiazione-wrapper #premiazione-classifica .select2.rounded-select{
			width: 100% !important;
			background-color: transparent;
			border: none;
			border-bottom: 1px solid #148AB4;
			color: #212121;
			border-radius: 0;
			display: block;
			padding: 7px 0;
			font-weight: 300;
			cursor: pointer;
			-webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
			-o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
			transition: color .3s ease-in-out, background-color .3s ease-in-out;
		}
		#premiazione-wrapper #premiazione-classifica .select2.rounded-select.error{
			border-bottom: 1px solid #c9302c;
			background-color: #c9302c;
			color: #000;
		}
		#premiazione-wrapper #premiazione-classifica .select2.rounded-select *,
		#premiazione-wrapper #premiazione-classifica .select2-container *{
			outline: none;
		}
			#premiazione-wrapper #premiazione-classifica .select2.rounded-select .select2-selection{
				border: none;
				border-radius: 0;
				background-color: transparent;
				text-align: left;
				color: #212121;
			}
			#premiazione-wrapper #premiazione-classifica .select2-container .select2-selection--single{
				height: 34px;
			}
			#premiazione-wrapper #premiazione-classifica .select2-container--default .select2-selection--single .select2-selection__rendered{
				color: #212121;
				font-size: 21px;
				padding-left: 0;
				font-weight: 400;
			}
			#premiazione-wrapper #premiazione-classifica .select2-container--default .select2-selection--single .select2-selection__arrow b {
			    border-color: #148AB4 transparent transparent transparent;
			    border-style: solid;
			    border-width: 12px 10px 0 10px;
			    height: 0;
			    left: 50%;
			    margin-left: -30px;
			    margin-top: 8px;
			    position: absolute;
			    top: 50%;
			    width: 0;
			}
			#premiazione-wrapper #premiazione-classifica .select2.error .select2-selection--single .select2-selection__arrow b{
				border-color: #c9302c transparent transparent transparent !important;
			}
			#premiazione-wrapper #premiazione-classifica .select2-container--default .select2-search--dropdown .select2-search__field{
				border: 1px solid #212121;
				color: #212121;
				font-size: 18px;
				padding-top: .5em;
				padding-bottom: .5em;
			}
			#premiazione-wrapper #premiazione-classifica .select2-results .select2-results__option{
				color: #212121;
				font-size: 18px;
			}
			#premiazione-wrapper #premiazione-classifica .select2-results .select2-results__option.select2-results__option--highlighted{
				background-color: #148AB4;
				color: white;
			}
			#premiazione-wrapper #premiazione-classifica .select2-container--default .select2-results__option[aria-selected=true]{
				background-color: #148AB4;
				color: white;
				font-weight: 500;
			}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column nowrap;
	        flex-flow: column nowrap;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-ms-flex-line-pack: start;
	    align-content: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.flex.row{
	display: block;
}
@media (min-width: 768px){/*SM*/
	.flex.row{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
	    -ms-flex-flow: row nowrap;
	    flex-flow: row nowrap;
	    
	    margin: 0;/*elimino scroll orrizontale*/
	}
}
.hide{
	display: none !important;
}
.rounded-button{
	background-color: #fff;
	border: 4px solid #fff;
	color: #148AB4;
	font-size: 21px;
	border-radius: 1.5em;
	display: block;
	padding: 12px 30px;
	font-weight: 300;
	cursor: pointer;
	-webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
	-o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
	.rounded-button:hover{
		background-color: #148AB4;
		color: #fff;
		/*border: none;*/
	}
.select2.rounded-select{
	background-color: #fff;
	border: none;
	color: #148AB4;
	border-radius: 2em;
	display: block;
	padding: 11px 30px;
	font-weight: 300;
	cursor: pointer;
	-webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out;
	-o-transition: color .3s ease-in-out, background-color .3s ease-in-out;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
.select2.rounded-select *,
.select2-container *{
	outline: none;
}
	.select2.rounded-select .select2-selection{
		border: none;
		border-radius: 0;
	}
	.select2-container .select2-selection--single{
		height: 34px;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered{
		color: #148AB4;
		font-size: 21px;
		font-weight: 300;
		line-height: 34px;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {
	    border-color: #148AB4 transparent transparent transparent;
	    border-style: solid;
	    border-width: 16px 12px 0 12px;
	    height: 0;
	    left: 50%;
	    margin-left: -30px;
	    margin-top: 8px;
	    position: absolute;
	    top: 50%;
	    width: 0;
	}
	.select2-container--default .select2-search--dropdown .select2-search__field{
		border: 1px solid #212121;
		color: #212121;
		font-size: 18px;
		padding-top: .5em;
		padding-bottom: .5em;
	}
	.select2-results .select2-results__option{
		color: #212121;
		font-size: 18px;
	}
	.select2-results .select2-results__option.select2-results__option--highlighted{
		background-color: #148AB4;
		color: white;
	}
	.select2-container--default .select2-results__option[aria-selected=true]{
		background-color: #148AB4;
		color: white;
		font-weight: 500;
		/*text-align: center;*/
	}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary (mobile first) styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (-o-min-device-pixel-ratio: 5/4),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

@media (min-width: 480px){/*XS*/
	
}
@media (min-width: 768px){/*SM*/
	
}
@media (min-width: 992px){/*MD*/
	
}
@media (min-width: 1200px){/*LG*/

}
@media (min-width: 1400px){/*XL*/
	
}
@media (min-width: 1680px){/*XXL*/
	
}

@media (max-height: 1000px){
	form label{
		display: none;
	}
}


/*
ANIMAZIONE MUCCA
 */
#premiazione-loader{
	z-index: 999;
}
#cow {
	width: 70px;
	margin: auto;
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
	transform: scale(2);
}

#head {
	background: #dedede;
	width: 70px;
	height: 85px;
	position: relative;
	/*top: 50px;
	left: 15px;*/
	-moz-border-radius: 70px / 90px;
	-webkit-border-radius: 70px / 90px;
	border-radius: 70px / 90px;
}

#face {
	width: 110px;
	height: 90px;
}

#horn-left {
	background: #b0b0b0;
	width: 10px;
	height: 18px;
	position:relative;
	top:-10px;
	left: 12px;
	-moz-border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	-webkit-border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	transform:rotate(-20deg);
}

#horn-right {
	background-color: #b0b0b0;
	width: 10px;
	height: 18px;
	position: relative;
	top: -27px;
	left: 47px;
	-moz-border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	-webkit-border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	border-radius: 70% 50% 70% 30% / 80% 90% 20% 40%;
	-moz-transform:rotate(25deg);
	-webkit-transform:rotate(25deg);
	transform:rotate(25deg);
}

#ear-left {
	background: #dedede;
	width: 40px;
	height: 20px;
	position: relative;
	top: -30px;
	left: -25px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg);
}

#ear-left-detail {
	background: #e3c2bf;
	width: 35px;
	height: 17px;
	position: relative;
	top: 2px;
	left: 5px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

#ear-right {
	background: #dedede;
	width: 40px;
	height: 20px;
	position: relative;
	top: -50px;
	left: 50px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	-moz-transform:rotate(-25deg);
	-webkit-transform:rotate(-25deg);
	transform:rotate(-25deg);
}

#ear-right-detail {
	background: #e3c2bf;
	width: 35px;
	height: 17px;
	position: relative;
	top: 2px;
	left: 0px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

#eye-left {
	background: white;
	width: 40px;
	height: 40px;
	position: relative;
	top: -70px;
	left: -5px;
	float: left;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}

#eye-left-detail1 {
	background: black;
	width: 23px;
	height: 23px;
	position: relative;
	top: 0px;
	left: 0px;
	margin: 15px 0 0 7px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-animation: right-eye-animation 1s infinite alternate;
	animation: right-eye-animation 1s infinite alternate;
}

#eye-left-detail2 {
	background: white;
	width: 7px;
	height: 7px;
	position: relative;
	top: 4px;
	left: 12px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#eye-right {
	background: white;
	width: 35px;
	height: 35px;
	position: relative;
	top: -66px;
	left:-5px;
	float: left;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}

#eye-right-detail1 {
	background: black;
	width: 15px;
	height: 15px;
	position: relative;
	top: 14px;
	left: 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	-webkit-animation: left-eye-animation 1s infinite alternate;
	animation: left-eye-animation 1s infinite alternate;
}

#eye-right-detail2 {
	background: white;
	width: 4px;
	height: 4px;
	position: relative;
	top: 3px;
	left: 8px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#mouth {
	background: pink;
	width: 70px;
	height: 30px;
	position: relative;
	top: -25px;
	-moz-border-radius: 40px / 50px;
	-webkit-border-radius: 40px / 50px;
	border-radius: 40px / 50px;
}

#nostril-left {
	background: #917870;
	width: 13px;
	height: 5px;
	position: relative;
	top: 13px;
	left: 20px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	-moz-transform:rotate(25deg);
	-webkit-transform:rotate(25deg);
	transform:rotate(25deg);
}

#nostril-right {
	background: #917870;
	width: 13px;
	height: 5px;
	position: relative;
	top: 8px;
	left: 35px;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
	-moz-transform:rotate(-25deg);
	-webkit-transform:rotate(-25deg);
	transform:rotate(-25deg);
}

@keyframes right-eye-animation {
	0%   { top:  -2px;  left:  3px; }
	5%   { top:  -6px;  left:  0px; }
	10%  { top: -10px;  left:  5px; }
	15%  { top:  -3px;  left:  9px; }
	20%  { top:  -6px;  left:  5px; }
	25%  { top:  -1px;  left: -2px; }
	30%  { top:  -3px;  left: -5px; }
	35%  { top:  -8px;  left: -1px; }
	40%  { top:  -5px;  left:  6px; }
	45%  { top: -10px;  left:  3px; }
	50%  { top:   0px;  left:  1px; }
	55%  { top:  -3px;  left:  6px; }
	60%  { top:  -7px;  left:  3px; }
	65%  { top: -15px;  left:  1px; }
	70%  { top:  -2px;  left:  7px; }
	75%  { top:  -5px;  left:  1px; }
	80%  { top:  -9px;  left:  8px; }
	85%  { top:  -6px;  left:  3px; }
	90%  { top: -10px;  left: 10px; }
	95%  { top:  -5px;  left:  5px; }
	100%  { top:   0px;  left:  0px; }
}

@-webkit-keyframes right-eye-animation {
	0%   { top:  -2px;  left:  3px; }
	5%   { top:  -6px;  left:  0px; }
	10%  { top: -10px;  left:  5px; }
	15%  { top:  -3px;  left:  9px; }
	20%  { top:  -6px;  left:  5px; }
	25%  { top:  -1px;  left: -2px; }
	30%  { top:  -3px;  left: -5px; }
	35%  { top:  -8px;  left: -1px; }
	40%  { top:  -5px;  left:  6px; }
	45%  { top: -10px;  left:  3px; }
	50%  { top:   0px;  left:  1px; }
	55%  { top:  -3px;  left:  6px; }
	60%  { top:  -7px;  left:  3px; }
	65%  { top: -15px;  left:  1px; }
	70%  { top:  -2px;  left:  7px; }
	75%  { top:  -5px;  left:  1px; }
	80%  { top:  -9px;  left:  8px; }
	85%  { top:  -6px;  left:  3px; }
	90%  { top: -10px;  left: 10px; }
	95%  { top:  -5px;  left:  5px; }
	100%  { top:   0px;  left:  0px; }
}

@keyframes left-eye-animation {
	0%   { top: 12px;  left: 13px; }
	5%   { top:  8px;  left: 10px; }
	10%  { top:  4px;  left: 15px; }
	15%  { top: 11px;  left: 19px; }
	20%  { top:  8px;  left: 15px; }
	25%  { top: 13px;  left:  8px; }
	30%  { top: 11px;  left:  5px; }
	35%  { top:  6px;  left:  9px; }
	40%  { top:  9px;  left: 16px; }
	45%  { top:  4px;  left: 13px; }
	50%  { top: 14px;  left: 11px; }
	55%  { top: 11px;  left: 16px; }
	60%  { top:  7px;  left: 13px; }
	65%  { top: -1px;  left: 11px; }
	70%  { top: 12px;  left: 17px; }
	75%  { top:  9px;  left: 11px; }
	80%  { top:  5px;  left: 18px; }
	85%  { top:  8px;  left: 13px; }
	90%  { top:  4px;  left: 20px; }
	95%  { top:  9px;  left: 15px; }
	100%  { top: 14px;  left: 10px; }
}

@-webkit-keyframes left-eye-animation {
	0%   { top: 12px;  left: 13px; }
	5%   { top:  8px;  left: 10px; }
	10%  { top:  4px;  left: 15px; }
	15%  { top: 11px;  left: 19px; }
	20%  { top:  8px;  left: 15px; }
	25%  { top: 13px;  left:  8px; }
	30%  { top: 11px;  left:  5px; }
	35%  { top:  6px;  left:  9px; }
	40%  { top:  9px;  left: 16px; }
	45%  { top:  4px;  left: 13px; }
	50%  { top: 14px;  left: 11px; }
	55%  { top: 11px;  left: 16px; }
	60%  { top:  7px;  left: 13px; }
	65%  { top: -1px;  left: 11px; }
	70%  { top: 12px;  left: 17px; }
	75%  { top:  9px;  left: 11px; }
	80%  { top:  5px;  left: 18px; }
	85%  { top:  8px;  left: 13px; }
	90%  { top:  4px;  left: 20px; }
	95%  { top:  9px;  left: 15px; }
	100%  { top: 14px;  left: 10px; }
}


/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 620px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 80px;
	height: calc(100% - 60px);
}

/*Left*/
.modal.left.fade .modal-dialog{
	left: -620px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;
	transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
	left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
	right: -620px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
	border-radius: 0;
	border: none;
}

.modal-header {
	border-bottom-color: #EEEEEE;
	background: #ededed;
	height: 60px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.grid > div{
	text-align: center;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 3 / 1 / 4 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }
.div10 { grid-area: 4 / 1 / 5 / 2; }
.div11 { grid-area: 4 / 2 / 5 / 3; }
.div12 { grid-area: 4 / 3 / 5 / 4; }


#PINform input:focus,
#PINform select:focus,
#PINform textarea:focus,
#PINform button:focus {
	outline: none;
}
#PINform {
	background: #ededed;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	-webkit-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
}
#PINbox {
	background: #ededed;
	color: #222;
	margin: 3.5%;
	width: 92%;
	font-size: 4em;
	text-align: center;
	border: 1px solid #d5d5d5;
}
.PINbutton {
	background: #ededed;
	color: #7e7e7e;
	border: none;
	/*background: linear-gradient(to bottom, #fafafa, #eaeaea);
      -webkit-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
              box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);*/
	border-radius: 50%;
	font-size: 1.5em;
	text-align: center;
	width: 60px;
	height: 60px;
	margin: 7px 20px;
	padding: 0;
}
.clear, .enter {
	font-size: 1em;
}
.PINbutton:hover {
	box-shadow: #506CE8 0 0 1px 1px;
}
.PINbutton:active {
	background: #506CE8;
	color: #fff;
}
.clear:hover {
	box-shadow: #ff3c41 0 0 1px 1px;
}
.clear:active {
	background: #ff3c41;
	color: #fff;
}
.enter:hover {
	box-shadow: #47cf73 0 0 1px 1px;
}
.enter:active {
	background: #47cf73;
	color: #fff;
}
.shadow{
	-webkit-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 5px -0px rgba(0,0,0,0.3);
}