*{
	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: 60%;
    left: 20%;
    top:25%;

}

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;
}


/*.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;
}*/

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

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

.box.box3 {
	padding-top: 5%;
	font-size: 1.3vmin;
	font-family: sans-serif;
/*	color: grey;
*/	z-index: 10;
}

/*.box.box4 {
	padding-top: 5%;
	font-size: 1.3vmin;
	font-family: sans-serif;
	color: grey;
	z-index: 10;
}*/

.box.box5 {
	padding-top: 5%;
	font-size: 1.3vmin;
	font-family: sans-serif;
	z-index: 10;
}

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

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

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

.box.box15{
	padding: 1%;
}

.box.box19 {
	padding: 1%;

}

.box.box6 {
	padding-top: 22%;
}

.box.box2 {
	padding-top: 22%;
}

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

.box.box8 {
	grid-column-start: 1;
	grid-column-end: 4;
	padding-top: 1%;
	padding-left: 20%;
	padding-right: 20%;

}

.box.box10 {
	grid-column-start: 5;
	grid-column-end: 8;
	padding-top: 1%;
	padding-left: 20%;
	padding-right: 20%;

}

.box.box11 {
	grid-column-start: 1;
	grid-column-end: 4;
	padding-top: 3%;
	-moz-border-radius: 50% / 50%;
	-webkit-border-radius: 50% / 50%;
	border-radius: 50% / 50%;
	border-style: solid;
	border-color: black;
	border-width: 2px;
}

.box13{
	grid-column-start: 5;
	grid-column-end: 8;
	padding-top: 3%;
	-moz-border-radius: 50% / 50%;
	-webkit-border-radius: 50% / 50%;
	border-radius: 50% / 50%;
	border-style: solid;
	border-color: black;
	border-width: 2px;
}

.box.box14 {
	padding-top: 15%;
}

.box.box28 {
	grid-column-start: 1;
	grid-column-end: 4;
	padding-top: 3%;
	-moz-border-radius: 50% / 50%;
	-webkit-border-radius: 50% / 50%;
	border-radius: 50% / 50%;
	border-style: solid;
	border-color: black;
	border-width: 2px;
}

.box.box30 {
	grid-column-start: 5;
	grid-column-end: 8;
	padding-top: 3%;
	-moz-border-radius: 50% / 50%;
	-webkit-border-radius: 50% / 50%;
	border-radius: 50% / 50%;
	border-style: solid;
	border-color: black;
	border-width: 2px;

}

.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;
}

.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(255,255,139,1) 5%, rgba(255,255,0,1) 11%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(5%, rgba(255,255,139,1)), color-stop(11%, rgba(255,255,0,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,139,1) 5%, rgba(255,255,0,1) 11%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,139,1) 5%, rgba(255,255,0,1) 11%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,139,1) 5%, rgba(255,255,0,1) 11%); /* ie10+ */
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,139,1) 5%, rgba(255,255,0,1) 11%); /* 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:7%;
	width: 30%;
	margin-left: 5%;
	font-size: 2.5vmin;
}

.main {

	margin-top: 4%;
}

.info {
	font-family: monospace;
}

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

}





