/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  margin: auto; }

#container {
  margin: auto; }

h1 {
  color: #981c20;
  font-family: "Arvo", serif;
  font-size: 55px;
  margin: auto;
  text-align: center;
  width: 100%;
  background: #f8f8f9;
  padding: 90px 0px;
  line-height: 50px; }
  @media screen and (max-width: 600px) {
    h1 {
      line-height: 70px; } }

footer {
  background-color: #a85554;
  color: #f8f8f9;
  margin: auto;
  height: 70px;
  font-family: "Arvo", serif;
  text-align: center;
  padding: 20px 0px 50px 0px;
  line-height: 30px; }
  footer #footer-links {
    max-width: 500px;
    margin: auto; }
    @media screen and (max-width: 500px) {
      footer #footer-links {
        max-width: 390px; } }
    @media screen and (max-width: 400px) {
      footer #footer-links {
        max-width: 350px; } }
    footer #footer-links ul {
      display: flex;
      font-family: "Montserrat", sans-serif;
      justify-content: flex-end; }
    footer #footer-links a {
      color: #f8f8f9;
      text-decoration: none; }
      footer #footer-links a:hover {
        color: #484043;
        transition: ease-in .2s; }

/******************************Project 1****************************/
nav2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: sticky;
  background-color: #484043;
  top: 0;
  left: 0;
  z-index: 9999; }
  @media screen and (max-width: 700px) {
    nav2 {
      flex-direction: column; } }
  nav2 ul {
    display: flex;
    justify-content: space-around;
    background-color: #484043;
    width: 100%;
    margin: auto;
    font-family: "Montserrat", sans-serif;
    padding: 30px 0px;
    position: sticky;
    background-color: #484043;
    top: 0;
    left: 0;
    z-index: 9999; }
    @media screen and (max-width: 700px) {
      nav2 ul {
        padding: 20px 0px; } }
    @media screen and (max-width: 650px) {
      nav2 ul {
        max-width: 650px;
        text-align: center; } }
    nav2 ul li {
      font-family: "Montserrat", sans-serif;
      font-size: 16px; }
      nav2 ul li a {
        text-decoration: none;
        color: #f8f8f9; }
        nav2 ul li a:hover {
          color: #a85554;
          transition: ease-in .1s; }
      nav2 ul li:active {
        color: #6e6568; }

/******************************OVERVIEW****************************/
#overview {
  background: #a85554; }
  #overview h2 {
    text-align: center;
    font-family: "Arvo", serif;
    font-size: 55px;
    padding-top: 30px;
    color: #f8f8f9;
    letter-spacing: 2px; }
  #overview p {
    margin: auto;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #f8f8f9;
    line-height: 30px;
    text-align: center;
    padding: 40px 0;
    max-width: 800px; }
    @media screen and (max-width: 800px) {
      #overview p {
        padding: 30px 20px; } }
    @media screen and (max-width: 810px) {
      #overview p {
        padding: 30px 20px; } }

/******************************SKETCH****************************/
#sketch {
  margin: auto;
  background: #f8f8f9;
  text-align: center;
  padding-bottom: 30px; }
  #sketch h2 {
    text-align: center;
    font-family: "Arvo", serif;
    font-size: 55px;
    padding: 30px 0 20px 0;
    color: #484043;
    letter-spacing: 2px; }
  #sketch p {
    margin: auto;
    color: #484043;
    padding: 0px 0 10px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 25px;
    max-width: 800px; }
    @media screen and (max-width: 850px) {
      #sketch p {
        padding: 10px 20px 20px 20px; } }
  @media screen and (max-width: 850px) and (max-width: 500px) {
    #sketch p {
      text-align: center; } }

  #sketch .sketch-image {
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding: 30px 0 40px 0; }
    @media screen and (max-width: 700px) {
      #sketch .sketch-image {
        flex-direction: column;
        margin: auto; } }
    #sketch .sketch-image img {
      margin: auto;
      width: 70%;
      height: 50%; }
      @media screen and (max-width: 900px) {
        #sketch .sketch-image img {
          width: 90%; } }

/******************************RESEARCH****************************/
#research {
  margin: auto;
  background-color: #ebd4a6;
  padding-bottom: 30px; }
  #research h2 {
    text-align: center;
    font-family: "Arvo", serif;
    font-size: 55px;
    padding: 30px 0 20px 0;
    color: #484043;
    letter-spacing: 2px; }
  #research p {
    margin: auto;
    text-align: center;
    color: #484043;
    padding: 0px 0 10px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 30px;
    max-width: 800px; }
    @media screen and (max-width: 850px) {
      #research p {
        padding: 10px 20px 20px 20px; } }
  @media screen and (max-width: 850px) and (max-width: 500px) {
    #research p {
      text-align: center; } }

/******************************VISUALS****************************/
#visuals h2 {
  text-align: center;
  font-family: "Arvo", serif;
  font-size: 55px;
  padding: 30px 0 20px 0;
  color: #6e6568;
  letter-spacing: 2px; }
#visuals p {
  margin: auto;
  text-align: center;
  color: #484043;
  padding: 0px 0 10px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 30px;
  max-width: 800px; }
  @media screen and (max-width: 850px) {
    #visuals p {
      padding: 10px 20px 20px 20px; } }
  @media screen and (max-width: 850px) and (max-width: 500px) {
    #visuals p {
      text-align: center; } }

