/*-----------------------------------------------------------
  LOOP TYPE: COLUMNS
-------------------------------------------------------------

/*-----------------------------------------------------------
  TABLE OF CONTENTS:
-------------------------------------------------------------
 Backgrounds, colors and icons
  Backgrounds, colors and icons ----------> viewport 800px
 Loop
   Post
   Output posts
     Posts -> meta menu
     Posts -> title
     Sticky post
   Loop type -> columns
   Posts ----------> viewport 1023px
   Posts ----------> viewport 800px
   Posts ----------> viewport 600px
 Site pagination
   Site pagination ----------> viewport 1023px
-----------------------------------------------------------*/


/*-----------------------------------------------------------
 
IMPORTANT!

Any changes made to this or any other of the theme's files 
will be lost at the next update.

To safely make customizations to the theme, for CSS-only 
consider using the theme's dedicated "Custom CSS" field 
found under the Miscellaneous section of the theme 
settings page;
-----------------------------------------------------------*/


/*-----------------------------------------------------------
  Hover and Color: Effects
-------------------------------------------------------------


/* Backgrounds, colors and icons  Desktop
------------------------------------------------------------*/
.news-block__meta-list {
  color: var(--white)
}

.post-text__page-category-mobile,
.loop-page-category__links {
  color: var(--red2);
}

.post .post-text__page-category-mobile a,
.post .post-text__page-category a,
.page .post-text__page-category-mobile a,
.page .post-text__page-category a {
  color: var(--red2);
}

.post:hover .loop-page-category__links,
.post:hover .post-text__page-category-mobile a,
.post:hover .post-text__page-category a,
.page:hover .loop-page-category__links,
.page:hover .post-text__page-category-mobile a,
.page:hover .post-text__page-category a {
  color: var(--black2);
}

.post .post-text__page-category-mobile a:hover,
.post .post-text__page-category a:hover,
.page .post-text__page-category-mobile a:hover,
.page .post-text__page-category a:hover {
  color: var(--red2);
  text-decoration: 0
}

.loop__tag-icon {
  position: relative;
  top: 7px;
  float: left;
  margin-right: 5px;
  width: 12px;
  height: 17px
}

.loop__tag-icon .flag-icon {
  border-radius: 2px;
  background-color: var(--red2)
}

.loop__tag-icon .flag-triangle-bottom-icon {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 4px solid var(--white)
}

.post:hover::before,
.page:hover::before {
  display: none
}

.post-title__h2-headline a,
.post-text__description p {
  color: var(--black2);
}

.post:hover .loop__tag-icon .flag-icon,
.page:hover .loop__tag-icon .flag-icon {
  background-color: var(--red)
} 

.post-item-content__category a {
  color: var(--black2);
}

.post-item-content__category a:hover {
  color: var(--red2)
}

.post-item-content__title .post-title-link__headline {
  color: var(--black2);
}

.post-item-content__meta-menu {
  color: var(--black2);
  fill: var(--black2);
}

.posts-meta-views__svg-icon,
.posts-meta-views__counter,
.posts-by-cat-meta-list__comments,
.posts-meta-comments__svg-icon,
.posts-meta-comments__counter {
  color: var(--black2);
}

.svg-icon__soc-share {
  fill: var(--black2);
}

.soc-share-icon__svg {
  fill: var(--white)
}


/* Backgrounds, colors and icons  viewport 800px
------------------------------------------------------------*/

@media screen and (min-width:1px) and (max-width:800px) {
  .news-block__meta-list {
    background-color: transparent;
    color: var(--black2);
  }
  .news-block__meta-list li .post-views__icon,
  .news-block__meta-list li .post-views__count-value,
  .news-block__meta-list li .post-comments__icon,
  .news-block__meta-list li .post-comments__count-value {
    color: var(--black2);
  }
 
  .news-block__meta-list svg {
    fill: var(--black2);
  }
  .soc-share-icon__svg {
    fill: var(--white);
    background: 0;
  }
  .loop-type__list .post,
  .loop-type__list .page {
    border-top: 1px solid var(--grey3);
    background-color: var(--grey3);
  }
  .post .post-image__svg-post-thumbnail,
  .page .post-image__svg-post-thumbnail {
    border-top: 1px solid var(--grey6);
    border-bottom: 1px solid var(--grey6);
  }
  .mob-icon-block__prev,
  .mob-icon-block__next {
    background-color: var(--red);
  }
  .mob-icon-block__prev .icon-arrow__prev,
  .mob-icon-block__next .icon-arrow__next {
    fill: var(--white)
  }
}

