ridaomar-bootstrap-helper-utilities/dist/ridaomar-bootstrap-helper-utilities.css

This library was developed by CSS3 only and created to be as a utility library for Bootstrap v4 and v5.

/*!
Library Name: Ridaomar Bootstrap Helper Utilities
Author: Rida Omar
Author URI: https://ridaomar.ly
Description: This library was created as a utility library for Bootstrap v4 and v5.
Version: 2.7.1
Tags: Bootstrap 5, Bootrstap 4, Backgrounds, texts, glassmorphism, shadows, animations.
*/


/* ******************************************* \
/* ---------------- (INDEX) ------------------ \
**    1. Shadow                               **
**    2. Labels                               **
**    3. Images                               **
**    4. Backgrounds                          **
**    5. Positions                            **
**    6. Animations                           **
**    7. texts                                **
**    8. borders                              **
**    9. Sizes                                **
**    10. Overflow                            **
**    11. Tables                              **
**    12. Cursors                             **
**    13. Columns                             **
**    14. Custom Styles                       **
\*--------------------------------------------*/
/* ******************************************* \


/*|***************************************** |*/
/*|---------------  1. Shadow ---------------|*\
/*|***************************************** |*/

.hover-shadow:hover {
    box-shadow: 0px 0px 25px #28272730 !important;
}

.shadow-light-sm {
    box-shadow: 0rem 0 3rem 6px rgb(255 255 255 / 24%);
}


/*|***************************************** |*/
/*|---------------  2. Labels ---------------|*\
/*|***************************************** |*/

.top-label {
    position: absolute;
    top: -34px;
    right: 0;
    background: #fc442f;
    padding: 10px 15px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0 25px;
}


/*|***************************************** |*/
/*|---------------  3. Images ---------------|*\
/*|***************************************** |*/

.img-zoom {
    overflow: hidden;
    height: 250px;
    width: 100%;
}

.full-size-img {
    object-fit: cover;
}

.img-zoom img {
    transition: all 0.5s;
}

.img-zoom-container:hover img {
    transform: scale(1.2);
}

.img-overlay-container {
    position: relative;
}

.img-overlay-body {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.42);
    opacity: 0;
    transition: 0.5s all;
}

.img-overlay-text {
    position: absolute;
    bottom: 10%;
}

.img-overlay-container:hover .img-overlay-body {
    opacity: 1;
}

.hover-img-show-hide:hover .main-img {
    display: none;
}

.hover-img-show-hide:hover .secondry-img {
    display: inline !important;
}

.img-hover-colorize-container img {
    filter: grayscale(100);
}

.img-hover-colorize-container img:hover {
    filter: grayscale(0);
}


/*|***************************************** |*/
/*|-------------  4. Backgrounds ------------|*\
/*|***************************************** |*/

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.bg-fixed {
    background-attachment: fixed;
}

.bg-black {
    background: #000;
}


/*|***************************************** |*/
/*|--------------  5. Positions -------------|*\
/*|***************************************** |*/

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}


/*|***************************************** |*/
/*|-------------  6. Animations -------------|*\
/*|***************************************** |*/

.transition-medium {
    transition: all 0.7s !important;
}

.transition-fast {
    transition: all 0.4s !important;
}

.scale-up-hover:hover {
    transform: scale(1.1);
}

.rotate-x-360-hover:hover {
    transform: rotateX(360deg);
}

.rotate-y-360-hover:hover {
    transform: rotateY(360deg);
}


/*|***************************************** |*/
/*|----------------  7. texts ---------------|*\
/*|***************************************** |*/

.font-size-larger {
    font-size: larger;
}

.text-justify {
    text-align: justify;
}

.text-small {
    font-size: 0.3em;
}

.text-smaller {
    font-size: 0.2em;
}

.font-weight-normal {
    font-weight: normal !important;
}

.font-weight-lighter {
    font-weight: lighter;
}

.font-weight-bold {
    font-weight: bold !important;
}

.font-weight-bolder {
    font-weight: bolder !important;
}

.headline-animated {
    position: relative;
}

.headline-animated::after {
    content: "";
    position: absolute;
    width: 45px;
    bottom: -1px;
    right: 0;
    background-color: #323538;
    height: 2px;
    z-index: 1;
    transition: 0.3s all;
}

.headline-animated-container:hover .headline-animated::after {
    width: 100%;
}

