/** << ======================================^^^=================================== >> */
/**                                         GLOBAL                                     */
/** << ======================================***=================================== >> */
*{font-family: Arial, cursive, sans-serif;}
/* @media (min-width: 1260px){
	.container{max-width: 1248px;}
} */
/* h1{font-size: 2rem;}
h2{font-size: 1.75rem;}
h3{font-size: 1.5rem;} */
.font_b {font-weight: bold;}
.a_black a, .a_black{color: #333; text-decoration: none;}
.a_black a:hover, .a_black:hover{color: #920707;}
/** << ======================================^^^=================================== >> */
/**                                        HEADER                                      */
/** << ======================================***=================================== >> */
header{position: relative; z-index: 1001; padding-top: 1rem;}
header .nav-link{
	color: #666;
}
header .nav-link:hover{
	color: #ccc;
}

#menu{
	position: relative;
}
#menu a{
	padding: .75rem .5rem;
	font-size: 18px;
}
#menu a:hover{
	color: #888;
}
.navbar{
	padding: 0;
}
header .dropdown-menu{
	max-width: 300px;
	min-width: 200px;
}
header .dropdown-menu a{
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}
#headlogo{
	display: inline-block;
	margin: .25rem 0;
	color: #021038;
}
#headlogo:hover{color: #eb601e;}
#headlogo img{max-height: 40px;}
#headsearch{
	margin-top: 1.5rem;
}
#headsearch input{
	height: 42px;
}
.avatar-sm{
	width: 24px;
	display: inline-table;
	border: 1px solid #eee;
	border-radius: 50%;
	overflow: hidden;
}
.avatar-sm img{width: 100%;}

#page-menu{
	border: 1px solid #ddd;
	background: #fff;
}
#page-menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#page-menu li{
	display: inline-block;
}
#page-menu li a{
	display: block;
	line-height: 3.6em;
	padding: 0 1rem;
	font-weight: bold;
	color: #000;
	font-size: 18px;
	text-decoration: none;
}
#page-menu li a:hover{
	color: #3f51b5;
}
.page-item{
	padding: 1.5rem 1.25rem;
}
.page-item h3{
	font-size: 20px;
	font-weight: bold;
}
#mb-btn{font-size: 20px; color: #333;padding-left: 0px; padding-right: 5px;}
#menu_mobi{position: fixed; top: 0; bottom: 0; left:0; z-index: 9999; background: #000; width: 100%; display: none;}
#menu_mobi .list-group-item{background: #000; color: #fff;}
/** << ======================================^^^=================================== >> */
/**                                         MAIN                                       */
/** << ======================================***=================================== >> */
.title-main{font-size: 2.75rem!important;}
.title-meta{font-size: 1.5rem!important;}
.text-desc{font-size: 1rem;}

#banner{
	position: relative;
}
#info{
	position: absolute;
	width: 100%;
	bottom: 15px;
}

#aboutpage{
	background: #fff;
	position: relative;
	border-radius: 10px;
	padding: 3rem;
}
.bg-banner{
	background: #1996bc;
	color: #fff;
}
#filter select{text-align: center;}
#filter option{padding:0; text-align: center;}
#main{
	min-height: 80vh;
	padding: 18px 0;
	position: relative;
}

#page{
	margin-top: -38px;
	position: relative;
	z-index: 999;
}
#featured .card a{text-decoration: none;}
#featured .card b{
	font-size: 18px;
	font-weight: bold;
	color: #ed5050;
}
#featured small{color: #888;}
#featured .card:hover{box-shadow: 0 0 6px #0000005d;}
#featured .card:hover h3{color: #3f51b5;}
.btn-theme{
	border-radius: 50rem!important; 
	padding-left: 3rem!important; 
	padding-right: 3rem!important; 
	padding-bottom: 1rem!important;
	padding-top: 1rem!important;
}
#featured img{width: 50%; margin-bottom: 1rem;}
#newsfeed .col-btn{text-align: right;}
#newsfeed h3{font-size: 20px; font-weight: bold;}
#newsfeed h2{font-size: 24px;}

#SearchList .item{margin-bottom: 1.5rem;}
#SearchList .img{border: 1px solid #eee;}
#SearchList h3{font-size: 18px;}
#SearchList h5{font-size: 16px;}
#SearchList h3 a{color: #1a0dab;}
#SearchList p{margin-bottom: .25rem;}
#SearchList .item .link a{color: #006621;}
#SearchList .item .link-more a{color: #1a0dab;}
#mypages h5 a{color: #666; text-transform: uppercase; text-decoration: none;}
#mypages h5 a:hover{color: #a5460f;}
#user-bar h2{font-size: 24px;}

.img-thumb {
    position: relative;
    display: inline-block;
    max-height: 380px;
    overflow: hidden;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
    box-shadow: 0 1px 37px rgba(12, 31, 41, 0.21);
}
.img-thumb img{
	width: 100%;
}
.demo-img {
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    /* -webkit-transform: translate3d(0,0,0); */
}
.demo-img:hover {
    -webkit-transform: translate3d(0, -36%, 0);
    transform: translate3d(0, -36%, 0);
}
.text-center .pagination{
	margin: 0;
	display: inline-flex;
}

