@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: uppercase;
}

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

h3 {
  font-size: 1.2rem;
  line-height: 2.2rem;
  font-style: italic;
  color: #555;
}

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:#e0f6f6; 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: 0px;

height: 29px;

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

margin-left: -12px;

list-style: none;

padding-left: 31px;
}
#contactblock {
		text-align: center;
	}
	
	#contactblock p {
		margin-bottom:0px;
		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;
}

.width-90pr {width:90%;}
.margin-auto {margin:0 auto;}

/*----Overlay breakpoints -----*/
@media (min-width: 600px) {
  .overlay img {
    width: 22vw;
    height: 40vh;
  }
}

/*----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: 'robotoblack';
  font-weight: 400;
  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%;
  }
}

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

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

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