html {
    height: 100%;
}
body {
    min-height: 100%;
    border-left: 10px solid #d2a679;
    border-right: 10px solid #d2a679;
    font-family: 'Jaldi', sans-serif;
    overflow-x: hidden;
    font-size: 1.8em;
    box-sizing: border-box;
}

body:before, body:after {
    content: "";
    position: fixed;
    background: #d2a679;
    left: 0;
    right: 0;
    height: 10px;
    z-index: 1000;
}
body:before {
    top: 0;
    content: " ";
    background-image: url("../images/background.jpg");
    height: 100%;
    z-index: -1;
    opacity: 0.4;
    margin-top:70px
}
body:after {
    bottom: 0;
}

/*#main {*/
/*position: relative;*/
/*min-height: 100%;*/
/*}*/

/*body:before {*/
/*content: " ";*/
/*background-image: url("../images/background.jpg");*/
/*height: 100%;*/
/*z-index: -1;*/
/*opacity: 0.2;*/
/*margin-top:70px*/
/*}*/

/*#main::after {*/
/*content: "";*/
/*min-height: 100%;*/
/*opacity: 0.3;*/
/*top: 0;*/
/*left: 0;*/
/*bottom: 0;*/
/*right: 0;*/
/*position: absolute;*/
/*z-index: -1;*/
/*background-image: url("../images/background.jpg");*/
/*}*/

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-family: 'Miltonian Tattoo', cursive;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.pink-brand {
    color: #99004d;
    font-family: 'Miltonian Tattoo', cursive;
}

.white-border {
    border: 0.3em solid white;
}

/* --- navigation bar customization --- */
.navbar-inverse {
    background-color: #d2a679;
    border: 10px solid #d2a679;
    font-family: 'Stint Ultra Condensed', cursive;
    box-sizing: border-box;
}

.item-118 {
    display: none !important;
}

.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>.active>a {
    color: #6b3704;
    font-size: 20px;
    background: transparent;
}

a.navbar-brand.bbc-text {
    font-size: 30px;
}

.title-small {
    font-size: 60%;
}

.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
    background-color: transparent;
    color: #4d0026;
}

.navbar-inverse .navbar-nav>.current>a::before, .navbar-inverse .navbar-nav>.current>a::after {
    content: " ~ ";
}

@media only screen and (max-width : 1200px) {

    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }

    .navbar-inverse .navbar-toggle {
        border-color: #c2820a;
        background-color: #d2a679;
    }

    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
        background-color: #c2820a;
        border-color: #d2a679;
    }

    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: #c2820a;
        background-color: #d2a679;
        border-bottom: 1px solid #c2820a;
    }
    .title-small {
        display: none;
    }
}

/* Glyph, by Harry Roberts */

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #c2820a;
    color: #4d0026;
    text-align: center;
    margin-top:5px;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1em;
    padding: 0 0.25em;
    background-image: url("../images/kraft-background.png");
}

/* --- backend --- */
.form-horizontal .control-label {
    text-align: left;
}

/* --- modals --- */
.modal-footer {
    border-top:none;
}

.modal-header {
    border-bottom: none;
}

.modal {
    overflow-y: scroll;
}

/* --- polariod image style --- */

/* By default, we tilt all our images -2 degrees */
div.polaroid {
    max-width: 90%;
    background: #fff;
    padding: 10px 10px 0px;
    text-align: center;
    font-family: 'Loved by the King', cursive;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    -webkit-box-shadow: 0 3px 4px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 4px rgba(0,0,0,.25);
    cursor: pointer;

    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

/* Rotate all even images 2 degrees */
div.polaroids div:nth-child(even) {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
}

/* Don't rotate every third image, but offset its position */
div.polaroids div:nth-child(3n){
    -webkit-transform: none;
    -moz-transform: none;
    position: relative;
    top: -5px;
}

/* Rotate every fifth image by 5 degrees and offset it */
div.polaroids div:nth-child(5n) {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    position: relative;
    left: 2px
}

div.polaroids .row {
    margin-right: 0px;
    margin-left: 0px;
}

@media screen and (min-width: 768px) {
    /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
    div.polaroids .polaroid:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        position: relative;
        z-index: 5;
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
        -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
        overflow: hidden;
    }

}

@keyframes fadein {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    to {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    to {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    to {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    to {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* --- Contact page custom --- */
/* map background for contact page */
/*body.page_2:before {*/
/*content: " ";*/
/*background-image: url("../images/treasuremap.png");*/
/*height: 100%;*/
/*z-index: -1;*/
/*opacity: 0.2;*/
/*margin-top:70px*/
/*}*/

.page_2 img, .page_1 img, .page_3 img {
    border: 0.3em solid white;
}

/* --- Repairs page custom --- */
.page_3 h3, .page_3 .pg_content  {
    display: none;
}

p.testimonial {
    background-color: #ffffff;
    padding: 5px;
    border: 3px solid #d2a679;
    color: #696969;
    margin-top:30px;
}

p.testimonial:nth-child(even) {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
}

p.testimonial:nth-child(odd) {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

p.testimonial:nth-child(3n) {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

/* --- Maps page custom --- */
.page_4 img {
    border: 0.3em solid white;
    margin-left: 10px;
}

/* --- Rentals page custom --- */
.page_5 .table>tbody>tr>td, .page_5 .table>tbody>tr>th, .page_5 .table>tfoot>tr>td, .page_5 .table>tfoot>tr>th,
.page_5 .table>thead>tr>td, .page_5 .table>thead>tr>th {
    border: none;
}

.rental-info td {
    width: 100%;
}

#submit-quote {
    font-weight: bold;
}

.help-block ul {
    padding-left: 0;
    color: red;
    list-style-type: none;
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    display: none;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 }
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
    from{ bottom:-100px; opacity:0 }
    to{ bottom:0; opacity:1 }
}