/*
  Journal - Advanced Opencart Theme Framework
  Version 2.9.8
  Copyright (c) 2017 Digital Atelier
  https://www.journal-theme.com/
*/
/******************************
BLOG MANAGER for JOURNAL
*******************************/
#blogCatArticles {
  margin-bottom: 20px; }
  #blogCatArticles h3 {
    font-size: 15px; }
    #blogCatArticles h3 a {
      font-family: inherit; }

#blogCategory {
  margin-bottom: 10px; }

.articleHeader {
  margin: 0 0 10px 0; }

.articleCat, .blogCol2 .articleCat {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc; }

#blogArticle .articleHeader {
  margin: 0; }
  #blogArticle .articleHeader h1 {
    padding-left: 10px;
    line-height: 40px;
    max-height: 40px;
    font-size: 15px;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none; }
  #blogArticle .articleHeader > span {
    display: block;
    padding: 5px 0;
    color: #5F6874; }

.articleBottom {
  clear: both; }

.articleBottom h4,
#blogCategory h4 {
  margin: 0 0 5px 0; }
.articleBottom ul,
#blogCategory ul {
  margin: 0 0 0 10px; }

.livemarks a {
  margin-right: 5px;
  margin-top: -44px; }

#articleComments {
  border: 0; }

.blogTags a {
  padding: 2px 4px 3px 4px;
  color: #222;
  border-radius: 7px;
  font-size: 13px !important;
  display: inline-block;
  margin-bottom: 4px; }

.recentArticles, .popularArticles {
  list-style: none;
  margin: 15px 0 0 0;
  padding: 0; }
  .recentArticles li, .popularArticles li {
    float: left;
    margin-bottom: 15px; }
    .recentArticles li > a, .popularArticles li > a {
      display: block;
      float: left;
      color: #428bca; }
    .recentArticles li > a + a, .popularArticles li > a + a {
      float: none; }
    .recentArticles li > span, .popularArticles li > span {
      display: block;
      font-size: 85%; }

.box-footer {
  clear: both; }

#column-right .recentArticles, #column-right .popularArticles, #column-left .recentArticles, #column-left .popularArticles {
  list-style: none;
  margin: 0;
  padding: 0; }
  #column-right .recentArticles li, #column-right .popularArticles li, #column-left .recentArticles li, #column-left .popularArticles li {
    float: none;
    background-color: #f4f4f4;
    border-bottom: 1px solid #E4E4E4;
    margin: 0; }
    #column-right .recentArticles li > a, #column-right .popularArticles li > a, #column-left .recentArticles li > a, #column-left .popularArticles li > a {
      display: inline-block;
      float: left;
      color: #428bca;
      background-color: transparent;
      border-bottom: 0;
      padding: 10px 5px 10px 10px; }
    #column-right .recentArticles li > a + a, #column-right .popularArticles li > a + a, #column-left .recentArticles li > a + a, #column-left .popularArticles li > a + a {
      float: none;
      padding: 10px 0 3px 0; }
    #column-right .recentArticles li > span, #column-right .popularArticles li > span, #column-left .recentArticles li > span, #column-left .popularArticles li > span {
      display: block;
      font-size: 85%; }
    #column-right .recentArticles li p, #column-right .popularArticles li p, #column-left .recentArticles li p, #column-left .popularArticles li p {
      clear: both;
      padding: 0; }
#column-right .recentComments, #column-left .recentComments {
  list-style: none;
  margin: 0;
  padding: 0; }
  #column-right .recentComments li, #column-left .recentComments li {
    float: none;
    background-color: #f4f4f4;
    border-bottom: 1px solid #E4E4E4;
    padding-top: 10px;
    overflow: hidden; }
    #column-right .recentComments li > a, #column-left .recentComments li > a {
      display: inline-block;
      float: left;
      background-color: transparent;
      border-bottom: 0;
      padding: 0 5px 10px 10px; }
    #column-right .recentComments li > a + i + a, #column-left .recentComments li > a + i + a {
      float: none;
      padding: 10px 0 3px 0;
      display: block; }
    #column-right .recentComments li > span, #column-left .recentComments li > span {
      display: block;
      font-size: 85%; }
    #column-right .recentComments li p, #column-left .recentComments li p {
      clear: both;
      padding: 0; }

#productRelated .secondary-title {
  margin-top: 15px; }

