/* Style the header with a grey background and some padding https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_header*/
.header-wrapper {
  padding: 20px 10px 10px 10px;
}


/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.logo {
  width: 330px;
  display: inline-block;
}

/* Float the link section to the right */
.header-right {
 float: right;
  width: calc(100% - 340px - 30px);
  display: inline-block;
  min-width: 400px;

}

/* Float the link section to the left? */
.header-left {
 float: left;
  width: calc(100% - 340px - 30px);
  display: inline-block;
  min-width: 400px;

}

img.QR {
  width:64px;
  height:64px;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 

.wrapper { 
  overflow:hidden;
}

.wrapper div {
   padding: 10px;
}
#one {
  background-color: white;
  float:left; 
  margin-right:20px;
  width:340px;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  min-height:170px;
}
#three { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  min-height:170px;
  width: 96%;
}

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

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 

@media screen and (max-width: 640px) {
  .logo{
    float: left;
    display: block;
  }
  .header-right {
    display: inline-block;
    max-width: 100%;
    min-width: 300px;
    padding: 0 0 40px 0;
	}
  .header-left {
    display: inline-block;
    max-width: 100%;
    min-width: 300px;
    padding: 0 0 40px 0;
	}
#one { 
    float: none;
    margin-right:0;
    width:auto;
  }
	
}