@font-face
{
font-family: "Gilsans" ;
src: url("fonts/GillSansStd.otf");

}
@font-face{
font-family: "Gilsans" ;
src: url("fonts/GillSansStd.otf");
}

*  {
  box-sizing: border-box;
  padding:0;
  margin: 0 0 0 0;
}

.bigbox{
	position: relative;
  	min-height: 100%;
	max-width:100%
	/*border:4px solid brown;*/
	overflow:hidden;
}

html, body,  grid-container{ height: 99.99%; width:100%; background-color:black;}

.grid-container * { 
 border: none; 
}

.grid-container *:after { 
 position: absolute;
 top: 0;
 left: 0;
}

.grid-container {
  position:absolute;
  bottom:0;
  top:0;
  left:0 ;
  height:100%;
  width:100%;
  align:center;
  display: grid;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns: 100vw;
  grid-template-rows: [row1-start] 85vh [row1-end row2-start] 15vh [row2-end];
  grid-row-gap:0; 
  grid-template-areas: "image1 image1 text text" ;
  background-color:black;
  Overflow:hidden;
}

.image1 {  
	grid-area: image1; 
	grid-column: 1;  
	grid-row: span 1; 
	height: 100%; 
	width:100%;  
	margin: 0 0 0 0; 
	padding:0; 
	object-fit:cover;
	object-position:top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: url("sleepingcouple.jpg");}

.text {  
	grid-area: text; 
	grid-column: 1;  
	grid-row: span 2;
	height: 100%; 
	width: 100%; 
	background-image: linear-gradient(black, grey); 
	margin:0 0 0 0; 
	padding:0; 
	grid-row-start 2;  
	grid-row-end: span 2;}

.menu ul { 
	display:flex;
	width:100%;
  	list-style-type: solid circle;
	margin: 2vh 0 0 8vw;
	padding:0;
	background-color:none;
  	color: #d9597f;
	}

.menu li span{
  	position: relative;
  	left: -10px;
}

.menu li a{
	
	font-family: "Gilsans" ;
  	color: white;
	font-size:3vw;
	padding:10px;
	text-decoration:none;
	line-height: 3vh;
	margin-bottom:2rem;
	}

.menu li a:last-child {
  	margin-right:10px;
	}


.menu li a:hover:not(active){
	color:#d9597f;
	}

h1{
	font-family: "Gilsans" ; 
	font-size: 4vw; 
	color:white; padding:0px;  width:100vw; 
	line-height: 14px; 
	letter-spacing: .2rem; 
	margin: 3vh 0 0 0; 
	text-align:center;}

h2{ 
	font-family: "Gilsans" ; 
	letter-spacing: .2rem; 
	width:100vw; 
	margin: 2vh 0 0 0; 
	font-size: 4vw; 
	color:#d9597f;  
	line-height: 14px; 
	word-spacing: normal; 
	text-align:center; width:100vw;}

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

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

.grid-container {
  
	grid-template-rows: [row1-start] 80% [row1-end row2-start] 21% [row2-end]; 
  	Overflow:contain;
	}

.image1 {  
	grid-area: image1; 
	grid-column: 1;  
	grid-row:1;
	max-height: 100%; 
	width:100%; 
	margin-top:6vh;
	padding:0 0 0 0; 
	object-fit:contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("sleepingcouple.jpg")
	overflow:scroll;
	/*border:2px solid white;*/
	
	}

.text {  
	grid-area: text; 
	grid-column: 1;  
	min-height: 100%; 
	width: 100%; 
	background-image: linear-gradient(black, grey); 
	margin-top:-2vh; 
	margin-bottom:0;
	padding:0; 
	grid-row: 2;  
	overflow:scroll;
	/*border: 2px solid yellow;*/
}



.menu ul { 
	display:inline block;
	width:90%;
  	list-style-type: solid circle;
	margin-top: 3vh;
	margin-bottom: 0;
	margin-left: 8vw;
	margin-right: auto;
	padding:0;
	background-color:none;
  	color: #d9597f;
	}

.menu li span{
  	position: relative;
	justify-content:center;
	
	
	
}

.menu li a{
	font-family: "Gilsans" ;
  	color: white;
	font-size:3.2vw;
	padding:0.75em;
	text-decoration:none;
	line-height: 8vh;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	
	
	
	
	}

.menu li a:last-child {
  	margin-right:0;
	
	}


.menu li a:hover:not(active){
	color:#d9597f;
	}

