@font-face {
    font-family: 'Montserrat-Bold';
    src: url('fonts/Montserrat-Bold.ttf');
    font-style: normal;
    font-weight: normal;
    }

@font-face{
    font-family: 'Montserrat-Regular';
    src: url('fonts/Montserrat-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face{
    font-family: 'Roboto-Thin-Italic';
    src: url('fonts/Roboto-ThinItalic.ttf');
    font-style: italic;
    font-weight: thin;
}

@font-face{
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}

@font-face{
    font-family: 'Roboto-Medium-Italic';
    src: url('fonts/Roboto-MediumItalic.ttf');
    font-style: italic;
    font-weight: normal;
}

@font-face{
    font-family: 'Roboto-Thin';
    src: url('fonts/Roboto-Thin.ttf');
}


* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
}

body {
    font-family: sans-serif;
    background-color: #F0F0F0;
    }

  #page-wrap {
         width:1023px;
         margin: 0 auto;
         background-color:#ffffff;
         overflow:hidden;
    }

/* ---- grid ---- */

.grid {
  width: 1023px;
  height: 672px;
  overflow:hidden;
}

/* clearfix */
.grid:after {
}

/* ---- grid-item ---- */

.grid-item {
  width: 685px;
  height: 352px;
  float: left;
  float: left;
  overflow:hidden;

}

.grid-item video{
  width: 686px;
height: 352px;
margin-left: -30px;
overflow:hidden;

}
.grid-item--sketch {
  width: 395px;
  height: 200px;
  margin-left: -59px;

    overflow:hidden;
    /*width: 33.2%;
    height: 25.4%;*/
}
.grid-item--student {
  width: 395px;
height: 400px;
    margin-left: -59px;

    overflow:hidden;
    /*width:33.2%;
    height:48.96%;*/
}

.grid-item--student img{
  margin-top:-80px
}

.grid-item--title {
  height: 316px;
  width: 357px;
     margin-top: -248px;
 overflow:hidden;

    /*width: 33.4%px;
    height:33.7%;
    margin-top:-23.96%;*/

}


.grid-item--tall-image {
  height: 320px;
  width: 287px;
      margin-top: -248px;
      margin-left: -18px;
      overflow:hidden;
}

.grid-item--button h2{
    margin-bottom: 10px;
    margin-top: -5px;
    letter-spacing: .6px;
}

.grid-item--button {
  margin-top: -54px;
  height: 125px;
  width: 397px;
  margin-left: -1px;
  float:right;
    background-color: #7fb9dd;
    text-align:center;
    color:#FFFFFF;
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 8pt;
    float:right
    overflow:hidden;
}
.back-button{
  font-family: 'Montserrat-Bold', sans-serif;
  font-size: 10px;
  color: #7fb9dd;
  line-height: 24px;
  margin: 0px 0px 0px 42px;
  padding-top: 40px;
}

.view-timeline{
    padding: 49px 0px 0px 0px;
}

.timeline-title{
    font-family: 'Montserrat-Bold', sans-serif;
    font-weight: 900;
    font-size: 27pt;
    color: #7fb9dd;
    letter-spacing: 1px;
    margin: 58px 0px 27px 42px;
}

.horizontal-rule{
    width: 52px;
    height: 6px;
    background-color:#d1d3d4;
    margin: 10px 0px 0px 42px;
}

.timeline-subhead{
    font-family: 'Roboto-Thin', sans-serif;
    font-size: 12pt;
    letter-spacing: .5px;
    color: #a3a2a2;
    margin: 37px 0px 36px 42px;
    line-height: 24px;
}


.timeline-sketches{
  width: 1023px;
  height: 672px;
  background-image: url(images/timeline-images-01.png);
  background-size: 1023px 672px;
}

.timeline-ideation{
  width: 1023px;
  height: 672px;
  background-image: url(images/timeline-images-03.png);
  z-index: -10;
  background-size: 1023px 672px;
}

.timeline-shell{
  width: 1023px;
  height: 672px;
    background-image: url(images/timeline-images-04.png);
    background-size: 1023px 672px;
}

.timeline-refinement{
  width: 1023px;
  height: 672px;
    background-image: url(images/timeline-images-02.png);
    background-size: 1023px 672px;
}

.timeline-final{
  width: 1023px;
  height: 672px;
    background-image: url(images/timeline-images-05.png);
    background-size: 1023px 672px;
}

 .timeline-heading{
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 22pt;
    color:#7fb9dd;
    padding-top:136px;
    padding-bottom:40px;
}

.timeline-stage-info{
    font-family: 'Roboto-Regular', sans-serif;
    font-size: 12px;
    color:#555555;
    padding-bottom: 40px;
}

.timeline-stage-subhead{
    font-family: 'Roboto-Medium-Italic', sans-serif;
    font-size: 15px;
    color:#7fb9dd;
    margin-bottom: 15px;
}

.timeline-stage-details{
    font-family: 'Roboto-Regular',sans-serif;
    font-size:12px;
    color:#999999;
    margin-bottom:30px;
    line-height: 20px;
}

.timeline-content{
/*    margin-top:136px;*/
    margin-left:50px;
    width: 285px;
}