*{
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: rgb(6, 49, 6);
    background-image: linear-gradient(45deg, hsl(210, 86%, 3%), hsl(13, 58%, 15%), hsl(183, 92%, 14%));
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

#container {
    width: clamp(390px, 100%, 1440px);
    min-height: 700px;
    margin: 4px auto;
    padding-bottom: 80px;
}

#topbar {
    height: 100px; /*background-color: hsl(168, 85%, 32%);*/
    color: #EEE;
    text-align: center;
    font-size: 2em;
    position: relative;
    padding-top: 18px;
    margin-top:12px;
}

.cis195 {
    display: inline-block;
    width: 150px;
    position: absolute;
    left: 10px;
    color: white;
    
}

h1 {
    display: inline;
    width: 800px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    align-self: center;
    font-size: 1.5em;
    text-shadow: 12px 12px 20px #222;
    padding: 8px;
    border-bottom: 4px solid white;
    
}

h1 span {
    font-style: italic;
    font-size: .75em;
    text-shadow: 6px 6px 8px black;
}

#bear {
       
        display: inline-block;  
        height: 100px;
        width: 90px;
        background-image: url(../images/bearinspire.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute; top: 0px; right: 15px;
}

#navbar {
    height: 120px; /*background-color: hsl(165, 55%, 27%);
    background-image: url(../images/starfield-bg.png);*/
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #222;
    /*border: 4px solid green;*/
    padding-top: 30px;
}

/*nav  {
    position: fixed; top:0; left: 0; width: 100%;
} */

nav > ul {
    
    display: flex;
    flex-direction: row; 
    list-style: none;
    line-height: 0px;

    
}

nav > ul > li {
    
    height: 32px;
    flex: 1 0 auto;
    position: relative;
    margin-right: 8px;
    margin-left: 8px;
}

nav > ul > li:hover ul.submenu {
    display: block;
    
}



nav > ul > li > a {
    /*border: 2px solid rgb(137, 85, 12);*/
    border: 4px solid black;
    background-color: rgb(137, 85, 12);
    display: block;
    width: 100%; height: 100%;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    color: #e7e7e7;
    text-shadow: 4px 4px 5px #222;
    box-shadow: 8px 10px 14px #222;
    border-radius: 6px;
    transition: all .5s ease-in-out;
    
    
}

nav > ul > li > a:hover {
    background-color: hsl(21, 91%, 31%);
    color: rgb(55, 135, 55);
    height: 145%; width: 105%;
    border: 4px solid forestgreen;
}

nav > ul > li:hover > a {
    background-color: hsla(21, 92%, 28%, 0.904)
}

ul.submenu {
    position: absolute; top: 100%; left: 0;
    list-style: none; /* get rid of them bullets */
    width: 100%;
    display: none;
}

ul.submenu li {
    height: 28px;
    background-color: #8e79c3;
    z-index: 2;
    position: relative;
     
}

ul.submenu a {
    display: block; width: 100%; height: 100%;
    text-decoration: none;
    text-align: center;
    color: #e7e7e7;
    font-weight: normal;
    font-style: italic;
    background-color: hsl(171, 66%, 19%);
    line-height: 28px;
}

ul.submenu a:hover {
    background-color: #e7e7e7;
    color: #222;
}


#hero {
    border: 8px solid black;
    position: relative;
    aspect-ratio: 1000/400;
    overflow: hidden;

}

#hero video {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    left: 0; width: 100%;
    aspect-ratio: 1000/562;
}

.gradient-overlay {
    position: absolute; top: 0; left: 0; width: 100%;
    aspect-ratio: 1000/400;
    background-image: linear-gradient(90deg, hsla(0,100%,0%,.7), hsla(0,100%,0%,.1));
}

p.overlay-text {
    position: absolute; top: 120px; left: 40px;
    font-size: 2em;
    font-weight: bold;
    color: #FFF;
    width: 40%;
   /* text-transform: lowercase;*/
}

p.overlay-text span {
    font-size: .75em;
    padding-top: 100px;
    text-align: center;
    margin-left: 45px;
}

div.hero-cta {
    position: absolute; bottom: 80px; right: 40px;
}

div.hero-cta a {
    border: 4px solid #FFF;
    text-decoration: none;
    text-transform: uppercase;
    margin-right: 40px;
    color: #FFF;
    font-size: .9em;
    font-weight: bold;
    padding: 20px 15px 20px 25px;
    display: inline-block;
    width: 260px;
    text-align: center;
    background-image: linear-gradient(45deg,rgb(17, 95, 17), rgb(30, 30, 169));
    background-repeat: no-repeat;
    background-size: 100% 0%;
    background-position: left bottom;
    transition: background-size 600ms linear;
}

div.hero-cta a:hover {
    background-size: 100% 120%;
}

#intro {
    height: 290px; background-color: rgb(36, 87, 105);
    background-image: linear-gradient(45deg, rgb(15, 44, 15), rgb(22, 62, 88));
    color: #EEE;
    text-align: left;
    font-size: 1em;
    padding: 12px;
    margin-top: 20px;
    position: relative;
}

#intro img {
    
    position: absolute;
    top: 15px; left: 10px;
    width: 35%;
    padding: 10px;
}

h2 {
    /*border: 4px solid red;*/
    
    padding-left: 300px;
    text-align: center
    
}

