/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

   @import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
   @import url(https://fonts.googleapis.com/css?family=Lato:400,700);
   
   html,
   button,
   input,
   select,
   textarea {
       color: #222;
   }
   
   /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection rule sets have to be separate.
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
       background: #f2c2c9;
       color: #a4003a;
       text-shadow: none;
   }
   
   ::selection {
       background: #16a085;
       color: #a4003a;
       text-shadow: none;
   }
   
   /*
    * A better looking default horizontal rule
    */
   
    hr {
       display: block;
       height: 1px;
       border: 0;
       border-top: 1px solid #ccc;
       margin: 1em 0;
       padding: 0;
   }
   
   .centered {
       text-align: center
   }
   
   
   /* ==========================================================================
      General styles
      ========================================================================== */
   
   html,
   body {
       height: 100%;
   }
   
   body {
       font-family: "Lato" sans-serif;
       font-weight: 400;
       font-size: 16px;
       color: #000;
   
       -webkit-font-smoothing: antialiased;
       -webkit-overflow-scrolling: touch;
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-family: "Oswald", sans-serif;
       font-weight: 300;
   }
   
   /* ==========================================================================
      MENU CONFIGURATION
      ========================================================================== */
   
   .menu {
       position: fixed;
       right: -200px;
       width: 260px;
       height: 100%;
       top: 0;
       z-index: 10;
       text-align: left;
   }
   
   .menu.menu-open {
       right: 0px;
   }
   
   .menu-wrap {
       position: absolute;
       top: 0;
       left: 60px;
       background: #1a1a1a;
       width: 200px;
       height: 100%;
   }
   
   .menu h1.logo a {
       font-family: "Oswald", sans-serif;
       font-size: 16px;
       font-weight: 700;
       letter-spacing: 0.15em;
       line-height: 40px;
       text-transform: uppercase;
       color: #ffffff;
       margin-top: 20px;
   }
   
   .menu h1.logo a:hover {
       color: #f85c37;
   }
   
   .menu img.logo {
       margin: 20px 0;
       max-width: 160px;
   }
   
   .menu a {
       margin-left: 20px;
       color: #808080;
       display: block;
       font-size: 12px;
       font-weight: 700;
       line-height: 40px;
       letter-spacing: 0.1em;
       text-transform: uppercase;
   }
   
   .menu a:hover {
       color: #ffffff;
   }
   
   .menu a:active {
       color: #ffffff;
   }
   
   .menu a > i {
       float: left;
       display: inline-block;
       vertical-align: middle; 
       text-align: left;
       width: 25px;
       font-size: 14px;
       line-height: 40px;
       margin: 25px 2px;
   }
   
   .menu-close {
       cursor: pointer;
       display: block;
       position: absolute;
       font-size: 14px;
       color: #808080;
       width: 40px;
       height: 40px;
       line-height: 40px;
       top: 20px;
       right: 5px;
       -webkit-transition: all .1s ease-in-out;
          -moz-transition: all .1s ease-in-out;
           -ms-transition: all .1s ease-in-out;
            -o-transition: all .1s ease-in-out;
               transition: all .1s ease-in-out;
   }
   
   .menu-close:hover {
       color: #ffffff;
       -webkit-transition: all .1s ease-in-out;
          -moz-transition: all .1s ease-in-out;
           -ms-transition: all .1s ease-in-out;
            -o-transition: all .1s ease-in-out;
               transition: all .1s ease-in-out;
   }
   
   /* Push the body after clicking the menu button */
   .body-push {
       overflow-x: hidden;
       position: relative;
       left: 0;
   }
   
   .body-push-toright {
       left: 200px;
   }
   
   .body-push-toleft {
       left: -200px;
   }
   
   .menu,
   .body-push {
       -webkit-transition: all .3s ease;
          -moz-transition: all .3s ease;
           -ms-transition: all .3s ease;
            -o-transition: all .3s ease;
               transition: all .3s ease;
   }
   
   #menuToggle {
       position: absolute;
       top: 20px;
       left: 0;
       z-index: 11;
       display: block;
       text-align: center;
       font-size: 14px;
       color: #ffffff;
       width: 40px;
       height: 40px;
       line-height: 40px;
       cursor: pointer;
       background: rgba(0,0,0,0.25);
       -webkit-transition: all .1s ease-in-out;
          -moz-transition: all .1s ease-in-out;
           -ms-transition: all .1s ease-in-out;
            -o-transition: all .1s ease-in-out;
               transition: all .1s ease-in-out;
   }
   
   #menuToggle:hover {
       color: #ffffff;
       background: rgba(0,0,0,0.2);
       -webkit-transition: all .1s ease-in-out;
          -moz-transition: all .1s ease-in-out;
           -ms-transition: all .1s ease-in-out;
            -o-transition: all .1s ease-in-out;
               transition: all .1s ease-in-out;
   }
   
   
   /* ==========================================================================
      Wrap Sections
      ========================================================================== */
   
   #headerwrap {
       background: url('./images/JoshLogo-Full-Black.png') no-repeat center top;
       margin-top: 0px;
       padding-top:120px;
       text-align:center;
       background-attachment: relative;
       background-position: center center;
       min-height: 85%;
       width: 100%;
       
       -webkit-background-size: 100%;
       -moz-background-size: 100%;
       -o-background-size: 100%;
       background-size: 100%;
   
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
   }
   
   #headerwrap h1 {
       color:#ffffff;
       margin-top: 90px;
       padding-bottom: 30px;
       letter-spacing: 8px;
       font-size: 100px;
       font-weight: bold;
       text-shadow: 2px 2px 2px #000;
   }
   
   /* About Wrap & Conf */
   #aboutwrap {
       margin-top: 80px;
       margin-bottom: 80px;
   }
   
   .name {
       text-align: center;
   }
   .name p {
       font-size: 22px;
       font-weight: lighter;
       margin-top: 15px;
       letter-spacing: 2px;
   }
   
   .name-label {
       width: 60px;
       height: 60px;
       margin: 0 auto 45px;
       border-top: 1px solid #000;
       background: url(../img/name-label.png) center bottom no-repeat;
       background-size: 35px 35px;
   }
   
   .name-zig {
       width: 73px;
       height: 17px;
       margin: 38px 0 38px;
       background: url(../img/name-zig.png) 0 0 no-repeat;
       background-size: 73px 17px;
   }
   
   .name-desc h2 {
       font-family: 'Oswald', sans-serif;
       font-size: 40px;
       line-height: 1.45;
       font-weight: 300;
   }
   
   /* Separator About - Parallax Section */
   .sep {
       background-attachment: fixed;
       background-position: 50% 0;
       background-repeat: no-repeat;
       height: 450px;
       position: relative;
   }
   .about {
       background-image: url(../img/about-sep.jpg);
   }
   
   /* Portfolio Wrap Section */
   #portfoliowrap {
       display: block;
       margin-top: 80px;
       margin-bottom: 80px;
   }
   
   #portfoliowrap h1 {
       font-weight: 300;
       text-align: center;
       margin-bottom: 50px;
   }
   .mt {
       margin-top: 50px;
   }
   
   .mb {
       margin-bottom: 60px;
   }
   
   #portfoliowrap i {
       font-size: 50px;
   }
   
   .proc {
       padding-top: 15px;
       padding-bottom: 15px;
       border-bottom: solid 2px transparent;
   }
   
   #portfoliowrap .proc:hover {
       background-color: #eee;
       border-bottom: solid 2px #2f2f2f
   }
   
   .portfolio {
       background-image: url(../img/portfolio-sep.jpg);
   }
   
   /* Service Wrap */
   #servicewrap {
       display: block;
       margin-top: 80px;
       margin-bottom: 80px;
   }
   
   #servicewrap h1 {
       font-weight: 300;
       text-align: center;
       margin-bottom: 20px;
   }
   
   .service {
       text-align: left;
   }
   
   .service small {
       font-size: 12px;
       font-weight: bold
   }
   
   .service i {
       float: left;
       margin-right: 15px;
       font-size: 30px;
       vertical-align: middle;
   }
   
   .service .text {
       color: #767676
   }
   
   /* Testimonials Wrap */
   #testimonials {
       display: block;
       margin-top: 80px;
       margin-bottom: 80px;
       background-color: #f3f3f3;
   }
   
   /* Contact Wrap */
   #contactwrap {
       background-color: #2f2f2f;
       margin-top: 0px;
       padding-top: 25px;
       padding-bottom: 25px;
   }
   
   #contactwrap p {
       color: #f2f2f2;
   }
   
   #contactwrap small {
       font-size: 13px;
   }
   
   .contact {
       background-image: url('/images/JoshLogo-Full-Black.png');
   }
   
   #contactwrap label {
       color: #f2f2f2;
       margin-top: 10px;
   }
   
   
   /* Gallery Configuration */
   .photo-wrapper {
     display: block;
     position: relative;
     overflow: hidden;
     background-color: #2f2f2f;
     -webkit-transition: background-color 0.4s;
     -moz-transition: background-color 0.4s;
     -o-transition: background-color 0.4s;
     transition: background-color 0.4s;
   }
   .project .overlay {
     position: absolute;
     text-align: center;
     color: #fff;
     opacity: 0;
     filter: alpha(opacity=0);
     -webkit-transition: opacity 0.4s;
     -moz-transition: opacity 0.4s;
     -o-transition: opacity 0.4s;
     transition: opacity 0.4s;
     
   }
   
   .project:hover .photo-wrapper {
     background-color: #2f2f2f;
       background-image:url(../img/zoom.png);
       background-repeat:no-repeat;
       background-position:center;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       position: relative;
   }
   .project:hover .photo {
     opacity: 10;
     filter: alpha(opacity=4000);
     opacity: 0.1;
     filter: alpha(opacity=40);
   }
   .project:hover .overlay {
     opacity: 100;
     filter: alpha(opacity=10000);
     opacity: 1;
     filter: alpha(opacity=100);
   }
   
   .desc {
       margin-top: 25px;
   }