.text-twitter { color: #00aced; color: rgb(0, 172, 237); }
.text-facebook { color: #3b5998; color: rgb(59, 89, 152); }
.text-googleplus { color: #dd4b39; color: rgb(221, 75, 57); }
.text-rss { color: #f26522; color: rgb(242, 101, 34); }
.text-pinterest { color: #cb2027; color: rgb(203, 32, 39); }
.text-linkedin { color: #007bb6; color: rgb(0, 123, 182); }
.text-youtube { color: #bb0000; color: rgb(187, 0, 0); }
.text-vimeo { color: #1ab7ea; color: rgb(26, 183, 234); }
.text-tumblr { color: #32506d; color: rgb(50, 80, 109); }
.text-instagram { color: #bc2a8d; color: rgb(188, 42, 141); }
.text-flickr { color: #ff0084; color: rgb(255, 0, 132); }
.text-dribbble { color: #ea4c89; color: rgb(234, 76, 137); }
.text-quora { color: #a82400; color: rgb(168, 36, 0); }
.text-foursquare { color: #0072b1; color: rgb(0, 114, 177)}
.text-forrst { color: #5B9A68; color: rgb(91, 154, 104); }
.text-vk { color: #45668e; color: rgb(69, 102, 142); }
.text-wordpress { color: #21759b; color: rgb(33, 117, 155); }
.text-stumbleupon { color: #EB4823; color: rgb(235, 72, 35); }
.text-yahoo { color: #7B0099; color: rgb(123, 0, 153); }
.text-blogger { color: #fb8f3d; color: rgb(251, 143, 61); }
.text-soundcloud { color: #ff3a00; color: rgb(255, 58, 0); }


/*|***************************************** |*/
/*|---------------  8. Borders --------------|*\
/*|***************************************** |*/

.rounded-lg {
    border-radius: 24px !important;
}

.rounded-top-lg {
    border-radius: 24px 24px 0 0 !important;
}

.rounded-bottom-lg {
    border-radius: 0 0 24px 24px !important;
}

.rounded-right-lg {
    border-radius: 0 24px 24px 0 !important;
}

.rounded-left-lg {
    border-radius: 24px 0 0 24px !important;
}

/*|***************************************** |*/
/*|---------------  9. Sizes ----------------|*\
/*|***************************************** |*/

.h-100-vh {
    height: 100vh;
}

.w-100-vw {
    width: 100vw;
}

.h-max-content {
    height: max-content;
}

.w-max-content {
    width: max-content;
}

.h-fit-content {
    height: fit-content;
}

.w-fit-content {
    width: fit-content;
}

.h-min-content {
    height: min-content;
}

.w-min-content {
    width: min-content;
}

.m-h-100 {
    min-height: 100%;
}

.m-w-100 {
    min-width: 100%;
}

.m-h-100-vh {
    min-height: 100vh;
}

.m-w-100-vw {
    min-width: 100vw;
}

/*|***************************************** |*/
/*|--------------  10. Overflow -------------|*\
/*|***************************************** |*/

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-visible {
    overflow: visible;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-y-visible {
    overflow-y: visible;
}

/*|***************************************** |*/
/*|---------------  11. Tables --------------|*\
/*|***************************************** |*/

.table-lg th, .table-lg td {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}

/*|***************************************** |*/
/*|---------------  12. Cursors -------------|*\
/*|***************************************** |*/

.cursor-alias {
    cursor: alias;
}

.cursor-all-scroll {
    cursor: all-scroll;
}

.cursor-auto {
    cursor: auto;
}

.cursor-cell {
    cursor: cell;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-copy {
    cursor: copy;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-default {
    cursor: default;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-grab {
    cursor: grab;
}

.cursor-grabbing {
    cursor: grabbing;
}

.cursor-help {
    cursor: help;
}

.cursor-move {
    cursor: move;
}

.cursor-n-resize {
    cursor: n-resize;
}

.cursor-ne-resize {
    cursor: ne-resize;
}

.cursor-nesw-resize {
    cursor: nesw-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nw-resize {
    cursor: nw-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

.cursor-no-drop {
    cursor: no-drop;
}

.cursor-none {
    cursor: none;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-progress {
    cursor: progress;
}

.cursor-row-resize {
    cursor: row-resize;
}

.cursor-s-resize {
    cursor: s-resize;
}

.cursor-se-resize {
    cursor: se-resize;
}

.cursor-sw-resize {
    cursor: sw-resize;
}

.cursor-text {
    cursor: text;
}

.cursor-w-resize {
    cursor: w-resize;
}

.cursor-wait {
    cursor: wait;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}


/*|***************************************** |*/
/*|--------------  13. Columns --------------|*\
/*|***************************************** |*/

@media print {
    .col-print-1 {width:8%;  float:left;}
    .col-print-2 {width:16%; float:left;}
    .col-print-3 {width:25%; float:left;}
    .col-print-4 {width:33%; float:left;}
    .col-print-5 {width:42%; float:left;}
    .col-print-6 {width:50%; float:left;}
    .col-print-7 {width:58%; float:left;}
    .col-print-8 {width:66%; float:left;}
    .col-print-9 {width:75%; float:left;}
    .col-print-10{width:83%; float:left;}
    .col-print-11{width:92%; float:left;}
    .col-print-12{width:100%; float:left;}
}

/*|***************************************** |*/
/*|------------  14. Custom Styles ----------|*\
/*|***************************************** |*/

.glassmorphism {
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.diagonal-bottom-element {
    position: absolute;
    bottom: -3px;
    width: 100%;
    height: 10vw;
}