@charset "UTF-8";
/* CSS Document */


/* 
	white: rgba(255,255,255,1.00)
	light gray: rgba(106,106,106,1.00)
	black: rgba(0,0,0,1.00)
	orange: rgba(206,108,71,1.00)
	green: rgba(92,116,87,1.00)
	brown: rgba(65,41,44,1.00)
*/


/* 1680 x 500 px (carousal images) --> put center of focus in center (Photoshop) 
	make "carousal" folder 
	class="img-fluid" alt="something" */



@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: 'Roboto', sans-serif

}



body {



    background-color:#eee;

}



.container {



 



    align-items: center;

    justify-content: center

}



p {

    margin: 0px

}



.card {

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    background: #fff;

    transition: all 0.5s ease;

    cursor: pointer;

    user-select: none;

    z-index: 10;

    overflow: hidden

}



.card .backgroundEffect {

    bottom: 0;

    height: 0px;

    width: 100%

}



.card:hover {

    color: #fff;

    transform: scale(1.025);

    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 10px

}



.card:hover .backgroundEffect {

    bottom: 0;

    position: absolute;

    z-index: -1;

    background: #1b9ce3;

    animation: popBackground 0.3s ease-in

}



@keyframes popBackground {

    0% {

      
    }



    50% {

     
    }



    75% {

  

    }



    100% {

  

    }

}



.card .pic {

    position: relative

}



.card .pic img {

    object-fit: cover

}



.card .date {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
	
    background-color: #1b9ce3;

    color: white;

    position: absolute;

    bottom: 0px;

    transition: all ease

}



.card .date .day {

    font-size: 14px;

    font-weight: 600

}



.card .date .month,

.card .date .year {

    font-size: 10px

}



.card .text-muted {

    font-size: 12px

}



.card:hover .text-muted {

    color: #fff !important

}



.card .content {



}



.card .content .btn {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 5px 10px;

    background-color: #1b9ce3;



    font-size: 12px;

    border: none

}



.card:hover .content .btn {

    background: #fff;

    color: #1b9ce3;

    box-shadow: #0000001a 0px 3px 5px

}



.card .content .btn .fas {

    font-size: 10px;

    padding-left: 5px

}



.card .content .foot .admin {

    color: #1b9ce3;

    font-size: 12px

}



.card:hover .content .foot .admin {

    color: #fff

}



.card .content .foot .icon {

    font-size: 12px

}

.col-md-3 {padding-bottom: 30px;}
.col-md-3 a:link {padding-bottom: 0px;}	
.col-md-4 {padding-bottom: 30px;}


.jumbotron_home {background: rgba(0,0,0,0) url("../images/jumbotron/jumbotron_home.jpg") no-repeat scroll center center / cover;
					height: 600px;
					margin-bottom: 30px;
	}


.jumbotron_home_2 {background: rgba(0,0,0,0) url("../images/jumbotron/jumbotron_home_2.jpg") no-repeat scroll center center / cover;
					height: 600px;
					margin-bottom: 30px;
	}


h2, h3, h4, h5 {font-family: 'STIX Two Text', serif;} 
	h2{font-size: 20pt;
		font-weight: 700;
		letter-spacing: .4pt;
		padding: 20px 0px 10px 0px;
		color: rgba(0,0,0,1.00);}
	h3{font-size: 20pt;
		font-weight: 700;
		letter-spacing: .4pt;
		padding: 20px 0px;
		color: rgba(0,0,0,1.00);}
	h4{font-size: 18pt;
		font-weight: 700;
		letter-spacing: .4pt;
		text-align: center;
		padding: 15px 0px 0px 0px;
		color: rgba(0,0,0,1.00);}
	h5{font-size: 18pt;
		font-weight: 700;
		letter-spacing: .4pt;
		color: rgba(0,0,0,1.00);}
	
