* {
    margin: 0;
    padding: 0;
}

html {
}

body {
    background-color: #313F26;
}

#mainNav {
    background-color: #F4F5F4;
    box-sizing: border-box;
    padding: 12px 0;
    position: fixed;
    opacity: 0;
    top: -75px;
    left: 0;
    width: 100%;
    z-index: 500;
    text-align: center;
}

    #mainNav #lnkPopMenu {
        display: none;
        text-align: right;
        padding: 4px 16px;
        font-size: 1.5em;
        color: #333333;
    }

    #mainNav.contrast #lnkPopMenu {
        color: #FFFFFF;
    }

    #mainNav.contrast {
        background-color: #333333;
    }

    #mainNav.show {
        top: 0 !important;
        opacity: 1;
    }

    #mainNav li {
        display: inline-block;
        padding: 12px 4px;
        margin: 0 2%;
    }

        #mainNav li a {
            font-family: 'Oswald', sans-serif;
            color: #333333;
            text-decoration: none;
            text-shadow: 1px 1px 0px #999999;
        }

    #mainNav.contrast li a {
        color: #FFFFFF;
        text-shadow: 1px 1px 0px #000000;
    }

#SiteHeader {
    display: block;
    width: 100%;
    min-height: 50vh;
    position: relative;
    top: 0;
    left: 0;
    background: transparent url(../img/rushmore_dep.jpg) no-repeat top center fixed;
    background-size: cover;
    overflow: hidden;
}

    #SiteHeader #slogan {
        padding-top: 150px;
        left: calc(80% - 225px);
        position: relative;
        font-size: 3em;
        line-height: 1em;
        font-family: 'Raleway', sans-serif;
        font-weight: 400;
        color: #313F26;
        width: 450px;
        opacity: 0.85;
        text-transform: uppercase;
        z-index: 100;
        text-shadow: 1px 1px 1px #B8BCC7;
    }

    #SiteHeader::before {
        content: " ";
        background-color: #A7A7B1;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        z-index: 50;
        transform: skewX(25deg);
        transform-origin: top left;
        opacity: 0.65;
    }

    #SiteHeader #slogan span {
        position: relative;
        z-index: 100;
    }

        #SiteHeader #slogan span.tel {
            font-size: 0.50em;
            display: block;
            font-family: 'Open Sans', sans-serif;
            text-decoration: none;
        }
        #SiteHeader #slogan a.tel{
            text-decoration: none;
            color: #313F26;
        }

#OptionTiles {
    background: transparent;
    box-sizing: border-box;
    padding: 2% 0;
    text-align: center;
    position: relative;
    min-width: 325px;
    z-index: 200;
}

    #OptionTiles::before {
        background-color: #FFFFFF;
        content: " ";
        display: block;
        height: 100%;
        left: 0;
        opacity: 0.85;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    #OptionTiles h1 {
        color: #333333;
        font-family: 'Oswald', sans-serif;
        margin: 0% 0% 0.5%;
        padding: 0% 0% 0.5%;
        position: relative;
        text-transform: uppercase;
        z-index: 150;
    }

    #OptionTiles .tile {
        box-sizing: border-box;
        display: inline-block;
        margin: 10px 10px;
        padding: 5px;
        position: relative;
        vertical-align: top;
        width: 235px;
    }

        #OptionTiles .tile::before {
            background-color: #000000;
            content: " ";
            display: block;
            height: 100%;
            left: 0;
            opacity: 0.65;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 100;
        }

        #OptionTiles .tile .lnkFull {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 200;
        }

        #OptionTiles .tile img {
            position: relative;
            z-index: 150;
            width: 100%;
        }

        #OptionTiles .tile .desc {
            color: #FFFFFF;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.85em;
            padding: 5px 0 10px;
            position: relative;
            z-index: 250;
        }

        #OptionTiles .tile h2 {
            border-bottom: 1px solid #999999;
            font-family: 'Oswald', sans-serif;
            font-size: 1.25em;
            padding: 3px 0px;
            margin: 0px 0px 5px;
        }

        #OptionTiles .tile .phone {
            color: #FFFFFF;
            display: block;
            margin-bottom: 3px;
            text-decoration: none;
            position: relative;
            z-index: 250;
        }

		#OptionTiles .tile .banner-text {
			width: 94%;
			margin: 1% 1%;
			padding: 2% 2%;
			background: #fae463;
			color: #4F504E;
			position:relative;
			z-index: 250;
			font-family: 'Oswald', sans-serif;
			font-weight: bold;
		}
