/* ###
	MQ SYSTEM CSS
### */


/* ---------------------------------------------------
    XS - SM
----------------------------------------------------- */

@media (max-width:767px) {

	main {
		width: 100%;
	}
	
	.sidebar {
		left: 0%;
		overflow-y: scroll;
		height: 525px !important;
		top: 98px !important;
		bottom: 0px !important;
		position: fixed !important;
		z-index: 1;
		transition: left 200ms ease-in-out !important;
		width: 100% !important;
	}
	
	.modal-body embed {
		height: 185px;
	}
	
	#work_calendar_modal {
		padding-left: 0;
	}
	
	#media_select_modal {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
	#show_video_modal iframe {
		height: 185px !important;
	}
		
	/* Agenda - responsive day view. */
	button.button-7 { font-size: 0.75em !important; padding: .3rem .6rem .4rem .6rem; }	
	button.button-6 { font-size: 0.75em !important; padding: .3rem .6rem .4rem .6rem; }	
	button.button-5 { font-size: 0.75em !important; padding: .3rem .6rem .4rem .6rem; }	
	button.button-5 { font-size: 0.75em !important; padding: .3rem .6rem .4rem .6rem; }	
	button.button-4 { font-size: 0.75em !important; padding: .3rem .6rem .4rem .6rem; }	
	
	/* Toolbar container */
	.btn-toolbar button.button-3 { font-size: 0.85em !important; padding: .2rem .5rem .3rem .5rem; }	
	.btn-toolbar button.button-3 i { width: 16px; }	
	.btn-toolbar button.button-2 { font-size: 0.85em !important; padding: .2rem .5rem .3rem .5rem; }
	.btn-toolbar button.button-2 i { width: 16px; }	
	.btn-toolbar button.button-1 { font-size: 0.85em !important; padding: .2rem .5rem .3rem .5rem; }
	.btn-toolbar button.button-1 i { width: 16px; }	
	
	.agenda-period-container {
		display: none !important;
	}
	.pagebutton-container button.button-1 {
		font-size: 0.75em !important;
	}
	.pagebutton-container button.button-2 {
		font-size: 0.75em !important;
	}
	
	.calendar-button-container input[type="date"] {
		font-size: 0.75em !important;
		height: calc(1.25em + .45rem + 10px) !important;
	}
	.calendar-button-container h1 {
		font-size: 1.25em;
	}
	
	
	.calendar-button-container {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
	}
	
	#calendar {
		top: 50px !important;
	}
	
	/* Gift Voucher */
	body#giftvoucher .voucher_content {
		width: 330px !important;
	}	
	body#giftvoucher h1 {
		font-size: 2.5em !important;
	}	
	body#giftvoucher h2 {
		font-size: 1.25em !important;
	}
	body#giftvoucher h3 {
		font-size: 1.15em !important;
	}
	body#giftvoucher h4 {
		font-size: 1.15em !important;
	}
	body#giftvoucher a {
		font-size: 1em !important;
		white-space: nowrap;
	}	
	
	
}

@media (min-width:768px) {
	
	.agenda-period-container {
		display: none !important;
	}
	
	.calendar-button-container {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
	}
	
	#calendar {
		top: 50px !important;
	}
}


/* ---------------------------------------------------
    XS - MD
----------------------------------------------------- */

@media (max-width:991px) {
	
	.loginlogo {
		height: 150px;
	}
	
	h1 {
		font-size: 1.5em;
	}
	
	.hide-md-tcel {
		display: none;
	}
	
	.breadcrumb {
		display: none;
	}
	
	.breadcrumb-container .btn-toolbar {
		width: 100%;
	}
	
	.breadcrumb-container .btn-group {
		width: 100%;
	}
	
	.create-button-wrapper {
		display: inline-block;
		margin-right: auto;
	}
	
	.save-button-wrapper {
		display: inline-block;
		margin-right: auto;
	}
	
	main .table span.infoblock2 {
		width: 200px;
	}
	
	button.button-1, button.button-2, button.button-3 {
		font-size: .95em !important;
	}
	
	.pathfinder-mobile {
		display: block;
	}
	
}


/* ---------------------------------------------------
    LG <--
----------------------------------------------------- */

