*{

	padding: 0px;

	margin: 0px;

	font-family: sans-serif;

	text-align: justify;

	transition: .5s all ease-in-out;

}

.main_body{

	position: relative;

	background: #2d2d2d;

	width: 100%;

	height: 100vh;

}

.top_pan{

	background: white;

	width: 100%;

	height: 30px;

	border-bottom: 4px solid #1dd375;

}

.top_pan .text_lgu{

	position: absolute;

	padding: 0px 20px;

    top: 2px;

    left: 123px;

    font-size: 13px;

    font-weight: bold;

    font-style: italic;

    background: #32be6c;

    color: white;

    clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);

}

.top_pan .text_lgu b{

	color: black;

    font-style: normal;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #26270c;

    -webkit-text-fill-color: #18d174;

    font-size: 16px;

}

.top_pan .icons{

	position: absolute;

	top: 0px;

	left: 20px;

	height: 102px;

	width: 104px;

	background: #CE0000;

	background: linear-gradient(to top, #f10e1e 10%, #1dd375);

	border-radius: 0px 0px 50px 50px;

	border-style: solid;

	border-width: 0px 2px 2px 2px;

	border-color: green;

	z-index: 1;

	-webkit-box-shadow: 0px 0px 8px 2px #0000006b;

	box-shadow: 0px 0px 8px 2px #0000006b;

}

.top_pan .icons img{

	background: transparent;

	height: 100px;

	width: 100px;

}

.scroll_body{

	overflow: auto;

	width: 100vw;

	height: calc(100vh - 30px);

}

.slide_shows{

	position: relative;



 	background-image: url("../images/UBAY.jpg");

    background-size: 120% 100%;

    background-attachment: fixed;

	width: 120%;

	height: 600px;

	clip-path: polygon(100% 0, 100% 81%, 80% 100%, 0 76%, 0 0);

}

.slide_shows .div_label{

	position: absolute;

	top: 53px;

	left: 130px;

	width: 600px;

	height: 200px;

	padding: 20px;

	font-size: 20px;

	background: #383838b5;

	color: white;

	font-weight: bolder;

	border-radius: 10px;

	clip-path: polygon(0% 0%, 86% 0, 100% 50%, 85% 100%, 0% 100%);

}

.div_label:hover{

	background: #383838;

}

.slide_shows .lbl_wel{

	position: absolute;

	left: 20px;

	font-size: 30px;

	width: 100%;

	margin: 0px;

}

.slide_shows .lbl_wel_small{

	position: absolute;

    padding: 0px 50px 0px 0px;

    left: 20px;

    font-size: 15px;

    width: 100%;

    margin: 0px;

    color: gold;

}

.slide_shows .lbl_1{

	top: 20px;

}

.slide_shows .lbl_2{

	top: 50px;

}

.slide_shows .lbl_3{

	top: 90px;

}.slide_shows .lbl_4{

	top: 110px;

}

.contents{

	position: relative;

	width: 100%;

	height: 400px;

	background: transparent;

	display: flex;

}

.side_bars{

	/*position: absolute;*/

	display: flex;

	flex-direction: column;

	top: 0px;

	right: 0px;

	width: 350px;

	height: 100%;

	background: transparent;

	padding: 10px;

}

.side_bars .content_box{

	padding: 10px;

	margin-bottom: 10px;

	border-radius: 5px;

}

#table_renew{

	color: white;

	font-size: 12px;

	border-radius: 5px;

}

#table_new{

	color: white;

	font-size: 12px;

	border-radius: 5px;

}

#table_renew thead th, #table_renew tbody td,

#table_new thead th, #table_new tbody td{

	padding: 2px;

	border: none;

}

.middle_bars{

	/*position: absolute;*/

	top: 120px;

	width: calc(100vw - 270px);

}

.middle_bars .midd_contents{

	position: relative;

	margin: 10px 10px;

	background: #3c3938;

	padding: 10px;

	border-radius: 5px;

	overflow: hidden;

	min-height: 300px;

}

