body {
width: 100%;
margin: auto; 
}

*{
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

/*mobil*/

.uMenuH {
 display:none; 
}

.grid_container {
position: relative;
background-color: #fff;
margin: 50px auto 25px ;
}}

@media only screen and (min-width:768px) {.grid-block {
display: grid;
transition: transform 0.3s ease-in-out;
margin-top: 24px; 
 }
}


.wrapper{
padding: 50px 0;
background: #fbf8f8;
}

a {
 color: #fff;
 text-decoration: none;
}

img{
max-height: 385px;
width: 100%;
object-fit: cover;
pointer-events: none;
}

hr{
opacity: 0.3;
}

/*header-logo+menu*/

 .top-header {
 width: 100%;
 height: 48px;
 background-color: #ad3954;
 color: #fff;
 display: flex;
 align-items: center;
 }

 .logo-slogan{
 font-size: 26px;
 font-weight: bold;
 font-family: math;
 padding: 0 24px;
 }

 @media only screen and (min-width:1024px) { .uMenuH {
 display: flex;
 height: 48px;
 margin-left: 50px;
}}
 
.uMenuRoot{
 display: flex;
 gap: 20px;
 align-items: center;
 list-style-type: none;
 font-size: 18px;
 font-family: Commissioner,Commissioner Fallback,Trebuchet MS,sans-serif;
 }
 
/*menu-container*/


.menu-container {
 margin: 0 auto;
 width: 80%;
 }
 

.colomn-menu {
background: #fbf8f8;
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}

 .image_main {
 display: flex;
 position: relative; 
 max-height: 295px;
 width: 30%;
 cursor: pointer;
 }

 .image_main img {
 width: 100%;
 height: auto;
 border-radius: 5px;
 }

.image-link{
display: flex;
justify-content: center; 
align-items: center;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

.overlay-text{
font-size: 16px;
font-weight: bold;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif; 
opacity: 0; 
transition: 0.2s ease; 
}

.image-link:hover .overlay-text{
opacity: 1;
color: #fff;
text-decoration: underline; 
}

/*other article*/

@media only screen and (min-width:1024px) {.grid_container { 
 position: relative;
 background-color: #fff;
 border: 1px solid #d7d7d7;
 width: 974px;
 margin: 50px auto 25px ;
 overflow: hidden;
 }}


@media only screen and (min-width:1024px) {.grid-block {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 transition: transform 0.3s ease-in-out;
 margin-top: 24px; 
 }
 }

.grid-article{
 display: inline;
 font-size: 24px;
 background-color: #488bfa;
 color: white;
 font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;

}


@media only screen and (min-width:1024px) {.item-grid {
height: 389px;
width: 324px; 
background-color: #fff;
border: 1px solid #d7d7d7;
}}

.grid-card{
position: relative;
height: 100%;
padding: 26px 24px;
}

.large-card {
text-align: center;
opacity: 1;
transition: 0.1s ease;
}

.grid-card:hover .large-card {
 transform: scale(1.1);
 z-index:1;
}

.card_grid_cover{
object-fit: cover;
height: 199px;
width: 100%;
}


.grid-card:hover:before{
content:"";
border: 2px solid #cb3011;
box-sizing: border-box;
position: absolute;
top: -1px;
left: -1px;
height: calc(100% + 2px);
width: calc(100% + 2px);
z-index: 1;
}

.title-card {
color: #000;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
font-size: 24px;
line-height: 28px;
font-weight: bold;
white-space: normal;
}

.grid-card:hover .title-card{
color:#cb3011;
}

/* slider*/

.slider_container{
 position: relative;
 background-color: #fff;
 border: 1px solid #d7d7d7;
 width: 80%;
 margin: 50px auto 25px ;
 overflow: hidden;
}

.slider-block {
 min-width: 1907px;
 max-width: 1920px;
 display: flex;
 flex-direction: row;
 gap: 13px;
 transition: transform 0.3s ease-in-out;
}

.card-cover{
object-fit: cover;
height:100%;
width: 100%;
}

.slider-card:hover .slide {
 transform: scale(1.1);
 z-index:1;
}

.last-article{
display: inline;
font-size: 24px;
background-color: red;
color: white;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
}

.slider {
 padding: 24px;
 overflow: hidden;
}

.slider-card{
position: relative;
width: 25%;
}

.slider-block .slider-card:nth-of-type(n+5){
right: -12px; 
}

.slider-block .slider-card:last-child{
right: -12px; 
}
 
.slide {
 display: flex;
 height: 100%;
 position: relative;
 text-align: center;
 opacity: 1;
 transition: 0.1s ease;
}

.card-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.3); 
padding: 10px;
right: 0;
left: 0;
bottom: 0;
text-align: center;
color: #fff;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); 
} 

