/* background under fixed carousel text */
.fixed-background{
    /* border:2px black solid; */
    background-color: black;
    border-radius:10px;
    padding:10px;
    opacity:0.9;
}

/* fixed title on carousel */
.main-text
{
    position: absolute;
    top: 20px;
    width: 96.66666666666666%;
    color: #FFF;
}

/*home caption*/
h_caption{
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    font-style: italic;
    color: inherit;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*index caption*/
.h_index{
    font-size: 14px;
}

.badge-primary {
    background-color: #428bca;
}

/* map */
.mapfill {
    height: 450px; 
}

/*media query for text in mobile phones*/
@media (max-width: 550px) {
    h4 {
        font-size: 1.1em;
    }
    h_caption {
        font-size: 0.6em;
        margin-top: 5px;
        margin-bottom: 0px;
    }
    .h_index {
        font-size: 0.9em;
        margin-top: 3px;}
    .page-header {font-size: 1.6em;}
    }

/*species description thumbnail height adjustment*/
.img_height_sp{
    min-height: 239px;
}

/*to overcome safari bug for flex css*/
.flexthis{
    display:flex;
    flex-wrap:wrap;
}
.flexthis.row:before,
.flexthis.row:after {
    content:normal;
}


.vertical-align{
    display:inline-block;
    vertical-align:middle;
}


.img-wrapper{
    position: relative;
    overflow:hidden;
    height:425px;
}

.img-wrapper img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
}


/* https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025 */
.vertical-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

.horizontal-align {
    padding: 0% 20%;
    margin-left: auto;
    margin-right: auto;
}

.scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
}


 /*Override for ipad mini portrait to view in 2 columns */
@media (min-width: 740px) and (max-width: 800px) {
    .col-sm-6 {
      width: 50%;
      float: left;
    }
}
/* override for ipad mini portrait to view in 3 colulns */
@media (min-width: 740px) and (max-width: 800px) {
    .col-sm-4 {
      width: 33.3333%;
      float: left;
    }
}

/* Override Bootstrap 3 text sizes to match Bootstrap 5 */
body {
    font-size: 15px;       /* match BS5 default */
    line-height: 1.5;      /* match BS5 default */
    color: #212529;        /* match BS5 default text color */
}


/* remove padding from image to border */
/* Remove padding and border-radius from thumbnail container */
.thumbnail {
    padding: 0 !important;
}

/* Force override Bootstrap 3 container widths */
@media (min-width: 1200px) {
  .container {
    width: 1250px !important; /* default was 1170px */
  }
}