/*
Theme Name: Laika Loves Lassie
Theme URI: http://underscores.me/
Author: Laika Loves Lassie
Author URI: http://laikaloveslassie.com
Description: A custom theme by Laika Loves Lassie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: laikaloveslassie
Tags:
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# General
#
--------------------------------------------------------------*/





/*------------------------------------------------------------------------------
# Stories Animated Title
------------------------------------------------------------------------------*/


.stories-title-container {
  font-size: 85px;
	letter-spacing: 0.2px;
  animation-name: text-animation;
  animation-duration: 1000s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
}




.stories-title-container span.outline-font {
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: #000;
  color: transparent;
}


.stories-title-container span.hero-icon {
  -webkit-text-stroke-width: 1.2px;
  font-size: 60px;
  position: relative;
  top: -5px;
  display: inline-block;
  transform: scale(.65, 1);
}



/*------------------------------------------------------------------------------
# Story Item
------------------------------------------------------------------------------*/



.story-item-text-container .story-title {
	font-size: 21px!important;
	line-height: 28px;
	letter-spacing: 0.5px;
}


.story-item-text-container .story-subtitle {
	font-size: 16px!important;
	line-height: 22px;
}

.story-item-text-container .story-excerpt {
	font-size: 16px!important;
	line-height: 22px;
	letter-spacing: 0.9px;
}




/*------------------------------------------------------------------------------
# Story Filter
------------------------------------------------------------------------------*/


.storyfilter-button {
  margin-bottom: 30px;
  margin-top: 50px;
  color: #E6845B;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.storyfilter-button::before {
  font-family: "Font Awesome 5 Pro";
  content: '\f067';
  font-weight: 300;
  margin-right: 10px;
}

.storyfilter-button span:hover { text-decoration: underline; }


.storyfilter-button.active::before {
  content: '\f068';
}


.storyfilter-container {
  clear: both;
  display: none;
  margin-bottom: 30px;
  padding-top: 50px;
  padding-bottom: 20px;
}

.storyfilter-container input {
  border: 0;
  background-color: #e5e5e5;
  text-transform: uppercase;
  padding: 10px 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  width: 300px;
  position: relative;
  z-index: 1;
}

.storyfilter-container h3 {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 21px;
  margin-top: 40px;
  margin-bottom: 26px;
  margin-left: 2px;
}

.story-tag:hover {
  text-decoration: underline;
  cursor: pointer;
}

.active-tag {
  color: #E6845B;
}

.active-tag:hover {
  text-decoration: line-through;
}


.tag-element {
  position: relative;
  z-index: 1;
}

.all-tags {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: transparent;
  z-index: 3;
  min-height: 24px;
  cursor: pointer;
}



.ui-group {
  margin-bottom: 30px;
}

.filters {
  margin-left: -15px;
  width: calc(100% + 15px);
}

.filters .term-filter {
  background: transparent;
  outline: 0;
  color: #191919;
  display: inline-block;
  border: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.filters .term-filter:hover,
.filters .term-filter.is-checked {
  color: #E6845B;
}




.grid-item.blog-post-container-element {
  margin-bottom: 50px;
  padding-top: 15px;
  transition: background-color 0.3s;
  background-color: transparent;
}

.grid-item.blog-post-container-element:hover {
  background-color: #f7f7f7;
  transition: background-color 0.3s;
}

.grid-item-link {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.grid-item img,
.grid-item .story-title,
.grid-item .story-subtitle,
.grid-item .story-excerpt {
  pointer-events: none;
}

/*------------------------------------------------------------------------------
# Single Story
------------------------------------------------------------------------------*/


.tag-element {
  display: inline;
}

.tag-element::after { content: ', ';}

.tag-element:last-child::after { content: '';}



.social-sharing-container {
  padding: 20px 15px 30px;
  margin-bottom: 80px;
}

.social-sharing-container h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.social-sharing-container a

/*------------------------------------------------------------------------------
# Custom Pagination
------------------------------------------------------------------------------*/



.custom-pagination span,
.custom-pagination a {
    display: inline-block;
    height: 36px;
    width: 36px;
    line-height: 30px;
}



.custom-pagination a {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid transparent;
}


.custom-pagination > a.prev.page-numbers,
.custom-pagination > a.next.page-numbers { display: none!important; }


.custom-pagination a:hover {
    color: #000000;
    border: 2px solid #000;

}



.custom-pagination span.page-num {
    margin-right: 10px;
    padding: 0;
}



.custom-pagination span.dots {
     padding: 0;
}



.custom-pagination span.current {
    color: #000000;
    border: 2px solid #000;

}