.theme{
	border-radius: .75rem;
	overflow: hidden;
}
.theme .handle {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: justify;
	display: none;
	padding: 35px 20px 25px;
	z-index: 1000;
	color: #fff;
}
.theme:hover .handle {
    display: flex;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.theme .handle .btn {
	width: 36px;
	height: 36px;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}
.theme .handle .price{font-size: 16px;}
.theme .handle img {
	height: 36px;
	background: #fff;
}

#idnav>li>.nav-link{font-size: 20px; font-weight: bold;}
.btn-avatar:hover img{box-shadow: 0 0px 8px 0 #ddd;}
.btn-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.dropdown-toggle.btn-avatar::after{
	display: none;
}

#Content img{max-width: 100%;}

#form h1{font-size: 32px; line-height: 1;}
#form_item{min-height: 100vh; background: #333; color: #eee;}
#form_item #FrmPage{width: 100%; max-width: 550px; padding: 2rem;}
#form_item #FrmPage .form-control{border-radius: 30px; background: #111; border-color: #222; color: #888;}
#form_item #FrmPage .btn{border-radius: 30px;}

.item-center{ display: flex; -webkit-box-align: center; align-items: center; }
.fea_item h3{font-size: 36px; font-weight: bold; margin-bottom: 1.5rem;}
.fea_item p{font-size: 18px;}

#account{position: relative;}
#account .bar{width: 300px; height:calc(100vh - 75px); background: #333; float: left;}
#account .bar{position: fixed; padding: 2rem 1.5rem;}
#account .bar ul{list-style: none; margin: 0; padding: 0;}
#account .bar li{display: block;}
#account .bar li i{font-size: 24px; margin-right: .5rem;}
#account .bar li a{color: #fff; line-height: 3em; display: block; font-size: 18px; font-weight: bold;}
#account .bar li a:hover{color: #ccc; text-decoration: none;}
#account .main{padding: 2rem; margin-left: 300px; max-width: 1000px;}

.page-lg .pagination{box-shadow: 0 2px 16px 0 #ccc; border-radius: 2.5rem;}
.page-lg a{font-weight: bold; font-size: 1.25rem; padding: 1rem 1.5rem;}
.page-lg li:first-child a{border-radius: 2.5rem 0 0 2.5rem;}
.page-lg li:last-child a{border-radius: 0 2.5rem 2.5rem 0;}

#Support{position: relative;}
#spbar{position: absolute; width: 230px; top: 0; left: 0;}
#spbar a{color: #333;}
#spmain{width: 100%; max-width: 680px; margin-left: 260px;}
#spmain a{color:#007185;}
#spmain a:hover, #spbar a:hover{color: #e47911;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #ccc;
}

#feature i{font-size: 80px;}
#feature .card:hover i{color: #d6dce7;}
#feature .card:hover{background: #d6dce7;}
.card.shadow-sm:hover{box-shadow: 0 .25rem .75rem rgba(0,0,0,.175)!important;}

/** << ======================================^^^=================================== >> */
/**                                        FOOTER                                      */
/** << ======================================***=================================== >> */
footer{
	min-height: 10vh;
	border-top: 1px solid #e3e7ee;
	position: relative;
	background: #f2f2f2;
}
footer p{margin-bottom: .75rem!important;}
#footer-main, #footer-main a{color: #000;}
#footer-btm{background: #000; color: #999;}
.icon-social{font-size: 24px;}
.icon-social a{font-size: 24px; color: #666!important; display: inline-block; margin-right: .5rem;}
.icon-social a:hover{color: #000!important;}

.line-end::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(0,0,0,.1);
}

@media (max-width: 750px){
	#headsearch{
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
	#headlogo{
		margin-top: .5rem;
		margin-bottom: .5rem;
	}
	#headlogo img{max-height: 32px;}
	#aboutpage{padding: 1rem;}
	#aboutpage h1{font-size: 24px; font-weight: bold;}
	.mb-btn{color: #fff; display: inline-block;font-size: 20px;}
	#featured .card-body{padding: 0.5rem;}
	#featured img{width: 80%}
	#featured h3{font-size: 20px;}
	#featured p{display: none;}
	#newsfeed .col-btn{text-align: center;}
	#newsfeed h2{font-size: 20px;}
	#newsfeed h3{font-size: 18px;}
	.btn-theme{
		border-radius: 10rem!important; 
		padding-left: 1.5rem!important; 
		padding-right: 1.5rem!important; 
		padding-bottom: 1rem!important;
		padding-top: 1rem!important;
		line-height: 1.2;
	}
	#idnav>li>.nav-link{padding-right: 0;}
	
	.bg-banner h1{font-size: 24px;}
	.bg-banner h3{font-size: 18px;}
	.fea_item h3{font-size: 20px; margin-bottom: 1rem;}
	.fea_item p{font-size: 16px; margin-bottom: .5rem;}
	#account .bar{display: none;}
	#account .main {margin-left: 0; padding: 1rem;}
	#spbar{display: none;}
	#spmain{margin-left: 0;}
	h2{font-size: 24px;}
	#head-id .btn{padding-top: 1px; padding-bottom: 1px; font-size: 15px;}
	.bg-banner a b.text-lg{font-size: 20px;}
	.title-main {
	    font-size: 1.75rem!important;
	    padding-right: 0;
	}	
}