@charset "utf-8";

/*

#c53211 red
#1e201e grey
#faf7f1 khaki #faf7f1
#f07a1d new O

*/

* {
  padding: 0 !important;
  margin: auto !important;
}

body {
  margin: 0;
  background-color: #fafafa !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #0b0b09;
  font-size: 16px !important;
  line-height:1.6;
}

::selection {
  background: #ff7716 !important;
  color: #FFF;
}

h3 {
  font-size: 2em !important;
}

h2 {
  display: inline-block;
  color: #b2b1af !important;
  font-family: 'DM Serif Text';
  font-size: 5.1em;
  position: relative;
  left: 0px !important;
}

.intro {
  color: #b2b1af !important;
  font-family: 'DM Serif Text';
  font-size: 5.1em;
  position: relative;
  left: 0px !important;
  display: none;
}

.gal_list_container h2 {
  margin-bottom: 1em !important;
}

a.phil {
  position: absolute;
  z-index: 10;
  top: 22px;
  left: 0px;
  color: #faf7f1;
  font-size: 1.5em;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
  padding: 9px 0px !important;
}

a.phil:hover {
  text-decoration: none;
  color: 
}

.top_bar {
  position: fixed;
  top: -78px;
  left: 0;
  width: 100%;
  background-color: #0b0b09;
  height: 74px;
  z-index: 1;
  opacity: 0;
}

.container-fluid /*.contact_inner*/ {
  margin: 0 auto;
  width: 60em;
  position: relative;
  text-align: center;
  height: auto !important;
}

.contact_inner {
  max-width: 60em;
}

.skills_container {
  background-image: url("../images/chair_bkg_LG.jpg");
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: 600px;
  margin: 0px !important;
  padding: 0px !important;
  position: relative;
}

.box {
  height:12.5em;
  margin:2.5em auto;
}

.effect2 {
  position: relative;
}

.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 1em;
  left: -1.4em;
  width:100%;
  top: 80%;
  max-width:31.25em;
  background: #444;
  -webkit-box-shadow: 0 1em 2em #444;
  -moz-box-shadow: 0 1em 2em #444;
  box-shadow: 0 1em 2em #444;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: -20px;
  left: auto;
}

.skills_inner {
  height: 399px;
  width: 60em;
  position: relative !important;
  top: 11em;
}

.skills1 {
  font-size: 2.7em !important;
  font-weight: 300 !important;
  margin-bottom: .5em !important;
  margin-top: .4em !important;
  color: #f07a1d !important;
  position: absolute;
  left: 0 !important;
  line-height: 1.5em !important;
  display: none;
}

.skills2 {
  font-size: 2.7em !important;
  font-weight: 300 !important;
  color: #f07a1d !important;
  position: relative;
  left: 0 !important;
  text-align: left;
}

.date_sep {
  color: #8a8a8a;
  font-weight: 900;
}

.date {
  color: #ee5525 !important;
  font-weight: bold;
}

#contact {
  position: relative;
}

.contact-bottom {
  background-color: #EC6100;
  padding: .4em .5em !important;
  position: relative;
  margin-top: 3em !important;
  border-radius: .4em;
  font-size: 1.5em;
  font-weight: 900;
  color: #ffffff;
  display: inline-block !important;
  width: 10em;
  text-align: center;
}

.contact-bottom:hover {
  color: #faf7f1 !important;
  background-color: #ec6100 !important;
  text-decoration: none !important;
}

.contact_container {
  background-image: url("../images/phone_bkg_LG.jpg");
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: #d7c6af;
  padding-top: 8.4375em !important;
  padding-bottom: 11.5625em !important;
}

.contact_inner h2 {
  position: relative;
  color: #b2b1af !important;
  font-weight: 100 !important;
  font-size: 5.1em;
  font-style: inherit;
  text-align: left !important;
  margin-bottom: .6em !important;
}

.contact_inner button {
  position: relative;
  top: 15px !important;
  font-size: 1.5em !important;
  font-weight: 500;
  background-color: #d6d4ca;
}

.contact_inner button:hover {
  color: #faf7f1;
  background-color: #FF5722;
}

.contact_inner textarea {
  height: 200px;
  outline: none;
}

.contact_inner input, .contact_inner textarea, 
.contact_inner button {
  display: block;
  padding: 12px !important;
  width: 100%;
  margin: 20px 0px !important;
  border-radius: 3px;
  font-size: 1.2em;
  outline: none;
  border: none;
}