#intro img ~ p {
    color: #EEE;
    padding-left: 350px;
    padding-top: 20px;
}


#tier1 {
    height: 250px;
    
    
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    margin-top: 30px;
}



#tier1 div {
    flex: 1 0 30%; /* flex grow, shrink and basis */
    background-color: sandybrown;
    margin-right: 8px;
    margin-left: 8px;
}

/*figcaption {
    position: absolute;
    top: 80%; left: 0;
    width: 100%; height: 20%;
    background-color: hsl(220 50% 40% /.7);
    color: #EEE;
    border-radius: 0 0 24px 0;
    text-align: left;
    padding: 8px;
} */

#tier1 div a {
    position: relative;
}

figcaption {
    border: 3px solid black;
    position: absolute;
    top: 85%; 
    left: 50%;
    margin-left: -28%;
    padding: 2px 10px;
    background-color: hsla(120, 45%, 11%, 0.8);
    
}



#tier1 div:nth-child(1) {
    background-color: rgb(139, 93, 64);
    background-image: url(../images/secretbeach.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier1 div:nth-child(1) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier1 div:nth-child(1) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 20px;
}

/*#tier1 div:nth-child(2) {
    background-color: rgb(147, 192, 36);
}*/

#tier1 div:nth-child(2) {
    background-color: rgb(139, 93, 64);
    background-image: url(../images/wildwood_trail.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier1 div:nth-child(2) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier1 div:nth-child(2) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 15px;
}


/*#tier1 div:nth-child(3) {
    background-color: rgb(234, 173, 234);
    color: black;
}*/

#tier1 div:nth-child(3) {
    background-color: rgb(139, 93, 64);
    background-image: url(../images/multnomah_falls.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier1 div:nth-child(3) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier1 div:nth-child(3) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 15px;
}



#tier2 {
    height: 250px;
    
    
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

#tier2 div {
    flex: 1 0 30%; /* flex grow, shrink and basis */
    border: 4px solid blue;
    margin-left: 8px;
    margin-right: 8px;
}

#tier2 div a {
    position: relative;
}

figcaption {
    border: 3px solid black;
    position: absolute;
    top: 85%; 
    left: 50%;
    margin-left: -28%;
    padding: 2px 10px;
    background-color: hsla(120, 45%, 11%, 0.8);
    
}

/*#tier2 div:nth-child(1) {
    background-color: hsl(155, 78%, 29%);
}*/

#tier2 div:nth-child(1) {
    background-color: rgb(139, 93, 64);
    background-image: url(../images/machu_picchu_peru.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier2 div:nth-child(1) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier2 div:nth-child(1) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 15px;
}


/*#tier2 div:nth-child(2) {
    background-color: rgb(155, 63, 146);
}*/

#tier2 div:nth-child(2) {
    background-color:rgb(139, 93, 64);
    background-image: url(../images/empire_builder.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier2 div:nth-child(2) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier2 div:nth-child(2) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 15px;
}


/*#tier2 div:nth-child(3) {
    background-color: rgb(99, 58, 30);
} */

#tier2 div:nth-child(3) {
    background-color: rgb(139, 93, 64);
    background-image: url(../images/sundown.jpg);
    background-size: contain;
    width: 60%;
    background-repeat: no-repeat;
    border: 4px solid black;
}

#tier2 div:nth-child(3) a {
    display: block;
    width: 54%; height: 100%;
    border: 4px solid black;
    float: left;
    color: #EEE;
    text-align: center;
    text-decoration: none;
}

#tier2 div:nth-child(3) p {
    padding-left: 255px;
    padding-right: 8px;
    padding-bottom: 25px;
    padding-top: 15px;
}


#foot {
    height: 220px;
    border: 4px solid black;
    background-color: black;
    position: relative;
    border-radius: 16px;
}

#initials {
            
        border: 4px solid hsl(189, 92%, 10%);
        background-color: rgb(16, 162, 178);
        background-image: linear-gradient(to right, hsl(190, 69%, 3%), rgb(16, 162, 178));
        width: 5rem; height: 5rem;
        border-radius: 50%;
        text-align: center;
        line-height: 4.5rem;
        font-size: 2.5rem;
        font-weight: bold;
        color: #b9e8f3;
        text-shadow: -4px 4px 0px black;
        position: absolute;
        top: 60px; right: 175px;
        transform: rotate(-10deg);
    } 

    #logo {

        display: inline-block;  
        height: 100px;
        width: 90px;
        background-image: url(../images/bearinspire.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute; top: 45px; left: 175px;
    }

    #links {
        
        height: 200px;
        
        margin-left: 400px;
        margin-right: 400px;
        margin-top: 0px;
    }

    #links p {
        text-align: center;
        font-size: 1.2em;
        color: white;
        padding-bottom: 8px;
        margin-bottom: 12px;
        margin-top: 10px;
        margin-left: 200px; margin-right: 200px;
        border-bottom: 2px solid white;

    }

    #travel {
        text-align: center;
        margin-bottom: 10px;
        
        
    }

    #travel li {
        text-align: left;
        list-style-type: none;
        padding-left: 220px;
        padding-bottom: 3px;
    }


    #travel li a {
        color: white;
        font-style: italic;
        text-decoration: none;
    }
     
        #foot #copy {
            height: 20px;
            color: white;
            font-size: small;
            position: absolute;
            bottom: 5px;
            right: 120px;

        }