/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 8, scss/stylesheet.scss */
html {
  margin: 0;
  padding: 0 0 100px 0;
}

/* line 9, scss/stylesheet.scss */
body {
  font-family: 'Open Sans';
  font-size: 14px;
  margin: 0;
  width: 100%;
  background-color: WhiteSmoke;
}

/* S C R E E N */
@media (min-width: 100px) {
  /* line 15, scss/stylesheet.scss */
  #hold {
    width: 100%;
    padding: 50px 0;
  }
}
@media (min-width: 100px) {
  /* line 16, scss/stylesheet.scss */
  .thumbnail {
    width: 44%;
    position: relative;
    float: left;
    margin: 0 0 30px 4%;
  }
}
@media (min-width: 1000px) {
  /* line 18, scss/stylesheet.scss */
  #hold {
    width: 100%;
    min-width: 500px;
    padding: 50px 0;
  }
}
@media (min-width: 1000px) {
  /* line 19, scss/stylesheet.scss */
  .thumbnail {
    width: 28%;
    position: relative;
    float: left;
    margin: 0 0 30px 4%;
  }
}
@media (min-width: 1400px) {
  /* line 21, scss/stylesheet.scss */
  #hold {
    width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1400px) {
  /* line 22, scss/stylesheet.scss */
  .thumbnail {
    width: 28%;
    position: relative;
    float: left;
    margin: 0 0 30px 4%;
  }
}
/* V I D E O */
/* line 28, scss/stylesheet.scss */
.container {
  position: relative;
  width: 100%;
  margin: 0;
}

/* line 29, scss/stylesheet.scss */
.responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: none;
  height: 0;
  overflow: hidden;
}

/* line 30, scss/stylesheet.scss */
.responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 32, scss/stylesheet.scss */
.container2 {
  position: relative;
  width: 100%;
  margin: 0;
}

/* line 33, scss/stylesheet.scss */
.responsive-container2 {
  position: relative;
  padding-bottom: 70.28%;
  padding-top: none;
  height: 0;
  overflow: hidden;
}

/* line 34, scss/stylesheet.scss */
.responsive-container2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 37, scss/stylesheet.scss */
.container3 {
  position: relative;
  width: 100%;
  margin: 0;
}

/* line 38, scss/stylesheet.scss */
.responsive-container3 {
  position: relative;
  padding-bottom: 99.99%;
  padding-top: none;
  height: 0;
  overflow: hidden;
}

/* line 39, scss/stylesheet.scss */
.responsive-container3 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 42, scss/stylesheet.scss */
.container4 {
  position: relative;
  width: 100%;
  margin: 0;
}

/* line 43, scss/stylesheet.scss */
.responsive-container4 {
  position: relative;
  padding-bottom: 42.25%;
  padding-top: none;
  height: 0;
  overflow: hidden;
}

/* line 44, scss/stylesheet.scss */
.responsive-container4 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* T E X T */
/* line 51, scss/stylesheet.scss */
a {
  text-decoration: none;
  color: Black;
}

/* line 52, scss/stylesheet.scss */
a:hover {
  text-decoration: none;
  color: Grey;
}

/* line 54, scss/stylesheet.scss */
a.project_text_link {
  text-decoration: none;
  color: #404040;
  text-decoration: underline;
}

/* line 55, scss/stylesheet.scss */
a.project_text_link:hover {
  text-decoration: none;
  color: #404040;
  text-decoration: none;
}

/* line 57, scss/stylesheet.scss */
.project_text_title {
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
  color: #404040;
}

/* line 58, scss/stylesheet.scss */
.project_text_body {
  line-height: 20px;
  font-weight: 400;
  color: #404040;
}

/* line 59, scss/stylesheet.scss */
.about_text_body {
  line-height: 20px;
  font-weight: 400;
  color: #404040;
}

/* line 62, scss/stylesheet.scss */
figcaption {
  line-height: 20px;
  font-weight: 400;
  font-style: italic;
  color: #404040;
}

/* line 64, scss/stylesheet.scss */
figcaption:after {
  clear: both;
  content: '';
  display: block;
}

/* line 71, scss/stylesheet.scss */
#header span {
  line-height: 20px;
  font-weight: 400;
  color: #404040;
}

/* H E A D E R */
/* line 77, scss/stylesheet.scss */
#header {
  width: 92%;
  margin: 0 4% 60px 4%;
  float: left;
  position: relative;
}

/* line 78, scss/stylesheet.scss */
#header img {
  margin-top: 27px;
  width: auto;
  height: 30px;
  float: left;
  position: relative;
}

/* line 80, scss/stylesheet.scss */
#header .menu {
/*   width: 100px; */
  position: relative;
  float: right;
  margin-top: 35px;
  text-align: right;
}

/* line 81, scss/stylesheet.scss */
#header .menu {
  padding: 0;
  margin: 35px 0 0 0;
}

/* line 82, scss/stylesheet.scss */
#header .menu li {
  font-size: 14px;
  margin-left: 20px;
  display: inline-block;
}

/* line 83, scss/stylesheet.scss */
#header .menu li.current-menu-item a,
#header .menu li.current_page_item a {
  color: gray;
}

/* line 85, scss/stylesheet.scss */
#header .menu li:first-child {
  margin-left: 0;
}

/* T H U M B N A I L S */
/* line 90, scss/stylesheet.scss */
.thumbnail img {
  width: 100%;
  height: auto;
}

/* line 91, scss/stylesheet.scss */
.thumbnail p {
  height: 40px;
  margin: 0 0 10px 0;
  padding: 5px 0;
}

/* line 92, scss/stylesheet.scss */
.thumbnail figcaption {
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  color: #404040;
}

/* P R O J E C T S */
/* line 98, scss/stylesheet.scss */
#project {
  position: relative;
  float: left;
  width: 92%;
  margin: 0 4% 150px 4%;
  padding: 0 0 150px 0;
  border-bottom: 1px solid Gainsboro;
}

/* line 100, scss/stylesheet.scss */
.project_text {
  width: 35%;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

/* line 101, scss/stylesheet.scss */
.project_text_title {
  margin: 0;
}

/* line 103, scss/stylesheet.scss */
.project_media {
  width: 60%;
  position: relative;
  float: right;
  margin: 0;
  padding: 0;
}

/* line 104, scss/stylesheet.scss */
.project_media img {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0;
  display: block;
  outline: 0;
}

/* line 105, scss/stylesheet.scss */
.project_media figure {
  width: 100% !important;
  height: auto;
}

/* line 107, scss/stylesheet.scss */
figure {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

/* line 108, scss/stylesheet.scss */
figcaption {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px 0 0 0;
  height: 60px;
}

/* S E C T I O N */
/* line 113, scss/stylesheet.scss */
.section {
  width: 100%;
  float: left;
  position: relative;
  margin: 0 0 40px 0;
}

/* line 115, scss/stylesheet.scss */
.about_text_body {
  width: 100%;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

/* F O O T E R */
/* line 121, scss/stylesheet.scss */
#footer {
  width: 92%;
  margin: 50px 4% 0 4%;
  float: left;
  position: relative;
  bottom: 0;
}

/* line 123, scss/stylesheet.scss */
#footer span {
  width: 100%;
  position: relative;
  float: left;
  text-align: center;
  line-height: 20px;
  font-weight: 400;
  color: #404040;
}

@media (max-width: 480px) {
  /* line 128, scss/stylesheet.scss */
  #header .menu li {
    margin-left: 10px;
  }

  /* line 131, scss/stylesheet.scss */
  #header .menu li:first-child {
    margin-left: 0px;
  }
}