/*==========================================
/Image Banners
==========================================*/

/*Sets the default style for the image banners*/
.banner-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    padding: 0;
}

.banner {
    background-color: var(--netral-color-off-white);
    color: var(--netral-color-white);
    display: inline-block;
    height: auto;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.banner > img {
    height: auto;
    width: 100%;
    z-index: -1;
}

.banner-info-container {
    background-color: var(--primary-color);
    bottom: 0;
    height: 66px;
    left: 0;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    right: 0;
    top: auto;
    z-index: 1;
}

.banner:hover .banner-info-container {
    background-color: rgba(33, 55, 109, 0.9);
    cursor: pointer;
    height: 100%;
    top: 0;
}

.banner:hover img {
    filter: blur(8px);
}

.banner-info-container > h3 {
    color: var(--neutral-color-white);
  	font-size: 2.25rem;
}
  
.banner-info-container > h3 > span {
  	float: right;
  	font-size: 1.5rem;
  	position: relative;
    top: 14px;
}

.banner-info-container > p {
    color: var(--neutral-color-white);
    border-top: 2px solid var(--accent-color-blue);
    margin: 34px 0 20px 0;
    padding: 10px 0;
}

a.banner-no-image {
	border-radius: 4px;  
}

.list-2 > .banner {
    width: 50%;
}

.list-3 > .banner {
    width: 33.33%;
}
  
.list-3-margin > .banner, .list-3-margin > .banner-no-image {
  	margin-left:.50%;
  	margin-right:.50%;
  	margin-bottom: 10px;
  	width: 32.33%;
}

.list-4 > .banner {
    width: 25%;
}

.list-4-margin > .banner, .list-4-margin > .banner-no-image {
  	margin-bottom: 10px;
    width: 24.25%;
}

.list-4-margin > .banner:not(:last-child) {
    margin-right: 1%;
}

.list-4-margin > .banner-no-image {
	margin-left:.375%;
  	margin-right:.375%;
}

.list-5 > .banner {
    width: 20%;
}

/*Optional, .small can be added with .banner when using .list-3 or more to decrease font sizes*/
.small h3 {
    font-size: 1.3125rem;
    line-height: 21px !important;
}
  
.small .banner-info-container > h3 > span {
  	float: right;
  	font-size: 1rem;
  	position: relative;
    top: 4px;
}

.small p {
    font-size: 0.75rem;
    margin: 20px 0 20px 0;
}

.small .banner-info-container {
    padding: 10px;
    height: 41px;
}

@media screen and (max-width: 1199px) {
    .banner-info-container {
        height: 52px;
    }
  
    .banner-info-container > h3 {
      	font-size: 1.5rem;
        line-height: 32px;
    }
  
  	.banner-info-container > h3 > span {
  		float: right;
  		font-size: 1.5rem;
  		position: relative;
    	top: 6px;
	}
}
  
@media screen and (max-width: 1024px) {
	.list-4 > .banner {
    	width: 50%;
	}  
}

@media screen and (max-width: 768px) {
    .banner, .banner-no-image {
        width: 100% !important;
        margin: 0 !important;
    }
  
    .banner-container {
        flex-direction: column;
        margin: 0 auto;
      	max-width: 546px;
        width: 100%;
    }
  
    .banner-info-container {
        height: 41px;
    }
  
    .banner-info-container > h3 {
        line-height: 21px;
    }
  
    .banner-info-container > p {
        color: var(--neutral-color-white);
        font-size: inherit;
    }
  
    .small h3 {
        font-size: 1.3125rem;
        line-height: 21px !important;
    }
  	.list-3-margin > .banner, .list-3-margin > .banner-no-image, .list-4-margin > .banner, .list-4-margin > .banner-no-image {
      	margin-bottom: 10px !important;
  	}
}

@media screen and (max-width: 425px) {
    .banner, .banner-no-image {
        width: 100% !important;
        margin: 0 !important;
    }
  
    .banner-container {
        flex-direction: column;
        margin: 0;
        width: 100%;
    }
  
    .banner-info-container {
        height: 41px;
        padding: 10px;
    }
  
    .banner-info-container > h3 {
      	font-size: 1.3125rem;
        line-height: 21px;
    }
  
  	.banner-info-container > h3 > span {
  		float: right;
  		font-size: 1rem;
  		position: relative;
    	top: 4px;
	}
}