* {
  box-sizing: border-box;
}

html {
    max-width: 1920px;
    margin: 0 auto;
    background-color: white;
}
  		
body {
	max-width: 1920px;
  	font-family: Nue, Arial;
  	margin: 0;
}

#myheader {
    position:relative;
}
#myname {
    position:absolute;
	bottom:0;
}
		
/*******************************************
@media screen and (max-width: 566px) {
	header {
        background: url(xanadu_530x200.jpg) no-repeat center;
        height: 200px;
  
        white-space: nowrap;
      	text-indent: 5%;
      	color: white;
      	font-family: 'Lato', Arial, sans-serif;
      	font-size: 1.875em;
      	font-weight: 700;
   	}
   	#topquote {
		font-size: 0.75em;
		text-align: left;		
	}
}


@media screen and (min-width: 567px) and (max-width: 850px) {
  	header {
        background: url(futura_2000x200.jpg) no-repeat center;
        height: 200px;
        	
        white-space: nowrap;
      	text-indent: 5%;
      	color: white;
      	font-family: 'Lato', Arial, sans-serif;
      	font-size: 1.875em;
      	font-weight: 700;
    }
    #topquote {
		font-size: 0.75em;
		text-align: left;		
	}
}
		
	
@media screen and (min-width: 851px) and (max-width: 1500px) {
  	header {
        background: url(futura_2000x200.jpg) no-repeat center;
        height: 200px;
        	
        white-space: nowrap;
      	text-indent: 5%;
      	color: white;
      	font-family: 'Lato', Arial, sans-serif;
      	font-size: 2.75em;
      	font-weight: 700;
    }
   #topquote {
		font-size: 0.5em;
	}
}


@media screen and (min-width: 1501px) {
  	header {
        background: url(matrix_2500x200.jpg) no-repeat center;
        height: 200px;
        max-width: 1920px;
        	
       	white-space: nowrap;
      	text-indent: 5%;
      	color: white;
      	font-family:'Lato', Arial, sans-serif;
      	font-size: 2.75em;
      	font-weight: 700;
    }
    #topquote {
		font-size: 0.5em;
	}
}
***********************************/
/* Column container */
.row {  
  	display: flex;
  	flex-wrap: wrap;
}

/* Create two unequal columns that sit next to each other */
/* Left column */
.col01 {
  	display: flex;  
  	justify-content: center; 
  	flex: 50%;
  	background-color: #f1f1f1;
  	padding: 20px;
}

/* Right column */
.col02 {
  	display: flex;  
  	justify-content: center; 
  	flex: 50%;
  	background-color: white;
  	padding: 20px;
}

.navbar {
  	display: flex;
}

/* Style the navigation bar links */
.navbar a {
  	color: black;
  	padding: 14px 20px;
  	text-decoration: none;
  	text-align: center;
}

/* Change color on hover */
.navbar .img-with-text:hover {
	background-color: #ddd;
  	color: black;
}

.navbar {   
    flex-direction: column;
}

.navbar link {
	text
}

.footer {
  	background: #ddd;
}

.footbar {   
  	display: flex;  
  	justify-content: center; 
    padding: 20px;
    flex-direction: row;
}

.footbar link {
	text
}

.img-with-text {
    text-align: center;
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

.img-with-text-footer img {
    display: block;
    margin: 20px;
}
  
.caption {
	font-family: 'Lato', Arial, sans-serif;
    display: block;
}

figure.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
/*     width: 120px; */
}

/* Responsive layout - when the screen is less than 567px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 567) {
	.row {   
    	flex-direction: column;
  	}
}