//alerts
.alert {
    padding: 0px;
    margin-bottom: 0px;
    border:none;
    border-radius: 0px;
    color:#fff;

    h1, h2, h3, h4, p {
        color:#212224;
    }

    a {
        font-weight:bold;
        color:$base-link-color;
    }

    h2 {
        font-size:27px;
        padding-right:35px;
        @media (max-width: 641px){
            font-size:21px;
        }
    }

    h2,
    p {
        margin:0 0 7px !important;
    }

    .alertInner {
        position:relative;
        padding: 30px 15px 23px;
        margin:0 -15px;
        @media (max-width: 641px) {
            padding: 15px 15px 8px;
        }
        ul,
        ol {
            color:#212224;
            @include list();
        }
        ul {
            @include list-bullet();
        }
        ol {
            @include list-number();
        }
    }

    .close {
        opacity: 1;
        filter: alpha(opacity=100);
        top:0;
        right:0;
        color:#212224;
        text-shadow:none;
        &:hover {
            color:lighten(#212224,10%);            
            span {
                background:transparent;
            }
        }
        .glyphicon {
            border: 2px solid transparent;
        }   
        &:focus {
            outline: none;
            span {
                background:$focus-color;
            }
            .glyphicon {
                background: #000000 !important;
                color: #ffffff !important;
                border: 2px solid #000000;
            }
        } 
    }

    .btn-default{
        border-color: #212224;
        color: #212224;
        background: transparent;
        position: relative;
        padding: 10px 15px;
        font-weight: bold;
        margin: 5px 0 7px;
        font-size: 16px;
        @media (min-width: 641px) {
            font-size: 19px;
        }
        &:hover {
            background: rgba(0,0,0,.7);
            border-color: transparent;
            color: #ffffff;
        }
        &:focus {
            background: #000000 !important;
            color: #ffffff !important;
            border: 1px solid #000000 !important;
            box-shadow: none;
        }        
    }

    &-warning {
        background:#FFBF47;
    }

    &-info {
        background:#B3D9E6;
    }

    &-permanent {
        background:#FFBF47;        
        .alertInner {
            padding: 15px !important; 
            line-height: 1em;
        }
        h2, p {
            display: none !important;
        }
        a.btn-default {
            color: #000000;
            font-size:16px;
            display:block;
            background: none;
            padding: 0;
            margin:0;
            line-height: 1.3em;
            border: 2px solid transparent;
            text-decoration:underline !important;
            @media (min-width: 641px) {
                line-height: 1em;
            }
            &:hover {
                background:none;
                color: #000000;
            }
            &:focus {
                border: 2px solid #000000 !important;
                border-radius: 0;
                background: transparent !important;
                color: #000000 !important;
            }
        }
        .close {
            display:none;
            visibility: hidden;
        }
    }
}

.sectionOne,
.sectionTwo,
.sectionThree,
.sectionFour{
    .alert{
        margin-bottom:30px;

        .alertInner{
            padding: 30px 30px 23px;

            @media (max-width: 641px){
                padding: 15px 15px 8px;
            }
        }
    }
}

//mixins
@mixin alert-custom($alert-custom-color,$alert-custom-background){
    &.alert {
        color:$alert-custom-color;
        background:$alert-custom-background;

        h1, h2, h3, h4, p {
            color:$alert-custom-color;
        }

        a{
            color:$alert-custom-color;

            &:hover{
                color:lighten($alert-custom-color,10%);
            }
        }

        .close{
            color:$alert-custom-color;

            &:hover{
                color:lighten($alert-custom-color,10%);
                background:transparent;
            }
        }

        .btn-default{
            border-color:$alert-custom-color;
            color:$alert-custom-color;
            
            &:hover{
                background:rgba(0,0,0,0.1);
                border-color:$alert-custom-color;
                color:$alert-custom-color;
            }
        }
    }
}