.info-section {
    box-sizing: border-box;
    min-height: 500px;
    padding: 50px 5%;
    position: relative;
    z-index: 150;
    opacity: 1;
}

    .info-section.cloak {
        opacity: 0;
    }

    .info-section h1 {
        color: #FFFFFF;
        font-family: 'Oswald', sans-serif;
        font-size: 2.5em;
        padding: 25px 0px 15px;
        position: relative;
        z-index: 150;
    }

    .info-section p {
        color: #FFFFFF;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        padding: 0.5% 2%;
        position: relative;
        z-index: 150;
    }

div.sep {
    display: block;
    height: 500px;
    width: 100%;
    position: relative;
    opacity: 1;
}

.sep.cloak {
    opacity: 0;
}

#flags, #walkway {
    background: transparent url(../img/rushmore_flags.jpg) no-repeat top center fixed;
    background-size: cover;
}

#aerial, #sky {
    background: transparent url(../img/rushmore_aerial.jpg) no-repeat top center fixed;
    background-size: cover;
}

#closeup {
    background: transparent url(../img/rushmore_closeup.jpg) no-repeat center center fixed;
    background-size: cover;
}

#night {
    background: transparent url(../img/rushmore_night.jpg) no-repeat center center fixed;
    background-size: cover;
}

#spring, #camp {
    background: transparent url(../img/rushmore_spring.jpg) no-repeat center center fixed;
    background-size: cover;
}

#shutter {
    background: transparent url(../img/rushmore_shutter.jpg) no-repeat center center fixed;
    background-size: cover;
}

.info-section::before {
    background-color: #333333;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
}

.contentWrap {
    position: relative;
    z-index: 150;
    display: inline-block;
    vertical-align: top;
}

.adwrap {
    position: relative;
    z-index: 150;
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

    .adwrap img {
        display: block;
        margin: 0 auto;
    }

.info-section .contentWrap {
    width: calc(100% - 575px);
}

.info-section .adwrap {
    width: 560px;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s;
}

.info-section.show .adwrap {
    opacity: 1;
    transition: opacity 0.5s;
}

.info-section.contrast::before {
    background-color: #FFFFFF;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
}

.contrast h1 {
    color: #333333;
}

.contrast p {
    color: #333333;
}

.info-section p.hotelNav {
    color: #333333;
    font-family: 'Oswald', sans-serif;
}

.info-section p.hotelNav {
    color: #FFFFFF;
}

    .info-section p.hotelNav a {
        color: #FFFFFF;
        text-decoration: none;
    }

.info-section.contrast p.hotelNav {
    color: #333333;
}

    .info-section.contrast p.hotelNav a {
        color: #333333;
        text-decoration: none;
    }

.map {
    width: 100%;
    height: 350px;
    margin-top: 25px;
    margin-bottom: 100px;
    display: block;
}

.tripadvisor-widget {
    box-sizing: border-box;
    padding: 25px 150px 25px 100px;
    position: absolute;
    opacity: 0;
    bottom: -100px;
    right: 0;
    z-index: 250;
    overflow: hidden;
}

.info-section.show .tripadvisor-widget {
    opacity: 0.95;
}

.tripadvisor-widget::before {
    content: " ";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    transform: skewX(25deg);
    transform-origin: top left;
}

.tripadvisor-widget .lnkTALogo {
    position: relative;
    z-index: 150;
}

.tripadvisor-widget div, .tripadvisor-widget dt, .tripadvisor-widget span, .tripadvisor-widget a {
    font-family: 'Open Sans', sans-serif !important;
}

.tripadvisor-widget .widSSPSummary {
    display: none;
}

.tripadvisor-widget .widSSPBullet li {
    display: block !important;
    text-align: center;
    max-width: 90%;
}

    .tripadvisor-widget .widSSPBullet li span {
        font-size: 1.5em !important;
    }

#CDSWIDSSP {
    width: 100% !important;
}

    #CDSWIDSSP .widSSPData {
        background-color: transparent !important;
        text-align: center;
    }

        #CDSWIDSSP .widSSPData .widSSPOneReview .widSSPBullet {
            margin: 10px 0px 0px !important;
        }

        #CDSWIDSSP .widSSPData .widSSPComponent {
            display: inline-block;
            vertical-align: top;
        }

        #CDSWIDSSP .widSSPData .widSSPBranding {
            display: none;
        }

        #CDSWIDSSP .widSSPData .widSSPAll a:link, #CDSWIDSSP .widSSPData .widSSPAll a:visited {
            display: none;
        }

        #CDSWIDSSP .widSSPData .widSSPReviews {
            text-align: left;
            border: none;
            border-top: none !Important;
        }

            #CDSWIDSSP .widSSPAll, #CDSWIDSSP .widSSPData .widSSPReviews .widSSPH11, #CDSWIDSSP .widSSPData .widSSPReviews .widSSPDate {
                display: none !important;
            }

        #CDSWIDSSP .widSSPData .widSSPTrvlRtng .widSSPOverall img, #CDSWIDSSP .widSSPData .widSSPBranding dt a img, #CDSWIDSSP .widSSPData .widSSPBranding dt a:link img, #CDSWIDSSP .widSSPData .widSSPBranding dt a:visited img {
            background-color: transparent !important;
        }

