{% extends "base.html" %}
{% load staticfiles %}
{% load sitetree %} 

{% block title %}Блог Салона Красоты Фифа в Подольске | Myfifasalon.ru{% endblock %}
{% block description %}Блог Салона Красоты Фифа в Подольске | Myfifasalon.ru{% endblock %}

{% block og_title %}Блог Салона Красоты Фифа в Подольске | Myfifasalon.ru{% endblock %}
{% block og_description %}Блог Салона Красоты Фифа в Подольске | Myfifasalon.ru{% endblock %}
{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}
{% block image_src %}/media/zaglavka.png{% endblock %}

{% block canonical %}{% if request.is_secure %}https://{% else %}http://{% endif %}{{ request.get_host }}{{ category.get_absolute_url }}/blog/{% endblock %}


{% block content %}
{% include "header.html" %}



<style>
.dop_img{
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    display: block;
    /* overflow: scroll; */
/*    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;*/
        overflow: auto;
}

.dop_img a {
        display: inline-block;
    padding: 5px;

}

.blog-wrapper {
    overflow: hidden;
    border-bottom: 2rem solid #ccc;
    margin-bottom: 30rem;
    /* background: #f9f9f9; */
    padding-bottom: 20px;
}

.dop_img img {
  /*  width: 250px !important;*/
    height: auto;
/*    margin-right: 20px;*/
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 1rem 5rem rgb(0 0 0 / 50%);
    width: 100%;
}

/* one item */
.dop_img a:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
    margin-bottom: 5px;
}

/* two items */
.dop_img a:first-child:nth-last-child(2),
.dop_img a:first-child:nth-last-child(2) ~ a {
    width: 50%;
    margin-bottom: 5px;
}

/* three items */
.dop_img a:first-child:nth-last-child(3),
.dop_img a:first-child:nth-last-child(3) ~ a {
    width: 33.3333%;
    margin-bottom: 5px;
}


/* four items */
.dop_img a:first-child:nth-last-child(4),
.dop_img a:first-child:nth-last-child(4) ~ a {
    width: 25%;
    margin-bottom: 5px;
}
.dop_img a:first-child:nth-last-child(4) ~ a:nth-child(2) {
    width: 75%;
    float: left;
}

/* four items */
.dop_img a:first-child:nth-last-child(4),
.dop_img a:first-child:nth-last-child(4) ~ a {
    width: 25%;
    margin-bottom: 5px;
}
.dop_img a:first-child:nth-last-child(4) ~ a:nth-child(2) {
    width: 75%;
    float: left;
}

.dop_img a:first-child:nth-last-child(5),
.dop_img a:first-child:nth-last-child(5) ~ a {
    width: 33%;
    margin-bottom: 5px;
}

.dop_img a:first-child:nth-last-child(6),
.dop_img a:first-child:nth-last-child(6) ~ a {
    width: 33%;
    margin-bottom: 5px;
}

.dop_img a:first-child:nth-last-child(7),
.dop_img a:first-child:nth-last-child(7) ~ a {
    width: 33%;
    margin-bottom: 5px;
}

.dop_img a:first-child:nth-last-child(8),
.dop_img a:first-child:nth-last-child(8) ~ a {
    width: 33%;
    margin-bottom: 5px;
}

.dop_img a:first-child:nth-last-child(9),
.dop_img a:first-child:nth-last-child(9) ~ a {
    width: 33%;
    margin-bottom: 5px;
}

.dop_img a:first-child:nth-last-child(10),
.dop_img a:first-child:nth-last-child(10) ~ a {
    width: 33%;
    margin-bottom: 5px;
}


.blog-img {
    font-size: 0;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 15px;
}

</style>



<div id="pjax-container">

<div class="procedure2">


{% if blog.paginator.num_pages > 1 %}
<div class="butik__nav" style="margin-right: 0px;     margin-top: 16px;
    margin-bottom: 20px;">
    <div class="wp-pagenavi">


{% if blog.has_previous %}
<a class="previouspostslink" rel="prev" href="/blog/{{ blog.slug }}?page={{ pag }}{{ blog.previous_page_number }}#tops">«</a> {% else %} {% endif %}

