/* body */

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica,Arial, sans-serif;
    background-color: #eeeeee;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body, html {
    height: 100%;
}


/* backgrounds */

.bgimage {
    background-image: url("images/ceredigion.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
}

.container-fluid {
    min-height: 100%;
    position: relative;
}

.topofpage {
    height: 20px;
}

.bottomofpage {
    height: 15px;
}


/* header styles */

h1 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica,Arial, sans-serif;
    font-size: 21px;
    color: #FFFFFF;
}

.h1effect {
    font-family: "Open Sans", "Helvetica Neue", Helvetica,Arial, sans-serif;
    font-size: 21px;
    color: #FFFFFF;
}

h2 {
    font-family: 'Belleza', sans-serif;
    font-size: 24px;
    color: #FFFFFF;
}

h2 {
    text-shadow: 2px 2px 1px #aaaaaa;
}

.ceredigion {
    font-size: 36px;
}


/* logos */

.crest {
    margin-top: 20px;
    margin-bottom: -10px;
}

.tourismlogo {
    margin-bottom: 10px;
}

/* buttons */

.welcomemargin {
    margin-bottom: 20px;
}

.ws {
    white-space: normal;
}

.ib {
    display: inline-block;
}

.button {
    max-width: 275px;
    max-height: 120px;
    padding-left: 10px;
    padding-right: 10px;
}

.buttontopmargin {
    margin-top: 80px;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.btn-primary,
.btn-primary:focus {
    background-color: #0B294A;
    border-color: #0B294A;
}

.btn-primary:hover {
    background-color: #6f93c0;
}

.btn-default,
.btn-default:focus {
    color: #FFFFFF;
    background-color: #0B294A;
    border-color: #0B294A;
}

.btn-default:hover {
    color: #FFFFFF;
    background-color: #6f93c0;
    border-color: #051425;
}


/* footer */

.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    overflow: hidden;
}

.footerheightxs {
    padding-bottom: 150px;
}



/* media queries */


@media screen and (max-width: 368px) {
    .topofpage {
        height: 0;
    }

    h1 {
        font-size: 20px;
    }
	
	.h1effect {
        font-size: 20px;
        margin-top: 3px;
    }

    h2 {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .ceredigion {
        font-size: 34px;
    }

    .crest {
        margin-top: 20px;
        margin-bottom: -10px;
    }

    .button {
        max-width: 200px;
        max-height: 50px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tourismlogo {
        max-width: 175px;
    }

    .tbutton {
        width: 84px;
    }
}


@media screen and (min-width: 368px) and (max-width: 768px) {
    .topofpage {
        height: 0;
    }

    h1 {
        font-size: 21px;
    }
	
	.h1effect {
        font-size: 21px;
        margin-top: 2px;
    }

    h2 {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .ceredigion {
        font-size: 34px;
    }

    .crest {
        max-height: 184px;
        margin-top: 20px;
        margin-bottom: -10px;
    }

    .button {
        max-width: 200px;
        max-height: 50px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tourismlogo {
        max-width: 175px;
    }

    .tbutton {
        width: 90px;
    }
}


@media screen and (min-width: 768px) and (max-width: 992px) {
    .topofpage {
        height: 10px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 23px;
    }

    .ceredigion {
        font-size: 34px;
    }

    .welcomemargin {
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .button {
        max-width: 255px;
        max-height: 100px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .buttontopmargin {
        margin-top: 50px;
    }

    .tourismlogo {
        max-width: 175px;
    }

    .tbutton {
        width: 90px;
    }

    .footerheight {
        padding-bottom: 100px;
    }
}


@media screen and (min-width: 992px) and (max-width: 1200px) {
    .buttontopmargin {
        margin-top: 60px;
    }

    .tourismlogo {
        max-width: 175px;
    }

    .tbutton {
        width: 90px;
    }

    .footerheight {
        padding-bottom: 100px;
    }
}


@media screen and (min-width: 1200px) and (max-width: 1500px) {
    .tourismlogo {
        max-width: 225px;
    }

    .tbutton {
        width: 115px;
    }

    .footer {
        height: 110px;
    }

    .footerheight {
        padding-bottom: 150px;
    }
}


@media screen and (min-width: 1500px) {
    .tourismlogo {
        max-width: 250px;
    }

    .tbutton {
        width: 125px;
    }

    .footer {
        height: 120px;
    }

    .footerheight {
        padding-bottom: 150px;
    }
}