/*  If posts have no thumbnails
------------------------------------------------------------*/

.post-thumbnail__svg-background-icon .svg-background-icon {
	background-size: 130px;
  -webkit-background-size: 130px;
  -o-background-size: 130px
}


/*------------------------------------------------------------
# Loop
------------------------------------------------------------*/

.site-layer__middle {
  display: inline-block;
  margin: 0 auto 20px;
  width: 100%
}

.content-block__site-content {
  display: inline-block;
  vertical-align: top;
  float: left
}

.content-block__site-content.content-width {
  margin: 0 .5% 0 0;
  width: 100%;
  max-width: 71.3%
}

.content-block__site-content.full-width {
  margin: 0 auto;
  width: 100%
}

.site-last-content__news-block {
  position: relative;
  width: 100%;
  overflow: hidden
}



/*  Posts -> pages styles
------------------------------------------------------------*/

.post .post-text__page-category-mobile,
.page .post-text__page-category-mobile {
  display: none
}

.post-text__page-category-mobile,
.loop-page-category__links {
  font-size: 11px;
  font-weight: bold
}

.post .post-text__page-category-mobile a,
.post .post-text__page-category a,
.page .post-text__page-category-mobile a,
.page .post-text__page-category a {  
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: bold;
  line-height: 25px;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  text-transform: uppercase;
  text-decoration: 1px underline;
}


.article-post-grid__news-block .post-text__title {
  margin-top: 25px
}


/*  Posts -> meta menu
------------------------------------------------------------*/

.news-block__meta-list svg {
  width: 17px;
  height: 14px;
  margin-right: 5px  
}

.news-block__meta-list .post-views-icon__svg {
  width: 16px;
  height: 16px
}

.news-block__meta-list li {
  display: inline-block;
  margin-right: 10px;
  overflow: hidden;
  font-size: 0.001px;
  font-weight: bold;
  line-height: 25px;
  letter-spacing: 0px
}


.news-block__meta-list li .post-comments__icon,
.news-block__meta-list li .post-comments__count-value {
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: 14px;
  line-height: 16px;
  font-size: 12px;
  font-weight: bold
}

.news-block__meta-list li .post-comments__icon {
  margin: 2px 5px 0 0 
}

.news-block__meta-list li .post-views__count-value::after {
  content: '';
  min-width: 1px
}


/*  Posts -> title
------------------------------------------------------------*/
.post-title__h2-headline {
  position: relative;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -1px;
  -ms-word-wrap: break-word;
  word-wrap: break-word
}

.news-block__image-link:hover .post-title__h2-headline {
  text-decoration: 2px underline
}

.page .post-title__h2-headline {
  margin-top: 28px
}

.post-title {
  margin-top: 8px;
  overflow: hidden
}

.post-text__description p {
  position: relative;
  font-size: var(--fontSize);
  font-weight: 400;
  line-height: 1.5
}


/*  Posts -> sticky post
------------------------------------------------------------*/
.sticky::before,
.sticky:hover::before {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 21px;
  height: 24px;
  content: '';
  z-index: 2;
  background: url("images/sprite.svg#sticky-post-lt") no-repeat;
	background-size: 63px;
  -webkit-background-size: 63px;
  -o-background-size: 36px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-position: -10px -6px;
}


 
/*  Posts -> site pagination
------------------------------------------------------------*/
.page-navigation__list {
  display: table;
  width: 100%;
  max-width: 1100px;
  margin: 30px auto
}
.page-navigation__list .page-numbers {
  padding: 0 var(--fontSize);
  font-size: 32px;
  font-weight: bold;
  line-height: 25px;
  border-radius: 3px;
  color: var(--black2);
}
.page-navigation__list .page-numbers:hover {
  color: var(--red);
}
.page-navigation__list .next,
.page-navigation__list .prev {
  display: none
}
.page-navigation__list .current {
  color: var(--white);
  border-top: 1px solid var(--red4);
  border-bottom: 1px solid var(--red4);
  background: linear-gradient(to left, var(--red4), var(--red));
  border-radius: 3px;
}
.page-navigation__list .current:hover {
  color: var(--white)
}


