@font-face {

    font-family: 'robotolight';

    src: url('../fonts/Roboto-Light-webfont.eot');

    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),       

         url('../fonts/Roboto-Light-webfont.woff') format('woff'),

         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),

         url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'robotoblack';

    src: url('../fonts/Roboto-Black-webfont.eot');

    src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/Roboto-Black-webfont.woff2') format('woff2'),

         url('../fonts/Roboto-Black-webfont.woff') format('woff'),

         url('../fonts/Roboto-Black-webfont.ttf') format('truetype'),

         url('../fonts/Roboto-Black-webfont.svg#robotoblack') format('svg');

    font-weight: normal;

    font-style: normal;



}



body {

  font-size: 20px;

  margin: 0;

  padding: 0;

  background-color: #ffffff;

  font-family: 'robotolight';

}



p {

  font-family: 'robotolight';

  font-weight: 400;

  line-height: 2rem;

  color: #555;

}



h1, h2 {

  font-family: 'robotoblack';

  font-weight: normal;

  color: #555;

  text-transform: Normal;

}



h4 {

  font-family: 'robotoblack';

  font-weight: 100;

  

}



h1 {

  font-size: 2rem;

  line-height: 3rem;

  letter-spacing: normal;

  padding:0px;

  margin:0px;

  

}



h2 {

  font-size: 2rem;

  line-height: 2rem;

  letter-spacing: normal;

  clear: both;

}



h4 {

  font-size: 1rem;

  line-height: 1rem;

  color: #999;

}



a {

  color: #383D46;

  text-decoration: none;

  box-shadow: inset 0 -0.6em #CDEEF2;

}



a:hover {

  box-shadow: inset 0 -0.6em #B4DDE3;

}



#contactbox {

	min-width:200px; padding:10px; background-color:#f4ffff; font-size:15px; max-width:300px; font-weight:normal !important;box-shadow: 2px -2px 5px  rgba(0,0,0,0.6);border-radius:6px;font-family: 'robotolight';

}

.call {

width:0px;

height: 32px;

background: url(iconforcontacts.png) -50px 1px;

margin-left: -15px;

list-style: none;

padding-left: 32px;

}

.mail {

width: 0px;

height: 33px;

background: url(iconforcontacts.png) -49px 30px;

margin-left: -12px;

list-style: none;

padding-left: 32px;

}

.cv {

width: 0px;

height: 30px;

background: url(iconforcontacts.png) -49px 119px;

margin-left: -14px;

list-style: none;

padding-left: 33px;

}

.in {

width: 12px;

height: 27px;

background: url(iconforcontacts.png) -50px 25px;

margin-left: -12px;

list-style: none;

padding-left: 33px;

}

#contactblock {

		text-align: center;

	}

	

	#contactblock p {

		margin-bottom: 5px;

		font-size: 16px;

	}

	.container {

	position: relative;

	width: 100%;

	max-width: 1000px;

	margin: 0 auto;

	padding: 0 20px;

	box-sizing: border-box;

}

/*----Navigation fam----*/



.nav {

  width: 100vw;

  height: 4rem;

  background-color: #222C38;

  position: fixed;

  z-index: 1;

}



.nav a {

  box-shadow: none;

}



.btn-open, .btn-close {

  float: right;

  letter-spacing: 0.2rem;

  text-transform: uppercase;

  margin-top: 1.3rem;

  margin-right: 2rem;

  font-size: 0.75rem;

   font-family: 'robotolight';

  font-weight: 800;

  color: white;

}



.nav img {

  margin-top: 1rem;

  margin-left: 1rem;

}



.overlay {

  width: 100vw;

  height: 100vh;

  padding: 1rem;

  top: 4rem;

  left: 0;

  background-color: white;

  position: fixed;

  z-index: 10;

  overflow: scroll;

  display: none;

}



.overlay img {

  width: 45vw;

  height: 22vh;

  object-fit: cover;

  margin-right: 2vw;

  margin-bottom: 2rem;

}



