:root { --primary: #9e0f11; --secondary: #000; --third: #9e0f11; --grad: linear-gradient(270deg, #F73C47 0%, #c72127 100%); --fb: #3b5998; --tw: #1da1f2; --ins: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); --rss: orange; --yt: #d32323; --ws: #25d366; --viber: #8176d6; --tel: #0088cc; --catTextSize: 22px; --item-title-size: 16px; --font-family-sans-serif: "alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace } img { max-width: 100%; height: auto } html { position: relative; -webkit-font-smoothing: antialiased; -webkit-font-variant-ligatures: no-contextual; font-variant-ligatures: no-contextual; font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth } .swiper { opacity: 0; visibility: hidden } .swiper.swiper-initialized { opacity: 1; visibility: visible } .btn-gradient { background: var(--grad) !important; color: #fff; border: 0 !important; font-weight: bold } .btn-gradient .icon { fill: #fff !important } .btn-gradient:hover { background: var(--primary) } section { float: right; width: 100%; padding: 30px 0 } section .block { margin: 0 } section.w { background: #fff } a, img, button, input, li, svg { transition: all .35s ease-in } .hide { display: none } a { color: #333; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects } main { float: right; width: 100%; min-height: 100vh } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } svg.icon { width: 18px; height: 18px; max-width: 100%; max-height: 100%; transition: all .35s } svg { overflow: hidden; vertical-align: middle } .hide, .d-none { display: none } *, *::before, *::after { box-sizing: border-box } .btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 16px; line-height: 1.42857; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } h1, h2, h3, h4, h5 { margin: 0 } body { margin: 0; padding: 0; background: #f2f2f2 } button { outline: 0; border: 0; outline: 0; background: transparent; cursor: pointer } button:hover, button:focus { outline: 0 } button.btn-primary { background: #9e0f11; color: #fff } button.btn-primary:hover { background: #000; color: #fff } .form-control { display: block; width: 100%; height: 36px; padding: 6px 12px; font-size: 16px; line-height: 1.42857; color: #909090; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s } textarea.form-control { height: auto } .swiper-button-next, .swiper-button-prev { background-color: var(--primary); width: 40px; height: 90px !important; top: 30% !important; transition: all .35s } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 16px !important } .swiper-button-next:hover, .swiper-button-prev:hover { background-color: var(--secondary) } .swiper-button-prev { left: 0 !important; border-top-right-radius: 10px; border-bottom-right-radius: 10px } .swiper-button-next { right: 0 !important; border-top-left-radius: 10px; border-bottom-left-radius: 10px } .swiper-pagination { text-align: center !important; padding: 0 10px; width: 100%; z-index: 33; padding-right: 30px; bottom: 0 !important; position: relative; margin-top: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px } .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; text-align: center; line-height: 10px; border-radius: 50%; border: 1px solid var(--third); background: transparent; opacity: 1; font-family: Arial,Helvetica,sans-serif; font-weight: bold; color: var(--primary); margin: 4px } .swiper-pagination .swiper-pagination-bullet:focus { outline: 0 } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--primary); color: #fff; border: 1px solid var(--primary) } html { box-sizing: border-box; -ms-overflow-style: scrollbar } *, *::before, *::after { box-sizing: border-box } .container { width: 100%; max-width: 100% } .container .right-col { width: 100% } @media(min-width: 1300px) { .container .right-col { width: calc(100% - 330px) !important; flex: 0 0 calc(100% - 330px) !important; max-width: calc(100% - 330px) !important } } .container .left-col { width: 100% } @media(min-width: 1300px) { .container .left-col { width: 330px !important; flex: 0 0 330px !important; max-width: 330px !important } } .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 100%; padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto } @media(min-width: 576px) { .container-sm, .container { max-width: 540px } } @media(min-width: 768px) { .container-md, .container-sm, .container { max-width: 720px } } @media(min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 100% } } @media(min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { width: 100%; max-width: 1200px } } @media(min-width: 1500px) { .container { max-width: 1200px; width: calc(100% - 360px); background-color: white; } } .row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; min-width: 100%;  } .no-gutters { margin-right: 0; margin-left: 0 } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0 } .col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { position: relative; width: 100%; padding-right: 10px; padding-left: 10px } .col { flex-basis: 0; flex-grow: 1; max-width: 100% } .row-cols-1 > * { flex: 0 0 100%; max-width: 100% } .row-cols-2 > * { flex: 0 0 50%; max-width: 50% } .row-cols-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .row-cols-4 > * { flex: 0 0 25%; max-width: 25% } .row-cols-5 > * { flex: 0 0 20%; max-width: 20% } .row-cols-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-auto { flex: 0 0 auto; width: auto; max-width: 100% } .col-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333% } .col-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-3 { flex: 0 0 25%; max-width: 25% } .col-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .col-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667% } .col-6 { flex: 0 0 50%; max-width: 50% } .col-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333% } .col-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667% } .col-9 { flex: 0 0 75%; max-width: 75% } .col-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333% } .col-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667% } .col-12 { flex: 0 0 100%; max-width: 100% } .order-first { order: -1 } .order-last { order: 13 } .order-0 { order: 0 } .order-1 { order: 1 } .order-2 { order: 2 } .order-3 { order: 3 } .order-4 { order: 4 } .order-5 { order: 5 } .order-6 { order: 6 } .order-7 { order: 7 } .order-8 { order: 8 } .order-9 { order: 9 } .order-10 { order: 10 } .order-11 { order: 11 } .order-12 { order: 12 } .offset-1 { margin-left: 8.3333333333% } .offset-2 { margin-left: 16.6666666667% } .offset-3 { margin-left: 25% } .offset-4 { margin-left: 33.3333333333% } .offset-5 { margin-left: 41.6666666667% } .offset-6 { margin-left: 50% } .offset-7 { margin-left: 58.3333333333% } .offset-8 { margin-left: 66.6666666667% } .offset-9 { margin-left: 75% } .offset-10 { margin-left: 83.3333333333% } .offset-11 { margin-left: 91.6666666667% } @media(min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100% } .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100% } .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50% } .row-cols-sm-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25% } .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20% } .row-cols-sm-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100% } .col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333% } .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-sm-3 { flex: 0 0 25%; max-width: 25% } .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667% } .col-sm-6 { flex: 0 0 50%; max-width: 50% } .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333% } .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667% } .col-sm-9 { flex: 0 0 75%; max-width: 75% } .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333% } .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667% } .col-sm-12 { flex: 0 0 100%; max-width: 100% } .order-sm-first { order: -1 } .order-sm-last { order: 13 } .order-sm-0 { order: 0 } .order-sm-1 { order: 1 } .order-sm-2 { order: 2 } .order-sm-3 { order: 3 } .order-sm-4 { order: 4 } .order-sm-5 { order: 5 } .order-sm-6 { order: 6 } .order-sm-7 { order: 7 } .order-sm-8 { order: 8 } .order-sm-9 { order: 9 } .order-sm-10 { order: 10 } .order-sm-11 { order: 11 } .order-sm-12 { order: 12 } .offset-sm-0 { margin-left: 0 } .offset-sm-1 { margin-left: 8.3333333333% } .offset-sm-2 { margin-left: 16.6666666667% } .offset-sm-3 { margin-left: 25% } .offset-sm-4 { margin-left: 33.3333333333% } .offset-sm-5 { margin-left: 41.6666666667% } .offset-sm-6 { margin-left: 50% } .offset-sm-7 { margin-left: 58.3333333333% } .offset-sm-8 { margin-left: 66.6666666667% } .offset-sm-9 { margin-left: 75% } .offset-sm-10 { margin-left: 83.3333333333% } .offset-sm-11 { margin-left: 91.6666666667% } } @media(min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100% } .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100% } .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50% } .row-cols-md-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25% } .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20% } .row-cols-md-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100% } .col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333% } .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-md-3 { flex: 0 0 25%; max-width: 25% } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667% } .col-md-6 { flex: 0 0 50%; max-width: 50% } .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333% } .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667% } .col-md-9 { flex: 0 0 75%; max-width: 75% } .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333% } .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667% } .col-md-12 { flex: 0 0 100%; max-width: 100% } .order-md-first { order: -1 } .order-md-last { order: 13 } .order-md-0 { order: 0 } .order-md-1 { order: 1 } .order-md-2 { order: 2 } .order-md-3 { order: 3 } .order-md-4 { order: 4 } .order-md-5 { order: 5 } .order-md-6 { order: 6 } .order-md-7 { order: 7 } .order-md-8 { order: 8 } .order-md-9 { order: 9 } .order-md-10 { order: 10 } .order-md-11 { order: 11 } .order-md-12 { order: 12 } .offset-md-0 { margin-left: 0 } .offset-md-1 { margin-left: 8.3333333333% } .offset-md-2 { margin-left: 16.6666666667% } .offset-md-3 { margin-left: 25% } .offset-md-4 { margin-left: 33.3333333333% } .offset-md-5 { margin-left: 41.6666666667% } .offset-md-6 { margin-left: 50% } .offset-md-7 { margin-left: 58.3333333333% } .offset-md-8 { margin-left: 66.6666666667% } .offset-md-9 { margin-left: 75% } .offset-md-10 { margin-left: 83.3333333333% } .offset-md-11 { margin-left: 91.6666666667% } } @media(min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100% } .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100% } .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50% } .row-cols-lg-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25% } .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20% } .row-cols-lg-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100% } .col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333% } .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-lg-3 { flex: 0 0 25%; max-width: 25% } .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667% } .col-lg-6 { flex: 0 0 50%; max-width: 50% } .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333% } .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667% } .col-lg-9 { flex: 0 0 75%; max-width: 75% } .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333% } .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667% } .col-lg-12 { flex: 0 0 100%; max-width: 100% } .order-lg-first { order: -1 } .order-lg-last { order: 13 } .order-lg-0 { order: 0 } .order-lg-1 { order: 1 } .order-lg-2 { order: 2 } .order-lg-3 { order: 3 } .order-lg-4 { order: 4 } .order-lg-5 { order: 5 } .order-lg-6 { order: 6 } .order-lg-7 { order: 7 } .order-lg-8 { order: 8 } .order-lg-9 { order: 9 } .order-lg-10 { order: 10 } .order-lg-11 { order: 11 } .order-lg-12 { order: 12 } .offset-lg-0 { margin-left: 0 } .offset-lg-1 { margin-left: 8.3333333333% } .offset-lg-2 { margin-left: 16.6666666667% } .offset-lg-3 { margin-left: 25% } .offset-lg-4 { margin-left: 33.3333333333% } .offset-lg-5 { margin-left: 41.6666666667% } .offset-lg-6 { margin-left: 50% } .offset-lg-7 { margin-left: 58.3333333333% } .offset-lg-8 { margin-left: 66.6666666667% } .offset-lg-9 { margin-left: 75% } .offset-lg-10 { margin-left: 83.3333333333% } .offset-lg-11 { margin-left: 91.6666666667% } } @media(min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100% } .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100% } .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50% } .row-cols-xl-3 > * { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25% } .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20% } .row-cols-xl-6 > * { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100% } .col-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333% } .col-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667% } .col-xl-3 { flex: 0 0 25%; max-width: 25% } .col-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333% } .col-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667% } .col-xl-6 { flex: 0 0 50%; max-width: 50% } .col-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333% } .col-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667% } .col-xl-9 { flex: 0 0 75%; max-width: 75% } .col-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333% } .col-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667% } .col-xl-12 { flex: 0 0 100%; max-width: 100% } .order-xl-first { order: -1 } .order-xl-last { order: 13 } .order-xl-0 { order: 0 } .order-xl-1 { order: 1 } .order-xl-2 { order: 2 } .order-xl-3 { order: 3 } .order-xl-4 { order: 4 } .order-xl-5 { order: 5 } .order-xl-6 { order: 6 } .order-xl-7 { order: 7 } .order-xl-8 { order: 8 } .order-xl-9 { order: 9 } .order-xl-10 { order: 10 } .order-xl-11 { order: 11 } .order-xl-12 { order: 12 } .offset-xl-0 { margin-left: 0 } .offset-xl-1 { margin-left: 8.3333333333% } .offset-xl-2 { margin-left: 16.6666666667% } .offset-xl-3 { margin-left: 25% } .offset-xl-4 { margin-left: 33.3333333333% } .offset-xl-5 { margin-left: 41.6666666667% } .offset-xl-6 { margin-left: 50% } .offset-xl-7 { margin-left: 58.3333333333% } .offset-xl-8 { margin-left: 66.6666666667% } .offset-xl-9 { margin-left: 75% } .offset-xl-10 { margin-left: 83.3333333333% } .offset-xl-11 { margin-left: 91.6666666667% } } body { font-family: var(--font-family-sans-serif) } h1, h2, h3, h4, h5, a { font-family: "Alexandria",sans-serif } p { font-family: "IBM Plex Sans Arabic",sans-serif } .adfull { width: 100%; margin-bottom: 20px; justify-content: center } .adfull .cont { display: inline-block; float: none } .adfull .cont img { max-width: 100%; height: auto } .adfull { float: right; width: 100%; text-align: center; max-width: 100%; overflow-x: hidden; margin-bottom: 20px; text-align: center; position: relative } .adfull.a728 .cont { max-width: 728px; min-height: 90px } .adfull.a336 .cont { max-width: 336px; min-height: 280px } .adfull.a300 .cont { max-width: 300px; min-height: 250px } .adfull .cont { display: inline-block } .sponser-cont { position: relative; z-index: 2 } .stickyL, .stickyR { position: fixed; top: 60px; width: 100% } .stick { width: 160px; height: 600px; display: none; top: 0 !important } @media(min-width: 1500px) { .stick { display: block } } .stick .sponser { width: 160px; height: 600px; background: #dcdcdc } .stick-r { margin-right: -180px; float: right } .stick-l { margin-left: -180px; float: left; height: 600px } .cat { padding: 0 10px; line-height: 20px; background: var(--primary); color: #fff; font-size: 12px; border-radius: 0; font-weight: bold } time { float: right; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--third); font-size: 12px; line-height: 20px; margin: 10px 0 } p { color: #888; float: right; width: 100%; text-overflow: ellipsis; overflow: hidden } .img-cont { position: relative; float: right; width: 100%; overflow: hidden;border-radius: 10px !important; } .img-cont .cat { position: absolute; top: 10px; right: 10px; z-index: 2 } .img-cont .icn-cont { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; background-color: var(--secondary); text-align: center; border-radius: 50%; -webkit-filter: drop-shadow(0px 0px 6px var(--secondary)); filter: drop-shadow(0px 0px 6px var(--secondary)) } .img-cont .icn-cont .icon { fill: #fff; width: 28px; height: 28px; margin-top: 2px } .img-cont:after { content: ""; display: block; width: 100%; padding-top: 56.25% } .img-cont img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;border-radius: 10px !important; } .txt-cont { float: right; width: 100% } .txt-cont h3 { float: right; height: 75px; line-height: 25px; font-size: var(--item-title-size); overflow: hidden; color: #000; width: 100%; text-overflow: ellipsis } .item-card { float: right; width: 100%; position: relative; margin-bottom: 20px; transition: all .3s; border-top: 1px solid #dcdc;border-radius: 10px !important; } .item-card .txt-cont { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: relative; padding-top: 15px !important; transition: all .3s; padding: 0 10px 10px 10px } .item-card:hover .txt-cont h3, .item-card:hover .txt-cont time, .item-card:hover .txt-cont p { color: var(--secondary) } .item-card2 { float: right; width: 100%; position: relative; margin-bottom: 10px; padding: 10px; padding-bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-bottom: 20px; transition: all .3s } .item-card2 .img-cont { border-top-left-radius: 10px; border-top-right-radius: 10px } .item-card2 .txt-cont { position: relative; padding-top: 15px; transition: all .3s } .item-card2 .txt-cont h3 { text-align: center } .item-card2:hover .txt-cont h3 { color: var(--secondary) } .item-li { overflow: hidden; float: right; width: 100%; display: flex; flex-direction: column; margin-bottom: 15px; transition: all .3s } .item-li .img-cont { width: 90px; position: relative; z-index: 1; border-bottom: 0 } @media(min-width: 1500px) { .item-li .img-cont { width: 120px } } .item-li .img-cont:after { padding-top: 90px } .item-li .txt-cont { position: relative; z-index: 2; width: calc(100% - 90px); padding-right: 15px; position: relative; height: 90px; padding-top: 5px; padding-right: 10px } @media(min-width: 1500px) { .item-li .txt-cont { width: calc(100% - 120px) } } .item-li .txt-cont h3 { font-size: 14px; height: 80px; line-height: 21px } .item-li:hover .txt-cont h3, .item-li:hover .txt-cont time, .item-li:hover .txt-cont p { color: var(--primary) } .item-li.lg-txt { margin-bottom: 0 !important; padding: 10px 0; border-top: 1px solid #dcdcdc } .item-li.lg-txt .img-cont { width: 100% } .item-li.lg-txt .img-cont:after { content: ""; padding-top: 52.25% } @media(min-width: 570px) { .item-li.lg-txt .img-cont:after { padding-top: 180px } } @media(min-width: 570px) { .item-li.lg-txt .img-cont { width: 40% } } .item-li.lg-txt .txt-cont { width: 100%; padding-top: 15px } .item-li.lg-txt .txt-cont h3 { height: auto; max-height: none } @media(min-width: 570px) { .item-li.lg-txt .txt-cont { height: 180px; width: 60% } } .item-li.lg-txt .txt-cont h3 { font-size: 16px; line-height: 25px } @media(min-width: 570px) { .item-li.lg-txt .txt-cont h3 { font-size: 18px; height: 150px; line-height: 32px } } @media(min-width: 992px) { .item-li.lg-txt { border-top: 0; padding: 0; margin-bottom: 10px !important } .item-li.lg-txt:first-child { border-bottom: 1px solid #dcdcdc !important; padding-bottom: 10px !important } } .item-bg { float: right; width: 100%; position: relative; overflow: hidden; margin-bottom: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0 ;border-radius: 10px !important;} .item-bg .img-cont .cat { top: 10px; right: 10px } .item-bg .img-cont::before { content: ""; position: absolute; width: 100%; bottom: 0; right: 0; left: 0; height: 70%; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); opacity: 0 } .item-bg .img-cont::after { padding-top: 65% } .item-bg .txt-cont { position: absolute; bottom: 0; width: 100%; float: none; padding: 10px; z-index: 2; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%) } .item-bg .txt-cont h3 { color: #fff; height: auto } .item-article { float: right; width: 100%; background: #fff; border-radius: 10px; width: 287px; text-align: center; padding: 10px; display: flex; justify-content: center; align-items: center; position: relative; transition: all .35s } .item-article .img-cont { width: 130px; border: 3px solid var(--primary); border-radius: 50%; float: none; display: inline-block; margin-bottom: 10px } .item-article .img-cont:after { padding-top: 100% } .item-article .icon-cont { width: 20px; height: 20px; color: #fff; background: var(--primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: absolute; right: calc(53% - 20px); top: 130px } .item-article .icon-cont .icon { fill: #000; display: block; margin-top: 4px; margin-right: -3px; width: 30px px; height: 30px; float: right } .item-article .writer { width: 100%; color: var(--secondary); white-space: nowrap; text-overflow: ellipsis; margin-bottom: 10px } .item-article .txt-cont { width: 100%; text-align: center; position: relative; padding-top: 15px } .item-article .txt-cont h3 { height: 66px; line-height: 22px; text-overflow: ellipsis } .item-article:hover { background-color: var(--third) } .item-article:hover h3 { color: #fff } .block { float: right; width: 100%; margin-bottom: 30px; background-color: #F0F0F0; } .block .title { width: 100%; align-items: center; float: right; position: relative; border-bottom: 1px solid #9e0f11; background: #9e0f11; } .block .title a { display: flex } .block .title h2 { float: right; width: 100%; font-size: 20px; font-weight: 700; line-height: 32px; border-right: 4px solid #ffffff; padding-right: 10px; font-weight: bold; margin: 8px 3px; position: relative; color: #fff; } @media(min-width: 768px) { .block .title h2 { font-size: 22px; line-height: 32px; color: #fff; } } .block .title h2 .icon { margin-right: 10px; fill: #ffffff; } .block .cont { float: right; width: 100%; position: relative; padding: 5px 4px } @media(min-width: 992px) { .block .cont { padding: 20px 4px } } .block .foot { float: right; width: 100%; border-top: 1px solid #dcdcdc; padding: 10px; text-align: left } .block .foot .more { display: inline-flex; line-height: 24px; padding: 0 10px; line-height: 24px; height: 24px; margin-left: 0px; cursor: pointer; width: 85px; justify-content: center; align-items: center; font-weight: 600; font-size: 14px; transition: all .3s } .block .foot .more .icon { fill: var(--primary); margin-right: 10px } .block .foot .more:hover { background: var(--primary); color: #fff } .block .foot .more:hover .icon { fill: #fff } .social { display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center } .social a { display: inline-block; flex-direction: row; vertical-align: middle; margin: 5px; width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 36px; fill: #fff; color: #fff; align-items: center; display: flex; justify-content: center; cursor: pointer; background: var(--primary) } .social a:hover { background: #f2f2f2 } .social a:hover .icon { fill: var(--primary) } .social a.fb { background-color: #3b5998 } .social a.fb .icon { fill: #fff } .social a.fb:hover { color: #fff; background: var(--secondary) } .social a.fb:hover .icon { fill: #fff !important } .social a.tw { background-color: #1da1f2 } .social a.tw .icon { fill: #fff } .social a.tw:hover { color: #fff; background: var(--primary) } .social a.tw:hover .icon { fill: #fff !important } .social a.ins { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) } .social a.ins .icon { fill: #fff } .social a.ins:hover { color: #fff; background: var(--primary) } .social a.ins:hover .icon { fill: #fff } .social a.yt { background-color: #d32323 } .social a.yt .icon { fill: #fff } .social a.yt:hover { color: #fff; background: var(--primary) } .social a.yt:hover .icon { fill: #fff !important } .social a.ws { background-color: #25d366 } .social a.ws .icon { fill: #fff } .social a.ws:hover { color: #fff; background: var(--primary) } .social a.ws:hover .icon { fill: #fff !important } .social a.viber { background-color: #8176d6 } .social a.viber:hover { color: #fff; background: var(--primary) } .social a.te { background-color: #39a7da } .social a.te:hover { color: #fff; background: var(--primary) } .social a.te:hover .icon { fill: #fff !important } .social a.rss { background-color: var(--rss) } .social a.rss .icon { fill: #fff } .social a.rss:hover { color: #fff; background: var(--primary) } .social a.rss:hover .icon { fill: #fff !important } html.pushbar_locked { overflow: hidden; touch-action: none } .pushbar_locked .pushbar_main_content.pushbar_blur { -webkit-filter: blur(15px); filter: blur(15px) } .pushbar_overlay { z-index: -999; position: fixed; width: 100%; height: 100%; top: 0; left: 0; will-change: opacity; transition: opacity .5s ease; opacity: 0; background: #3c3442 } html.pushbar_locked .pushbar_overlay { opacity: .8; z-index: 999 } [data-pushbar-id] { z-index: 1000; position: fixed; overflow-y: auto; will-change: transform; transition: -webkit-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; background: #fff } [data-pushbar-direction=left][data-pushbar-id], [data-pushbar-direction=right][data-pushbar-id] { top: 0; width: 256px; max-width: 100%; height: 100% } [data-pushbar-direction=top][data-pushbar-id], [data-pushbar-direction=bottom][data-pushbar-id] { left: 0; width: 100%; min-height: 150px } [data-pushbar-direction=left][data-pushbar-id] { left: 0; -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%) } [data-pushbar-direction=right][data-pushbar-id] { right: 0; -webkit-transform: translateZ(0) translateX(100%); transform: translateZ(0) translateX(100%) } [data-pushbar-direction=top][data-pushbar-id] { top: 0; -webkit-transform: translateZ(0) translateY(-100%); transform: translateZ(0) translateY(-100%) } [data-pushbar-direction=bottom][data-pushbar-id] { bottom: 0; -webkit-transform: translateZ(0) translateY(100%); transform: translateZ(0) translateY(100%) } [data-pushbar-id].opened { display: block; -webkit-transform: translateX(0px) translateY(0px) !important; transform: translateX(0px) translateY(0px) !important } @media(min-width: 1200px)and (max-width: 1540px) { .container.cont-header { max-width: 100% !important; width: 100% !important } } header { width: 100%; float: right; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075),0 .125rem .25rem rgba(0,0,0,.075) 0 .125rem .25rem rgba(0,0,0,.075); background: #fff; position: relative } header .breaking { float: right; width: 100%; background: #fff; margin-bottom: 5px; line-height: 38px; padding: 5px 10px; display: none } header .breaking .title { float: right; width: 100px; background: linear-gradient(270deg, #F73C47 0%, #c72127 100%); color: #fff; font-weight: bold; font-size: 20px; text-align: center; border-radius: 4px } header .breaking .title .icon { fill: #fff } header .breaking .cont { width: calc(100% - 100px); overflow: hidden; white-space: nowrap; direction: ltr } header .breaking .cont a { direction: rtl; position: relative; display: inline-block; padding-right: 40px; font-weight: bold; margin-left: 10px } header .breaking .cont a:before { content: ""; width: 28px; height: 28px; position: absolute; background-size: contain; background: url(../images/favicon/favicon-32x32.png) no-repeat center; border-radius: 50%; right: 0; top: 4px; background-size: contain } header .top { float: right; width: 100%; background: #fff; color: #444; border-bottom: 1px solid #dcdcdc; display: none } @media(min-width: 992px) { header .top { display: block } } header .top .date { float: right; padding: 0 20px; line-height: 30px; border-radius: 15px; font-size: 12px; margin-top: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0 } header .top .social { float: left } header .md { float: right; width: 100%; background: #fff; padding-top: 15px; padding-bottom: 15px; display: none } @media(min-width: 1100px) { header .md { display: block } } header .md .logo-area { float: right; width: calc(100% - 728px); display: none } @media(min-width: 992px) { header .md .logo-area { display: block } } header .md .logo-area .logo { display: block; float: right; height: 90px } header .md .logo-area .logo img { height: 100%; width: auto } header .md .logo-area .admin { float: right; width: 140px; text-align: right; margin-right: 10px; height: 90px; display: inline-flex; align-items: center } header .md .logo-area .admin .item { margin: 0 } header .md .logo-area .admin .name { margin-top: 10px; font-size: 18px; white-space: nowrap } header .md .content-area { width: 100%; max-width: 728px; float: left } header .md .content-area .adfull { margin: 0 } .admin { float: right; width: 180px; text-align: center; color: #707070 } .admin .item { float: right; width: 100%; line-height: 14px; font-size: 13px; margin-bottom: 10px; font-weight: lighter } .admin .item .title { max-width: 111px; display: inline-block; font-weight: bold } .admin .item .name { font-size: 15px; font-weight: 700; color: #000; margin-top: 5px; white-space: nowrap } .admin .item .name.lg { font-size: 24px } header .scroll-wrapper-mobile { white-space: nowrap; float: right; position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -webkit-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: none; scrollbar-width: none; background: #fff; border-top: 1px solid #dcdcdc } @media(min-width: 1100px) { header .scroll-wrapper-mobile { display: none } } header .scroll-wrapper-mobile .navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; padding: 0; margin: 0; flex-wrap: nowrap } header:before { content: ""; width: 70px; height: 50px; left: 0; bottom: 0; background-image: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); position: absolute; z-index: 2 } header:after { content: ""; width: 70px; height: 50px; right: 0; bottom: 0; background-image: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%); position: absolute; z-index: 2 } .scroll-wrapper-mobile .nav-item .nav-link { padding: 0 15px; font-size: 14px } .bottom-nav { position: fixed; bottom: 0; background: #fff; box-shadow: 0px -0.5rem .25rem rgba(0,0,0,.1); z-index: 999; display: flex; width: 100%; left: 0; height: 50px; justify-content: space-evenly; align-items: center; overflow: hidden } @media(min-width: 1100px) { .bottom-nav { display: none } } .bottom-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; height: 50px; width: 25%; flex-direction: column; border-left: 1px solid #dcdcdc; font-size: 12px } .bottom-nav a:last-child { border-left: 0 } .bottom-nav a .icon { fill: var(--primary); margin-right: 10px; width: 15px; height: 15px; margin-bottom: 10px } .bottom-nav a span { font-weight: bold; font-size: 14px; text-transform: capitalize } .bottom-nav a:hover { background: #f2f2f2 } #navbar { width: 100%; z-index: 999; transition: all } #navbar.sticky { position: fixed; float: none; top: 0; width: 100%; right: 0 } #navbar.sticky .navbar { max-width: 100%; float: none; margin: 0 auto } #navbar.sticky .navbar .logo-area { display: inline-block !important } .navbar { float: right; width: 100%; height: 50px; background: #fff; padding: 0; position: relative; display: flex; flex-wrap: nowrap; align-items: right; justify-content: space-between } .navbar .nav-item-mobile { float: right; background: #fff; width: 100%; height: 50px; display: flex; justify-content: space-between } @media(min-width: 1099px) { .navbar .nav-item-mobile { display: none } } .navbar .nav-item-mobile a { display: inline-block; height: 50px; line-height: 33px } .navbar .nav-item-mobile a img { height: 100%; width: auto } .navbar .nav-item-mobile a .icon { fill: #9e0f11 } .navbar .nav-item-mobile a.logo { padding: 5px; border-radius: 5px } .navbar .nav-item-mobile a.logo img { float: right; height: 40px; width: auto } .navbar .nav-item-mobile a.logo .admin { width: 90px; margin-top: 5px; text-align: right; margin-right: 15px } .navbar .nav-item-mobile a.logo .admin .name { font-size: 14px } .navbar .nav-item-mobile a.logo .admin .title { font-size: 10px } .navbar .nav-item-mobile a.menu { float: right; display: block; width: 40px; height: 40px; background: #f2f2f2; color: var(--primary); fill: var(--primary); border-radius: 5px; border: 1px solid transparent; padding: 0; margin-top: 5px; margin-right: 5px } .navbar .nav-item-mobile a.menu .icon { fill: var(--primary) } .navbar .nav-item-mobile a.search { display: block; float: left; background: #fff; width: 40px; height: 40px; background: #fff; color: #107999; fill: #107999; border-radius: 50%; border: 1px solid var(--secondary); padding: 0; margin-top: 5px; margin-left: 5px; color: var(--secondary); fill: var(--primary) } .navbar .nav-item-mobile a.search .icon { fill: var(--secondary) } .navbar .navbar-collapse { height: 50px; width: 100%; white-space: nowrap; display: none; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; } @media(min-width: 1100px) { .navbar .navbar-collapse { display: flex } } .navbar .navbar-collapse .logo-area { float: right; height: 50px; padding-right: 10px } @media(min-width: 992px) { .navbar .navbar-collapse .logo-area { display: none } } .navbar .navbar-collapse .logo-area .logo { height: 50px; float: right; padding: 5px 0 } .navbar .navbar-collapse .logo-area .logo img { height: 100%; width: auto } .navbar .navbar-collapse .logo-area .admin { float: right; line-height: 32px; text-align: right; padding-right: 10px; padding-top: 6px; width: 100px } .navbar .navbar-collapse .logo-area .admin .title { font-size: 9px; font-weight: bold; margin-bottom: 3px } .navbar .navbar-collapse .logo-area .admin .name { white-space: nowrap; font-size: 11px; margin-top: 0 } .navbar .navbar-collapse .icon { height: 20px; fill: #000 } .navbar .navbar-collapse .social a .icon { fill: #fff } .navbar .navbar-collapse .social a:hover { background: #000 !important } .navbar .navbar-collapse .btn-gradient { float: left; border-radius: 4px; margin-top: 8px } .navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; padding: 0 0; margin: 0; flex-wrap: nowrap; justify-content: space-between } .navbar-nav::-webkit-scrollbar { display: none } @media(min-width: 992px) { .navbar-nav { flex-direction: row; height: 50px } } .navbar-nav .nav-item { float: right; margin: 0 } .navbar-nav .nav-item:hover .nav-link:after { opacity: 1 } .navbar-nav .nav-item .nav-link { display: block; line-height: 40px; color: #000; padding: 5px 10px; font-weight: bold; text-decoration: none !important; position: relative; white-space: nowrap; font-size: 15px } .navbar-nav .nav-item .nav-link svg { fill: var(--primary); height: 15px; width: 20px } .navbar-nav .nav-item .nav-link:after { content: ""; opacity: 0; height: 2px; background: #9e0f11; position: absolute; bottom: 0px; right: 0; width: 100%; transition: all .34s ease } .navbar-nav .nav-item .nav-link.menu .icon { display: block } .navbar-nav .nav-item:hover .nav-link, .navbar-nav .nav-item.active .nav-link { fill: #9e0f11; color: #9e0f11 } .navbar-nav .nav-item:hover .nav-link .icon, .navbar-nav .nav-item.active .nav-link .icon { fill: #000 } .navbar-nav .nav-item:hover .nav-link:after, .navbar-nav .nav-item.active .nav-link:after { opacity: 1; width: 100% } .navbar-nav .nav-item.dropdown { position: relative } .navbar-nav .nav-item.dropdown .dropdown-menu { transition: all .3s ease .15s; display: block; visibility: hidden; position: absolute !important; opacity: 0; background: #f4f4f4; border-left: 0; border-right: 0; margin: 0; padding: 0; top: 50px; z-index: 33 } .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item { display: block; width: 100%; padding: .25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; line-height: 30px; font-weight: bold; border-bottom: 1px solid #dcdcdc } .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover { background: #fff } .navbar-nav .nav-item.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible } footer { float: right; width: 100%; float: right; width: 100%; text-align: center; padding-top: 10px; content-visibility: auto; margin-top: 30px } @media(max-width: 767px) { footer { margin-bottom: 60px } } footer .up { float: right; width: 100%; text-align: center; padding-bottom: 10px; margin-top: -50px } footer .up .btp { float: right; width: 32px; height: 32px; background: #fff; border-radius: 50%; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075),0 .125rem .25rem rgba(0,0,0,.075); text-align: center; line-height: 32px } footer .up .btp .icon { fill: #000; -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 13px; height: 13px } footer .up .btp:hover { background: #9e0f11 } footer .up .btp:hover .icon { fill: #fff } footer .top { float: right; width: 100%; text-align: center; display: flex; position: relative; align-items: center; justify-content: center } footer .top:before, footer .top:after { content: ""; height: 4px; width: calc(50% - 100px); background: var(--primary); position: absolute; top: 40px } footer .top:before { right: 0 } footer .top:after { left: 0 } footer .top .logo-area { float: right; width: auto } footer .top .logo-area .logo { height: 60px; display: block; margin: 10px 10px } footer .top .logo-area .logo img { height: 100%; width: auto } footer .social { width: auto; display: inline-flex } footer .social a { background: #9e0f11 !important; color: #000 !important; fill: #000 !important; border-radius: 50%; width: 32px; height: 32px; margin: 3px; line-height: 29px } footer .social a:hover { background: #000 !important; color: #9e0f11 !important; fill: #9e0f11 !important } footer ul.footer-nav { flex-wrap: wrap; justify-content: center } footer ul.footer-nav a:hover { text-decoration: underline; -webkit-text-decoration-color: var(--primary); text-decoration-color: var(--primary) } footer .fnav { text-align: center; float: right; width: 100%; margin-top: 10px; -webkit-text-decoration: dotted !important; text-decoration: dotted !important } footer .fnav a { font-size: 12px; margin: 10px; display: inline-block; white-space: nowrap; color: #9e0f11 } footer .fnav a:hover { text-decoration: underline; -webkit-text-decoration-color: #000; text-decoration-color: #000 } footer .copy { background: #0d1323; display: flex; align-items: center; justify-content: center; color: #fff; float: right; width: 100%; text-align: center; font-family: tahoma; font-size: 12px; padding: 10px 0; direction: ltr; line-height: 30px; vertical-align: middle; display: flex; align-items: center; align-content: center; justify-content: center } #search-box { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); transition: all .5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0 } #search-box.open { -webkit-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 3333 } #search-box input[type=search] { position: absolute; top: 50%; width: 100%; color: #fff; background: rgba(0,0,0,0); font-size: 60px; font-weight: 300; text-align: center; border: 0px; margin: 0px auto; margin-top: -51px; padding-left: 30px; padding-right: 30px; outline: none } @media(max-width: 767px) { #search-box input[type=search] { font-size: 30px; padding-left: 15px; padding-right: 15px } } #search-box input[type=search]:focus { border-bottom: 2px solid var(--secondary) } #search-box .btns { position: absolute; top: 50%; left: 0; margin-top: 61px; width: 100%; text-align: center } #search-box .btns button { border-radius: 20px; fill: #fff; margin: 10px; padding: 4px 20px } #search-box .btns button:first-child { background: var(--secondary) } #search-box .close { position: fixed; top: 15px; right: 15px; color: #fff; background-color: var(--secondary); opacity: 1; font-size: 27px; border-radius: 50%; width: 42px; height: 42px; line-height: 23px } .search-form { float: left; line-height: 30px; background: #fff; transition: all .35s; border: 1px solid transparent; transition: all .34s ease-in-out; margin-top: 7px; border-radius: 30px; border: 1px solid var(--third); margin-left: 10px } .search-form:hover, .search-form:focus { border: 1px solid #000 } .search-form .form-control { background: transparent; outline: 0; border: 0; display: inline-block; width: 180px; font-weight: bold; padding: 0px 12px; height: 30px; line-height: 30px; margin: 0 !important } .search-form .form-control:hover, .search-form .form-control:focus { border: 0; outline: 0 !important } .search-form .search-icn { display: inline-block; border: 0; outline: 0; width: 36px; height: 24px } .search-form .search-icn .icon { fill: var(--primary) } .search-form .search-icn:hover, .search-form .search-icn:focus { border: 0; outline: 0 } .search-form:hover { border: 1px solid var(--primary); box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) } .searchInline { float: right; width: 100%; margin-top: 10px; height: 0; overflow: hidden; text-align: center; transition: all .35s; background: #fff; opacity: 0; border-radius: 4px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075),0 .125rem .25rem rgba(0,0,0,.075) } .searchInline form { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; line-height: 42px; width: 100% } .searchInline form label { font-size: 20px; padding: 0 10px; line-height: 32px; font-size: 20px; display: none } .searchInline form input { padding: 0 10px; height: 42px; margin-left: 10px; border: 1px solid #dcdcdc; font-size: 20px; width: calc(100% - 117px) } .searchInline form input:focus { border-color: var(--primary); outline-color: #f2f2f2 } .searchInline form button { height: 42px; width: 42px; padding: 0; line-height: 42px; border-radius: 4px !important; display: inline-flex; justify-content: center; align-items: center } .searchInline form button .icon { fill: #fff } .searchInline.active, .searchInline.open { padding: 10px 0; height: auto; opacity: 1; margin-bottom: 15px } .menu-nav { width: 360px !important; padding: 20px 40px; background: #f2f2f2 } .nav-side-menu { content-visibility: auto; float: right; width: 100%; height: 100% } @media(max-width: 1200px) { .nav-side-menu { height: calc(100% - 100px) } } .nav-side-menu .brand { width: 100%; text-align: center; float: right; height: 50px; display: block; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px } .nav-side-menu .brand img { height: 100%; width: auto; display: inline-block } .nav-side-menu .brand .close { position: absolute; top: 0; left: 0; width: 38px; padding: 10px } .nav-side-menu .brand .close .icon { width: 28px; height: 28px; fill: #000 } .nav-side-menu .brand .close:hover .icon { fill: #9e0f11 } .nav-side-menu .menu-list { height: calc(100% - 108px); overflow: scroll; float: right; width: 100%; -webkit-overflow-scrolling: touch } .nav-side-menu .menu-list .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; padding-right: 0 } .nav-side-menu .menu-list .nav .nav-item { border-bottom: 1px solid #dcdcdc; position: relative; transition: all .35s; float: right; width: 100%; color: #fff } .nav-side-menu .menu-list .nav .nav-item.dropdown-menu { height: 0; overflow: hidden; opacity: 0; border-bottom: 1px solid #000; background: #f4f4f4; transition: all .3s; padding-right: 10px } .nav-side-menu .menu-list .nav .nav-item.dropdown-menu .nav-item { border-bottom: 1px solid #fff } .nav-side-menu .menu-list .nav .nav-item.dropdown-menu.show { height: auto; opacity: 1 } .nav-side-menu .menu-list .nav .nav-item.active a { background: #f4f4f4 } .nav-side-menu .menu-list .nav .nav-item a { display: block; float: right; width: 100%; color: #000; font-weight: 700; font-size: 16px; padding: 9px 10px 9px 0; position: relative; line-height: 24px } .nav-side-menu .menu-list .nav .nav-item a:after { content: ""; right: 0; bottom: 0; height: 1px; width: 0; position: absolute; background: #000; transition: all .2s ease-in; z-index: -1 } .nav-side-menu .menu-list .nav .nav-item a .icon { fill: #000; height: 11px; position: relative; text-align: left; line-height: 34px; display: inline-block; width: 20px } .nav-side-menu .menu-list .nav .nav-item a h2 { display: inline-block; width: calc(100% - 26px); margin: 0 !important; font-size: inherit !important; line-height: inherit !important; font-weight: 700; font-size: 16px; font-weight: inherit !important } .nav-side-menu .menu-list .nav .nav-item a:hover { background: #adb6bd; color: #fff } .nav-side-menu .menu-list .nav .nav-item a:hover:after { width: 100% } .nav-side-menu .menu-list .flex-column { flex-direction: column !important } .nav-side-menu .badges { margin: 5px 0; padding: 0; text-align: center } .nav-side-menu .badges a { margin: 0px 0; height: 35px } .nav-side-menu .social { justify-content: center } .poll { border: 1px solid #dcdcdc } .poll .btn { border-radius: 4px; font-weight: bold; color: #fff } .voteform { float: right; width: 100%; text-align: right; padding: 15px } .voteform .formq { float: right; width: 100%; font-weight: bold; font-size: 18px; text-align: right; margin-bottom: 15px; border-bottom: 1px solid #dcdcdc; padding: 15px; line-height: 26px } .voteform .opt { float: right; width: 100%; margin-bottom: 10px; font-weight: bold } .voteform .opt p { margin: 0; text-align: right; direction: rtl; font-size: 16px; padding-bottom: 6px; padding-right: 10px; text-shadow: 0 1px 0 rgba(0,0,0,.15) } .voteform .opt .progress { height: 8px; margin-bottom: 6px; overflow: hidden; background-color: #f5f5f5; border-radius: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); border-radius: 30px } .voteform .opt .progress .progress-bar { float: right; width: 0%; height: 100%; font-size: 14px; line-height: 22px; text-align: center; background-color: var(--secondary); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); transition: width .6s ease } .radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px } .radio label, .checkbox label { padding-right: 20px; padding-left: initial; color: #fff } .radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] { margin-right: -20px; margin-left: auto } .radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] { position: absolute; margin-left: -20px; margin-top: 4px \9 } input[type=radio], input[type=checkbox] { margin: 4px 0 0; margin-top: 1px \9; line-height: normal } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } .bc { position: fixed; bottom: 0; background: var(--secondary); width: 100%; max-width: 100%; left: 0; right: 0; z-index: 9999; line-height: 32px; font-size: 20px; white-space: nowrap; overflow: hidden } @media(min-width: 768px) { .bc { line-height: 52px } } .bc a { color: #fff; font-weight: bold } .bc .title { width: 100px; font-weight: bold; float: right; background: #9c1711; color: #fff; font-size: 40px; text-align: center } @media(max-width: 768px) { .bc .title { width: 50px; font-size: 20px } } .bc .cont { width: calc(100% - 150px); float: right; overflow: hidden; position: relative } @media(max-width: 767px) { .bc .cont { width: calc(100% - 80px) } } .bc .cont a { margin-right: 10px; position: relative; padding-right: 40px; display: inline-block } @media(max-width: 767px) { .bc .cont a { font-size: 16px } } .bc .cont a:before { content: ""; width: 32px; height: 32px; position: absolute; background-size: contain; background: url("../images/favicon/favicon-32x32.png") no-repeat center; border-radius: 50%; right: 0; top: 10px } @media(max-width: 767px) { .bc .cont a:before { top: 0 } } .bc .close { float: right; width: 50px; background: #9c1711; text-align: center } .bc .close .icon { fill: #fff; width: 30px; height: 30px } @media(max-width: 767px) { .bc .close { width: 30px } .bc .close .icon { width: 20px; height: 20px } } .nc-col .cont { padding: 0 } .nc-col .item-card { margin-bottom: 0px; } .nc-col .item-card .txt-cont { padding: 10px 5px 5px 0 } .nc-col .item-card .txt-cont h3 { height: 54px } .nc-col .item-li { margin-bottom: 0; padding: 10px 5px; border-top: 1px solid #dcdc } .nc-col .item-li .img-cont { float: left } .nc-col .item-li .txt-cont { padding-left: 10px; padding-right: 0 } .nc-col .item-li:hover { background: #DCDCDC; } .nc-col.topread { background: #fff; } .nc-col.topread .cont { padding: 5px } .nc-col.topread .title h2, .nc-col.topread .txt-cont h3, .nc-col.topread .foot a { color: #000; } .nc-col.topread .item-li { position: relative; margin: 0; padding: 10px 30px 10px 0; border-top: 1px solid #333 !important } .nc-col.topread .item-li:first-child { border-top: 0 } .nc-col.topread .item-li .num { position: absolute; top: 0; right: 0; height: 100%; width: 30px; color: var(--primary); font-size: 40px; display: flex; justify-content: center; text-decoration: underline; -webkit-text-decoration-color: #fff; text-decoration-color: rgba(255,255,255,.2) } .nc-col.topread .item-li .img-cont { float: left } .nc-col.topread .item-li:hover { background: #DCDCDC; } .item-li.lg:hover { background: #DCDCDC; } .nc-inv .item-card .txt-cont:hover { background: #DCDCDC; } .item-card.to-li-sm:hover { background: #DCDCDC; } .item-card:hover { background: #DCDCDC; } .item-li.lg-txt:hover { background: #DCDCDC; }