.slider-card:hover .title-hover {
text-decoration: underline;
}

.background-button{
background-color: #fff;
height: 36px;
width: 36px; 
border-radius: 50%;
position: absolute;
top: 50%;
cursor: pointer;
outline: none;
transform: translateY(-50%);
opacity:0;
transition-duration: 0.4s;
}


.right-arrow{
display:flex;
align-items: center;
justify-content: center;
}

.right-arrow:after{
content: "";
height: 24px;
width: 24px;
background-image: url(https://life-kaif.ucoz.net/right-arrow.svg);
opacity: 0.2;
}

.right-arrow:hover:after{
opacity: 1;
}

.next-button{
opacity: 0;
right: -40px;
z-index: 0;
}

.slider_container.show-next-on-hover:hover .next-button {
 opacity: 1;
 right: 10px;
 z-index: 1;
}

.arrow-left{
display:flex;
align-items: center;
justify-content: center;
}

.arrow-left:after{
content: "";
height: 24px;
width: 24px;
background-image: url(https://life-kaif.ucoz.net/arrow-left-975UQXVKZF.svg);
opacity: 0.2; 
}

.arrow-left:hover:after{
opacity: 1;
}

.back-button{
opacity: 0;
left: -40px;
z-index: 0;
}

.slider_container.show-back-on-hover:hover .back-button {
 opacity: 1;
 left: 10px;
 z-index: 1;
}



/*footer*/

.footer-container{
padding: 32px 96px;
background-color: #222;
}

.footer-content{
display: flex;
align-items: center;
flex-direction: column;
row-gap: 10px;
}

.copy{
color: #fffc;
font-size:16px;
}

.social-media{
display: flex;
}

/*list of articles*/


.article-container{
max-width: 850px;
background-color: #fff;
border: 1px solid #d7d7d7;
margin: 0 auto; 
}

.article-item {
background-color: #fff;
border-bottom: 1px solid #d7d7d7;
}

.article-container .article-item.shown-last {
 border-bottom: none;
}


.card-items{
position: relative; 
display: flex;
padding: 20px;
}

.title-top{
display: flex;
align-items: center;
margin: 22px 20px 12px;
gap: 5px;
}

.icon-item{
height:24px;
width: 24px;
}

.title-list{
font-size: 24px;
font-weight: 600;
line-height: 34px;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
}


.article-link {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}

.article-link_hover:hover{
 border: 2px solid #cb3011;
}


.card-item-controls{
max-width: 578px;
display: flex;
justify-content:center;
flex-direction: column;
align-items: flex-start;
}

.item-controls-left{
margin-left: 25px; 
}

.small-title{
color: #000;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif; 
font-size: 20px;
line-height: 26px; 
word-wrap: break-word;
white-space: normal;
}

.card-items:hover .small-title{
color:#cb3011;
}

.images{
display: block;
height: 102px;
width: 205px;
}


/*показать ещё*/

.load-more {
 display: flex; 
 text-align: center;
}

#show-more-btn { 
 display: block;
 background-color: #007bff;
 width: 100%;
 color: white;
 border: none;
 border-radius: 3px;
 cursor: pointer;
 font-size: 16px;
 text-align: center;
 height: 50px;
 margin: 10px;
}

#show-more-btn:hover {
 background-color: #0056b3;
}

