/* reset the browsers settings */
* {
    margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

h1 {
	text-align: center;
	font-family: var(--site-default-font);
	text-transform: capitalize;
	text-decoration: none;
	font-size: calc((1vw + 1vh)*0.7);
}

body { 
	display: grid;
	grid-template-columns: 1fr;
	
/* May 2019
	grid-template-rows: 8% 1fr 3%;  
*/
	grid-template-rows: calc((1vw + 1vh)*4) 1fr 3%;  
		
	grid-template-areas: 
		"header"
		"article"
		"footer";
	margin: 0;
	min-height: 100vh;
	background: var(--page-background-colour);
}  

#mainArticle { 
	grid-area: article;      
	background: var(--article-background-colour);
	color: var(--article-text-colour);
	display: grid;
	grid-template-columns: 3% 1fr 3%;
	grid-gap: calc((1vw + 1vh)*0.3);
	background: var(--page-background-colour);
	padding: 2vh 0vw 1vh 0vw;
}

.products {
	grid-column: 2;
	height:calc(1vw*20);
	background: var(--product-tab-background-colour);
	box-shadow: calc(0.8vw) calc(0.8vh)  calc((1vw+1vh)*1)  0 rgba(0, 0, 0, 0.2);
	border-radius: calc((1vw + 1vh)*var(--tab-radius-left)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-left));
	display: grid;
	grid-template-columns: 2% 2fr 2% 5fr 2%;
	grid-template-rows: 2% 1fr 2%;
}

.product_pix {
	grid-column: 2;
	grid-row: 2;
	background:#000;
}


.product_pix img, .product_pix iframe {  
    max-height: 100%;  
    max-width: 100%;  
    position: relative;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
}
 

.product_description h1 {
	color: var(--product-title-text-colour);
	font-family: var(--site-default-font);
	font-size: calc((1vw + 1vh)*0.9);
}

.product_description {
	grid-column: 4;
	grid-row: 2;
	display: grid;
	grid-template-columns: 1fr 2% 1fr 2% 1fr 2% 1fr 2% 1fr;
	grid-template-rows: 3% 5fr 3% 1fr 3%;
	/*overflow: hidden;*/
}

.product_text {
	grid-column: 1/10;
	grid-row: 2;
	background: var(--product-text-background-colour);
	color: var(--product-text-colour);
	font-family: var(--site-default-font);
	font-size: calc((1vw + 1vh)*0.75);
	/*overflow: hidden; */
	text-align: justify;
	padding:0.5vh 1vw 1vh 1vw;
}
	
.product_button1 h1, .product_button2 h1, .product_button3 h1, .product_button4 h1, .product_button5 h1 {
	color: var(--header-text-colour);
	padding: 1vh 0px 0px 0px;

}

.product_button1:hover h1, .product_button2:hover h1, .product_button3:hover h1, .product_button4:hover h1, .product_button5:hover h1 {
	color: var(--nav-hover-text-colour);
}

.product_button1, .product_button2, .product_button3, .product_button4, .product_button5 {
	border-radius: calc((1vw + 1vh)*var(--tab-radius-left)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-left));
	color: var(--product-title-text-colour);
}

.product_button1:hover, .product_button2:hover, .product_button3:hover, .product_button4:hover, .product_button5:hover {
	background: var(--nav-hover-background-colour);
	color: var(--nav-hover-text-colour);
}

.product_button1 {
	grid-column: 1;
	grid-row: 4;
	background: var(--product-button1-background-colour);
}

.product_button2 {
	grid-column: 3;
	grid-row: 4;
	background: var(--product-button2-background-colour);
}

.product_button3 {
	grid-column: 5;
	grid-row: 4;
	background: var(--product-button3-background-colour);
}

.product_button4 {
	grid-column: 7;
	grid-row: 4;
	background: var(--product-button4-background-colour);
}

.product_button5 {
	grid-column: 9;
	grid-row: 4;
	background: var(--product-button5-background-colour);
}




  
/* goto top button */  
  
#myBtn {
	display: none;
	position: fixed;
	bottom: 1vh;
	right: 2vw;
	font-size: calc((1vw + 1vh)*1.8);
	border: none;
	outline: none;
	background-color: var(--general-hover-button);
	color: white;
	cursor: pointer;
	opacity: 0.8;
	border-radius: calc((1vw + 1vh)*1);
  	padding: 0.6vh;
}

#myBtn:hover {
	background-color: #555;
}
  
  
  

/* change the layout if portrait is detected */
@media only screen and (orientation: portrait) {

.products {
	grid-column: 2;
	height:calc(1vw*40);
	display: grid;
	grid-template-columns: 2% 2.2fr 2% 5fr 2%;
	grid-template-rows: 2% 1fr 2%;
}

.product_button1 h1, .product_button2 h1, .product_button3 h1, .product_button4 h1, .product_button5 h1 {
	padding:0.5vh 0px 0px 0px;
}

} /* end of media test */