#visuals img {
  margin: auto;
  display: flex;
  justify-content: space-around;
  width: 70%;
  height: 50%;
  padding-bottom: 50px; }
  @media screen and (max-width: 900px) {
    #visuals img {
      width: 90%; } }

/******************************FINAL EXPERIENCE****************************/
#experience {
  background-color: #6e6568;
  /* right to left */
  /* color & size if no SVG - IE8 and Android 2.3 */ }
  #experience h2 {
    text-align: center;
    font-family: "Arvo", serif;
    font-size: 55px;
    padding: 30px 0 40px 0;
    color: #ebd4a6;
    letter-spacing: 2px; }
  #experience h3 {
    font-size: 25px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    color: #f8f8f9; }
  #experience #photo-slider {
    clear: both;
    width: 78.125%;
    box-sizing: border-box;
    max-width: 800px;
    margin: auto;
    padding-top: 20px; }
    @media screen and (max-width: 700px) {
      #experience #photo-slider {
        width: 85.7142857143%; } }
    @media screen and (max-width: 600px) {
      #experience #photo-slider {
        width: 100%; } }
    #experience #photo-slider .main-carousel {
      width: 100%; }
      @media screen and (max-width: 600px) {
        #experience #photo-slider .main-carousel {
          padding-bottom: 10px; } }
      @media screen and (max-width: 450px) {
        #experience #photo-slider .main-carousel {
          padding-bottom: 20px; } }
      #experience #photo-slider .main-carousel .carousel-cell {
        width: 100%; }
        #experience #photo-slider .main-carousel .carousel-cell img {
          width: 100%; }
      @media screen and (max-width: 760px) {
        #experience #photo-slider .main-carousel {
          margin: auto; } }
  #experience .flickity-prev-next-button {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #a85554;
    background: rgba(168, 85, 84, 0.43);
    cursor: pointer;
    /* vertically center */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media screen and (max-width: 700px) {
      #experience .flickity-prev-next-button {
        background: #a85554;
        background: rgba(110, 101, 104, 0.44); } }
    @media screen and (max-width: 450px) {
      #experience .flickity-prev-next-button {
        display: none; } }
  #experience .flickity-prev-next-button:hover {
    background: #ebd4a6;
    transition: ease-in .175s; }
  @media screen and (max-width: 700px) {
    #experience {
      background: rgba(110, 101, 104, 0.44);
      transition: ease-in .175s; } }
  #experience .flickity-prev-next-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #09F; }
  #experience .flickity-prev-next-button:active {
    filter: alpha(opacity=60);
    /* IE8 */
    opacity: 0.6; }
  #experience .flickity-prev-next-button.previous {
    left: -65px; }
    @media screen and (max-width: 700px) {
      #experience .flickity-prev-next-button.previous {
        left: 10px; } }
  #experience .flickity-prev-next-button.next {
    right: -65px; }
    @media screen and (max-width: 700px) {
      #experience .flickity-prev-next-button.next {
        right: 10px; } }
  #experience .flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px; }
  #experience .flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px; }
  #experience .flickity-prev-next-button:disabled {
    filter: alpha(opacity=30);
    /* IE8 */
    opacity: 0.3;
    cursor: auto; }
  #experience .flickity-prev-next-button svg {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%; }
  #experience .flickity-prev-next-button .arrow {
    fill: #ffffff; }
  #experience .flickity-prev-next-button.no-svg {
    color: #ffffff;
    font-size: 26px; }
  #experience .video-container {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0 40px 0; }
    #experience .video-container h3 {
      font-size: 25px;
      text-align: center;
      font-family: "Montserrat", sans-serif;
      color: #f8f8f9;
      padding-bottom: 20px; }
    #experience .video-container #video {
      margin: auto;
      width: 100%; }
      #experience .video-container #video iframe {
        width: 100%; }
        @media screen and (max-width: 810px) {
          #experience .video-container #video iframe {
            height: 300px; } }
        @media screen and (max-width: 550px) {
          #experience .video-container #video iframe {
            height: 250px; } }
    #experience .video-container p {
      margin: auto;
      text-align: center;
      color: #f8f8f9;
      padding: 10px 0 10px 0;
      font-family: "Montserrat", sans-serif;
      font-size: 16px;
      line-height: 25px;
      max-width: 800px; }
      #experience .video-container p a {
        text-decoration: none;
        color: #f8f8f9; }
        #experience .video-container p a:hover {
          color: #ebd4a6;
          transition: ease-in .1s; }
      #experience .video-container p:visited {
        color: #6e6568; }

/******************************CONCLUSION****************************/
#conclusion {
  background-color: #484043;
  padding: 30px 0px; }
  #conclusion h2 {
    text-align: center;
    font-family: "Arvo", serif;
    font-size: 55px;
    padding: 30px 0 20px 0;
    color: #f8f8f9;
    letter-spacing: 2px; }
  #conclusion p {
    margin: auto;
    text-align: center;
    color: #f8f8f9;
    padding: 10px 0 10px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 25px;
    max-width: 800px; }
    @media screen and (max-width: 810px) {
      #conclusion p {
        padding: 30px 20px; } }

/*# sourceMappingURL=style.css.map */