.midd_contents .img_des{

	position: absolute;

	top: 0px;

	left: 0px;

	background-size: 100% 100%;

    background-attachment: fixed;

	width: 100%;

	height: 100%;

	opacity: 0;

}

.middle_bars .midd_contents:hover{

	/*background: #f44336;*/

	background: #2196f387;

}

.middle_bars .midd_contents:hover h4, .middle_bars .midd_contents:hover p{

	/*background: #f44336;*/

}

.middle_bars .midd_contents:hover .img_des{

	opacity: .5;

}

.middle_bars p{

	position: relative;

	padding: 10px 10px 10px 20px;

	color: white;

	font-weight: bolder;

}

.middle_bars h4, .middle_bars h3{

	padding: 10px 10px 10px 10px;

	color: white;

	font-weight: bolder;

}

.middle_bars h3{

	background: #F44336;

	clip-path: polygon(0% 0%, 92% 0, 100% 50%, 92% 100%, 0% 100%);

	width: 320px;

}

.middle_bars h4{

	/*background: #F44336;*/

	clip-path: polygon(0% 0%, 92% 0, 100% 50%, 92% 100%, 0% 100%);

	width: 300px;

}

.upper_bars{

	position: relative;

	top: 5px;

	left: 0px;

	width: 90%;

	height: 150px;

	background: #2d2d2d;

	border-radius: 0px 0px 5px 0px;

}

.upper_bars .img1{

	clip-path: polygon(0 0, 100% 0%, 94% 100%, 0% 100%);

}

.ecom{

	position: absolute;

	top: -10px;

	right: calc(-5px - 10%);

	border-radius: 20px;

	z-index: 1;

}

.img_dec{

	position: absolute;

	top: 3px;

	left: 4px;

	padding: 5px;

	background: #2d2d2d;

	border-radius: 150%;

	width: 35px;

	border: 3px solid #1ed375;

}

.footers{

	position: absolute;

	bottom: 0px;

	padding: 20px;

	width: 100vw;

	text-align: center;

	background: #32be6c;

}

/*======================================*/

.tim{

	position: fixed;

	top: 30px;

    left: 117px;

    height: 29px;

    width: 98px;

    background: #f3102073;

    color: white;

    border-radius: 0px 0px 5px 0px;

}

#hrs{

	position: absolute;

	left: 10px;

	font-size: 22px;

}

#blinks{

	position: absolute;

	top: 2px;

    left: 35px;

    font-size: 17px;

    font-weight: bolder;

}

#sec{

	position: absolute;

	top: 4px;

	left: 67px;

	font-size: 10px;

	font-weight: bolder;

}

#am_pm{

	position: absolute;

	top: 13px;

	left: 67px;

	font-size: 10px;

	font-weight: bolder;

}

#dat{

	position: absolute;

	top: 28px;

    left: 9px;

    padding: 2px 5px;

    font-size: 12px;

    font-weight: bolder;

    background: #32be6cad;

    border-radius: 3px;

    width: max-content;

}

/*======================================*/

@media screen and (max-width: 600px){

	.contents{

		flex-direction: column;

	}

	.side_bars{

		width: 100%;

	}

	.middle_bars{

		width: 100%;

	}

	.top_pan .icons{

		width: 52px;

		height: 54px;

	}

	.top_pan .icons img{

		width: 50px;

		height: 50px;

	}

	.top_pan .text_lgu{

		font-size: 10px;

		left: 63px;

		width: 80%;

	}

	.top_pan .text_lgu b{

		font-size: 12px;

	}

	.slide_shows .div_label{

		left: 60px;

		width: 70%;

		height: 40%;

	}

	.slide_shows .lbl_wel{

		font-size: 25px;

	}

	.slide_shows .lbl_wel_small{

		font-size: 10px;

	}

}