﻿
body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

@media (min-width: 768px) {
    header.masthead {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }

        header.masthead h1 {
            font-size: 3rem;
        }
}

.showcase .showcase-text {
    padding: 3rem;
    text-align:center;
}

.showcase .showcase-img {
    min-height: 20rem;
    background-size: cover;
}

@media (min-width: 768px) {
    .showcase .showcase-text {
        padding: 7rem;
    }
}

.features-icons {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

    .features-icons .features-icons-item {
        max-width: 20rem;
    }

        .features-icons .features-icons-item .features-icons-icon {
            height: 7rem;
        }

            .features-icons .features-icons-item .features-icons-icon i {
                font-size: 4.5rem;
            }

        .features-icons .features-icons-item:hover .features-icons-icon i {
            font-size: 5rem;
        }

.testimonials {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

    .testimonials .testimonial-item {
        max-width: 18rem;
    }

        .testimonials .testimonial-item img {
            max-width: 12rem;
            box-shadow: 0px 5px 5px 0px #adb5bd;
        }

.call-to-action {
    position: relative;
    background-color: #343a40;
    background: url("../Content/Images/bg-ftr.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

    .call-to-action .overlay {
        position: absolute;
        background-color: #212529;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0.3;
    }

footer.footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.cascade {
    margin-top: -1.25rem;
    margin-right: 4%;
    margin-left: 4%;
}
.gold-text {
    color: goldenrod !important;
}

.btn-unique {
    color: #fff;
    background-color: #2395 !important;
}

    .btn-unique:hover {
        color: #fff;
        background-color: #c6e3a6 !important
    }

    .btn-unique:focus,
    .btn-unique.focus {
        -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
        text-decoration-color:ghostwhite;
    }

    .btn-unique:focus,
    .btn-unique:active,
    .btn-unique.active {
        background-color: #2c0419
    }

    .btn-unique.dropdown-toggle {
        background-color: #880e4f !important
    }

        .btn-unique.dropdown-toggle:hover,
        .btn-unique.dropdown-toggle:focus {
            background-color: #9f105c !important
        }

    .btn-unique:not([disabled]):not(.disabled):active,
    .btn-unique:not([disabled]):not(.disabled).active,
    .show > .btn-unique.dropdown-toggle {
        background-color: #2c0419 !important;
        -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
    }

        .btn-unique:not([disabled]):not(.disabled):active:focus,
        .btn-unique:not([disabled]):not(.disabled).active:focus,
        .show > .btn-unique.dropdown-toggle:focus {
            -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
        }

.unique-ic {
    color: #880e4f !important
}

    .unique-ic:hover,
    .unique-ic:focus {
        color: #880e4f
    }
@media screen and (min-width: 900px) {
    notificationHeight {
        height: 100px;
        overflow:auto;
    }
}
svg#projClouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
}
svg#blueProjClouds {
    position: fixed;
    bottom: -720px;
    left: -107px;
    z-index: -10;
    width: 1820px;
    opacity: 0.2;
}
@media screen and (max-width: 992px) {
    .push-right.sidebar { 
            left: 235px !important; 
    }
}
.comunify-brand-text {    
    font-size: 1rem; 
    font-weight: 600;
    padding: 1.5rem 1rem;
    text-align: center;     
    letter-spacing: .05rem;
}

.cards-community {
    height: 16vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255 255 255 / 92%), rgba(255,255,255,0.9)), url(Images/svgs/community.svg) round;
}
.cards-referrals {
    height: 16vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255 255 255 / 92%), rgba(200 225 231 / 80%)), url(Images/svgs/add_friends_comunify.svg) round;
}
.cards-profile {
    height: 16vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255 255 255 / 92%), rgba(175 219 229 / 30%)), url(Images/svgs/page_comunify.svg) round;
}
.cards-select {
    height: 16vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(255 255 255 / 92%), rgba(175 219 229 / 30%)), url(Images/svgs/page_selecting.svg) round;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(28px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
.deleteIcon {
    cursor: pointer;
    color: #5a5c69;
}
.deleteIcon:hover{
    color:red;
    font-size:large;
}