#footer {
    background-color: #333333;
    box-sizing: border-box;
    padding: 125px 5% 25px 5%;
    position: relative;
    z-index: 100;
}

    #footer p {
        font-family: 'Oswald', sans-serif;
        font-size: 0.85em;
        position: relative;
        bottom: 0;
        color: #FFFFFF;
    }

@media screen and (max-width: 920px) {
    h1{
        text-align: center;
    }
    #mainNav{
        padding: 4px 0;
    }

    #mainNav #lnkPopMenu {
        display: block;
    }

    #mainNav ul {
        display: none;
    }

    #mainNav.show ul.show {
        display: block;
    }

    #mainNav li {
        display: block;
        padding: 4px 4px;
        font-size: 0.85em;
    }
    #mainNav li a{
        text-shadow: none;
    }

    #SiteHeader {
        background: transparent url(../img/rushmore_dep_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }

        #SiteHeader #slogan span.tel {
            background-color: #333333;
            color: #FFFFFF;
            text-shadow: none;
        }
        #SiteHeader #slogan span a.tel{
            color: #FFFFFF;
            text-decoration: none;
        }

        #SiteHeader #slogan {
            width: 100%;
            text-align: center;
            height: 360px;
            left: 0;
            opacity: 1;
            font-size: 2em;
            padding-top: 180px;
        }

            #SiteHeader #slogan::before {
                content: " ";
                background-color: #A7A7B1;
                top: 0;
                left: 0;
                display: block;
                position: absolute;
                height: 100%;
                width: 100%;
                opacity: 0.50;
                z-index: 99;
            }

        #SiteHeader::before {
            display: none;
        }

        #OptionTiles h1{
            font-size: 1em;
        }

        #OptionTiles .tile::before{
            opacity: 1;
            background-color: #666666;
        }

    .info-section .adwrap {
        width: 100%;
    }

    .info-section .contentWrap {
        width: 100%;
        padding: 25px 0 0;
    }

    .info-section.show .tripadvisor-widget {
        position: relative;
        display: block;
        background: #FFFFFF;
        width: 100%;
        text-align: center;
        bottom: initial;
    }

    .tripadvisor-widget {
        padding: 25px 25px;
    }

        .tripadvisor-widget::before {
            display: none;
        }

    #flags, #walkway{
        background: transparent url(../img/rushmore_flags_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }
    #spring, #camp{
        background: transparent url(../img/rushmore_spring_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }
    #aerial, #sky{
        background: transparent url(../img/rushmore_aerial_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }
    #closeup{
        background: transparent url(../img/rushmore_closeup_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }
    #night{
        background: transparent url(../img/rushmore_night_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }
    #shutter{
        background: transparent url(../img/rushmore_shutter_mobile.jpg) no-repeat 50% 50%;
        background-size: cover;
        height: 360px;
        min-height: initial;
    }

    #footer {
        padding: 25px 25px;
    }
}
@media screen and (max-width: 680px){
    h1, .contrast h1, .info-section h1{
        font-size: 1.5em;
        padding: 2% 0;
    }
    #OptionTiles{
        min-width: initial;
    }
    #OptionTiles .tile{
        width: calc(100% - 20px);
    }
    .adwrap img{
        width: 100%;
        height: auto;
    }
    .adwrap iframe{
        width: 100%;
        height: auto;
    }
}