/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html,
   button,
   input,
   select,
   textarea {
       color: #222;
   }
   
   html {
       font-size: 1em;
       line-height: 1.4;
   }
   
   /*
    * 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: #b3d4fc;
       text-shadow: none;
   }
   
   ::selection {
       background: #b3d4fc;
       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;
   }
   
   /*
    * Remove the gap between images, videos, audio and canvas and the bottom of
    * their containers: h5bp.com/i/440
    */
   
   audio,
   canvas,
   img,
   video {
       vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
       border: 0;
       margin: 0;
       padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
       resize: vertical;
   }
   
   /* ==========================================================================
      Browse Happy prompt
      ========================================================================== */
   
   .browsehappy {
       margin: 0.2em 0;
       background: #ccc;
       color: #000;
       padding: 0.2em 0;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   
   /* Global */
   
   body {background: #f2f2f2 url(../img/bg.png) 0 0 repeat; -webkit-user-select: none; font-family: "proxima-nova";}
   .wrapper {width: 1000px; height: auto; position: relative; margin: 0 auto; padding:0px 50px;}
   .inline {position: relative; display: block; float: left;}
   .italic {font-style: italic; margin: 0px 0px 0px 5px;}
   .blue {color:#031d43; }
   .bold { font-weight: 800; }
   .top {height: 7px; width: 100%; background-color: #334867; position: absolute; top: 0px;}
   .horizontalLine { border-bottom: 1px solid #b1b1b1; width:100%; height: 1px; position: relative; margin: 40px 0px 0px 0px; }
   a { text-decoration: none; color:#0984c3; }
   
   .nav {position: relative;}
   .nav .logo {background:url(../img/nav-logo.png) 0 0 no-repeat; width: 213px; height: 63px;}
   .nav .links {margin-left: 40px; font-size:15px;}
   .nav .links a {color: #b1b1b1; display:block; font-weight:300; margin-bottom:1px; }
   .nav .links a:hover,
   .nav .links a.active { color:#334867; }
   
   .subnav { }
   .subnav .links { width:auto; height:66px; margin-right:30px; margin-left:0px; }
   .subnav .links.one { margin-left:40px; }
   .subnav .links .link { position:relative; display:block; }
   .subnav .links .link:hover,
   .subnav .links .link.active { color:#0984c3; }
   
   .content {position: relative; margin-top: 60px; padding-bottom: 80px;}
   .content .hero {background:rgab(0,0,0,0.1); width: 1000px; height: 600px; position: relative; margin-top: 35px; overflow: hidden;}
   .content .project { width:100% !important; height:100% !important; }
   .content .project img { }
   .content .description {position: absolute; bottom: 24px; right: 32px; color: #ffffff; font-size:14px; z-index: 9;}
   .content .copyright {position: relative; margin: 30px 0px 0px 0px; color: #878686; font-size: 10px; text-transform: uppercase;}
   
   
   /* Home */
   
   .home .horizontalLine { display:none; }
   .home .content .description { text-transform: uppercase; font-weight:600; }
   .home .content .description .italic { font-weight: 300; text-transform: none; }
   
   
   /* About */
   
   .about .content .hero {background:url(../img/about-hero.png) 50% 0 no-repeat; width: 1000px; height: 300px; position: relative;}
   .about .content .text {position: relative; margin: 40px 0px 0px 0px;}
   .about .content .text .title {font-size: 36px; color: #0984c3; line-height:45px;}
   .about .content .text .main {color:#979292; font-size: 18px; margin: 20px 0px 0px 0px; font-weight: 300;}
   .about .horizontalLine { display:block; }
   .about .copyright {margin: 30px 0px 0px 0px;}
   
   
   /* Projects */
   
   .projects .content .nav .verticalLine {border-left: 2px solid #b1b1b1; height: 56px; display: block; float: left; margin: 4px -10px 0px 50px;}
   .projects .info {position: relative; margin: 30px 0px 0px 0px; width: 600px;}
   .projects .info .title {font-size: 14px; color: #878686;}
   .projects .info .description {font-size: 15px; color: #878686; font-weight: 300; position: relative; bottom: auto; right: auto; margin: 16px 0px 40px;}
   .projects #prev {background:url(../img/prev-arrow.png) 0 0 no-repeat; width: 43px; height: 76px; position: absolute; left: 50px; font-size: 24px; z-index: 999; top: 370px; cursor: pointer; opacity:0.4; }
   .projects #next {background:url(../img/next-arrow.png) 0 0 no-repeat; width: 43px; height: 76px;position: absolute; right: 50px; font-size: 24px; z-index: 999; top: 370px; cursor: pointer; opacity:0.4; }
   .projects #prev:hover,
   .projects #next:hover { opacity:1;  }
   .projects #pager {width:auto; position: relative; float: right; top: 30px;}
   .projects #pager a {background:url(../img/pager-bg.png) no-repeat; height: 15px; width: 15px; display: block; position: relative; float: left; margin-left:2px;}
   .projects #pager a.activeSlide{background:url(../img/pager-active.png) 0 0 no-repeat;}
   .projects .copyright {margin: 30px 0px 0px 0px;}
   .projects .horizontalLine {margin:0px;}
   
   
   /* Contact */
   
   .contact .nav { border-bottom: 1px solid #b1b1b1; padding-bottom: 35px; }
   .contact .main {margin-top: 28px; position: relative; font-weight:300;}
   .contact .left {width: 444px; height: auto; min-height: 600px; position: relative; float:left; display:block; margin-right:50px; border-right: 1px solid #b1b1b1;}
   .contact .left div {color: #979292; font-size: 20px;}
   .contact .left .name, .contact .right .title {font-size: 26px; color: #334867;}
   .contact .left .phone, .left .email {margin: 30px 0px 0px 0px;}
   .contact .right {width: 505px; height: auto; min-height: 600px; position: relative; float:left; display:block;}
   .contact .form .block {margin-bottom:10px; }
   .contact .form {margin: 20px 0px 0px 0px;}
   .contact .form input[type="text"]{ width: 496px; height: 45px; border: 1px solid lightgray; padding-left: 8px; }
   .contact .form textarea{ width: 489px; height: 280px; border: 1px solid lightgray; padding: 8px; }
   .contact .form button {width: 205px; height: 45px; background-color: #0984c3; position: relative; float: right; border: none; color: #fff; font-family: 'proxima-nova'; letter-spacing: 1px;}
   .contact .horizontalLine { display:block; }
   
   
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Image replacement
    */
   
   .ir {
       background-color: transparent;
       border: 0;
       overflow: hidden;
       /* IE 6/7 fallback */
       *text-indent: -9999px;
   }
   
   .ir:before {
       content: "";
       display: block;
       width: 0;
       height: 150%;
   }
   
   /*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */
   
   .hidden {
       display: none !important;
       visibility: hidden;
   }
   
   /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */
   
   .visuallyhidden {
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
   }
   
   /*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */
   
   .visuallyhidden.focusable:active,
   .visuallyhidden.focusable:focus {
       clip: auto;
       height: auto;
       margin: 0;
       overflow: visible;
       position: static;
       width: auto;
   }
   
   /*
    * Hide visually and from screenreaders, but maintain layout
    */
   
   .invisible {
       visibility: hidden;
   }
   
   /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    `contenteditable` attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
   
   .clearfix:before,
   .clearfix:after {
       content: " "; /* 1 */
       display: table; /* 2 */
   }
   
   .clearfix:after {
       clear: both;
   }
   
   /*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    */
   
   .clearfix {
       *zoom: 1;
   }
   
   /* ==========================================================================
      EXAMPLE Media Queries for Responsive Design.
      These examples override the primary ('mobile first') styles.
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (min-width: 35em) {
       /* Style adjustments for viewports that meet the condition */
   }
   
   @media print,
          (-o-min-device-pixel-ratio: 5/4),
          (-webkit-min-device-pixel-ratio: 1.25),
          (min-resolution: 120dpi) {
       /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
   
   @media print {
       * {
           background: transparent !important;
           color: #000 !important; /* Black prints faster: h5bp.com/s */
           box-shadow: none !important;
           text-shadow: none !important;
       }
   
       a,
       a:visited {
           text-decoration: underline;
       }
   
       a[href]:after {
           content: " (" attr(href) ")";
       }
   
       abbr[title]:after {
           content: " (" attr(title) ")";
       }
   
       /*
        * Don't show links for images, or javascript/internal links
        */
   
       .ir a:after,
       a[href^="javascript:"]:after,
       a[href^="#"]:after {
           content: "";
       }
   
       pre,
       blockquote {
           border: 1px solid #999;
           page-break-inside: avoid;
       }
   
       thead {
           display: table-header-group; /* h5bp.com/t */
       }
   
       tr,
       img {
           page-break-inside: avoid;
       }
   
       img {
           max-width: 100% !important;
       }
   
       @page {
           margin: 0.5cm;
       }
   
       p,
       h2,
       h3 {
           orphans: 3;
           widows: 3;
       }
   
       h2,
       h3 {
           page-break-after: avoid;
       }
   }