/*  Site pagination ----------> viewport 1023px 
------------------------------------------------------------*/
@media all and (min-width:1px) and (max-width:1023px) {
  .page-navigation__list {
    width: auto;
    text-align: center;
    line-height: 70px
  }
}


/*------------------------------------------------------------
# Loop type -> columns
------------------------------------------------------------*/

.loop-type__columns {
  margin: 0 auto;
  width: 100%
}

.loop-type__columns .post,
.loop-type__columns .page {
  display: inline-block;
  vertical-align: top;
  float: left;
  position: relative;
  margin: 0 0 40px 0;
  min-height: 420px;
  height: 100%;
  width: 49.4%;
  transition: 0
}

.loop-type__columns .article-post-grid__news-block {
  position: relative
}

.loop-type__columns .post:nth-child(even),
.loop-type__columns .page:nth-child(even) {
  margin-left: 4.5px
}

.loop-type__columns .post:nth-child(odd),
.loop-type__columns .page:nth-child(odd) {
  margin-right: 4.5px;
  clear: both
}

.loop-type__columns .news-block__image-link {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.8
}

.loop-type__columns .news-block__image-link:hover .site-last-content__post-text {
  background-color: var(--grey)
}

.loop-type__columns .news-block__dark-background-hover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  z-index: 1;
  width: 100%;
  height: 300px;
  border-radius: 3px;
  background-color: var(--black)
}

.loop-type__columns .post:hover .news-block__dark-background-hover,
.loop-type__columns .page:hover .news-block__dark-background-hover {
  display: block
}

.loop-type__columns .news-block__image {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 300px;
  max-height: 300px;
  width: 100%;
  overflow: hidden
}

.loop-type__columns .news-block__post-image {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 300px;
  max-height: 300px;
  height: 300px;
  width: 100%;
  overflow: hidden;
	background-size: 2px;
  -webkit-background-size: 2px;
  -o-background-size: 2px;
  border-radius: 3px;
  background: var(--grey3)
}

.loop-type__columns .news-block__image-link:focus,
.loop-type__columns .news-block__image-link:active {
  padding: 0
}


.loop-type__columns .news-block__post-image img {
  position: absolute;
  margin: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: unset  
}

.loop-type__columns .svg-background-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 78px;
  width: 78px;
  background: url("images/sprite.svg#cover-lt") no-repeat;
	background-size: 132px 130px;
  -webkit-background-size: 132px 130px;
  -o-background-size: 132px 130px;
  background-position: 0 1px;
  background-color: transparent;
}

.loop-type__columns .news-block__meta-list {
  position: absolute;
  bottom: 0;
  left: var(--fontSize);
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  width: auto;
  height: 14px;
  font-size: 0.001px;
  letter-spacing: -4px
}

/* White Comment Icon */
.loop-type__columns .comment-icon::before {
  background-color: var(--white);
}

.loop-type__columns .comment-icon::after {
  border-color: var(--white) transparent transparent transparent;
}


.loop-type__columns .news-block__meta-list li {
  color: var(--white)
}


.loop-type__columns .post:hover .news-block__meta-list,
.loop-type__columns .page:hover .news-block__meta-list {
  bottom: 25px;
  opacity: 1;
  visibility: visible
}

.loop-type__columns .news-block__meta-list .post-meta-list__post-views {
   display: none; 
}

.loop-type__columns .post-image__svg-post-thumbnail {
  position: relative;
	background-size: 100px;
  -webkit-background-size: 100px;
  -o-background-size: 100px;
  height: 100%;
  width: 100%;
  font-size: 0.001px
}

.loop-type__columns .site-last-content__post-text {
  padding: 0 0 0 1px
}

.loop-type__columns .post-text__page-category-mobile,
.loop-type__columns .post-text__page-category {
  padding: 0 0 0 1px;
  min-height: 33px;
  width: 100%;
  overflow: hidden;
  line-height: 33px
}

.loop-type__columns .post-text__title {
  margin-bottom: 5px
}

.loop-type__columns .post-text__title a {
  position: relative;
  top: -5px
}
 

/*------------------------------------------------------------
# Loop mobile styles
------------------------------------------------------------*/

