@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0 0 1rem 0;
  font-family: 'Roboto', sans-serif;
}
li {
  font-family: 'Roboto', sans-serif;

}
footer {
  font-family: 'Roboto', sans-serif;

}
a, a:visited {
  color: #2196f3;

  text-decoration: none;
}

nav {
  position: fixed;
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding: 1em 1em;

  top: 0;
  right: 0;
  left: 0;

  height: 3em;

  background-color: #263238;

  box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, .7);

  z-index: 999999;

  transition: .3s;
}
nav.transparent {
  background-color: transparent;
  box-shadow: 0 0 1em 0 transparent;
}

nav > a.logo,
nav > a:visited.logo {
  color: #2196f3;
}

nav > a.logo h1 {
  padding: 0;
}

nav ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a,
nav ul li a:visited {
  color: #fff
}

header {
  padding: 20em 3em 3em 3em;

  color: #2196f3;

  background-size: cover;
  background-position: 0 -300px;
  background-repeat: no-repeat;
  /* box-shadow: 0 0.1em 0.5em 0.2em rgba(0, 0, 0, .7); */

}
.navActive {
  color: #2196f3 !important;
}

.navLinks {
  margin-left: 10px;
}

a.offsetAnchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
.blanchor {
  text-align: center;

  /* background: #4f5b62; */
  /* border-radius: 2px; */
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;

  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
}

#activeIntroduction {
  background-color: #fff;
  margin: 0px;
}
#activePlanning {
  background-color: #eee;
  margin: 0px;
}
#activeCapturing {
  background-color: #ddd;
  margin: 0px;
}
#activeEditing {
  background-color: #ccc;
  margin: 0px;
}
#activeRendering {
  background-color: #bbb;
  margin: 0px;
}
#activeFinal {
  background-color: #aaa;
  margin: 0px;
}


header h1 {
  padding: 0;
}


.contentTitle {
  margin-top: 1em;
  text-align:center;
  color: #263238;
}



.mCardContainer {
  display: flex;
  margin-top: 3em;

  flex-wrap: wrap;
  justify-content: center;
}
.materialCard {
  text-align: center;

  background: #4f5b62;
  border-radius: 2px;
  display: inline-block;
  /* height: 300px; */
  margin: 1rem;
  position: relative;

  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
}

.materialCard > h1 {
  padding: 10px 0px 10px 0px;
  color: #fff;
}
.materialCard > h2 {
  padding: 10px 0px 10px 0px;
  color: #fff;
}
.materialCard > h3 {
  padding: 10px 0px 10px 0px;
  color: #fff;
}
.materialCard > p {
  padding: 10px 0px 10px 0px;
  color: #fff;
}

.mCard2 {
  box-shadow: 0 0 .8em rgba(0, 0, 0, .2), 0 0 .8em rgba(0, 0, 0, .2);
  transition: .3s ease;
}

.mCard2:hover {
  box-shadow: 0 0 1.5em rgba(0, 0, 0, .3), 0 .3em 1em rgba(0, 0, 0, .5);
}



.lbox {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.6s;
    animation-name: animatetop;
    animation-duration: 0.6s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-50px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-50px; opacity:0}
    to {top:0; opacity:1}
}

.lbox-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}







.thumbnail {
  max-width: 40%;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 5%;
}

.lightbox iframe {
	/** Pad the lightbox image */
  max-width: 90%;
	max-height: 80%;
	margin-top: 7%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}