@import 'structure.css';
@import 'font-awesome.min.css';
@import 'http://fonts.googleapis.com/css?family=Petrona|Actor|Gudea';


/* ==============================================
   HH2016 CSS
   Author: Hyper Hedgehog
   Website: http://hyperhedgehog.uk

   Contents
   -------------------------------

   1. Function classes
   2. Layout / Structure override
   3. Navigation
   4.
   5.
   6.
   7.
   8.
   9.
   X. Media Queries
================================================== */


/* 1. Function classes
-------------------------------------------------- */

   .fr { float: right!important; }
   .fl { float: left!important; }

   .center {
      float: none !important;
      margin: 20px auto !important;
      }

   .nobg {background:transparent!important;}


   h3 {font-family:Petrona; /* serif */}
   h2 {font-family:Actor; font-size:2.2em;}
   h4, h5 {font-family:Gudea;}
   


   p {font-size:1.2em; color:#666;}
   a {color:#EECB00; text-decoration:none;}
   a:hover, a:focus {color:#EB6E2F; text-decoration:underline;}


/* 2. Layout / Structure override
-------------------------------------------------- */
   html {}
   body {
      max-width:1600px;
      margin:0 auto;
      background:#333!important;
      }
      #wrapper {position:relative; z-index:0;}
         .page { /* aka #wrapper - All content goes inside of .page. This is what keeps the margins on the left and right of the content when scaling down. */
            margin:0 20px;
            padding:20px;
            background:rgba(255,255,255, 0.95);
            background:#fafafa;
            background: -moz-linear-gradient(top,  #fcfcfc 0%, #eaeaea 85%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  #fcfcfc 0%,#eaeaea 85%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  #fcfcfc 0%,#eaeaea 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
            }


   /* Header --- */
      header {
         position:relative; z-index:5;
         margin:-20px; padding-top:4em;
         font-family:'PT Sans', Actor, Helvetica, Arial, sans-serif;
         background: url('../img/bg-header-ncl.jpg') repeat-x bottom #FC0;
         }
         header h2 img {width:25%; margin-top:1em;} /* logo */
         header h1 {width:94%; margin:1.4em auto 3.6em; padding:0; font:normal 3em 'PT Sans', Actor, Helvetica, Arial, sans-serif; line-height:1.4em; color:#fff; text-shadow:0 0px 4px rgba(0,0,0, 0.5);}
         header p {margin-bottom:0.8em!important; font-size:1.05em!important; color:#fafafa;}
          
      
      #burger, #header-social {font-size:2em; background:rgba(0,0,0, 0.0);}
      #burger i, #header-social i {color:#555;}
      #burger:hover i, #header-social li:hover i {color:#f60;}

         #burger {position:absolute; top:0.75em; left:0.75em; padding:0.25em;}
         #burger a i {margin:0.5em;}

         #header-social {position:absolute; top:0.75em; right:0.75em;}
         #header-social li {
            display:inline-block;
            margin:0 0.25em;
            padding:0;
            list-style:none;
            }    


   /* Footer --- */
      footer {
         margin:0 -20px -20px -20px;
         padding:30px;
         color:#ddd;
         background:rgba(255,255,255, 1);
         background:url('../img/bg-footer.jpg') top repeat-x #111;
         }
         footer h2,
         footer h3,
         footer h4,
         footer h6 {color:#ddd;}
         footer p {color:#aaa;}
            footer h2 {text-align:center;}
            footer h3 {margin-top:.45em!important; margin-bottom:1em;}
            footer h4 {color:#ccc;}
            footer p {font-size:1.1em;}
            footer p small {font-size:0.85em; margin-bottom:0.5em!important; color:#999;}
            footer hr {margin-bottom:0; border-color:#444;}

         footer ul, 
         footer li {margin-top:0;}

         footer #header-social {margin:0;}
            footer #header-social li {margin-left:0;}
               footer #header-social a {margin:0; padding:15px 9px 10px; background:rgba(255,255,255, 0.15);}
                  footer #header-social a:hover {background:rgba(255,255,255, 0.3);}
                    footer #header-social a i {color:#aaa; font-size:1.2em;}
                       footer #header-social a:hover i {color:#fc0;}




   /**** Wireframe Overrides ****/
   /* 
      .page {
         background:rgba(255,255,255, 0.5)!important;
         background:#eee!important;  
         border-left:1px solid #777;
         border-right:1px solid #777;
         }

      .row {background:rgba(255,255,255, 0.4)!important;}

      // amend or comment out to disable min-height on all divs 
         div[class*='w-'],
         li[class*='w-']  {
            min-height:50px;
            padding:10px;
            }

      .bg {background:rgba(0,0,0, 0.1)!important;}
      .border {border:1px solid #888!important;}
      .border2 {border:2px solid #888!important;}


   */



/* 3. Navigation
-------------------------------------------------- */

   #burger-nav {
      z-index:100; display:none;
      position:absolute; top:-80px; left:0;
      width:100%; height:80px;
      margin:0 0 2em 0;
      text-align:center;
      background:rgba(0,0,0, 0.9);
      }
      #burger-nav ul {position:relative; width:100%; margin:0;}
         #burger-nav li {display:inline-block; margin:0 1.5em; padding:0;}
            /* hog homelink */
            #burger-nav li:first-child {margin:0 auto;}
            #burger-nav li:first-child a {padding:1.5em 1.5em;}
            #burger-nav li:first-child img {width:59px; height:32px; padding-left:6px; opacity:1;}
            #burger-nav li:first-child:hover img {opacity:0.4;}
            
         #burger-nav a {display:block; padding:1.85em 2em; color:#eaeaea; font:bold 1.2em 'PT Sans'; text-decoration:none;}
            #burger-nav a:hover,
            #burger-nav a:focus {color:#999;}
            #burger-nav a:active {color:#fc0;}

            .animating #burger-nav, .menu-visible #burger-nav {display:block;}
            .animating #wrapper {
               transition:                 transform .25s ease-in;
               -webkit-transition: -webkit-transform .25s ease-in;
               }
            .animating.down #wrapper {
               transform:                  translate3d( 0, 80px, 0 );
               -webkit-transform:          translate3d( 0, 80px, 0 );
               }
            .animating.up #wrapper {
               transform:                  translate3d( 0, -80px, 0 );
               -webkit-transform:          translate3d( 0, -80px, 0 );
               }
            .menu-visible #wrapper {top:80px;}
            #wrapper, #burger-nav {-webkit-backface-visibility:hidden; -webkit-perspective: 1000;}





  

   /* fonts 

   'PT Sans'
   'Yanone Kaffeesatz'
   'Roboto Condensed'

   */



/* 4. Homepage
-------------------------------------------------- */

   #services-alt {display:none;}
      #txt-sizer {display:none;}


   #service-wrapper, #slick-wrapper, #ref-wrapper {margin:3em auto 3em; text-align:center;}

   /* Service Tiles --- */
      #service-tiles {}
      #service-tiles {margin-top:1.2em!important;}
         .tile {
         position:relative;
         width:50%;
         overflow:hidden;
         background:#4679BD;
         }
         .tile:before {
            content:"";
            display:block;
            padding-top:100%;
            }
         .tile a {
            position:absolute; top:0; right:0; bottom:0; left:0;
            text-decoration:none;
            text-align:center;
            background:#444; background:#eaeaea; background:#505050;
            }
            .tile a:hover {background:#fc3; background:#FF6A06; background:#333!important;}
            .tile a:active, .tile a:focus {background:#EB6E2F!important;}
            .tile a img,
            .tile a h3 {
               position:absolute;
               top:50%;
               left:50%;
               }
               .tile a img {
                  width:30px;
                  height:20px;
                  margin-top:-10px; /* Half the height */
                  margin-left:-15px; /* Half the width */
                  }
               .tile a h3 {
                  width:170px;
                  height:170px;
                  margin-top:-85px; /* Half the height */
                  margin-left:-85px; /* Half the width */
                  color:#eee; color:#222; color:#FF6A06; color:#ddd;
                  font-family:'PT Sans', Actor; font-weight:bold; text-transform:uppercase;
                  }
                  .tile a h3 i {margin-top:.15em; margin-bottom:0.25em; font-size:5em;}
                  .tile:first-child a h3 i {font-size:5.8em; margin-top:.1em; margin-bottom:.1em;} /* make laptop icon larger with compensated margins to align with others */
            .tile a:hover h3 {color:#3a3a3a; color:#FF6A06; color:#fc3!important;}
            .tile a:active h3, .tile a:focus h3 {color:#fff!important;}




         /* Tiles dropdown sections */
     
      #service-tiles .tile:hover a,
      #service-tiles .tile:focus a {
         background:rgba(0,0,0,0.5);
         cursor:pointer;
         -webkit-transition:background 0.2s linear;
         -moz-transition:background 0.2s linear;
         -o-transition:background 0.2s linear;
         transition:background 0.2s linear;
         }

   #service-info {
      display:block;
      position:relative;
      margin:10px 10px 20px 10px;
      padding:10px 10px 20px 10px;
      background:#eaeaea;
      border-top:10px solid #ffc000;
      }
      #service-arrow {
         position:absolute; top:-22px;
         width:21px; height:12px;         
         background:url('../img/service-arrow.png') no-repeat;
         }

      /* service content container */  
      #service-info section {
         display:block;
         color:#000;
         min-height: 200px;
         border:1px dotted red;
         }
         #service-info h2 {color:#444;}
         #service-info section h2,
         #service-info section p {margin-bottom:0.5em; text-shadow:none;}
         #service-info section p {color:#555;}
         
         #service-info section a {color:#555; text-decoration:underline;}
            #service-info section a:hover,
            #service-info section a:focus {color:#cc9a00;}








   /* our design process */
   #process {margin:80px 10px 80px 10px;}
   #process .title {
      display:block;
      width:215px;
      margin:-32px auto;
      padding-bottom:70px;
      text-align:center;
      background:#000;
      border:none;
      }
      #process .title i {
         padding:0 5px 0 0;
         font-size:3em;
         color:#fff;
         -webkit-animation:lightbulb 3s infinite;
         -moz-animation:lightbulb 3s infinite;
         -o-animation:lightbulb 3s infinite;
         animation:lightbulb 3s infinite;
         }
      #process .title h2 {display:inline; font-size:1.5em!important;}
      
   #process div {
      position:relative;
      display:inline-block;
      vertical-align:top;
      width:187px;
      margin:0 24px 25px 0;
      padding:0 10px;
      background:#111;
      background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #222222),color-stop(1, #333333));
       background-image:-moz-linear-gradient(top, #222222, #333333);
      background-image:-o-linear-gradient(top, #222222, #333333);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#333333'); /* IE6,IE7 */
       -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#333333')"; /* IE8 */
      border:2px solid #363636;
      -webkit-box-shadow:0 0 8px rgba(0,0,0,0.9);
      -moz-box-shadow:0 0 8px rgba(0,0,0,0.9);
      -o-box-shadow:0 0 8px rgba(0,0,0,0.9);
      box-shadow:0 0 8px rgba(0,0,0,0.9);
      }
      #process div:last-child {
         display:block;
         width:100%;
         margin:0;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         }
      #process div h2 {
         font-size:1.2em;
         margin:14px 0 10px 0;
         }
         #process div h2 span {
            position:absolute; top:-27px; left:-25px;
            width:35px; height:30px;         
            padding:4px 0 0 0;
            color:#fc0;
            font-size:1.1em;
            text-align:center;
            background:#252525;
            border-radius:20px;
            border-top:2px solid #444;
            border-left:2px solid #444;
            }
      #process div p {color:#999; font-size:0.9em;}
      #process-5 {width:75%!important; margin-left:auto!important; margin-right:auto!important;}



#service-info {
      display:block;
      position:relative;
      margin:10px 10px 20px 10px;
      padding:10px 10px 20px 10px;
      background:#eaeaea;
      border-top:10px solid #ffc000;
      }
      #service-arrow {
         position:absolute; top:-22px;
         width:21px; height:12px;         
         background:url('../img/service-arrow.png') no-repeat;
         }

      /* service content container */  
      #service-info section {
         color:#000;
         }
         #service-info h2 {color:#444;}
         #service-info section h2,
         #service-info section p {margin-bottom:0.5em; text-shadow:none;}
         #service-info section p {color:#555;}
         
         #service-info section a {color:#555; text-decoration:underline;}
            #service-info section a:hover,
            #service-info section a:focus {color:#cc9a00;}

            #service-info section a.call {
               display:inline-block;
               text-decoration:none;
               padding:8px 12px;
               font-size:1.1em;
               border-radius:5px;
               }
            
         /* individual service blocks */
         #service-info section .service {
            position:relative;
            display:inline-block;
            width:270px;
            margin:20px 0 10px 10px;
            padding:10px;
            vertical-align:top;
            color:#222;
            font-size:0.9em;
            background:#ddd;
            border:1px solid #c2c2c2;
            }
            .fl {float:left; margin-right:3px!important;}
            .fr {float:right;}
            #service-info section .service i {
               position:absolute;
               top:-6px;
               left:-6px;
               color:green;
               font-size:1.5em;
               }
            #service-info section .service h2 {margin:5px 0 0.75em 0; font-size:1.4em;}
            #service-info section .srv {position:absolute; bottom:20px; right:-15px; text-decoration:none;}
            
            /* service boxes */
            #service-info section .service h2, 
            #service-info section .service p {text-shadow:none;}
            #service-info section .service p {
               margin:0 0 1em 0;
               color:#000;
               text-shadow:none;
               }
            .service hr {margin:26px 0 12px 0; background:#bbb;}
            .service h3 {color:#777; text-shadow:none;}
            .service i.icon-star {
               position:relative!important;
               float:left;
               margin:8px 2px 5px 2px!important;
               padding:3px 4px;
               font-size:1.6em!important;
               color:#ccc!important;
               background:#777;
               border-radius:20px;
               }
            
         /* example projects (2-wide) */
         #service-info section .example-project {
            display:inline-block;
            width:45%;
            margin:15px 5px 20px 29px;
            padding-bottom:10px;
            vertical-align:top;
            background:#333;
            border-radius:5px;
            box-shadow:0 0 3px 0 #999;
            }
            #service-info section .example-project img {border-radius:3px 3px 0 0;}
            #service-info section .example-project h4,
            #service-info section .example-project p {
               padding:0 10px;
               color:#fff;
               }
            #service-info section .example-project h4 {margin-bottom:10px; font-size:1.1em; font-weight:normal;}
            #service-info section .example-project h4 a,
            #service-info section .example-project h4 a:visited {color:#fd0; text-decoration:none;}
            #service-info section .example-project h4 a:hover,
            #service-info section .example-project h4 a:focus {color:#f80; text-decoration:underline;}
            #service-info section .example-project h4 a:active {color:#fff;}
            #service-info section .example-project h4 strong {display:block; padding:2px 0 0 0; color:efefef; font-size:0.8em; font-weight:normal;}
            
            #service-info section .example-project p {margin-bottom:10px; font-size:0.9em; color:#ccc;}
            #service-info section .example-project p strong {display:block; margin:20px 0 5px; color:#fff; font-size:0.9em; font-weight:bold; text-transform:uppercase}

















   /* Slick Portfolio --- */
      #slick-wrapper {
         width:100%;
         margin:8em auto 8em; padding:0;
         /* border:40px solid #444; */
         border-left:none; border-right:none;
         }
         /* slider */
            .slick-slider {
               display:block;
               position:relative;                      border:0px solid black;
               margin:0 -20px;
               -moz-box-sizing:border-box;
               box-sizing:border-box;
               -webkit-user-select:none;
               -moz-user-select:none;
               -ms-user-select:none;
               user-select:none;
               -webkit-touch-callout:none;
               -khtml-user-select:none;
               -ms-touch-action:pan-y;
               touch-action:pan-y;
               -webkit-tap-highlight-color:transparent;
               }
               .slick-list { /* holds the .slide-track and slides */
                  display:block;
                  position:relative;                  border:0px dotted green;
                                                      background:rgba(0,0,0, 0);
                  overflow:hidden; /* Disable to allow the child .slick-track to break out full width */
                  }
                  .slick-list:focus {outline:none;}
                  .slick-list.dragging {cursor:pointer; cursor:hand;}
                  .slick-slider .slick-track,
                  .slick-slider .slick-list {
                      -webkit-transform: translate3d(0,0,0);
                         -moz-transform: translate3d(0,0,0);
                          -ms-transform: translate3d(0,0,0);
                           -o-transform: translate3d(0,0,0);
                              transform: translate3d(0,0,0);
                  }
                  .slick-track { /* sits inside the block level .slick-list */
                      display:block; /* position:fixed left aligns this container to the parent .slick-list */
                      position:relative;
                      top:0; left:0;                   border:0px solid lime;
                      margin:0;                        background:rgba(0,0,0, 0)!important;
                      }
                      .slick-track:before,
                      .slick-track:after {display:table; content:'';}
                      .slick-track:after {clear:both;}
                      .slick-loading .slick-track {visibility:hidden;}

            /* slides */
               .slick-slide {
                  display:none; display:block;
                  float:left;
                  width:450px;
                  height:100%;
                  margin:10px 15px 0px; padding:5px;
                  text-align:center;
                  }
                  [dir='rtl'] .slick-slide {float:right;}
                  .slick-slide.slick-current {
      /*               background:#fff;
                     background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(251,251,251,0) 90%, rgba(250,250,250,1) 99%, rgba(250,250,250,1) 100%);
                     background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(251,251,251,0) 90%,rgba(250,250,250,1) 99%,rgba(250,250,250,1) 100%);
                     background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(251,251,251,0) 90%,rgba(250,250,250,1) 99%,rgba(250,250,250,1) 100%);
                     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#fafafa',GradientType=0 );
        */             border-radius:4px;
                     }
                  .project {min-height:730px;}
                  .project div {
                     margin-bottom:2em; padding-top:4px;
                     background:#eaeaea!important;
                     border-bottom:1px solid #ddd;
                     border-top-left-radius:4px;
                     border-top-right-radius:4px; 
                     box-shadow:0 2px 6px rgba(0,0,0, 0.15);
                     }
                     .project .dot {
                        float:left; display:inline-block;
                        width:6px; height:6px;
                        margin:1px 6px 5px 0; padding:0px;
                        border:none; border-radius:8px; background:#ccc!important;
                        }
                        .project .dot:first-child {margin-left:7px;}

                  .slick-slide img {display:block; width:100%; border-top:1px solid #d5d5d5;}
                  .slick-slide.slick-loading img {display:none;}
                  .slick-slide.dragging img {pointer-events:none;}

            /* misc */
               .slick-initialized .slick-slide {display:block;}
               .slick-loading .slick-slide {visibility:hidden;}
               .slick-vertical .slick-slide {display:block; height:auto; border:1px solid transparent;}
               .slick-arrow.slick-hidden {display:none;}

            /* nav arrows */
               .fa-slick-arrow {
                  display:block; z-index:300;
                  position:absolute; top:35%; top:150px;
                  width:auto; height:auto;
                  padding:0;
                  color:rgba(0,0,0, 0.5);
                  font-size:3em!important;
                  line-height:0;
                  background:transparent;
                  border:none;
                  outline:none;
                  cursor:pointer;
                  }
                  .fa-slick-arrow:hover {color:rgba(0,0,0, 1);}
                  .fa-slick-arrow-prev {left:20px;}
                  .fa-slick-arrow-next {right:20px;}

         .project h4 {font-size:1.25em; margin-bottom:0;}
         .project h5 {font-size:1.15em; font-weight:normal; margin-bottom:1em;}
         .project h6, .project p, .project ul {display:none;}
            
            .project.slick-current h6, .project.slick-current p, .project.slick-current ul {display:block;}
            
            /* project summaries */
               .project h6 {padding-top:0.75em; color:#8a8a8a;}
               .project p {font-size:1.15em; color:#555;}
               .project ul.project-feature-list {margin-left:0; margin-bottom:2em;}
               .project ul.project-feature-list li {
                  display:inline-block;
                  position:relative;
                  margin:0.15em 0.5em;
                  padding:0;
                  font-size:0.95em;
                  color:#999;
                  }
                  .project ul.project-feature-list li i {margin-right:3px;}
    

   /* Testimonials --- */
      #ref-wrapper {
         min-height:7em;
         margin:0 -20px!important;
         padding:3em 1em;
         background:url('../img/bg-ref.png') repeat center top!important;
         border-top:0px solid #837052;
         border-top:10px solid #F3CE37;
         }
         #ref-wrapper h2 {color:#634B32; text-shadow:0 1px 0 rgba(255,255,255, 0.75);}
         #ref-wrapper p {color:#837052; text-shadow:0;}

      .testimonial {margin-bottom:1em; text-align:center;}
        
         .testimonial img {width:130px; height:130px; margin:1em auto 0.82em; padding:4px; background:#fff; border:0px solid #aaa; border-radius:100px; box-shadow:0 -3px 12px rgba(0,0,0, 0.3);}
         .testimonial h3, .testimonial p {color:#837052; text-shadow:0 1px 0 rgba(255,255,255, 0.9);}
         .testimonial h3 {margin-bottom:0; font-size:1.6em;}
         .testimonial h5 {font-size:1.3em; margin-bottom:1.65em; color:#634B32;}
         .testimonial p {margin-left:.75em; margin-right:.75em; font:1.6em Petrona, serif; line-height:1.6em;}






/* --------------------------------------------------
   X. Media Queries
-------------------------------------------------- */



/* Desktop Large
-------------------------------------------------- */
   @media only screen and (min-width: 1401px) {
     body {max-width:1300px; background:indigo;}
      .page {margin:0 0px; padding:20px;}


      /* menu */
      #burger-nav li {display:inline-block; margin:0 3em; padding:0;}
      #burger-nav li:first-child img {width:69px; height:38px; padding:0 0 0 6px;}
      #burger-nav a {display:block; padding:1.75em 3.2em; color:#eaeaea; font:bold 1.25em 'PT Sans'; text-decoration:none;}

      #burger, #header-social {font-size:2.6em;}

      p {font-size:1.4em;}

      header h2 img {width:22.5%;} /* logo */
      header h1 {width:85%; margin:2.25em auto 4em; font-size:3.4em}
      header p {font-size:1em;}

      /* Homepage */
      #service-tiles {}
         .tile a h3 {font-size:2em;}
         .tile a h3 i {margin-top:-0.06em; margin-bottom:0.2em;}
         .tile:first-child a h3 i {margin-top:-0.09em; margin-bottom:0.06em; font-size:5.85em;}

      #ref-wrapper {margin-bottom:8em;}

      .slick-slide {width:550px;}
      .fa-slick-arrow {top:35%;}

      .testimonial img {width:150px; height:150px;}
      .testimonial h3 {font-size:1.5em; margin-bottom:0;}
      .testimonial h5 {font-size:1.2em;}
      .testimonial p {font-size:1.75em;}

   }












/* Desktop
-------------------------------------------------- */
   @media only screen and (min-width: 1026px) and (max-width: 1400px) {
      body {max-width:1100px; background:lightskyblue;}


      body{background:silver}

   }



/* Tablet Landscape
-------------------------------------------------- */
   @media only screen and (min-width: 770px) and (max-width: 1025px) {
      body {/*background:#333;*/}
      #wrapper {margin:0 auto;}

      /* menu */
      #burger-nav li {width:20%; margin:0 0.25em;}
      /* hog home link */
         #burger-nav li:first-child {width:auto; margin-left:-9px;}
         #burger-nav li:first-child img {margin-left:-3px;}
      #burger-nav li:last-child {margin-right:-7px;}
      #burger-nav a {padding:1.9em 0em;}

      #burger, #header-social {font-size:2.2em;}
      #header-social {top:0.5em; right:0.5em;}
      #burger {top:0.5em; left:0.5em;}

      header {margin-bottom:3em!important;}
      header h2 img {width:25%; margin-top:1em;} /* logo */
      header h1 {width:90%; margin:2em auto 3em; font-size:2.8em;}


      /* Typography */
      h1 {font-size:2.6em; margin-bottom:0.75em;}
      h2 {font-size:2.2em; margin-bottom:0.66em;}
      h3 {font-size:1.75em; margin-bottom:0.6em;}
      h4 {font-size:1.5em; margin-bottom:0.5em;}
      h5 {font-size:1.35em; margin-bottom:0.6em;}
      h6 {font-size:1em;}

      p {font-size:1.25em;}
      small {display:inline-block; font-size:0.75em; line-height:1.6em;}


      /* Homepage */
      #service-tiles {}
         .tile a h3 {font-size:1.7em;}
         .tile a h3 i {margin-top:0.03em; margin-bottom:0.2em;}
         .tile:first-child a h3 i {margin-top:0em; margin-bottom:0.06em; font-size:5.85em;}

      #service-wrapper, #slick-wrapper, #ref-wrapper {margin:1em auto 4em;}
      #ref-wrapper {margin-bottom:8em;}

         .slick-slide {width:580px;}
         .fa-slick-arrow {top:37.5%;}


   }



/* Tablet Portrait
-------------------------------------------------- */
   @media only screen and (min-width: 670px) and (max-width: 769px) {
      body {font-size:105%; /*background:#dd5;*/}
      #wrapper {margin:0 auto;}


      /* menu */
      #burger-nav li {width:18%; height:80px; margin:0 .5em; line-height:80px; vertical-align:middle;}
      #burger-nav a {display:inline-block; padding:0 .5em; font-size:0.95em; vertical-align:middle;}
      /* hog home link */
         #burger-nav li:first-child {width:auto;}
         #burger-nav li:first-child a {padding:1.5em 0;}
         #burger-nav li:first-child img {width:54px; height:29px; margin-left:3.5%;}
         #burger-nav li:last-child {width:22%; margin-right:-2%;}

      #burger, #header-social {font-size:1.5em;}

      header {margin-bottom:3em!important;}
      header h2 img {width:35%; margin-top:0;} /* logo */
      header h1 {width:90%; margin-bottom:4em; font-size:1.6em;}
      header p {font-size:0.8em;}


      /* Typography */
      h1 {margin-bottom:0.65em;}
      h2 {margin-bottom:0.55em;}
      h4 {font-size:1.2em;}
      h5 {font-size:1.05em;}
      h6 {font-size:0.8em;}

      p {font-size:1em;}
      small {display:inline-block; font-size:0.75em; line-height:1.6em;}


      /* Homepage */
      #service-tiles {margin-bottom:4em;}
         .tile a h3 {margin-top:-65px; font-size:1.1em;}
         .tile a h3 i {margin-top:.1em; margin-bottom:.2em; font-size:4em;}
         .tile:first-child a h3 i {margin-top:4px; margin-bottom:.06em; font-size:4.7em;}


      #slick-wrapper, #ref-wrapper {margin:1em auto 6em;}
      #ref-wrapper {margin-bottom:8em;}

         .slick-slide {width:425px;}

         .testimonial h3 {margin-bottom:0;}
         .testimonial p {font-size:1.1em;}

   }



/* Mobile Landscape
-------------------------------------------------- */
   @media only screen and (min-width: 480px) and (max-width: 669px) {
      body {/*background:#f80;*/}
      #wrapper {margin:0 auto;}


      /* menu */
      #burger-nav li {width:20%; margin:10px 0em;}
      #burger-nav a {display:block; padding:1.8em 0; font-size:1em;}
      /* hog home link */
         #burger-nav li:first-child {width:auto;}
         #burger-nav li:first-child a {margin:0; padding:2.3em 0;}
         #burger-nav li:first-child img {width:43px; height:23px; margin-left:-5px;}
      #burger-nav li:last-child {margin-right:-5px;}

      #header-social, #burger {top:0.3em;}
      #header-social {right:0.25em;}
      #burger {left:0.25em;}

      header {}
      header h2 img {width:33%; margin:0 auto;} /* logo */
      header h1 {width:92%; margin:1.4em auto 0.5em; font-size:1.6em; line-height:1.3em}
      header p {font-size:1em; color:#999;}


      /* Typography */
      h1 {font-size:2.2em; margin-bottom:0.75em;}
      h2 {font-size:1.95em; margin-bottom:0.66em;}
      h3 {font-size:1.75em; margin-bottom:0.6em;}
      h4 {font-size:1.5em; margin-bottom:0.5em;}
      h5 {font-size:1.35em; margin-bottom:0.6em;}
      h6 {font-size:1em;}

      p {font-size:1.3em; line-height:1.4em}
      small {display:inline-block; font-size:0.75em; line-height:1.4em;}


      /* Homepage */
      #service-tiles, .tile {margin-bottom:0;}
         .tile a h3 {margin-top:-60px; font-size:1.1em;}
         .tile a h3 i {margin-top:.1em; margin-bottom:.15em; font-size:5em;}
         .tile:first-child a h3 i {margin-top:3px; margin-bottom:.042em; font-size:5.75em;}

      #service-wrapper, #slick-wrapper, #ref-wrapper {margin:1em auto 6em;}
         #slick-wrapper h2, #ref-wrapper h2 {margin-bottom:1em;}

         .slick-slide {width:380px;}
         .fa-slick-arrow {top:32%; font-size:2.4em!important}
            .fa-slick-arrow-prev {left:10px;}
            .fa-slick-arrow-next {right:10px;}

         .testimonial img {width:120px; height:120px;}
         .testimonial h3 {font-size:1.5em; margin-bottom:0;}
         .testimonial h5 {font-size:1.2em;}
         .testimonial p {font-size:1.3em;}



   }



/* Mobile Portrait
-------------------------------------------------- */
   @media only screen and (max-width: 479px) {
      body {/*background:firebrick;*/}
      #wrapper {margin:0 auto;}


      /* menu */
      #burger-nav li {width:25%; margin:0; padding:0;}
      #burger-nav li:first-child {display:none;}
      #burger-nav li:last-child {margin-right:-5px;}
      #burger-nav a {display:block; height:40px; padding:1.75em 0.75em 1.2em; font-size:1em;}

      #header-social, #burger {top:0.5em;}
      #header-social {right:0.25em;}
      #burger {left:0.25em;}

      header {}
      header h2 img {width:55%; margin:1.5em auto 0;} /* logo */
      header h1 {width:92%; margin:1.4em auto 0.5em; font-size:2.4em; line-height:1.3em}
      header p {font-size:1em; color:#999;}


      /* Typography */
      h1 {font-size:2.6em; margin-bottom:0.75em;}
      h2 {font-size:2.2em; margin-bottom:0.66em;}
      h3 {font-size:1.75em; margin-bottom:0.6em;}
      h4 {font-size:1.5em; margin-bottom:0.5em;}
      h5 {font-size:1.35em; margin-bottom:0.6em;}
      h6 {font-size:1em;}

      p {font-size:1.3em; line-height:1.4em}
      small {display:inline-block; font-size:0.75em; line-height:1.4em;}


      /* Homepage */
      #service-tiles {}
         .tile a h3 {margin-top:-60px; font-size:1.3em;}
         .tile a h3 i {margin-top:.1em; margin-bottom:.15em; font-size:5em;}
         .tile:first-child a h3 i {margin-top:3px; margin-bottom:.042em; font-size:5.75em;}


      #service-wrapper, #slick-wrapper, #ref-wrapper {margin:1em auto 6em;}
         #slick-wrapper h2, #ref-wrapper h2 {margin-bottom:1em;}

         .slick-slide {width:329px;}
         .fa-slick-arrow {top:32%; font-size:2.4em!important}
            .fa-slick-arrow-prev {left:10px;}
            .fa-slick-arrow-next {right:10px;}

         .testimonial img {width:120px; height:120px;}
         .testimonial h3 {margin-bottom:0;}
         .testimonial p {font-size:1.3em;}



   }



 /* Retina Screens media query.
    Overrides styles for devices with a device-pixel-ratio of 2+
 ---------------------------------------------------------------- */

   @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
      body {}


   }