/*
Theme Name: Paperback Child Theme
Theme URI: https://arraythemes.com/themes/paperback-wordpress-theme/
Author: Array
Author URI: https://arraythemes.com/
Description: Paperback is a magazine-style theme that empowers you to quickly and easily create beautiful, immersive content with images, galleries, video, audio and more. Make your content even more engaging and discoverable with the featured post carousel and category mega menu.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paperback
Template: paperback
Domain Path: /languages/
Tags: light, white, one-column, two-columns, three-columns, fluid-layout, responsive-layout, custom-colors, custom-menu, editor-style, featured-images, infinite-scroll, theme-options, translation-ready, post-slider, blog, photography, magazine, news, photoblogging, clean, minimal, modern, design, art, simple, travel, professional, contemporary, site-logo

(C) 2015 Array, Inc.
*/

/*************************************************************
                          CUSTOM CSS
                  Elson Ponte - sevenscope.co
--------------------------------------------------------------
NOTES FOR DEVELOPERS:
- I use "tabs of 2 spaces" (use it for best reading experience)
--------------------------------------------------------------
  1   - Style the expandable grid
  1.1 - Mobile grid
  1.2 - Desktop grid
  2   - Style the expanded post
  3   - Style the single post
  4   - Hide the sidebar
  5   - Make the loop use full width
  6   - Fix the body background color
--------------------------------------------------------------
  1   - Style the expandable grid
-------------------------------------------------------------*/
body.two-column .grid-wrapper {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

body.two-column .post {
  margin-bottom: 0;
  display: block;
  border-bottom: 0px !important;
  border-top: 0px !important;
}

/* Style the title */
body.two-column .post .entry-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px;
  line-height: 32px;
  font-weight: 900;
}

body.two-column .post .entry-title a { 
  color: #000000;
}

/* Style the excerpt */
body.two-column .expandable-grid .grid-text-excerpt {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #777777;
}

body.two-column .expandable-grid .grid-text-excerpt p {
  margin-bottom: 15px;
}

body.two-column .post:not(:first-child)::before {
  width: 100%;
  display: inline-block;
  height: 1px;
  background-color: #ececec;
  position: relative;
  content: "";
}

body.two-column .clearfix {
  clear: both;
}

body.two-column .readmorebutton {
  background-position: 12px 12px;
  font-weight: normal;
  text-align: center;
  width: 140px;
  margin: 0;
  background-color: #ededed;
  padding: 8px 8px 8px 24px;
  border-radius: 3px;
  margin-bottom: 15px;
  background-image: url(images/arrow-down.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Style the date and read time */

body.two-column .grid-date {
  font-size: 15px;
  color: #777777;
}

/*------------------------------------------------------------
  1.1 - Mobile grid
-------------------------------------------------------------*/
@media screen and (max-width: 800px) {
  body.two-column .post:not(:first-child)::before {
    top: -26px;
  }
}

/*------------------------------------------------------------
  1.2 - Desktop grid
-------------------------------------------------------------*/
@media screen and (min-width: 801px) {
  body.two-column .expandable-grid .title-wrapper,
  body.two-column .expandable-grid .grid-thumb-image {
    display: block;
    float: left;
    width: 30%;
  }

  body.two-column .expandable-grid .grid-text-excerpt {
    width: 40%;
    display: block;
    float: left;
  }

  body.two-column .expandable-grid .title-wrapper,
  body.two-column .expandable-grid .grid-text-excerpt {
    padding-right: 20px;
  }

  body.two-column .expandable-grid .grid-thumb-image {
    margin-bottom: 0;
  }

  body.two-column .post:not(:first-child)::before {
    top: -28px;
  }

  body.two-column .expandable-grid .grid-text-excerpt p:last-child {
    margin-bottom: 0;
  }
}

/*------------------------------------------------------------
  2   - Style the expanded post
-------------------------------------------------------------*/
body.two-column .hidden {
  display: none;
}

body.two-column .expandable-grid.expanded {
  display: none;
}

/* Style the expanded post header */
body.two-column .full-post .entry-header {
  margin-bottom: 15px;
}

body.two-column .full-post .entry-title {
  max-width: 90%;
}

body.two-column .full-post .grid-date {
  margin-top: 10px;
}

/* Design the close button */
body.two-column .readlessbutton {
  position: absolute;
  top: 10px;
  right: 10px;
}

body.two-column .readlessbutton span {
  width: 50px;
  height: 50px;
  background-color: #96B7FF;
  border-radius: 100%;
  margin-bottom: 15px;
  cursor: pointer;
  display: block;
  position: relative;
}

body.two-column .readlessbutton span svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

/* Style the expanded content */
body.two-column .full-post .entry-content {
  font-size: 16px;
  color: #000000;
}

body.two-column .full-post .entry-content .sharedaddy  {
  display: none;
}

/*------------------------------------------------------------
  3   - Style the single post
-------------------------------------------------------------*/

.single-post-date {
  margin-bottom: 15px;
}

/*------------------------------------------------------------
  4   - Hide the sidebar
-------------------------------------------------------------*/

#secondary.widget-area { display: none; }

/*------------------------------------------------------------
  5   - Make the loop use full width
-------------------------------------------------------------*/

#primary.content-area {
  width: 90%;
  margin: 0 auto;
  display: block;
}

/*------------------------------------------------------------
  6   - Fix the body background color
-------------------------------------------------------------*/

body {
  background-color: #f5f5f6;
}