@keyframes orient {
  0% { background: none;}
  50% {background: #f6c8cb; }
  100% { background: none;}
}

body, html{
  height: 100%;
  font-family: "Helvetica", 'Work Sans', sans-serif;
  
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 17% 15% 18% 5% 10% 25%;
  grid-template-rows: 5% 40% 35% 5% 5%;
  grid-template-areas: 'name header header header header right'
    'name main main main main right'
    'name main main main main right'
     'footer main main main main right';
} 
.item-b {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
  /*background: blue;*/
}



.item-n{
grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4;
  z-index: 110;
  position: flex;
	cursor: crosshair;
 /* justify-content: center;
  align-self: center*/
}

.item-n ul, .item-n2 ul{
margin: 4.3vh;
padding-left:5px;
text-align: justify;
font-size: 2.1vh;
cursor: crosshair;
}
.item-n ul span:last-child, .item-n2 ul span{
left: 50%;
	text-transform: inherit;
position: absolute;
cursor: crosshair;
}
.item-n ul span:nth-child(2), .item-n2 ul span{
left: 41%;
position: absolute;
	text-transform: inherit;
cursor: crosshair;
}
.item-n ul span:nth-child(1), .item-n2 ul span{
    display: inline-block;
	width: 58%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-transform: uppercase;
	cursor: crosshair;
}


ul{
margin: 6px;

}
#percent {
    grid-row: 1/1;
    grid-column: 6/10;

    display: flex;
	justify-self: end;
}
.item-i{
font-size: 1.8vh;
 grid-column-start: 3;
  grid-column-end: 9;
  grid-row-start:5;
  grid-row-end: 8;
  bottom: 0px;
  display: flex;
  z-index: 120;
}
#clickOut{
	 grid-column-start: 1;
  grid-column-end: 10;
  grid-row-start:1;
  grid-row-end: 7;
	z-index:0;
}
.contact{
 grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start:7;
  grid-row-end: 7;
align-self: end;
	justify-self: end;

}
.item-c {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  background: white;
}
.item-d {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: yellow;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.item-e {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 100;
  font-size: 1.7vh;
  line-height: 2.9vh;
}
a{
color: black;
text-decoration: none;
cursor: n-resize;
}
.item-e p {
padding: 5px;
}
.item-f {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 7;
  grid-row-end: 7;
  z-index: 100;
  align-self: end;
}
#namePer{
font-size: 13px;

}
.item-g {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
/*
  background: green;
*/
  color: black;
  font-size:13px;
}
.item-h{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end:3;
}
.item-h img{
max-width: 60vw;
 height: 80vh;
}
.item-h video{
max-width: 60vw;
 height: 80vh;
}
.item-j{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end:6;
}
.item-j video{
max-width: 60vw;
 height: 80vh;
}
#menu{
  position: fixed;
  top: 0.8em;
  bottom: 0.4em;
  width: 10vw;
  height: 100%;
  background: white;
  left: 200px;
  z-index: 20;
}
head{
  position: fixed;
}
#menumenu{
  position: absolute;
  right: 15% ;
  z-index: 20;
}
#maintext{
  padding-left: 80px;
  padding-right: 40px;
  padding-top: 60px;
  padding-bottom: 60px;
}
body{
  background: white;
  margin-top: 0em;
}
#main{
  top: 0em;
  width: 61%;
  background: white;
  margin-left: 18%;
  position: relative;
}
#requestOrient{
display: none;
		}
#right-elmnt{
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(210,210,210,1) 86%);
  width: 20%;
  margin-left: 78%;
  height: 100vh;
  position: fixed;
  top: 0em;
}
#firstname, #sirname{
  position: absolute;
  background: white;
  overflow-x: hidden;
  bottom: -19vh;
  
}
#firstname{
 font-size: 22vh;
 font-family:serif;
  width: 110%;
} 
#sirname{
  font-size: 22vh;

  font-family: serif;
    letter-spacing: -0.05em;
}
img{
  background: white;
  padding-top: 20px;
  align: center;
}
::selection {
    background: #f6c8cb;
}
a::selection {
	text-decoration: underline;
}
.block{
  opacity: 0.9;
  padding: 5px;
}
#box{  
  transform: rotate(90deg); 
  transform-origin: center;
  margin-top: 50%;
  max-height: 13%;
}
#name{
 position: fixed;
 width: 28vh;
 height: 100%;
overflow: hidden;
}
#playstop {
    font-size: 30px;
    cursor: pointer;
    justify-content: center;
    align-content: center;
    color: white;
}