.overlay img:hover {

  box-shadow: 0rem 1rem #B4DDE3;

}



.overlay a {

  box-shadow: none;

}



/*----Overlay breakpoints -----*/

@media (min-width: 600px) {

  .overlay img {

    width: 22vw;

    height: 40vh;

  }
 .space {
 padding-top:35px;
}


}



/*----Homepage intro -----*/

.intro {

}



.intro img {

  object-fit: cover;

  height: 60vh;

  width: 100vw;

  margin-top: 4rem;

}



.bio {

  padding: 4vw;

}



.bio-detail {

  padding: 5% 5% 0% 0%;

  float: left;

}



.pursuits {

  width: 55%;

}



.specialties {

  width: 35%;

}



.bio ul li {

 font-family: 'robotolight';

  font-weight: 100;

  color: #383D46;

}



/*---- Homepage intro breakpoints ----*/

@media (min-width: 600px) {

  .intro {

    display: grid;

    grid-template-columns: 45vw 40vw;

    grid-template-rows: 100vh;

    align-items: center;

  }

  .intro img {

    width: 100%;

    height: 100%;

    margin-top: 0rem;

  }

  .bio {

    width: 100%;

  }
  .space {
 padding-top:35px;
}

}



/*----Homepage project sections ----*/\

.portfolio {

  clear: both;

}



.project {

  display: grid;

  grid-template-columns: 100vw;

  grid-template-rows: repeat(1, 1fr);

  margin-bottom: 10vh;

}



.project img, .project-description {

  width: 100%;

}



.project-description {

  padding: 0 6vw;

  width:auto;

}



.project-text-link {

  font-family: 'robotolight';

  font-weight: 400;

  font-style: italic;

}



/*----Homepage project breakpoints----*/

@media (min-width: 600px) {

  .project {

    display: grid;

    grid-template-columns: 65vw 30vw;

    grid-template-rows: 100vh;

    grid-column-gap: 5vw;

    align-items: center;

  }

  .project-description {

    padding: 0;

    max-width: 24rem;

  }
  .space {
 padding-top:35px;
}

}



/*-- Project Pages --*/

.headline-image img {

  width: 100vw;

  height: 70vh;

  object-fit: cover;

  margin-bottom: 1rem;

}



.case-study {

  padding: 0 4vw;

  max-width: 70rem;

  margin: 0 auto;

}



.case-study h1 {

  text-align: center;

}



.case-study p {

  max-width: 44rem;

  padding-top: 1rem;

  margin: 0 auto;

}



.case-study ul {

  max-width: 40rem;

  padding-top: 1rem;

  margin: 0 auto;

}



.case-study h2 {

  padding-top: 1rem;

  max-width: 48rem;

  margin: 2rem auto 1rem auto;

}



.case-study li {

   font-family: 'robotolight';

  font-weight: 400;

  line-height: 2rem;

  color: #383D46;

  padding-bottom: 1rem;

}



.case-study img {

  width: 100%;

  margin: 0 auto;

  padding-top: 2rem;

}



.case-study video {

  width: 100%;

  margin: 0 auto;

  padding-top: 2rem;

}



@media (min-width: 600px) {

  .headline-image img {

    height: 80vh;

  }
  .space {
 padding-top:35px;
}

}



/*---- Animation Effects ----*/





@keyframes bump-up {

  from { opacity: 0.3;}

  to { opacity: 1;}

}



.bump-up-element {

  animation: bump-up 0.75s;

}



.hidden {

  opacity: 0.3;

}



.initial-hidden {

  opacity: 0.3;

}



@media (max-width: 700px) {

  .intro img {

	  display:none !important;

  }

 .bigmobilefont {

  font-family: 'robotoblack';

  font-weight: 100;

  font-size: 2.3rem;

  line-height: 2.8rem;

  font-style: normal;

  color: #001429;

  padding:10px 10px 0px 4px;

  text-transform:none;

}

.hidefont {

	display:none;

	visibility:hidden;

}
.space {
 padding-top:35px;
}

}