/* clubz stylesheet definitions * aip solutions ltd' 2022 * support@aip.solutions */ .top a {font-family:"Poppins", sans-serif;font-weight:100;font-style:normal;} .poppins-extralight {font-family:"Poppins", sans-serif;font-weight:200;font-style:normal;} .poppins-light {font-family:"Poppins", sans-serif;font-weight:300;font-style:normal;} .author-name, .time, .messege,p {font-family:"Poppins", sans-serif;font-weight:400;font-style:normal;} .category {font-family:"Poppins", sans-serif;font-weight:500;font-style:normal;} .show-more, .step, .answer, aside h2.title {font-family:"Poppins", sans-serif;font-weight:600;font-style:normal;} .poppins-bold {font-family:"Poppins", sans-serif;font-weight:700;font-style:normal;} .poppins-extrabold {font-family:"Poppins", sans-serif;font-weight:800;font-style:normal;} .poppins-black {font-family:"Poppins", sans-serif;font-weight:900;font-style:normal;} .poppins-thin-italic {font-family:"Poppins", sans-serif;font-weight:100;font-style:italic;} .poppins-extralight-italic {font-family:"Poppins", sans-serif;font-weight:200;font-style:italic;} .poppins-light-italic {font-family:"Poppins", sans-serif;font-weight:300;font-style:italic;} .poppins-regular-italic {font-family:"Poppins", sans-serif;font-weight:400;font-style:italic;} .poppins-medium-italic {font-family:"Poppins", sans-serif;font-weight:500;font-style:italic;} .poppins-semibold-italic {font-family:"Poppins", sans-serif;font-weight:600;font-style:italic;} .poppins-bold-italic {font-family:"Poppins", sans-serif;font-weight:700;font-style:italic;} .poppins-extrabold-italic {font-family:"Poppins", sans-serif;font-weight:800;font-style:italic;} .poppins-black-italic {font-family:"Poppins", sans-serif;font-weight:900;font-style:italic;} html {scroll-behavior:smooth;box-sizing:border-box;} body {display:block;width:100%;/*height:100vh;*/margin:0;padding:0;min-width:360px;font-family:'Vollkorn' ,'serif';/*font-size:1.125rem;*/overflow-x:hidden;} /* base */ body, nav, menu, ul {margin:0;padding:0;} header, main, footer, aside, section, article, h1, h2, h3 {position:relative;display:block;box-sizing:border-box;} li {list-style-type:none;} /* titles */ h1 {margin:0 0 24px 0;color:#fff;font-weight:normal;font-size:1.625rem;} h2 {margin:0;padding:0;color:#000;line-height:1.2631578947;font-weight:600;font-family:'Vollkorn', serif;} h3 {color:#2F2F33;margin-bottom:20px;transition:color .3s;} h4 {font-size:.875rem;font-weight:400;} .right {float:right;} h2.title{text-transform:uppercase;} .title {font-size:32px;font-weight:bold;color:#2F2F33; &:after {content:"";display:inline-block;width:110%;height:23px;background-color:#F4E949;position:absolute;top:17px;left:-10px;z-index:-1;} } a {display:inline-block;text-decoration:none;cursor:pointer;color:inherit;transition:color .3s; &.logo {display:block;background:url(../assets/images/logo.svg) center no-repeat;width:204px;height:50px;z-index:9;} &.close {position:absolute;top:20px;right:15px; &::before {content:'';display:inline-block;width:30px;height:30px;background:url(../assets/images/close.svg)center no-repeat;background-size:30px;} } &.facebook {background:url(../assets/images/facebook.png)center no-repeat;background-size:13px;height:13px;width:13px;} &.linkedin {background:url(../assets/images/linked-white.svg)center no-repeat;background-size:13px;} &.photo {background:url(../assets/images/photo.png)center no-repeat;background-size:13px;height:13px;width:13px;} &.instagram {background:url(../assets/images/instagram.png)center no-repeat;background-size:13px;height:13px;width:13px;} &.twitter {background:url(../assets/images/twitter-white.svg)center no-repeat;background-size:24px;} &.viber {background:url(../assets/images/viber.svg)center no-repeat;background-size:24px;} &.mesenger {background:url(../assets/images/mesenger.svg)center no-repeat;background-size:24px;} &.category {font-size:13px;padding:0px 9px 0px;position:relative;margin-right:15px;background:rgb(244 233 73 / 80%);border-radius:8px 0px;text-shadow:none;text-transform:uppercase;margin-bottom: 10px; } &.show-more {text-align:center;font-size:14px;position:relative;text-transform:uppercase; &::after {content:"";display:inline-block;width:100%;height:10px;background-color:#F4E949;position:absolute;top:10px;left:0;z-index:-1;} &::before {content:"";display:inline-block;width:0;height:10px;background-color:#F4E949;position:absolute;top:10px;left:0;z-index:-1;transition:width .3s ease-in-out;} &:hover::before, &.active::before {width:100%;transition:width .3s ease-in-out;} &:hover::after {width:0;} } &.prev, &.next {width:74px;border:1px solid #dedede;line-height:1;display:block!important; &:hover::before {background:url(../assets/images/next-hover.svg)center no-repeat;background-size:26px;} &::before {content:'';display:inline-block;width:26px;height:26px;background:url(../assets/images/next.svg)center no-repeat;background-size:26px;transform:rotate(90deg); } &.next::before {transform:rotate(-90deg);} } &.img {position:relative;width:100%;height:0;padding-bottom:78%;z-index:0;overflow:hidden;aspect-ratio: 3 / 2; & img {display:inline-block;width:100%;position:absolute;object-fit:cover;object-position:top;height:100%;transform:scale(1);box-shadow:1px 1px 10px 0 rgba(0,0,0,.1);transition:all .3s ease-in-out;} &:hover img {transform:scale(1.05);box-shadow:unset;filter:brightness(80%);transition:all .3s ease-in-out;} &::before {content:"";position:absolute;left:0px;right:0px;top:0;bottom:0px;background:transparent linear-gradient(180deg, #00000000 0%, #0000002F 23%, #0000006C 65%, #00000089 100%) 0% 0% no-repeat padding-box;z-index:1;} &::after {content:"";position:absolute;left:0px;right:0px;top:0;bottom:0px;background:url(../assets/images/hidden-images.png) center no-repeat;z-index:-1;} /* & img img {height:100%;} */ &.author {width:24px;height:24px;padding-bottom:0!important;display:inline-block;vertical-align:middle;box-shadow:none;overflow:visible; & img {border-radius:50px;} } } &.img.author {width:24px;height:24px;padding-bottom:0!important;display:inline-block;vertical-align:middle;margin-right:10px; &::before{display:none;} &::after {display:none;} } &.card-content {display:block;position:relative;height:100%;padding:30px 25px 140px 58px; &::before {content:"";position:absolute;left:16px;top:29px;width:24px;height:24px;background:url(../assets/images/icon_quotes_24px.svg) no-repeat center/100%;} & p {color:#4a4a4a;margin:10px 0px;padding:0; display:block;height:100%;} & h3 {padding:0px 0px;margin:0;} } &.next-btn, &.prev-btn {cursor:pointer; position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;background:#fff url(../assets/images/arrow-next.svg)center no-repeat;transform:rotate(180deg);background-size:20px;border:0;border-radius:50%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.3);box-shadow:0 3px 6px rgba(0,0,0,.3);} &.next-btn {right:0;margin-left:2px;transform:rotate(0deg);right:15px;} &.author-name {color:#76767E;font-size:13px;text-align:left;/*float:left;*/} &.link::before {background:url(../assets/images/link.svg)center no-repeat;background-size:18px;} &.close-menu {position:fixed;top:50px;left:-60px;display:block;width:55px;height:50px;z-index:99; &::before {content:"";display:inline-block;width:55px;height:50px;background:#F4E949 url(../assets/images/close-menu.svg)center no-repeat;background-size:24px;box-shadow:0px 3px 6px #0000004D;border:1px solid #F4E949;} } &.answer {font-size:11px;text-transform:uppercase; &::before{content:'';display:inline-block;vertical-align:middle;margin-right:10px; width:15px;height:15px;background:url(../assets/images/answear.png)center no-repeat;} } } .title-category {text-transform:uppercase;font-weight:bold;font-size:14px;display:flex;align-items:center; & select {background:#F4E949;text-transform:uppercase;border:none;padding:4px 6px;font-weight:bold;font-size:14px;} } & span {display:inline-block;/*margin-top:15px;*/ font-size:13px;color:#76767E; &.time::before {content:'';display:inline-block; vertical-align:middle;margin-right:10px;background:url(../assets/images/time.png) center no-repeat;width:13px;height:13px;background-size:13px;} &.messege::before {content:'';display:inline-block;vertical-align:middle;margin-right:10px;background:url(../assets/images/messege.png) center no-repeat;width:13px;height:13px;background-size:13px;} &.photo-image {content: '';display: inline-block;vertical-align: middle;background: url(../assets/images/photo-number.png) left center no-repeat;width: 15px;height: 20px;background-size: 16px;margin: 0 10px;padding-left: 18px;color: #fff;line-height: 20px;} } /* header */ body >header {position:sticky;top:-40px;box-sizing:border-box;z-index:99;background:#fff;width:100%;min-width:360px;padding-top:40px;display:block;box-shadow:0px 3px 6px #0000000F;transition: transform 0.4s ease; & .wrapper {display:block;padding:0px 15px;position:relative;margin:0 auto;/*max-width:460px;*/ &::after {display:none;} & nav {display:none;margin-bottom:30px; & a {display:inline-block;position:relative; vertical-align:middle;text-decoration:none;cursor:pointer;color:#000;transition:color .3s;margin-right:30px; font-size:14px;/*font-weight:600;font-family:"Vollkorn",serif;*/ &:after {content:"";display:inline-block;width:0;height:10px;background-color:#F4E949;position:absolute;top:10px;left:0;z-index:-1;transition:width .3s ease-in-out;} &:hover:after, &.active:after {width:100%;transition:width .3s ease-in-out;} &:last-of-type {margin-right:0px;} } &.top {position:absolute;top:-40px;z-index:1;display:flex;margin-bottom:0;min-height:40px;padding-bottom:0; & a {text-transform:none;font-size:13px;color:#2F2F33;white-space:nowrap;margin-right:15px;font-weight:400;vertical-align:bottom;} &.social {display:none;} } } & menu {display:flex;align-items:center;/*justify-content:space-between;*/width:100%;overflow:hidden;min-height:65px; & .close-search {cursor:pointer; position:absolute; left:10px; top:29px; padding:0;} & a { &.search {position: absolute;right: 65px; &::before {content: "";display: block;width: 30px;height: 25px;background: url(../assets/images/icon-search.svg)center no-repeat;/*background-size: 26px;*/} &.active::before{background: url(../assets/images/close-menu.svg) center no-repeat;background-size: 18px;} } &.hamburger-btn {display:flex;align-items:center;width:16%;max-width:60px; &::before {content:"";display:inline-block;width:31px;height:19px;background:url(../assets/images/hamburger-menu.svg)center no-repeat;background-size:31px;} & .icon {width:100%;height:100%;} } &.zodiac {position: absolute;right:15px;font-size:0;background:url(../assets/images/zodiac.svg)center no-repeat;width:40px;height:40px;background-size:40px; &::before {content: 'Секция Хороскоп';position: absolute;top: -10px;right: 20px;background: #ffffff;width: 110px;height:20px;line-height: 20px;text-align: center;border-radius: 3px 3px 0 3px;color: #000;font-size: 13px;white-space: nowrap;z-index: 2;box-shadow: -1px 0px 7px 1px rgba(0,0,0,0.75);visibility: hidden;} &:hover::before {visibility:visible;} } } &.category-page { & label.title-category {display:none;} & a.hamburger-btn {width:10%;max-width:40px;} & .logo {margin-left:20px;} } } } &::after {content:"";display:block;width:100%;height:40px;background-color:#F4E949;position:absolute;left:0;top:0;z-index:-1;} } body > nav {position:fixed;z-index:99;top:0;bottom:0;left:-365px;max-width:90%;width:296px;padding-top:24px;display:block;background:#fff;padding-bottom:100px;height:100vh;max-height:calc(100vh - 40px); transition:left .4s;overflow:visible;overflow-y:auto; &::-webkit-scrollbar {width:0.3em;} &::-webkit-scrollbar-track {box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);} &::-webkit-scrollbar-thumb {background-color:darkgrey;outline:none;} & .logo {width:244px;background-size:244px;margin:0 0px 40px 40px;} &.active {-webkit-transition:left .4s; transition:left .4s;left:0;box-shadow:6px 3px 12px #0000006B;background:#fff;opacity:0.95; & .close-menu {left:296px;-webkit-transition:left .4s; transition:left .4s;} } & .sub-menu {padding-left:20px;max-height:0;overflow:hidden;transition:max-height .4s; & a {font-size:18px;} } & > ul {margin-left:40px;} & li a {font-size:22px;font-weight:bold;position:relative;display:inline-block;margin-bottom:20px; } & li.has-sub{position:relative; &::after {content:"";display:inline-block;width:10px;height:10px;position:absolute;right:20px; top:5px;background:url(../assets/images/next.svg)center no-repeat;background-size:auto;} } & li.open .sub-menu {max-height:1000px;transition:all 1s;} & li.has-sub > a.active + ul.sub-menu { max-height:500px;overflow:visible; } } nav a { &:after {content:"";display:inline-block;width:0;height:10px;background-color:#F4E949;position:absolute;top:10px;left:0;z-index:-1;transition:width .3s ease-in-out;} &:hover:after, &.active:after {width:100%;transition:width .3s ease-in-out;} &.logo { &::after {display:none;} &:hover:after, &.active:after {display:none} } } article.big-article.inside div.text, .text.inside {position:absolute;top:0;text-align:left;} /* main */ body > main {display:block;position:relative;box-sizing:border-box;width:100%;overflow-x:hidden; & section { &.horizontal { & header {padding:30px 15px; & h2.title {margin-left:0;} } & .wrapper{ &.flex {display:flex;overflow-x:auto;overflow-y:hidden; >.img {width:14.5%;min-width:136px; margin-right:15px;margin-top:150px;margin-bottom:50px; padding-bottom:0px; text-align:center;font-size:22px;letter-spacing:-0.22px;line-height:36px;text-transform:uppercase; &:hover img {transform:scale(1.1);} &::after {content:'';display:inline-block;height:36px;width:100%;background-color:#F4E949;left:0px;width:100%;height:36px;top:unset;bottom:0px;} &:nth-of-type(6n+6) {margin-right:0;} & img {height:76px;transform:scale(1);transition:all .4s;left:0;bottom:10px;object-fit:none;} } } } } &::after {content:"";display:block;clear:both;} &.wrapper {display:block;width:100%;margin:0 auto;height:100%;padding:0px 15px; &.right {top:0;right:0;width:100%;padding:20px 15px;margin:unset; & div.text h3 a {color:#fff;} & .close {top:15px;right:15px;} & a.category {padding:4px 22px 5px;margin-left:0;z-index:1;} } } & header {display:flex;align-items:center;justify-content:space-between;padding:30px 0px; & h2.title {font-size:30px;letter-spacing:-.7px;margin-left:-5px;white-space:nowrap; &::after {left:-13px;} } &.category {display:block;padding:15px 15px;width:100%; &::after, &::before {display:none;} & h2 {margin-bottom:20px; &::after {display:none;} &.title {font-family:Raleway,sans-serif;font-size:1.75rem;font-weight:800;line-height:1.1428571429;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} } & a.category {margin-left:0px;padding:4px 22px 20px;} } } & .article-text { & p {font-size:18px;} & > p:first-of-type::first-letter {float:left;margin-bottom:0;padding:0 4px 8px;font-size:86px;font-family:Vollkorn ,'serif';margin-bottom:-10px;margin-right:10px;line-height:1;color:#F4E949;} & section {margin-top:40px;} } & article {width:100%;display:block;margin-bottom:15px; & div { &.text {position:relative;z-index:1;/*margin-top:15px;*/ & h2 {font-size:20px;} & h2 a {display:block;left:0!important; -webkit-background-clip:text; -webkit-text-fill-color:#2F2F33;;background-image:linear-gradient(to right,#F4E949,#F4E949 50%,#fff 50%);background-size:200% 100%;background-position:-100%;transition:all 0.3s ease-in-out; &:before{ display:block;content:'';width:0;height:3px;bottom:5px;left:0;bottom:-3px;z-index:0;position:absolute;background:#F4E949;transition:all 0.3s ease-in-out;} &:hover{background-position:0%;-webkit-text-fill-color:#DCD017; &:before{ width:100%; } } } & a.category {position:relative;text-align:left; &:hover {opacity:1;/*box-shadow:2px 0px 2px #76767E;*/transition:all .3s ease;} } & p {padding:0;margin-top:13px; margin-bottom:35px;font-size:16px;line-height:1.5789473684;color:#a0a0a0;;font-family:"Poppins",sans-serif;font-weight:400; } &.inside {padding:0px 14px 23px;top:10px; & h2 {color:#fff;font-weight:600; & a {-webkit-text-fill-color:#fff; &:hover {-webkit-text-fill-color:#F4E949;} } } } } &.article-text {max-width:100%!important; & p {padding:0;} & > p:first-of-type::first-letter {float:left;margin-bottom:0;padding:0 4px 8px;font-size:86px;font-family:Vollkorn ,'serif';margin-bottom:-10px;margin-right:10px;line-height:1;color:#F4E949;} & article.sm-horizontal-article{ background:#F9F9F9;display:flex;width:100%;align-items:center;justify-content:space-between; & .img-wrapper {height:85px;width:110px;margin-right:29px;position:relative;padding-bottom:0; & img {object-fit:contain;left:0; position:absolute;width:auto;} } & div {width:50%; & h2 {font-size:15px;} } } & ul {line-height:1.5789473684;font-size:1.1875rem; & li {list-style-type:disc;} } } } &.big-article {max-width:unset!important; & div.text-inside{position:absolute;top:15px;right:15px; & nav.social {display:block; & .facebook {background:#4A90E2 url(../assets/images/facebookwhite.png)center no-repeat;margin-bottom:10px;border-radius:50px;width:30px;height:30px;} & .photo {background:#EF5285 url(../assets/images/photo-white.png)center no-repeat;border-radius:50px;width:30px;height:30px;} } } & > img{display:block;width:100%;height:auto;} & .img {width:100%;border:none; & img {width:100%;/*height:280px;height:540px;*/} } & div.text {/*text-align:center;*/text-align:left;} & div.article-text { & p {margin-bottom:30px;padding:0;color:#0e1738;} } } &.horizontal {display:block;margin-bottom:30px; & a.blank {display:flex;align-items:flex-start;box-shadow:none;border:none;border-bottom:2px dotted #000;margin-top:0px;border:none; &::before {content:'';display:inline-block;width:33px;height:30px;vertical-align:middle;width:80px;height:80px;background-size:80px; background:url(../assets/images/icon-aside-blank.svg)center no-repeat;} } & .img {width:100%; & img {width:100%;} } & div.text {/*padding:0px 25px;*/ & p {display:none; &.article-summary {display:block;width:100%;float:left;text-align:left;padding:0;color:#fff;font-size:1rem;font-weight:600;} } & h2 {color:#0e1738;font-weight:600;} & span.date {float:unset;clear:none;} } &.big-article .img img {height:auto!important;} } &.dark {background:#F9F9F9!important;display:block;width:auto; text-decoration:none;color:#0e1738;border:none!important;position:relative;margin:15px;margin-bottom:45px; & nav {display:block;padding:20px; & a {margin-bottom:15px;font-size:1.1875rem;font-weight:600; &::before {margin-right:15px;} } } & h2.title {color:#fff;} & div.text {padding:20px;} } &.comment {max-width:unset;width:100%; & header h2 {margin-bottom:0 !important;} & div.text{text-align:left!important;} & .author-name {font-size:15px;color:#000;margin-right:10px;font-family: 'Vollkorn';font-weight: 700;} & .text{ margin-bottom:30px; & p {margin:10px 0 5px;color:#000;font-size:15px;} & .answer {font-weight:700;} } & label {font-weight:bold;font-size:18px;} & textarea {min-height:130px;width:100%;display:block;box-sizing:border-box;padding:10px 20px;margin:10px 0px 20px 0px; border:1px solid #E1E1E1;font-size:14px;color:#7D7D7D;} & .show-more {text-transform:uppercase;font-size:14px;/*font-family:"Poppins", "sans-serif"!important;*/background:none; &::after {content:"";display:inline-block;width:100%;height:10px;background-color:#F4E949;position:absolute;top:12px;left:0;z-index:-1;} &::before {content:"";display:inline-block;width:0;height:10px;background-color:#F4E949;position:absolute;top:12px;left:0;z-index:-1;transition:width .3s ease-in-out;} &:hover::before, &.active::before {width:100%;transition:width .3s ease-in-out;} &:hover::after {width:0;} } } } &.carousel {position:relative;display:block;margin:30px auto;/*margin-bottom:0px;*/ width:100%;max-width:1170px; &.first{margin-top:30px; & button {top:5px;} } & .wrapper {overflow:visible;display:block;text-align:right; & div.all-inner {overflow:visible;} & article {display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:30px; & div.text {margin-top:15px; h2 {font-size:16px !important;font-family:inherit;margin-bottom:10px;color:#2F2F33;} } & a.show-more {position:relative;} } & button {position:relative;display:inline-block;margin-top:unset;} } & div.all-slide {display:flex;transition:transform 0.5s ease-in-out;margin-top:30px;text-align:left;overflow:visible; & article {position:relative;min-width:210px;max-width:210px; &.ban {max-width:unset;} } } &.special {background-color:#F9F9F9;max-width:unset;z-index:0;padding-top:30px;margin-bottom:50px;overflow:visible; & div.author {background-color:#F44848;width:254px;color:#fff; & h3 {color:#fff;text-transform:uppercase;} } & .wrapper {overflow:visible;padding:0; & div.all-inner {overflow: hidden;padding-left: 15px; &::before{content:'';position: absolute;left: calc(-100% - 30px);top: 0;height: 100%;width: 100%;background: #f9f9f9;z-index: 1;} } & div.all-slide {overflow:visible;} & article {min-width:345px; & a.img {width:345px; &:hover {transform:scale(1);} } & a.category {background-color:#F44848;color:#fff;} & div.text h2 a{ &::before{background:#F44848;} &:hover {-webkit-text-fill-color:#F44848;} } } & button {background-color:#fff;border:1px solid #000; &:hover {background-color:#F44848;border:1px solid #F44848;} } } } &.hot {max-width:unset; & .wrapper {overflow:visible;padding:0; & button {width:50px;height:50px;background-size:20px;margin-right:0;} & article {/*display:none;*/min-width:100%;margin:0;padding: 0 0 0 15px; &.active {display:flex;} & a.img {padding-bottom:105%;} & div.text {width:345px;position:relative;padding:30px 25px; background:#fff;top:-75px;left:10px; display:block;box-shadow:5px 12px 16px #00000021;text-align:left; & h2 {font-size:24px;} & p {font-size:14px;font-family:Poppins, "sans-serif";} } } & h3 {text-transform:uppercase;} & div.all-slide {margin-right:0;} } } &.gallery {max-width:unset;min-height: 650px; & >img {position: absolute;width: 100%;height: 100%;object-fit: cover;opacity: 0;transition: opacity 0.5s ease; &.active{opacity:1;}; } & .wrapper {right: 0;margin: auto; & button{position: absolute;right:0; &.arrow-prev{right:unset;left:0;} } } & .text.inside{width: 100%;text-align: center;position:unset;padding:0 35px;box-sizing:border-box; & h1{color: #fff;text-shadow: 0px 0px 1px black;text-align: center;font-size: 48px;line-height: 56px;margin-bottom: 0; &:hover {color:#f4e949;} } & span {color: #fff;text-shadow: 0px 0px 1px black;} } & .all-slide {gap: 15px; &>div{display: flex;flex-direction: column;width: 100%;flex:0 0 100%;justify-content:flex-end; &.active article, &.is-active article, &:hover article {border-color: #fff; & .cnt {border-color: #f4e949;} } } & h1::after {display:none;} & article{display:flex;flex-direction:row;align-items: start;max-width: unset;min-width: unset;width: 100%;margin:20px 0 0 0;height: 130px;padding-top: 25px;border-top: 2px solid rgb(255 255 255 / 60%); & a {display: block;padding: 0;height: 70px;flex: 0 0 100px;margin-right:15px;color: #fff;-webkit-text-fill-color: #fff;text-shadow: 0px 0px 1px black; &.cnt{width: 45px;height: 45px;border: 2px solid rgb(255 255 255 / 40%);box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 40%);border-radius: 50%;text-align: center;line-height: 45px;font-family: Poppins;flex: 0 0 45px;margin-right: 25px;} &::before{display:none;} } & div.text {margin:0 !important; & a{text-align:left;} } } } & div.author {position:relative;margin:0 auto;z-index:2;top:-20px; width:347px;height:156px; text-align:center;padding-left:0; & h3 {font-size:35px;text-transform:uppercase;color:#000;} } } &.horoskop {overflow:visible; & header {padding:30px 15px;} & .show-more {display:none;} & button {top:-75px;} & .wrapper {overflow:visible; & div.all-slide { & article{width:100%;min-width:unset;text-align:center;display:block;margin-right:30px;text-transform:uppercase;letter-spacing:-.22px;font-size:22px;font-weight:600; .img {width:136px;box-shadow:none;overflow:visible!important; &:hover {filter:brightness(100%);} &::after {content:"";display:inline-block; width:100%;height:36px;background:none;background-color:#F4E949;position:absolute;top:60px;left:0px;z-index:-1;} &::before {display:none;} & img {left:0px;height:86px;object-fit:contain;box-shadow:none!important;} } } } } } } &.background {margin-top:70px;padding-bottom:70px; &::before {content:"";display:block;width:100%;min-width:100%;height:100%;position:absolute;top:auto;left:0;z-index:-1;background:url(../assets/images/category-esg-bg.jpg)center no-repeat;background-size:cover;} &::after {display:block;content:"";position:absolute;left:0px;right:0px;top:0;bottom:0px;background:-webkit-gradient(linear,left top,left bottom,from(rgba(14,23,56,.1)),to(#0e1738));background:linear-gradient(to bottom,rgba(14,23,56,.1),#0e1738);} & > section {z-index:1;} & header {background:transparent; & h2.title {color:#fff;z-index:99; &::after {display:none;} } & div.category { & a {color:#fff;} } } & .show-more {color:#fff;z-index:1;} & article {position:relative;margin-bottom:1px!important; &::after {content:"";position:absolute;left:0px;right:0px;top:0;bottom:0px;background-color:#0e1738;z-index:-1;} } &.dark {background:transparent; &::after {display:block;content:"";position:absolute;left:0px;right:0px;top:0;bottom:0px;background:-webkit-gradient(linear,left top,left bottom,from(rgba(14,23,56,.1)),to(#0e1738));background:linear-gradient(to bottom,rgba(14,23,56,.1),#0e1738);} & section { &.horizontal { & article {padding-bottom:20px;margin-bottom:10px!important;} } } } } &.dark {background:#F9F9F9;overflow:hidden;width:100%;padding:20px 0px;padding-bottom:10px; &::after {content:"";display:block;background:#F9F9F9;width:100%;min-width:100%;height:100%;position:absolute;top:0px;left:0;z-index:-1;} & .carousel {max-width:1170px;margin:0 auto;overflow:visible; & div.all-slide {overflow:hidden;} & article {position:relative;height:265px;overflow:hidden; & div.text.inside {text-shadow:0px 1px 0px #000000B5;top:unset;bottom:0;box-sizing:border-box;padding-right:15px; & h2 {font-size:20px;line-height:22px;padding-top:10px;} & span {color:#FEFEFF;margin-top:10px;margin-right:20px;} } & .show-more {display:block;margin-top:19px;} &.big-article {/*overflow:visible;*/overflow:hidden; & div.text.inside {text-shadow:0px 1px 0px #000000B5; & h2 {font-size:20px;} } } } & >div {display:block;margin:0 auto; & div {display:block;width:100%; & article {min-width:300px;margin-bottom:15px;} } } & button {display:none;} } & .horizontal { & article {margin-bottom:0px!important;} } } &.short {max-width:750px;padding:0px 20px; & article {background:#f0f0f0;border-radius:16px;align-items:flex-start;padding:21px 20px 14px; &.horizontal {display:flex; & div.text {width:100%;padding:0;margin:0;/*padding-left:30px;*/padding-left:15px; & h3 {margin-bottom:10px;margin-top:0;} & span {font-size:0.876rem;font-family:"Noto Sans",sans-serif;font-weight:100;color:#4a4a4a;} & h4 {margin-top:0;} } & a.blank::before {width:50px;height:50px;} } } & h2.title::after {display:none;} } &.horizontal { & header {padding-top:0px; & button {position:relative;} } & article {padding:15px;padding-top:0px;} & a.img::after {background:#E1E1E1 url(../assets/images/hidden-images.png) center no-repeat;} } &.gallery-slider {/*width:100%;max-width:1240px;margin:0 auto;margin-top:70px;overflow:hidden;*/display:flex; & article {width:100%;/*max-width:843px;opacity:0;*/transition:transform .3s ease;padding-top:40px; & a.img {width:100%;position:relative;top:0;} &.image { & img {display:block;height:auto;width:100%;object-fit:cover;} & div.text {position:relative;top:58%;left:unset;} } } } & .pagination {display:flex;align-items:center;justify-content:center;width:100%;margin:20px auto 0;font-size:1.3125rem;font-weight:600;border-top:1px dotted #dedede;padding-top:30px; & a {margin:0 10px;padding:10px 0;width:46px;display:none;text-align:center;color:#0e1738; &.active {background-color:#f0f0f0;display:block;} &:hover {color:#d62628;} } } &.light::after {content:"";display:block;background:#fff;width:100%;min-width:100%;height:100%;position:absolute;top:0px;left:0;z-index:-1;} & p.article-summary {display:block;width:100%;float:left;text-align:left;padding:0;color:#fff;font-size:1rem;font-weight:600;} & aside {width:100%;padding:15px 0px; & h2.title {display:inline-block;padding:10px 15px; margin-bottom:20px;font-size:14px;color:#2F2F33;text-transform:uppercase;background-color:#F4E949; &::after {display:none;} } & article {width:100%;display:flex;justify-content:space-between;margin-bottom:15px; & a { &.img {max-width:110px;margin-right:15px;padding-bottom:0px;height:85px; & img {height:85px;object-fit:cover;} } } & a.category {margin-top:5px;padding:0px 10px;display:inline-block;} & div.text {width:100%;padding:0;margin-top:0; & span {font-size:13px;color:#76767E;display:inline-block;} & h3 {margin-bottom:0;margin-top:0px;font-size:15px;} & .time::before {margin-right:5px;} } } } & label.title-category {font-size:20px;white-space:nowrap;letter-spacing:-.5px; & select {margin-left:5px;width:100%;max-width:203px;} } } &.detail.gallery { & .dark {display:flex;align-items:flex-start;justify-content:space-between; & .wrapper {max-width:1600px;} & .right {margin-top:0px;} & article {flex:70% 0 0;max-width:1010px !important; & form {position:unset;} & img {display:block;width:100%;} } } } & > .wrapper > section {display:block;margin-top:20px; & article { & a { &.img {padding-bottom:77%;overflow:hidden;} } } &.search { & article { & .show-more {display:none;} } } } & > .dark.banner {padding-top:70px;} &.detail{ & > .wrapper { & section { & article{ & .show-more {display:none;} &.comment { & .show-more {display:inline-block;} } } } } & section.dark { & > .wrapper { & header { & a.category {padding-bottom:0px;} } & header.detail {padding:0px; & a.category {margin-left:0;position:relative;top:unset;} & div.text {padding:0px 0px 0px;text-align:center;width:100%;} & span.time {display:inline-block;} & h1.title {font-size:26px;line-height:1;margin-top:15px;} } } & article{ &.big-article.horizontal {display:flex;flex-wrap:wrap;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;; & >div {display:contents;} & h1.title {text-align:left;} & a.img {order:2;height:auto;padding-bottom:0;width:100%; } & p.article-summary {order:3;padding:0px 20px;box-sizing:border-box;} & span.date {float:left;clear:both;margin-bottom:20px;} } } } & section { & header{ & h2.title {margin-left:0px;} & .show-more {display:none;} } } & .wrapper { & section.horizontal {flex-wrap:wrap;} } & .big-article .img {padding-bottom:67.25%;overflow:hidden; &:hover{transform:scale(1);filter:brightness(100%);} } & .big-article .img-wrapper {overflow:hidden;} &.short { & .wrapper {display:flex;flex-direction:column;margin:0 auto;} & div.text.right {order:2;} & section.gallery-content{order:1;overflow:hidden; & .gallery-slider {position:relative; & article {width:100%;min-width:100%;} } button {top:50%;} } } &.short { & header {padding:0px 15px;padding-bottom:20px;} & h1.title{margin:0px;text-align:center;} & section.dark { & span.time {display:block;text-align:center;} & a.category {text-align:center;margin:auto;display:flex;align-items:center;justify-content:center;width:fit-content;} } & .wrapper { & > article {order:2;} & section.gallery-content{width:100%; & .image {min-width:332px;padding:0px; & img {height:100%;} } } } & .carousel.special { & section.wrapper {display:block;} } } &.calc { & .wrapper {align-items:baseline; & > section {padding:0px 0px;} } & .title {color:#0e1738;font-family:Raleway,sans-serif;} } &.news { & header { & .title::after {display:none;} } } } &.category { & section.dark { & article {padding:0px; & div.text{position:absolute;bottom:10px;padding-left:15px; & span.time {color:#fff; &::before {background:url(../assets/images/time-white.png) center no-repeat;} } & h2 a {-webkit-text-fill-color:#fff;background-image:linear-gradient(to right,#F4E949,#F4E949 50%,#fff 50%);background-size:200% 100%; &:hover { -webkit-text-fill-color:#F4E949; } } } } & section.horizontal { & article {margin-bottom:15px!important;height:265px;overflow:hidden;} } } & >section.wrapper { & article.horizontal { & .show-more {display:none;} } } } } /* components */ button { &.next-btn, &.prev-btn {display:block;cursor:pointer; position:absolute;top:50%;width:50px;height:50px;margin-top:-28px;background:#fff url(../assets/images/next.svg)center no-repeat;transform:rotate(90deg);background-size:20px;border:1px solid #000;z-index:9; &.active, &:hover {background:#F4E949 url(../assets/images/next-active.svg)center no-repeat;transform:rotate(90deg);border:1px solid #F4E949;background-size:20px;} } &.next-btn {right:0;margin-left:5px;transform:rotate(-90deg); &.active, &:hover {transform:rotate(-90deg);} } &.big-more {background-color:#F4E949;width:100%;font-size:14px;color:#2F2F33;height:50px;text-align:center;border:none;text-transform:uppercase;font-weight:bold;transition:all .3s ease;cursor:pointer; &:hover {color:#F4E949;border:2px solid #F4E949;background-color:#fff;} } } /* nav */ nav {display:flex;align-items:center;position:relative; & a{display:flex;align-items:center;text-decoration:none;color:#000;text-transform:uppercase; } &.news {padding-left:15px;display:block;padding-bottom:30px; & a {margin-right:5px;display:inline-block; &:hover {text-decoration:underline;} &::before {width:20px;height:20px;} &.link::before {vertical-align:middle;} } &.category{ &::before {border-width:8px 0 8px 10px;} &::after {border-width:6px 0 6px 8px;} } } &.tags {flex-wrap:wrap;margin-top:15px;text-transform:uppercase;position:relative; &:first-of-type {margin-top:35px; ::before {content:"";display:inline-block;width:50px;height:1px;background-color:#000;position:absolute;top:-20px;left:0;} } & a {margin-bottom:4px;padding:0px 5px;text-decoration:none; text-transform:none!important;font-size:16px;color:#A1A1A1;font-family:Vallcorn, "serif";font-style:italic;letter-spacing:-0.16px; &:hover {color:#f4e949;} &::after, &::before {display:none;} } } } div { &.article-footer {font-size:.875rem; & p {font-size:.875rem;color:#0e1738;padding:0px 15px;margin:0;} } &.result {display:block;box-sizing:border-box;margin-top:60px;background-color:#f0f0f0;padding:40px 40px 35px;width:100%;max-width:750px; & h2 {font-size:1.3125rem;} & p {margin:0;line-height:1.5789473684;} } &.img {width:300px;position:relative;} &.card-text {position:absolute;bottom:0;} &.category {overflow:scroll;display:flex;align-items:center;white-space:nowrap; &::before, &::after {display:none;} & a {display:inline-block;margin-right:5px;margin-bottom:8px;padding:7px 10px;text-decoration:none;font-size:1rem;color:#d62628;border:1px solid #41549a;background-color:#0e1738;} } &.author {position:absolute;box-sizing:border-box; top:-30px;left:0px;background-color:#F4E949;width:190px;height:240px;z-index:-1;padding:20px 0 0 15px;text-align:left; & span {font-size:10px;display:block;color:#000;font-family:'Poppins';} & a {display:block; & img {position:unset;display:block;} } & h3 {text-transform:uppercase;font-size:18px;} } &.text.inside { & span.time::before {background:url(../assets/images/time-white.png) center no-repeat;} } .video {width:42px;height:42px;border-radius:50px;background:#F4E949 url(../assets/images/play_arrow.png)center no-repeat;position:absolute;top:20px;right:20px;background-size:23px;cursor:pointer;transition:.5s; &:hover {transform:rotateY(360deg)} } } iframe.popup {position:fixed;border:none;outline:none;overflow-x:hidden;width:100%;height:100%; top:0;left:0;z-index:100;opacity:0;transition:opacity 1s; &.active .template-popup-inner {-webkit-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);} } body.popup .template-popup {background:rgba(0,0,0,.3);display:none;font-size:0;height:100%;left:0;overflow:hidden;position:fixed;text-align:center;top:0;width:100%;z-index:100; & .template-popup-inner {height:100%;overflow:auto;;-webkit-transform:translateY(0%);-o-transform:translateY(15%);-ms-transform:translateY(15%);transform:translateY(15%);-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;-o-transition:transform .5s;transition:transform .5s; transition:transform .5s,-webkit-transform .5s;width:100%; &:before {content:"";display:inline-block;height:100%;vertical-align:middle;} & .template-popup-content {display:inline-block;position:fixed;vertical-align:middle;max-width:990px;top:0;left:60px;right:60px;margin:0 auto; background:#fff;padding:20px;box-sizing:border-box; & h6 {font-size:24px;text-align:center;text-transform:unset;color:#000;margin:0 0 10px; &.err {color:#be1e1e;} } & .close-btn {position:absolute;right:-55px;top:0px;padding:0;text-align:right;background:#F4E949;outline:none;border:none;cursor:pointer;z-index:-1; &::before {content:"";display:inline-block;width:55px;height:50px;background:url(../assets/images/close-menu.svg)center no-repeat;transform:rotate(-90deg);-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;-o-transition:transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s;} &:hover::before {transform:rotate(90deg);-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;-o-transition:transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s; } } & form { & div{text-align:left;margin-bottom:15px; &.center{text-align:center;} & button {background:#F4E949;border:2px solid #F4E949;display:inline-block;padding:7px 18px;text-align:center;color:#000;font-weight:bold;text-transform:uppercase;-webkit-transition:background-color .4s;-o-transition:background-color .4s;transition:background-color .4s; &:hover {background-color:#fff;} } } & label {text-align:left;font-size:18px; } & input {width:100%;font-weight:normal;border: 1px solid black;} & span {font-size:16px; & input {width:auto;vertical-align:middle; &[type="checkbox"] {height:auto;margin: 0 0 4px;} } & a {color:#F4E949;font-weight:bold; &:hover {text-decoration:underline;} } } } } } } body.popup .template-popup {display:block;} /* form */ form {position:relative;box-sizing:border-box; &.category {display:inline-block;} &.search-form {position: fixed;z-index: 2;right: 0;top: 105px;width: 100%;background-color: #fff;padding: 0px 15px 15px;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;transform: perspective(600px) rotateX(-90deg);transform-origin: top center;transition: all 350ms cubic-bezier(.55,0,.1,1);will-change: transform; & input[type="text"]{border:1px solid #000;} & button {position: absolute;right: 15px;top: 0;margin: 0;padding:0;height: 38px;width: 38px;background: url(../assets/images/icon-search.svg) no-repeat center;} &.bigger {padding:5px 0 15px;max-width: unset;position: unset;transform: none; & button{right:0;top:4px;} } } & table {width:100%;position:relative;max-width:750px;border-collapse:collapse;line-height:1.1428571429; & th {padding:10px 5px;font-size:1.1875rem;font-size:.875rem;background-color:#f0f0f0; &:first-child {border-left:0;} } & td {padding:6px 10px; &:first-child {border-left:0;} } & tbody td, & tbody th {border-left:1px dotted #b2b2b2;text-align:center;font-size:1.1875rem;} & tbody td:first-child {text-align:left;font-size:1rem;} & tr:nth-child(2n) td {background-color:#fafafa;} & tfoot {font-weight:700; border-top:4px solid #f0f0f0;border-bottom:4px solid #f0f0f0; & td {padding-top:20px;padding-bottom:20px;font-size:1.1875rem;font-weight:700; &.total {padding-left:56px;} } } } & label {display:block;font-weight:600;box-sizing:border-box; & input, & select {margin-top:10px;} & select {background:url(../assets/images/select-bg.svg) no-repeat center right;/*appearance:none;*/cursor:pointer;} } & input, & select {height:30px;/*min-width:196px;*/box-sizing:border-box;font-size:1.1875rem;font-weight:600;padding-left:8px;} & input[type="text"] {height:100%;font-size:14px;box-sizing:border-box;margin-top:0;border:none;color:#A1A1A1;background-color:#fff; padding:10px 20px;width:100%;transition:width 0.4s ease;} & input[type="text"]::placeholder {font-size:0;} & input[type="submit"] {position:absolute;z-index:2;right:0;top:0;width:32px;height:100%;border:0;background:0 0;cursor:pointer;} & button {position:relative;margin-top:15px;text-decoration:none;text-align:center;border:none;outline:0;padding:7px 6px 10px;cursor:pointer;} & > section {width:100%;position:relative;max-width:750px;border-collapse:collapse;line-height:1.1428571429;margin:unset;display:flex;flex-wrap:wrap;} } .search.active+.search-form {opacity: 1;visibility: visible;transform: perspective(600px) rotateX(0);} .s {width:100%;padding:0 15px;} .t {width:100%;padding:0 15px;} label.search::before {content:"";display:inline-block;width:18px;height:19px;background:url(../assets/images/icon-search.svg)center no-repeat;background-size:18px;} main > .wrapper > section > section article.horizontal {margin-bottom:40px;} section.half.page, section.search {margin-top:40px !important;} section.half.page + aside, section.search + aside {margin-top:30px;} section.half.page article {width:100%;} section.half.page article p {padding:20px 0px} .page article p a {color:#d7ce4d;text-decoration:underline;} main.tag h1.title {margin:0;color:#0e1738;} div.powered-by {display:block;width:100%;margin-top:220px;text-align:center;border-bottom:1px solid #dedede;color:#7d8388;padding:15px;} div.powered-by a {text-decoration:underline;} .wrapper .err404 {margin-top:70px; & h1 {width:125px;} } /* footer */ body > footer {width:100%;margin-top:70px; & section {max-width:1170px;margin:0 auto;padding:20px 20px 20px 20px;border-top:1px solid #E1E1E1; & article {width:100%; &.nav{display:flex; & nav{ &.left{width:142px;display:block;text-align:center;margin:10px auto;float:unset; & a {text-align:center;display:inline-block;} } &.right {width:50%;display:block;text-align:center;margin:10px auto;float:unset;} & a {text-align:center;margin-left:4px;padding-right:0px;display:block;} } } } & h2.title {text-align:center;font-size:30px;font-weight:normal;letter-spacing:-0.3px;color:#000;margin-bottom:10px;text-transform:none; &::after {display:none;} } & input {border:1px solid #E1E1E1;width:100%;height:50px; &::placeholder {color:#7D7D7D;font-size:16px;letter-spacing:-0.16px;font-weight:normal;} } & label {color:#A1A1A1;font-size:16px;font-weight:normal;text-align:center;display:block;margin-bottom:20px; } & button {display:inline-block;width:20px;height:16px;vertical-align:center; background:url('../assets/images/arrow-submit.png') center no-repeat;position:absolute;right:10px;background-size:10px;} & .logo {display:block;background:url(../assets/images/logo.svg) center no-repeat;width:204px;height:50px;margin:0 auto;margin-top:10px; &:hover::after, &.active::after { display:none; } } & nav {display:block;margin-top:10px; & a {transition:color .3s;font-size:16px;text-align:center;line-height:30px;position:relative; &::before {height:20px;width:20px;} &:after {content:"";display:inline-block;width:0;height:10px;background-color:#F4E949;position:absolute;top:13px;left:0;z-index:-1;transition:width .3s ease-in-out;} &:hover:after, &.active:after {width:100%;transition:width .3s ease-in-out;} } &.social {position:relative;float:unset;width:100%;display:flex;text-align:center;justify-content:center;align-items:center; & a {margin-left:20px;width:19px;padding:0;transform:scale(1); &:hover {transform:scale(1.1);} } } &.right { & a {display:block;padding:3px 15px;font-size:16px;font-weight:normal;letter-spacing:-0.16px;text-align:center; &::before {height:20px;width:20px;} } } &.left {float:left; & a{display:block;font-size:16px;font-weight:normal;letter-spacing:-0.16px;text-align:center; &::before {height:20px;width:20px;} } } } & p {display:block;padding:5px 0px 20px;text-align:center;font-size:14px;color:#000;float:unset;margin:0;} } } .article-text {padding:0px 0px; & h2.title {display:inline-block;margin-bottom:20px;} } .img-wrapper {position:relative; & img {display:block;width:100%;} } .img-footer{display:flex;position:absolute;left:0;right:0;bottom:0;background-color:rgba(255, 255, 255, 0.5);flex-direction:row-reverse;justify-content:space-between; & span {padding:3px 10px;color:#000;font-size:13px;font-family:"Poppins", sans-serif; &.source{text-align:right;} } } div.category {overflow:unset;display:block;white-space:normal;} .pie {display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .pie a b {position:absolute;left:18px;color:#fff;transition:.5s;z-index:3;} .pie a {width:45px;height:45px;text-align:center;line-height:45px;font-size:15px;margin:0 10px;display:block;border-radius:50%;position:relative;overflow:hidden;border:2px solid #fff;z-index:1;} .pie a:before {content:"";display:block;position:absolute;top:100%;left:0;width:100%;height:100%;transition:.5s;z-index:2;} .pie a:hover b {color:#fff;transform:rotateY(360deg)} .pie a:hover:before {top:0;} .pie:nth-child(1) a:before{background:#F4E949;} @media only screen and (min-width:576px) { body > main { & > .wrapper > section { &.search { & article { & .show-more {display:flex;width:fit-content;} } } } & .wrapper {/*width:100%;max-width:460px;*/padding:0px 15px;} & section { &.background { &::after {display:block;} &.dark { & .horizontal {padding:0px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px; & article {width:100%;padding-right:0px;} } } } &.dark { & .horizontal {padding:0px 0px;display:flex;flex-wrap:wrap;/*max-width:576px;*/ & article {width:50%;} } & .carousel {max-width:576px; & > div {max-width:576px;} } } &.tag { & artcle.horizontal {display:flex;align-items:flex-start;justify-content:space-between;width:100%; & a.img {padding-bottom:118px;} } } & section { & article.horizontal {display:grid;grid-template-columns:1fr 1fr;column-gap:10px;} } } &.category { & section.dark { & section.horizontal {padding:0px 15px; & article {height:auto;width:48%; &:first-of-type {margin-right:15px;} } } } } } section.dark section.horizontal {/*max-width:460px;*/margin:0 auto;} footer nav.right a {padding:3px 22px;} form { & table { & th {padding:10px 40px 14px;font-size:1.1875rem;} & td {padding:8px 32px;} } } body > footer { & section {display:flex;flex-wrap:wrap; & article { & nav.social { & a:first-of-type {margin-left:0px;} } &.nav {width:100%;display:flex; & nav{ &.left {width:60%;display:grid;grid-template-columns:auto auto;text-align:left; & a {text-align:left;} } &.right {width:30%;text-align:left; & a{text-align:left;} } } } } } } } @media only screen and (min-width:768px) { body > header { & .wrapper {/*max-width:768px;*/ & nav {margin-bottom:0px;} } } body > main {/*margin-top:30px;*/ & > .wrapper {display:flex;align-items:flex-start;justify-content:space-between; & >section { & article {display:inline-block;vertical-align:top;width:47.1%;display:inline-block;vertical-align:top;/*max-width:369px;max-width:352px;*/ margin-right:29px; &:nth-of-type(2n+2){margin-right:0px;} &.comment {width:100%;} & article.horizontal { & a.img {width:210px;padding-bottom:118px;} } &.dark {width:100%;} } } & section.short { & article {width:100%!important;margin-bottom:20px!important;} } } & aside {margin-top:10px; & article {width:100%!important;} } & .wrapper {/*width:100%;*//*max-width:768px; */padding:0px 15px; & article {width:50%;} & .big-article {width:100%;} } & section { & header {width:100%; &.detail {padding:0px 0px;} & div.text {max-width:863px;} &.category {padding:15px 0px;} } &.horizontal {display:flex;max-width:1170px;margin:0 auto;flex-wrap:wrap;padding:0 15px;margin-top:50px; & article {/*width:31.68%;*/ width:30.70%;margin-bottom:20px;margin-right:29px;padding:0px; &:nth-child(3n + 1) {margin-right:0px;} & .img {padding-bottom:76%;} &.dark {width:100%!important;margin:0px;margin-top:30px;margin-bottom:45px;} } /* & button {display:none;} & header { & .show-more {display:block;} } */ } &.dark { & .horizontal {margin-top:0;/*max-width:768px;*/padding:0px 15px;max-width:1170px; & article {margin-bottom:30px;/*padding-right:37px;*/width:48%; & .img {border:none;} } & header {padding:20px 20px;} } &.dark.banner { & .wrapper {display:flex;flex-wrap:wrap;flex-direction:row;width:100%;justify-content:space-between;} } & .carousel {max-width:1170px;padding:0px 15px; & >div {display:block;max-width:unset;margin:0 auto; & article {width:100%;min-width:300px;height:350px;} /* & > div {display:grid;grid-gap:10px;grid-template-columns:auto auto; } */ } } } & article { &.horizontal, &.horizontal.gallery-widget {display:flex;align-items:flex-start;justify-content:space-between;width:100%;max-width:unset; & div.images {display:flex; & a {overflow: hidden; &::after {content:'';display:block;width:100%;height:100%;position:absolute;z-index:1;background:url(../assets/images/hidden-images.png) top 10px left 10px no-repeat;} & img {display: inline-block; width: 100%!important;object-fit: cover;object-position: top;height: 100%;transform: scale(1);box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);transition: all .3s ease-in-out;opacity: 1; &:first-of-type {margin-right:0px;max-width:191px!important;margin-bottom:0;} } &:hover img {opacity:0.8;} &:hover::after {background:url(../assets/images/hover-img.svg) top 10px left 10px no-repeat;} } } &.dark {margin:0;padding:0px;margin-bottom:20px; & div.all-slide {display:flex; & .big-article {margin-right:0px;max-width:191px!important;margin-bottom:0; & .img {height:203px!important;width:188px;box-sizing:border-box;margin-right:0px; &::after {z-index:1;background:url(../assets/images/hidden-images.png) top 10px left 10px no-repeat;} } } & > div{ & article {margin-bottom:3px;height:100px; & .img {height:100px!important;width:164px;box-sizing:border-box;} } } } & .img, & .img-wrapper {padding-bottom:100px!important; /* & img {height:100px;} */ } & div.text, & div.text-wrapper {padding:0;text-align:left; & h3 {font-size:18px;} } } /* & .img {width:50%;} */ & div.text {width:100%; & p {display:block;padding:0px;} } } & div.text {/*padding:12px 0px 23px;*/margin-top:0px; &.inside{margin-top:15px;} } } & .pagination a {display:block;} &.gallery-slider { & article { & div.img {margin:0 auto;max-width:800px;} } } &.carousel { & div.all-slide {overflow:visible;} } } &.detail {margin-top:0; & section.dark {padding:35px 0px; & > .wrapper { & .right {margin-left:45px;} & header.detail { & h1.title {font-size:32px;line-height:normal;} } } & article {width:100%; } } } &.category { & >section.wrapper { & article.horizontal { & .show-more {display:inline-block;} } } & section.dark { & section.horizontal {padding:0px 15px; & article {height:auto;width:30.70%; &:first-of-type {margin-right:auto;} } } } } } section.horizontal section header {flex:100%;} nav.tags {width:100%;margin-left:0;margin-right:0; & a {border-radius:12px;} } .close {right:0;} form { & input[type="text"]::placeholder {font-size:13px;} } .s {width:50%;} main > .wrapper > section > section article.horizontal, .sm-horizontal-article {width:100%;display:flex; & a.img {padding-bottom:211px;} } .sm-horizontal-article {width:100%;display:flex;} } @media only screen and (min-width:992px) { body > header { & .wrapper {/*max-width:992px;*/ & menu {/*margin-bottom:18px;*/ & a.search {display:none;} & form {position: absolute;top: unset;right:65px;width:auto;transform: none;padding: 0px; & input[type="text"] {border: none;padding-right: 0;width:150px;transition:width .2s ease; &:focus {width: 300px;} } & button{right:0;} } } & nav {display:flex;padding-bottom:20px;align-items:center;justify-content:center; & a {font-weight:bold;} &.top.social {display:block;right:0; & a:hover::after, & a.active::after {width:0;} & a:hover {transform:scale(1.1);} } } } } body > main {overflow-x: unset; & section { &.horizontal { & article {width:31.53%;} } &.wrapper {display:flex;align-items:flex-start;justify-content:space-between;max-width:unset;margin:unset; & .search {min-width:770px;} } > &.wrapper {max-width:1170px;display:flex;margin:0 auto; & article {width:47.8%;} &.right {max-width:460px;order:2; & div.text h3 a {color:#0e1738!important;} } } & article { &.horizontal { & .img {width:370px;margin-right:20px;} } & div{ &.article-text{ & article.sm-horizontal-article{ background:#F9F9F9;display:flex;width:100%;align-items:center;justify-content:unset; & .img-wrapper {height:100px;width:178px;margin-right:29px;position:relative; & img {object-fit:contain;left:0; position:absolute;width:auto;} } } } } } & header {padding:0px 0;padding-bottom:17px; & div.text {max-width:unset;} } &.carousel {margin:50px auto 0; & .wrapper {overflow:visible;display:block;text-align:right;margin:0 auto; & div.all-inner {overflow:visible;} & button {position:relative;display:inline-block;margin-top:unset;} & article.slide { & div.text {margin-top:10px; & h2 {font-size:20px;} } } & article { & div.text { & h2 {font-size:20px;} } } } &.gallery {max-width:unset;height:760px; & .wrapper {padding-top: 450px;height: 605px;} & .text.inside {opacity: 0;pointer-events: none;width: 100%;transition: opacity .3s;position: absolute;top: unset;bottom: 230px;left: 0;} & .active .text.inside {opacity:1;pointer-events:all;} & .all-slide {margin:0;overflow: hidden;gap:0; & article {margin-top:0;} & > div {width:33.33%;flex: none;} } } &.horoskop {margin-bottom:0px; & button{display:none;} & .show-more {display:block;} & .wrapper { & div.all-slide {flex-wrap:wrap;justify-content:space-between; & article{width:15%;text-align:center;display:block;margin-right:0px;font-size:22px;font-weight:600;text-transform:uppercase;line-height:0px;margin-bottom:75px; .img {overflow:visible!important; &::after {content:"";display:inline-block; width:110%;height:40px;background-color:#F4E949;position:absolute;bottom:0;left:-10px;z-index:-1;} & img {left:0px;box-shadow:none!important;object-position:bottom;object-fit:contain;transform:scale(1);transition:all .3s ease; &:hover {transform:scale(1.1);transition:all .3s ease;} } &.small { & img {width:120px;} } } } } } } } &.background { &::after {display:block;} &.dark { & .horizontal {padding:0px;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:37px; & article {width:100%;padding-right:0px; & div.text {padding:12px 15px 23px;} } } } } &.dark { & .horizontal { & article {width:31.25%;} } & p.article-summary {float:unset;width:50%;color:#fff;} & a.author-name {/*width:50%;*/float:unset;} & section { &.horizontal { & header {padding:20px 0px;} & div.text {padding:12px 0px 23px; &.inside { padding:0; & .category {margin-left:10px;} } } } } & .carousel { /* &::before {content:'';position: absolute;top:0;left:-1000%;width: 1000%;height:540px;background: rgb(249,249,249); background: linear-gradient(90deg, rgba(249,249,249,1) 1%, rgba(249,249,249,0.9332107843137255) 96%, rgba(249,249,249,0.6755077030812324) 98%, rgba(249,249,249,0) 100%);z-index: 1;} &::after {content:'';position: absolute;top:0;right:-1000%;width: 1000%;height:540px;background: rgb(249,249,249); background: linear-gradient(90deg, rgba(249,249,249,0) 0%, rgba(249,249,249,0.6755077030812324) 2%, rgba(249,249,249,0.9332107843137255) 4%, rgba(249,249,249,1) 100%);z-index: 1;} */ & button {display:block;top:-10px;bottom:0;margin:auto 1px auto 0;;} & .wrapper {overflow:unset;display:flex;} & article { & div.text.inside {text-align:left;left:0px;top:unset;bottom:0px;} &.big-article {min-width:740px;margin-bottom:0px;margin-right:10px; display:flex;flex-direction:column; & .img{padding-bottom:540px; & img {height:540px;} } & div.text.inside { & h2 {font-size:32px;text-align:left;line-height:32px;text-shadow:0px 1px 0px #000000B5;padding-right:40px;} } } } & div.all-slide {display:flex;overflow:unset;width:100%;/*flex-direction:row;*/transition:transform 0.5s ease-in-out; & article {width:419px;max-width:419px;height:265px;margin-bottom:10px;margin-right:10px;overflow:hidden;min-width:unset;display:flex;flex-direction:column; &.big-article {min-width:740px; margin-bottom:0px;margin-right:10px;height:540px;grid-row:span 2; & .img{padding-bottom:540px; & img {height:540px;} } } } & div {/*display:grid;grid-gap:10px;order:2;*/display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;margin-right: 10px; & article { & img {height:265px;} &:last-of-type {margin-bottom:0px;} /* &:nth-child(2n+1) {grid-row:1;} */ } &.carousel-slide{opacity:0.4;transition:opacity .3s ease-in-out;} &.is-active{opacity:1;} } & div.text.inside {display:inline-block;} } } & > button {top:50%;} } } &.top {margin-top:-26%;} & aside {width:100%;min-width:370px;margin-left:30px; padding:0px 0px;z-index:98; &.sticky {position:sticky;top:90px;z-index: 98;} & article {width:100%;display:flex;justify-content:space-between;max-width:unset; & a.img {width:100%;max-width:110px;height:85px;padding-bottom:0;margin-right:30px;} & a.category {margin-top:5px;padding:0px 10px;} } & a {font-size:1.125rem;font-family: 'Vollkorn' ,'serif';} } &.detail { & .wrapper {flex-direction:row;} &.gallery { & .dark {display:flex;align-items:flex-start;justify-content:space-between; & .right {width:100%;} } & .gallery-content {width:100%; & .gallery-slider {position:relative; & article {width:100%;min-width:800px; /* &.active {opacity:1;} */ & .img {width:100%;position:relative;margin:0 auto;max-width:unset;} & div.text {position:relative;left:0px;top:100%;} } } /* & button.prev-image, & button.next-image {display:block;position:absolute;top:29%;right:0;z-index:9;width:42px;height:42px;box-sizing:border-box; border:2px solid #2929d6;background:#0e1738 url(../assets/images/btn-image.svg) center no-repeat;background-size:20px; border-radius:50px;cursor:pointer;} button.prev-image {right:unset;transform:rotate(180deg);} */ } } &.short { & h1.title {text-align:left;} & section.dark { & span.time {text-align:left;display:inline-block;} & a.category{text-align:left;margin:unset;display:inline-block;} } & section.gallery-content { & .image{min-width:569px!important;} } } } & label.title-category {font-size:26px;} &.category { & section.dark { & article { & div.text {position:relative;bottom:unset;left:15px; & h2 a{-webkit-text-fill-color:#2F2F33; background-image:linear-gradient(to right,#F4E949,#F4E949 50%,#fff 50%); background-size:200% 100%; } & span.time{color:#76767E; &::before { background:url(../assets/images/time.png) center no-repeat;} } &.inside{position:absolute;} } } & section.horizontal {padding:0px 15px; & article {height:auto;width:31.25%; &:first-of-type {margin-right:29px;} } } } } } body > footer{ & section{flex-wrap:nowrap; & article{width:30%; &.nav {width:70%; & .left {display:grid;grid-template-columns:auto auto;text-align:left; & a {text-align:left;} } & .right {order:2;width:22.3%;text-align:left; & a{text-align:left;} } } & .social {justify-content: left;} & .logo {margin:10px 0 0;} & p {text-align:left;} } } } } @media only screen and (min-width:1170px) { body > header{/*height:200px;*/padding-top:40px; & .wrapper {max-width:1170px;padding:0;margin:0 auto; & nav {display:flex;align-items:center;justify-content:center; &.top{position:absolute;z-index:1;left:0; &.social {right:0;left:unset;display:flex;} } } & .logo {width:370px;background-size:370px;/*height:91px;*/ height:151px;margin-left:352px;} & menu { &.category-page {min-height:70px; & label.title-category {display:inline-block;} & .hamburger-btn {margin-right:20px;} & .logo {width:204px;background-size:204px;height:50px;display:inline-block;vertical-align:middle;margin-right:20px;} /* & form {display:flex;float:right;max-width:140px; &.category {float:unset;display:inline-block;} } */ } } } } body > nav {width:365px; &.active .close-menu {left:365px;} } body > footer { & section {padding:40px 0;width:100%; & nav.social {margin-bottom:10px; & a:first-of-type {margin-left:0px;} } & .logo {margin:unset;} & h2.title {text-align:left;} & label {text-align:left;} & input {height:50px;} & button {margin-top:15px;} & article.nav { & nav {display:flex;flex-wrap:wrap;text-align:justify;justify-content:space-between;align-items:baseline; &.left{width:45%;} &.right {width:30%;} & a {text-align:left;margin-left:4px;padding-right:0px;} } } & >a {float:left;} & nav {float:left;margin-bottom:30px;margin-top:10px; } & p {padding:10px 28px 0 0;} } } .left {float:left;clear:both;} .right {float:right;clear:both;} a { &.close::before {width:50px;height:50px;background-size:50px;} &.card-content {padding-bottom:80px;} /* &.close-menu { &.active {left:365px;} } */ &.search {padding:30px;} } body > main { & section { &.wrapper{ & > section {margin-top:20px; /* & article {width:47.8%;} */ & > section {max-width:863px; & .big-article a.img {padding-bottom:67.25%;} } } & section.search { & article {width:100%;} } } } & section { & header {max-width:1170px;margin:0 auto; & h2.title {font-size:26px;color:#0e1738;text-transform:uppercase;text-align:left;} & h1.title {font-size:36px;color:#0e1738;text-align:center;} } &.dark { &::before, &::after {content:""; flex-basis:100%; width:0; order:2;} /* & a.img {padding-bottom:71%;} */ & section.horizontal {max-width:1170px; & article {width:31.53%;} } &.banner { & .wrapper article {width:25%;height:382px;margin:0;border-left:1px dotted #41549a; &.big-article {flex-grow:1;text-align:center;width:50%;order:2; } &:nth-child(1n+2) {order:1; } &:nth-child(1n +3) {order:2;} &:nth-child(1n +4) {order:2;} &:nth-child(1n +5) {order:2;} } } & .carousel {padding:0px;} } &.banner {padding-top:50px; & a.img {padding-bottom:56.25%;} } & article { & h2 {font-size:20px;text-align:left;font-weight:600;} & p {padding:0px 25px;font-size:1.1875rem;line-height:1.5789473684;} &.big-article { & p {color:#a0a0a0;padding:0px 45px;} & div.text h2 {font-size:2.25rem;text-align:center;} } &.horizontal div.text h3 {font-size:1.3125rem;} } &.carousel {overflow:visible; & .wrapper {padding:0px;overflow:hidden;} &.hot {max-width:1170px; & .author {top:0;} & .wrapper {overflow:hidden;padding-bottom:90px;padding-left:0px; & button {top:120px;width:86px;height:86px;background-size:27px;} & div.all-slide{display:flex;overflow:unset; & article {display:flex;min-width:1170px;margin-right:0px;padding:0; & .img {width:560px;padding-bottom:0;height:405px;} & div.text {right:15px;} } /* & a.img {width:560px;} */ & div.text {width:681px;min-height:253px;position:absolute;padding:44px 56px; background:#fff;top:32%;left:unset; right:-109%; display:block;box-shadow:5px 12px 16px #00000021;text-align:left; & h2 {font-size:24px;} & p {font-size:14px;font-family:Roboto, "sans-serif";} } } & h3 {text-transform:uppercase;font-size:18px;color:#000;} } } &.special {overflow:unset; & .wrapper {overflow:visible; & div.all-inner{overflow:visible;padding-left:0;} & div.all-slide {overflow:unset; & article {min-width:unset;width:345px;max-width:345px; & div.text {margin-top:10px;} } } } } } } & aside {max-width:385px; } &.detail { & section { &.gallery-slider {margin-top:0px;} &.dark {/*padding-bottom:216px;*/ & >section.horizontal {padding-top:0;margin-top:0;padding-bottom:70px; & article {width:100%; & .img {padding-bottom:276px;border:none;width:100%;max-width:490px; & img {width:100%;height:100%!important;} } & div.text h1.title {font-size:2.25rem;text-align:left;} } } & article { &.big-article.horizontal { & .img {width:491px;box-sizing:border-box;overflow:hidden;height:287px;padding-bottom:0;} & div.text{ & h1.title {font-size:2.25rem;text-align:left;} & span.date {float:left;clear:both;} & p.article-summary {width:76%;color:#fff;} } } } } } &.gallery { & .dark {display:block;} & section.gallery-content {width:70%;margin-right:45px;margin-top:0px; position:relative;display:block;box-sizing:border-box; & button{top:55%;} & section.gallery-slider {max-width:unset!important; & article {margin-left:0px;min-width:1010px;} } } } &.short { & .wrapper {max-width:1170px;flex-direction:row; & >article {width:50%!important; &:nth-child(2){padding-left:50px;} } & section.gallery-content{width:50%;margin-right:40px;margin-top:0px; } /* & article {order:2;} */ } } } } .t {width:100%;} div.author{padding-left:30px;} } @media only screen and (min-width:1300px) { body > header { & .wrapper {max-width:1170px;margin:0 auto;} } body > main { & > section.wrapper {display:flex;align-items:flex-start;justify-content:space-between;max-width:1170px;margin:0 auto; & > section {display:block;min-width:770px;max-width:770px; } } &.detail { &.gallery { & .wrapper {flex-direction:unset;} & section.gallery-content{ & .gallery-slider { & article {padding-top:70px;} } } } } &.category { & section.dark { & section.horizontal {padding:0px 0px;} } } & section { & header { & h2.title {font-size:32px;} } &.dark { & section.horizontal {max-width:1170px;} } &.horizontal header h2.title{margin-left:-20px} } } div { &.author {left:-30px;} } } @media only screen and (min-width:1350px) { body > header { & .wrapper {max-width:1170px;} } body > main { & section { &.dark { & section.horizontal {max-width:1170px;} } &.wrapper {padding-left:0;padding-right:0;} &.horizontal {padding:0px 0px;} } } } @media only screen and (min-width:1530px) { body > main { &.detail { &.gallery { & section.gallery-content{max-width:1010px;overflow:hidden;margin-bottom:30px; & .gallery-slider { & article {padding-top:70px;} } } } } } } .central-baner, .header_mobile {/*min-height: 250px;*/width:100%;height:auto;} aside div img{width: 100%;height: auto;object-position: center;object-fit: cover;} @media (max-width: 768px) { [id^="w2g-slot1-cnt"] { display: none !important; } div.left-baner {display: flex;align-items: center;justify-content: center;} } @media (min-width: 769px) { [id^="w2g-slot2-cnt"] { display: none !important; } } div.central-baner {display: flex;align-items: center;justify-content: center;} div.left-baner.margin {margin-top:100px;} div.left-baner.bottom {margin-bottom:20px;} .gallery-widget .images a img {width:100%;} .gallery-widget .images a img:first-of-type {height: 100%!important;object-fit: cover!important;} /* .gallery-widget .images a img:first-of-type::before {content:"";display:inline-block;background: url(../img/photo.png)center no-repeat;width:20px;height: 20px;} */ /* end of stlesheets */