/*overlord styles*/
        * {
            box-sizing:border-box;
        }

        .wrapper {margin-left:5%;
            margin-right:5%;
            min-width: 300px;
        }

        .menu {
            width:25%;
            float:left;
        }
        .main {
            width:75%;
            float:left;
        }

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

        .row::after {
            content: "";
            clear: both;
            display: block;
        }
       
        video {
            max-width: 100%;
            height: auto;
        }

/*looking good!*/
        html {
            font-family: "Lucida Sans", sans-serif;
            background-color:#F0ECEC;
        }
        header {
            background-color: darkblue;
            color: #ffffff;
            padding: 15px;
            border-radius:10px;
        }
        header h1 {
            text-align:right;
        }

        @media screen and (max-width: 650px) and (min-width: 0px) {
        header h1 {
            padding-top: 25%;
            text-align:center;
            }
        }

        img.logo {
            width:200px;
            height:auto;
            position:absolute;
            display:block;
            padding-left:25px;
        }
    
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color:darkblue;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            border-radius: 10px;
        }
        .menu li:hover {
            background-color:#ffffff;
            color:darkblue;
        }
        aside {
            background-color: darkblue;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.25);
        }
        footer {
            background-color: darkblue;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
            border-radius:10px;
        }
        h4 { 
            background-color:darkblue;
            padding:2%;
            color:#ffffff;
            text-align:center;
            border-radius:5px;
            width:auto;
            margin-left:auto;
        }
        h4:hover {
            padding:2%;
            color:#ffffff;
            text-align:center;
            border-radius:5px;
            width:auto%;
            background-color:royalblue;}

        

/*Columns*/
        .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%;
            margin-top:-1%;
        }
        .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%;
        }
        
/*das media queries*/
        @media only screen and (max-width: 500px) {
           
            img.logo {
                margin-left: 5%;
                
            }
            .col-6{
                margin-top:-12%;
            }
}

        @media only screen and (max-width: 1000px) {
            h4{ 
                width:auto;
                margin-left:auto;
            }
            
        }
        @media only screen and (max-width: 1000px) {
            /*mobile*/
            [class*="col-"] {
                width: 100%;
            }
            .col-6 {
                margin-top:-4%;
            }
        }
        
        @media only screen and (min-width: 768px) {
            /*desktop*/
            .col-1 {
                width: 8.33%;
            }
            .col-2 {
                width: 16.66%;
            }
            .col-3 {
                width: 100%;
                height: 20%
            }
            .col-4 {
                width: 33.33%;
            }
            .col-5 {
                width: 41.66%;
            }
            .col-6 {
                width: 50%;
                 margin-top:-1%;
            }
            .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%;
            }
        }

        @media only screen and (min-width: 768px) {
            /*tablets*/
            .col-m-1 {
                width: 8.33%;
            }
            .col-m-2 {
                width: 16.66%;
            }
            .col-m-3 {
                width: 25%;
            }
            .col-m-4 {
                width: 33.33%;
            }
            .col-m-5 {
                width: 41.66%;
            }
            .col-m-6 {
                width: 50%;
                 margin-top:-1%;
            }
            .col-m-7 {
                width: 58.33%;
            }
            .col-m-8 {
                width: 66.66%;
            }
            .col-m-9 {
                width: 75%;
            }
            .col-m-10 {
                width: 83.33%;
            }
            .col-m-11 {
                width: 91.66%;
            }
            .col-m-12 {
                width: 100%;
            }
            .col-9 {
                width:100%;
            }
        
        }
        @media only screen and (min-width: 1000px) {
            /*desktop*/
        .col-1 {   
            width: 8.33%;
            }
        .col-2 {
            width: 16.66%;
            }
        .col-3 {
            width: 25%;
            height:25%;
            }
        .col-4 {
            width: 33.33%;
            }
        .col-5 {
            width: 41.66%;
            }
        .col-6 {
            width: 50%;
             margin-top:-1%;
            }
        .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%;
            }
        }