* {
  box-sizing: border-box;

}

/*html, body   {
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}*/

.grid-container {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo contact contact contact contact1 contact1 contact1 social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"intro intro intro intro intro intro intro intro intro intro intro intro"
	"rooms rooms rooms rooms image1 image1 eat eat eat eat image2 image2"
	"image3 image3 retreat retreat retreat retreat image4 image4 experience experience experience experience"
	"explore explore explore explore image5 image5 about about about about image6 image6"
	"widget widget widget widget widget widget widget widget widget widget widget widget"
	"strap strap strap strap strap strap strap strap strap strap strap strap"
	"box1 box1 box1 box1 box2 box2 box2 box2 box3 box3 box3 box3"
	"left-box left-box left-box left-box left-box left-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits address address address address address address"
	;
}

/* Grid container 2 left and right content */

.grid-container2 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo contact contact contact contact1 contact1 contact1 social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"left-box left-box left-box left-box left-box left-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits address address address address address address"
	;
}

.grid-container3 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo contact contact contact contact1 contact1 contact1 social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"box1 box1 box1 box1 box2 box2 box2 box2 box3 box3 box3 box3"
	"left-box left-box left-box left-box left-box left-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits address address address address address address"
	;
}


img {
  max-width: 100%;
  height: auto !important;
}

.navigation {
	padding:10px;
	grid-area:nav;
	text-align:center;
	width: 100%;
	background-color: #8E9871;
	/*background-color: #2298A8;*/
}
.nav-wrapper {
	max-width: 1200px; 
	margin-left: auto; 
	margin-right: auto;
}
.logo {
	padding:10px;
	grid-area:logo;
	text-align:center;
}
.contact {
	padding:10px;
	grid-area:contact;
	text-align:center;
	padding-top:50px;
}
.contact1 {
	padding:10px;
	grid-area:contact1;
	text-align:center;
	padding-top:50px;
}
.social {
	padding:10px;
	grid-area:social;
	text-align: center;
}
.slider {
	grid-area:slider;
}
.intro {
	padding:10px;
	grid-area:intro;
	text-align: center;
}
.rooms {
	padding:10px;
	grid-area:rooms;
	text-align: center;
}


