html {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}

		body {
		  margin: 0;
		  padding: 0;
		  background: black;
		}

		#topContainer {
		  visibility: hidden;
		}

		#triptych {
		  text-align: center;
		  /* technique for centring image on the screen  */
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 84%;
		  height: 28%;
		  margin-top: -14%;
		  /* Half the height */
		  margin-left: -42%;
		  /* Half the width */
		}

		#pic0,
		#pic1,
		#pic2,
		#pic3,
		#pic4,
		#pic5 {
		  width: 33.33%;
		  height: auto;
		}

		#images0,
		#images1 {
		  position: absolute;
		}


		@media (max-width: 767px) and (orientation:portrait) {

		  #pic0,
		  #pic1,
		  #pic2,
		  #pic3,
		  #pic4,
		  #pic5 {
		    display: block;
		    margin: auto;
		    width: 52%;
		    height: auto;
		  }

		  #triptych {
		    top: 12%;
		    height: 30%;
		    margin-top: 0;
		  }

		  #triptych p {
		    margin: 2em;
		    font-size: 0.85em;
		    font-weight: 300;
		  }
		}

		@media (min-width: 768px) and (max-width: 1024px) and (orientation:portrait) {

		  #pic0,
		  #pic1,
		  #pic2,
		  #pic3,
		  #pic4,
		  #pic5 {
		    display: block;
		    margin: auto;
		    width: 40%;
		    height: auto;
		  }

		  #triptych {
		    top: 9%;
				left:47%;
				width:90%;
		    margin-top: 0;
		  }

		  #triptych p {
		    margin: 2em;
		    font-size: 1em;
		    font-weight: 300;
		  }
		}

		@media (min-width: 768px) and (max-width: 1024px) and (orientation:landscape) {
		  #triptych p {
		    font-size: 1em;
		    font-weight: 300;
		  }
		}

		@media (max-width: 767px) and (orientation:landscape) {
		  #triptych p {
		    font-size: 0.85em;
		    font-weight: 300;
		  }

		  #topleft {
		    top: 35%;
		    left: 3.7em;
		    visibility: visible;
		    font-size: 1em;
		    font-weight: 300;
		  }

		  #top {
		    visibility: hidden;
		  }
		}