/*
Theme Name: Silent Earth
Theme URI: http://www.silentearth.org/
Description: Bespoke Theme built using Bootstrap 3 for Silent Earth
Author: Elms Creative
Author URI: http://www.elmscreative.com/
Version: 1.0
*/

/* ==========================================================================
   Layout
   ========================================================================== */
   
   @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,300,700);
   @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic);

   html, body { height:100%; }
   html { overflow:auto; background:none; background-size:cover; background-attachment:fixed; }
   body { font:62.5%/1.5 "Open Sans", Arial, Helvetica, sans-serif; color:#303030; background:none; -webkit-font-smoothing:antialiased; background-color:#4c4f53; background:url('img/gradient1.svg') 75% 110% no-repeat fixed, url('img/gradient2.svg') -20% -10% no-repeat fixed, url('img/gradient3.svg') 120% 0% no-repeat fixed, -webkit-linear-gradient(130deg, rgba(75,60,80,0) 60%,  #4a434f 100%) 0 0 fixed, -webkit-linear-gradient(top, #83a7ab 0%,#23263c 100%) 0 0 fixed; background:url('img/gradient1.svg') 75% 110% no-repeat fixed, url('img/gradient2.svg') -20% -10% no-repeat fixed, url('img/gradient3.svg') 120% 0% no-repeat fixed, linear-gradient(130deg, rgba(75,60,80,0) 60%,  #4a434f 100%) 0 0 fixed, linear-gradient(to bottom, #83a7ab 0%,#23263c 100%) 0 0 fixed; background-size:100% 1800px, 1400px 1400px, 1600px 1600px, 100% 100%, 100% 100%, 100% 100%; }

   img { max-width:100%; }

   h1, h2, h3, h4 { margin:0 auto 12px; padding:0; color:#0674a6; font-family:"Playfair Display", Arial, Helvetica, sans-serif; text-transform:none; }
   h1 { font-size:4em; }
   h2 { font-size:3em; }
   h3 { font-size:2em; }
   h4 { font-size:1.6em; }

   hr { width:100%; height:1px; padding:0; margin:10px 0; border-top:#DADEE1 1px dotted; border-bottom:none; border-left:none; border-right:none; }

   p { margin:0 0 12px; font-size:2.2em; line-height:1.6; font-weight:normal; text-align:justify; }
   span { color:#49abd8; }
   small { font-size:2em; display:block; font-weight:bold; font-style:italic; }
   address { font-size:2em; }
   blockquote { padding:0; margin:0; font-style:italic; font-size:1.3em; line-height:1.8; border:none; }
   code { padding:2px 4px; color:#c7254e; background-color:#f9f2f4; border-radius:4px; font-size:0.9em; white-space:normal; }

   form { width:100%; height:auto; position:relative; margin:0; padding:0; display:block; overflow:hidden; }
   label { color:#fff; font-size:2.1em; display:block; text-align:left; margin:10px 0; padding:0; clear:both; }
   input[type=text], input[type=url], input[type=email], input[type=tel], textarea { width:100%; padding:5px; margin:0px 0px 4px; font-size:2em; border:#ccc 1px solid; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }
   input[type=checkbox] { margin:0; }
   input[type=file] { margin:5px 0 0; }
   select { width:100%; padding:2px 6px; color:#b7b7b7; font-size:2.3em; height:32px; -webkit-appearance:none; appearance:none; border:#ccc 1px solid; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }
   textarea { width:100%; min-height:125px; max-height:125px; padding:5px; margin:0 0 10px; font-size:2em; border:#a9a9a9 1px solid; }
   input[type=submit], button { width:100%; display:inline-block; padding:6px 12px; margin:0 0 4px; color:#fff !important; font-size:1.8em; font-weight:normal; text-transform:uppercase; line-height:1.428571429; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; border:0px solid transparent; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; background:#262626; }
   input[type=submit]:hover, button:hover { color:#49abd8 !important; background:#383838; }

   .btn { width:100%; display:inline-block; padding:6px 12px; margin:0 0 4px; color:#fff !important; font-size:1.8em; font-weight:normal; text-transform:uppercase; line-height:1.428571429; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; border:0px solid transparent; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; background:#262626; }
   .btn:hover { color:#49abd8 !important; background:#383838; }

   .alignleft { float:left; margin:0 10px 10px 0; border:none; }
   .alignright { float:right; margin:0 10px 0 10px; border:none; }
   .aligncenter { float:none; margin:10px auto; display:block; border:none; }

   .padded { padding:6px 12px; }
   .no-padding { padding:0px !important; }
   .no-margin { margin:0px; }
   .no-bullets { list-style:none; }

   .gap-ext2 { display:block; position:relative; margin:60px 0; clear:both; overflow:hidden; }
   .gap-ext { display:block; position:relative; margin:30px 0; clear:both; overflow:hidden; }
   .gap { display:block; position:relative; margin:15px 0; clear:both; overflow:hidden; }
   .gap-mini { display:block; position:relative; margin:8px 0; clear:both; overflow:hidden; }
   .gap-very-mini { display:block; position:relative; margin:4px 0; clear:both; overflow:hidden; }

/* ==========================================================================
   Structure
   ========================================================================== */

   #wrap { min-height:100%; height:auto; margin:20px auto; padding:20px 0; }

   header { width:100%; height:auto; padding:15px; color:#4a4c4f; overflow:hidden; background:#26292c; }

   section#content { width:100%; height:auto; padding:10px 0px; margin:0 auto; overflow:hidden; background:#fff; }

   footer { width:100%; height:auto; margin:0; padding:15px; box-sizing:border-box; }
   footer p { margin:0; font-size:1.9em; color:#fff; }

/* ==========================================================================
   Links & Nav
   ========================================================================== */

   a { text-decoration:none; -moz-transition:color 0.1s linear 0.1s; -webkit-transition:color 0.1s linear 0.1s; -o-transition:color 0.1s linear 0.1s; transition:color 0.1s linear 0.1s; }
   a:hover { text-decoration:none; }
   a:active, a:visited, a:link { color:#0674a6; }
   a:hover { color:#49abd8; }
   a[href^=tel]:link { color:inherit; text-decoration:none; }

   .navbar-collapse { padding:0 !important; }
   .navbar-toggle { float:none !important; position:relative; padding:8px 10px; margin:0px auto; background-color:transparent; border:1px solid #fff; border-radius:4px; }

   #primary { width:100%; height:auto; margin:0 auto; padding:0px; list-style:none; overflow:hidden; }
   #primary li { width:auto; height:auto; margin:0px 2px; padding:0; display:inline-block; }
   #primary li a { margin:0; padding:6px 14px; color:#fff; font-size:2.2em; text-align:center; text-transform:capitalize; position:relative; z-index:100; }
   #primary li a:hover { color:#83d6df; background:none; }
   #primary li.active a, #primary li.active a { -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; background-color:#3e4145; color:#83d6df; }

/* ==========================================================================
   Misc
   ========================================================================== */

   .post { padding:0px; }
   #hLine { border-right-width:1px; border-right-style:solid; border-right-color:#999; }

   #content ul, #content ol { width:94%; height:auto; margin:10px auto 20px; padding:0 0 0 20px; overflow:hidden; }
   #content ul li, #content ol li { font-size:2.2em; line-height:1.6; }

   #content ol.commentlist { width:100%; }
   #content ol.commentlist li.comment { margin:0 0 22px; }
   .commentlist li p { font-size:inherit; font-style:italic; }
   .comment-author { float:left; padding:0 12px 0 0; }
   .comment-meta { margin:0 0 12px; }

   .recent-comments { list-style:none; font-size:0.9em !important; }
   .recent-comments li { overflow:hidden; padding:10px 6px; border-top:1px dotted #DADEE1; }
   .recent-comments li:first-child { border:0 none; }
   .recent-comments img { float:left; margin-right:8px; } 
   .recent-comments a { display:block; margin-top:5px; padding-top:5px; font-size:1.9em; text-transform:uppercase; } 

   #categories { padding:0 !important; list-style:none; }
   #categories li { margin:0 0 8px !important; }
   #categories li a:active, #categories li a:visited, #categories li a:link { color:#202020 !important; }
   #categories li a:hover { color:#444 !important; }

   #linky { padding:0 !important; list-style:none; }
   #linky li { margin:0 0 8px !important; }
   #linky li a:active, #linky li a:visited, #linky li a:link { color:#202020 !important; }
   #linky li a:hover { color:#444 !important; }

   .post-content .post-message p { line-height:21px; margin:0 0 15px; color:#000; }
   .single-title { font-size:7em; color:#000; }

   #social #reply-title { font-size:2em; }
   #social .must-log-in { font-size:2em; }

   iframe { text-align:center; display:block; margin:10px auto 30px; }
   .bottomcontainerBox div iframe { margin:0px auto !important; }
   .at4-follow .at4-follow-container .at-follow-label { color:#fff !important; }

   .wp-caption { max-width: 100%; }

/* ==========================================================================
   WP=PageNavi
   ========================================================================== */
   
   .wp-pagenavi { width:100%; height:auto; clear:both; text-align:center; }
   .wp-pagenavi a, .wp-pagenavi span { padding:5px 10px; margin:2px; font-size:1.7em; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; border:1px solid #999; }
   .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color:#999; }
   .wp-pagenavi span.current { font-weight:bold; }
   .wp-pagenavi span.extend { display:none; }

/* ==========================================================================
   Media Queries: iPhone
   ========================================================================== */

   /* iPhone 2G-4S in landscape */
   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {

   }

   /* iPhone 2G-4S in portrait */
   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {

   }

   /* iPhone 5 in landscape */
   @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {

   }

   /* iPhone 5 in portrait */
   @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {

   }

/* ==========================================================================
   Media Queries: iPad
   ========================================================================== */

   /* iPad [landscape] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      body { font-size:80% !important; -webkit-text-size-adjust:80% !important; -ms-text-size-adjust:80% !important; }
   }

   /* iPad [portrait] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      body { font-size:80% !important; -webkit-text-size-adjust:80% !important; -ms-text-size-adjust:80% !important; }
      #primary li { margin:0 2px; }
      #primary li a { padding:6px 8px; font-size:2em; }
   }

   /* iPad 3/4 [landscape] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
      body { font-size:80% !important; -webkit-text-size-adjust:80% !important; -ms-text-size-adjust:80% !important; }
   }

   /* iPad 3/4 [portrait] */
   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
      body { font-size:80% !important; -webkit-text-size-adjust:80% !important; -ms-text-size-adjust:80% !important; }
      #primary li { margin:0 2px; }
      #primary li a { padding:6px 8px; font-size:2em; }
   }

/* ==========================================================================
   Bootstrap Queries
   ========================================================================== */
   
   @media (min-width: 320px) and (max-width: 767px) {
      body { background:#4c4f53; }
      header { padding:8px; }
      #hLine { border-right-width:0px; border-right-style:solid; border-right-color:#999; }
      #primary li, #primary li a { float:left; width:100%; margin:0; display:block; }
      footer { padding:8px; }
      footer p.credit { font-size:1.8em; text-align:center; }
      footer p.copy { font-size:1.8em; text-align:center; }
   }

   @media (min-width: 768px) and (max-width: 992px) {
      #hLine { border-right-width:0px; border-right-style:solid; border-right-color:#999; }
      #primary li { margin:0 2px; }
      #primary li a { padding:6px 10px; font-size:1.9em; }
      footer p.credit { text-align:left; }
      footer p.copy { text-align:right; }
   }

   @media (min-width: 993px) and (max-width: 1200px) {
      #primary li { margin:0 2px; }
      #primary li a { padding:6px 10px; font-size:2em; }
      footer p.credit { text-align:left; }
      footer p.copy { text-align:right; }
   }

   @media (min-width: 1201px) {
      footer p.credit { text-align:left; }
      footer p.copy { text-align:right; }
   }

/* ==========================================================================
   Print
   ========================================================================== */

   @media print {
    * { background:transparent !important; color:#000 !important; 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; }
     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; }
  }