.color_change {
  color: #FF5722;
}

a.nav_link, a.nav_link:visited {
  text-decoration: none !important;
  color: #fdfdfd !important;
}

.nav {
  position: relative;
  z-index: 2;
  top: -45px;
  right: 0;
  text-align: right;
  padding: .5em !important;
  height: 45px;
  line-height: 1.24em;
  width: 60em;
}

.nav_link {
  position: relative;
  top: 20px;
  padding: 24px 28px 24px 28px !important;
  color: #7b7b7b;
  font-size: 1.3em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: text-bottom !important;
}

.nav_link:hover {
  text-decoration: none;
  background-color: #151515;
  color: #FF5722 !important;
}

.responsive_nav {
  position: fixed;
  top: 4.625em;
  left: 0;
  z-index:10 !important;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.93);
  display: none;
}

.responsive_nav a {
  display: block;
  text-align: center;
  top: 10%;
  font-size: 2em !important;
  line-height: .7em;
  margin: .7em 0 !important;
  background-color: transparent !important;
}

/*   --------   HAMBURGER ICON    ------    */

#nav-icon4 {
  width: 41px;
  height: 38px;
  position: absolute;
  z-index: 10 !important;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #faf7f1;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon4 {
  position: absolute;
  top: 24px;
  right: 0px;
  display: none;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 24px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 26px;
  left: 8px;
}

/*   -----   END HAMBURGER NAV   ------    */

.bod {
  font-size: 1.4em;
  line-height: 1.8em;
  padding: 10px 0;
  position: relative !important;
  top: 0px;
}

#resume, #work {
  padding-top: 7.25em !important;
  padding left: 1em !important;
  text-align: left;
}

.footer {
  position: relative;
  background-color: #0b0b09;
  color: #faf7f1;
  padding: 40px !important;
  line-height: 1.6em;
  text-align: center;
}

.bod ul li {
  padding: 10px;
  font-weight: 600;
  font-size: 1em !important;
  background-color: #ffd587;
  border: 1px solid ;
  width: 200px;
  text-decoration: none;
  margin: 10px 0;
  list-style: none;
}

/*   GALERY   */

.gal_list_container {
  text-align: center;
  margin-bottom: 7em !important;
  text-align: left;
}

li.gal_list {
  list-style: none !important;
  display: inline !important;
}

.gal_list a {
  display: inline;
  font-size: 3.1em;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0 !important;
  color: #0b0b09 !important;
  width: inherit !important;
}

.comma {
  display: inline-flex;
    font-size: 3.4em;
    font-weight: 300;
    line-height: 1.5em;
    margin: 0 !important;
    color: #1e201e !important;
    width: inherit !important;
}

.circ_img {
  height: 75px;
  border-radius: 50%;
  border: 6px solid #1e201e;
  margin-right: 0px !important;
  position: relative;
  top: -.05em;
  display: none;
}

.gal_list a:visited, .gal_list a:focus, .gal_list a:link {
  text-decoration: none;
}

.gal_list a:hover {
  text-decoration: line-through #FF5722;
  cursor: pointer;
}

.gal_list:hover > .circ_img {
  border: 6px solid #1e201e;
}

#gallery_container {
  display: block;
}

.title {
  display: none;
}

.image {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}

.gal_img {

}

.caption {
  position: absolute;
  bottom: 25px;
  left: 27px;
  color: #faf7f1 !important;
  font-size: 2em;
  z-index: 10;
}

.col-md-4 {
  margin: 0 !important;
  padding: 0 !important;
}

.thumbnail {
   margin: 2px;
}

.res {
  font-size: 1em;
  padding: 0 25px 0 0 !important;
}

.res ul li {
  margin-left: 1.1em !important;
  margin-bottom: .4em !important;
}

