@charset "UTF-8";
/* CSS Document */

/* Common Formatting */

body {
   font-family: 'Poppins',sans-serif;
   font-weight: 400;
}

.book {
 display: block;
 padding-top: 1rem;
   
}

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}


#results {
 width: 1492px;
 height: 270px;
 top:515px;
 left: 4px;
 display: inline;
 position: absolute;
 background-color: #aaa;
 z-index: 300;
 border-radius: 0 10px 10px 0;
}

#results h2 {
 margin-left: 0;
}

#context-block {
 font-size: 0.65rem;
 width: 500px;
 height: 500px;
 top:40px;
 left: 1000px;
 display: inline;

 position: absolute;
 background-color: #E8E8E8;
 line-height:130%;
}	
	

#roof {
 padding: 8px;
 top:0px;
 height: 147px;
 position: relative;
 background-color: #E8E8E8;
 border-bottom: 1px solid white;
}

#upper {
 padding: 8px;
 height: 121px;
 position: relative;
 background-color: #E8E8E8;
 border-bottom: 1px solid white;
}

#lower {
 padding: 8px;
 height: 118px;
 position: relative;
 background-color: #E8E8E8;
 border-bottom: 1px solid white;

}

#sub {
 padding: 8px;
 height: 123px;
 position: relative;
 background-color: #E8E8E8;
}

.flip {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: 0.5s;
  background-color: #000;
}
	
		
.front-top {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 13px;
  background-color: aqua;
}

		
.back-top {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  transform: rotateY(180deg);
  backface-visibility: hidden;
background-color: aqua;
}
.next-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  right: 0px;
  font-size: 0;
  cursor: pointer;
  background-color: rgba(255,000,255,0);
}
.back-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  right: 00px;
 font-size: 0;
  cursor: pointer;
  color: #000;
  background-color: rgba(255,000,255,0);
}

.back-top h2 {
	
  padding: 0 1rem 1rem 1rem;
  background-color:rgba(255,255,255,0);
  font-size: 0.68rem;
  position: absolute;
  left: 50px;
  width: 320px;
}

.front-top h2 {
  color: #999;
  font-size: 20px;
  position: absolute;
  top: 50px;
  left: 20px;
}


/* Common Formatting End */



/* Mobile Format Start */

@media screen and (max-width: 801px) {


#results {
width: 580px;
height: 147px;
top:368px;
left: 10px;
display: inline;
position: absolute;
background-color: #C1C5D6;
background-image: url(images/footer-new.png);
background-size:contain;
	
}
	
#context-block {
	
  width: 580px;
  height: 400px;
top:500px;
	
left: 10px;
display: inline;
	position: absolute;
background-color: #DADCE3;
}		
	
#cover {
  width: 580px;
  height: 135px;
	background:  url(images/t-is.jpg);
	background-size:contain;
}

#cover-2 {
  width: 580px;
  height: 88px;
  top: 88px;
  position: absolute;
}

	
	
.flip-book {
  width: 290px;
  height: 120px;
  left: 300px;
  position: absolute;
  perspective: 1500px;
}

.flip-book-2 {
  width: 290px;
  height: 88px;
left:300px;
  position: absolute;
  perspective: 1500px;
  top: 111px;

}
	
.flip-book-3 {
  width: 290px;
  height: 88px;
left:300px;
  position: absolute;
  perspective: 1500px;
  top: 190px;

}	
	
	
.flip-book-4 {
  width: 290px;
  height: 96px;
left:300px;
  position: absolute;
  perspective: 1500px;
  top: 270px;

}	
		
	
	
	
	
	.block-right{
	width: 30px;
	height: 100px;
	right: 0;
	top: 0;
	background-color: rgba(255,255,0, 0);
	position: absolute;
	margin: 0;
}	

.block-left{
	width: 30px;
	height: 100px;
	left: 0;
	top: 0;
	background-color: rgba(255,0,255, 0.1);
	position: absolute;
}

	
.block-left h1  {
			transform: rotate(-90deg);
			font-size: 0.8em;
}

	



.block-result{
	height: 147px;
	left: 0;
	top: 30px;
	position: absolute;
	overflow: hidden;
	margin: 0 0 0 1rem ;
}