/* BG IMAGES in BOXES */
.image1 {
	grid-area:image1;
	background-image:url('../images/sleep.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}
.image2 {
	grid-area:image2;
	background-image:url('../images/eat.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

}
.image3 {
	grid-area:image3;
	background-image:url('../images/retreat1.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

}
.image4 {
	grid-area:image4;
	background-image:url('../images/experience1.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

}
.image5 {
	grid-area:image5;
	background-image:url('../images/explore1.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

}
.image6 {
	grid-area:image6;
	background-image:url('../about1.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;

}
/* End image boxes */


/* START HOVER IMAGE TYPE LINKS */

.eat {
	padding:10px;
	grid-area:eat;
	text-align: center;
}

.retreat {
	padding:10px;
	grid-area:retreat;
	text-align: center;
}
.experience {
	padding:10px;
	grid-area:experience;
	text-align: center;
}
.explore {
	padding:10px;
	grid-area:explore;
	text-align: center;
}
.about {
	padding:10px;
	grid-area:about;
	text-align: center;
}

/* FREE TO BOOK WIDGET */
.widget {
	padding:10px;
	grid-area: widget;
	text-align:center;
}

/* STRAP LINE */
.strap {
	padding:10px;
	grid-area:strap;
	text-align: center;
}


/* 3 BOX LAYOUT CONFIG */
.box1 {
	padding:10px;
	grid-area:box1;
	text-align: center;
}
.box2 {
	padding:10px;
	grid-area:box2;
	text-align: center;
}
.box3 {
	padding:10px;
	grid-area:box3;
	text-align: center;
}

/* 2 BOX LAYOUT CONFIG */
.left-box {
    grid-area:left-box;	
    text-align:center;
    padding-left:20px;
    padding-right:20px;	

}

.right-box {
    grid-area:right-box;
    text-align:center;
    padding-left:20px;
    padding-right:20px;	
}

/* CREDITS ICONS */

.credits {
	padding:10px;
	grid-area:credits;
	text-align: center;	
	background-color:#F1F1F1;
}

/* ADDRESS */
.address {
	padding:10px;
	grid-area:address;
	text-align: center;
	background-color:#F1F1F1;
}


/******************************* MEDIA QUERIES *************************************/

/* wide screen desktop */
@media screen  and (max-width:1920px) {
	.nav-wrapper {
		max-width: 895px; 
		margin-left: auto; 
		margin-right: auto;
}

}


/* Laptop 1280px */

@media screen  and (max-width:1280px) {
	.nav-wrapper {
		max-width: 850px; 
		margin-left: auto; 
		margin-right: auto;
}

.contact {
	padding:10px;
	grid-area:contact;
	text-align:center;
	padding-top:40px;
}
.contact1 {
	padding:10px;
	grid-area:contact1;
	text-align:center;
	padding-top:40px;
}

}

/* 1024 ipad landscape */

@media screen  and (max-width:1024px) {
	.nav-wrapper {
		max-width: 850px; 
		margin-left: auto; 
		margin-right: auto;
}

}

/* 768 iPad portrait */

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

.grid-container {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact1 contact1 contact1 contact1 contact1 contact1"  
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"intro intro intro intro intro intro intro intro intro intro intro intro"
	"rooms rooms rooms rooms rooms rooms eat eat eat eat eat eat"
	"retreat retreat retreat retreat retreat retreat experience experience experience experience experience experience"
	"explore explore explore explore explore explore about about about about about about"
	"widget widget widget widget widget widget widget widget widget widget widget widget"
	"strap strap strap strap strap strap strap strap strap strap strap strap"
	"box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1" 
	"box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2" 
	"box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3"
	"left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box" 
	"right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}


/* Grid container 2 left and right content */

.grid-container2 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact1 contact1 contact1 contact1 contact1 contact1"  
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box" 
	"right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}

.grid-container3 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact1 contact1 contact1 contact1 contact1 contact1"  
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1" 
	"box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2" 
	"box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}


.image1 {
	display:none;
	
}
.image2 {
	
	display:none;
}
.image3 {
	
	display:none;
}
.image4 {
	
	display:none;
}
.image5 {
	display:none;
}
.image6 {

	display:none;
}

.contact {
	padding:10px;
	grid-area:contact;
	text-align:center;
	padding-top:0px;
}
.contact1 {
	padding:10px;
	grid-area:contact1;
	text-align:center;
	padding-top:0px;
}


}

/* Samsung Galaxy Nexus 7 604 */
 
@media screen and (max-width: 604px) {

.grid-container {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact contact contact contact contact contact" 
	"contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1" 
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"intro intro intro intro intro intro intro intro intro intro intro intro"
	"rooms rooms rooms rooms rooms rooms eat eat eat eat eat eat"
	"retreat retreat retreat retreat retreat retreat experience experience experience experience experience experience"
	"explore explore explore explore explore explore about about about about about about"
	"widget widget widget widget widget widget widget widget widget widget widget widget"
	"strap strap strap strap strap strap strap strap strap strap strap strap"
	"box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1" 
	"box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2" 
	"box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3"
	"left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box"
	"right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}

/* Grid Contianer 2 left and right content */

.grid-container2 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact contact contact contact contact contact" 
	"contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1" 
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box left-box"
	"right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box right-box"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}

.grid-container3 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-areas:
	"nav nav nav nav nav nav nav nav nav nav nav nav" 
	"logo logo logo logo logo logo logo logo logo logo logo logo" 
	"contact contact contact contact contact contact contact contact contact contact contact contact" 
	"contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1 contact1" 
	"social social social social social social social social social social social social"
	"slider slider slider slider slider slider slider slider slider slider slider slider"
	"box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1 box1" 
	"box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2 box2" 
	"box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3 box3"
	"credits credits credits credits credits credits credits credits credits credits credits credits" 
	"address address address address address address address address address address address address"
	;
}


.image1 {
	display:none;
	
}
.image2 {
	
	display:none;
}
.image3 {
	
	display:none;
}
.image4 {
	
	display:none;
}
.image5 {
	display:none;
}
.image6 {

	display:none;
}

.contact {
	padding:1px;
	grid-area:contact;
	text-align:center;
}
.contact1 {
	padding:1px;
	grid-area:contact1;
	text-align:center;
}

}


/* MOBILE MEDIA QUERIES Mobile iPhone 12 max plus */


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

.grid-container {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr;
	grid-gap: 10px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav"
	"logo" 
	"contact" 
	"contact1" 
	"social"
	"slider"
	"intro"
	"rooms" 
	"eat" 
	"retreat" 
	"experience"
	"explore" 
	"about"
	"widget"
	"strap"
	"box1" 
	"box2"
	"box3"
	"left-box"
	"right-box"
	"credits"
	"address"
	;
}

/* Grid Container 2 left and right content */
.grid-container2 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr;
	grid-gap: 10px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav"
	"logo" 
	"contact" 
	"contact1" 
	"social"
	"slider"
	"left-box"
	"right-box"
	"credits"
	"address"
	;
}

.grid-container3 {
	display:grid;
	grid-template-rows:1fr auto;
	grid-template-columns:1fr;
	grid-gap: 10px;
	margin-left:auto;
	margin-right:auto;
	grid-template-areas:
	"nav"
	"logo" 
	"contact" 
	"contact1" 
	"social"
	"slider"
	"box1" 
	"box2"
	"box3"
	"credits"
	"address"
	;
}


.image1 {
	display:none;
	
}
.image2 {
	
	display:none;
}
.image3 {
	
	display:none;
}
.image4 {
	
	display:none;
}
.image5 {
	display:none;
}
.image6 {

	display:none;
}


}

/* MOBILE MEDIA QUERIES Mobile iPhone 6 */

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



}



/* MOBILE MEDIA QUERIES Mobile Anroid */

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


}


/* MOBILE MEDIA QUERIES Mobile Lumia */

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


}