/* fix the width of the screen so it is not zoomed out */
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}
@-ms-viewport {
  width: device-width ;
}
/* use media queries to determine the sceen width and add appropriate css */
/* code that is here, until the first @media block, will apply to any screen size */
#somethingorother {
  width: 800px ;
}
@media screen and (max-width:320px) {
  #somethingorother {
    width: 120px ;
  }
}
@media screen and (min-width:321px) and (max-width:480px) {
  /* comes into effect for screens between 321 and 480 pixels (inclusive) */
  #somethingorother {
    width: 320px ;
  }
}
@media screen and (min-width: 481px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  #somethingorother {
    width: 480px ;
  }
}
/* for all devices (until the @media block) */
body {
  font-family: Arial, Helvetica, sans-serif ;
}
/* for all window widths */
#content {
  float: right ;
  width: 80% ;
}
#navbar {
  float: right;
  width: 20%;
}
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media only screen and (max-width: 1024px) {
	/* for widths less than or equal to 1024 pixels */
	#content {
		float: none ;
		width: 100% ;
	}
	#navbar {
		float: none ;
		width: 100% ;
	}
	.column {
		float: none;
		width: 100%;
	}

	/* Clear floats after the columns */
	.row:after {
	  content: "";
	  clear: both;
	}
}
/* elements for key style items */
#title-box {
	background-color: orange;
	color: navy;
	padding: 10px;
	text-align: left;
}

/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Box using opacity */
.box1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  color: #fff;
  opacity: .5;
}

/* Box using an alpha channel */
.box2 {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(192,192,192,.25);
  color: #033;
}
H1 { text-align: left}
H2 { text-align: left}
H3 { text-align: left}