﻿
/*#region Banner Style One*/
.banner-style-one-accent {
    position: absolute;
    right: -20%;
    top: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    background-color: #ccc;
}

.banner-style-one-overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

.auto-background:nth-child(odd) .banner-style-one-overlay {
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(248,248,248,1) 40%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(248,248,248,1) 40%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(248,248,248,1) 40%,rgba(255,255,255,0) 100%);
}


.auto-background:nth-child(even) .banner-style-one-overlay {
    background: -moz-linear-gradient(left, rgba(243,243,243,1) 0%, rgba(248,248,248,1) 40%, rgba(243,243,243,0) 100%);
    background: -webkit-linear-gradient(left, rgba(243,243,243,1) 0%,rgba(248,248,248,1) 40%,rgba(243,243,243,0) 100%);
    background: linear-gradient(to right, rgba(243,243,243,1) 0%,rgba(248,248,248,1) 40%,rgba(243,243,243,0) 100%);
}

@media (max-width: 991px) {

    .auto-background:nth-child(odd) .banner-style-one-overlay {
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(250,250,250,0) 41%, rgba(255,255,255,1) 100%) !important;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(250,250,250,0) 41%,rgba(255,255,255,1) 100%) !important;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(250,250,250,0) 41%,rgba(255,255,255,1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f3f3f3',GradientType=0 ) !important;
        height: 401px;
    }

    .auto-background:nth-child(even) .banner-style-one-overlay {
        background: -moz-linear-gradient(top, rgba(243,243,243,0) 0%, rgba(250,250,250,0) 41%, rgba(243,243,243,1) 100%) !important;
        background: -webkit-linear-gradient(top, rgba(243,243,243,0) 0%,rgba(250,250,250,0) 41%,rgba(243,243,243,1) 100%) !important;
        background: linear-gradient(to bottom, rgba(243,243,243,0) 0%,rgba(250,250,250,0) 41%,rgba(243,243,243,1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f3f3f3',GradientType=0 ) !important;
        height: 401px;
    }

    .banner-style-one-accent {
        right: 0;
        top: 0;
        height: 400px;
    }

    .banner-style-one-container {
        padding-top: 400px;
    }
}

@media (max-width:320px) {

    .banner-style-one-overlay {
        height: 301px;
    }

    .banner-style-one-container {
        padding-top: 300px;
    }

    .banner-style-one-accent {
        height: 300px;
    }
}

/*#endregion*/

/*#region Warning Banner*/
.warning-banner {
    box-shadow: 0px 0px 50px rgba(0,0,0,0.2);
    z-index: 3;
}
/*#endregion*/

/*#region Banner Style Two*/

.banner-style-two-accent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.banner-style-two-overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}

/*#endregion*/

@media (max-width:767px) {

    .callout-banner h3, 
    .warning-banner h3{
        font-size: 1em;
    }
}