* {
  box-sizing: border-box;
}

html, body   {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}
.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	place-items:center;
	grid-template-areas: 
	"header header"
	"introduction introduction"
	"massage massage"
	"reflex reflex"
	"beauty beauty"
	"skin skin"
	"micro micro"
	"left right"
	"crumb crumb"
	"footer footer";
}

img {
	max-width:100%;
	height:auto;
	
}
.header {
	padding:2%;
	grid-area:header;
	place-items:center;
	height: 80vh;
	width:100%;
	display:grid;
  /* background: url('../images/refexology.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}

.header1 {
	padding:2%;
	grid-area:header;
	place-items:center;
	height: 80vh;
	width:100%;
	display:grid;
  background: url('../images/refexology.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



/* header background images for the pages, just copy and change class */
.header-bg {
   background: url('../images/header.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg1 {
   background: url('../images/reflexology.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}


.header-bg2 {
   background: url('../images/massage.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg3 {
   background: url('../images/beauty.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg4 {
   background: url('../images/skinpeel.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg5 {
   background: url('../images/reflex1.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg6 {
   background: url('../images/micro.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

.header-bg7 {
   background: url('../images/services.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}


/* Finish backgrounfd images for the pages */

.introduction {
	padding:2%;
	grid-area:introduction;
	width:100%;
	max-width:1300px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.section1 {
	grid-area: massage;
	place-items:center;
	display:grid;
	height: 70vh;
	width:100%;
   background: url('../images/massage.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.section2 {
	grid-area:reflex;
	place-items:center;
	display:grid;
	height: 70vh;
	width:100%;
   background: url('../images/reflex1.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:10px;
	
}

.section3 {
	grid-area:beauty;
	place-items:center;
	display:grid;
	height: 70vh;
	width:100%;
   background: url('../images/beauty.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:10px;
	
}

.section4 {
	grid-area:skin;
	place-items:center;
	display:grid;
	height: 70vh;
	width:100%;
   background: url('../images/peel21.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:10px;
	
}
.section5 {
	grid-area:micro;
	place-items:center;
	display:grid;
	height: 70vh;
	width:100%;
   background: url('../images/micro.jpg') no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:10px;
	
}

/* Change these sections*/

.breadcrumb {
	text-align:center;
	padding:2%;
	grid-area:crumb;
}

.footer {
	text-align:center;
	padding:2%;
	grid-area:footer;
	background-color:#4D4677;
	color:white;
	font-family: 'Maven Pro', sans-serif;
	width:100%;
}


/*MEDIA */
/* MOBILE MEDIA QUERIES 1024 */

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

.grid-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
	"header"
	"introduction"
	"massage"
	"reflex"
	"beauty"
	"skin"
	"micro"
	"crumb"
	"footer";
}

}