h1, h6, ul, li, p, footer .nav-link, footer .ms-1, footer p, .btn-dark, .dropdown-item, .breadcrumb-item, .accordion-header, .accordion-body {font-family: 'Noto Sans Lao', sans-serif;}
	h1{font-size: 25pt;
		font-weight: 700;
		letter-spacing: .4pt;
		color: rgba(0,0,0,1.00);}	
	h6{font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		text-align: center;
		padding: 15px 0px 0px 0px;
		color: rgba(106,106,106,1.00);}
	.col-md-6 h6 {font-size: 16pt;
		font-weight: 500;
		letter-spacing: .4pt;
		text-align: left;
		padding: 2px 0px 0px 0px;
		color: rgba(0,0,0,1.00);}
	.col-md-4 h6 {font-size: 16pt;
		font-weight: 500;
		letter-spacing: .4pt;
		text-align: left;
		padding: 3px 0px 0px 10px;
		color: rgba(0,0,0,1.00);}
	.navbar h6 {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		text-align: left;
		padding: 5px 0px 0px 0px;
		color: rgba(106,106,106,1.00);}
	ul{font-size: 10pt;
		font-weight: 400;
		letter-spacing: .4pt;
		line-height: 24pt;
		color: rgba(106,106,106,1.00);}
	li{font-size: 8pt;
		font-weight: 400;
		letter-spacing: .4pt;
		color: rgba(106,106,106,1.00);}
	p{font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		line-height: 20pt;
		color: rgba(106,106,106,1.00);}
	ul p{font-size: 10pt;
		font-weight: 400;
		letter-spacing: .4pt;
		padding: 0px;
		text-align: left;
		color: rgba(0,0,0,1.00);}
	footer .nav-link {font-size: 12pt;
		font-weight: 600;
		letter-spacing: .4pt;
		line-height: 18pt;
		color: rgba(106,106,106,1.00);}
	footer .ms-1 {font-size: 14pt;
		font-weight: 600;
		color: rgba(106,106,106,1.00);}
	.col-md-3 p {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		line-height: 20pt;
		text-align: center;
		color: rgba(0,0,0,1.00);}
	.col-md-4 p {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		text-align: left;
		color: rgba(0,0,0,1.00);}
	.col-md-4 .navy p {font-size: 20pt;
		font-weight: 400;
		letter-spacing: .4pt;
		text-align: center;
		color: rgba(0,0,0,1.00);}
	.nav-link p {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		text-align: center;
		padding: 10px 0px 0px 0px;
		color: rgba(0,0,0,1.00);}
	.btn-dark {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .6pt;
		color: rgba(255,255,255,1.00);}
	.dropdown-item h6 {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .6pt;
		color: rgba(0,0,0,1.00);}
	.dropdown-item {font-size: 8pt;
		font-weight: 400;
		letter-spacing: .6pt;
		color: rgba(0,0,0,1.00);}
	.btn-secondary .nav-link {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .6pt;
		padding: 0px;
		color: rgba(0,0,0,1.00);}
	.breadcrumb-item {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .6pt;
		color: rgba(0,0,0,1.00);}
	.accordion-header {font-size: 12pt;
		font-weight: 600;
		letter-spacing: .6pt;
		color: rgba(0,0,0,1.00);}
	.accordion-body {font-size: 12pt;
		font-weight: 400;
		letter-spacing: .4pt;
		color: rgba(0,0,0,1.00);}


.btn-primary:hover {background: rgba(216,110,84,1.00);
					border-color: rgba(206,108,71,1.00);}

.btn-dark:hover {background: rgba(106,106,106,1.00);
					border-color: rgba(106,106,106,1.00);}

.btn-secondary {background: rgba(255,255,255,1.00);
					border-color: rgba(255,255,255,1.00);}
.btn-secondary:hover {background: rgba(255,255,255,1.00);
					border-color: rgba(255,255,255,1.00);}

h6:hover {color: rgba(0,0,0,1.00);}

form {margin: 10px;}

a {text-decoration: none !important;}


footer a:link {color: rgba(0,0,0,1.00);}
footer a:visited {color: rgba(0,0,0,1.00);}
footer a:hover {color: rgba(106,106,106,1.00);}
footer a:active {color: rgba(0,0,0,1.00);}


.fa-brands {color: rgba(0,0,0,1.00);}
.fa-brands:hover{color: rgba(106,106,106,1.00) !important;}

.fa-solid {color: rgba(0,0,0,1.00);}
.fa-briefcase {color: rgba(255,255,255,1.00);}
.fa-circle {color: rgba(13,59,102,1.00);}