/*`xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
}

/*`xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	.modal-backdrop.show{
		z-index: 1;
		background-color: transparent;
	}
	.logo{
		width: 100px;
	}
	.navbar .nav-item{
		padding-left: 12px;
	}
	.nav-bottom .navbar-nav .nav-item{
		padding: 0;
	}
	.nav-bottom .navbar-nav .nav-item .nav-link{
		padding: 1rem 2rem;
		color: #333333;
		font-weight: bold;
		border-bottom: solid 1px rgba(0,0,0,0.1);
	}
	.nav-bottom .navbar-nav .nav-item .nav-link .icon{
		display: none;
	}

	.nav-top,
	.nav-bottom{
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.nav-top{
		position: relative;
		z-index: 9999;
	}
	.nav-height-mobile{
		height: 50px;
	}
	.nav-top .navbar-toggler{
	    width: 50px;
	    height: 50px;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    background-color: var(--cl-pri);
	    border-radius: 0;
	    color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.nav-top .navbar-toggler span{
		margin-top: 4px;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: bold;
	}
	.nav-bottom .offcanvas{
		background-color: #f4f7f6;
	}

	.nav-bottom .offcanvas.offcanvas-end{
		top: 50px !important;
		width: 100%;
	}
	.nav-bottom .offcanvas-header,
	.nav-bottom .offcanvas-body{
		padding: 0;
	}

	.main-nav{
		gap: 0;
	}
	.form-search-header input{
		font-size: 1rem;
	}

}
/*`md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
	.block{
		padding: 15px 1%;
	}
	.box-ring{
		transform: scale(0.8);
	}

	.box-input-comment input{
		height: 40px;
	}
	.box-input-comment .avata-user{
	    width: 35px;
	    height: 35px;
	}
}
/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.wrapper{
		right:-20px;
	}
 }
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.col-lg-fix-5{
		flex: 0 0 auto;
		width: 20%;
	}
	.col-lg-fix-8{
		flex: 0 0 auto;
		width: calc(100% / 8);
	}
}
/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }
/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {  }