*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
/*	-ms-transform: scale(0.98,0.98);
    -webkit-transform: scale(0.98,0.98);
    transform: scale(0.98,0.98);*/
}

img{
    display: none
}

span {

	color: blue;
}

p.one:hover img{
    display: block;
    margin: 0, auto;
    position: absolute;
    z-index: 4;
    width: 60%;
    left: 20%;
    top:25%;
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

h3.one:hover img{
    display: block;
    margin: 0, auto;
    position: absolute;
    z-index: 4;
    width: 60%;
    left: 20%;
    top:25%;
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

h4.one:hover img{
    display: block;
    margin: 0, auto;
    position: absolute;
    z-index: 4;
    width: 80%;
    left: 10%;
    top:25%;

}

/*.popup {
	height: 100%;
  	margin: 0;
}*/

/*#image {
	position: relative;
}*/

/*.pop-up img{

	display: none;
}

.pop-up {
	display: block;
position: absolute;
  width: 70vw;
  height: 70vh;
  max-width: 100%;
  max-height: 90vh;
  top: 15%;
  left:15%;
  z-index: 5;
*/


/*img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}*/



.top {

	padding-top: 20%;
}


.box {
	display: inline-block;
	padding: 2%;
	text-align: center;
/*	border-style: solid;
	border-color: black;
	border-width: 2px;*/
}

h2 {
	font-size: 3.8vmin;
	font-family: sans-serif;
	color: transparent;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
}

a {

	text-decoration: none;
}

nav {

margin-left: 13.5%;
z-index: 5;

}

nav a {
	padding-top: 5%;
	padding-left: 24%;
	font-size: 1.4vmin;
	font-family: sans-serif;
	z-index: 10;
	text-decoration: none;
	color: black;
}


h3{
	font-family: monospace;
	/*font-style: italic;*/
	font-size: 2vmin;
	font-weight: normal;
	padding-top: 2%;
} 

p {
	font-family: sans-serif;
	font-size: 2.1vmin;
}

h4 {
	font-family: serif;
	font-size: 2.1vmin;
	font-weight: normal;
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(7, 1fr);
	grid-gap: 5px;
	width: 100vw;
	height: 100vh;
}

.box.box1 {
	grid-column-start: 1;
	grid-column-end: 8;
	padding-left: 20%;
	padding-right: 20%;
}

.box.box2 {
	grid-column-start: 1;
	grid-column-end: 8;
	padding-left: 20%;
	padding-right: 20%;
}

.box.box3 {
	grid-column-start: 1;
	grid-column-end: 8;
	padding-left: 20%;
	padding-right: 20%;
	
}
.box.box4 {
	grid-column-start: 1;
	grid-column-end: 8;
	padding-left: 20%;
	padding-right: 20%;
}
.box.box5 {
	grid-column-start: 1;
	grid-column-end: 8;
	padding-left: 20%;
	padding-right: 20%;
}

 h1 {
	font-family: sans-serif;
	margin-top: 2%;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	color: transparent;
	text-transform: uppercase;
	text-align: center;
    justify-content: center;
    font-size: 4.5vmin;
    overflow: hidden; /* will contain if #first is longer than #second */
}

.arrow{
	transform:rotate(90deg);
	-ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
	display: inline-block;
}

.arrowdown{
	transform:rotate(270deg);
	-ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg); /* Opera */
	display: inline-block;
}

.arrowright{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); 
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
	display: inline-block;
}

.foot {
	position: fixed;
    z-index: 2;
    height: 100%;
    width:100%;
    display: block; 
 	bottom: -90%;
background: -moz-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(229,229,229,1) 4%, rgba(192,192,192,1) 10%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(4%, rgba(229,229,229,1)), color-stop(10%, rgba(192,192,192,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(229,229,229,1) 4%, rgba(192,192,192,1) 10%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(229,229,229,1) 4%, rgba(192,192,192,1) 10%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(229,229,229,1) 4%, rgba(192,192,192,1) 10%); /* ie10+ */
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(229,229,229,1) 4%, rgba(192,192,192,1) 10%); /* w3c */
}

.slide-up {
    bottom: 0% !important;
}

.slide-down {
    bottom: -90% !important;
}

.foot h1 {
	font-family: sans-serif;
	margin-top: 2%;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	color: transparent;
	text-transform: uppercase;
	text-align: center;
    justify-content: center;
    font-size: 4.5vmin;
    overflow: hidden; /* will contain if #first is longer than #second */
}

.under {
	float: left;
	margin-top:5%;
	width: 50%;
	margin-left: 5%;
	font-size: 2.5vmin;
}

ul {

	padding-bottom: 1%;
}

.main {

	margin-top: 5%;
}

.info {
	font-family: monospace;
}

.video {
	position: relative;
    float: left;
    margin-top: 5%;
    padding: 2%;
    width: 45%;
    height: 49%;

}