* {
    box-sizing: border-box;
}

body {
	background-image: url("./../img/paper.jpg");
	/* background-repeat: no-repeat; */
	background-size: cover;
	
} 

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

.header {
    /* border: 1px solid #5555FF; */
    /* padding: 15px; */
    text-align: center; 
    margin: 20px 0 20px 0;
    background-color: #EEEEEE;
    font-size:x-large;
}

.menu {
    width: 25%;
    float: left;
    padding: 15px;

}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    /* background-color :#33b5e5; */
    background-color :#DDDDDD;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}


.main {
    width: 75%;
    float: left;
    padding: 15px;
    border-left: 1px solid #FFFFFF;
   }
   

.row::after {
    content: "";
    clear: both;
    display: block;
}

   
[class*="col-"] {
    float: left;
    padding: 15px;
   /* border: 1px solid #FFFFFF; */
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%; border: none;}
.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%;}

html {
	font-family: "Times New Roman";
}

/* For mobile phones (define this here to make "mobile first"): */
[class*="col-"] {
    width: 100%;
}
    
/**
 @media only screen and (max-width: 500px) { 
}
**/

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

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

img {
	max-width: 100%;
	height: auto;

}

video {
	max-width: 100%;
	height: auto;
}