body{
	max-width: 1360px;
	margin: auto;
}

* {
    box-sizing: border-box;
	font-family:'Lobster';
	font-size:100%;
}


#logo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
#list{
	float:right;
	font-size: 2.1em;	
	}
	
#myth{
	float:left;	
		font-size: 2.1em;	
		}

div.logobkgrnd{
    background-color: white;
  
}	

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

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #CA3D31;
	margin: -150px auto 75px auto;
}

/* Style the topnav links */
.topnav a {
    display: inline;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: green;
    color: #DEA74D;
}

.active {
    background-color: #992F34;
    color: #DEA74D;
}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}



/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */

	@media screen and (max-width: 600px) {
	.topnav a:hover {
	    background-color: #CA3D31;
	    color: white;
	}

}
@media screen and (max-width: 600px){
	#list{
		text-align:right;
		font-size: 175%;
		
		}
	
  
}
@media screen and (max-width: 600px){
	#myth{
		text-align:left;
		font-size: 175%;
		
		}
	}


@media screen and (max-width: 600px){
	.topnav {
	    overflow: hidden;
	    background-color: #CA3D31;
		margin: -150px auto 80px auto;
	
		}
	}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
	height:auto;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: " ";
    display: table;
    clear: both;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
        width: 80%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 640px) {
    .column {
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
  div.overlay {
    display: none;
  }
}