.side-column .recentArticles li:last-of-type,
.side-column .popularArticles li:last-of-type,
.side-column .recentArticles li:last-of-type,
.side-column .popularArticles li:last-of-type,
.side-column .box-content ul > li:last-of-type:last-of-type,
.side-column .box-content ul > li:last-of-type:last-of-type,
.side-column .box-content ul > li:last-of-type a:last-of-type,
.side-column .box-content ul > li:last-of-type a:last-of-type {
  border-bottom-width: 0; }

.blogTags .box-content {
  padding: 5px; }

.blogArchives ul ul {
  margin: 0; }

.blogArchives li {
  background: none; }

.box-content .recentComments li a:before {
  display: none; }

.recentArticles li > a,
.popularArticles li > a {
  float: none !important; }
  .recentArticles li > a:before,
  .popularArticles li > a:before {
    display: none; }
  .recentArticles li > a.image,
  .popularArticles li > a.image {
    float: left !important; }
.recentArticles li > span,
.popularArticles li > span {
  margin: -5px 0 8px 10px; }

.side-column .recentArticles li > a img,
.side-column .popularArticles li > a img {
  max-width: 50px; }
.side-column .recentArticles li > p,
.side-column .popularArticles li > p {
  padding: 0 10px 10px 10px !important; }

#content .recentArticles, #content .popularArticles {
  margin-right: -15px; }
  #content .recentArticles li, #content .popularArticles li {
    padding-right: 15px; }
    #content .recentArticles li .image, #content .popularArticles li .image {
      margin-right: 10px; }
    #content .recentArticles li > span, #content .popularArticles li > span {
      margin: 0; }
#content .box-footer {
  clear: none; }

#column-right .recentComments li > a + i + a,
#column-left .recentComments li > a + i + a {
  padding: 0; }

#column-right .recentArticles li,
#column-right .popularArticles li,
#column-left .recentArticles li,
#column-left .popularArticles li,
#column-right .recentComments li,
#column-left .recentComments li {
  background-color: transparent; }

.blogCategories li {
  background-image: none; }

#comments .pagination {
  font-size: inherit;
  padding: 10px; }

#blogArticle .articleHeader h1 {
  border: inherit;
  padding: inherit; }

/*-------- Guide Style START --------*/

/* Текстовый базовый блок */

.gtext {
text-align:justify; 
display:block;
margin-bottom:25px;
font-size:16px;
padding-bottom: 10px;
}

.gtext a {
	text-decoration: underline;
}

.gtext img {
border-radius:8px;
margin-right: 4%; 
margin-bottom: 15px; 
float:left;
height:auto;
width: 48%;
box-sizing: border-box;
}

@media only screen and (max-width: 578px) {
  .gtext img {
    width:100%;
  }
}



.gtext h1 {
display: block;
background: #F4F4F4;
padding-bottom: 12px;
text-align: center;
margin-bottom: 20px;
margin-top: 50px;
clear: left;
padding-top: 11px;
font-weight: 500;
font-size: 20px;
}

@media only screen and (max-width: 400px){
  .gtext h1 {
    color:gray;
    font-size:18px;
    font-weight: 400;
    text-shadow: -1px 1px white;
  }
}

.gtext h1 a {
color: black;
padding: 0 35 0 35;
background: white;
text-decoration: none;
  border-radius: 4px;
  border-bottom:  silver 1px solid;
}

.gtext h1 a:hover{
  color: white;
  background: silver;
  border-bottom:  white 1px solid;
  border-top:  gray 1px solid;
}

.gtext h1 a:active{
  color: yellow;
}

