/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*
	Font Use
	font-family: 'Josefin Sans', sans-serif;

*/
@font-face {
    font-family: 'josefin_slabregular';
    src: url('../fonts/josefinslab-regular-webfont.eot');
    src: url('../fonts/josefinslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinslab-regular-webfont.woff2') format('woff2'),
         url('../fonts/josefinslab-regular-webfont.woff') format('woff'),
         url('../fonts/josefinslab-regular-webfont.ttf') format('truetype'),
         url('../fonts/josefinslab-regular-webfont.svg#josefin_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype'),
         url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
}
/******* General ******/

body{
  color: #000;
  font-size: 14px;
  line-height: 21px;
  font-family: "futura-pt";
  font-weight: 300;
  letter-spacing: 0.05em;
}
img{
  max-width: 100%;
  height: auto;
}
h1{
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15em;
}
h2{
  font-family: 'josefin_slabregular';
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
h3{
  font-size: 18px;
  line-height: 38px;
  letter-spacing: 0.15em;
  font-weight: 300;
}
p{
  margin: 0 0 15px;
}

a{
  color: #000;
}
a:hover, a:focus{
  color: #000;
  text-decoration: underline;
}
.social_wrapper a:hover, .social_wrapper a:focus{
  color: #fff;
  text-decoration: none;
}
.social_wrapper{
  font-size: 20px;
}
/********** Header *************/
header.navbar{
  background: #f15f57;
    height: 140px;
}
.logo_wrapper{
  text-align: center;
  clear: both;
  margin-bottom: -57px;
}

.navbar .social_wrapper {
  margin: 20px 0px 90px;
}
.navbar .social_wrapper a{
  padding: 0px 12px;
}
/*************  Main Content   ********************/
.wrap{
  padding: 150px 0px;
}

.intro_text_wrapper .intro_text{
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  padding: 60px 0px 45px;
  line-height: 30px;
}

.border{
  width: 50px;
  height: 1px;
  border-top:1px solid #838181;
  margin: 0 auto;
}

/*************  Projects   ********************/

.project_list_wrapper{
  margin: 100px 0px;
}
.project_list_wrapper a{
  font-weight: 500;
}
.project_list_wrapper a i{
  font-size: 17px;
  padding-left: 10px;
}
.project_list_wrapper .project_content_box{
  margin-bottom: 30px;
}
.project_inner_wrap{
  text-align: center;
  position: relative;
}

.project_inner_wrap .border{
  border-top:1px solid #352F2F;
  -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.project_inner_wrap.even{
  background: #76a2b1;
}
.project_inner_wrap.even:hover .project_url{
  background: rgba(118, 162, 177, 0.5 );
}
.project_inner_wrap.odd{
  background: #f15f57;
}
.project_inner_wrap.odd:hover .project_url{
  background: rgba(241, 95, 87, 0.5 );
}
.project_inner_wrap .content{
  padding: 30px 15px 30px;
}

.project_inner_wrap h2{
  margin-top: 0px;
  margin-bottom: 20px;
}
.project_inner_wrap .address{
  margin: 30px 0px 20px;
  font-size: 18px;
}

.project_inner_wrap:hover .project_image img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.project_inner_wrap .project_url{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/*************  Newsletter   ********************/
.newsletter_wrapper_outer{
  text-align: center;
}

.newsletter_wrapper_outer h2 {
  margin-bottom: 30px;
}

.newsletter_wrapper_outer h2{
  margin-top: 30px;
}
#contact_form{
  margin:50px 0px 80px;
  text-align: left;
}

#contact_form input{
  width: 100%;
  margin-bottom: 20px;
  color: #000;
  border: 1px solid #000;
  padding: 7px 15px;
}
#contact_form input[type="submit"]{
  border:none;
  background: #f15f57;
  text-transform: uppercase;
    font-weight: 500;
}
#contact_form input[type="submit"]:hover{
  background: #76a2b1;
}

::-webkit-input-placeholder {
   color: #000;
}

:-moz-placeholder { /* Firefox 18- */
   color: #000;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #000;
}

:-ms-input-placeholder {
   color: #000;
}

.error_mes::-webkit-input-placeholder {
   color: red;
}

.error_mes:-moz-placeholder { /* Firefox 18- */
   color: red;
}

.error_mes::-moz-placeholder {  /* Firefox 19+ */
   color: red;
}

.error_mes:-ms-input-placeholder {
   color: red;
}
#contact_form .success{
  text-align: center;
  font-weight: 500;
  color: #76a2b1;
}
#contact_form .error{
  text-align: center;
  font-weight: 500;
  color: #f15f57;
}
/******************* Footer  *******************************/
.contentinfo{
  background: #f15f57;
  text-align: center;
  font-size: 12px;
  padding-bottom: 30px;
}
.contentinfo .footer_logo{
  margin-top: -28px;
}
.copyright_text .copy{
  margin-right: 10px;
}
.copyright_text{
  margin: 80px 0px 15px;
}

.contentinfo .social_wrapper a{
  padding: 0px 20px;
}
.contentinfo .website_by_link{
  margin-top: 15px;
}

.contentinfo .terms{
  cursor: pointer;
}

.contentinfo .terms:hover{
  text-decoration: underline;
}
/*****************  Media Query for Mobile *********************/
@media (max-width: 767px) {
  .intro_text_wrapper .intro_text{
    padding-left: 25px;
    padding-right: 25px;
    font-size: 15px;
  }
  .newsletter_wrapper_outer .subtitle{
    padding: 0px 20px;
  }
  body{
    font-size: 16px;
  }
  h1{
    font-size: 16px;
  }
  h3{
    font-size: 16px;
    line-height: 19px;
  }
  .contentinfo{
    font-size: 13px;
  }
  .project_link a{
    font-size: 14px;
  }
  .copyright_text .copy {
    display: block;
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .copyright_text {
    margin: 50px 0px 30px;
  }
  .project_image img{
    width: 100%;
  }
  #contact_form input{
    font-size: 16px;
  }
}

@media (max-width: 370px) {
  header.navbar{
    height: 133px;
  }
}