/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/

body {
  margin: 0;
  border: 0;
  font-family: 'Roboto Mono', monospace;
  background-color: black;
  padding-bottom: 1vw;
  padding-right: 1vw;
}

/* CSS for Landscape Here */

#wrapper {width:1024px}


.hello-proof {
	color: blue;
}
	

p {
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.title1 {
font-size: 4vw;
margin-top: 1vw;
color: blue;
}

.variant-description1 {
  color: rgb(162,229,249);
  margin-top: .35vw;
  margin-bottom: 3.5vw;
  font-size: 3vw;
  text-align: center;
}

.title-container {
  display: inline-grid; 
  grid-template-columns: 56vw 15vw;
  grid-template-rows: 5.5vw 4.5vw;
  width: 71vw;
  height: 11vw;
  padding: 0; 
  margin-left: 1vw; 
  /*border: none;*/
  /*border: 1px solid pink;*/
}

.title-text-div {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: left;
  align-items: left;
  /*border: 1px solid pink;*/
  margin-top: 0vw;
  margin-left: 0vw;
}

.mv-text-div {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: left;
  align-items: left;
  /*border: 1px solid pink;*/
  margin-top: 0vw;
  margin-bottom: 0vw;
  margin-left: 0vw;
}

.guide-button-div {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid pink;*/
  margin-bottom: 0vw;
}

.guide-button {
  height: 3vw;
  width: 15vw;
  font-size: 1.25vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: blue;
  border-radius: 2.5vw;
  color: white;
}


.descspan {
  color: rgb(162,229,249);
}


h1 {
  font-size: 3vw;
  text-align: left;
  margin-top: .25vw;
  margin-bottom: .5vw;
  margin-left: 1vw;
  color: blue;
}

.all-variant-images {
  height: 100%;
  width: 100%;
}

.variant-numbers {
  font-size: 2vw;
}

.variant-titles {
  font-size: .75vw;
 }


.variants-container {
  display: inline-grid; 
  grid-template-columns: 11vw 1vw 11vw 1vw 11vw 1vw 11vw 1vw 11vw 1vw 11vw 1vw 11vw;
  grid-template-rows: 2vw 15vw 2.5vw 2.5vw 15vw 1.5vw;
  padding: 0; 
  margin-left: 1vw; 
  border: none;
  /*border: 1px solid pink;*/
}

.numbera-div {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g1-div {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  border: none;
   /*border: 1px solid yellow;*/
}

.varianta-div {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}

.numberb-div {
  grid-row: 4 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .5vw;
}

.b1-div {
  grid-row: 5 / span 1;
  grid-column: 1 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantb-div {
  grid-row: 6 / span 1;
  grid-column: 1 / span 1;
}

.numberc-div {
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  }

.g2-div {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantc-div {
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
  
}

.numberd-div {
  grid-row: 4 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .5vw;
}

.b2-div {
  grid-row: 5 / span 1;
  grid-column: 3 / span 1;
  border: none;
   /*border: 1px solid yellow;*/
}

.variantd-div {
  grid-row: 6 / span 1;
  grid-column: 3 / span 1;
}

.numbere-div {
  grid-row: 1 / span 1;
  grid-column: 5 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g3-div {
  grid-row: 2 / span 1;
  grid-column: 5 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variante-div {
  grid-row: 3 / span 1;
  grid-column: 5 / span 1;
}

.numberf-div {
  grid-row: 4 / span 1;
  grid-column: 5 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .5vw;
}

.b3-div {
  grid-row: 5 / span 1;
  grid-column: 5 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantf-div {
  grid-row: 6 / span 1;
  grid-column: 5 / span 1;
}

.numberg-div {
  grid-row: 1 / span 1;
  grid-column: 7 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g4-div {
  grid-row: 2 / span 1;
  grid-column: 7 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantg-div {
  grid-row: 3 / span 1;
  grid-column: 7 / span 1;
}

.numberh-div {
  grid-row: 4 / span 1;
  grid-column: 7 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .5vw;
}

.b4-div {
  grid-row: 5 / span 1;
  grid-column: 7 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.varianth-div {
  grid-row: 6 / span 1;
  grid-column: 7 / span 1;
}

.numberi-div {
  grid-row: 1 / span 1;
  grid-column: 9 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g5-div {
  grid-row: 2 / span 1;
  grid-column: 9 / span 1;
  border: none;
   /*border: 1px solid yellow;*/
}

.varianti-div {
  grid-row: 3 / span 1;
  grid-column: 9 / span 1;
}

.numberj-div {
  grid-row: 4 / span 1;
  grid-column: 9 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b5-div {
  grid-row: 5 / span 1;
  grid-column: 9 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantj-div {
  grid-row: 6 / span 1;
  grid-column: 9 / span 1;
}

.numberk-div {
  grid-row: 1 / span 1;
  grid-column: 11 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g6-div {
  grid-row: 2 / span 1;
  grid-column: 11 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantk-div {
  grid-row: 3 / span 1;
  grid-column: 11 / span 1;
}

.numberl-div {
  grid-row: 4 / span 1;
  grid-column: 11 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b6-div {
  grid-row: 5 / span 1;
  grid-column: 11 / span 1;
  border: none;
  /*border: 1px solid yellow;*/
}

.variantl-div {
  grid-row: 6 / span 1;
  grid-column: 11 / span 1;
}









/* CSS for portrait Here */

@media only screen and (orientation:portrait){
	#wrapper {width:768px}
	.hello-proof {
	color: red;
}



/*This container holds the variant numbers, titles and photos */

p {
  color: white;
  font-size: 2vw;
}

.title1 {
font-size: 7vw;
margin: 1vw;
text-align: center;
color: blue;
}

.variant-description1 {
  color: rgb(162,229,249);
  margin-top: 1vw;
  margin-bottom: 3.5vw;
  font-size: 4.5vw;
  text-align: center;
}

.title-container {
  display: inline-grid; 
  grid-template-columns: 92vw;
  grid-template-rows: 10vw 7vw 8vw;
  width: 92vw;
  height: 25.5vw;
  padding: 0; 
  margin-left: 4vw; 
  /*border: none;*/
  /*border: 1px solid pink;*/
}

.title-text-div {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid pink;*/
}

.mv-text-div {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid pink;*/
  margin-top: 1.5vw;
  margin-bottom: 2vw;
}

.guide-button-div {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid pink;*/
  margin-bottom: 2vw;
}

.guide-button {
  height: 6vw;
  width: 35vw;
  font-size: 2.5vw;
  font-weight: bold;
  padding: 0;
  margin: 0;
  background-color: blue;
  /*border-radius: 2vw;*/
  color: white;
}

.descspan {
  color: rgb(162,229,249);
}


h1 {
  font-size: 5vw;
  text-align: center;
  margin-top: 1vw;
  margin-bottom: none;
  margin-left: 1vw;
  color: blue;
}


.all-variant-images {
  height: 100%;
  width: 100%;
}

.variant-numbers {
  font-size: 5vw;
}

.variant-titles {
  font-size: 2.5vw;
  text-align: center;
}

.variants-container {
  display: inline-grid; 
  grid-template-columns: 45vw 2vw 45vw;
  grid-template-rows: 5vw 60vw 10vw 5vw 60vw 10vw 5vw 60vw 10vw 5vw 60vw 10vw 5vw 60vw 10vw 5vw 60vw 10vw 5vw 60vw 10vw;
  width: 92vw;  
  padding: 0; 
  margin-left: 4vw; 
  border: none;
  /*border: 1px solid pink;*/
}

.numbera-div {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g1-div {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.varianta-div {
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}

.numberb-div {
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b1-div {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantb-div {
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
}

.numberc-div {
  grid-row: 4 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g2-div {
  grid-row: 5 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantc-div {
  grid-row: 6 / span 1;
  grid-column: 1 / span 1;
}

.numberd-div {
  grid-row: 4 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b2-div {
  grid-row: 5 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantd-div {
  grid-row: 6 / span 1;
  grid-column: 3 / span 1;
}

.numbere-div {
  grid-row: 7 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g3-div {
  grid-row: 8 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variante-div {
  grid-row: 9 / span 1;
  grid-column: 1 / span 1;
}

.numberf-div {
  grid-row: 7 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b3-div {
  grid-row: 8 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantf-div {
  grid-row: 9 / span 1;
  grid-column: 3 / span 1;
}

.numberg-div {
  grid-row: 10 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g4-div {
  grid-row: 11 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantg-div {
  grid-row: 12 / span 1;
  grid-column: 1 / span 1;
}

.numberh-div {
  grid-row: 10 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b4-div {
  grid-row: 11 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.varianth-div {
  grid-row: 12 / span 1;
  grid-column: 3 / span 1;
}

.numberi-div {
  grid-row: 13 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g5-div {
  grid-row: 14 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.varianti-div {
  grid-row: 15 / span 1;
  grid-column: 1 / span 1;
}

.numberj-div {
  grid-row: 13 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b5-div {
  grid-row: 14 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantj-div {
  grid-row: 15 / span 1;
  grid-column: 3 / span 1;
}

.numberk-div {
  grid-row: 16 / span 1;
  grid-column: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g6-div {
  grid-row: 17 / span 1;
  grid-column: 1 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantk-div {
  grid-row: 18 / span 1;
  grid-column: 1 / span 1;
}

.numberl-div {
  grid-row: 16 / span 1;
  grid-column: 3 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b6-div {
  grid-row: 17 / span 1;
  grid-column: 3 / span 1;
  border: none;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 1vw;
  /*border: 1px solid yellow;*/
}

.variantl-div {
  grid-row: 18 / span 1;
  grid-column: 3 / span 1;
}

}