/* CSS Document */
/** VGN OVVERRIDES */
/* updated to add covid linke styl */
.vgn-ext-component {
	display: contents;
}
[id*=inline-text] {
	display: contents;
}
.vui-preview-toolbar.x-layer,
.vui-window {
	direction: ltr;
}
.epi-mod-drg {
	margin-bottom: 0 !important;
}
/** END VGN OVVERRIDES */
html {
	min-height: 100%;
	position: relative;
}
body {
	font-family: 'GE Dinar Two', sans-serif;
	font-weight: 100;
	overflow-x: hidden;
	min-height: 100%;
	max-width: 100%;
	text-align: right;
	background: url(/file_source/qu/Featured/System/Media/bg_body.jpg) bottom no-repeat;
	background-size: contain;
}
#outterWrapper {
    overflow-x: hidden;
}
.form-control {
	font-family: sans-serif;
}
.tel {
    direction: ltr;
    display: inline-block;
}
.carousel-indicators {
	bottom: 0;
}
.navbar-brand img {
	max-width: 250px;
}
.list-inline {
    padding-right: 0;
}
.qu-bg {
	background-color: #754100;
}
.qu-light-bg {
	background-color: #9a6b37;
}
.qu-lighter-bg {
	background-color: #e0cbb4;
}
.qu-alt-bg {
	background-color: #00718f;
}
.qu-alt-light-bg {
	background-color: #2D7F90;
}
.qu-color {
	color: #754100;
}
.qu-light-color {
	color: #9a6b37;
}
.qu-lighter-color {
	color: #e0cbb4;
}
.qu-alt-color {
	color: #00718f;
}
.qu-alt-light-color {
	color: #2D7F90;
}
.bg-black {
	background-color: #000;
}
.bg-red {
    background-color: #10788f;
}
a {
	color: #00718f;
}
a:hover {
	color: #004456;
}
a.qu-bg:hover {
	background-color: #683a00;
}
a.qu-light-bg:hover {
	background-color: #855a2a;
}
a.qu-lighter-bg:hover {
	background-color: #ccb397;
}
a.qu-alt-bg:hover {
	background-color: #00495c;
}
a.qu-alt-light-bg:hover {
	background-color: #268aa0;
}
a.qu-color:hover {
	color: #683a00;
}
a.qu-light-color:hover {
	color: #855a2a;
}
a.qu-lighter-color:hover {
	color: #ccb397;
}
a.qu-alt-color:hover {
	color: #00495c;
}
a.qu-alt-light-color:hover {
	color: #268aa0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'GE Dinar Two', sans-serif;
	font-weight: 400;
}
.carousel-caption {
	position: relative;
	text-align: right;
	color: #000;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
}
.mask-2-1 {
	padding: 25% 0;
	overflow: hidden;
	position: relative;
}
.mask-14-1 {
	padding: 3.5% 0;
	overflow: hidden;
	position: relative;
}
.mask-7-3 {
	padding-top: 42.8%;
	overflow: hidden;
	position: relative;
}
[class*=mask-] img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	height: auto;
}
.mask.top img {
	bottom: auto;
}
.mask-bottom img {
	top: auto;
}
@media screen { @media (min-width: 0px) {
	@supports not (-ms-ime-align: auto) {
		[class*="mask-"] > .mask {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
		.mask > img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			overflow: hidden;
		}
		.mask.top > img {
			object-position: top;
		}
		.mask.bottom > img {
			object-position: bottom;
		}
	}
}
.font-weight-bold {
	font-weight: 500 !important;
}
.bg-light {
	background-color: #EEE !important;
}
/** HEADER START **/
#outterWrapper > header {
    direction: ltr;
}
#outterWrapper > header .navbar-nav {
    direction: rtl;
}
#outterWrapper > header .navbar-brand {
    text-align: left;
}
#mainNavigation .dropdown-item:hover, #mainNavigation .dropdown-item:focus {
	background-color: #00718f;
	color: #FFF;
}
#mainNavigation .dropdown-item:active {
	background-color: #333;
}
.nav-col-item {
	display: block;
	padding: 0.2rem 0;
	color: #000;
}
#mainNavigation > ul {
	padding: 0;
}
#mainNavigation .dropdown-toggle {
	color: #000;
	position: relative;
}
#mainNavigation .dropdown-toggle::after {
	position: absolute;
	left: 0;
        margin-top: 0.7em;
    margin-left: 0.0em;
}
[class*="col-nav"] {
	padding-left: 15px;
	padding-right: 15px;
}

