* {
    box-sizing: border-box;
    font-family: Tahoma;
}

/* header */
.header {
    background-color: #efefef;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
}

.header h1 {
    margin-left: 20px;
}

/* container */
.container {
    margin-top: 100px;
}

/* menu */
.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.menu li {
    background-color: crimson;
    padding: 10px;
    margin-bottom: 10px;
    color: aliceblue;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}

/* gambar */
.gambar img {
    width: 100%;
}

/* footer */
.footer {
    background-color: burlywood;
    width: 100%;
    height: 60px;
    padding: 5px;
    color: antiquewhite;
    text-align: center;
}

/* colomn */
[class*="col-"]{
    padding: 10px;
    width: 100%;
}

@media only screen and (min-width:780px) {
    .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%;}

    [class*="col-"]{
        float: left;
    }

    .footer {
        position: fixed;
        bottom: 0px;
        left: 0px;
    }
}