/* your styles go here */

.box-image-text .image {
  min-height: 200px;
  max-height: 200px;
}

.box-simple {
  min-height: 230px;
}

.container {
  font-size: 1.4em;
}


.flex-container {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  // margin-right: 20px;
  flex-flow: row wrap;
}

.flex-container > .flex-column {
  flex: 1;
  padding: 0px;
  min-width: 160px;
  max-width: 30%;
}

#all {
  position: relative;
  min-height: 100vh;
}

#content {
    margin-bottom: 5rem;
}

#heading-breadcrumbs {
    background: url('../img/banners/New-banner-example.jpg') center center repeat;
    background-size: cover;
    padding: 2em 0;
    padding-top: 12em;
    padding-bottom: 1em;
    margin-bottom: 3em;
    margin-top: -11em;
}

@media only screen and (max-width: 750px) {
    
    #heading-breadcrumbs {
        padding: 2em 0;
        padding-top: 7em;
        padding-bottom: 0.7em;
        margin-bottom: 3em;
        margin-top: -11em;
    }

    .dropdown {
        border: 1px solid lightgray;
        background-color: rgba(255, 255, 255, .9)
    }
    
}

.navbar-affixed-top.affix {
    box-shadow: none;
}

.navbar-affixed-top.affix-top > #navbar {
    background-color: transparent;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 60%, rgba(255,255,255,.98) 100%);
    height: 15rem;
}

.navbar-affixed-top.affix > #navbar {
    background-color: transparent;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 60%, rgba(255,255,255,.95) 100%);
    height: 7em;
}

.navbar-brand.home > img.hidden-xs {
    height: 55px;
}
.navbar-brand.home > img.visible-xs {
    height: 40px;
}

.navbar-toggle {
    background-color: rgba(255, 255, 255, .7);
    border-radius: 10%;
}

#all {
    background-color: #e0efff;
}

/* begin styling for boxes */

#frontpage-boxes {
    overflow: hidden;
}
#frontpage-boxes > .flex-column {
    flex: 1 0 21%;
    border-collapse: collapse;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    margin-top: -1px;
    margin-left: -1px;
}

#frontpage-boxes > .flex-column > center {
    padding: 10%
}

@media only screen and (max-width: 690px) {
    
    #frontpage-boxes > .flex-column {
        flex: 1 0 35%;
        min-width: 50%;
    }
    
    #frontpage-boxes > .flex-column > center {
        padding: 5%
    }
}
@media only screen and (max-width: 450px) {
    
    #frontpage-boxes {
        flex-direction: column;
    }
    
    #frontpage-boxes > .flex-column {
        flex: 1;
        min-width: initial;
        max-width: initial;
        border: none;
    }
    
    #frontpage-boxes > .flex-column > center {
        padding: 0;
    }
    
    #frontpage-boxes > .flex-column > center > figure > a {
        width: 100%;
        height: 100px;
        display: block;
    }
    
    #frontpage-boxes > .flex-column > center > figure > a > img {
        height: 100px;
        object-fit: cover;
    }
    
    #frontpage-boxes > .flex-column > center > figure > figcaption {
        height: 100px;
        margin-top: -100px;
    }
    
    #frontpage-boxes > .flex-column > center > figure > figcaption > h4 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }
}

/* end styling for boxes */