{% if blog.previous_page_number > 2 %} 
<a class="page larger" title="" href="/blog/{{ blog.slug }}?page=1#tops">1</a> ...
{% else %} {% endif %} 

{% for i in blog.paginator.page_range %}
{% if blog.number == i %}
<span class="current">{{ i }}</span>
{% elif i > blog.number|add:'-3' and i < blog.number|add:'3' %} 
<a class="page larger" title="" href="/blog/{{ blog.slug }}?page={{ i }}#tops">{{ i }}</a>
{% endif %}
{% endfor %}
... <a class="page larger" title="" href="/blog/{{ blog.slug }}?page={{ blog.paginator.num_pages }}#tops">{{ blog.paginator.num_pages }}</a>
{% if blog.has_next %}
        <a class="nextpostslink" rel="next" href="/blog/{{ blog.slug }}?page={{ pag }}{{ blog.next_page_number }}#tops">»</a> {% else %} {% endif %}
    </div>
</div>
{% else %} {% endif %} 










    <div class="page-navigation-tovar">
        <ul>
            <nav class="woocommerce-breadcrumb">
                <li><a href="/#tops">Салон красоты ФиФа</a></li>&nbsp;/&nbsp;Блог</nav>
        </ul>
    </div>
</div>


<article>
<h1 class="blog">Блог салона красоты Фифа</h1>
    <div class="blog-wrapper-str">
        {% for blog in blog %}
    <div class="blog-wrapper">
    
      
           
        <div class="blog-desc">
            <h2 class="blog-title"><a href="/blog/{{blog.slug}}/#tops">{{blog.name_block|safe}} </a></h2> 
                {% if blog.image %}   
              <a data-fancybox="gallery" href="/media/{{blog.image}}#tops" class="fancybox" rel="fancybox" {% if blog.title %} title="{{blog.title}}" {% else %}{% endif %}>
            <div class="blog-img">   
          <img src="/media/{{blog.image}}" {% if blog.alt %} alt="{{blog.alt}}" {% else %}{% endif %}>
           </div>
        </a>
          {% endif %}
          {% if blog.image_url %}    
           <a data-fancybox="gallery" href="{{blog.image_url}}#tops" class="fancybox" rel="fancybox" {% if blog.title %} title="{{blog.title}}" {% else %}{% endif %}>
            <div class="blog-img">   
          <img src="{{blog.image_url}}" {% if blog.alt %} alt="{{blog.alt}}" {% else %}{% endif %}>
           </div>
        </a>
          {% endif %}

            {{blog.opisanie_small|safe}}
        </div>
     </div>
        {% endfor %}
</div>
</article>



{% if blog.paginator.num_pages > 1 %}
<div class="butik__nav" style="margin-right: 40px;     margin-top: 0px;
    margin-bottom: 20px;">
    <div class="wp-pagenavi">


{% if blog.has_previous %}
<a class="previouspostslink" rel="prev" href="/blog/{{ blog.slug }}?page={{ pag }}{{ blog.previous_page_number }}#tops">«</a> {% else %} {% endif %}

{% if blog.previous_page_number > 2 %} 
<a class="page larger" title="" href="/blog/{{ blog.slug }}?page=1#tops">1</a> ...
{% else %} {% endif %} 

{% for i in blog.paginator.page_range %}
{% if blog.number == i %}
<span class="current">{{ i }}</span>
{% elif i > blog.number|add:'-3' and i < blog.number|add:'3' %} 
<a class="page larger" title="" href="/blog/{{ blog.slug }}?page={{ i }}#tops">{{ i }}</a>
{% endif %}
{% endfor %}
... <a class="page larger" title="" href="/blog/{{ blog.slug }}?page={{ blog.paginator.num_pages }}#tops">{{ blog.paginator.num_pages }}</a>
{% if blog.has_next %}
        <a class="nextpostslink" rel="next" href="/blog/{{ blog.slug }}?page={{ pag }}{{ blog.next_page_number }}#tops">»</a> {% else %} {% endif %}
    </div>
</div>
{% else %} {% endif %} 




{% include "footer.html" %}
{% endblock %}