/*
Theme Name: Triogo Dashboard
Author: Prosoft Phils
Author URL: http://prosoft-phils.com/
Description: Responsive CSS for Global Partials (Mobile Devices)
*/

@media (max-width: 767px) {

/*--------------------------------------------------------------
Full Width Video iFrame on Modal 
--------------------------------------------------------------*/
.modal-video .modal-dialog {
	top: 5px;
}

.video-modal-content {
    width: 90%;
}

.modal-video-close {
	margin-top: 10px;
}

/*--------------------------------------------------------------
Alignment
--------------------------------------------------------------*/
.alignleft,
.alignright,
.aligncenter {
	display: block !important;
	float: none !important;
	margin: 15px auto !important;
	clear: both;
}

/*--------------------------------------------------------------
List Style
--------------------------------------------------------------*/
.ul-lnone-inline li {
	display: block;
	width: 100% !important;
}

/*--------------------------------------------------------------
Custom Class
--------------------------------------------------------------*/
.space {
	display: inline;
}

.space-xs {
	display: block
}

/*--------------------------------------------------------------
Vertical Horizontal Center
--------------------------------------------------------------*/
.vertical-horizontal-center {
	position: relative;
	left: auto;
	top: auto;
	-webkit-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
}

/*--------------------------------------------------------------
HEADER
--------------------------------------------------------------*/
header {
	margin-bottom: 100px
}

.header {
	border-bottom: none;
}

.mobile-header {
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
}

.logo img {
	height: auto
}

#nav-menu-links {
	right: 0;
}

/*--------------------------------------------------------------
HEADER-WP
--------------------------------------------------------------*/
.header-wp {
	margin-bottom: 190px;
}

/*--------------------------------------------------------------
MOBILE NAVS
--------------------------------------------------------------*/
.mobile-section-menus {
	display: block
}

.mobile-section-menus ul {
	list-style: none;
	padding-left: 2%;
	padding-right: 2%;
	border-bottom: 1px solid var(--color-dgrey);
	margin-bottom: 35px;
}

.mobile-section-menus ul li {
	display: inline-block;
	text-align: center;
	border-bottom: 3px solid #fff;
	padding-bottom: 7px;
	font-family: 'Montserrat';
	font-size: 13px;
	line-height: 15px
}

	.mobile-section-menus ul li a {
		color: var(--color-dgrey);
	}

.mobile-section-menus ul li.active {
	border-bottom: 3px solid var(--color-dgrey);
}

	.mobile-section-menus ul li.active a {
		color: var(--color-dgrey);
		font-family:'MontserratSB'
	}

.mobile-section-menus ul.three-links li,
.mobile-section-menus ul.four-links li {
	vertical-align: bottom;
}
	
	.mobile-section-menus ul.three-links li {
		width: 33.33%
	}

	.mobile-section-menus ul.four-links li {
		width: 24%
	}

/*--------------------------------------------------------------
VIDEO CARD
--------------------------------------------------------------*/
.video-card {
	border: none;
	border-radius: 0;
}

.video-card img {
	width: 30%;
	border-radius: 5px
}

.video-details {
	width: 70%
}

.video-card img,
.video-details {
	float: left;
}

.video-details .table th {
	padding: 0;
}

	.video-details .table th small {
		font-size: 12px
	}

	.video-details .table th:nth-child(2) {
		line-height: 16px
	}

.video-cat ul {
	padding-left: 23px;
	padding-top: 7px
}

	.video-cat ul li a {
		padding: 0px 10px;
		font-size: 11px;
	}

.video-cta {
	display: none
}

#videoCardLinks ul li:last-child a {
	line-height: 15px;
	margin-top: 15px;
}

/*--------------------------------------------------------------
PARTIALS - SEND MESSAGE
--------------------------------------------------------------*/

#popup-notifs .modal-dialog {
	margin-top: 50px;
	width: unset;
	right: unset;
}

/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/

/*--------------------------------------------------------------
404 PAGE NOT FOUND
--------------------------------------------------------------*/

} /* END of @media 767px and below*/