.news_date{ z-index: 1; position: absolute; top: 40px; left: 20px; border-radius: 3px; font-size: 12px; padding: 3px 8px; } .news_arcive{ z-index: 1; position: absolute; top: 10px; left: 20px; border-radius: 3px; font-size: 12px; padding: 3px 8px; } .news_read_button p{ font-size: 10px; font-weight: 500; text-transform: uppercase; color: #a4a0a0; transition:.5s; } .news_read_button i{ margin-left: 5px; color: #a4a0a0; transition:.5s; } .news_read_button:hover{ background: rgba(0,0,0,.5); } .news_read_button:hover i, .news_read_button:hover p{ color: white; } .news_read_button { cursor: pointer; position: absolute; padding-left: 20px; z-index: 1; bottom: 0; height: 60px; background: rgba(0,0,0,.7); transition: .5s; left:0; display: flex; align-items: center; right:0; } .news_title{ z-index: 1; color: white; position: absolute; top: 80px; left: 20px; text-transform: uppercase; font-size: 20px; font-weight: bold; white-space: pre-line; width: 480px; } .news_block{ overflow: hidden; position:relative; border-radius: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; } .news_blind{ position:absolute; top:0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0,0,0,.4); } .news_wrapper:hover .prev_button_news, .news_wrapper:hover .next_button_news{ opacity: 1; } .prev_button_news:hover, .next_button_news:hover{ background: rgba(0,0,0,.9); color: white; } .prev_button_news{ width: 30px; background: rgba(0,0,0,.8); cursor: pointer; position: absolute; height: 50px; top: 50px; display: none; align-items: center; justify-content: center; color: gray; opacity: 0; transition: .3s; font-size: 20px; z-index: 100; } .next_button_news{ width: 30px; background: rgba(0,0,0,.8); cursor: pointer; position: absolute; height: 50px; top: 50px; right: 0; opacity: 0; display: flex; transition: .3s; align-items: center; justify-content: center; color: gray; font-size: 20px; z-index: 100; } .news_button{ height: 50px; margin-top: 30px; background-color: var(--sidebar-color); } .news_wrapper{ height: 200px; margin-left: 0px; margin-top: 15px; overflow: hidden; position: relative; } .wrapper_slider_news{ white-space: nowrap; display: block; position: absolute; left: 30px; top:0; font-size: 0; transform: skewX(-15deg); } .news_block{ height: 200px; width: 500px; display: inline-block; margin-right: 10px; font-size: 14px; } @media only screen and (max-width: 500px) { .news_block, .news_wrapper { height: 250px; } .news_block { width: 200px; } .news_title{ font-size: 16px; width: 200px; } .next_button_news{ top: 100px; } .prev_button_news{ top: 100px; } } .news_ava { left: 77px; width: 50px; margin-right: 5px; height: 50px; margin-bottom: 5px; border-radius: 50%; vertical-align: bottom; border: 3px solid #fff; transition: all 0.3s ease; } .news_text pre { white-space: pre-line; font-family: 'Montserrat', sans-serif; font-weight: var(--font-weight-1); } .news_link:hover { box-shadow: var(--span-color-back) 5px 5px; transition: 0.3s; } .hren { padding: 10px 12px 15px; margin-bottom: 5px; } .hren img { filter: invert(1); width: 20px; } .knopki { float: left; } .knopki a { left: 35%; position: relative; margin-right: -50%; } .knopki img { margin-top: -3px; height: 25px; filter: invert(1); width: 20px; } .news_ava:hover { border-radius: 20%; border: 3px solid var(--span-color); } .vk_knopka { cursor: pointer; display: inline-block; white-space: nowrap; padding: 6px 15px; outline: none; font-weight: 400; font-size: .81rem; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); word-wrap: break-word; height: 30px; margin-left: 5px; margin-top: 10px; width: 30%; transition: 0.3s; text-align: center; } .vk_knopka:hover { transition: 0.3s; } .news_btn { transition: 0.3s; margin-right: 5px; margin-left: 5px; } .news_btn:hover { border-radius: 5px; padding: 4px; } .news_badge { display: inline-block; padding: .35em .6em; font-size: 75%; font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; fill: #ffffff; border-radius: 4px; } .news_badge:before { border-radius: inherit; content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -100; transition: opacity .3s; } .news_badge:hover:before { opacity: 1; } .news_text { border-radius: 5px; padding: 10px 10px 10px; margin-right: 10px; margin-left: 10px; } @media (max-width: 1700px) { .news_btn { font-size: 80%; } } @media (max-width: 1600px) { .news_btn { font-size: 70%; } } @media (max-width: 1500px) { .news_btn { font-size: 62%; } .vk_knopka { width: 33%; } } @media (max-width: 1400px) { .vk_knopka { width: 36%; } } @media (max-width: 1300px) { .vk_knopka { width: 40%; } } @media (max-width: 900px) { .vk_knopka { width: 45%; } } @media (max-width: 450px) { .news_badge { font-size: 14px; } .news_img { max-width: 100%; } .knopki img { display: none; } .knopki b { font-size: 12px; } .knopki1 a { width: 58%; margin-left: -15%; } } .news-content { text-align: center; margin-top: 15px; } .news-content-navbar { display: inline-flex; margin-bottom: 20px; } .news-content-navbar .navbar-smena:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .news-content-navbar .navbar-smena:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .news-content-navbar .navbar-smena { color: var(--top-text-color); padding: 5px 35px; background: #29292942; transition: 0.3s; background: var(--navbar-color); } .target-hyiarget { display: none; justify-content: center; background-color: var(--sidebar-color); }