body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/* ------------------------------ Fix for style.blue.css ------------------------------ */

.btn:hover, .btn:focus, .btn.focus {
    color: #2bd930;
}

a:hover, a:focus {
    color: #2bd930;
    border-bottom: 1px solid #2bd930;
}

/* ------------------------------ Fix for .carousel-fullscreen .carousel-caption ------------------------------ */

.carousel-caption-fix[role="option"] {
    /*box-sizing: border-box;*/
    background: rgba(0,0,0,.6);
    /*padding: 10px;*/
    /*height: 200px;*/
    /*width: 100%;*/
    /*position: absolute;*/
    /*transform: translateY(165px);*/
    /*transition: all 300ms ease-in-out;*/
    top: auto;
    bottom: 20px;
    -webkit-transform: translate(0, 0%);
    -ms-transform: translate(0, 0%);
    transform: translate(0, 0%);
}

/* ------------------------------ CSS Only Animated Thumbnail Overlay ------------------------------ */

h4, p {
    margin: 0;
}

h4 {
    margin-bottom: 10px;
}

body {
    font-family: arial;
}

.tiles {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    /*max-width: 980px;*/
}

.tile {
    flex: 1 33.3333%;
    text-decoration: none;
    height: 200px;
    /*background: red;*/
    background: rgba(128, 128, 128, .6);
    background-size: cover;
    color: #FFF;
    position: relative;
    overflow: hidden;
}

.description {
    box-sizing: border-box;
    background: rgba(0, 0, 0, .6);
    padding: 10px;
    height: 200px;
    width: 100%;
    position: absolute;
    transform: translateY(165px);
    transition: all 300ms ease-in-out;
}

.tile:hover > .description {
    transform: translateY(0);
    background: rgba(0, 0, 0, .6);
    padding-top: 30px;
}

@media screen and (max-width:700px) {
    .tile {
        flex: 1 1 100%;
    }
}

/* ------------------------------  ------------------------------ */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Calibri;
}

.navbar {
    text-transform: none;
}

.navbar-inverse {
    background-color: gray;
}

.navbar a.navbar-brand {
    color: #efefef;
}

.navbar-inverse .navbar-nav > li > a {
    color: #efefef;
}

.navbar-inverse .btn-link {
    color: #efefef;
}