/* main.css */

@font-face {
    font-family: parchment;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/parchment-mf.woff') format('woff'),
        url('../fonts/parchment-mf.otf') format("opentype"),
        url('../fonts/parchment-mf.ttf') format('ttf');
}

.backhaze {
    background-color: rgba(245, 245, 245, 0.4);
    background-image: none;
    color: black;
    text-shadow: 1px 1px 1px #245;
    border-color: transparent;
}

navbar a, navbar a:focus, navbar a:hover, nav> a, nav> a:focus, nav> a:hover  {
    color: #fff;
}

html {
    height: 100%;
    background-color: #333;
    background-image: url('../img/creek.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
 
}

body {
    padding-top: 50px;
    background-color: transparent;
}

@media all and (max-width: 512px) {
    html, body {
        background-image: url('../img/creek1024.jpg');
    }
} 

@media all and (max-width: 400px) {
    html, body {
        background-image: url('../img/creek800.jpg');
    }
} 

.navbar-brand {
    font-family: parchment;
    font-size: 30px;
}

.navbar-inverse .navbar-brand {
    color: white;
}

.navbar-brand.logo {
    padding-top: 2px;
    padding-bottom: 2px;
}

.hide-tiny {
    display: inherit;
}

.show-tiny {
    display: none;
}

@media all and (max-width: 420px) {
    .hide-tiny {
        display: none;
    }
    .show-tiny {
        display: inherit;
    }
}


.outer-bit {
    display: table;
    position: absolute;
    top:0;
    height: 100%;
    width: 100%;
}

.middle-bit {
    display: table-cell;
    vertical-align: middle;
}

.inner-bit {
    margin-left: auto;
    margin-right: auto; 
    width:650px;
    color:white;
    text-shadow: 0px 0px 1px darkgrey, 1px 1px 5px black, 1px 1px 8px black;
    font-family: Georgia, serif;
}

.item {
    padding:20px;
    background-color: rgba(245, 245, 245, 0.2);
    background-image: none;
}

.item > h1 {
    font-size:50px;
    color:#ffff99;
}

.item > p {
    font-size:20px;
    color:white;
}

@media all and (max-width: 650px) {
    .inner-bit{
        width:100%;
    }
    .item {
        height:196px;
        /* Prevents jumping on small screens */
    }
    .item > h1 {
        font-size:30px;
    }
    .item > p {
        font-size:18px;
    }
}

.panel-sct
{
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 0px;
    border-color: black;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 2px 2px 3px black, 2px 2px 5px darkgrey;
    font-family: Georgia, serif;
}

.panel-sct h4 {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 3px darkgrey;

} 

@media (min-width:768px) {
    .dl-horizontal dt {
        float:left;
        width:55px;
        clear:left;
        text-align:right;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .dl-horizontal dd {
        margin-left:65px;
    }
}

@media (max-width:767px) {
    .dl-horizontal dt {
        padding-left:0px
    }
    .dl-horizontal dd {
        padding-left: 0px
    }
}

address {
    margin-bottom: 0px;
}

.dl-horizontal {
    margin-bottom: 10px;
}

.dl-horizontal dd {
    margin-bottom: 10px;
}

@media (max-width:315px) {
    .dl-horizontal dd {
        font-size: 12px;
    }
}

.clarity {
    display:none;
}

@media (min-width:450px) {
    @media (max-width:767px) {
        .panel-sct {
            width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.back-to-top {
    position: fixed;
    bottom: 8em;
    right: 5px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.60);
    font-size: 12px;
    padding: 10px;
    display: none;
    box-shadow: 2px 2px 3px black, 2px 2px 5px darkgrey;
    border-radius: 5px;
    border-color: black;
    font-family: Georgia, serif;
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
}