@media only screen and (min-width : 768px) {
[class*="col-nav"] {
	left: auto;
	right: 0 !important;
	font-size: 0.9rem;
}
.nav-col {
	position: static;
}
#outterWrapper {
	padding-bottom: 350px;
}
footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
#footer-contents {
	position: relative;
	top: 5rem;
}
}
@media only screen and (min-width: 992px) {
.col-nav-2 {
	width: 460px;
}
.col-nav-3 {
	width: 705px;
}
.col-nav-4 {
	width: 950px;
}
#mainNavigation .nav-link {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 1 rem;
	border: 1px solid transparent;
	background-color: transparent;
}
#mainNavigation .nav-item:hover .nav-link, #mainNavigation .nav-item:focus .nav-link, #mainNavigation .nav-link:focus, #mainNavigation .dropdown.show .nav-link {
	border: 1px solid #CCC;
	border-bottom: 1px solid white;
}
#mainNavigation .dropdown {
	z-index: 100;
}
#mainNavigation .dropdown-toggle::after {

	position: absolute;
	left: 0;

}
#mainNavigation .dropdown:hover .dropdown-menu, #mainNavigation .dropdown:focus .dropdown-menu, #mainNavigation .nav-link:focus + .dropdown-menu {
	display: block;
	left: auto;
}
#mainNavigation .dropdown-menu {
	border: 1px solid #CCC;
	margin-top: -1px;
	border-radius: 0;
}
}
@media screen { @media (min-width: 0px) {
	#mainNavigation .dropdown-menu {
        z-index: -1;
    }
}
_:-ms-lang(x), #mainNavigation .dropdown-menu {
        z-index: 100 !important;
}
.dropdown-menu {
	text-align: right;
}
#topNavigation {
	height: 34px;
}
#topNavigation:before, #topNavigation:after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	display: block;
	width: 41px;
	background-repeat: no-repeat;
	background-position: top;
}
#topNavigation:before {
	right: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border.png);
	background-position: left;
}
#topNavigation:after {
	left: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border.png);
	background-position: right;
}
    
    #topNavigation:before {
	right: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border.png);
	background-position: left;
}
#topNavigation:after {
	left: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border.png);
	background-position: right;
}
    #topNavigation-covid:before, #topNavigation-covid:after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	display: block;
	width: 41px;
	background-repeat: no-repeat;
	background-position: top;
}
#topNavigation-covid:before {
	right: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border-red.png);
	background-position: left;
}
#topNavigation-covid:after {
	left: 100%;
	background-image: url(/file_source/qu/global/images/menu/top-nav-border-red.png);
	background-position: right;
}

	.text-covid{padding-right: 50px}
}
}
#search-navigation {
}
#search-navigation > input {
	height: 25px;
	border-radius: .2rem 0 0 .2rem;
}
#search-navigation > button {
	border-radius: 0 .2rem .2rem 0;
	height: 25px;
}
.bg-info {
    background-color: #00718f!important;
}

/** HEADER END **/
@media only screen and (min-width: 768px) {
/* FOR ANY DESKTOP */
.carousel-caption {
	position: absolute;
	color: #FFF;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000', GradientType=0 ); /* IE6-9 */
	left: 0;
	right: 0;
	bottom: 0;
}
}
/* FOOTER */
.BTNSocial {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: 5px;
	background-color: #00718f;
	color: #FFF;
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 2px;
	text-align: center;
	padding-top: 7px;
}
.BTNSocial:hover {
	background-color: #2D7F90;
}
.no-click {
    pointer-events: none;
}
#qubottomphotos {
    direction: ltr;
}
@media only screen and (max-width: 575px) {
.fluid-sm {
	max-width: none;
}
}

@media only screen and (max-width: 767px) {
/* FOR ANYTHING NOT DESKTOP*/
.navbar-brand {
	padding: 0;
}
.fluid-md {
	max-width: none;
}
}

@media only screen and (max-width: 991px) {
.fluid-lg {
	max-width: none;
}
}