@media (max-width:1199px) {
	
	.loginlogo {
		height: 150px;
	}
	
	.hide-lg-tcel {
		display: none;
	}
	
	.pagebutton-container .btn-group {
		display: inline-block;
	}
	
}


/* ---------------------------------------------------
    LG -->
----------------------------------------------------- */

@media screen and (min-width: 1199px) {

	.loginform-wrapper {
		min-width: 350px;
	}

	.pathfinder-mobile {
		display: block;
	}
	
	.pathfinder-mobile > .col {
		max-width: 300px !important;
	}
	
}


/* ---------------------------------------------------
    XL 1
----------------------------------------------------- */

@media (max-width:1399px) {
	
	.loginlogo {
		height: 175px;
	}
	
	.login-form h1 {
		font-size: 2.5em;
		line-height: 1em;
	}
	
	.hide-xl-tcel {
		display: none;
	}

}


/* ---------------------------------------------------
    XL <--
----------------------------------------------------- */

@media (max-width:1499px) {

	.showcase {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	
	.pathfinder {
		display: none;
	}

}


/* ---------------------------------------------------
    XL -->
----------------------------------------------------- */

@media screen and (min-width: 1499px) {

	
	.pathfinder-mobile {
		display: none;
	}
	
	.pathfinder {
		display: block;
	}
	
	.showcase {
		flex: 0 0 75% !important;
		max-width: 75% !important;
	}
	
	.showcase {
		flex: 0 0 75% !important;
		max-width: 75% !important;
	}

}


/* ---------------------------------------------------
    CONTAINER
----------------------------------------------------- */

@media screen and (min-width: 1401px) {

	.container {
		max-width: 1500px !important;
	}
	
}



/* ---------------------------------------------------
    STATS
----------------------------------------------------- */

@media screen and (min-width: 992px) and (max-width: 1800px) {
	

	.statsbar ul li i {
		font-size: 30px;
		padding-right: 15px;
	}
	.statsbar ul li span.value {
		font-size: 25px;
	}
	.statsbar ul li span.value sup {
		font-size: 17px;
	}
	
}



/* ---------------------------------------------------
    IMAGES
----------------------------------------------------- */

@media screen and (min-width: 375px) and (max-width: 474px) {
	
	ul.media-gallery li.gallery-item {
		height: 110px !important;
	}
	ul.media-gallery li.photo-item {
		height: 110px !important;
	}
	
}
@media screen and (min-width: 475px) and (max-width: 575px) {
	
	ul.media-gallery li.gallery-item {
		height: 150px !important;
	}
	ul.media-gallery li.photo-item {
		height: 150px !important;
	}
	
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
	
	ul.media-gallery li.gallery-item {
		flex: 0 0 33% !important;
		max-width: 33% !important;
	}
	ul.media-gallery li.photo-item {
		flex: 0 0 33% !important;
		max-width: 33% !important;
	}
	
}
@media screen and (min-width: 1600px) and (max-width: 1899px) {
	
	ul.media-gallery li.gallery-item {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}
	ul.media-gallery li.photo-item {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}
	
}
@media screen and (min-width: 1900px) and (max-width: 2099px) {
	
	ul.media-gallery li.gallery-item {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
	ul.media-gallery li.photo-item {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
	
}
@media screen and (min-width: 2100px) {
	
	ul.media-gallery li.gallery-item {
		flex: 0 0 16.666667% !important;
		max-width: 16.666667% !important;
	}
	ul.media-gallery li.photo-item {
		flex: 0 0 16.666667% !important;
		max-width: 16.666667% !important;
	}
	
}



/* ---------------------------------------------------
    SCREEN RANGES
----------------------------------------------------- */

@media screen and (min-width: 992px) and (max-width: 1400px) {
	
	body#giftvoucher .voucher_content {
		width: 500px !important;
	}
	body#giftvoucher h1 {
		font-size: 2.5em !important;
	}	
	body#giftvoucher h2 {
		font-size: 1.25em !important;
	}
	body#giftvoucher h3 {
		font-size: 1.15em !important;
	}
	body#giftvoucher h4 {
		font-size: 1.15em !important;
	}
	body#giftvoucher a {
		font-size: 1em !important;
		white-space: nowrap;
	}	
	

	
}