/*
=====================================================================
*   Keep It Simple Media Queries
*   url: styleshout.com
*   07-12-2014
/* ================================================================== */


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

        /* header styles
        -------------------------------------------------------------- */
        header h1#logo-text {
                top: 114px;
                left: 18px;
        }
        header h1#logo-text a {
                font: normal 68px Georgia, Serif;
                letter-spacing: -4px;
        }

        /* sidebar
        -------------------------------------------------------------- */
   #sidebar { padding-left: 18px; }

}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

        /* header styles
        -------------------------------------------------------------- */
        header .header-content {
                background: #fff url(img/kringel3b.jpg) no-repeat right top;
                background-size: 330px 234px;
        }
        header h1#logo-text a {
                font: normal 60px Georgia, Serif;
        }
        header p#intro {
                font: 15px/24px 'opensans-light', Georgia, Serif;
                top: 183px;
                left: 30px;
        }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

        /* header styles
        -------------------------------------------------------------- */
        header,
        header .header-content {
                height: 276px;
        }
        header .header-content {
                background: #fff url(img/kringel3b.jpg) no-repeat 50% top;
                padding: 0;
                border: none;
        }
        header h1#logo-text,
        header p#intro {
                width: 100%;
                text-align: center;
                position: static;
        }
        header h1#logo-text { padding-top: 108px;        }
        header h1#logo-text a {
                font: normal 56px Georgia, Serif;
                letter-spacing: -3.5px;
        }
        header p#intro {
                font: 15px/24px 'opensans-light', Georgia, Serif;
        }

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      z-index: 999;
      float: none;
      position: absolute;
      top: 0;
      right: 0;
      border-top: 6px solid #d01526;
   }
   #nav-wrap > a {
      text-align: left;
                border: none;
      font-size: 12px;
      height: 54px;
      line-height: 54px;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;

                float: right;
      position: relative;
      top: 0px;
      right: 36px;
   }
        #nav-wrap  > a:before {
           font-family: 'FontAwesome';
      content: "\f0c9";
      color: #666666;
      margin: 0;
      font-size: 25px;
      line-height: 54px;
      text-align: left;
      display: block;
      float: right;
        }

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 12px 30px 60px 30px;
      margin: 0;
      height: auto;
      display: none;
      clear: both;
      /*width: auto; */
      width: 100%;

      float: none;
      position: relative;
      top: 0;
      right: 0;
   }

   /* display toggle buttons */
        .no-js #nav-wrap:not( :target ) > a:first-of-type,
        .no-js #nav-wrap:target  > a:last-of-type  {
           display: block;
        }
   .js #nav-wrap a { display: block; }

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target ul#nav  {
      display: block;
   }

        /* remove float left on 1st level list items */
        ul#nav > li { float: none; }

   ul#nav > li {
      display: block;
      height: auto;
      text-align: left;
      border-bottom: 1px dotted #D3D5DA;
      padding: 6px 0;
   }
   ul#nav > li:first-child {
                border-top: 1px dotted #D3D5DA;
   }

   ul#nav li a {
      display: block;
      width: auto;
      padding: 0;
      padding: 12px 0;
      line-height: 16px; /* reset line-height from 40px */
      border: none;
   }
   ul#nav li.current > a {
           background: none;
           border-radius: none;
           border: none;
           padding: 12px 0;
           color: #111;
   }

   ul#nav li.has-children > a:after {
                content: "+";
                display: inline;
                padding-left: 8px;
                color: #d00518;
                font-weight: bold;
                font-size: 18px;

                position: absolute;
                right: 10px;
                top: 15px;
        }

   /* sub menu         */
        ul#nav ul {
                position: static; /* change position to static */
                border-radius: none;
                border: none;
                padding-bottom: 0;
        }

        /* sub menu anchor links */
        ul#nav ul li a { padding: 6px 15px 6px 8px; }

        /* on hover */
        ul#nav li.has-children:hover > a:after { content: "-"; }

        /* content
        -------------------------------------------------------------- */
        #content-wrap { padding-top: 0; }
        #content-wrap  #main { padding-right: 30px;}

        .page h2,
        .entry h2,
        .entry h2 a {
                font: 28px/36px 'opensans-semibold', sans-serif;
                letter-spacing: -.5px;
        }

        .entry h2,
        .entry .entry-meta,
        .page h2 {
                text-align: center;
        }

        /* sidebar
        -------------------------------------------------------------- */
        #sidebar { padding-left: 30px; }

        /* categories */
        #sidebar .widget_categories ul {        margin-bottom: 12px;        }
        #sidebar .widget_categories ul li {
                display: inline-block;
                margin-right: 6px;
        }

        /* entry
        -------------------------------------------------------------- */
        .entry .entry-meta ul { margin-top: 9px; }
        .entry .entry-meta ul li { }

        /* tags */
        .tags { text-align: center; }

        /* post-nav */
   .post-nav { margin-top: 18px; }
   .post-nav li {
      display: block;
      margin: 0 0 18px 0;
      width: 100%;
   }
   .post-nav li.next {
      float: none;
      text-align: center;
   }
   .post-nav li.prev {
      float: none;
      text-align: center;
   }

   /* Comments */
   #comments h3 {
      text-align: center;
      margin-left: 0;
   }

   /* Comments List */
   ol.commentlist {
      width: 100%;
      margin-left: 0;
   }
   .commentlist > li { padding-left: 0; }
   .commentlist  li .avatar { display: none; }

   /* comment form */
   #comments form {
           margin-left: 0;
                border-bottom: 1px solid #E8E8E8;
   }
   #comments form input,
   #comments form textarea,
   #comments form select,
   #comments form label {
      width: 100%;
      float: none;
   }
   #comments form label { padding-left: 0; }
   #comments form div { margin-bottom: 0; }
   #comments form input { margin-bottom: 0; }
   #comments form .message label { display: block; }
   #comments form button.submit { width: 100%; }

   /* page navigation */
   .pagenav { text-align: center; }


        /* page
        -------------------------------------------------------------- */
   .page { border-bottom: 1px solid #E8E8E8; }


        /* footer
        -------------------------------------------------------------- */
        footer .social-links { margin-bottom: 36px; }
        footer .social-links li {
                font-size: 28px;
                line-height: 42px;
                margin: 0 8px;
        }
        footer .navigate { margin-bottom: 30px; }
        footer .navigate li {
                display: inline-block;
                margin-right: 18px;
                line-height: 30px;
        }
        footer .copyright {
                border-top: 1px solid #DFDBDB;
                padding: 24px 30px 6px 30px;
        }

         /* Go To Top Button */
        #go-top { right: 20px; }
        #go-top a {
                width: 42px;
                height: 42px;
                line-height: 42px;
        }

}


/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

        /* header styles
        -------------------------------------------------------------- */
        header h1#logo-text { padding-top: 105px;        }
        header h1#logo-text a {        font: normal 52px Georgia, Serif; }
        header p#intro { font: 14px/24px 'opensans-light', Georgia, Serif; }

        /* mobile navigation
   --------------------------------------------------------------- */
        #nav-wrap > a { right: 30px; }
   #nav-wrap { width: 100%; }
   #nav-wrap ul#nav { width: 100%; }

}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) {

        /* header styles
        -------------------------------------------------------------- */
        header,
        header .header-content {
                height: 260px;
        }
        header .header-content {
                background: #fff url(img/kringel3a.jpg) no-repeat 50% top;
                background-size: 300px 213px;
        }
   header h1#logo-text a {
                font: normal 46px Georgia, Serif;
        }
        header p#intro {
                font: 13px/24px 'opensans-light', Georgia, Serif;
        }

        /* content
        -------------------------------------------------------------- */
        #content-wrap { margin-top: -24px; }

}

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

   #nav-wrap ul#nav { display: block !important; }

}