/* to model socials based on the content
    by Jesse Fender SEII
    Feb 7 2023
 */
/* Card css is an example of what the CUBE process COULD be, while allowing for it to be a component for css...
    Author: Jesse Fender SEII
    Date: 02/13/2023
 */
/* Css Chip / custom check box ability... Will hve to have a js component
    author: Jesse Fender SEII
    date: 02/13/2023
 */
/* This file is to overwrite the bootstrap column small to do for ultra small screen view port when smaller than 420px and a few tweaks to tablet size...
    Author: Jesse Fender SEII
    Date: 02/14/2023
 */




/* Global declaration of the font face name (Font-Awesome Brand) */
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../font-awesome/webfonts/fa-brands-400.eot");
    src: url("../font-awesome/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../font-awesome/webfonts/fa-brands-400.woff2") format("woff2"), url("../font-awesome/webfonts/fa-brands-400.woff") format("woff"), url("../font-awesome/webfonts/fa-brands-400.ttf") format("truetype"), url("../font-awesome/webfonts/fa-brands-400.svg#fontawesome") format("svg"); 
}

body {margin-bottom: 3rem;}


::-webkit-scrollbar{
    width: 0.5em;
}
::-webkit-scrollbar-track{
    background: #FFFFFF;
    /*background: transparent;*//* doesnt work*/
}
::-webkit-scrollbar-thumb{
    background: #424242;
}
::-webkit-scrollbar-thumb:hover{
    background:#ccc;
    outline: 2px solid #424242;
    /*cursor: grab;*/ /* doesnt work*/
}


/* Composition */
    /* Chip Stuff */
        .chip-container{
            width: 100%;
        }
        
        .chip {
            border-radius: 0;
            border: 1px solid #eee;
            padding: 0;
            margin: 0;
            display: flex;
            width: 100%;
            justify-content: space-between;
            height: 37.5px;
            margin-bottom: 5px;
            box-shadow: none;
            transition: box-shadow .75s;
        }
    /* Social Stuff */
        .socials-bar {
            margin: 0;
            padding: 0;
        }

        .socials-bar a {
            color: transparent;
            background: transparent;
            margin: 0;
            padding: 0;
            text-decoration: none !important;
        }
    /* Card Stuff */
        .src-card {
            border: 1px solid #eee;
            border-radius: 0;
        }