h1{
	font-family: "Gilsans" ; 
	font-size: 4vw; 
	color:white; padding:0px;  width:100vw; 
	line-height: 14px; 
	letter-spacing: .2rem; 
	padding-top:0;
	text-align:center;}

h2{ 
	font-family: "Gilsans" ; 
	letter-spacing: .2rem; 
	width:100vw; 
	margin: 1vh 0 0 0; 
	font-size: 4vw; 
	color:#d9597f;  
	line-height: 14px; 
	word-spacing: normal; 
	text-align:center; width:100vw;}

}


/*---------------------------------------------------*/
@media only screen and (min-width: 764px) and (max-width: 1200px){
/* For tablet: */

.grid-container {
  Bottom:0vh;
  Top:0vh;
  margin-left:0vw ;
  margin-right:0vw;
  height:100%;
  width:100%;
  grid-template-columns: [col1-start] 75% [col1-end col2-start] 25% [row2-end];
  grid-template-rows: 100%;

}

.image1 {  
	grid-area: image1; 
	grid-column: 1;  
	grid-row:1; 
	height: 100%; 
	width:100%;  
	margin: 0 0 0 0; 
	padding:0; 
	object-fit:cover;
	object-position:top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: url("sleepingcouple.jpg");
	}

.text {  
	grid-area: text; 
	grid-column:  2;  
	grid-row: 1; 
	height: 100%; 
	width: 100%; 
	background-image: linear-gradient(to right, #1f1c1b , grey);
	margin:0 0 0 0; 
	padding:0;
	
	 }



h1{ 
	width:100%; 
	line-height: 3vh; 
	letter-spacing: .4vw; 
	font-size: clamp(18px, 4vw, 20px);
	text-align:left;
	margin-left:3.2vw;
	margin-top:10vh;
	margin-right:0;
	}

h2{ 
	width:100%; 
	line-height: 0vh; 
	letter-spacing: .4vw; 
	font-size: clamp(18px, 4vw, 20px); 
	text-align:left;
	margin-top:2vh;
	margin-left:3.2vw;
	margin-bottom:55vh;
	}
	


.menu ul  { 
	display:block;
	position:fixed;
	bottom:10vh;
  	list-style-type: solid circle;
	width:25vw; 
	padding:1px;
	background-color:none;
  	color: #d9597f;
	margin-left:5vw;
	font-size: clamp(1.4vw, 1.4em, 4vw);
	
	}

.menu li a{
	
	font-size:1rem;
	margin-top:20vh;
	}



.menu li a:hover:not(active){
	color:#d9597f;
	}

}
/*----------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
/* For desktop: */

.grid-container {
  Bottom:10vh;
  Top:10vh;
  margin-left:20vw ;
  margin-right:20vw;
  height:80%;
  width:60%;
  grid-template-columns: [col1-start] 37vw [col1-end col2-start] 23vw [row2-end];
  grid-template-rows: 80vh;

box-shadow:  10px 10px 20px #888888;
border-radius: 50px 25px 25px 25px;

}

.image1 {  
	grid-area: image1; 
	grid-column: 1;  
	grid-row:1; 
	height: 100; 
	width:100%;  
	margin: 0 0 0 0; 
	padding:0; 
	object-fit:cover;
	object-position:top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: url("sleepingcouple.jpg");
	border-radius: 50px 0px 0px 25px;}

.text {  
	grid-area: text; 
	grid-column:  2;  
	grid-row: 1; 
	height: 100%; 
	width: 100%; 
	background-image: linear-gradient(to right, #1f1c1b , grey);
	margin:0 0 0 0; p
	padding:0;
	border-radius: 0px 25px 25px 0px;
	
	 }



h1{
	  
	width:32vw; 
	line-height: 1vh; 
	letter-spacing: .4vw; 
	font-size: clamp(20px, 12vw, 23px);
	text-align:left;
	margin-left:3.2vw;
	margin-top:10vh;
	}

h2{ 
	width:32vw; 
	line-height: 0vh; 
	letter-spacing: .4vw; 
	font-size: clamp(20px, 12vw, 23px); 
	text-align:left;
	margin-top:4vh;
	margin-left:3.2vw;
	margin-bottom:35vh;
	}
	


.menu ul  { 
	display:block;
  	list-style-type: solid circle;
	width:32vw; 
	padding:1px;
	background-color:none;
  	color: #d9597f;
	margin-left:5vw;
	font-size: clamp(1.4vw, 1.4em, 4vw);
	}

.menu li a{
	
	font-size:1rem;
	}



.menu li a:hover:not(active){
	color:#d9597f;
	}
}