.pads-wrapper{
	background: #041e42;
	width: 400px;
	margin: auto;
	display: block;
	border-radius: 5px;
	border: 3px solid #2d2d2d;
}

.pad{
	width: 100px;
	height: 100px;
	border-radius: 5px;
	border: 3px solid #00AED6;
	background: #ededed;
	margin: 3px;
	animation: all 0.3s;

}



.playing{
	border-color: #FD8224;
}

.row{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.pads{
	display: block;
	margin: auto;
	width: 380px;
    height: 340px;
}

.pads-overlay{
	background: #fff;
	display: flex;
    justify-content: center;
}

#pads-play{
	cursor: pointer;
	position: absolute;
    width: 376px;
    height: 455px;
    background: rgba(4,30,66,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Arial, sans-serif;
    z-index: 999;
    color: #fff;
    animation: all 0.3s linear;
}

#pads-play div{
	max-width: 250px;
	margin: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}
#pads-play img{
	height: 30px;
	margin-right: 10px;
}

.play-pads{
	width: 150px;
	padding: 10px;
	color: #333;
	background: #fff;
	border-radius: 5px;
}

.hv{
	color: #fff;
	text-align: center;
	font-family: "Arial", sans-serif;
	font-size: 14px;
}

.uwaga{
	display: none !important;
	font-size: 12px;
	flex-direction: column !important;
	text-align: center;
}

.uwaga img{
	margin-bottom: 10px;
	height: 18px !important; 
}

.ui-slider .ui-slider-handle{
	width: 45px !important;
    height: 24px !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
	background: url(fader.png) !important;
	background-size: 45px 24px !important;
	border: none !important;
}

.ui-slider-horizontal .ui-slider-handle{
	top: -5px !important;
	margin-left: -22px !important;
}

.ui-slider-horizontal{
	height: 13px !important;
}

#slider{
	margin: 25px 20px 30px;
	background: #ededed !important;
}

.logo img{
	height: 25px;
    margin: 20px 20px 15px 15px;
}

.logo{
	display: flex;
	align-items: center;
}

.glowing {

	display: block;
	margin-right: 15px;
	margin-top: 3px;
	height: 15px;
	width: 15px;
	border-radius: 10px;
    animation: glowing 2000ms infinite;
}

.pad-icon{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 30px;
}

.pad-icon img{
	height: 18px;
}


@keyframes glowing {
      0% { background-color: #336d03;}
      50% { background-color: #4cae04;}
      100% { background-color: #336d03;}
}

@media (max-width: 767px){
	.play-pads{
		margin-top: 60px !important;
    }
	.uwaga{
		display: flex !important;
	}
	.pads-wrapper, .pads{
		width: 350px;
	}
	.pads{
		height: 280px;
	}
	.pad{
		width: 80px;
		height: 80px;
	}
	#pads-play{
		height: 400px;
		width: 350px;
	}
}