/* @import 'structure.css'; */

/* ==============================================
   SRCS CSS
   Website: http://sadierobson.co.uk

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

   1. Layout / Structure override
   2. Shared elements
   --
   3. Homepage Framing
   4. Services
   5. Why
   6. About
   7. Contact

================================================== */


/* 1. Layout / Structure override
-------------------------------------------------- */
   html {}
   body {
      position:relative;
      margin:0 auto;
      font-family:roboto, Helvetica, Arial, sans-serif;
      background:#333;
      }


   /* Fonts ---- */
   @font-face {
      font-family:roboto;
      src:url('../fonts/Roboto-Regular.ttf');
      }
      h1, h2, h3, h4, h5, p, button {font-family:roboto, Helvetica, Arial, sans-serif;}
      p {font-size:1.05em; line-height:1.4em;}

      h1, h2, h3, h4, h5 {
         margin-bottom:1.4em;
         color:#444;
         line-height:1.4em!important;
         }

         h1 {
            font-size:1.6em;
            line-height:1.3em!important;
            }
            header h1 {
               font-family:Dense, Helvetica, Arial, sans-serif; 
               font-size:3.4em!important; color:#eee; line-height:1.05em!important;
               }
                  
         h2 {
            font-size:1.3em;
            line-height:3.5em;
            }
            h2#logo {}
            h2#intro {text-align:center; width:80%; margin:1.5em auto 2em; color:#286090; text-align:center;}

         h3 {
            margin-bottom:1em;
            color:#666;
            font-size:1.2em;
            line-height:1.3em;
            }
            h3.dense {
               font-family:Dense, Helvetica, Arial, sans-serif;
               font-size:2.4em;
               text-transform:uppercase;
               }

         h4 {
            margin-bottom:1.1em;
            font-size:1.2em;
            }

         h5 {
            margin-bottom:0.75em;
            font-size:0.85em;
            }

         h6 {
            margin-bottom:2em;
            font-size:0.8em;
            color:#444;
            }

         blockquote {margin-bottom:1.75em; color:#777;}

         hr {margin-top:1.65em; border-color:#ddd; color:#fff;}


   header {
      z-index:0;
      position:relative;
      width:100%; min-height:29px;
      margin:0 auto;
      background:#FC0;
      border-bottom:1px solid #444;
      }

      nav {
         position:relative;
         z-index:100;
         max-width:1052px; height:auto;
         margin:0 auto;
         }
         nav ul {
            margin:0; padding:0;
            text-align:center;
            }
            nav ul li {
               display:none;
               font-size:0.9em;
               font-weight:bold;
               background:rgba(0,0,0, 0.05);
               }
               nav ul li#tel, nav ul li#url {display:inline-block; min-height:26px; background:transparent;}
                  nav ul li#tel {position:absolute; right:1em;}
                  nav ul li#url {position:absolute; left:1em;}

                  nav ul li a {
                     display:block;
                     height:auto;
                     padding:7px 20px 6px 20px;
                     color:#333;
                     text-align:center;
                     text-decoration:none;
                     border:0;
                     }
                     nav ul li a:hover,
                     nav ul li a:focus {background:#777; color:#e5e5e5;}


   footer {
      width:100%;
      padding:1em 0 4em 0;
      color:#666;
      font-size:0.75em;
      text-align:left;
      background:#333;
      border-top:1px solid #1a1a1a;
      }
      footer div {max-width:1052px; margin:0 auto; padding:0 2em;}
         footer ul {float:right; margin-top:0;}
            footer ul li {display:inline-block; margin-right:1em; line-height:1.4em;}
            footer ul li:first-child {float:left; margin-top:-4px; color:#ddd; font-size:1.4em;}
               footer a {color:#777; text-decoration:none;}      
               footer a:hover, footer a:focus {color:#FC0;}
                  footer h5 {margin:0 0 0.5em 0; color:#888; font-size:1em;}
                  footer p {margin:0; font-size:1em; line-height:1.4em;}

         footer #validation {
            margin:0.75em 0 0 0;
            padding:0 0.2em;
            font-size:1.75em;
            }
            footer #validation a {display:inline-block; margin-right:0.5em;}
            footer #validation i.fa-css3 {font-size:0.92em;}
            a#hh {
               width:38px;
               height:24px;
               margin:0 0 -3px -3px;
               padding:1px 0;
               background: url("../img/logo-hh.png") no-repeat scroll 0 3px transparent;
               }
               a#hh:hover, a#hh:focus, a#hh:active {background-position:-40px 3px;}

  .page {
      max-width:100%;
      min-height:100%;
      margin:0 auto;
      padding:6em 0 10em;
      background:#555;
      background:url('../img/bg-body.jpg') top center no-repeat fixed;
      }

   .clear {clear:both;}
   .txt-c {text-align:center;}
   .fl {float:left;}
   .fr {float:right;}


/* 2. Shared elements
-------------------------------------------------- */

   /* buttons --- */
      .btn {
         padding:0.5em 1em;
         font-size:0.9em;
         color:#fff;
         line-height:1.1em;
         text-decoration:none;
         vertical-align:middle;
         border:0;
         border-radius:4px;
         }
         .btn:hover,
         .btn:focus {box-shadow:0 4px 8px #aaa;}
         .btn i {
            float:left;
            margin:0 0.35em 0 0.15em;
            color:rgba(255,255,255, 0.4);
            font-size:2.2em;
            }
         /* blue */
            .btn, .btn-blue {background:#286090;}
            .btn:hover, .btn-blue:hover {background:#337AB7;}
         /* green */
            .btn.btn-green {background:#3A873A;}
            .btn.btn-green:hover, a.btn.btn-green:focus {background:#449D44;}



/* 3. Homepage Framing
-------------------------------------------------- */

      /* accordion */
      #site-accordion {
         position:relative;
         z-index:0;
         width:40%;
         min-width:500px;
         max-width:960px;
         margin:0 auto;
         box-shadow:0 1px 7px rgba(0,0,0, 0.75), 0 3px 20px rgba(0,0,0, 0.5);
         }
         #site-head {
            min-height:7em;
            padding:0 0 1em 0.25em;
            text-align:right;
            background:url('../img/bg-header.png') top center no-repeat #FFF;
            border-top-left-radius:10px; border-top-right-radius:10px;
            }
            #site-head h1, #site-head h2 {margin:0; padding:0.15em 0.4em;}
               #site-head h1 {position:absolute; top:4.8em; right:1.2em; font-size:0.8em; color:#222; font-weight:normal;}
               #site-head h2 {font-size:2.5em; font-family:Calibri, Helvetica, sans-serif;}
               #site-head img {width:118px; height:42px; display:block; float:right; padding:0.2em .1em 0 0;}
               #site-head h2 span {display:none;}

         #mob-menu {
            display:block;
            height:41px;
            margin:0; padding:0 1em;
            text-align:right;
            background:#ccc;
            background-image:linear-gradient(to bottom, #EBEBEB 50%, #CFCFCF 100%);
            border-top:1px solid #ccc; border-bottom:1px solid #999;
            }
            #mob-menu li {
               display:inline-block;
               margin:5px 0 0 0.5em;
               }
            #mob-menu li a {
               display:block;
               margin:0;
               color:#000;
               font-size:0.85em;
               text-decoration:none;
               background:#999;
               border-radius:3px;
               }
               #mob-menu li a:hover,
               #mob-menu li a:active {color:#333; background:#FC0;}
               #mob-menu i {padding:6px 9px; font-size:1.4em;}
               #mob-menu i.fa-map-marker {padding:6px 11px;}

         #mob-menu {display:none;}

      .accordion {
         margin:3.5em 0;
         font-size:1em;
         background:#f0f0f0;
         border:0px solid #CACACA;
         border-radius:10px;
         }

         /* titles */
         .accordion-title {
            padding:8px 20px 10px;
            background:#dadada;
            border-top:1px solid #cacaca;
            cursor:pointer;
            }
            .accordion-title h3 {}
            .accordion-title h3 span {
               display:block; 
               font-size:0.7em; font-weight:normal;
               line-height:1.2em;
               }
            .accordion-title h3 i {
               float:left;
               width:20px; height:20px;
               margin:0.2em .8em 0 0; 
               padding:0.55em 0.5em 0.45em 0.5em;
               color:#ddd;
               font-size:0.95em;
               text-align:center;
               background:#333;
               border-radius:40px;
               }
               .accordion-title h3 i.fa-th {}
               .accordion-title h3 i.fa-check {}
               .accordion-title h3 i.fa-users {}
               .accordion-title h3 i.fa-paper-plane {padding:0.5em 0.55em 0.5em 0.45em;}

            .accordion-title:first-child {
               border-top:medium none; 
               border-bottom-left-radius:0; border-bottom-right-radius:0;
               }
            .accordion-title:last-child {
               border-top:medium none;
               border-top-left-radius:0; border-top-right-radius:0;
               }
         .accordion-title:hover,
         .accordion-title:focus {
            background:#e4e4e4;
            }
            .accordion-title:hover h3, .accordion-title:focus h3 {color:#333;}
            .accordion-title:hover h3 i, .accordion-title:focus h3 i {color:#333; background:#777;}
            .accordion-title:hover h3 span, .accordion-title:focus h3 span {color:#999;}
            
            /* titles .active */
            .accordion-title.active {background:#efefef;}
               .accordion-title.active h3 {color:#333;}
               .accordion-title.active h3 span {color:#999;}
               .accordion-title.active i {color:#606060; background:#FD0;}

            .accordion-title.active:hover {background:#fefefe; background:linear-gradient(to bottom, #fff 0%, #efefef 95%);}
               .accordion-title.active:hover h3 {color:#000;}
               .accordion-title.active:hover h3 span {color:#777;}
               .accordion-title.active:hover i,
               .accordion-title.active:focus i  {color:#333; background:#FD0;}



         /* content */
         .accordion-content {
            display:none;
            padding:15px 20px 20px;
            }
            .accordion-content h4 {margin-top:0; font-size:1em;}
            .accordion-content p {margin-top:0; margin-bottom:1.4em; color:#666; font-size:0.8em;}
            .accordion-content ul {margin:0 0 0 1em; padding:0; font-size:0.8em}
            .accordion-content li {margin:0 0 0.2em 0; color:#555;}
            .accordion-content img {max-width:100%}

            div.w-50.nmgnl {margin-left:0;}

            div.w-50 {
               display:inline-block;
               width:48%;
               margin:0 0 1em 2%;
               padding:0;
               vertical-align:top;
               }
            #contact-content div.w-50.nmgnl {margin-left:0;}
            #contact-content div.w-50 p {margin-top:0;}
            #contact-content div.w-50 a.btn-green {
               display:block;
               width:67%;
               margin-top:2.2em;
               }

            ul#contact-info {margin:0; padding:0; font-size:0.8em; list-style:none;}
            ul#contact-info li {margin:0 0 1.4em 0; font-size:1.1em; color:#333;}
            ul#contact-info li h6 {display:block; margin-top:0; margin-bottom:0.5em; color:#777; font-weight:normal; font-size:0.9em;}
         #site-foot {height:1.5em; background:#FC0; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
 

/* 4. Services
-------------------------------------------------- */


/* 5. Why
-------------------------------------------------- */

ul.why {margin-left:2.5em; margin-bottom:1.5em;}
ul.why li {margin-bottom:0.75em; padding-right:0.5em; color:#666;}


/* 6. About
-------------------------------------------------- */


/* 7. Contact
-------------------------------------------------- */

   #contact-form {
      display:block;
      width:88%; min-height:4em;
      margin:2em auto 3em auto;
      padding:0.75em;
      background:#ccc;
      border-radius:2px;
      }
      #contact-form div {display:inline-block; width:46%;}
      #contact-form div:first-child {margin-right:5%;}
      
      #contact-form label, 
      #contact-form input {display:block;}

      #contact-form label {
         margin:0 0 0.25em 0.1em;
         color:#777; 
         font-size:0.75em;
         }

         #contact-form input,
         #contact-form textarea {
            display:block; width:97%;
            margin:0 0 1.5em 0; padding:3px 5px;
            font:0.8em Roboto, Helvetica, Arial, sans-serif;
            border:1px solid #999;
            }
            #contact-form textarea {height:10em;}
         

         #contact-form input.btn {
            display:block; width:100%;
            margin:0em 0 1em 0; padding:0.75em;
            font-size:0.9em;
            cursor:pointer;
            }


.contact-page {height:500px}
   .form-msg p{padding-left:4.2em; font-size:0.8em;}
   .form-msg a {text-decoration:none;}



/* Desktop Large
-------------------------------------------------- */
   @media only screen and (min-width: 1401px) {

   } 



/* Desktop
-------------------------------------------------- */
   @media only screen and (min-width: 1026px) and (max-width: 1400px) {

   } 



/* Tablet
-------------------------------------------------- */
   @media only screen and (min-width: 601px) and (max-width: 1025px) {

      nav {height:36px;}
      nav ul li a {padding:10px 20px 8px 20px;}


      .page {padding-top:4em;}

      #site-accordion {min-width:500px;}
         #site-head h1, #site-head h2 {padding:0.1em 0.5em;}
            #site-head h1 {top:4.5em; right:1.05em; font-size:0.85em;}

            .accordion-title h3 i {margin:0.1em .8em 0 0; padding:0.55em 0.5em 0.45em 0.5em;}
            .accordion-title h3 i.fa-paper-plane {padding:0.55em 0.57em 0.48em 0.42em;}

         #site-foot {height:26px;}


      footer {font-size:0.8em;}
      footer ul {margin-top:0; text-align:right;}
      footer ul li {display:block; padding:0 0 2px 0;}
      footer ul li:first-child {display:none;}
      footer ul li span {display:inline-block;}
      footer p {font-size:0.85em;}
   }



/* Mobile Landscape
-------------------------------------------------- */
   @media only screen and (min-width: 480px) and (max-width: 600px) {

      header, nav {display:none;}

      .page {padding:2em 0 6em 0}


      #site-accordion {
         min-width:360px;
         max-width:400px;
         }
         #site-head h1 {right:0.8em;}
         #site-head h2 img {width:100px; height:36px; padding:0.3em 0em 0 0;}

         #mob-menu {display:block;}

         .accordion-content h4 {font-size:0.9em;}
         blockquote {margin:16px 20px 28px 20px; font-size:0.95em; color:#444;}
         
         .btn-green {width:90%;}
         .btn i {margin: 0 0.25em 1em -0.1em; font-size:3em;}

      footer ul {text-align:right;}
      footer ul li {display:block; }
      footer ul li:first-child {display:none;}
      footer ul li span {display:inline-block;}

      footer p {font-size:0.85em;}

      .mp-100, .ml-100 {display:block; width:99%;}

   }


   
/* Mobile Portrait
-------------------------------------------------- */
   @media only screen and (max-width: 479px) {

      header, nav {display:none;}

      .page {padding:2em 0 6em 0}


      #site-accordion {
         width:90%;
         min-width:260px;
         max-width:360px;
         }

         /* head */
         #site-head {min-height:5em;}
         #site-head h1, #site-head h2 {padding:0.1em 0.5em;}
            #site-head h1 {top:4.2em; right:0.8em; font-size:0.75em;}
            #site-head h2 {font-size:2em; color:#777;}
         #site-head h2 img {width:85px; height:31px; padding:0.3em 0 0 0;}

         #mob-menu {display:block;}

         /* titles */
         .accordion-title {
            height:4.5em;
            padding:2px 20px 4px;
            background:#dadada;
            border-top:1px solid #cacaca;
            cursor:pointer;
            }
            .accordion-title h3 {font-size:1em;}
            .accordion-title h3 span {
               display:block; 
               font-size:0.75em; font-weight:normal;
               line-height:1.2em;
               }
            .accordion-title h3 i {
               margin:0.2em 1.2em 1em -0.35em; 
               padding:0.5em 0.35em 0.2em 0.35em;   
               }
               .accordion-title h3 i.fa-paper-plane {padding:0.45em 0.45em 0.25em 0.25em;}
 
            .accordion-content h4 {font-size:0.95em;}

         blockquote {margin:16px 20px 28px 20px; font-size:0.95em; color:#444;}


   #contact-form {
      padding:0.75em 0.5em;
      }
      #contact-form input {width:91%;}
      #contact-form textarea {width:95%;}

         .btn-green {width:80%;}
         .btn i {margin: 0 0.25em 1em -0.1em; font-size:3em;}


      footer ul {margin-top:0; text-align:right;}
      footer ul li {display:block; padding:2px 0; font-size:1em;}
      footer ul li:first-child {display:none;}
      footer ul li span {display:inline-block;}

      footer p {font-size:0.85em;}

      .mp-100 {display:block; width:99%;}

   }