@media only screen and (max-device-width: 800px)
 { ... 
body, html{
  height: 100%;
  font-family: "Helvetica", 'Work Sans', sans-serif;
	overflow-x: hidden;
}
.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 3% 28% 13% 5% 10% 25%;
  grid-template-rows: 24vw 2% auto 8% 40% 35% 5% 5%;
  grid-template-areas: 'name header header header header right'
    'name main main main main right'
    'name main main main main right'
     'footer main main main main right';
} 
.item-b {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
  /*background: blue;*/
}

.item-n{
grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 5;
  z-index: 110;
 justify-self: left;
	position: static;
}

.item-n ul, .item-n2 ul{
margin: 2.3vw;
font-size: 4.1vw;
cursor: crosshair;
margin-left: 0vw;
padding-left: 2vw;
text-align: left;
}
.item-n ul span:last-child, .item-n2 ul span{
	text-transform: inherit;
	font-size: 3vw;
	left:auto;
	position: static;
}
.item-n ul span:nth-child(2), .item-n2 ul span{
  padding: 10vw;
	text-transform: inherit;
	font-size: 3vw;
	position: static;
	left: auto;
}
.item-n ul span:nth-child(1), .item-n2 ul span{
    width: auto;
	text-transform: uppercase;
}


ul{
margin: 6px;

}
.item-i {
    font-size: 1.8vh;
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 4;
    grid-row-end: 7;
    bottom: 0px;
    display: flex;
    z-index: 120;
}
#clickOut{
  grid-column-start: 1;
  grid-column-end: 10;
  grid-row-start:1;
  grid-row-end: 7;
	z-index:0;
}
.contact{
 grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start:1;
  grid-row-end: 2;
align-self: end;
	justify-self: end;

}
		.divClass {
    margin-top: auto;
    border-top: 2.3px dotted grey;
    width: 99%;
			
}
.item-c {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 1;
  background: white;
}
.item-d {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: yellow;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.item-e {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 3;
  grid-row-end: 4;
  z-index: 100;
  font-size: 2.28vw;
	line-height: 3.7vw;
	padding-left: 3%;
border-top: 2.3px dotted gray;
	margin-top: 1vw;
}
a{
color: black;
text-decoration: none;
cursor: n-resize;
}
.item-e p {
padding: 0px;
	padding-left: 0px;
	padding-right: 2%;
}
.item-f {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
  z-index: 100;
  align-self: end;
font-size: 3vw;
}
#namePer{
margin-left: 20%;
font-size: 12px;

}
.item-g {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
/*
  background: green;
*/
  color: black;
  font-size:13px;
}
.item-h{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end:3;
}
		.contact {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 2;
   z-index: 100;
  align-self: end;
font-size: 3vw;
}
.item-h img{
max-width: 60vw;
 height: 80vh;
}
.item-h video{
max-width: 60vw;
 height: 80vh;
}
.item-j{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end:3;
}
.item-j video{
max-width: 60vw;
 height: 80vh;
}
#menu{
  position: fixed;
  top: 0.8em;
  bottom: 0.4em;
  width: 10vw;
  height: 100%;
  background: white;
  left: 200px;
  z-index: 20;
}
head{
  position: fixed;
}
#menumenu{
  position: absolute;
  right: 15% ;
  z-index: 20;
}
#maintext{
  padding-left: 80px;
  padding-right: 40px;
  padding-top: 60px;
  padding-bottom: 60px;
}
body{
  background: white;
  margin-top: 0em;
}
#main{
  top: 0em;
  width: 61%;
  background: white;
  margin-left: 18%;
  position: relative;
}
#requestOrient {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 2;
    z-index: 120;
    font-size: 3vw;
    border-radius: none;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    border: none;
    display: flex;
    align-self: end;
	animation: orient 4s infinite;
	width: 170%;
}
#right-elmnt{
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(210,210,210,1) 86%);
  width: 20%;
  margin-left: 78%;
  height: 100vh;
  position: fixed;
  top: 0em;
}
#firstname, #sirname{
  position: absolute;
  background: white;
  overflow-x: hidden;
	bottom: auto;

  
}
#firstname{
 font-size: 22vw;
 font-family:serif;
  width: 99%;
	letter-spacing: 0.084em;
} 
#sirname{
  font-size: 22vw;

  font-family: serif;
    letter-spacing: -0.05em;
}
img{
  background: white;
  padding: 20px;
  align: center;
}
::selection {
    background: yellow;
  
}
.block{
  opacity: 0.9;
  padding: 5px;
}
#box{  
	transform: none;
 top: -80px;
  max-height: 13%;
	margin-top: auto;
}
#namePer{
	display: none;
	 }
#percent {
    display: none;
}
#name{
	position: static;
 width: 28vh;
overflow: hidden;
	height: auto;
	overflow: auto;
}
#playstop {
    font-size: 30px;
    cursor: pointer;
    justify-content: center;
    align-content: center;
    color: white;
	 }
}