/* Stylesheet for index page */


html {
    font-family: 'Times New Roman', Times, serif;
}

.header {
    position: relative;
    background-image: url("../sunsetpearls.com/SSPPics/MiscHeaderPics/IMG_1318rsz.JPG");
    background-repeat: repeat;
    background-size: cover;
    padding: 15px;
    font-family: Allura, Yellowtail, cursive;
    height: 230px;
    opacity: 0.8;
}

#title {
    background-image: radial-gradient(closest-side at 53% 50%, rgba(255, 255, 0, 0.9), rgba(255, 0, 0, 0.6), rgba(239, 231, 231, 0));
    position: absolute;
    font-size: 700%;
    top: 15%;
    text-align: center;
    padding: 0;
    margin-top: 0;
    margin-left: -15px;
    color: rgba(255, 255, 255, 1);
    font-weight: bold;
    line-height: 0.8;
    text-indent: -0.2em;
    border-radius: 10px;
}

.row::after {
    content: '';
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
    /*mobile first*/
}

.menu ul {
    list-style-type: none;
    margin-bottom: 7px;
    background-color: rgba(139, 177, 225, 0.5);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

.dropbtn {
    background-color: rgba(128, 160, 193, 0.5);
    color: white;
    padding: 16px;
    margin: 5px 0 5px 0;
    font-size: 350%;
    border: none;
    width: 100%;
    font-family: Allura, Yellowtail, cursive;
}

.dropbtn:hover {
    background-color: rgba(72, 135, 198, 0.6);
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 100%;
    min-width: 160px;
    font-family: Allura, Yellowtail, cursive;
    font-size: 300%;
    text-align: center;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: rgba(255, 255, 255, 1);
    background-color: rgb(142, 168, 194);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: rgba(72, 135, 198, 0.6);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover dropbtn {
    background-color: #3e8e41;
}

.main {
    background-color: rgba(142, 168, 194, 0.8);
}

h1#maintitle {
    font-size: 350%;
    font-family: Allura, yellowtail, cursive;
    text-align: center;
    color: white;
    background-image: radial-gradient(closest-side at 35% 35%, rgba(255, 255, 0, 0.9), rgba(255, 0, 0, 0.6), rgba(239, 231, 231, 0));
    margin-bottom: 0;
    padding-bottom: 0;
}

hr.topline {
    margin: 0 25px 20px 25px;
    border: 1px solid white;
}

p#mainpara,
#bio3 {
    font-family: Allura, yellowtail, cursive;
    font-size: 280%;
    color: white;
    text-align: center;
    padding: 0 10px 0 10px;
    text-indent: 10px;
}

p#mainpara:first-letter,
p#bio3:first-letter {
    font-size: 150%;
}

p#bio,
p#bio2 {
    display: none;
}

.mainimgs {
    position: relative;
    margin: 5px;
}

.mainimgs>img {
    border-radius: 8px;
}

.prdcap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: rgba(72, 135, 198, 0.6);
    font-family: Allura, Yellowtail, cursive;
    font-size: 220%;
    color: white;
    text-indent: 4px;
}

.aside {
    padding: 15px;
    color: #fff;
    border-top: 1px solid black;
}

.asideimgs {
    position: relative;
    text-align: center;
    color: white;
    margin: 5px;
    padding: 10px;
    border-radius: 8px;
}

.asideimgs>a>img {
    border-radius: 8px;
}

.asideimgs:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

.catcap {
    color: black;
    text-align: center;
    font-family: Allura, Yellowtail, cursive;
    font-size: 350%;
    padding-top: -10%;
    margin-top: -2%;
}

.footer {
    margin: 0;
    padding: 0;
}

.footer:after {
    content: '';
    clear: both;
    display: table;
}

.column {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

.left {
    background-color: rgba(142, 168, 194, 0.8);
}

.center {
    background-color: rgba(142, 168, 194, 0.8);
}

.right {
    background-color: rgba(142, 168, 194, 0.8);
}

.ftrheading {
    margin-left: 10px;
}

.ftrinfo {
    padding: 10px;
}

@media only screen and (min-width: 768px) {
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    .main {
        height: 1275px;
        margin-top: 18px;
    }

    #title {
        margin-left: 25px;
        margin-top: -17px;
        background-image: radial-gradient(closest-side at 35% 50%, rgba(255, 255, 0, 0.8), rgba(255, 0, 0, 0.6), rgba(239, 231, 231, 0));
        border-radius: 4px;
    }

    h1#maintitle {
        font-size: 375%;
    }

    p#mainpara,
    p#bio,
    p#bio2,
    p#bio3 {
        font-family: Allura, yellowtail, cursive;
        font-size: 280%;
        color: white;
        text-align: center;
        padding: 0 10px 0 10px;
        text-indent: 10px;
    }

    p#bio,
    p#bio2 {
        display: block;
    }

    p#mainpara:first-letter,
    p#bio3:first-letter {
        font-size: 150%;
    }

    .right {
        margin-top: 18px;
        margin-bottom: 5px;
        height: 1275px;
        border-left: 1px solid black;
    }

    .aside {
        border-top: none;
    }

    .column {
        float: left;
        width: 50%;
        height: 150px;
        padding: 0;
        margin: 0;
        border: none;
    }

    .footer:after {
        content: '';
        clear: both;
        display: table;
    }

    .ftrheading {
        text-align: center;
    }

    .ftrpara1,
    .ftrpara2 {
        text-align: center;
    }
}

@media only screen and (max-width: 815px) and (min-width: 430px) {
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    #title {
        margin-left: 3%;
        margin-top: -20px;
        background-image: radial-gradient(closest-side at 45% 50%, rgba(255, 255, 0, 0.9), rgba(255, 0, 0, 0.6), rgba(239, 231, 231, 0));
        border-radius: 4px;
    }

    .dropbtn {
        font-size: 300%;
    }

    .main {
        margin-top: 20px;
        margin-bottom: 5px;
        height: 880px;
        overflow-y: scroll;
    }

    #mainpara {
        text-align: left;
        text-indent: 1.2em;
        font-size: 200%;
    }

    p#bio,
    p#bio2 {
        display: none;
    }

    p#bio3 {
        display: block;
        font-family: Allura, yellowtail, cursive;
        font-size: 250%;
        text-align: left;
        text-indent: 1.2em;
        color: white;
    }

    p#bio:first-letter,
    p#bio2:first-letter,
    p#bio3:first-letter {
        font-size: 130%;
    }

    p#bio3 {
        text-align-last: center;
    }

    .right {
        margin-top: 20px;
        height: 880px;
        border-left: 1px solid black;
        border-top: none;
    }

    .aside {
        padding-left: 5px;
    }

    .catcap {
        font-size: 250%;
    }

    .column {
        float: left;
        width: 50%;
        height: 150px;
        padding: 0;
        margin: 0;
    }

    .footer:after {
        content: '';
        clear: both;
        display: table;
    }

    .ftrheading {
        text-align: center;
    }

    .ftrpara1,
    .ftrpara2 {
        text-align: center;
    }
}

@media only screen 
    and (min-device-width : 880px) 
    and (max-device-width : 1280px) 
    and (orientation : landscape) {

        .main {
            overflow-y: scroll;
        }
        .catcap {
            font-size: 290%;
        }
    }