/*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

body.pwa-offline
{
    background-image: url(../img/offline.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25%;
}
.spinner
{
    position: relative;

    overflow: hidden;

    width: 40px;
    height: 40px;
    margin: 50vh auto;

    -webkit-animation: sk-rotate 2.0s infinite linear;
            animation: sk-rotate 2.0s infinite linear;
    text-align: center;
}
.dot1,
.dot2
{
    position: absolute;
    top: 0;

    display: inline-block;

    width: 60%;
    height: 60%;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
            animation: sk-bounce 2.0s infinite ease-in-out;

    border-radius: 100%;
    background-color: #333;
}
.dot2
{
    top: auto;
    bottom: 0;

    -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
}
@-webkit-keyframes sk-rotate
{
    100%
    {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes sk-rotate
{
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);;
    }
}
@-webkit-keyframes sk-bounce
{
    0%,
    100%
    {
        -webkit-transform: scale(.0);
    }
    50%
    {
        -webkit-transform: scale(1.0);
    }
}
@keyframes sk-bounce
{
    0%,
    100%
    {
        -webkit-transform: scale(.0);
                transform: scale(.0);
    }
    50%
    {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}

.jumbotron h1,
.jumbotron .lead
{
    text-shadow: 1px 1px 0 #000, 2px 2px 0 #000;
}
.pagination .page-link
{
    color: #057245;
}
.page-item.active .page-link
{
    color: #fff;
    border-color: #057245;
    background-color: #057245;
}
.contents article a img
{
    border: 1px solid #f4f4f4;
}
#call-to-action ul li a
{
    color: #fff;
}
.brand_separator
{
    width: 6rem;
}
.brand_separator hr
{
    margin: 1.0rem auto;

    border: 1px solid #fff;
}
footer a,
footer a:hover,
footer a:focus
{
    text-decoration: underline;

    color: #f4f4f4;
}
footer a:hover
{
    text-decoration: none;
}

.title-sep {
    visibility: hidden;
}

.table-content {
    margin-left: 15px;
    margin-right: 15px;
}

.mail-link:hover {
    text-decoration: none !important;
}

.navbar .nav-sm {font-size: 15px !important;margin-left: 0.3rem !important;margin-right: 0.3rem !important;}

.dropdown-menu-sm {
    font-size: 15px !important;
}

.flyers-btn {
    white-space: pre-wrap !important;
    font-size: 15px;
    text-align: left;
    height: 48px;
    padding: 0 36px;
    width: 268px;
}


/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px)
{
    #hero-ie,
    #hero
    {
        /* background-image:url('../img/circles_arc_02.svg') right bottom, url('../img/markus-spiske-1055858-unsplash.jpg') center center,linear-gradient(to bottom, #ffffff, #BEE38F); */
        /* background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%); */
        /* background-image: url('../img/circles_arc_02.svg'), url('../img/markus-spiske-1055858-unsplash.jpg'); */
        background-repeat: no-repeat;
        background-size: 35%, cover, auto;
        background-blend-mode: normal, multiply;
        /* background-color: linear-gradient(to top right, #057245, #057245, #ffffff); */
    }
}

@media (max-width: 992px)
{
   
    .btn-grid {
        max-width: 100%;
    }

    .btn-grid p {
        text-align: left !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/


.ie-blend {
    position: relative;
}

 #hero-ie:before
{
        content: "";
        position: absolute;
        height: 300px;
        width: 100%;
        top:0px;
        background-color: rgba(2, 85, 50, 0.6); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
} 

/* #hero:before
{
        content: "";
        position: absolute;
        height: 300px;
        width: 100%;
        top:0px;
        background-color: rgba(2, 85, 50, 0.6); 
}  */
  .navbar-expand-lg .navbar-nav .nav-link{
    padding: 0;
  }

  img.my-thumbnail-image {
    max-width: 100%;
    height: auto;
}