/* Utility */
    /* Social Stuff */
        .transparent-social{
            background: transparent !important;
        }

        /*.force-white-color{*/
        /*    color: #fff !important;*/
        /*}*/

        /*.force-light-color{*/
        /*    color: #fefefe !important;*/
        /*}*/

        /*.force-light-gr-color{*/
        /*    color: #aaaaaa !important;*/
        /*}*/

        /*.force-gray-color{*/
        /*    color: #666 !important;*/
        /*}*/

        /*.force-dark-gr-color{*/
        /*    color: #404040 !important;*/
        /*}*/

        /*.force-dark-color{*/
        /*    color: #262626 !important;*/
        /*}*/

        /*.transparent-social.fs-15 {*/
        /*    font-size: 15px !important;*/
        /*}*/

        /*.transparent-social.fs-20 {*/
        /*    font-size: 20px !important;*/
        /*}*/

        /*.transparent-social.fs-25 {*/
        /*    font-size: 25px !important;*/
        /*}*/

        /*.transparent-social.fs-30 {*/
        /*    font-size: 30px !important;*/
        /*}*/

        /*.transparent-social.fs-35 {*/
        /*    font-size: 35px !important;*/
        /*}*/
    
    /* Font Weight */
    /*    .fw-1 {*/
    /*        font-weight: 100;*/
    /*    }*/

    /*    .fw-2 {*/
    /*        font-weight: 500;*/
    /*    }*/

    /*    .fw-3 {*/
    /*        font-weight: 700;*/
    /*    }*/

    /*    .fw-4 {*/
    /*        font-weight: 900;*/
    /*    }*/

    /* Font Sizing */
    /*    .fs-h1 {*/
    /*        font-size: 18pt;*/
    /*    }*/

    /*    .fs-h2 {*/
    /*        font-size: 16pt;*/
    /*    }*/

    /*    .fs-h3 {*/
    /*        font-size: 14pt;*/
    /*    }*/

    /*    .fs-p {*/
    /*        font-size: 12pt;*/
    /*    }*/

    /* Button Text Color */
    /*    .button-text-color-white {*/
    /*        color: #ffffff;*/
    /*    }*/

    /*    .button-text-color-light {*/
    /*        color: #fefefe;*/
    /*    }*/

    /*    .button-text-color-light-gr {*/
    /*        color: #aaaaaa;*/
    /*    }*/

    /*    .button-text-color-gray {*/
    /*        color: #666666;*/
    /*    }*/

    /*    .button-text-color-dark-gr {*/
    /*        color: #404040;*/
    /*    }*/

    /*    .button-text-color-dark {*/
    /*        color: #262626;*/
    /*    }*/

    /* Button Background Color */
    /*    .button-bg-color-light {*/
    /*        background: #fefefe;*/
    /*    }*/

    /*    .button-bg-color-light-gr {*/
    /*        background: #aaaaaa;*/
    /*    }*/

    /*    .button-bg-color-gray {*/
    /*        background: #666666;*/
    /*    }*/

    /*    .button-bg-color-dark-gr {*/
    /*        background: #404040;*/
    /*    }*/

    /*    .button-bg-color-dark {*/
    /*        background: #262626;*/
    /*    }*/
    /*    */
    /*    .button-bg-color-red {*/
    /*        background: #ff2600;*/
    /*    }*/
    /*    */
    /*    .button-bg-color-blue {*/
    /*        background: #0550ff;*/
    /*    }*/
    /*    */
    /*    .button-bg-color-green {*/
    /*        background: #07c207;*/
    /*    }*/
    /*    */
    /*    .button-bg-color-yellow {*/
    /*        background: #dee906;*/
    /*    }*/
    /*    */
    /*    .button-bg-color-cyan {*/
    /*        background: #00c3ff;*/
    /*    }*/
    /*    !* active + hover colors *!*/
    /*        .button-bg-color-light:not(.no-hover):hover,*/
    /*        .button-bg-color-light:not(.no-hover):active,*/
    /*        .button-bg-color-light:not(.no-hover):focus {*/
    /*            background: #adadad;*/
    /*        }*/

    /*        .button-bg-color-light-gr:not(.no-hover):hover,*/
    /*        .button-bg-color-light-gr:not(.no-hover):active,*/
    /*        .button-bg-color-light-gr:not(.no-hover):focus {*/
    /*            background: #888888;*/
    /*        }*/

    /*        .button-bg-color-gray:not(.no-hover):hover,*/
    /*        .button-bg-color-gray:not(.no-hover):active,*/
    /*        .button-bg-color-gray:not(.no-hover):focus {*/
    /*            background: #444444;*/
    /*        }*/

    /*        .button-bg-color-dark-gr:not(.no-hover):hover,*/
    /*        .button-bg-color-dark-gr:not(.no-hover):active,*/
    /*        .button-bg-color-dark-gr:not(.no-hover):focus {*/
    /*            background: #202020;*/
    /*        }*/

    /*        .button-bg-color-dark:not(.no-hover):hover,*/
    /*        .button-bg-color-dark:not(.no-hover):active,*/
    /*        .button-bg-color-dark:not(.no-hover):focus {*/
    /*            background: #141414;*/
    /*        }*/
    /*        */
    /*        .button-bg-color-red:not(.no-hover):hover,*/
    /*        .button-bg-color-red:not(.no-hover):active,*/
    /*        .button-bg-color-red:not(.no-hover):focus {*/
    /*            background: #d72101;*/
    /*        }*/
    /*        */
    /*        .button-bg-color-blue:not(.no-hover):hover,*/
    /*        .button-bg-color-blue:not(.no-hover):active,*/
    /*        .button-bg-color-blue:not(.no-hover):focus {*/
    /*            background: #053ec2;*/
    /*        }*/
    /*        */
    /*        .button-bg-color-green:not(.no-hover):hover,*/
    /*        .button-bg-color-green:not(.no-hover):active,*/
    /*        .button-bg-color-green:not(.no-hover):focus {*/
    /*            background: #068f06;*/
    /*        }*/
    /*        */
    /*        .button-bg-color-yellow:not(.no-hover):hover,*/
    /*        .button-bg-color-yellow:not(.no-hover):active,*/
    /*        .button-bg-color-yellow:not(.no-hover):focus {*/
    /*            background: #adb601;*/
    /*        }*/
    /*        */
    /*        .button-bg-color-cyan:not(.no-hover):hover,*/
    /*        .button-bg-color-cyan:not(.no-hover):active,*/
    /*        .button-bg-color-cyan:not(.no-hover):focus {*/
    /*            background: #02afe3;*/
    /*        }*/
    /* layout */
    /*    .left-align {*/
    /*        text-align: left;*/
    /*    }*/
    /*    .center-align {*/
    /*        text-align: center;*/
    /*    }*/
    /*    .right-align {*/
    /*        text-align: right;*/
    /*    }*/
    /*    .justify-align {*/
    /*        text-align: justify;*/
    /*    }*/

