/* Grid */
 @media only screen and (min-width: 768px) {
.col.col5{flex: 0 0 20%;width: 20%;}
.col.col7{flex: 0 0 14.285714%;width: 14.285714%;}
.col.col8{flex: 0 0 12.5%;width: 12.5%;}
.col.col9{flex: 0 0 11.111111%;width: 11.111111%;}
.col.col10{flex: 0 0 10%;width: 10%;}
.col.col11{flex: 0 0 9.090909%;width: 9.090909%;}
 }
  @media only screen and (max-width: 768px) {
.col.col5, .col.col7, .col.col8, .col.col9, .col.col10, .col.col11{flex: 0 0 100%;width: 100%;}
 }
/* * */


 /* Fa Icon */
 .fa_icon:before{padding:0px 10px;}
 /* * */


 /* Borders */
 .border-2{border-width:2px !important}
 .border-3{border-width:3px !important}
 .border-4{border-width:4px !important}
 .border-5{border-width:5px !important}
 .border-6{border-width:6px !important}
 .border-7{border-width:7px !important}
 .border-8{border-width:8px !important}
 .border-9{border-width:9px !important}
 .border-10{border-width:10px !important}
 /* * */


/* Borders */
 .theme-ZOHA .border-indigo{border-color: #6610f2 !important;}
 .theme-ZOHA .border-purple{border-color: #6f42c1 !important;}
 .theme-ZOHA .border-pink{border-color: #e83e8c !important;}
 .theme-ZOHA .border-orange{border-color: #fd7e14 !important;}
 .theme-ZOHA .border-teal{border-color: #20c997 !important;}

/* Background */
 .theme-ZOHA .bg-indigo{background-color: #6610f2 !important;}
 .theme-ZOHA .bg-purple{background-color: #6f42c1 !important;}
 .theme-ZOHA .bg-pink{background-color: #e83e8c !important;}
 .theme-ZOHA .bg-orange{background-color: #fd7e14 !important;}
 .theme-ZOHA .bg-teal{background-color: #20c997 !important;}

/* Filters */
 .filter-white, .filter-white-hover:hover{filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(36deg) brightness(1000%) contrast(101%);}
 .filter-gray, .filter-gray-hover:hover{filter: invert(71%) sepia(4%) saturate(466%) hue-rotate(169deg) brightness(89%) contrast(84%);}
 .filter-red, .filter-red-hover:hover {filter: invert(32%) sepia(71%) saturate(6951%) hue-rotate(350deg) brightness(103%) contrast(101%);}
 .filter-green, .filter-green-hover:hover{filter: invert(60%) sepia(72%) saturate(451%) hue-rotate(121deg) brightness(89%) contrast(91%);}
 .filter-blue, .filter-blue-hover:hover{filter: invert(49%) sepia(61%) saturate(2017%) hue-rotate(176deg) brightness(99%) contrast(91%);}

/* opacity */
.opacity-0{opacity: 0}
.opacity-10{opacity: 0.1}
.opacity-20{opacity: 0.2}
.opacity-30{opacity: 0.3}
.opacity-40{opacity: 0.4}
.opacity-50{opacity: 0.5}
.opacity-60{opacity: 0.6}
.opacity-70{opacity: 0.7}
.opacity-80{opacity: 0.8}
.opacity-90{opacity: 0.9}


/* aspect-ratio */
.ratio-1 { aspect-ratio: 1}
.ratio-4-3 { aspect-ratio: 4/3}
.ratio-3-2 { aspect-ratio: 3/2}
.ratio-16-9 { aspect-ratio: 16/9}
.ratio-21-9 { aspect-ratio: 21/9}
.ratio-3-4 { aspect-ratio: 3/4}
.ratio-2-3 { aspect-ratio: 2/3}
.ratio-9-16 { aspect-ratio: 9/16}
.ratio-9-21 { aspect-ratio: 9/21}
.object-contain { object-fit: contain}
.object-cover { object-fit: cover}

@media (min-width: 576px) {
 .ratio-sm-1 { aspect-ratio: 1}
 .ratio-sm-4-3 { aspect-ratio: 4/3}
 .ratio-sm-3-2 { aspect-ratio: 3/2}
 .ratio-sm-16-9 { aspect-ratio: 16/9}
 .ratio-sm-21-9 { aspect-ratio: 21/9}
 .ratio-sm-3-4 { aspect-ratio: 3/4}
 .ratio-sm-2-3 { aspect-ratio: 2/3}
 .ratio-sm-9-16 { aspect-ratio: 9/16}
 .ratio-sm-9-21 { aspect-ratio: 9/21}
 .object-sm-contain { object-fit: contain}
 .object-sm-cover { object-fit: cover}
}
@media (min-width: 768px) {
 .ratio-md-1 { aspect-ratio: 1}
 .ratio-md-4-3 { aspect-ratio: 4/3}
 .ratio-md-3-2 { aspect-ratio: 3/2}
 .ratio-md-16-9 { aspect-ratio: 16/9}
 .ratio-md-21-9 { aspect-ratio: 21/9}
 .ratio-md-3-4 { aspect-ratio: 3/4}
 .ratio-md-2-3 { aspect-ratio: 2/3}
 .ratio-md-9-16 { aspect-ratio: 9/16}
 .ratio-md-9-21 { aspect-ratio: 9/21}
 .object-md-contain { object-fit: contain}
 .object-md-cover { object-fit: cover}
}
@media (min-width: 992px) {
 .ratio-lg-1 { aspect-ratio: 1}
 .ratio-lg-4-3 { aspect-ratio: 4/3}
 .ratio-lg-3-2 { aspect-ratio: 3/2}
 .ratio-lg-16-9 { aspect-ratio: 16/9}
 .ratio-lg-21-9 { aspect-ratio: 21/9}
 .ratio-lg-3-4 { aspect-ratio: 3/4}
 .ratio-lg-2-3 { aspect-ratio: 2/3}
 .ratio-lg-9-16 { aspect-ratio: 9/16}
 .ratio-lg-9-21 { aspect-ratio: 9/21}
 .object-lg-contain { object-fit: contain}
 .object-lg-cover { object-fit: cover}
}
@media (min-width: 1200px) {
 .ratio-xl-1 { aspect-ratio: 1}
 .ratio-xl-4-3 { aspect-ratio: 4/3}
 .ratio-xl-3-2 { aspect-ratio: 3/2}
 .ratio-xl-16-9 { aspect-ratio: 16/9}
 .ratio-xl-21-9 { aspect-ratio: 21/9}
 .ratio-xl-3-4 { aspect-ratio: 3/4}
 .ratio-xl-2-3 { aspect-ratio: 2/3}
 .ratio-xl-9-16 { aspect-ratio: 9/16}
 .ratio-xl-9-21 { aspect-ratio: 9/21}
 .object-xl-contain { object-fit: contain}
 .object-xl-cover { object-fit: cover}
}
@media (min-width: 1400px) {
 .ratio-xxl-1 { aspect-ratio: 1}
 .ratio-xxl-4-3 { aspect-ratio: 4/3}
 .ratio-xxl-3-2 { aspect-ratio: 3/2}
 .ratio-xxl-16-9 { aspect-ratio: 16/9}
 .ratio-xxl-21-9 { aspect-ratio: 21/9}
 .ratio-xxl-3-4 { aspect-ratio: 3/4}
 .ratio-xxl-2-3 { aspect-ratio: 2/3}
 .ratio-xxl-9-16 { aspect-ratio: 9/16}
 .ratio-xxl-9-21 { aspect-ratio: 9/21}
 .object-xxl-contain { object-fit: contain}
 .object-xxl-cover { object-fit: cover}
}

/* FILTER: BLUR */
.blur-1{backdrop-filter:blur(1px)}
.blur-2{backdrop-filter:blur(2px)}
.blur-3{backdrop-filter:blur(3px)}
.blur-4{backdrop-filter:blur(4px)}
.blur-5{backdrop-filter:blur(5px)}
.blur-6{backdrop-filter:blur(6px)}
.blur-7{backdrop-filter:blur(7px)}
.blur-8{backdrop-filter:blur(8px)}
.blur-9{backdrop-filter:blur(9px)}
.blur-10{backdrop-filter:blur(10px)}

/* FONT WEIGHT */
.fw-100 {font-weight:100 !important}
.fw-200 {font-weight:200 !important}
.fw-300 {font-weight:300 !important}
.fw-400 {font-weight:400 !important}
.fw-500 {font-weight:500 !important}
.fw-600 {font-weight:600 !important}
.fw-700 {font-weight:700 !important}
.fw-800 {font-weight:800 !important}
.fw-900 {font-weight:900 !important}

/* POSITION */
@media (min-width: 576px) {
 .position-sm-static { position: static !important; }
 .position-sm-relative { position: relative !important; }
 .position-sm-absolute {  position: absolute !important; }
 .position-sm-fixed { position: fixed !important; }
 .position-sm-sticky {  position: sticky !important; }
}

@media (min-width: 768px) {
 .position-md-static {  position: static !important; }
 .position-md-relative {  position: relative !important; }
 .position-md-absolute {  position: absolute !important; }
 .position-md-fixed {  position: fixed !important; }
 .position-md-sticky {  position: sticky !important; }
}

@media (min-width: 992px) {
 .position-lg-static {  position: static !important; }
 .position-lg-relative {  position: relative !important; }
 .position-lg-absolute {  position: absolute !important; }
 .position-lg-fixed {  position: fixed !important; }
 .position-lg-sticky {  position: sticky !important; }
}

@media (min-width: 1200px) {
 .position-xl-static {  position: static !important; }
 .position-xl-relative {  position: relative !important; }
 .position-xl-absolute {  position: absolute !important; }
 .position-xl-fixed { position: fixed !important; }
 .position-xl-sticky {  position: sticky !important; }
}

@media (min-width: 1400px) {
 .position-xxl-static {  position: static !important; }
 .position-xxl-relative {  position: relative !important; }
 .position-xxl-absolute {  position: absolute !important; }
 .position-xxl-fixed { position: fixed !important; }
 .position-xxl-sticky {  position: sticky !important; }
}

/* WIDTH */
@media (min-width: 576px) {
 .w-sm-auto{width: auto!important;}
 .w-sm-25{width: 25%!important;}
 .w-sm-50{width: 50%!important;}
 .w-sm-75{width: 75%!important;}
 .w-sm-100{width: 100%!important;}
}
@media (min-width: 768px) {
 .w-md-auto{width: auto!important;}
 .w-md-25{width: 25%!important;}
 .w-md-50{width: 50%!important;}
 .w-md-75{width: 75%!important;}
 .w-md-100{width: 100%!important;}
}
@media (min-width: 992px) {
 .w-lg-auto{width: auto!important;}
 .w-lg-25{width: 25%!important;}
 .w-lg-50{width: 50%!important;}
 .w-lg-75{width: 75%!important;}
 .w-lg-100{width: 100%!important;}
}
@media (min-width: 1200px) {
 .w-xl-auto{width: auto!important;}
 .w-xl-25{width: 25%!important;}
 .w-xl-50{width: 50%!important;}
 .w-xl-75{width: 75%!important;}
 .w-xl-100{width: 100%!important;}
}
@media (min-width: 1400px) {
 .w-xxl-auto{width: auto!important;}
 .w-xxl-25{width: 25%!important;}
 .w-xxl-50{width: 50%!important;}
 .w-xxl-75{width: 75%!important;}
 .w-xxl-100{width: 100%!important;}
}