.gtext h2 {
display: block;
background: #A5D9FF;
padding-bottom: 12px;
text-align: center;
margin-bottom: -25px;
margin-top: 25px;
clear: none;
padding-top: 11px;
font-weight: 500;
font-size: 20px;
color:white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.gtext ul {
 line-height: 180%;
   
}

.gtext iframe {
    clear:left;
    height:360px;
    width:640px;
    margin:auto;
    display:block;
    
}

@media only screen and (max-width: 640px) {
    .gtext iframe {
        width:100%;
        height:280px;
    }
} 



/* конец текстового блока */

/* Попытка сделать стиль описани */

.ucontainer {
    float: left;
    display: block;
}

.ctext {
text-align:justify; 
display:block;
margin-bottom:25px;
font-size:16px;
padding-bottom: 10px;
    float:left;
}

.ctext iframe {
    float: right;
    width:50%;
}
    


/* Складывание в группу, чтобы не рассыпалось */
.quatro {
    display:block;
    float:left;
}

/* Список того, что вам понадобится */

.guli ul {
display:block;
min-width:280px;
background: #F5F5FF;
float:left;
margin:25px 0px 25px 0px;
padding:17px 25px 20px 35px;
line-height: 150%;
width:100%;
word-wrap: break-word;
box-sizing: border-box;
border-bottom: #A5D9FF 5px solid;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.guli h1 {
    display: block;
background: #A5D9FF;
padding-bottom: 12px;
text-align: center;
margin-bottom: -25px;
margin-top: 25px;
clear: none;
padding-top: 11px;
font-weight: 500;
font-size: 20px;
color:white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
    
}

@media only screen and (max-width: 355px){
 .guli ul {
   background: none;
   line-height: 150%;
   padding:17px 10px 20px 17px;
  }
}

.guli li {
 padding-bottom: 20px;
}

@media only screen and (max-width: 355px){
 .guli li {
 padding-bottom: 6%;
} 
}

.guli a {
  background: #FFDEB7;
  padding: 2px 12px 1px 12px !important;
margin-right:2px;
  color: black;
  text-decoration: none;
  border-bottom: #A5D9FF 1px solid;
  border-radius: 4px;
}

.guli a:hover {
background: #F8981D; 
color: white;

}


/* для ситуаций когда возникает пустое пространство в начале */
.gstart h1 {
  clear: none !important;
}

.gstart {
  clear: none !important;
}

/* Преобразование в левый полу-блок */
.gtl {
float:left; 
margin-right:4%;
width: 48%; 
}




@media only screen and (max-width: 578px) 
{
.gtl {
margin:0;
width:100%;
       
} }




.gtl h1 {
margin-top:0;
}

@media only screen and (max-width: 578px) 
{
.gtl h1 {
margin-top:35px;
} }

.gtl img {
width:100%;
}


/* Преобразование в правый полу-блок */
.gtr {
width: 48%; 
float:left; 
}


@media only screen and (max-width: 578px) 
{
.gtr {
margin:0;
width:100%;
       
} }


.gtr h1 {
margin-top:0;
}

@media only screen and (max-width: 578px) 
{
.gtr h1 {
margin-top:35px;
} }

.gtr img {
width:100%;
}


/* Розовое примечание */
.gtb  {
float:left;
background: #FFF2F9;
padding: 15px 25px 15px 25px;
display:block;
margin-top:10px;
margin-bottom:15px;
width: 100%;
box-sizing: border-box;
border-bottom: #EFAEA5 2px solid;
border-top: #EFAEA5 2px solid;
}
@media only screen and (max-width: 480px){
	.gtb {
		padding: 15px 0 15px 0;
		background: none;
		
	}
}

.gtb a {
  background: #EFAEA5;
  padding: 1px 10px 2px 10px !important;
  border-radius: 4px;
  color: black;
  text-decoration: none;
}

.gtb a:hover {
  background: #FF8C7C;
  color: white;
}

/* Правило очищения от выравнивания по стороне*/
.gcl {
margin:0;
clear:both;
}

/* Делает картинку в блоке круглой*/
.ground img {
border-radius: 50%;
border: #f4f4f4 5px solid;
box-sizing: border-box;
}



/* Блок советов и наставленй идёт с базовым текстовым блоком */
.gtips {
display: block;
font-size: 14px;
width:auto;

min-width: 280px;
padding: 0 65px 45px 35px;
margin: 10px 0 25px 0;
background-color: #FFFEC7;
border-bottom:2px silver solid;
    border-top:2px silver solid;
line-height: 150%;

}

.gtips h4 { /* название в этом блоке должно быть х4 а то полезет наружу*/
  color: #303030;
  font-size: 18px;
  font-style:normal;
  padding: 20px 20px 20px 20px;
  font-weight: 500;
}

@media only screen and (max-width: 480px){
	.gtips h4 {
		padding: 20px 5px 10px 5px;
	}
}


/*Некоторые старые правила, но продолжают жить, т.к. где-то могут быть использованы*/

.gname-block {
    display: block;
    background: #F4F4F4;
    padding-bottom: 12px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 50px;
    clear: left;
    padding-top: 11px;
    font-weight: 500;
    font-size: 18px;
}

.gname-top {
display: block;
padding-bottom: 10px;
text-align: center;
margin-top: 50px;
clear: left;
padding-top: 11px;
font-weight: 500;
font-size: 22px;
background:#B7DAF4;
margin-bottom:0; 
border-top-left-radius:32px;
border-top-right-radius:32px;
border-bottom: #8BC4ED 5px solid;
color:white;
}

/* Центрирует картинку. Применяется только для больших изображений с белым фоном*/

.gcent img{
display: block;
margin: auto;
width: 65%;
    max-width: 700px;
}

@media only screen and (max-width: 480px) 
{
.gcent img {
width:100%;
    max-width: 1000px;
} 
}

/* Картинка для инструментов. Обрезается по краям при ресайзе */
.gcover img {
  object-fit:cover; 
  height:350px;
  width:100%; 
  max-width: 960px;
  min-width:280px;
  border-radius:32px;
  border: #f4f4f4 5px solid;
  float: left;
  margin-bottom: 25px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

/* Правило для картинок, которые могут быть монструозными*/

@media only screen and (max-width: 578px) 
{
.gsmart img {
display:block;
width:50%;
margin-left:25%;
margin-right:25%;
} }

@media only screen and (max-width: 420px) 
{
.gsmart img {
display:block;
width:80%;
margin-left:10%;
margin-right:10%;
} }


/* Кучка из двух картинок */

.g2s {
  display: block;
  float: left;
  width: 100%;
}
.g2s img {
display: block;
float: left;
width: 50%; 
margin:  0; 
}

/* Кучка для трёх картинок */
.g3s {
  float: left;
  width: 100%;
  min-width: 280px;
  margin-bottom: 25px;
  margin-top: 10px;
}
.g3s img {
 width: 33.3%; 
  float: left;
  margin:  0;
}


/* Кучка из четырёх картинок */
.g4s {
  float: left;
  width: 100%;
  min-width: 280px;
  margin-bottom: 25px;
  margin-top: 10px;
}
.g4s img {
 width: 25%; 
  float: left;
  margin:  0;
}

 @media only screen and (max-width: 480px) 
{
 .g4s img {
 width: 50%;   
    }

}


/* Кучка из шести картинок */

.g6s {
  float: left;
  width: 100%;
  min-width: 280px;
  margin-bottom: 25px;
  margin-top: 10px;
}
.g6s img {
 width: 16.6%; 
  float: left;
  margin:  0;
}

@media only screen and (max-width: 578px) 
{
 .g6s img {
 width: 33.3%;   
    }

}
  
@media only screen and (max-width: 480px) 
{
 .g6s img {
 width: 50%;   
    }

}

/* Меню из картинок */



.grelated {
    width:100%;
    float:left;
    padding:0;
    display: block;
}

/* Пункт меню - после каждой пары нужен разделитель gsub-clear для нормального сдвоения в мобильной версии */

.gsub {
    float:left;
    width: 24.5%;
    margin: 0.25%;
    list-style: none;
    text-align: center;
    background: #4e4d5d;
    height: 100%; }

.gsub:hover {
    background: #37364b;
    transition: all 0.5s ease;
}

/* стирает выравнивание по левой стороне в мобильной версии */
.gsub-clear {
    clear:none;
}

    
@media only screen and (max-width: 578px) {
    .gsub {
        width: 49.5%;
        margin: 0.25%;
    }
    
    .gsub-clear {
    clear:left;
}
}
    

.gsub img {
    width:100%;
    float:left;
    box-sizing: border-box;
    opacity: 0.95;
    margin-bottom:35px;

}

.gsub a {
    float:left;
    color: white;
    text-decoration: none;
    font-size: 14px;
    padding-bottom: 35px;
    
}

.gsub h1 {
    font-size: 14px;
    font-weight: 400;
    display:block;
    margin-top: 0;
    margin-left:15px;
    margin-right:15px;
}
 
/*------------ Guide Style END ----------------*/


/*----------------------------------------------
--------- BLOG STYLE ---------------------------
---------------------------------------------*/

.wide-blog-image img {
object-fit: cover;
    width: 100%;
    height: 300px;
    margin: 35px 0 35px 0;
    
}