*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
}

body {
	background-color: whitesmoke;
	margin: auto;
	padding: 0;
}

.header{
	margin: 0;
	padding: 0;
	background-image:
	linear-gradient(
	rgba(0, 0, 0, 0.25),
	rgba(0, 0, 0, 0.25)
	), url(images/touring.jpeg);
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover ;
	height: calc(100vh - var(--vh-offset, 0px));
	height: 100vh;
	height: calc(var(--vh ,1vh)*100);
}

h1{
	margin: 0;
	text-align: center;
	color: white;
	padding-top: 40vh;
	padding-bottom: auto;
	font-size: 60px;
	font-weight:auto;
	text-shadow:  2px 2px 6px #FF0000;
	overflow:hidden; 
}

h3{
	font-size: 35px;
	text-align: center;
}
p{
	font-size: 20px;
}


ul{
	z-index: 1;
	background-color: black;
	background:rgba(0, 0, 0, 0.8);
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: 0;
	list-style: none;
	padding: 0px 10dvw 0 0;
	width: 100%;	
	margin: 0;
	overflow: hidden;
}

li{
	border-right: 2px solid black;
	float: left;		
}

li:last-child{
	border-right: none;
}

li a{
	display: block;
	color:white;
	text-decoration: none;
	font-size: 23px;
	text-align: center;
	padding: 12px 10px;
}

li a:hover{
	font-weight: bolder;
}


a{
	
	color: green;
}



.mainGrid {
	background-color: whitesmoke;
	margin: auto;
	padding: 0;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 100px 1fr 100px;
	grid-template-areas:

	"sidebarLeft about sidebarRight"
	"sidebarLeft ski sidebarRight"
	"sidebarLeft protons sidebarRight"
	"sidebarLeft poet sidebarRight"
	"sidebarLeft contact sidebarRight"
	"footer footer footer";
}

.sidebarLeft, .sidebarRight{
	grid-area: sidebarLeft;
	background-color: white;
}
.sidebarRight{
	grid-area: sidebarRight;

}


.about,.ski,.protons,.poet,.contact{
	margin-top: 80px !important;
	padding-top: 55px;
	background-color: transparent;
}

.about{
	grid-area: about;
	margin-top: 50px !important;
	margin: 0 auto;
	background-image: url(../images/adam.jpg);
	background-size: 50%;
	background-origin:padding-box;

	background-repeat: no-repeat;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto ;
	grid-template-areas:
	". abtit"
	". abtxt";
	max-width: 901px;
	min-height: 300px;
}
.abtit{
	grid-area: abtit;
	text-align: center;
}

.abtxt{
	padding: 0 12%;
	grid-area: abtxt;
}
.abimg{
	display: none;
	grid-area: abimg;
}

.ski{
	grid-area: ski;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto ;
	grid-template-areas:
	"skiimg skitit"
	"skiimg skitxt";
	max-width: 901px;
}
.skitit{
	grid-area: skitit;
	text-align: center;
}
.skitxt{
	padding: 0 12%;
	grid-area: skitxt;

}
.skiimg{
	grid-area: skiimg;
}





.protons{
	grid-area: protons;
	margin: 0 auto;
	max-width: 550px;
	
}
.fade{
	z-index: 0;
	margin-left:auto;
	margin-right: auto;
	position:relative;
	width:75%;
  }

	.img{
	  display:block;
	  width:100%;
	  opacity:1
	}
	.imgfade{
	  opacity:0;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%, -50%);
	}
	.text{
	  background-color: transparent !important;

	  padding: 15px 25px;
	  font-size:30px;
	  color:white;
	}
	.fade:hover .img{
	  opacity:0.5;
	}
	.fade:hover .imgfade{
	  opacity:1;
	}



.poet{
	grid-area: poet;
	margin:0 auto;
	max-width: 400px;
	text-align: left;
	

}





.contact{
	grid-area:contact;
	margin:0 auto;
	max-width: 400px;
	text-align: left;
}
.contact p{
	font-size: 1.3rem;
}
.contact h3{
	font-size: 2rem;
}

.footer{

padding: 10px 0 5px 10px;
grid-area: footer;
text-align: center;
background-color: black;

}



@media only screen and (max-width:1981px) {
.about{

background-color: transparent;
display: grid;
grid-template-columns: 1fr;
grid-template-rows:auto ;
grid-template-areas:
" abtit"
" abtxt"
"abimg";
background-color: whitesmoke;
background-image: none;
}
.abimg{
display: inline-flex;
justify-content: center;
max-width: 600px;
margin: 0 auto;
}
}



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

.mainGrid{
grid-template-columns: 10px 1fr 10px;
}




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


body{background-color:whitesmoke;}

ul{
padding:0; 
}
.mainGrid{
grid-template-columns: 10px 1fr 10px;
}



.protons{
display: grid;
grid-template-columns: 1fr;
grid-template-rows:auto ;
grid-template-areas:
" protonstit"
" protonstxt"
"protonsimg";

background-image: none;
}
.protonsimg{
display: inline-flex;
justify-content: center;
}


.ski{
display: grid;
grid-template-columns: 1fr;
grid-template-rows:auto ;
grid-template-areas:
" skitit"
" skitxt"
"skiimg";

background-image: none;
}
.skiimg{
display: inline-flex;
justify-content: center;
}

.skitxt{
	text-align: center;
}

}


@media only screen and (max-width: 440px){
	.mainGrid{
	grid-template-columns:5px 1fr 5px;
	}
	.sidebar, .sidebarr{

	background-color:transparent;
	}
	
	li a{
	font-size: 20px;
	}
	li:first-child {
	display: block;
	}
	a{
	color: black;
	}


}

@media only screen and (max-width: 380px){
	li>a{
		font-size: 14.5px;
	}

}
@media only screen and (max-width: 305px){
	li>a{
		font-size: 13.5px;
	}

}
@media only screen and (max-width: 289px){
	ul{display: none;}
	li{
		float: none;
	}
}