h3.res_title {
  margin: 1.4em 0em .4em 0em !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.row h4 {
  margin-bottom: 10px !important;
  color: #FF5722;
  line-height: 1.5em;
}

.res.col-sm-6 {
  padding-right: 1em !important;
}

@media only screen and (min-width: 1045px) {
  .res.col-sm-6 {
    margin-bottom: 1em !important;
  }
}

@media only screen and (max-width: 1045px) {
  .skills1 {
    font-size: 2.7em !important;
    line-height: 1.5em !important;
  }
  .addedpad {
      margin-bottom: 15px !important;
  }
  .container-fluid {
    width: 100 !important;
  }
}

@media only screen and (max-width: 1020px) {
    .container-fluid, .contact_inner {
      width: 93% !important;
    }

    .contact_inner h2 {
      font-size: 3.2em !important;
    }

    .nav_link  {
        display: none;
    }

    .responsive_nav a {
      display: block;
      text-align: center;
      top: 13%;
      font-size: 2.2em !important;
      margin: .7em 0 !important;
      background-color: transparent !important;
      font-weight: 600 !important;
    }

    #nav-icon4 {
      display: block;
      position: absolute;
      z-index: 12000 !important;
    }

    .mobile_nav {
      position: absolute;
    }

    .container-fluid, .nav {
      width: 93%;
    }

    .skills_inner {
      width: 93% !important;
      /*top: 10em;*/
    }

    .skills1 {
      font-size: 2.7em !important;
      line-height: 1.5em !important;
      margin-bottom: .5em !important;
    }

    .gal_list a {
      font-size: 2.5em;
    }

    .xs-bottom {
      margin-bottom: 1.4em !important;
    }

    .gal_list a:link {
      text-decoration: line-through #FF5722
    }

    .res {
      padding: 0 !important;
    }

    .gal_list a:visited, .gal_list a:focus, .gal_list a:link {
      text-decoration: none;
    }

    .gal_list a:hover {
      text-decoration: line-through #FF5722;
      cursor: pointer;
    }
}

@media only screen and (max-width: 849px) {
  .intro, h2 {
    font-size: 4.5em;
  }
  .skills1 {
      font-size: 2.4em !important;
      line-height: 1.42em !important;
      padding-right: 5em !important;
  }
  .skills_container {
    background-image: url("../images/chair_bkg_MD.jpg");
    background-position: bottom right;
  }
}

@media only screen and (max-width: 720px) {
  .skills_inner {
    top: 7em !important;
  }
  .skills1 {
    margin-bottom: .5em !important;
    padding-right: 0em !important;
  }
  .contact_container {
    background-image: url("../images/phone_bkg_MD.jpg");
  }
}


/*  ----   PHONEz   ----   */

@media only screen and (max-width: 600px) {
    .intro, h2 {
      font-size: 2.7em !important;
      line-height: 1.1em !important;
    }

    .skills_container {
      background-image: url("../images/chair_bkg_SM.jpg");
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: cover;
      margin: 0px !important;
      padding: 0px !important;
      position: relative;
    }

    .box {
      height:200px;
      margin:40px auto;
    }

      .effect2 {
          position: relative;
        }

      .effect2:before, .effect2:after {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 15px;
        left: -10px;
        width: 50%;
        top: 80%;
        max-width:300px;
        background: #777;
        -webkit-box-shadow: 0 15px 20px #777;
        -moz-box-shadow: 0 15px 20px #777;
        box-shadow: 0 15px 20px #777;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        transform: rotate(-3deg);
      }
      
      .effect2:after {
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
        right: -10px;
        left: auto;
      }

    .skills_inner {
      top: 6.7em !important;
    }

    .container-fluid, .contact_inner {
      margin: 0 auto;
      width: 93%;
    }
    
    .skills1 {
      font-size: 1.75em !important;
      margin-bottom: 0.4em !important;
      line-height: 1.3em !important;
      text-align: left !important;
    }

    .skills2 {
      font-size: 1.75em !important;
      margin-bottom: 0.4em !important;
      line-height: 1.3em !important;
    }

    .contact_inner h2 {
      font-size: 2.2em !important;
      line-height: 1.4em;
    }

    .contact_container {
      background-image: url("../images/phone_bkg_SM.jpg");
      padding-top: 6.375em !important;
      padding-bottom: 6.5625em !important;
      background-size: cover;
    }

    .gal_list a {
      font-size: 1.9em !important;
      line-height: 1.5em !important;
    }

    .contact-bottom {
      margin-top: 1.1em !important;
      position: relative;
      margin-top: 0.9em !important;
      margin-bottom: 3.5em !important;
      font-weight: 900;
      color: #ffffff;
      display: inline-block !important;
      width: 6.5em;
      padding: .2em !important;
    }

    .footer {
      padding: 25px !important;
      font-size: .7em !important;
    }
}