body {
    height: auto;
    background-color: azure;
    margin: 0px;
    padding: 0px;
    min-width: 500px;
}

div {
    color: black;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:hover, w div a:hover {
    color: #fff;
    cursor: pointer;
}

button:hover {
    cursor: pointer;    
}

.main {
    min-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    clear: both;
    border: 1px solid navy;
    background-color: white;
}

.header {
    width: 100%;
    border-top-style: ridge;
    border-top-color: navy;
    border-top-width: 2px;
    background-color: white;
}
.navigation {
    border-bottom-style: groove;
    border-bottom-color: blue;
    border-bottom-width: 2px;
}

#menubutton {
    display: none;
} 

.title {
    font-size: 2.6em;
    margin-top: -20px;
    line-height: 70px;
}

.logo {
    margin-top:5px;
    margin-right: 5px;
}
.wrapper {
    border-top: 2px solid navy;
    border-bottom: 2px solid navy;
    overflow: hidden;
    background-color: lightblue;
    color: white;
    display: block;
    width: 100%;
    clear: both;
}

.footer {

    background-color: lightblue;
    padding: 10 5 5 5;
    clear: both;
    margin: 0 auto;
}

a.sub {
    display: block;
}

.icon {
    width: 20px;
    padding 4 4;
}

.pad {
    width: 25px;
    display: inline block;
}

.over {
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    transition: .3s ease;
    z-index: 1;
    background-color: black;
}

    .over:hover {
        opacity: 1;
    }

.info {
    width: 600px;
    padding: 50px;
    font-size: 1.5em;
    text-align: justify;
}

.foot {
    color: white;
    padding-top: 15px;
    padding-left: 10px;
    display: block;
    vertical-align: top;
}
a.footlink, a.footlink:hover, a.footlink:visited {
    color: White;
    display: block;
    min-width: 120px;
}

    .foot div {
        float: left;
        color: navy;
        padding: 2px 4px;
        display: block;
        text-align: left;
        max-width: 120px;
    }

        .foot div a {
            float: left;
            color: #ccc;
            padding: 1px 4px;
            display: block;
            text-align: left;
            min-width: 120px;
            vertical-align: top;
        }

        .foot div a:hover {
            background-color: #222;
            color: white;
        }

.left {
    float: left;
}

.right {
    float: right;
}

.none {
    float: none;
}

.search {
    text-align: right;
    padding-top: 1em;
    padding-right: .8em;
    position: relative;
}

#search {
    font-size: .8em;
}

.content {
    width: 100%;
    text-align: center;
    padding-top: 5px;
}

.innercontent {
    margin: 0 auto;
    display: inline;
}


.top {
    height: 150px;
    display: block;
    vertical-align: top;
}

.bottom {
    height: 150px;
    display: table-cell;
    vertical-align: bottom;
}

.copy {
    font-size: 0.7em;
    color: white;
    vertical-align: bottom;
    text-align: right;
}

.m_item {
    width: 200px;
    height: 150px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    border-radius: 25px;
    border: 1px solid navy;
    margin: 5px;
}

.s_item {
    width: 135px;
    height: 150px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    border-radius: 25px;
    border: 1px solid navy;
    margin: 5px;
}

.m_img {
    width: 200px;
    height: 150px;
   
}

.s_img {
    width: 135px;
    height: 150px;
}
.sel {
    position: absolute;
    top: 0px;
    right: 0px;
    padding-right: 16px;
    padding-top: 6px;
}
.cap {
    position: absolute;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    text-align: left;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 0px;
    padding-bottom: 3px;
}
#menubutton {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 50px;
    height: 50px;
}
.home1 {
    width: 70%;
    border-radius: 25px;
    border: 1px solid navy;
    float: left;
    overflow: hidden;
    text-align: left;
}

.home2 {
    width: 29%;
    border-radius: 25px;
    border: 1px solid navy;
    float: right;
    overflow: hidden;
    text-align: left;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #ccc;
    color: black;
}

.image {
    position: relative;
    cursor: pointer;
}
    /*.image img {
                width:100%;
                vertical-align: top;
            }*/
    .image:after, .image:before {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        /*transition: all 0.5s;
                -webkit-transition: all 0.5s;*/
    }
    /*.image:after {
                content:'\A';
                width:100%; height:100%;
                top:0; left:0;
                background:rgba(0,0,0,0.6);
            }*/
    .image:before {
        content: attr(data-content);
        width: 100%;
        color: #fff;
        z-index: 1;
        bottom: 0;
        padding: 4px 10px;
        text-align: left;
        background: rgba(0,0,0,0.5);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        cursor: pointer;
    }

    .image:before {
        opacity: 1;
        cursor: pointer;
    }

@media (min-width: 850px) {
    #menubutton {
        display: none !important;
    }
    .openmenubtn {
        display: none;
        
    }
}
@media screen and (max-width:850px) {
    .home1 {
        width: 99%;
        border-radius: 25px;
        border: 1px solid navy;
        float: left;
        overflow: hidden;
        text-align: left;
    }

    .home2 {
        width: 99%;
        border-radius: 25px;
        border: 1px solid navy;
        float: right;
        overflow: hidden;
        text-align: left;
        margin-top:15px;
    }

    .logo {
        width: 15%;
        height: auto;
        margin-right: -15px;
    }

    .title {
        font-size: 1.5em;
        line-height: 40px;
    }

    #search {
        width: 65%;
    }

    .search {
        padding-top: .6em;
    }

    .main {
        width: 600px
    }

    .cimg {
        width: 98%
    }

    #navigation {
        display: none;
    }
    #menubutton {
        display: block;
        display: block !important;
    }
    #vidplay {
        max-width: 420px;
    }
    .main {
        width: 100%;
    }
}

    @media (max-width:420px) {
        .home1 {
            width: 99%;
            border-radius: 25px;
            border: 1px solid navy;
            float: left;
            overflow: hidden;
            text-align: left;
        }

        .home2 {
            width: 99%;
            border-radius: 25px;
            border: 1px solid navy;
            float: right;
            overflow: hidden;
            text-align: left;
        }
        .logo {
            width: 10%;
            height: auto;
        }

        #search {
            width: 50%;
        }

        .search {
            padding-top: .3em;
        }

        .fimg {
            width: 90%;
        }

        #navigation {
            display: none;
        }

        .openmenubtn {
            display: inline-block;
            margin-left: 20px;
        }

        #menubutton {
            display: block;
        }
    }



        @media (min-width: 1200px) {

            .home1 {
                width: 70%;
                border-radius: 25px;
                border: 1px solid navy;
                float: left;
                overflow: hidden;
                text-align: left;
            }

            .home2 {
                width: 28%;
                border-radius: 25px;
                border: 1px solid navy;
                float: right;
                overflow: hidden;
                text-align: left;
            }
           
        }

        @media (min-width: 100%) {
            .main {
                width: 100%;
            }

            #menubutton {
                display: none;
            }
        }
    }