body { margin: 0; font-size: 14px; letter-spacing: 0.1em; font-family: 'Quicksand', sans-serif; }

nav li { display: inline-block; margin-right: 20px; }

header { clear: both; display: block; height: 90px; }
.logo { float: left; width: 160px; height: 100%; }
.logo img { margin-top: 25px; margin-left: 30px;}
nav { float: right; }
nav a { color: #333333; text-decoration: none; }

ul { list-style: none; margin-top: 35px; margin-right: 20px;}
.box {
  display: block;  
	text-align: center;
	font-family: 'Raleway', sans-serif;
	height: 100vh;
overflow: hidden;
	position: relative;

}
img { max-width: 100%; }

.grid-box { display: grid;  grid-template-columns: 30px 250px 1fr; grid-template-rows: 80vh 15vh; height: 100vh; grid-gap: 20px; overflow: hidden; }
.grid-box.first { height: calc(100vh - 90px); margin-bottom: 20px; }

.grid-box.portrait { grid-template-columns: 30px 1fr 2fr; margin: 20px; height: calc(100vh - 40px); }
.grid-box.portrait .bg-image.left { grid-column: 1/3;  }
.grid-box.portrait .bg-image.right { grid-column: 3/4;  }
.grid-box.portrait .bg-image img { object-fit: cover;  }

.grid-box.portrait.swapped { grid-template-columns: 30px 2fr 1fr; margin: 20px;  }
.grid-box.portrait.swapped .bg-image.left { grid-column: 3/4;  }
.grid-box.portrait.swapped .bg-image.right { grid-column: 1/3;  }

.bg-image { grid-column: 1 / -1; grid-row: 1 / 2; }
.bg-image img { object-fit: cover; height: 100vh; width: 100vw; }
.caption { grid-column: 2 / 3; grid-row: 2; color: #FFFFFF; opacity: 0.6;   }
.caption p { margin: 20px; }


.graph-line-2 { 
background: #CCCCCC;
	width: 100%;
	height: 100vh;
}
.fab, .fas { font-size: 1.1rem; color: #FFFFFF; }

.cap {
  opacity: 0.0;  
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.opacity {
  opacity: 1;
  -webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px)
}

.wrapper {
    height:1000px
}
.logo_container {
    background:red;
    width:250px;
    height:500px;
    position:relative;
    margin:0px auto;
}

@media (max-width: 775px) {
    nav { display: none; visibility:  hidden; }   
}