@media only screen and (max-width: 1199px) {
.fluid-xl {
	max-width: none;
}
}
.carousel-indicators li {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	/* box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); */
}

/** THOSE ARE BOOTSTRAP ADDITIONAL FEATURES **/
/* Responsive Border border-{breakpoint}-{side} border-{breakpoint}-{side}-none side: top, right, bottom, left, x, y */
.border-x { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }

.border-y { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }

@media (min-width: 576px) { .border-sm-top { border-top: 1px solid #dee2e6; }
  .border-sm-right { border-right: 1px solid #dee2e6; }
  .border-sm-bottom { border-bottom: 1px solid #dee2e6; }
  .border-sm-left { border-left: 1px solid #dee2e6; }
  .border-sm-top-none { border-top: 0 !important; }
  .border-sm-right-none { border-right: 0 !important; }
  .border-sm-bottom-none { border-bottom: 0 !important; }
  .border-sm-left-none { border-left: 0 !important; }
  .border-sm-x { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }
  .border-sm-y { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } }

@media (min-width: 768px) { .border-md-top { border-top: 1px solid #dee2e6; }
  .border-md-right { border-right: 1px solid #dee2e6; }
  .border-md-bottom { border-bottom: 1px solid #dee2e6; }
  .border-md-left { border-left: 1px solid #dee2e6; }
  .border-md-top-none { border-top: 0 !important; }
  .border-md-right-none { border-right: 0 !important; }
  .border-md-bottom-none { border-bottom: 0 !important; }
  .border-md-left-none { border-left: 0 !important; }
  .border-md-x { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }
  .border-md-y { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } }

@media (min-width: 992px) { .border-lg-top { border-top: 1px solid #dee2e6; }
  .border-lg-right { border-right: 1px solid #dee2e6; }
  .border-lg-bottom { border-bottom: 1px solid #dee2e6; }
  .border-lg-left { border-left: 1px solid #dee2e6; }
  .border-lg-top-none { border-top: 0 !important; }
  .border-lg-right-none { border-right: 0 !important; }
  .border-lg-bottom-none { border-bottom: 0 !important; }
  .border-lg-left-none { border-left: 0 !important; }
  .border-lg-x { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }
  .border-lg-y { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } }

@media (min-width: 1200px) { .border-xl-top { border-top: 1px solid #dee2e6; }
  .border-xl-right { border-right: 1px solid #dee2e6; }
  .border-xl-bottom { border-bottom: 1px solid #dee2e6; }
  .border-xl-left { border-left: 1px solid #dee2e6; }
  .border-xl-top-none { border-top: 0 !important; }
  .border-xl-right-none { border-right: 0 !important; }
  .border-xl-bottom-none { border-bottom: 0 !important; }
  .border-xl-left-none { border-left: 0 !important; }
  .border-xl-x { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }
  .border-xl-y { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } }

/* Responsive Negative Top, Bottom Margings mn{side}-{breakpoint}-{size} sides: t, b, r, l size used $spacers array (can be extended). By defaults they are 1-5. */
.mtn-0 { margin-top: 0 !important; }

.mbn-0 { margin-bottom: 0 !important; }

.mrn-0 { margin-top: 0 !important; }

.mln-0 { margin-bottom: 0 !important; }

.mtn-1 { margin-top: -0.25rem !important; }

.mbn-1 { margin-bottom: -0.25rem !important; }

.mrn-1 { margin-top: -0.25rem !important; }

.mln-1 { margin-bottom: -0.25rem !important; }

.mtn-2 { margin-top: -0.5rem !important; }

.mbn-2 { margin-bottom: -0.5rem !important; }

.mrn-2 { margin-top: -0.5rem !important; }

.mln-2 { margin-bottom: -0.5rem !important; }

.mtn-3 { margin-top: -1rem !important; }

.mbn-3 { margin-bottom: -1rem !important; }

.mrn-3 { margin-top: -1rem !important; }

.mln-3 { margin-bottom: -1rem !important; }

.mtn-4 { margin-top: -1.5rem !important; }

.mbn-4 { margin-bottom: -1.5rem !important; }

.mrn-4 { margin-top: -1.5rem !important; }

.mln-4 { margin-bottom: -1.5rem !important; }

.mtn-5 { margin-top: -3rem !important; }

.mbn-5 { margin-bottom: -3rem !important; }

.mrn-5 { margin-top: -3rem !important; }

.mln-5 { margin-bottom: -3rem !important; }

@media (min-width: 576px) { .mtn-sm-0 { margin-top: 0 !important; }
  .mbn-sm-0 { margin-bottom: 0 !important; }
  .mrn-sm-0 { margin-top: 0 !important; }
  .mln-sm-0 { margin-bottom: 0 !important; }
  .mtn-sm-1 { margin-top: -0.25rem !important; }
  .mbn-sm-1 { margin-bottom: -0.25rem !important; }
  .mrn-sm-1 { margin-top: -0.25rem !important; }
  .mln-sm-1 { margin-bottom: -0.25rem !important; }
  .mtn-sm-2 { margin-top: -0.5rem !important; }
  .mbn-sm-2 { margin-bottom: -0.5rem !important; }
  .mrn-sm-2 { margin-top: -0.5rem !important; }
  .mln-sm-2 { margin-bottom: -0.5rem !important; }
  .mtn-sm-3 { margin-top: -1rem !important; }
  .mbn-sm-3 { margin-bottom: -1rem !important; }
  .mrn-sm-3 { margin-top: -1rem !important; }
  .mln-sm-3 { margin-bottom: -1rem !important; }
  .mtn-sm-4 { margin-top: -1.5rem !important; }
  .mbn-sm-4 { margin-bottom: -1.5rem !important; }
  .mrn-sm-4 { margin-top: -1.5rem !important; }
  .mln-sm-4 { margin-bottom: -1.5rem !important; }
  .mtn-sm-5 { margin-top: -3rem !important; }
  .mbn-sm-5 { margin-bottom: -3rem !important; }
  .mrn-sm-5 { margin-top: -3rem !important; }
  .mln-sm-5 { margin-bottom: -3rem !important; } }

@media (min-width: 768px) { .mtn-md-0 { margin-top: 0 !important; }
  .mbn-md-0 { margin-bottom: 0 !important; }
  .mrn-md-0 { margin-top: 0 !important; }
  .mln-md-0 { margin-bottom: 0 !important; }
  .mtn-md-1 { margin-top: -0.25rem !important; }
  .mbn-md-1 { margin-bottom: -0.25rem !important; }
  .mrn-md-1 { margin-top: -0.25rem !important; }
  .mln-md-1 { margin-bottom: -0.25rem !important; }
  .mtn-md-2 { margin-top: -0.5rem !important; }
  .mbn-md-2 { margin-bottom: -0.5rem !important; }
  .mrn-md-2 { margin-top: -0.5rem !important; }
  .mln-md-2 { margin-bottom: -0.5rem !important; }
  .mtn-md-3 { margin-top: -1rem !important; }
  .mbn-md-3 { margin-bottom: -1rem !important; }
  .mrn-md-3 { margin-top: -1rem !important; }
  .mln-md-3 { margin-bottom: -1rem !important; }
  .mtn-md-4 { margin-top: -1.5rem !important; }
  .mbn-md-4 { margin-bottom: -1.5rem !important; }
  .mrn-md-4 { margin-top: -1.5rem !important; }
  .mln-md-4 { margin-bottom: -1.5rem !important; }
  .mtn-md-5 { margin-top: -3rem !important; }
  .mbn-md-5 { margin-bottom: -3rem !important; }
  .mrn-md-5 { margin-top: -3rem !important; }
  .mln-md-5 { margin-bottom: -3rem !important; } }

@media (min-width: 992px) { .mtn-lg-0 { margin-top: 0 !important; }
  .mbn-lg-0 { margin-bottom: 0 !important; }
  .mrn-lg-0 { margin-top: 0 !important; }
  .mln-lg-0 { margin-bottom: 0 !important; }
  .mtn-lg-1 { margin-top: -0.25rem !important; }
  .mbn-lg-1 { margin-bottom: -0.25rem !important; }
  .mrn-lg-1 { margin-top: -0.25rem !important; }
  .mln-lg-1 { margin-bottom: -0.25rem !important; }
  .mtn-lg-2 { margin-top: -0.5rem !important; }
  .mbn-lg-2 { margin-bottom: -0.5rem !important; }
  .mrn-lg-2 { margin-top: -0.5rem !important; }
  .mln-lg-2 { margin-bottom: -0.5rem !important; }
  .mtn-lg-3 { margin-top: -1rem !important; }
  .mbn-lg-3 { margin-bottom: -1rem !important; }
  .mrn-lg-3 { margin-top: -1rem !important; }
  .mln-lg-3 { margin-bottom: -1rem !important; }
  .mtn-lg-4 { margin-top: -1.5rem !important; }
  .mbn-lg-4 { margin-bottom: -1.5rem !important; }
  .mrn-lg-4 { margin-top: -1.5rem !important; }
  .mln-lg-4 { margin-bottom: -1.5rem !important; }
  .mtn-lg-5 { margin-top: -3rem !important; }
  .mbn-lg-5 { margin-bottom: -3rem !important; }
  .mrn-lg-5 { margin-top: -3rem !important; }
  .mln-lg-5 { margin-bottom: -3rem !important; } }

@media (min-width: 1200px) { .mtn-xl-0 { margin-top: 0 !important; }
  .mbn-xl-0 { margin-bottom: 0 !important; }
  .mrn-xl-0 { margin-top: 0 !important; }
  .mln-xl-0 { margin-bottom: 0 !important; }
  .mtn-xl-1 { margin-top: -0.25rem !important; }
  .mbn-xl-1 { margin-bottom: -0.25rem !important; }
  .mrn-xl-1 { margin-top: -0.25rem !important; }
  .mln-xl-1 { margin-bottom: -0.25rem !important; }
  .mtn-xl-2 { margin-top: -0.5rem !important; }
  .mbn-xl-2 { margin-bottom: -0.5rem !important; }
  .mrn-xl-2 { margin-top: -0.5rem !important; }
  .mln-xl-2 { margin-bottom: -0.5rem !important; }
  .mtn-xl-3 { margin-top: -1rem !important; }
  .mbn-xl-3 { margin-bottom: -1rem !important; }
  .mrn-xl-3 { margin-top: -1rem !important; }
  .mln-xl-3 { margin-bottom: -1rem !important; }
  .mtn-xl-4 { margin-top: -1.5rem !important; }
  .mbn-xl-4 { margin-bottom: -1.5rem !important; }
  .mrn-xl-4 { margin-top: -1.5rem !important; }
  .mln-xl-4 { margin-bottom: -1.5rem !important; }
  .mtn-xl-5 { margin-top: -3rem !important; }
  .mbn-xl-5 { margin-bottom: -3rem !important; }
  .mrn-xl-5 { margin-top: -3rem !important; }
  .mln-xl-5 { margin-bottom: -3rem !important; } }

/* Responsive Headings {h1-h6}-{breakpoint} */
@media (min-width: 576px) { .h1-sm { font-size: 2.5rem; }
  .h2-sm { font-size: 2rem; }
  .h3-sm { font-size: 1.75rem; }
  .h4-sm { font-size: 1.5rem; }
  .h5-sm { font-size: 1.25rem; }
  .h6-sm { font-size: 1rem; } }

@media (min-width: 768px) { .h1-md { font-size: 2.5rem; }
  .h2-md { font-size: 2rem; }
  .h3-md { font-size: 1.75rem; }
  .h4-md { font-size: 1.5rem; }
  .h5-md { font-size: 1.25rem; }
  .h6-md { font-size: 1rem; } }

@media (min-width: 992px) { .h1-lg { font-size: 2.5rem; }
  .h2-lg { font-size: 2rem; }
  .h3-lg { font-size: 1.75rem; }
  .h4-lg { font-size: 1.5rem; }
  .h5-lg { font-size: 1.25rem; }
  .h6-lg { font-size: 1rem; } }

@media (min-width: 1200px) { .h1-xl { font-size: 2.5rem; }
  .h2-xl { font-size: 2rem; }
  .h3-xl { font-size: 1.75rem; }
  .h4-xl { font-size: 1.5rem; }
  .h5-xl { font-size: 1.25rem; }
  .h6-xl { font-size: 1rem; } }

/* Responsive Displays display-{breakpoint}-{size} */
@media (min-width: 576px) { .display-sm-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
  .display-sm-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
  .display-sm-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
  .display-sm-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } }

@media (min-width: 768px) { .display-md-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
  .display-md-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
  .display-md-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
  .display-md-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } }

@media (min-width: 992px) { .display-lg-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
  .display-lg-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
  .display-lg-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
  .display-lg-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } }

@media (min-width: 1200px) { .display-xl-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }
  .display-xl-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }
  .display-xl-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }
  .display-xl-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } }

/* Responsive Font Size fs-{breakpoint}-{size} */
@media (min-width: 576px) { .fs-sm-1 { font-size: 1.4rem; }
  .fs-sm-2 { font-size: 1.15rem; }
  .fs-sm-3 { font-size: 0.9rem; }
  .fs-sm-4 { font-size: 0.8rem; } }

@media (min-width: 768px) { .fs-md-1 { font-size: 1.4rem; }
  .fs-md-2 { font-size: 1.15rem; }
  .fs-md-3 { font-size: 0.9rem; }
  .fs-md-4 { font-size: 0.8rem; } }

@media (min-width: 992px) { .fs-lg-1 { font-size: 1.4rem; }
  .fs-lg-2 { font-size: 1.15rem; }
  .fs-lg-3 { font-size: 0.9rem; }
  .fs-lg-4 { font-size: 0.8rem; } }

@media (min-width: 1200px) { .fs-xl-1 { font-size: 1.4rem; }
  .fs-xl-2{ font-size: 1.15rem; }
  .fs-xl-3 { font-size: 0.9rem; }
  .fs-xl-4 { font-size: 0.8rem; } }

/* Responsive width, height, min-height w-{breakpoint}-{size} h-{breakpoint}-{size} hm-{breakpoint}-{size} sizes: 25, 50, 75, 100, auto, $sizes, gutter (only for w) */
.hm-25 { min-height: 25% !important; }

.hm-50 { min-height: 50% !important; }

.hm-75 { min-height: 75% !important; }

.hm-100 { min-height: 100% !important; }

.hm-auto { min-height: auto !important; }

.w-gutter { width: calc(100% - 30px); }

@media (min-width: 576px) { .w-sm-25 { width: 25% !important; }
  .w-sm-50 { width: 50% !important; }
  .w-sm-75 { width: 75% !important; }
  .w-sm-100 { width: 100% !important; }
  .w-sm-auto { width: auto !important; }
  .h-sm-25 { height: 25% !important; }
  .h-sm-50 { height: 50% !important; }
  .h-sm-75 { height: 75% !important; }
  .h-sm-100 { height: 100% !important; }
  .h-sm-auto { height: auto !important; }
  .hm-sm-25 { min-height: 25% !important; }
  .hm-sm-50 { min-height: 50% !important; }
  .hm-sm-75 { min-height: 75% !important; }
  .hm-sm-100 { min-height: 100% !important; }
  .hm-sm-auto { min-height: auto !important; }
  .w-sm-gutter { width: calc(100% - 30px); } }

@media (min-width: 768px) { .w-md-25 { width: 25% !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-75 { width: 75% !important; }
  .w-md-100 { width: 100% !important; }
  .w-md-auto { width: auto !important; }
  .h-md-25 { height: 25% !important; }
  .h-md-50 { height: 50% !important; }
  .h-md-75 { height: 75% !important; }
  .h-md-100 { height: 100% !important; }
  .h-md-auto { height: auto !important; }
  .hm-md-25 { min-height: 25% !important; }
  .hm-md-50 { min-height: 50% !important; }
  .hm-md-75 { min-height: 75% !important; }
  .hm-md-100 { min-height: 100% !important; }
  .hm-md-auto { min-height: auto !important; }
  .w-md-gutter { width: calc(100% - 30px); } }

@media (min-width: 992px) { .w-lg-25 { width: 25% !important; }
  .w-lg-50 { width: 50% !important; }
  .w-lg-75 { width: 75% !important; }
  .w-lg-100 { width: 100% !important; }
  .w-lg-auto { width: auto !important; }
  .h-lg-25 { height: 25% !important; }
  .h-lg-50 { height: 50% !important; }
  .h-lg-75 { height: 75% !important; }
  .h-lg-100 { height: 100% !important; }
  .h-lg-auto { height: auto !important; }
  .hm-lg-25 { min-height: 25% !important; }
  .hm-lg-50 { min-height: 50% !important; }
  .hm-lg-75 { min-height: 75% !important; }
  .hm-lg-100 { min-height: 100% !important; }
  .hm-lg-auto { min-height: auto !important; }
  .w-lg-gutter { width: calc(100% - 30px); } }

@media (min-width: 1200px) { .w-xl-25 { width: 25% !important; }
  .w-xl-50 { width: 50% !important; }
  .w-xl-75 { width: 75% !important; }
  .w-xl-100 { width: 100% !important; }
  .w-xl-auto { width: auto !important; }
  .h-xl-25 { height: 25% !important; }
  .h-xl-50 { height: 50% !important; }
  .h-xl-75 { height: 75% !important; }
  .h-xl-100 { height: 100% !important; }
  .h-xl-auto { height: auto !important; }
  .hm-xl-25 { min-height: 25% !important; }
  .hm-xl-50 { min-height: 50% !important; }
  .hm-xl-75 { min-height: 75% !important; }
  .hm-xl-100 { min-height: 100% !important; }
  .hm-xl-auto { min-height: auto !important; }
  .w-xl-gutter { width: calc(100% - 30px); } }

/* Responsive font-weight fw-{breakpoint}-{size} sizes: light, normal, bold */
.fw-light { font-weight: 300; }

.fw-normal { font-weight: 400; }

.fw-bold { font-weight: 700; }

@media (min-width: 576px) { .fw-sm-light { font-weight: 300; }
  .fw-sm-normal { font-weight: 400; }
  .fw-sm-bold { font-weight: 700; } }

@media (min-width: 768px) { .fw-md-light { font-weight: 300; }
  .fw-md-normal { font-weight: 400; }
  .fw-md-bold { font-weight: 700; } }

@media (min-width: 992px) { .fw-lg-light { font-weight: 300; }

  .fw-lg-normal { font-weight: 400; }
  .fw-lg-bold { font-weight: 700; } }

@media (min-width: 1200px) { .fw-xl-light { font-weight: 300; }
  .fw-xl-normal { font-weight: 400; }
  .fw-xl-bold { font-weight: 700; } }

/* Responsive line-height lh-{breakpoint}-{size} sizes: initial, md, lg */
.lh-initial { line-height: initial; }

.lh-md { line-height: 1.5; }

.lh-lg { line-height: 2; }

@media (min-width: 576px) { .lh-sm-initial { line-height: initial; }
  .lh-sm-md { line-height: 1.5; }
  .lh-sm-lg { line-height: 2; } }

@media (min-width: 768px) { .lh-md-initial { line-height: initial; }
  .lh-md-md { line-height: 1.5; }
  .lh-md-lg { line-height: 2; } }

@media (min-width: 992px) { .lh-lg-initial { line-height: initial; }
  .lh-lg-md { line-height: 1.5; }
  .lh-lg-lg { line-height: 2; } }

@media (min-width: 1200px) { .lh-xl-initial { line-height: initial; }
  .lh-xl-md { line-height: 1.5; }
  .lh-xl-lg { line-height: 2; } }

/* Responsive buttons btn-{breakpoint}-{size} sizes: sm, md, lg */
@media (min-width: 576px) { .btn-sm-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0; }
  .btn-sm-md { padding: calc(0.5rem * 0.75) calc(1rem * 0.75); font-size: calc(1.25rem * 0.75); line-height: calc(1.5 * 0.75); border-radius: 0; }
  .btn-sm-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0; } }

@media (min-width: 768px) { .btn-md-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0; }
  .btn-md-md { padding: calc(0.5rem * 0.75) calc(1rem * 0.75); font-size: calc(1.25rem * 0.75); line-height: calc(1.5 * 0.75); border-radius: 0; }
  .btn-md-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0; } }

@media (min-width: 992px) { .btn-lg-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0; }
  .btn-lg-md { padding: calc(0.5rem * 0.75) calc(1rem * 0.75); font-size: calc(1.25rem * 0.75); line-height: calc(1.5 * 0.75); border-radius: 0; }
  .btn-lg-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0; } }

@media (min-width: 1200px) { .btn-xl-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0; }
  .btn-xl-md { padding: calc(0.5rem * 0.75) calc(1rem * 0.75); font-size: calc(1.25rem * 0.75); line-height: calc(1.5 * 0.75); border-radius: 0; }
  .btn-xl-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0; } }