﻿
.font16px {
    font-size: 16px;
    letter-spacing: 3px;
}

.header {
    height: 120px;
}

.my-border {
    border: 2px solid #64ff00;
    border-radius: 10px;
}

.header-nav {
    left: 0;
    top: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 999;
}

    .header-nav.bg-color {
        background-color: #fff;
    }

    .header-nav.menu-bg {
        height: 120px;
    }

.bottom-right {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

a {
    color: #28a745;
    text-decoration: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

    a:hover {
        color: #888;
        text-decoration: none;
        cursor: pointer;
    }

.my-img {
    border: 3px solid #79e76d;
    border-radius: 10px;
    width:200px;
}

/*Title element*/
.my-heading {
    margin-bottom: 100px;
}

    .my-heading h1, .my-heading h2, .my-heading h3, .my-heading h4, .my-heading h5 {
        color: #64ff00;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: bold;
    }

    .my-heading h1 {
        margin: 60px 0;
        font-size: 55px;
    }

    .my-heading h2 {
        font-size: 40px;
    }

    .my-heading h3 {
        font-size: 25px;
    }

    .my-heading h4 {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 5px 0;
    }

    .my-heading h5 {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 5px 0;
    }

    .my-heading .my-heading-title-explanation, .footer .my-heading-title-explanation {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 3px;
        margin-bottom: 20px;
        text-transform: capitalize;
    }

    .my-heading .my-heading-title-explanation-2 {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .my-heading .my-heading-title-explanation-3 {
        font-size: 15px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    .my-heading .my-heading-button-wrapper {
        margin-top: 30px;
    }

    .my-heading .my-heading-button {
        display: inline-block;
        background: #000;
        border-radius: 10px;
        padding: 5px 15px;
        border: 3px solid #64ff00;
        text-transform: uppercase;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        transition: all 0.6s;
    }

        .my-heading .my-heading-button:hover {
            color: #79e76d;
            transform: scale(1.2);
        }

    .my-heading .my-heading-banner-img-wrapper {
        margin: 0 auto;
        display: inline-block;
        width: 600px;
    }

    .my-heading .banner-img {
        border: none;
        border-radius: 0;
        box-shadow: none;
        vertical-align: middle;
        max-width: 130%;
        position: absolute;
        left: -120px;
        top: 0;
    }

    .my-heading .product-img {
        width: 300px;
        border: 2px solid #fff;
        border-radius: 5px;
    }

/*My bullet list*/
ul.my-bullet-list > li {
    list-style: disc;
}

ol.my-bullet-list > li {
    list-style: decimal;
}

/*End my bullet list*/

.my-feedback {
    display: none;
    position: fixed;
    top: 0%;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    z-index: 100002;
}

/*spinner*/

.overlay {
    display: none;
}

.confirm-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
    z-index: 100002;
}

.spinner {
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -25px;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 100002;
}

    .spinner > div {
        background-color: #00aeef;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


/*bootstrap modification*/
.table {
    color: #fff;
}

.well {
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: none;
    margin: 1em;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    text-align: center !important;
}

/*My file group*/

.my-file-group {
    color: #fff;
    width: 100% !important;
}

    .my-file-group a {
        color: #28a745;
        text-decoration: none;
        -o-transition: all .3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -ms-transition: all .3s;
    }

    .my-file-group .list-group-item, .my-file-group .card-header {
        padding: 0.2rem;
    }
/*My file group end*/