.block-result h1 , h1 .block-total {
	font-size: 1.5em;
	font-weight: normal;
}	
	
		
	
	

}


/*Mobile Format End */

/*Desktop Format Start */

@media screen and (min-width: 802px) {

/*	
	
#cover {
 width: 802px;
 height: 147px;
 background:  url(images/t-is.jpg);
 background-size:contain;
}

#cover-2 {
 width: 802px;
 height: 121px;
 top: 154px;
 position: absolute;
}
*/
	
/* Flip Strip Formatting */
	

.flip-book {
 width: 500px;
 height: 147px;
 left: 500px;
 position: absolute;
 perspective: 1500px;
 top: 0px;
}

.flip-book-2 {
 width: 500px;
 height: 121px;
 left: 500px;
 position: absolute;
 perspective: 1500px;
 top: 150px;
}
	
.flip-book-3 {
 width: 500px;
 height: 114px;
 left:500px;
 position: absolute;
 perspective: 1500px;
 top: 274px;
}
		
.flip-book-4 {
 width: 500px;
 height: 129px;
 left:500px;
 position: absolute;
 perspective: 1500px;
 top: 394px;
}
	
/*  Verticle Button Formatting */	

.block-right{
 width: 100px;
 height: 147px;
 right: 0;
 top: 0;
 background-color: black;
 background:  url(images/bg-number.png);
 background-repeat: no-repeat;
 background-position: bottom 30px left 50px;
 position: absolute;
 margin: 0;
}	
	
	
		

 .block-right-c{
 transform: rotate(-90deg);
 background:  url("images/concrete.png");
 display: block;
 width: 110px;
 height: 50px;
 right: -1.6rem;
 top: 2rem;
 background-color: grey;
 position: absolute;
 margin: 0;
 border-radius: 0 0 10px 10px ;
}




		
 .block-right-t{
 transform: rotate(-90deg);
 background:  url("images/timber.png");
 display: block;
 width: 110px;
 height: 50px;
 right: -1.5rem;
 top: 2rem;
 background-color: grey;
 position: absolute;
 margin: 0;
 border-radius: 0 0 10px 10px ;
}	
		
 .block-right-m{
 transform: rotate(-90deg);
 background:  url("images/metal.png");
 display: block;
 width: 110px;
 height: 50px;
 right: -1.6rem;
 top: 2rem;
 background-color: grey;
 position: absolute;
 margin: 0;
 border-radius: 0 0 10px 10px ;
}	
		
 .block-right-clt{
 width: 100px;
 height: 147px;
 right: 0;
 top: 0;
 background:  url("images/bg-clt.png");
 background-repeat: no-repeat;
 background-position: bottom 30px left 50px;
 position: absolute;
 margin: 0;
}	
		
 .block-right-b{
 transform: rotate(-90deg);
 background:  url("images/brick.png");
 display: block;
 width: 110px;
 height: 50px;
 right: -1.6rem;
 top: 2rem;
 background-color: grey;
 position: absolute;
 margin: 0;
 border-radius: 0 0 10px 10px ;
}	


.flip-book .block-left, .flip-book .block-right-c, .flip-book .block-right-b, .flip-book .block-right-m, .flip-book .block-right-t{
  margin-top: 1.7rem;
}	












.block-left{
 transform: rotate(-90deg);
 display: block;
 width: 110px;
 height: 50px;
 left: -1.6rem;
 top: 2rem;
 background-color: grey;
 position: absolute;
 margin: 0;
 border-radius: 10px 10px 0 0  ;
}
	
/*Verticle Text Formating */	

	
.block-left h1  {
 color: white;
padding: 5px;
margin: 5px 0 0 40px;
 font-size: 1.2em;
 position: absolute;
 transform: rotate(90deg);
}

.block-right h1,.block-right-c h1 ,.block-right-m h1 ,.block-right-t h1 ,.block-right-clt h1 ,.block-right-b h1   {
color: white;
padding: 1rem;
 font-size: 0.8em;
 position: absolute;
}	
	

/* Elements */
	

.triangle-left{
  width: 0;
  height: 0;
  margin: 15px auto;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 20px solid white;
  float: left;
  margin-right: 20px;
}	
	
	
.triangle-right{
  transform: rotate(-180deg);
  width: 0;
  height: 0;
  margin: 15px auto;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 20px solid red;
  left: 26.5rem;
  bottom: 3rem;
  position: absolute;
  margin-right: 10px;
}	
		
h4  {
	left: 22.5rem;
/*	left: 21rem;*/
	top: 2.2rem;
    transform: rotate(-90deg);
	font-size: 1em;
	position: absolute;
	color: red;
}	
	
/*Footer  Formatting */	
	
.block-result{
  height: 300px;
  width: 300px;
  left: 0;
  top: 35px;
  position: absolute;
  overflow: hidden;
  margin: 9rem 0 0 1rem;
}

.block-note{
  height: 100px;
  width: 600px;
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  margin: 1rem 0 0 1rem;
}


.block-result h1  {
  font-size: 1.5em;
  font-weight: 100;
  color: white;
	margin: 0;
}
.block-result h2  {
	margin: 0;
  font-size: 1.5em;
  font-weight: bold;
  color: white;
}	
	
.small {
 color: white;
 font-size: 0.5em;
 margin: -1rem 0 0 0;
}

.block-options {
  position: absolute;
  top: 10px;
  left: 570px;
  width: 900px;
  height: 165px;
  color: white;
  border-bottom: 0px solid black;
  display: block;
  background-color: #ddd;
  padding: 10px;
 border-radius: 10px;
}


.block-materials {
  position: absolute;
  top: 180px;
  left: 570px;
  width: 900px;
  height: 70px;
  color: white;
  display: block;
  background-color: #ddd;
  padding: 10px;
 border-radius: 10px;
}

.block-copy {
  position: absolute;
  top: 244px;
  left: 570px;
  width: 900px;
  height: 70px;
  color: white;
  display: block;
  padding: 0px;
  text-align: right;
}






.block-options h3, .block-materials h3{
color: black;
}





.block-elements {
margin: 1rem 0 0 0;
  position: absolute;
  left: 580px;
  width: 100px;
  height: 200px;
  color: white;
  display: block;
}
	
.block-elements h2 {
margin-top: 3.0rem;
margin-bottom: 4.8rem;

}


	
.block-total {
margin: 9rem 0 0 0;
  position: absolute;
  left: 230px;
  top: 35px;
  width: 300px;
  height: 200px;
  color: white;
  display: block;
}
	
.block-glazing {


}	
	
.block-material {

}	
		
	
	


.button .gA, .button .gB, .button .gC, .button .gD {

padding-top: 3.5rem;
}







h6  {
	transform: rotate(-90deg);
			font-size: 1em;
	        left: 20rem;
			bottom: 2rem;
	position: absolute;
	color: red;
}

/*Desktop Format End */

#main-menu {
background-color: grey;	
width: 100vw;
height: 40px;
padding: 0.3rem 0	0 1rem;
left: 0;
top: 0;
position: absolute;	
display:block;			
}


#main-menu h3 {
margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
}

#main-menu h3 a {
color: white;
}

#main-menu h3 a:hover {
color: red;
}

#main-menu h3 a:visited {
color: white;
}



#container {
background-color: white;	
width: 100vw;
height: 100vh;
left: 0;
top: 40px;
position: absolute;	
display:block;			
}


#instructions {
top: 0;
left: 0;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 5rem;
font-size: 2rem;
background-color: white;	
width: 100vw;
height: 100vh;
position: absolute;	
display:block;
	
}

#message {
margin-inline: auto;
width: 50vw;
height: 50vh;

}


@media screen and (orientation:portrait) {
  #container {

display:none;			
}
}

@media screen and (orientation:landscape){
  #instructions {

display:none;			
}
}

h5 {
display: none;
font: 10px Arial, sans-serif;
}

.button .concrete {
background-color: #969696;	
}

.button .metal {
background-color: #0DCAF2;	
}

.button .timber {
background-color: #FFD940;	
}

.button .brick {
background-color: #FF9E40;	
}