:root {
	--transparent-darken-more: rgba(52, 58, 64, 0.9);
}
/* === DESKTOP FIRST === */

/* xl <= Extra extra large (xxl) */
@media (max-width : 1400px) {

}

/* lg <= Extra large (xl) */
@media (max-width : 1200px) {
	.navbar-nav .dropdown-menu {
		position: absolute;
	}	
	.navbar {
		z-index: 9;
	}
}

/* md <= Large (lg) */
@media (max-width : 992px) {
	.last__video_list {
		max-height: 100%;
	}
	h1.title, .h1.title {
		font-size: 1.6rem;
	} 	
}

/* sm <= Medium (md) */
@media (max-width : 768px) {
	.navbar {
		padding: 0px 10px !important;
	}
	header .navbar .navbar__btn-add-post {
		margin-left: 5px;
	}
	header.header-sm {
		height: 90px;
	}
	header.header-sm .navbar {
		background-color: var(--transparent-darken-more);
	}	
	h1, .h1 {
		display: block;
		white-space: normal;
		font-size: 1.2rem;
	}
	h1.title, .h1.title {
		display: block;
		white-space: normal;
		font-size: 1.2rem;
	}
	.title::before, .title::after {
		display: none;
	}	
	h1.video__title {
		font-size: 1.1rem;
	}
	.h2, h2 {
		font-size: 1.4rem;
	}
	.h3, h3 {
		font-size: 1.35rem;
	}
	.display-4 {
		font-size: 2.0rem;
	}
	.display-3 {
		font-size: 3.0rem;
	}
	.header__wrapper {
		padding: 25px 10px;
	}
	.header__wrapper .h3{
		line-height: 52px;
	} 
	.page-content {
		padding-right: 10px;
		padding-left: 10px;
		min-height: calc(100vh - 307px);
	}	
	.title__wrapper {
		padding: 20px 0;
	}
	.pagination .page-item .page-link {
		font-size: 80%;
		font-weight: 400;
	}
}

/* xs <= Small (sm) */
@media (max-width : 576px) {

}

@media (max-width : 375px) {
	.header__wrapper .h3 {
		line-height: 42px;
	} 
	.header__wrapper #btn-whatch-video {
		margin-top: 1rem;
	}
}

@media (max-width : 320px) {
	.header__wrapper .header__title {
		font-size: 2.4rem;
	}
	.header__wrapper .h3 {
		line-height: 40px;
		font-size: 1.5rem;
	} 
	.header__wrapper #btn-whatch-video {
		margin-top: 0.5rem;
	}
}

/* === MOBILE FIRST === */

/* Custom (xs) */
@media (min-width : 0) {

}

/* Small (sm) */
@media (min-width : 576px) {

}

/* Medium (md) */
@media (min-width : 768px) {

}

/* Large (lg) */
@media (min-width : 992px) {

}

/* Extra large (xl) */
@media (min-width : 1200px) {

}

/* Extra extra large (xxl) */
@media (min-width : 1400px) {

}