/*  Posts ----------> viewport 1023px
------------------------------------------------------------*/
@media screen and (min-width:1px) and (max-width:1023px) {
  .site-layer__middle,
  .site-layer__middle__page {
    display: block
  }
  
  .content-block__site-content.content-width,
  .content-block__site-content.full-width {
    margin: 0 auto;
    max-width: 762px;
    width: 100%
  }
  
  .site-layer__middle {
    max-width: 762px;
    margin: 35px auto 0;
  }
}

/*  Posts ----------> viewport 800px
------------------------------------------------------------*/
@media screen and (min-width:1px) and (max-width:800px) {
  .site-layer__middle {
    padding: 0 15px;
    max-width: 480px
  }
  
  .content-block__site-content.content-width,
  .content-block__site-content.full-width {
    margin: 0 auto;
    padding: 0;
    max-width: 480px
  }

  .loop-type__columns .post:nth-child(even),
  .loop-type__columns .page:nth-child(even) {
    margin-left: 0
  }

  .loop-type__columns .post:nth-child(odd),
  .loop-type__columns .page:nth-child(odd) {
    margin-right: 0
  }

  .loop-type__columns .post,
  .loop-type__columns .page {
    margin: 0 auto 40px;    
    padding: 10px;
    height: auto;
    width: 100%;
    max-width: 480px;
    border-radius: 4px;
    background-color: var(--grey)
  }
 
  .loop-type__columns .post__article-post-grid {
    height: auto
  }

  .loop-type__columns .article-post-grid__news-block {
    position: unset;
    height: 100%;
    width: 100%
  }

  .loop-type__columns .post-title__h2-headline {
    font-size: 20px;
    line-height: 25px
  }

  .loop-type__columns .news-block__meta-list li,
  .loop-type__columns .post-meta-list__post-comments {
    font-size: 0.0001px;
    line-height: 25px
  }
  
	
  .loop-type__columns .news-block__meta-list {
    position: static;
    margin: 10px 0 0 0;
    visibility: visible;
    opacity: 1;
    font-size: 0.0001px;
    line-height: 25px
  }

  .loop-type__columns .post-meta-list__post-comments .comment-icon::before {
    background-color: var(--black2)
  }

  .loop-type__columns .post-meta-list__post-comments .comment-icon::after {
    border-color: var(--black2) transparent transparent transparent;
  }

  .loop-type__columns .post-text__page-category {
    display: none
  }

  .loop-type__columns .post-text__page-category-mobile {
    display: block
  }

  .loop-type__columns .news-block__image-link {
    height: 100%
  }
  
  .loop-type__columns .post:hover .news-block__dark-background-hover,
  .loop-type__columns .page:hover .news-block__dark-background-hover {
    display: none
  }
  
  .loop-type__columns .news-block__image {
    height: auto;
    min-height: auto;
    max-height: 100%;
    width: 100%;
    max-width: 100%
  }
  
  .loop-type__columns .news-block__post-image {
    position: unset;
    margin: 0 auto;
    height: 100%;
    min-height: auto;
    max-height: 100%;
    width: 100%
  }
  
  .loop-type__columns .news-block__post-image img {
    position: unset;
    height: auto;
    border-radius: 4px;
    width: 100%
  }

  .loop-type__columns .post-image-background__svg {
    width: 100%;
    height: 300px
  }

  .loop-type__columns .post-image-background {
    min-height: 300px
  }
  
  .loop-type__columns .news-block__image .post-image__svg-post-thumbnail {
    position: unset;
    height: 300px;
    width: 100%
  }
  
  .loop-type__columns .site-last-content__post-text {
    margin: unset;
    height: auto;
    min-height: auto
  }
  
  .loop-type__columns .post-text__title {
    margin-top: 8px;
    overflow: hidden
  }
  
  .loop-type__columns .post-text__description {
    margin-bottom: 20px;
    height: auto;
    max-height: 100%
  }
  
  .loop-type__columns .post-text__description p {
    padding: 0
  }

  .loop-type__columns .news-block__meta-list .post-text__title,
  .loop-type__columns .post-text__description {
    padding-left: 1px
  }
}

/*  Posts ----------> viewport 600px
------------------------------------------------------------*/
@media all and (min-width:1px) and (max-width:600px) {
  .main-block__main-content-grid,
  .loop-type__columns .post,
  .loop-type__columns .page {
    max-width: 100%
  }
}