/* Block */
    /* Chip Stuff */
        .chip[aria-checked="true"] {
            background-color: blue;
            color: whitesmoke;
            box-shadow: none;
            transition: box-shadow .5s;
        }

        .chip:hover, .chip:focus {
            border-color:blue;
            box-shadow: 3px 2px 5px blue;
            cursor: pointer;
            transition: box-shadow .75s;
        }

        .chip:active {
            box-shadow: none;
            transition: box-shadow .5s;
        }

        .chip:active, .chip:focus {
            /* undo this if you remove the box-shadow property from .chip on focus and hover */
            outline: none;
        }

        .chip img {
            width: 50px;
            max-width: 50px;
            max-height: 50px;
        }

        .chip :not(img) {
            margin: 0;
            padding: 0;
            /* vertical-align: middle; */
            line-height: 2;
            padding-right: 5px;
            align-self: center;
            width: 100%;
            width: -webkit-fill-available;
            text-align: center;
        }

        .chip.no-image  {
            justify-content: center;
            align-items: center;
        }
        
        .chip.no-image > * {
            margin-left: 50px;
        }

    /* Social Stuff */
        .circle {
            border-radius: 50%;
            padding: 5px 7px;
            vertical-align:text-bottom;
        }

        .rounded-square {
            border-radius: 15%;
            padding: 1px 3px;
            font-size: 25px;
            vertical-align: bottom;
        }

        .square{
            border-radius: 0;
            padding: 1px 3px;
            font-size: 25px;
            vertical-align: bottom;
        }

        .facebook {
            color: white;
            background-color: #097ceb;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .facebook:before {
            content: "\f39e"; 
        }

        .twitter {
            color: #1d9bf0;
            background-color: #eff3f4;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .twitter:before {
            content: "\f099"; 
        }

        .linkedin {
            color: #0a66c2;
            background-color: white;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .linkedin:before {
            content: "\f0e1"; 
        }

        .youtube {
            color: red;
            background-color: white;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .youtube:before {
            content: "\f167"; 
        }

        .paypal{
            color: #0070e0;
            background-color: whitesmoke;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .paypal:before {
            content: "\f1ed"; 
        }

        .stripe{
            color: white;
            background-color: blueviolet;
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .stripe:before {
            content: "\f429"; 
        }

    /* Card Stuff */
    /*    .button-container {*/
    /*        width: 100%;*/
    /*        display: inline-block;*/
    /*    }*/

    /*    button, [type=submit], [type=reset], [type=button], [role=button] {*/
    /*        border: none;*/
    /*        border-radius: 0;*/
    /*        padding: 5px 10px 5px 10px;*/
    /*    }*/

    /*    .button-link {*/
    /*        !*display button as link*!*/
    /*        text-decoration: none;*/
    /*        color: blue;*/
    /*        background: transparent !important;*/
    /*    }*/
    /*    */
    /*    .button-link:hover, .button-link:active, .button-link:focus {*/
    /*        !*display button as link*!*/
    /*        text-decoration: underline;*/
    /*        color: darkblue;*/
    /*    }*/

        .header > img {
            width: 100%;
            width: inherit;
            max-height: 130px;
        }

        .header.bordered {
            border-bottom: 1px solid #eee;
        }

        .price-block {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
        }

        .header {
            width: 100%;
        }

        .body {
            width: 100%;
            padding: 1rem;
        }

/* Exception */
    /* Social Stuff */
        .circle.stripe:before {
            content: "\f42a" !important;
        }

        .instagram{
            color: white;
            background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
            font-family: 'Font Awesome 5 Brands';
            font-weight: 400; 
        }

        .instagram:before {
            content: "\f16d"; 
        }

/* Media Queries */
    /* Mobile phone screens */
        @media (max-width: 420px) {
            /*testing this*/
            /*[class^="col"], [class^="offset"] {*/
            /*    display: block;*/
            /*    width: 100%;*/
            /*    max-width: 100%;*/
            /*    margin: 0;*/
            /*    flex: unset;*/
            /*}*/

            /*.fs-h1 {*/
            /*    font-size: 18pt;*/
            /*}*/

            /*.fs-h2 {*/
            /*    font-size: 16pt;*/
            /*}*/

            /*.fs-h3 {*/
            /*    font-size: 14pt;*/
            /*}*/

            /*.fs-p {*/
            /*    font-size: 12pt;*/
            /*}*/
        }
        @media (max-width: 515px)
        {
            .hero,.hero-text
            {
                display:none;
            }
        }
    /* Tablet screens */
        @media (max-width: 769px) and (min-width: 421px) {

            /*.fs-h1,.fs-h2,.fs-h3{*/
            /*    font-size: 12pt;*/
            /*}*/
            /*.fs-p {*/
            /*    font-size: 10pt;*/
            /*}*/
        }