/*article page*/
 
.article-block {
margin: auto; 
height: 100%;
max-width: 750px;
width: 100%;
}

.article-card { 
 color: #000000;
 background: #ffffff; 
 border: 1px solid #bbbaba;
 border-radius: 2px;
 padding: 16px 24px;
}


.article-content{
font-size: 16px;
line-height: 26px; 
font-family: PT Root, PT Root Fallback, Arial, sans-serif;
}

.article-title {
text-align:center;
color: #000;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif; 
font-size: 36px;
line-height: 44px; 
margin-bottom: 28px;
}

.author_name {
font-size: 16px;
color: #5c5c5c;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
margin-bottom: 20px;
}

.name_сopywriter {
font-weight: bold;
color: #000000;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif; 
}

.descrip-text{
width: 100%;
}

/* like-btn */

.lb-popup-position-top{
margin-top: 20px;
}


/*slider for article page*/


.slider_container_category{
 background-color: #fff;
 border: 1px solid #d7d7d7;
 width: 750px;
 margin: 25px auto;
}

.slider_container_category > .last-article{
background-color: #488bfa;
}

.slider-block_category {
 width: 100%;
 display: flex;
 flex-direction: row;
 gap: 10px;
}

.slide > .title-mini {
font-size: 12px;
}

/*navigation category*/

.breadcrumb {
position: relative;
display: flex;
padding: 0;
margin: 12px 15px;
}

.category-name {
margin-left: 5px; 
}

.category-name::before {
content: "/";
margin-right: 5px;
}

.breadcrumb .breadcrumb-item, .breadcrumb-category, .breadcrumb a {
font-family: PT Root, PT Root Fallback, Arial, sans-serif; 
font-size: 14px;
color: #5c5c5c;
font-weight: 400; 
}

.breadcrumb-style{
font-family: PT Root, PT Root Fallback, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
}

.breadcrumb-item{
margin-left: 5px;
}

.breadcrumb-item::before {
content:">";
margin-right: 5px;
}

/*comments*/

.wrapper-comments:before {
content: ''; 
display: block;
height: 3px;
width: 750px;
background-color: red;
position: absolute;
top: -25px;
}

.wrapper-comments{
position: relative;
width: 750px;
margin: 50px auto;
}


.comments-inner{
height: 100%;
width: 580px;
background-color: #fff;
border: 1px solid #d7d7d7; 
}

.form-comments{
 position: relative;
 border-radius: 2px;
 min-height: 180px;
 overflow: hidden;
 }


.title-comment{
font-size: 28px;
font-weight: 600;
line-height: 34px;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
margin: 10px 15px;
}


.input-comment{
display:flex;
padding: 10px 15px; 
}

.input-text{
width: 100%;
height: 102px;
outline: none;
resize: none;
overflow: hidden;
border: 1px solid #a59f9f;
border-radius: 2px;
}

.input_hover:hover {
 border: 1px solid #488bfa;
}

.enter-text{
font-family: PT Root, PT Root Fallback, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
word-break: break-word;
padding: 5px;
}

.input_name { 
outline: none;
resize: none;
overflow: hidden;
border: 1px solid #a59f9f;
border-radius: 2px;
}

.enter_name {
font-family: PT Root, PT Root Fallback, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
word-break: break-word;
padding: 5px;
}


.input_items {
display:flex;
justify-content: space-between;
margin: 0 15px;
}

.enter_button{
padding: 14px;
border-radius: 2px;
background-color: #368fff;
cursor: pointer;
}

.text_button{
color: #fff;
font-size: 14px;
font-family: Commissioner, Commissioner Fallback, Trebuchet MS, sans-serif;
text-transform: uppercase;
}