@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap"); html { scroll-behavior: smooth; } * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Cairo", sans-serif !important; } body { direction: rtl; text-align: start; font-family: "Cairo", sans-serif !important; font-weight: bold; color: #000000; background-color: #e4f8fd; } body a.active { color: #39c0f3 !important; } body.premium { background-color: #fbf7f3; } body.premium a:hover { color: #c0984e !important; } body.premium a.active { color: #c0984e !important; } body.premium .listingDate .type { padding: 0 !important; } body.premium .listingDate .type:before { content: none !important; } body.premium .secondaryNews:before, body.premium .newsDetails .secondColumn .relatedNews .listingDate:before { background-image: url(../images/arrowGold.svg) !important; } body.premium header .topHeader .newsPaper:before { background-image: url(../images/goldNewsPaper.svg); } body.premium header .middleHeader .region .country { color: #c0984e; border-left: 0.5px solid rgba(192, 152, 78, 0.3764705882); } body.premium .featuredNewsSection1 .listingItemDIV.featured .listingInfos, body.premium .featuredNewsSection2 .listingItemDIV.featured .listingInfos { background: #fbf7f3; } body.premium .type { color: #c0984e !important; } button { font-family: "Cairo", sans-serif !important; cursor: pointer; } button:hover { opacity: 0.8; } h1 { display: none; } input { font-family: "Cairo", sans-serif !important; } img { width: 100%; display: block; } a { color: #000000; transition: all 0.3s ease-in-out; } a:hover { color: #39c0f3 !important; } .btnContainer { margin: 30px 0; } .btnContainer input, .btnContainer a, .btnContainer button { display: inline-block; position: relative; color: white; text-align: center; padding: 10px; min-width: 170px; line-height: 45px; font-weight: bold; line-height: normal; background: #c0984e; border-radius: 200px; transition: all 0.3s ease-in-out; } .btnContainer input, .btnContainer a, .btnContainer button { font-size: 16px; } @media screen and (min-width: 320px) { .btnContainer input, .btnContainer a, .btnContainer button { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .btnContainer input, .btnContainer a, .btnContainer button { font-size: 18px; } } .btnContainer input:hover, .btnContainer a:hover, .btnContainer button:hover { background-color: #39c0f3; color: white !important; } .listingItem .listingImage { overflow: hidden; } .listingItem .listingImage img { transition: transform 0.3s ease; width: 100%; height: auto; } .listingItem .listingImage:hover img { transform: scale(1.05); } header { margin-top: 40px; position: sticky; top: -180px; z-index: 2; background: #e4f8fd; } header:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100vw; height: 100%; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } header.show-shadow::after { opacity: 1; } header .topHeader { display: flex; padding-bottom: 40px; margin-bottom: 5px; border-bottom: 0.5px solid rgba(121, 121, 111, 0.3764705882); justify-content: space-between; align-items: center; } header .topHeader .searchContainer { padding-right: 35px; position: relative; } header .topHeader .searchContainer label { margin-left: 20px; } header .topHeader .searchContainer label { font-size: 12px; } @media screen and (min-width: 320px) { header .topHeader .searchContainer label { font-size: calc(12px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .topHeader .searchContainer label { font-size: 18px; } } header .topHeader .searchContainer label { line-height: 20px; } @media screen and (min-width: 320px) { header .topHeader .searchContainer label { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .topHeader .searchContainer label { line-height: 28px; } } header .topHeader .searchContainer label .searchBtn { background-image: url("../images/search.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 24px; width: 24px; top: 50%; transform: translateY(-50%); } header .topHeader .searchContainer input { border-radius: 30px; height: 34px; width: 230px; padding: 0 15px; border: 0.5px solid #979797; color: black; font-weight: bold; } header .topHeader .newsPaper { padding-right: 40px; position: relative; } header .topHeader .newsPaper { font-size: 18px; } @media screen and (min-width: 320px) { header .topHeader .newsPaper { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .topHeader .newsPaper { font-size: 18px; } } header .topHeader .newsPaper { line-height: 26px; } @media screen and (min-width: 320px) { header .topHeader .newsPaper { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .topHeader .newsPaper { line-height: 26px; } } header .topHeader .newsPaper:before { content: ""; background-image: url("../images/blueNewspaper.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 29px; width: 29px; top: 50%; transform: translateY(-50%); } header .middleHeader { display: flex; margin-bottom: 15px; border-bottom: 0.5px solid rgba(121, 121, 111, 0.3764705882); } header .middleHeader .start { display: flex; margin-bottom: 10px; flex: 1 1 40%; } header .middleHeader .start span { color: #39c0f3; margin-right: 10px; margin-bottom: -10px; font-size: 20px; display: flex; align-items: center; } header .middleHeader .end { flex: 1 1 60%; display: flex; justify-content: end; } header .middleHeader .logoContainer { max-width: 250px; min-width: 170px; } header .middleHeader .region { flex: 1 1 25%; display: flex; justify-content: end; align-items: center; padding-left: 40px; position: relative; } header .middleHeader .region .country { color: #39c0f3; margin-left: 20px; padding-left: 20px; border-left: 0.5px solid rgba(92, 204, 245, 0.3764705882); } header .middleHeader .region .country { font-size: 18px; } @media screen and (min-width: 320px) { header .middleHeader .region .country { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .region .country { font-size: 18px; } } header .middleHeader .region .country { line-height: 26px; } @media screen and (min-width: 320px) { header .middleHeader .region .country { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .region .country { line-height: 26px; } } header .middleHeader .region .language { position: relative; } header .middleHeader .region .language { font-size: 18px; } @media screen and (min-width: 320px) { header .middleHeader .region .language { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .region .language { font-size: 18px; } } header .middleHeader .region .language { line-height: 26px; } @media screen and (min-width: 320px) { header .middleHeader .region .language { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .region .language { line-height: 26px; } } header .middleHeader .region .language .languageDropdown { display: none; position: absolute; top: 40px; left: 0; transform: translateX(-50%); background-color: white; font-weight: normal; padding: 15px 30px; border: 1px solid rgba(121, 121, 111, 0.3764705882); z-index: 2; } header .middleHeader .region:after { content: ""; width: 0.5px; position: absolute; top: 25%; bottom: 0; left: 0; background: rgba(121, 121, 111, 0.3764705882); } header .middleHeader .podcast { flex: 1 1 40%; padding-left: 30px; position: relative; display: flex; justify-content: end; align-items: center; } header .middleHeader .podcast:after { content: ""; width: 0.5px; position: absolute; top: 25%; bottom: 0; left: 0; background: rgba(121, 121, 111, 0.3764705882); } header .middleHeader .podcast a { padding-left: 55px; position: relative; } header .middleHeader .podcast a { font-size: 18px; } @media screen and (min-width: 320px) { header .middleHeader .podcast a { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .podcast a { font-size: 18px; } } header .middleHeader .podcast a { line-height: 26px; } @media screen and (min-width: 320px) { header .middleHeader .podcast a { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .podcast a { line-height: 26px; } } header .middleHeader .podcast a:before { content: ""; background-image: url("../images/podcast.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; height: 44px; width: 44px; bottom: -5px; } header .middleHeader .loginRegister { flex: 1 1 35%; display: flex; justify-content: end; align-items: center; } header .middleHeader .loginRegister .login { margin-left: 20px; padding-inline: 20px; border-left: 0.5px solid rgba(92, 204, 245, 0.3764705882); } header .middleHeader .loginRegister .login a { color: #474747; } header .middleHeader .loginRegister .login a { font-size: 18px; } @media screen and (min-width: 320px) { header .middleHeader .loginRegister .login a { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .loginRegister .login a { font-size: 18px; } } header .middleHeader .loginRegister .login a { line-height: 26px; } @media screen and (min-width: 320px) { header .middleHeader .loginRegister .login a { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .loginRegister .login a { line-height: 26px; } } header .middleHeader .loginRegister .login a:hover { color: #39c0f3; } header .middleHeader .loginRegister .register a { color: #c0984e !important; } header .middleHeader .loginRegister .register a { font-size: 18px; } @media screen and (min-width: 320px) { header .middleHeader .loginRegister .register a { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .loginRegister .register a { font-size: 18px; } } header .middleHeader .loginRegister .register a { line-height: 26px; } @media screen and (min-width: 320px) { header .middleHeader .loginRegister .register a { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .middleHeader .loginRegister .register a { line-height: 26px; } } header .middleHeader .loginRegister .register a:hover { color: #39c0f3; } header .bottomHeader { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; position: relative; gap: 50px; } header .bottomHeader .burgerMenu { height: 48px; width: 48px; } header .bottomHeader .menu ul { display: flex; flex-wrap: wrap; gap: 25px; } header .bottomHeader .menu ul li a { font-weight: 800; color: #474747; } header .bottomHeader .menu ul li a { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .menu ul li a { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu ul li a { font-size: 20px; } } header .bottomHeader .menu ul li a { line-height: 16px; } @media screen and (min-width: 320px) { header .bottomHeader .menu ul li a { line-height: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu ul li a { line-height: 22px; } } header .bottomHeader .menu ul li .ddSecondLevel { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 15px); right: 15px; left: 15px; z-index: 9; background-color: white; padding: 30px 15px 70px 70px; transition: all 0.3s ease-in-out; } header .bottomHeader .menu ul li .ddSecondLevel ul { display: flex; flex-direction: column; gap: 10px; } header .bottomHeader .menu ul li .ddSecondLevel ul li a { font-weight: normal; } header .bottomHeader .menu ul li .ddSecondLevel ul li a:hover { font-weight: 900; color: initial !important; } header .bottomHeader .menu ul li.hover .ddSecondLevel { transition-delay: 0.2s; opacity: 1; visibility: visible; } header .bottomHeader .menu .listingItemDIV .listingItem .listingImage { margin-bottom: 20px; } header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { margin-bottom: 20px; } header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { font-size: 16px; } } header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingDate { line-height: 24px; } } header .bottomHeader .menu .listingItemDIV .listingItem .listingDate .type { color: #39c0f3; } header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { font-size: 22px; } @media screen and (min-width: 320px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { font-size: 28px; } } header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { line-height: 20px; } @media screen and (min-width: 320px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .menu .listingItemDIV .listingItem .listingTitle a { line-height: 32px; } } header .bottomHeader .menu .listingItemDIV .listingItem.premium .listingImage { position: relative; } header .bottomHeader .menu .listingItemDIV .listingItem.premium .listingImage:after { content: ""; background-image: url("../images/gold83x83.jpg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; bottom: 0; height: 5vw; min-height: 50px; max-height: 83px; width: 5vw; min-width: 50px; max-width: 83px; } header .bottomHeader .menu .listingItemDIV .listingItem.premium .type { color: #c0984e; position: relative; } header .bottomHeader .sideMenu { position: fixed; top: 0; right: -720px; width: 100vw; max-width: 700px; height: 100%; background-color: #e4f8fd; box-shadow: 0 2px 47px 0 rgba(0, 0, 0, 0.13); transition: all 0.3s ease; padding: 40px 70px 50px; z-index: 1000; } header .bottomHeader .sideMenu .topSideMenu { display: flex; justify-content: space-between; align-items: end; padding-bottom: 20px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } header .bottomHeader .sideMenu .loginRegister { display: flex; padding: 0 !important; } header .bottomHeader .sideMenu .loginRegister .login { flex: 0 0 50%; padding: 10px 0; border-left: 1px solid rgba(121, 121, 111, 0.3764705882); } header .bottomHeader .sideMenu .loginRegister .register { flex: 0 0 50%; padding: 10px 0; } header .bottomHeader .sideMenu .loginRegister .register a { color: #c0984e !important; } header .bottomHeader .sideMenu .logoContainer { max-width: 200px; min-width: 150px; } header .bottomHeader .sideMenu .close { width: 25px; } header .bottomHeader .sideMenu.open { right: 0; overflow: auto; } header .bottomHeader .sideMenu .menuWrapper { min-height: 100%; display: flex; flex-direction: column; } header .bottomHeader .sideMenu .menuWrapper > ul { list-style: none; padding: 0; margin: 0; flex: 1; margin-bottom: 40px; } header .bottomHeader .sideMenu .menuWrapper > ul li { padding: 5px 0; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } header .bottomHeader .sideMenu .menuWrapper > ul li a { text-decoration: none; color: #000; display: block; font-weight: 800; } header .bottomHeader .sideMenu .menuWrapper > ul li a { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .menuWrapper > ul li a { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .menuWrapper > ul li a { font-size: 20px; } } header .bottomHeader .sideMenu .menuWrapper > ul li.hasSubmenu { position: relative; } header .bottomHeader .sideMenu .menuWrapper > ul li.hasSubmenu > a + span { background-image: url("../images/triangleDown.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; height: 12px; width: 18px; top: 16px; } header .bottomHeader .sideMenu .menuWrapper > ul li.hasSubmenu.open > a + span { transform: translateY(-50%) rotate(180deg); } header .bottomHeader .sideMenu .ddSecondLevel { display: none; } header .bottomHeader .sideMenu .ddSecondLevel ul { margin-top: 5px; flex: 1; display: flex; flex-wrap: wrap; flex-direction: column; } header .bottomHeader .sideMenu .ddSecondLevel ul li { border: none; padding: 0; margin-inline: 15px; } header .bottomHeader .sideMenu .ddSecondLevel ul li a { font-weight: 400; } header .bottomHeader .sideMenu .loginRegister { padding: 10px 0; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); text-align: center; } header .bottomHeader .sideMenu .loginRegister { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .loginRegister { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .loginRegister { font-size: 20px; } } header .bottomHeader .sideMenu .region { justify-content: center; margin: 20px 0; } header .bottomHeader .sideMenu .region .btnContainer { text-align: center; margin: 0; } header .bottomHeader .sideMenu .region .btnContainer .options { display: inline-flex; justify-content: center; margin-inline: auto; border: 2px solid #39c0f3; border-radius: 30px; padding: 3px; background-color: white; } header .bottomHeader .sideMenu .region .btnContainer .options .option a { border-radius: 30px; display: block; padding: 5px 20px; background-color: white; color: #39c0f3; min-width: 150px; } header .bottomHeader .sideMenu .region .btnContainer .options .option a { font-size: 20px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .region .btnContainer .options .option a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .region .btnContainer .options .option a { font-size: 23px; } } header .bottomHeader .sideMenu .region .btnContainer .options .option a { line-height: 24px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .region .btnContainer .options .option a { line-height: calc(24px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .region .btnContainer .options .option a { line-height: 27px; } } header .bottomHeader .sideMenu .region .btnContainer .options .option a:hover { color: #39c0f3 !important; } header .bottomHeader .sideMenu .region .btnContainer .options .option.active a { color: white !important; background: #39c0f3; } header .bottomHeader .sideMenu .region .btnContainer .options .option.active a:hover { color: white !important; } header .bottomHeader .sideMenu .bottomSideMenu h5 { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .bottomSideMenu h5 { font-size: calc(18px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .bottomSideMenu h5 { font-size: 22px; } } header .bottomHeader .sideMenu .bottomSideMenu p { font-weight: 500; margin-bottom: 10px; } header .bottomHeader .sideMenu .bottomSideMenu p { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .bottomSideMenu p { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .bottomSideMenu p { font-size: 18px; } } header .bottomHeader .sideMenu .newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; padding-bottom: 25px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } header .bottomHeader .sideMenu .newsletter .imgContainer { width: 90px; } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper { position: relative; display: flex; flex-direction: column; flex: 1; } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper input { border-radius: 30px; background-color: #e4f8fd; border: 1px solid #39c0f3; height: 48px; padding: 0 30px; } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper input { font-size: 18px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper input { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper input { font-size: 18px; } } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper input::placeholder { color: #cacaca; } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper a { line-height: 26px; position: absolute; top: 50%; padding: 11px 25px; border-radius: 30px 0 0 30px; transform: translateY(-50%); left: 0; color: white; background-color: #39c0f3; font-weight: 500; transform: translateY(-50%); transition: all 0.3s ease-in-out; } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper a { font-size: 14px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper a { font-size: calc(14px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper a { font-size: 26px; } } header .bottomHeader .sideMenu .newsletter .newsletterInputWrapper a:hover { color: white !important; opacity: 0.8; } header .bottomHeader .sideMenu .social { padding-top: 40px; } header .bottomHeader .sideMenu .social ul { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 10px; } header .bottomHeader .sideMenu .social ul li { margin-bottom: 15px; } header .bottomHeader .sideMenu .social ul li a { display: flex; align-items: center; gap: 10px; } header .bottomHeader .sideMenu .social ul li a { font-size: 12px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .social ul li a { font-size: calc(12px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .social ul li a { font-size: 14px; } } header .bottomHeader .sideMenu .social ul li a { line-height: 14px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .social ul li a { line-height: calc(14px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .social ul li a { line-height: 16px; } } header .bottomHeader .sideMenu .social ul li img { width: auto; } header .bottomHeader .sideMenu .social ul li:last-of-type { margin-bottom: 0; } header .bottomHeader .sideMenu .searchContainer { padding-right: 35px; position: relative; } header .bottomHeader .sideMenu .searchContainer label { margin-left: 20px; } header .bottomHeader .sideMenu .searchContainer label { font-size: 12px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .searchContainer label { font-size: calc(12px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .searchContainer label { font-size: 18px; } } header .bottomHeader .sideMenu .searchContainer label { line-height: 20px; } @media screen and (min-width: 320px) { header .bottomHeader .sideMenu .searchContainer label { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { header .bottomHeader .sideMenu .searchContainer label { line-height: 28px; } } header .bottomHeader .sideMenu .searchContainer label .searchBtn { background-image: url("../images/search.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 24px; width: 24px; top: 50%; transform: translateY(-50%); } header .bottomHeader .sideMenu .searchContainer input { border-radius: 30px; height: 34px; width: 230px; padding: 0 15px; border: 0.5px solid #979797; color: black; font-weight: bold; } header .bottomHeader .languageSelectorMobile { position: relative; display: none; } header .bottomHeader .languageSelectorMobile .languageDropdown { display: none; position: absolute; top: 40px; left: 0; transform: translateX(-50%); background-color: white; font-weight: normal; padding: 15px 30px; border: 1px solid rgba(121, 121, 111, 0.3764705882); z-index: 2; } .registerBannerSection { background: #c0984e; } .registerBannerSection .listingImage { max-width: 215px; margin-bottom: 15px; } .registerBannerSection .listingItem { padding: 25px 0 40px; } .registerBannerSection .listingTitle { font-weight: bold; max-width: 560px; margin-bottom: 10px; } .registerBannerSection .listingTitle { font-size: 20px; } @media screen and (min-width: 320px) { .registerBannerSection .listingTitle { font-size: calc(20px + 39 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .listingTitle { font-size: 59px; } } .registerBannerSection .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .registerBannerSection .listingTitle { line-height: calc(20px + 49 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .listingTitle { line-height: 69px; } } .registerBannerSection .listingDescription { font-weight: 500; max-width: 560px; margin-bottom: 40px; } .registerBannerSection .listingDescription { font-size: 16px; } @media screen and (min-width: 320px) { .registerBannerSection .listingDescription { font-size: calc(16px + 18 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .listingDescription { font-size: 34px; } } .registerBannerSection .listingDescription { line-height: 16px; } @media screen and (min-width: 320px) { .registerBannerSection .listingDescription { line-height: calc(16px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .listingDescription { line-height: 28px; } } .registerBannerSection .registerInfo { display: flex; align-items: center; gap: 20px; } .registerBannerSection .link a { display: block; line-height: 50px; font-weight: 500; height: 58px; padding: 0 65px; background: black; color: white; border-radius: 30px; } .registerBannerSection .link a { font-size: 16px; } @media screen and (min-width: 320px) { .registerBannerSection .link a { font-size: calc(16px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .link a { font-size: 32px; } } .registerBannerSection .price { color: #f9d28a; } .registerBannerSection .price { font-size: 20px; } @media screen and (min-width: 320px) { .registerBannerSection .price { font-size: calc(20px + 24 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .price { font-size: 44px; } } .registerBannerSection .price { line-height: 16px; } @media screen and (min-width: 320px) { .registerBannerSection .price { line-height: calc(16px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .registerBannerSection .price { line-height: 28px; } } .registerBannerSection .bannerImage { display: flex; align-items: end; max-width: 650px; } .chooseGameSection { padding: 60px 0 200px; } .chooseGameSection .games { max-width: 1110px; margin-inline: auto; } .chooseGameSection .level { max-width: 100%; margin-inline: unset; flex: 1; } .chooseGameSection .blockHead { text-align: center; margin-inline: auto; margin-bottom: 60px; } .chooseGameSection .blockHead h3 { text-emphasis: center; } .chooseGameSection .blockHead h3 { font-size: 34px; } @media screen and (min-width: 320px) { .chooseGameSection .blockHead h3 { font-size: calc(34px + 21 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockHead h3 { font-size: 55px; } } .chooseGameSection .blockHead h3 { line-height: 30px; } @media screen and (min-width: 320px) { .chooseGameSection .blockHead h3 { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockHead h3 { line-height: 67px; } } .chooseGameSection .listingItem { box-shadow: 0 2px 45px 0 rgba(0, 0, 0, 0.11); border-radius: 14px; } .chooseGameSection .blockBody .listingImage { position: relative; padding: 30px 30px 15px; border-radius: 14px 14px 0 0; } .chooseGameSection .blockBody .listingImage .gameName { position: absolute; bottom: 15px; } .chooseGameSection .blockBody .listingImage .gameName { font-size: 20px; } @media screen and (min-width: 320px) { .chooseGameSection .blockBody .listingImage .gameName { font-size: calc(20px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockBody .listingImage .gameName { font-size: 36px; } } .chooseGameSection .blockBody .listingImage .gameName { line-height: 30px; } @media screen and (min-width: 320px) { .chooseGameSection .blockBody .listingImage .gameName { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockBody .listingImage .gameName { line-height: 67px; } } .chooseGameSection .blockBody .listingHolder { gap: 120px; } .chooseGameSection .blockBody .listingInfos { background: white; padding: 35px; } .chooseGameSection .blockBody .listingInfos .playBtn { text-align: center; } .chooseGameSection .blockBody .listingInfos .playBtn a { padding: 0 80px; height: 52px; border: 1px solid black; border-radius: 30px; color: white; transition: all 0.3s ease-in-out; } .chooseGameSection .blockBody .listingInfos .playBtn a { font-size: 20px; } @media screen and (min-width: 320px) { .chooseGameSection .blockBody .listingInfos .playBtn a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockBody .listingInfos .playBtn a { font-size: 23px; } } .chooseGameSection .blockBody .listingInfos .playBtn a { line-height: 30px; } @media screen and (min-width: 320px) { .chooseGameSection .blockBody .listingInfos .playBtn a { line-height: calc(30px + 20 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseGameSection .blockBody .listingInfos .playBtn a { line-height: 50px; } } .chooseGameSection .blockBody .listingInfos .playBtn a:hover { color: white !important; opacity: 0.8; } .chooseGameSection .sudoku .listingImage { background: #fcc7b2; } .chooseGameSection .sudoku .gameName { left: 30px; color: #e05418; } .chooseGameSection .sudoku .playBtn a { background: #e05418; } .chooseGameSection .crossWord .listingImage { background-color: #d9e6ff; } .chooseGameSection .crossWord .listingImage { background-color: #d9e6ff; } .chooseGameSection .crossWord .gameName { right: 30px; color: #5479f7; } .chooseGameSection .crossWord .playBtn a { background: #5479f7; } .chooseDifficultySection { padding: 60px 0 200px; background: linear-gradient(179.6deg, rgba(72, 154, 164, 0.19) 0%, rgba(255, 255, 255, 0.07) 100%); } .chooseDifficultySection .game { width: 100%; max-width: 960px; margin-inline: auto; } .chooseDifficultySection .game .imgContainer { margin-bottom: 20px; } .chooseDifficultySection .game .imgContainer img { max-width: 580px; margin-inline: auto; } .chooseDifficultySection .game .gameName { text-align: center; color: #e05418; margin-bottom: 50px; } .chooseDifficultySection .game .gameName { font-size: 20px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .gameName { font-size: calc(20px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .gameName { font-size: 36px; } } .chooseDifficultySection .game .gameName { line-height: 30px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .gameName { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .gameName { line-height: 67px; } } .chooseDifficultySection .game .difficultyContainer { display: flex; flex-wrap: wrap; justify-content: space-between; } .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { flex: 0; border-radius: 30px; margin-bottom: 35px; background: white; padding: 60px 50px 30px; color: #e05418; text-align: center; box-shadow: 0 2px 45px 0 rgba(0, 0, 0, 0.11); } .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { font-size: 18px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { font-size: calc(18px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { font-size: 28px; } } .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { line-height: 30px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .difficultyContainer .easy, .chooseDifficultySection .game .difficultyContainer .medium, .chooseDifficultySection .game .difficultyContainer .hard { line-height: 67px; } } .chooseDifficultySection .game .difficultyContainer .levels { display: flex; gap: 5px; margin-bottom: 15px; } .chooseDifficultySection .game .difficultyContainer .level1, .chooseDifficultySection .game .difficultyContainer .level2, .chooseDifficultySection .game .difficultyContainer .level3 { border: 3px solid #e05418; width: 36px; height: 36px; } .chooseDifficultySection .game .difficultyContainer .level1.filled, .chooseDifficultySection .game .difficultyContainer .level2.filled, .chooseDifficultySection .game .difficultyContainer .level3.filled { background-color: #e05418; } .chooseDifficultySection .game .difficultyContainer .level1 { border-radius: 0 20px 20px 0; } .chooseDifficultySection .game .difficultyContainer .level3 { border-radius: 20px 0 0 20px; } .chooseDifficultySection .game .difficultyContainer .playBtn a { font-weight: 400; border-radius: 30px; text-align: center; background: #e05418; width: 100%; display: block; padding: 15px; color: white; transition: all 0.3s ease-in-out; } .chooseDifficultySection .game .difficultyContainer .playBtn a { font-size: 20px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .difficultyContainer .playBtn a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .difficultyContainer .playBtn a { font-size: 23px; } } .chooseDifficultySection .game .difficultyContainer .playBtn a { line-height: 16px; } @media screen and (min-width: 320px) { .chooseDifficultySection .game .difficultyContainer .playBtn a { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .chooseDifficultySection .game .difficultyContainer .playBtn a { line-height: 26px; } } .chooseDifficultySection .game .difficultyContainer .playBtn a:hover { color: white !important; opacity: 0.8; } .newsListing { margin-bottom: 50px; } .newsListing .topSection { display: flex; flex-wrap: wrap; row-gap: 30px; align-items: baseline; padding-top: 20px; margin-bottom: 60px; border-top: 3px solid black; } .newsListing .topSection h2 { font-weight: 900; margin-left: 35px; } .newsListing .topSection h2 { font-size: 26px; } @media screen and (min-width: 320px) { .newsListing .topSection h2 { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection h2 { font-size: 30px; } } .newsListing .topSection h2 { line-height: 16px; } @media screen and (min-width: 320px) { .newsListing .topSection h2 { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection h2 { line-height: 26px; } } .newsListing .topSection .newsType { display: flex; flex-wrap: wrap; row-gap: 20px; } .newsListing .topSection .newsType .type { font-weight: 300; letter-spacing: -0.37px; border-left: 1px solid #474747; padding-left: 10px; margin-left: 10px; } .newsListing .topSection .newsType .type { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .topSection .newsType .type { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection .newsType .type { font-size: 22px; } } .newsListing .topSection .newsType .type { line-height: 16px; } @media screen and (min-width: 320px) { .newsListing .topSection .newsType .type { line-height: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection .newsType .type { line-height: 22px; } } .newsListing .topSection .newsType .type a { color: #474747; } .newsListing .topSection .newsType .type:last-of-type { border-left: none; padding-left: 0; margin-left: 0; } .newsListing .topSection .link { text-align: end; flex: 1; } .newsListing .topSection .link a { font-weight: 900; } .newsListing .topSection .link a { font-size: 12px; } @media screen and (min-width: 320px) { .newsListing .topSection .link a { font-size: calc(12px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection .link a { font-size: 15px; } } .newsListing .topSection .link a { line-height: 20px; } @media screen and (min-width: 320px) { .newsListing .topSection .link a { line-height: calc(20px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .topSection .link a { line-height: 26px; } } .newsListing .newsSection { display: flex; flex-wrap: wrap; max-width: 1130px; margin-inline: auto; margin-bottom: 100px; } .newsListing .newsSection .listingHolder { flex: 1; } .newsListing .newsSection .listingItemDIV .listingItem { padding-bottom: 40px; border-bottom: 3px solid black; } .newsListing .newsSection .listingItemDIV .listingItem.premium .listingImage { position: relative; } .newsListing .newsSection .listingItemDIV .listingItem.premium .listingImage:after { content: ""; background-image: url("../images/gold83x83.jpg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; bottom: 0; height: 4vw; min-height: 50px; max-height: 83px; width: 4vw; min-width: 50px; max-width: 83px; } .newsListing .newsSection .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .newsListing .newsSection .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .newsListing .newsSection .listingItemDIV .listingItem .listingImage { margin-bottom: 20px; } .newsListing .newsSection .listingItemDIV .listingItem .listingInfos { max-width: 860px; } .newsListing .newsSection .listingItemDIV:first-of-type .listingItem { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { margin-bottom: 20px; } .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { font-size: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { font-size: calc(20px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { font-size: 55px; } } .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingTitle { line-height: 67px; } } .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { font-weight: 500; } .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { font-size: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { font-size: calc(20px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { font-size: 24px; } } .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { line-height: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingItemDIV:first-of-type .listingDescription { line-height: 32px; } } .newsListing .newsSection .listingDate { margin-bottom: 20px; } .newsListing .newsSection .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingDate { font-size: 16px; } } .newsListing .newsSection .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingDate { line-height: 24px; } } .newsListing .newsSection .listingDate .type { color: #39c0f3; } .newsListing .newsSection .listingTitle { margin-bottom: 20px; } .newsListing .newsSection .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingTitle { font-size: calc(16px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingTitle { font-size: 28px; } } .newsListing .newsSection .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingTitle { line-height: 32px; } } .newsListing .newsSection .listingDescription { font-weight: 500; } .newsListing .newsSection .listingDescription { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingDescription { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingDescription { font-size: 22px; } } .newsListing .newsSection .listingDescription { line-height: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSection .listingDescription { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSection .listingDescription { line-height: 32px; } } .newsListing .newsSectionOthers .listingHolder { row-gap: 50px; } .newsListing .newsSectionOthers .listingItemDIV .listingItem { padding-bottom: 50px; border-bottom: 3px solid black; } .newsListing .newsSectionOthers .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .newsListing .newsSectionOthers .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .newsListing .newsSectionOthers .listingItemDIV .listingImage { margin-bottom: 20px; } .newsListing .newsSectionOthers .listingItemDIV .listingDate { margin-bottom: 20px; } .newsListing .newsSectionOthers .listingItemDIV .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .newsSectionOthers .listingItemDIV .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSectionOthers .listingItemDIV .listingDate { font-size: 16px; } } .newsListing .newsSectionOthers .listingItemDIV .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .newsListing .newsSectionOthers .listingItemDIV .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSectionOthers .listingItemDIV .listingDate { line-height: 24px; } } .newsListing .newsSectionOthers .listingItemDIV .listingDate .type { color: #39c0f3; } .newsListing .newsSectionOthers .listingItemDIV .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .newsListing .newsSectionOthers .listingItemDIV .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSectionOthers .listingItemDIV .listingTitle { font-size: 22px; } } .newsListing .newsSectionOthers .listingItemDIV .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSectionOthers .listingItemDIV .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSectionOthers .listingItemDIV .listingTitle { line-height: 32px; } } .newsListing .newsSectionOthers .loadMore { margin-top: 50px; text-align: center; } .newsListing .newsSectionOthers .loadMore a { font-weight: 500; line-height: 50px; display: inline-block; padding: 0 55px; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .newsListing .newsSectionOthers .loadMore a { font-size: 20px; } @media screen and (min-width: 320px) { .newsListing .newsSectionOthers .loadMore a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsListing .newsSectionOthers .loadMore a { font-size: 23px; } } .newsListing .newsSectionOthers .loadMore a:hover { color: white !important; opacity: 0.8; } .programsSection { margin-bottom: 100px; } .programsSection .featuredNews { border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .programsSection .listingItemDIV { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .programsSection .listingItemDIV.featured .listingInfos { margin-top: -80px; margin-inline: auto; padding: 30px 25px 60px 30px; max-width: 960px; background: #e4f8fd; position: relative; } .programsSection .listingItemDIV.featured .listingInfos .listingDate { margin-bottom: 8px; } .programsSection .listingItemDIV.featured .listingInfos .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingDate { font-size: 16px; } } .programsSection .listingItemDIV.featured .listingInfos .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingDate { line-height: 24px; } } .programsSection .listingItemDIV.featured .listingInfos .listingDate .type { color: #39c0f3; } .programsSection .listingItemDIV.featured .listingInfos .listingTitle { font-weight: bold; letter-spacing: -0.41px; color: black; max-width: 800px; margin-bottom: 20px; } .programsSection .listingItemDIV.featured .listingInfos .listingTitle { font-size: 20px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingTitle { font-size: calc(20px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingTitle { font-size: 55px; } } .programsSection .listingItemDIV.featured .listingInfos .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingTitle { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingTitle { line-height: 67px; } } .programsSection .listingItemDIV.featured .listingInfos .listingDescription { font-weight: 500; max-width: 800px; } .programsSection .listingItemDIV.featured .listingInfos .listingDescription { font-size: 16px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingDescription { font-size: calc(16px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingDescription { font-size: 24px; } } .programsSection .listingItemDIV.featured .listingInfos .listingDescription { line-height: 20px; } @media screen and (min-width: 320px) { .programsSection .listingItemDIV.featured .listingInfos .listingDescription { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .listingItemDIV.featured .listingInfos .listingDescription { line-height: 30px; } } .programsSection .otherNews { display: flex; flex-wrap: wrap; max-width: 1000px; } .programsSection .otherNews .listingItemDIV { border-left: 1px solid rgba(121, 121, 111, 0.3764705882); } .programsSection .otherNews .listingItemDIV .listingItem { margin-top: -10px; padding-bottom: 15px; padding-right: 20px; } .programsSection .otherNews .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .programsSection .otherNews .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .programsSection .otherNews .listingDate { margin-bottom: 16px; } .programsSection .otherNews .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingDate { font-size: 16px; } } .programsSection .otherNews .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingDate { line-height: 24px; } } .programsSection .otherNews .listingDate .type { color: #39c0f3; } .programsSection .otherNews .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingTitle { font-size: 18px; } } .programsSection .otherNews .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingTitle { line-height: 26px; } } .programsSection .featured { margin-bottom: 90px; } .programsSection .featuredNews { border: none; } .programsSection .otherNews { max-width: unset; } .programsSection .otherNews .listingImage { margin-bottom: 40px; } .programsSection .otherNews .listingItemDIV { border-inline: none; } .programsSection .otherNews .listingItemDIV .listingItem { border: none; padding: 0; } .programsSection .otherNews .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingTitle { font-size: 22px; } } .programsSection .otherNews .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .programsSection .otherNews .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .otherNews .listingTitle { line-height: 32px; } } .programsSection .loadMore { text-align: center; } .programsSection .loadMore a { font-weight: 500; line-height: 50px; display: inline-block; padding: 0 55px; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .programsSection .loadMore a { font-size: 20px; } @media screen and (min-width: 320px) { .programsSection .loadMore a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programsSection .loadMore a { font-size: 23px; } } .programsSection .loadMore a:hover { color: white !important; opacity: 0.8; } .adSectionWhite { background: white; padding: 10px 0 50px; text-align: center; } .adSectionWhite span { color: #868686; opacity: 0.5; font-size: 12px; line-height: 18px; } .adSectionWhite .imgContainer { margin-top: 35px; max-width: 750px; margin-inline: auto; } .newsDetails { padding: 50px 0 180px; } .newsDetails .newsSection { display: flex; flex-wrap: wrap; max-width: 1280px; margin-right: auto; } .newsDetails .topSection { padding-left: 60px; } .newsDetails .topSection .author { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex: 0 0 100%; } .newsDetails .topSection .author { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails .topSection .author { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .author { font-size: 16px; } } .newsDetails .topSection .author { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails .topSection .author { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .author { line-height: 24px; } } .newsDetails .topSection .author .info { font-size: 16px; line-height: 20px; } .newsDetails .topSection .author .info .name { color: #07b9ff; } .newsDetails .topSection .author .info .position { color: #005c80; } .newsDetails .topSection .author .imgContainer { width: 50px; } .newsDetails .topSection .author .type { color: #39c0f3; display: block; } .newsDetails .topSection .title { margin-bottom: 25px; } .newsDetails .topSection .title { font-size: 20px; } @media screen and (min-width: 320px) { .newsDetails .topSection .title { font-size: calc(20px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .title { font-size: 55px; } } .newsDetails .topSection .title { line-height: 30px; } @media screen and (min-width: 320px) { .newsDetails .topSection .title { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .title { line-height: 67px; } } .newsDetails .topSection .description { margin-bottom: 65px; } .newsDetails .topSection .description { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails .topSection .description { font-size: calc(16px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .description { font-size: 24px; } } .newsDetails .topSection .description { line-height: 20px; } @media screen and (min-width: 320px) { .newsDetails .topSection .description { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .topSection .description { line-height: 30px; } } .newsDetails .tab { display: flex; width: 100%; border-top: 1px solid rgba(121, 121, 111, 0.3764705882); border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); align-items: center; margin-bottom: 40px; } .newsDetails .tab img { max-height: 19px !important; transition: all 0.3s ease-in-out; } .newsDetails .tab img:hover { opacity: 0.7; } .newsDetails .tab .date { flex: 1; } .newsDetails .tab .date { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails .tab .date { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .tab .date { font-size: 16px; } } .newsDetails .tab .date { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails .tab .date { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .tab .date { line-height: 24px; } } .newsDetails .tab .date .type { color: #39c0f3; } .newsDetails .tab .share, .newsDetails .tab .socialIcon { padding: 20px; border-right: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .tab .share { position: relative; } .newsDetails .tab .share .desktopShare { min-width: 30px; } .newsDetails .tab .share .mobileShare { display: none; } .newsDetails .tab .share .social, .newsDetails .tab .share .socialMobile { display: none; background: black; position: absolute; top: 0; left: calc(100% + 20px); width: 160px; z-index: 1; } .newsDetails .tab .share .social:before, .newsDetails .tab .share .socialMobile:before { content: ""; display: block; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid black; position: absolute; top: 12px; left: -14px; } .newsDetails .tab .share .social h3, .newsDetails .tab .share .socialMobile h3 { color: white; padding: 15px; } .newsDetails .tab .share .social li a, .newsDetails .tab .share .socialMobile li a { padding-inline: 20px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #7096cf; color: white; display: flex; align-items: center; gap: 15px; } .newsDetails .tab .share .social li a img, .newsDetails .tab .share .socialMobile li a img { width: auto; max-height: 19px; } .newsDetails .tab .share .social li:last-of-type a, .newsDetails .tab .share .socialMobile li:last-of-type a { border: none; } .newsDetails .tab .share .social img, .newsDetails .tab .share .socialMobile img { height: auto !important; max-width: 20px !important; } .newsDetails .firstColumn { padding-left: 60px; } .newsDetails .firstColumn .imgContainer { margin-bottom: 40px; } .newsDetails .firstColumn .imgContainer:first-of-type { margin-bottom: 70px; } .newsDetails .firstColumn .bodyText { color: #30302e; font-weight: normal; font-size: 20px !important; margin-bottom: 30px; } .newsDetails .firstColumn .bodyText h2, .newsDetails .firstColumn .bodyText h3, .newsDetails .firstColumn .bodyText h4 { line-height: normal; } .newsDetails .firstColumn .bodyText ul li { margin-right: 25px; list-style: initial; font-weight: 500; margin-bottom: 30px; } .newsDetails .firstColumn .bodyText ul li { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails .firstColumn .bodyText ul li { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .firstColumn .bodyText ul li { font-size: 20px; } } .newsDetails .firstColumn .bodyText ul li { line-height: 20px; } @media screen and (min-width: 320px) { .newsDetails .firstColumn .bodyText ul li { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .firstColumn .bodyText ul li { line-height: 30px; } } .newsDetails .firstColumn .bodyText ul li:last-of-type { margin-bottom: 0; } .newsDetails .firstColumn .bodyText a { color: #39c0f3; } .newsDetails .firstColumn .bodyText a:hover { opacity: 0.7; } .newsDetails .firstColumn .imgInfo { font-size: 16px; line-height: 24px; padding: 5px 0; padding-right: 40px; color: #a9a9a9; font-weight: normal; position: relative; border-bottom: 1px solid #9a9a9a; margin-bottom: 70px; word-break: break-all; } .newsDetails .firstColumn .imgInfo:before { content: ""; background: #9a9a9a; width: 25px; height: 22.5px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } .newsDetails .firstColumn .adSectionWhite { padding: 15px 75px 30px; margin-bottom: 50px; } .newsDetails .firstColumn .adSectionWhite .imgContainer { margin: 0; } .newsDetails .firstColumn .floatedText { width: 50%; padding: 30px 0 30px 70px; color: #30302e; font-size: 30px; font-weight: 900; line-height: 39px; float: right; margin-right: -100px; } .newsDetails .secondColumn .relatedNews, .newsDetails .secondColumn .latestNews, .newsDetails .secondColumn .mostRead, .newsDetails .secondColumn .brief { border-top: 3px solid black; padding-top: 20px; } .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { font-weight: 900; margin-bottom: 35px; } .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { font-size: 20px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { font-size: 23px; } } .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { line-height: 16px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews h4, .newsDetails .secondColumn .latestNews h4, .newsDetails .secondColumn .mostRead h4, .newsDetails .secondColumn .brief h4 { line-height: 26px; } } .newsDetails .secondColumn .relatedNews .listingItem, .newsDetails .secondColumn .latestNews .listingItem, .newsDetails .secondColumn .mostRead .listingItem, .newsDetails .secondColumn .brief .listingItem { margin-bottom: 25px; } .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { margin-bottom: 10px; } .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { font-size: 16px; } } .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .listingDate, .newsDetails .secondColumn .latestNews .listingDate, .newsDetails .secondColumn .mostRead .listingDate, .newsDetails .secondColumn .brief .listingDate { line-height: 24px; } } .newsDetails .secondColumn .relatedNews .listingDate .type, .newsDetails .secondColumn .latestNews .listingDate .type, .newsDetails .secondColumn .mostRead .listingDate .type, .newsDetails .secondColumn .brief .listingDate .type { color: #39c0f3; } .newsDetails .secondColumn .relatedNews .listingDate { position: relative; } .newsDetails .secondColumn .relatedNews .listingDate:before { content: ""; background-image: url("../images/arrow.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: -30px; height: 12px; width: 15px; top: 50%; transform: translateY(-50%); } .newsDetails .secondColumn .relatedNews .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .listingTitle { font-size: 18px; } } .newsDetails .secondColumn .relatedNews .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .listingTitle { line-height: 26px; } } .newsDetails .secondColumn .relatedNews .ad { text-align: center; margin-bottom: 60px; } .newsDetails .secondColumn .relatedNews .ad span { color: rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .relatedNews .ad span { font-size: 12px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .ad span { font-size: calc(12px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .ad span { font-size: 12px; } } .newsDetails .secondColumn .relatedNews .ad span { line-height: 12px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .relatedNews .ad span { line-height: calc(12px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .relatedNews .ad span { line-height: 18px; } } .newsDetails .secondColumn .relatedNews .ad .imgContainer { padding: 5px; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .latestNews .listingItem { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .latestNews .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .latestNews .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .latestNews .listingTitle { font-size: 18px; } } .newsDetails .secondColumn .latestNews .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .latestNews .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .latestNews .listingTitle { line-height: 26px; } } .newsDetails .secondColumn .latestNews .ad { margin-top: 70px; text-align: center; margin-bottom: 60px; } .newsDetails .secondColumn .latestNews .ad span { color: rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .latestNews .ad span { font-size: 12px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .latestNews .ad span { font-size: calc(12px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .latestNews .ad span { font-size: 12px; } } .newsDetails .secondColumn .latestNews .ad span { line-height: 12px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .latestNews .ad span { line-height: calc(12px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .latestNews .ad span { line-height: 18px; } } .newsDetails .secondColumn .latestNews .ad .imgContainer { padding: 5px; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .mostRead .listingItemDIV .listingItem { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .secondColumn .mostRead .listingItemDIV:last-of-type .listingItem { border: none; padding: 0; margin: 0; } .newsDetails .secondColumn .mostRead .listingItemDIV:nth-of-type(1) .listingImage::after { content: "1"; } .newsDetails .secondColumn .mostRead .listingItemDIV:nth-of-type(2) .listingImage::after { content: "2"; } .newsDetails .secondColumn .mostRead .listingItemDIV:nth-of-type(3) .listingImage::after { content: "3"; } .newsDetails .secondColumn .mostRead .listingItemDIV:nth-of-type(4) .listingImage::after { content: "4"; } .newsDetails .secondColumn .mostRead .listingImage { margin-bottom: 40px; position: relative; } .newsDetails .secondColumn .mostRead .listingImage:after { font-weight: 300; color: white; position: absolute; right: 10px; top: 50px; } .newsDetails .secondColumn .mostRead .listingImage:after { font-size: 60px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingImage:after { font-size: calc(60px + 86 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingImage:after { font-size: 146px; } } .newsDetails .secondColumn .mostRead .listingImage:after { line-height: 16px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingImage:after { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingImage:after { line-height: 26px; } } .newsDetails .secondColumn .mostRead .listingImage a { position: relative; } .newsDetails .secondColumn .mostRead .listingImage a:before { content: ""; position: absolute; left: 0; top: 0; background: linear-gradient(223.44deg, rgba(5, 163, 237, 0.18) 50%, #034181 100%); height: 100%; width: 100%; z-index: 1; transform: scaleX(-1); } .newsDetails .secondColumn .mostRead .listingTitle { margin-bottom: 20px; } .newsDetails .secondColumn .mostRead .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingTitle { font-size: 18px; } } .newsDetails .secondColumn .mostRead .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingTitle { line-height: 26px; } } .newsDetails .secondColumn .mostRead .listingDescription { font-weight: 500; } .newsDetails .secondColumn .mostRead .listingDescription { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingDescription { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingDescription { font-size: 16px; } } .newsDetails .secondColumn .mostRead .listingDescription { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails .secondColumn .mostRead .listingDescription { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .secondColumn .mostRead .listingDescription { line-height: 24px; } } .newsDetails .secondColumn .ad { text-align: center; margin-bottom: 60px; } .newsDetails .secondColumn .ad .imgContainer { padding: 5px; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .newsDetails .listingDescription ul li, .newsDetails .brief ul li { margin-right: 25px; list-style: initial; font-weight: 500; margin-bottom: 30px; } .newsDetails .listingDescription ul li, .newsDetails .brief ul li { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails .listingDescription ul li, .newsDetails .brief ul li { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .listingDescription ul li, .newsDetails .brief ul li { font-size: 20px; } } .newsDetails .listingDescription ul li, .newsDetails .brief ul li { line-height: 20px; } @media screen and (min-width: 320px) { .newsDetails .listingDescription ul li, .newsDetails .brief ul li { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails .listingDescription ul li, .newsDetails .brief ul li { line-height: 30px; } } .newsDetails .listingDescription ul li:last-of-type, .newsDetails .brief ul li:last-of-type { margin-bottom: 0; } .newsDetails.premium { position: relative; } .newsDetails.premium .premiumSubscribe { position: absolute; bottom: 0; width: 100%; z-index: 1; background-color: #c0984e; } .newsDetails.premium .premiumSubscribe:after { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(225, 201, 134, 0) 0%, #c0984e 100%); } .newsDetails.premium .premiumSubscribe .subscribe, .newsDetails.premium .premiumSubscribe .signup { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; border-bottom: 1px solid black; margin-bottom: 100px; } .newsDetails.premium .premiumSubscribe .subscribe .imgContainer, .newsDetails.premium .premiumSubscribe .signup .imgContainer { padding-right: 20px; padding-left: 100px; flex: 1; } .newsDetails.premium .premiumSubscribe .signup h3 { margin-bottom: 30px; } .newsDetails.premium .premiumSubscribe .signup h3 { font-size: 26px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .signup h3 { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .signup h3 { font-size: 30px; } } .newsDetails.premium .premiumSubscribe .signup h3 { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .signup h3 { line-height: calc(24px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .signup h3 { line-height: 40px; } } .newsDetails.premium .premiumSubscribe .signup .link a { display: block; line-height: 50px; font-weight: 500; height: 50px; padding: 0 32px; max-width: 220px; background: white; color: black; border-radius: 30px; margin-bottom: 30px; } .newsDetails.premium .premiumSubscribe .signup .link a { font-size: 20px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .signup .link a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .signup .link a { font-size: 23px; } } .newsDetails.premium .premiumSubscribe .info { margin-bottom: 20px; } .newsDetails.premium .premiumSubscribe .info h3 { font-size: 22px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .info h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .info h3 { font-size: 28px; } } .newsDetails.premium .premiumSubscribe .info h3 { line-height: 24px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .info h3 { line-height: calc(24px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .info h3 { line-height: 40px; } } .newsDetails.premium .premiumSubscribe .info p { font-weight: normal; } .newsDetails.premium .premiumSubscribe .info p { font-size: 18px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .info p { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .info p { font-size: 20px; } } .newsDetails.premium .premiumSubscribe .info p { line-height: 20px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .info p { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .info p { line-height: 28px; } } .newsDetails.premium .premiumSubscribe .registerInfo { margin-bottom: 20px; } .newsDetails.premium .premiumSubscribe .registerInfo .price { margin-right: 10px; color: #f9d28a; } .newsDetails.premium .premiumSubscribe .registerInfo .price { font-size: 16px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .registerInfo .price { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .registerInfo .price { font-size: 22px; } } .newsDetails.premium .premiumSubscribe .registerInfo .link a { display: block; line-height: 50px; font-weight: 500; height: 50px; padding: 0 50px; background: black; color: white; border-radius: 30px; } .newsDetails.premium .premiumSubscribe .registerInfo .link a { font-size: 20px; } @media screen and (min-width: 320px) { .newsDetails.premium .premiumSubscribe .registerInfo .link a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .newsDetails.premium .premiumSubscribe .registerInfo .link a { font-size: 23px; } } .readMoreSection { margin-bottom: 190px; } .readMoreSection .blockHead { margin-bottom: 80px; padding-top: 15px; border-top: 3px solid black; width: 100%; } .readMoreSection .blockHead .blockTitle { font-weight: 900; } .readMoreSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .readMoreSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .blockHead .blockTitle { font-size: 30px; } } .readMoreSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .readMoreSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .blockHead .blockTitle { line-height: 26px; } } .readMoreSection .listingHolder { row-gap: 30px; } .readMoreSection .listingItemDIV { border-left: 1px solid rgba(121, 121, 111, 0.3764705882); } .readMoreSection .listingItemDIV:last-of-type { border: none; } .readMoreSection .listingDate { margin-bottom: 10px; color: #39c0f3; } .readMoreSection .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .readMoreSection .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .listingDate { font-size: 16px; } } .readMoreSection .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .readMoreSection .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .listingDate { line-height: 24px; } } .readMoreSection .listingTitle { margin-bottom: 20px; } .readMoreSection .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .readMoreSection .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .listingTitle { font-size: 18px; } } .readMoreSection .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .readMoreSection .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .readMoreSection .listingTitle { line-height: 26px; } } .liveBanner { background: #ff0000; padding: 40px 0; } .liveBanner .live { color: white; padding-right: 50px; position: relative; } .liveBanner .live { font-size: 20px; } @media screen and (min-width: 320px) { .liveBanner .live { font-size: calc(20px + 18 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveBanner .live { font-size: 38px; } } .liveBanner .live { line-height: 30px; } @media screen and (min-width: 320px) { .liveBanner .live { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveBanner .live { line-height: 67px; } } .liveBanner .live:before { content: ""; background-image: url("../images/liveCircle.png"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 38px; width: 38px; top: 50%; transform: translateY(-50%); filter: brightness(0) invert(1); } .liveBanner .title { color: white; } .liveBanner .title { font-size: 20px; } @media screen and (min-width: 320px) { .liveBanner .title { font-size: calc(20px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveBanner .title { font-size: 55px; } } .liveBanner .title { line-height: 30px; } @media screen and (min-width: 320px) { .liveBanner .title { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveBanner .title { line-height: 67px; } } .liveNews { padding-top: 100px; padding-bottom: 0; } .liveNews .listingItemDIV { position: relative; } .liveNews .firstColumn { padding-right: 80px; } .liveNews .firstColumn .imgContainer { margin-bottom: 10px; } .liveNews .firstColumn .imgContainer:first-of-type { margin-bottom: 10px; } .liveNews .firstColumn .listingItem { margin-bottom: 100px; } .liveNews .firstColumn .listingItem.limitedText .listingDescription { height: 400px; overflow: hidden; } .liveNews .firstColumn .listingItem.limitedText .listingDescription.show { height: unset; } .liveNews .firstColumn .listingDate { margin-bottom: 30px; color: white; border-bottom: 3px solid #ff0000; } .liveNews .firstColumn .listingDate span { display: inline-block; background-color: #ff0000; padding-right: 10px; width: 150px; direction: ltr; text-align: end; } .liveNews .firstColumn .listingAuthor { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; } .liveNews .firstColumn .listingAuthor .info { font-size: 16px; line-height: 20px; } .liveNews .firstColumn .listingAuthor .info .name { color: #07b9ff; } .liveNews .firstColumn .listingAuthor .info .position { color: #005c80; } .liveNews .firstColumn .listingAuthor .imgContainer { width: 50px; } .liveNews .firstColumn .imgInfo { margin-bottom: 30px; } .liveNews .firstColumn .listingTitle { max-width: 560px; margin-bottom: 40px; } .liveNews .firstColumn .listingTitle { font-size: 26px; } @media screen and (min-width: 320px) { .liveNews .firstColumn .listingTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .firstColumn .listingTitle { font-size: 30px; } } .liveNews .firstColumn .listingTitle { line-height: 24px; } @media screen and (min-width: 320px) { .liveNews .firstColumn .listingTitle { line-height: calc(24px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .firstColumn .listingTitle { line-height: 40px; } } .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { font-weight: 500; margin-bottom: 30px; } .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { font-size: 18px; } @media screen and (min-width: 320px) { .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { font-size: 20px; } } .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { line-height: 20px; } @media screen and (min-width: 320px) { .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .firstColumn .listingDescription, .liveNews .firstColumn .readMore { line-height: 30px; } } .liveNews .firstColumn .tab { justify-content: end; margin-bottom: 0; } .liveNews .ad { margin-top: 85px; text-align: center; } .liveNews .ad span { color: rgba(121, 121, 111, 0.3764705882); } .liveNews .ad span { font-size: 12px; } @media screen and (min-width: 320px) { .liveNews .ad span { font-size: calc(12px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .ad span { font-size: 12px; } } .liveNews .ad span { line-height: 12px; } @media screen and (min-width: 320px) { .liveNews .ad span { line-height: calc(12px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .liveNews .ad span { line-height: 18px; } } .liveNews .ad .imgContainer { padding: 5px; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .programDetailsSection { padding: 75px 0 200px; } .programDetailsSection.blackBg { background: black; color: white; } .programDetailsSection.blackBg a { color: white; } .programDetailsSection.blackBg .moreProgram .blockHead { border-top: 3px solid white; } .programDetailsSection .videoContainer { width: 100%; aspect-ratio: 16/9; margin-bottom: 50px; } .programDetailsSection .videoContainer iframe { width: 100%; height: 100%; } .programDetailsSection .programInfo { max-width: 1110px; margin-inline: auto; margin-bottom: 80px; } .programDetailsSection .title { margin-bottom: 25px; } .programDetailsSection .title { font-size: 20px; } @media screen and (min-width: 320px) { .programDetailsSection .title { font-size: calc(20px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .title { font-size: 55px; } } .programDetailsSection .title { line-height: 30px; } @media screen and (min-width: 320px) { .programDetailsSection .title { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .title { line-height: 67px; } } .programDetailsSection .description { margin-bottom: 65px; color: #c1c1c1; } .programDetailsSection .description { font-size: 16px; } @media screen and (min-width: 320px) { .programDetailsSection .description { font-size: calc(16px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .description { font-size: 24px; } } .programDetailsSection .description { line-height: 20px; } @media screen and (min-width: 320px) { .programDetailsSection .description { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .description { line-height: 30px; } } .programDetailsSection .tab { display: flex; width: 100%; border-top: 1px solid rgba(121, 121, 111, 0.3764705882); border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); align-items: center; margin-bottom: 40px; } .programDetailsSection .tab img { max-height: 19px !important; transition: all 0.3s ease-in-out; } .programDetailsSection .tab img:hover { opacity: 0.7; } .programDetailsSection .tab .date { flex: 1; } .programDetailsSection .tab .date { font-size: 16px; } @media screen and (min-width: 320px) { .programDetailsSection .tab .date { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .tab .date { font-size: 16px; } } .programDetailsSection .tab .date { line-height: 24px; } @media screen and (min-width: 320px) { .programDetailsSection .tab .date { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .tab .date { line-height: 24px; } } .programDetailsSection .tab .date .type { color: #39c0f3; } .programDetailsSection .tab .share, .programDetailsSection .tab .socialIcon { padding: 20px; border-right: 1px solid rgba(121, 121, 111, 0.3764705882); } .programDetailsSection .tab .share { position: relative; } .programDetailsSection .tab .share .desktopShare { min-width: 30px; } .programDetailsSection .tab .share .mobileShare { display: none; } .programDetailsSection .tab .share .social, .programDetailsSection .tab .share .socialMobile { display: none; background: black; position: absolute; top: 0; left: calc(100% + 20px); width: 160px; z-index: 1; } .programDetailsSection .tab .share .social:before, .programDetailsSection .tab .share .socialMobile:before { content: ""; display: block; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid black; position: absolute; top: 12px; left: -14px; } .programDetailsSection .tab .share .social h3, .programDetailsSection .tab .share .socialMobile h3 { color: white; padding: 15px; } .programDetailsSection .tab .share .social li a, .programDetailsSection .tab .share .socialMobile li a { padding-inline: 20px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #7096cf; color: white; display: flex; align-items: center; gap: 15px; } .programDetailsSection .tab .share .social li a img, .programDetailsSection .tab .share .socialMobile li a img { width: auto; max-height: 19px; } .programDetailsSection .tab .share .social li:last-of-type a, .programDetailsSection .tab .share .socialMobile li:last-of-type a { border: none; } .programDetailsSection .tab .share .social img, .programDetailsSection .tab .share .socialMobile img { height: auto !important; max-width: 20px !important; } .programDetailsSection .moreProgram .blockHead { border-top: 3px solid black; padding-top: 10px; margin-bottom: 50px; } .programDetailsSection .moreProgram .blockHead .blockTitle { font-weight: 900; } .programDetailsSection .moreProgram .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .programDetailsSection .moreProgram .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .moreProgram .blockHead .blockTitle { font-size: 30px; } } .programDetailsSection .moreProgram .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .programDetailsSection .moreProgram .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .moreProgram .blockHead .blockTitle { line-height: 26px; } } .programDetailsSection .moreProgram .listingHolder { row-gap: 30px; } .programDetailsSection .moreProgram .listingImage { margin-bottom: 30px; } .programDetailsSection .moreProgram .listingItemDIV { border: none; } .programDetailsSection .moreProgram .listingItemDIV .listingDate { color: #39c0f3; margin-bottom: 10px; } .programDetailsSection .moreProgram .listingItemDIV .listingItem.premium .listingDate { color: #c0984e; } .programDetailsSection .moreProgram .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .programDetailsSection .moreProgram .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .moreProgram .listingTitle { font-size: 22px; } } .programDetailsSection .moreProgram .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .programDetailsSection .moreProgram .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .programDetailsSection .moreProgram .listingTitle { line-height: 32px; } } .subscribeSection { padding: 100px 0 350px; } .subscribeSection h3 { font-weight: 200; margin-bottom: 40px; } .subscribeSection h3 { font-size: 40px; } @media screen and (min-width: 320px) { .subscribeSection h3 { font-size: calc(40px + 53 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection h3 { font-size: 93px; } } .subscribeSection h3 { line-height: 20px; } @media screen and (min-width: 320px) { .subscribeSection h3 { line-height: calc(20px + 61 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection h3 { line-height: 81px; } } .subscribeSection p { font-weight: 500; margin-bottom: 40px; } .subscribeSection p { font-size: 16px; } @media screen and (min-width: 320px) { .subscribeSection p { font-size: calc(16px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection p { font-size: 24px; } } .subscribeSection p { line-height: 20px; } @media screen and (min-width: 320px) { .subscribeSection p { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection p { line-height: 28px; } } .subscribeSection .newsletterInputWrapper { position: relative; display: flex; flex-direction: column; max-width: 600px; } .subscribeSection .newsletterInputWrapper input { border-radius: 30px; background-color: white; height: 59px; padding: 0 30px; } .subscribeSection .newsletterInputWrapper input { font-size: 18px; } @media screen and (min-width: 320px) { .subscribeSection .newsletterInputWrapper input { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection .newsletterInputWrapper input { font-size: 20px; } } .subscribeSection .newsletterInputWrapper input { line-height: 20px; } @media screen and (min-width: 320px) { .subscribeSection .newsletterInputWrapper input { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection .newsletterInputWrapper input { line-height: 30px; } } .subscribeSection .newsletterInputWrapper input::placeholder { color: #cacaca; } .subscribeSection .newsletterInputWrapper a { font-weight: 500; line-height: 81px; line-height: 35px; position: absolute; top: 50%; padding: 11px 60px; border-radius: 30px 0 0 30px; transform: translateY(-50%); left: 0; color: white; background-color: #39c0f3; font-weight: 500; transform: translateY(-50%); transition: all 0.3s ease-in-out; } .subscribeSection .newsletterInputWrapper a { font-size: 28px; } @media screen and (min-width: 320px) { .subscribeSection .newsletterInputWrapper a { font-size: calc(28px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscribeSection .newsletterInputWrapper a { font-size: 32px; } } .subscribeSection .newsletterInputWrapper a:hover { color: white !important; opacity: 0.8; } .aljareedaSection { padding-bottom: 150px; } .aljareedaSection .blockHead { border-top: 3px solid black; padding-top: 20px; margin-bottom: 30px; } .aljareedaSection .blockHead .blockTitle { font-weight: 900; } .aljareedaSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .aljareedaSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .blockHead .blockTitle { font-size: 30px; } } .aljareedaSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .aljareedaSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .blockHead .blockTitle { line-height: 26px; } } .aljareedaSection .btnContainer { text-align: center; margin-bottom: 80px; } .aljareedaSection .btnContainer .options { display: inline-flex; justify-content: center; margin-inline: auto; border: 2px solid #39c0f3; border-radius: 30px; padding: 3px; background-color: white; } .aljareedaSection .btnContainer .options .option a { border-radius: 30px; display: block; padding: 5px 20px; background-color: white; color: #39c0f3; } .aljareedaSection .btnContainer .options .option a { font-size: 20px; } @media screen and (min-width: 320px) { .aljareedaSection .btnContainer .options .option a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .btnContainer .options .option a { font-size: 23px; } } .aljareedaSection .btnContainer .options .option a { line-height: 24px; } @media screen and (min-width: 320px) { .aljareedaSection .btnContainer .options .option a { line-height: calc(24px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .btnContainer .options .option a { line-height: 27px; } } .aljareedaSection .btnContainer .options .option a:hover { color: #39c0f3 !important; } .aljareedaSection .btnContainer .options .option.active a { color: white; background: #39c0f3; } .aljareedaSection .btnContainer .options .option.active a:hover { color: white !important; } .aljareedaSection .listingHolder { row-gap: 55px; } .aljareedaSection .listingImage { margin-bottom: 20px; } .aljareedaSection .listingDate { font-size: 22px; } @media screen and (min-width: 320px) { .aljareedaSection .listingDate { font-size: calc(22px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .listingDate { font-size: 22px; } } .aljareedaSection .listingDate { line-height: 20px; } @media screen and (min-width: 320px) { .aljareedaSection .listingDate { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .listingDate { line-height: 32px; } } .aljareedaSection .loadMore { margin-top: 50px; text-align: center; } .aljareedaSection .loadMore a { font-weight: 500; line-height: 50px; display: inline-block; padding: 0 55px; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .aljareedaSection .loadMore a { font-size: 20px; } @media screen and (min-width: 320px) { .aljareedaSection .loadMore a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .aljareedaSection .loadMore a { font-size: 23px; } } .aljareedaSection .loadMore a:hover { color: white !important; opacity: 0.8; } .podcastSection { padding-bottom: 180px; } .podcastSection .blockHead { border-top: 3px solid black; padding-top: 20px; margin-bottom: 65px; } .podcastSection .blockHead .blockTitle { font-weight: 900; } .podcastSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .podcastSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .blockHead .blockTitle { font-size: 30px; } } .podcastSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .podcastSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .blockHead .blockTitle { line-height: 26px; } } .podcastSection .listingHolder { row-gap: 30px; } .podcastSection .listingItem { border-radius: 10px 10px 0 0; background: white; } .podcastSection .listingItem .listingImage { padding: 20px 20px 0; margin-bottom: 25px; } .podcastSection .listingItem .listingTitle { margin-bottom: 20px; padding-inline: 20px; } .podcastSection .listingItem .listingTitle { font-size: 28px; } @media screen and (min-width: 320px) { .podcastSection .listingItem .listingTitle { font-size: calc(28px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .listingItem .listingTitle { font-size: 32px; } } .podcastSection .listingItem .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .podcastSection .listingItem .listingTitle { line-height: calc(30px + 16 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .listingItem .listingTitle { line-height: 46px; } } .podcastSection .listingItem .listingDescription { font-weight: normal; margin-bottom: 20px; padding-inline: 20px; } .podcastSection .listingItem .listingDescription { font-size: 18px; } @media screen and (min-width: 320px) { .podcastSection .listingItem .listingDescription { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .listingItem .listingDescription { font-size: 20px; } } .podcastSection .listingItem .listingDescription { line-height: 20px; } @media screen and (min-width: 320px) { .podcastSection .listingItem .listingDescription { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .listingItem .listingDescription { line-height: 32px; } } .podcastSection .listingItem .listingLink { background: #e8e7e7; padding: 25px 50px; text-align: center; } .podcastSection .listingItem .listingLink a { line-height: 45px; height: 50px; font-weight: 500; color: black; background-color: white; border-radius: 30px; display: block; border: 1px solid black; } .podcastSection .listingItem .listingLink a { font-size: 20px; } @media screen and (min-width: 320px) { .podcastSection .listingItem .listingLink a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastSection .listingItem .listingLink a { font-size: 23px; } } .podcastSection .listingItem.green .listingTitle { color: #0fd7a2; } .podcastSection .listingItem.yellow .listingTitle { color: #d5ca25; } .podcastSection .listingItem.red .listingTitle { color: #931d52; } .podcastSection .listingItem.blue .listingTitle { color: #5479f7; } .topMenu { display: flex; flex-wrap: wrap; row-gap: 30px; align-items: baseline; padding-top: 20px; margin-bottom: 60px; border-top: 3px solid black; } .topMenu h2 { font-weight: 900; margin-left: 35px; } .topMenu h2 { font-size: 26px; } @media screen and (min-width: 320px) { .topMenu h2 { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu h2 { font-size: 30px; } } .topMenu h2 { line-height: 16px; } @media screen and (min-width: 320px) { .topMenu h2 { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu h2 { line-height: 26px; } } .topMenu .newsType { display: flex; flex-wrap: wrap; } .topMenu .newsType .type { font-weight: 300; letter-spacing: -0.37px; border-left: 1px solid #474747; padding-left: 10px; margin-left: 10px; } .topMenu .newsType .type { font-size: 16px; } @media screen and (min-width: 320px) { .topMenu .newsType .type { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu .newsType .type { font-size: 22px; } } .topMenu .newsType .type { line-height: 16px; } @media screen and (min-width: 320px) { .topMenu .newsType .type { line-height: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu .newsType .type { line-height: 22px; } } .topMenu .newsType .type a { color: #474747; } .topMenu .newsType .type:last-of-type { border-left: none; padding-left: 0; margin-left: 0; } .topMenu .link { text-align: end; flex: 1; } .topMenu .link a { font-weight: 900; } .topMenu .link a { font-size: 12px; } @media screen and (min-width: 320px) { .topMenu .link a { font-size: calc(12px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu .link a { font-size: 15px; } } .topMenu .link a { line-height: 20px; } @media screen and (min-width: 320px) { .topMenu .link a { line-height: calc(20px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .topMenu .link a { line-height: 26px; } } .obituariesSection { padding-bottom: 100px; } .obituariesSection .dk-select-options { min-width: 150px; } .obituariesSection .blockHead { position: relative; border-top: 3px solid black; padding-top: 15px; margin-bottom: 65px; display: flex; z-index: 1; } .obituariesSection .blockHead .blockTitle { font-weight: 900; padding-left: 40px; } .obituariesSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .obituariesSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .blockHead .blockTitle { font-size: 30px; } } .obituariesSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .obituariesSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .blockHead .blockTitle { line-height: 26px; } } .obituariesSection .blockHead .dropDown { display: flex; justify-content: space-between; width: 100%; } .obituariesSection .blockHead .dropDown .dateDropdown { display: flex; position: relative; } .obituariesSection .blockHead .dropDown .dateDropdown:before { content: ""; background-image: url("../images/calendar.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 27px; width: 25px; top: 50%; transform: translateY(-50%); } .obituariesSection .blockHead .dropDown .dateDropdown:after { content: ""; background-image: url("../images/triangleDown.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; height: 11.25px; width: 18px; top: 50%; transform: translateY(-50%); } .obituariesSection .blockHead .dropDown .dateDropdown input { background: none; text-align: end; color: #474747; font-size: 22px; line-height: 22px; width: 180px; height: 26px; position: relative; z-index: 2; padding-left: 30px; cursor: pointer; } .obituariesSection .blockHead .dropDown .nameDropdown .dk-select { width: auto; } .obituariesSection .blockHead .dropDown .nameDropdown .dk-select .dk-selected { background: transparent; border: none; font-size: 22px; font-weight: 300; line-height: 30px; height: auto; padding-right: 0; padding-left: 30px; } .obituariesSection .blockHead .dropDown .nameDropdown .dk-select .dk-selected:before { content: none; } .obituariesSection .blockHead .dropDown .nameDropdown .dk-select .dk-selected:after { content: ""; background-image: url("../images/triangleDown.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; right: unset; border: none; margin: 0; height: 11.25px; width: 18px; top: 50%; transform: translateY(-50%); } .obituariesSection .blockHead .dropDown .datepicker-container1, .obituariesSection .blockHead .dropDown .datepicker-container2 { position: relative; } .obituariesSection .blockHead .dropDown .datepicker-container1 .datepicker, .obituariesSection .blockHead .dropDown .datepicker-container2 .datepicker { z-index: 9; } .obituariesSection .blockHead .dropDown .datepicker-dropdown.datepicker-orient-bottom:after, .obituariesSection .blockHead .dropDown .datepicker-dropdown.datepicker-orient-bottom:before { left: 7px; right: unset; } .obituariesSection .listingItemDIV .listingItem { display: flex; padding-bottom: 50px; margin-bottom: 80px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .obituariesSection .listingItemDIV .listingItem .listingImage { flex: 0 0 35%; max-width: 35%; } .obituariesSection .listingItemDIV .listingItem .listingInfos { flex: 0 0 65%; max-width: 65%; padding-right: 100px; } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { margin-bottom: 20px; } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { font-size: 20px; } @media screen and (min-width: 320px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { font-size: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { font-size: 32px; } } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingTitle { line-height: 67px; } } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { font-weight: normal; } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { font-size: 18px; } @media screen and (min-width: 320px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { font-size: 20px; } } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { line-height: 16px; } @media screen and (min-width: 320px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { line-height: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription { line-height: 22px; } } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription p, .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription span, .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription div { font-size: 18px !important; margin-bottom: 10px !important; } .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription h2, .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription h3, .obituariesSection .listingItemDIV .listingItem .listingInfos .listingDescription h4 { line-height: 30px; font-weight: normal; } .obituariesSection .listingItemDIV:last-of-type .listingItem { margin-bottom: 0; padding-bottom: 0; border: none; } .podcastDetailSection { position: relative; z-index: 1; } .podcastDetailSection .blockHead { border-top: 3px solid black; padding-top: 20px; margin-bottom: 75px; } .podcastDetailSection .blockHead .blockTitle { font-weight: 900; } .podcastDetailSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .podcastDetailSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .blockHead .blockTitle { font-size: 30px; } } .podcastDetailSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .podcastDetailSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .blockHead .blockTitle { line-height: 26px; } } .podcastDetailSection .listingItem { display: flex; flex-wrap: wrap; row-gap: 30px; padding-bottom: 50px; } .podcastDetailSection .listingItem .listingImage { flex: 0 0 35%; max-width: 35%; } .podcastDetailSection .listingItem .listingInfos { flex: 0 0 65%; max-width: 65%; padding-right: 25px; } .podcastDetailSection .listingItem .listingInfos .listingTitle { margin-bottom: 30px; } .podcastDetailSection .listingItem .listingInfos .listingTitle { font-size: 34px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .listingInfos .listingTitle { font-size: calc(34px + 21 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .listingInfos .listingTitle { font-size: 55px; } } .podcastDetailSection .listingItem .listingInfos .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .listingInfos .listingTitle { line-height: calc(30px + 37 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .listingInfos .listingTitle { line-height: 67px; } } .podcastDetailSection .listingItem .listingInfos .listingDescription { font-weight: normal; margin-bottom: 45px; } .podcastDetailSection .listingItem .listingInfos .listingDescription { font-size: 18px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .listingInfos .listingDescription { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .listingInfos .listingDescription { font-size: 20px; } } .podcastDetailSection .listingItem .listingInfos .listingDescription { line-height: 16px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .listingInfos .listingDescription { line-height: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .listingInfos .listingDescription { line-height: 22px; } } .podcastDetailSection .listingItem .listingInfos .listingDescription h2, .podcastDetailSection .listingItem .listingInfos .listingDescription h3, .podcastDetailSection .listingItem .listingInfos .listingDescription h4 { line-height: 30px; font-weight: normal; } .podcastDetailSection .listingItem .tab { display: flex; width: 100%; border-top: 1px solid rgba(121, 121, 111, 0.3764705882); border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); align-items: center; margin-bottom: 40px; } .podcastDetailSection .listingItem .tab img { max-height: 19px !important; transition: all 0.3s ease-in-out; } .podcastDetailSection .listingItem .tab img:hover { opacity: 0.7; } .podcastDetailSection .listingItem .tab .date { flex: 1; } .podcastDetailSection .listingItem .tab .date { font-size: 16px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .tab .date { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .tab .date { font-size: 16px; } } .podcastDetailSection .listingItem .tab .date { line-height: 24px; } @media screen and (min-width: 320px) { .podcastDetailSection .listingItem .tab .date { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .podcastDetailSection .listingItem .tab .date { line-height: 24px; } } .podcastDetailSection .listingItem .tab .date .type { color: #39c0f3; } .podcastDetailSection .listingItem .tab .share, .podcastDetailSection .listingItem .tab .socialIcon { padding: 20px; border-right: 1px solid rgba(121, 121, 111, 0.3764705882); } .podcastDetailSection .listingItem .tab .share { position: relative; } .podcastDetailSection .listingItem .tab .share .desktopShare { min-width: 30px; } .podcastDetailSection .listingItem .tab .share .mobileShare { display: none; } .podcastDetailSection .listingItem .tab .share .social, .podcastDetailSection .listingItem .tab .share .socialMobile { display: none; background: black; position: absolute; top: 0; left: calc(100% + 20px); width: 160px; z-index: 1; } .podcastDetailSection .listingItem .tab .share .social:before, .podcastDetailSection .listingItem .tab .share .socialMobile:before { content: ""; display: block; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid black; position: absolute; top: 12px; left: -14px; } .podcastDetailSection .listingItem .tab .share .social h3, .podcastDetailSection .listingItem .tab .share .socialMobile h3 { color: white; padding: 15px; } .podcastDetailSection .listingItem .tab .share .social li a, .podcastDetailSection .listingItem .tab .share .socialMobile li a { padding-inline: 20px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #7096cf; color: white; display: flex; align-items: center; gap: 15px; } .podcastDetailSection .listingItem .tab .share .social li a img, .podcastDetailSection .listingItem .tab .share .socialMobile li a img { width: auto; max-height: 19px; } .podcastDetailSection .listingItem .tab .share .social li:last-of-type a, .podcastDetailSection .listingItem .tab .share .socialMobile li:last-of-type a { border: none; } .podcastDetailSection .listingItem .tab .share .social img, .podcastDetailSection .listingItem .tab .share .socialMobile img { height: auto !important; max-width: 20px !important; } #waveform { width: 100%; background-color: white; border-radius: 10px; overflow: hidden; margin-inline-end: 10px; } .audio-player-container { direction: ltr; display: flex; align-items: center; width: 100%; padding: 15px; background-color: white; border-radius: 20px; box-shadow: 0 0 33px 0 rgba(0, 0, 0, 0.15); margin-bottom: 35px; } .controls { display: flex; align-items: center; justify-content: space-between; } .playPause { background: transparent; color: white; border: none; width: 40px; height: 40px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-inline-end: 5px; } .currentTime, .duration { font-size: 15px; font-weight: 500; line-height: 30px; color: #112039; margin-inline: 5px; } .duration { margin-inline-end: 10px; } .seperator { font-size: 15px; font-weight: 500; line-height: 30px; color: #112039; } .volume-control-container { position: relative; margin-inline-end: 10px; } .volumeButton { background: none; border: none; cursor: pointer; width: 17px; vertical-align: middle; } .volumePopup { position: absolute; bottom: 50px; left: -20px; background-color: white; border-radius: 5px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); padding: 10px; display: none; } .volumePopup input[type=range] { width: 100px; vertical-align: middle; -webkit-appearance: none; appearance: none; background: black000; } .volumePopup input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: black000; } .volumePopup input[type=range]::-moz-range-track { width: 100%; height: 4px; background: black000; } .volumePopup input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: black; border-radius: 50%; margin-top: -3.5px; cursor: pointer; } .volumePopup input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: #ffffff; border-radius: 50%; cursor: pointer; } .optionsMenu { position: relative; } .optionsButton { background: none; border: none; cursor: pointer; width: 15px; transform: rotate(90deg); filter: brightness(0); vertical-align: middle; } .optionsPopup { position: absolute; bottom: 50px; right: -20px; background-color: white; border-radius: 5px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); padding: 10px; display: none; } .hidden { display: none; } .visible { display: block; } .otherPodcastSection { margin-bottom: 80px; } .otherPodcastSection .blockHead { border-top: 3px solid black; padding-top: 20px; margin-bottom: 30px; } .otherPodcastSection .blockHead .blockTitle { font-weight: 900; } .otherPodcastSection .blockHead .blockTitle { font-size: 26px; } @media screen and (min-width: 320px) { .otherPodcastSection .blockHead .blockTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .blockHead .blockTitle { font-size: 30px; } } .otherPodcastSection .blockHead .blockTitle { line-height: 16px; } @media screen and (min-width: 320px) { .otherPodcastSection .blockHead .blockTitle { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .blockHead .blockTitle { line-height: 26px; } } .otherPodcastSection .blockBody { margin-bottom: 70px; } .otherPodcastSection .listingItem > a { display: flex; flex-direction: row-reverse; } .otherPodcastSection .listingItem > a .listingImage { flex: 0 0 50%; } .otherPodcastSection .listingItem > a .listingInfos { flex: 0 0 50%; } .otherPodcastSection .listingHolder { row-gap: 30px; } .otherPodcastSection .listingImage { max-width: 190px; margin-bottom: 20px; } .otherPodcastSection .listingDate { margin-bottom: 15px; } .otherPodcastSection .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .otherPodcastSection .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .listingDate { font-size: 16px; } } .otherPodcastSection .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .otherPodcastSection .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .listingDate { line-height: 24px; } } .otherPodcastSection .listingTitle { font-size: 18px; } @media screen and (min-width: 320px) { .otherPodcastSection .listingTitle { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .listingTitle { font-size: 18px; } } .otherPodcastSection .listingTitle { line-height: 26px; } @media screen and (min-width: 320px) { .otherPodcastSection .listingTitle { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .listingTitle { line-height: 26px; } } .otherPodcastSection .readMore { margin-top: 50px; text-align: center; } .otherPodcastSection .readMore a { font-weight: 500; line-height: 50px; display: inline-block; padding: 0 55px; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .otherPodcastSection .readMore a { font-size: 20px; } @media screen and (min-width: 320px) { .otherPodcastSection .readMore a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .otherPodcastSection .readMore a { font-size: 23px; } } .otherPodcastSection .readMore a:hover { color: white !important; opacity: 0.8; } .loginRegisterSection { padding: 130px 0 150px; } .loginRegisterSection .row { row-gap: 30px; } .loginRegisterSection .login, .loginRegisterSection .register { max-width: 1180px; margin-inline: auto; padding-bottom: 25px; margin-bottom: 35px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .loginRegisterSection .register { padding-bottom: 40px; margin-bottom: 0; } .loginRegisterSection .register p { font-weight: normal; } .loginRegisterSection .register p { font-size: 14px; } @media screen and (min-width: 320px) { .loginRegisterSection .register p { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .register p { font-size: 15px; } } .loginRegisterSection .register p { line-height: 20px; } @media screen and (min-width: 320px) { .loginRegisterSection .register p { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .register p { line-height: 23px; } } .loginRegisterSection h3 { color: #39c0f3; font-weight: normal; margin-bottom: 20px; } .loginRegisterSection h3 { font-size: 22px; } @media screen and (min-width: 320px) { .loginRegisterSection h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection h3 { font-size: 28px; } } .loginRegisterSection h3 { line-height: 20px; } @media screen and (min-width: 320px) { .loginRegisterSection h3 { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection h3 { line-height: 23px; } } .loginRegisterSection label { color: #39c0f3; font-weight: normal; } .loginRegisterSection label { font-size: 14px; } @media screen and (min-width: 320px) { .loginRegisterSection label { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection label { font-size: 15px; } } .loginRegisterSection label { line-height: 16px; } @media screen and (min-width: 320px) { .loginRegisterSection label { line-height: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection label { line-height: 18px; } } .loginRegisterSection .inputParent input { width: 100%; border-radius: 90px; border: 1px solid #39c0f3; background: white; padding: 10px 20px; } .loginRegisterSection .inputParent input::placeholder { color: #c1c1c1; } .loginRegisterSection .btnContainer { display: flex; align-items: center; justify-content: end; } .loginRegisterSection .btnContainer input { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; text-align: center; color: white; background: black; border-radius: 30px; transition: all 0.3s ease-in-out; } .loginRegisterSection .btnContainer input { font-size: 20px; } @media screen and (min-width: 320px) { .loginRegisterSection .btnContainer input { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .btnContainer input { font-size: 23px; } } .loginRegisterSection .btnContainer input:hover { color: white !important; opacity: 0.8; } .loginRegisterSection .btnContainer a { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; text-align: center; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .loginRegisterSection .btnContainer a { font-size: 20px; } @media screen and (min-width: 320px) { .loginRegisterSection .btnContainer a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .btnContainer a { font-size: 23px; } } .loginRegisterSection .btnContainer a:hover { color: white !important; opacity: 0.8; } .loginRegisterSection .forgotPassword { text-align: end; } .loginRegisterSection .forgotPassword a { text-decoration: underline; color: #39c0f3; } .loginRegisterSection .forgotPassword a { font-size: 12px; } @media screen and (min-width: 320px) { .loginRegisterSection .forgotPassword a { font-size: calc(12px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .forgotPassword a { font-size: 13px; } } .loginRegisterSection .forgotPassword a { line-height: 18px; } @media screen and (min-width: 320px) { .loginRegisterSection .forgotPassword a { line-height: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .loginRegisterSection .forgotPassword a { line-height: 20px; } } .subscriptionSection { padding: 70px 0 100px; max-width: 1210px; margin-inline: auto; } .subscriptionSection .row { row-gap: 30px; } .subscriptionSection h2 { padding-bottom: 25px; margin-bottom: 50px; border-bottom: 1px solid #39c0f3; } .subscriptionSection h2 { font-size: 34px; } @media screen and (min-width: 320px) { .subscriptionSection h2 { font-size: calc(34px + 21 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection h2 { font-size: 55px; } } .subscriptionSection h2 { line-height: 50px; } @media screen and (min-width: 320px) { .subscriptionSection h2 { line-height: calc(50px + 17 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection h2 { line-height: 67px; } } .subscriptionSection .offers { margin-bottom: 50px; padding-bottom: 70px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .subscriptionSection .offers label { font-weight: bold; } .subscriptionSection .offers .listingItem { padding: 50px 40px 35px; border-radius: 38px; background: white; } .subscriptionSection .offers .listingHolder { margin-bottom: 100px; } .subscriptionSection .offers .listingTitle { margin-bottom: 40px; color: #39c0f3; } .subscriptionSection .offers .listingTitle { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingTitle { font-size: calc(20px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingTitle { font-size: 24px; } } .subscriptionSection .offers .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingTitle { line-height: calc(20px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingTitle { line-height: 30px; } } .subscriptionSection .offers .listingPrice { font-weight: 500; margin-bottom: 55px; } .subscriptionSection .offers .listingPrice { font-size: 65px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingPrice { font-size: calc(65px + 35 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingPrice { font-size: 100px; } } .subscriptionSection .offers .listingPrice { line-height: 48px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingPrice { line-height: calc(48px + 19 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingPrice { line-height: 67px; } } .subscriptionSection .offers .listingDate { margin-bottom: 10px; font-weight: normal; } .subscriptionSection .offers .listingDate { font-size: 18px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingDate { font-size: calc(18px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingDate { font-size: 22px; } } .subscriptionSection .offers .listingDate { line-height: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .listingDate { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .listingDate { line-height: 28px; } } .subscriptionSection .offers .renew { font-weight: normal; margin-bottom: 25px; } .subscriptionSection .offers .renew { font-size: 14px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .renew { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .renew { font-size: 15px; } } .subscriptionSection .offers .renew { line-height: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .renew { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .renew { line-height: 23px; } } .subscriptionSection .offers .formHolder { align-items: end; } .subscriptionSection .offers .userInfo { padding-bottom: 40px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); margin-bottom: 60px; } .subscriptionSection .offers .userInfo .inputParent input { width: 100%; border-radius: 90px; border: 1px solid #39c0f3; background: white; padding: 10px 20px; } .subscriptionSection .offers .userInfo .inputParent input::placeholder { color: #c1c1c1; } .subscriptionSection .offers .paymentMethod { margin-bottom: 50px; } .subscriptionSection .offers .paymentMethod .inputHolder { align-items: center; } .subscriptionSection .offers .paymentMethod h4 { color: #39c0f3; } .subscriptionSection .offers .paymentMethod h4 { font-size: 14px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .paymentMethod h4 { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .paymentMethod h4 { font-size: 15px; } } .subscriptionSection .offers .paymentMethod h4 { line-height: 16px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .paymentMethod h4 { line-height: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .paymentMethod h4 { line-height: 18px; } } .subscriptionSection .offers .paymentMethod .radioSection { display: flex; flex-wrap: wrap; column-gap: 60px; row-gap: 30px; } .subscriptionSection .offers .paymentMethod .inputEntity { display: flex; gap: 10px; align-items: center; } .subscriptionSection .offers .paymentMethod .inputEntity input[type=radio] { height: 36px; width: 36px; border: 2px solid #39c0f3; border-radius: 50%; background: white; vertical-align: middle; position: relative; cursor: pointer; } .subscriptionSection .offers .paymentMethod .inputEntity input[type=radio]:checked:after { content: ""; border-radius: 50%; height: 29px; width: 29px; background: #39c0f3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .subscriptionSection .offers .paymentMethod .inputEntity img { max-height: 40px; width: auto; } .subscriptionSection .offers .paymentMethod .inputEntity h3 { color: black; margin: 0; font-weight: bold; } .subscriptionSection .offers .paymentMethod .optionContainer { text-align: end; } .subscriptionSection .offers .paymentMethod .optionContainer .options { display: inline-flex; margin-inline: auto; border: 2px solid #39c0f3; border-radius: 30px; padding: 2px; background-color: white; } .subscriptionSection .offers .paymentMethod .optionContainer .options .option { font-weight: 500; } .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { border-radius: 30px; display: block; padding: 0 20px; color: #39c0f3; } .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { font-size: 23px; } } .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { line-height: 24px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { line-height: calc(24px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .paymentMethod .optionContainer .options .option a { line-height: 27px; } } .subscriptionSection .offers .paymentMethod .optionContainer .options .option a:hover { color: #39c0f3 !important; } .subscriptionSection .offers .paymentMethod .optionContainer .options .option.active a { color: white; background: #39c0f3; } .subscriptionSection .offers .paymentMethod .optionContainer .options .option.active a:hover { color: white !important; } .subscriptionSection .offers .couponEntry .inputParent input { width: 100%; border-radius: 90px; border: 1px solid #39c0f3; background: white; padding: 10px 20px; } .subscriptionSection .offers .couponEntry .inputParent input::placeholder { color: #c1c1c1; } .subscriptionSection .offers .submitSection { text-align: end; } .subscriptionSection .offers .submitSection input { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; max-width: 100%; text-align: center; color: white; background: black; border-radius: 30px; transition: all 0.3s ease-in-out; } .subscriptionSection .offers .submitSection input { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .submitSection input { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .submitSection input { font-size: 23px; } } .subscriptionSection .offers .submitSection input:hover { color: white !important; opacity: 0.8; } .subscriptionSection .offers .submitSection a { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; text-align: center; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .subscriptionSection .offers .submitSection a { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .offers .submitSection a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .offers .submitSection a { font-size: 23px; } } .subscriptionSection .offers .submitSection a:hover { color: white !important; opacity: 0.8; } .subscriptionSection .listingImage { max-width: 220px; margin-bottom: 30px; } .subscriptionSection .chooseSubscription input[type=radio] { position: absolute; } .subscriptionSection .chooseSubscription input[type=radio]:checked ~ label:after { content: ""; position: absolute; left: 0; border-radius: 30px; height: 100%; width: 100%; background: #39c0f3; } .subscriptionSection .chooseSubscription input[type=radio]:checked ~ label:before { content: ""; position: absolute; left: 50%; top: 50%; height: 20px; width: 23px; transform: translate(-50%, -50%); background-image: url(../images/check.svg); background-repeat: no-repeat; z-index: 1; } .subscriptionSection .chooseSubscription label { font-weight: normal; line-height: 40px; cursor: pointer; display: block; width: 100%; color: #474747; text-align: center; border: 2px solid #39c0f3; background: #e4f8fd; border-radius: 30px; position: relative; transition: all 0.3s ease-in-out; } .subscriptionSection .chooseSubscription label { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .chooseSubscription label { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .chooseSubscription label { font-size: 23px; } } .subscriptionSection .chooseSubscription label:hover { opacity: 0.8; } .subscriptionSection .login, .subscriptionSection .otherOffers { max-width: 1180px; margin-inline: auto; padding-bottom: 60px; margin-bottom: 85px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .subscriptionSection .login .inputParent input, .subscriptionSection .otherOffers .inputParent input { width: 100%; border-radius: 90px; border: 1px solid #39c0f3; background: white; padding: 10px 20px; } .subscriptionSection .login .inputParent input::placeholder, .subscriptionSection .otherOffers .inputParent input::placeholder { color: #c1c1c1; } .subscriptionSection .otherOffers { padding-bottom: 40px; margin-bottom: 0; } .subscriptionSection .otherOffers p { font-weight: normal; } .subscriptionSection .otherOffers p { font-size: 14px; } @media screen and (min-width: 320px) { .subscriptionSection .otherOffers p { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .otherOffers p { font-size: 15px; } } .subscriptionSection .otherOffers p { line-height: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .otherOffers p { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .otherOffers p { line-height: 23px; } } .subscriptionSection .otherOffers h4 { font-weight: normal; margin-bottom: 10px; } .subscriptionSection .otherOffers h4 { font-size: 18px; } @media screen and (min-width: 320px) { .subscriptionSection .otherOffers h4 { font-size: calc(18px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .otherOffers h4 { font-size: 21px; } } .subscriptionSection .otherOffers h4 { line-height: 16px; } @media screen and (min-width: 320px) { .subscriptionSection .otherOffers h4 { line-height: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .otherOffers h4 { line-height: 18px; } } .subscriptionSection h3 { color: #39c0f3; font-weight: normal; margin-bottom: 20px; } .subscriptionSection h3 { font-size: 22px; } @media screen and (min-width: 320px) { .subscriptionSection h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection h3 { font-size: 28px; } } .subscriptionSection h3 { line-height: 20px; } @media screen and (min-width: 320px) { .subscriptionSection h3 { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection h3 { line-height: 23px; } } .subscriptionSection label { color: #39c0f3; font-weight: normal; } .subscriptionSection label { font-size: 14px; } @media screen and (min-width: 320px) { .subscriptionSection label { font-size: calc(14px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection label { font-size: 15px; } } .subscriptionSection label { line-height: 16px; } @media screen and (min-width: 320px) { .subscriptionSection label { line-height: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection label { line-height: 18px; } } .subscriptionSection .btnContainer { display: flex; align-items: center; justify-content: end; } .subscriptionSection .btnContainer input { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; text-align: center; color: white; background: black; border-radius: 30px; transition: all 0.3s ease-in-out; } .subscriptionSection .btnContainer input { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .btnContainer input { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .btnContainer input { font-size: 23px; } } .subscriptionSection .btnContainer input:hover { color: white !important; opacity: 0.8; } .subscriptionSection .btnContainer a { font-weight: 500; line-height: 50px; display: inline-block; width: 232px; text-align: center; color: white; background: #39c0f3; border-radius: 30px; transition: all 0.3s ease-in-out; } .subscriptionSection .btnContainer a { font-size: 20px; } @media screen and (min-width: 320px) { .subscriptionSection .btnContainer a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .btnContainer a { font-size: 23px; } } .subscriptionSection .btnContainer a:hover { color: white !important; opacity: 0.8; } .subscriptionSection .forgotPassword { text-align: end; } .subscriptionSection .forgotPassword a { text-decoration: underline; color: #39c0f3; } .subscriptionSection .forgotPassword a { font-size: 12px; } @media screen and (min-width: 320px) { .subscriptionSection .forgotPassword a { font-size: calc(12px + 1 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .forgotPassword a { font-size: 13px; } } .subscriptionSection .forgotPassword a { line-height: 18px; } @media screen and (min-width: 320px) { .subscriptionSection .forgotPassword a { line-height: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .subscriptionSection .forgotPassword a { line-height: 20px; } } .premiumInfoSection { max-width: 1210px; margin-inline: auto; } .premiumInfoSection .bannerImage { max-width: 400px; } .premiumInfoSection .listingHolder { display: flex; justify-content: start; align-items: end; gap: 50px; } .premiumInfoSection .listingInfos { margin-bottom: 30px; } .premiumInfoSection .listingTitle { font-size: 26px; } @media screen and (min-width: 320px) { .premiumInfoSection .listingTitle { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .premiumInfoSection .listingTitle { font-size: 30px; } } .premiumInfoSection .listingTitle { line-height: 30px; } @media screen and (min-width: 320px) { .premiumInfoSection .listingTitle { line-height: calc(30px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .premiumInfoSection .listingTitle { line-height: 40px; } } .premiumInfoSection .listingDescription { font-weight: 500; } .premiumInfoSection .listingDescription { font-size: 18px; } @media screen and (min-width: 320px) { .premiumInfoSection .listingDescription { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .premiumInfoSection .listingDescription { font-size: 20px; } } .premiumInfoSection .listingDescription { line-height: 20px; } @media screen and (min-width: 320px) { .premiumInfoSection .listingDescription { line-height: calc(20px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .premiumInfoSection .listingDescription { line-height: 28px; } } .searchSection { padding: 80px 0; } .searchSection h3 { margin-bottom: 50px; } .searchSection h3 { font-size: 22px; } @media screen and (min-width: 320px) { .searchSection h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection h3 { font-size: 28px; } } .searchSection h3 { line-height: 20px; } @media screen and (min-width: 320px) { .searchSection h3 { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection h3 { line-height: 45px; } } .searchSection .filters { row-gap: 10px; margin-bottom: 40px; } .searchSection .filterItem input { width: 100%; padding: 9px 15px; font-size: 14px; font-weight: bold; line-height: 27px; color: black; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .searchSection .filterItem input::placeholder { color: black; font-weight: bold; } .searchSection .filterItem .datepicker-container1, .searchSection .filterItem .datepicker-container2 { position: relative; } .searchSection .filterItem .datepicker-container1 .datepicker, .searchSection .filterItem .datepicker-container2 .datepicker { z-index: 9; width: 100%; } .searchSection .filterItem .datepicker-container1 .datepicker table, .searchSection .filterItem .datepicker-container2 .datepicker table { width: 100%; } .searchSection .filterItem .dk-select { width: 100%; } .searchSection .filterItem .dk-select .dk-selected { max-width: 100%; padding: 9px 15px; font-size: 14px; font-weight: bold; letter-spacing: 0; line-height: 27px; color: black; border-radius: 0; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .searchSection .filterItem .dk-select .dk-selected:before { content: none; } .searchSection .filterItem .dk-select .dk-selected:after { content: ""; background-image: url("../images/triangleDown.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 10px; right: unset; border: none; margin: 0; height: 11.25px; width: 18px; top: 50%; transform: translateY(-50%); } .searchSection .searchBtn { text-align: center; } .searchSection .searchBtn a { padding: 0 80px; height: 52px; border-radius: 30px; background: #39c0f3; color: white; transition: all 0.3s ease-in-out; } .searchSection .searchBtn a { font-size: 20px; } @media screen and (min-width: 320px) { .searchSection .searchBtn a { font-size: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchBtn a { font-size: 23px; } } .searchSection .searchBtn a { line-height: 30px; } @media screen and (min-width: 320px) { .searchSection .searchBtn a { line-height: calc(30px + 20 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchBtn a { line-height: 50px; } } .searchSection .searchBtn a:hover { color: white !important; opacity: 0.8; } .searchSection .searchResults { margin-top: 50px; } .searchSection .searchResults .listingHolder { row-gap: 50px; } .searchSection .searchResults .listingItemDIV .listingItem { padding-bottom: 50px; border-bottom: 3px solid black; } .searchSection .searchResults .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .searchSection .searchResults .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .searchSection .searchResults .listingItemDIV .listingImage { margin-bottom: 20px; } .searchSection .searchResults .listingItemDIV .listingDate { margin-bottom: 20px; } .searchSection .searchResults .listingItemDIV .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .searchSection .searchResults .listingItemDIV .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchResults .listingItemDIV .listingDate { font-size: 16px; } } .searchSection .searchResults .listingItemDIV .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .searchSection .searchResults .listingItemDIV .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchResults .listingItemDIV .listingDate { line-height: 24px; } } .searchSection .searchResults .listingItemDIV .listingDate .type { color: #39c0f3; } .searchSection .searchResults .listingItemDIV .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .searchSection .searchResults .listingItemDIV .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchResults .listingItemDIV .listingTitle { font-size: 22px; } } .searchSection .searchResults .listingItemDIV .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .searchSection .searchResults .listingItemDIV .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .searchSection .searchResults .listingItemDIV .listingTitle { line-height: 32px; } } .authorSection { padding: 100px 0; } .authorSection .authorDetails { display: flex; align-items: center; gap: 30px; margin-bottom: 100px; } .authorSection .authorDetails img { width: 150px; height: 150px; border-radius: 50%; border: 1px solid #39c0f3; } .authorSection h3 { display: inline-block; margin-bottom: 50px; padding-bottom: 20px; border-bottom: 2px solid #39c0f3; } .authorSection h3 { font-size: 28px; } @media screen and (min-width: 320px) { .authorSection h3 { font-size: calc(28px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection h3 { font-size: 36px; } } .authorSection h3 { line-height: 30px; } @media screen and (min-width: 320px) { .authorSection h3 { line-height: calc(30px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection h3 { line-height: 40px; } } .authorSection .listingHolder { row-gap: 50px; } .authorSection .listingItemDIV .listingItem { padding-bottom: 50px; border-bottom: 3px solid black; } .authorSection .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .authorSection .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .authorSection .listingItemDIV .listingImage { margin-bottom: 20px; } .authorSection .listingItemDIV .listingDate { margin-bottom: 20px; } .authorSection .listingItemDIV .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .authorSection .listingItemDIV .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection .listingItemDIV .listingDate { font-size: 16px; } } .authorSection .listingItemDIV .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .authorSection .listingItemDIV .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection .listingItemDIV .listingDate { line-height: 24px; } } .authorSection .listingItemDIV .listingDate .type { color: #39c0f3; } .authorSection .listingItemDIV .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .authorSection .listingItemDIV .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection .listingItemDIV .listingTitle { font-size: 22px; } } .authorSection .listingItemDIV .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .authorSection .listingItemDIV .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorSection .listingItemDIV .listingTitle { line-height: 32px; } } .tagList { margin: 80px 0; } .tagList h5 { color: #39c0f3; font-size: 16px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); padding-bottom: 5px; margin-bottom: 15px; } .tagList .tags { font-size: 18px; } .authorsSection { padding: 50px 0; } .authorsSection h3 { display: inline-block; margin-bottom: 50px; padding-bottom: 20px; border-bottom: 2px solid #39c0f3; } .authorsSection h3 { font-size: 28px; } @media screen and (min-width: 320px) { .authorsSection h3 { font-size: calc(28px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection h3 { font-size: 36px; } } .authorsSection h3 { line-height: 30px; } @media screen and (min-width: 320px) { .authorsSection h3 { line-height: calc(30px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection h3 { line-height: 40px; } } .authorsSection .listingHolder { row-gap: 30px; } .authorsSection .listingItem { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); } .authorsSection .listingImage { width: 200px; height: 200px; margin-inline: auto; margin-bottom: 20px; } .authorsSection .listingImage img { border-radius: 50%; border: 1px solid #39c0f3; } .authorsSection .listingTitle { margin-bottom: 20px; text-align: center; } .authorsSection .listingTitle { font-size: 22px; } @media screen and (min-width: 320px) { .authorsSection .listingTitle { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection .listingTitle { font-size: 28px; } } .authorsSection .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .authorsSection .listingTitle { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection .listingTitle { line-height: 45px; } } .authorsSection .listingDescription h5 { text-align: center; margin-bottom: 20px; } .authorsSection .listingDescription h5 { font-size: 18px; } @media screen and (min-width: 320px) { .authorsSection .listingDescription h5 { font-size: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection .listingDescription h5 { font-size: 20px; } } .authorsSection .listingDescription h5 { line-height: 20px; } @media screen and (min-width: 320px) { .authorsSection .listingDescription h5 { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .authorsSection .listingDescription h5 { line-height: 32px; } } .authorsSection .listingDescription ul li { font-weight: 500; padding-right: 30px; margin-bottom: 20px; position: relative; } .authorsSection .listingDescription ul li:last-of-type { margin-bottom: 0; } .authorsSection .listingDescription ul li:before { content: ""; background-image: url("../images/arrow.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 12px; width: 15px; top: 0; transform: translateY(50%); } .FAQSection { padding: 80px 0; } .FAQSection h3 { display: inline-block; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #39c0f3; } .FAQSection h3 { font-size: 30px; } @media screen and (min-width: 320px) { .FAQSection h3 { font-size: calc(30px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection h3 { font-size: 36px; } } .FAQSection h3 { line-height: 30px; } @media screen and (min-width: 320px) { .FAQSection h3 { line-height: calc(30px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection h3 { line-height: 40px; } } .FAQSection h5 { font-weight: 500; margin-bottom: 40px; } .FAQSection h5 { font-size: 22px; } @media screen and (min-width: 320px) { .FAQSection h5 { font-size: calc(22px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection h5 { font-size: 26px; } } .FAQSection h5 { line-height: 24px; } @media screen and (min-width: 320px) { .FAQSection h5 { line-height: calc(24px + 8 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection h5 { line-height: 32px; } } .FAQSection .accordion { padding-top: 30px; border-bottom: 1px solid #ddd; } .FAQSection .accordion:last-of-type { border: none; } .FAQSection .accordion .accordionHeader { color: black; position: relative; cursor: pointer; margin-bottom: 20px; } .FAQSection .accordion .accordionHeader { font-size: 18px; } @media screen and (min-width: 320px) { .FAQSection .accordion .accordionHeader { font-size: calc(18px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection .accordion .accordionHeader { font-size: 22px; } } .FAQSection .accordion .accordionHeader:after { content: ""; position: absolute; background-image: url(../images/ArrowDown.svg); background-repeat: no-repeat; background-position: center; background-size: contain; left: 0; top: 0; height: 40px; width: 40px; } .FAQSection .accordion .accordionHeader.active:after { transform: rotate(180deg); } .FAQSection .accordion .accordionText { display: none; color: black; font-weight: 500; margin-bottom: 30px; } .FAQSection .accordion .accordionText { font-size: 18px; } @media screen and (min-width: 320px) { .FAQSection .accordion .accordionText { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection .accordion .accordionText { font-size: 18px; } } .FAQSection .accordion .accordionText { line-height: 26px; } @media screen and (min-width: 320px) { .FAQSection .accordion .accordionText { line-height: calc(26px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .FAQSection .accordion .accordionText { line-height: 26px; } } .notFoundWrapper { padding: 75px 0 150px; text-align: center; } .notFoundWrapper h2 { color: black; } .notFoundWrapper h2 { font-size: 100px; } @media screen and (min-width: 320px) { .notFoundWrapper h2 { font-size: calc(100px + 100 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .notFoundWrapper h2 { font-size: 200px; } } .notFoundWrapper h3 { font-size: 24px; } @media screen and (min-width: 320px) { .notFoundWrapper h3 { font-size: calc(24px + 24 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .notFoundWrapper h3 { font-size: 48px; } } .notFoundWrapper .btnContainer { margin-top: 40px; } .notFoundWrapper .btnContainer a { display: inline-block; position: relative; color: #39c0f3; text-align: center; padding: 13px 0; padding-inline-start: 30px; padding-inline-end: 55px; font-weight: 400; line-height: normal; background: transparent; border: 1px solid #39c0f3; border-radius: 200px; transition: all 0.3s ease-in-out; } .notFoundWrapper .btnContainer a { font-size: 14px; } @media screen and (min-width: 320px) { .notFoundWrapper .btnContainer a { font-size: calc(14px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .notFoundWrapper .btnContainer a { font-size: 16px; } } .notFoundWrapper .btnContainer a:hover { background-color: #39c0f3; border: 1px solid #39c0f3; color: white !important; } .notFoundWrapper .btnContainer a:hover:after { filter: brightness(0) invert(1); } .notFoundWrapper .btnContainer a:after { content: ""; display: block; position: absolute; background-image: url(../images/Arrow.svg); background-repeat: no-repeat; background-size: contain; height: 15px; width: 18px; top: 51%; left: 25px; transform: translateY(-50%); transition: all 0.3s ease-in-out; } .updateMemberSection { padding: 50px 0; display: flex; } .updateMemberSection .row { row-gap: 30px; } .updateMemberSection .sideMenu .secondLevelToggle { display: none; } .updateMemberSection .sideMenu .link a { display: inline-block; font-weight: 400; padding: 25px 30px; background: white; border: 1px solid rgba(121, 121, 111, 0.3764705882); width: 100%; } .updateMemberSection .sideMenu .link a { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .sideMenu .link a { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .sideMenu .link a { font-size: 18px; } } .updateMemberSection .sideMenu .link.active a { font-weight: bold; background: rgba(121, 121, 111, 0.3764705882); position: relative; border: 1px solid transparent; } .updateMemberSection .sideMenu .link.active a:before { content: ""; display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgba(121, 121, 111, 0.3764705882); position: absolute; top: 50%; left: -11px; transform: translateY(-50%); } .updateMemberSection .option { padding: 35px; background: white; } .updateMemberSection .option .title { margin-bottom: 20px; } .updateMemberSection .option .title { font-size: 20px; } @media screen and (min-width: 320px) { .updateMemberSection .option .title { font-size: calc(20px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .option .title { font-size: 24px; } } .updateMemberSection .option .tableContent { padding: 20px; border: 1px solid rgba(121, 121, 111, 0.3764705882); } .updateMemberSection .option .tableContent .inputContainer { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(121, 121, 111, 0.3764705882); display: flex; } .updateMemberSection .option .tableContent label { display: inline-block; width: 200px; } .updateMemberSection .option .tableContent label { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .option .tableContent label { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .option .tableContent label { font-size: 18px; } } .updateMemberSection .option .tableContent input { flex: 1; } .updateMemberSection .option .tableContent input { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .option .tableContent input { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .option .tableContent input { font-size: 18px; } } .updateMemberSection .option .tableContent .btnContainer { margin: 30px 0; } .updateMemberSection .option .tableContent .btnContainer input, .updateMemberSection .option .tableContent .btnContainer a { display: inline-block; position: relative; color: white; text-align: center; padding: 10px; min-width: 170px; line-height: 45px; font-weight: bold; line-height: normal; background: #c0984e; border-radius: 200px; transition: all 0.3s ease-in-out; } .updateMemberSection .option .tableContent .btnContainer input, .updateMemberSection .option .tableContent .btnContainer a { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .option .tableContent .btnContainer input, .updateMemberSection .option .tableContent .btnContainer a { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .option .tableContent .btnContainer input, .updateMemberSection .option .tableContent .btnContainer a { font-size: 18px; } } .updateMemberSection .option .tableContent .btnContainer input:hover, .updateMemberSection .option .tableContent .btnContainer a:hover { background-color: #39c0f3; color: white !important; } .updateMemberSection .option .tableContent .btnContainer.linkBtn { margin: 0; } .updateMemberSection .listing h3 { display: inline-block; padding-bottom: 10px; margin-bottom: 40px; border-bottom: 3px solid #39c0f3; } .updateMemberSection .listing h3 { font-size: 22px; } @media screen and (min-width: 320px) { .updateMemberSection .listing h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing h3 { font-size: 28px; } } .updateMemberSection .listing h3 { line-height: 20px; } @media screen and (min-width: 320px) { .updateMemberSection .listing h3 { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing h3 { line-height: 45px; } } .updateMemberSection .listing .listingItemDIV .listingItem { padding-bottom: 50px; border-bottom: 3px solid black; } .updateMemberSection .listing .listingItemDIV .listingItem.premium .type { padding-right: 25px; color: #c0984e; position: relative; } .updateMemberSection .listing .listingItemDIV .listingItem.premium .type:before { content: ""; background-image: url("../images/goldLock.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; height: 21px; width: 16px; top: 50%; transform: translateY(-50%); } .updateMemberSection .listing .listingItemDIV .listingImage { margin-bottom: 20px; } .updateMemberSection .listing .listingItemDIV .listingDate { margin-bottom: 20px; } .updateMemberSection .listing .listingItemDIV .listingDate { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .listing .listingItemDIV .listingDate { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing .listingItemDIV .listingDate { font-size: 16px; } } .updateMemberSection .listing .listingItemDIV .listingDate { line-height: 24px; } @media screen and (min-width: 320px) { .updateMemberSection .listing .listingItemDIV .listingDate { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing .listingItemDIV .listingDate { line-height: 24px; } } .updateMemberSection .listing .listingItemDIV .listingDate .type { color: #39c0f3; } .updateMemberSection .listing .listingItemDIV .listingTitle { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .listing .listingItemDIV .listingTitle { font-size: calc(16px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing .listingItemDIV .listingTitle { font-size: 22px; } } .updateMemberSection .listing .listingItemDIV .listingTitle { line-height: 20px; } @media screen and (min-width: 320px) { .updateMemberSection .listing .listingItemDIV .listingTitle { line-height: calc(20px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing .listingItemDIV .listingTitle { line-height: 32px; } } .updateMemberSection .listing .linkBtn { margin-top: 50px; } .updateMemberSection .listing .linkBtn a { display: inline-block; position: relative; color: white; text-align: center; padding: 10px; min-width: 170px; line-height: 45px; font-weight: bold; line-height: normal; background: #c0984e; border-radius: 200px; transition: all 0.3s ease-in-out; } .updateMemberSection .listing .linkBtn a { font-size: 16px; } @media screen and (min-width: 320px) { .updateMemberSection .listing .linkBtn a { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .listing .linkBtn a { font-size: 18px; } } .updateMemberSection .listing .linkBtn a:hover { background-color: #39c0f3; color: white !important; } .inner-page { padding: 50px 0; } .inner-page h2 { font-weight: 900; margin-bottom: 30px; } .inner-page h2 { font-size: 26px; } @media screen and (min-width: 320px) { .inner-page h2 { font-size: calc(26px + 4 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .inner-page h2 { font-size: 30px; } } .inner-page h2 { line-height: 16px; } @media screen and (min-width: 320px) { .inner-page h2 { line-height: calc(16px + 10 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .inner-page h2 { line-height: 26px; } } .inner-page p { margin-bottom: 30px; } .inner-page p { font-size: 16px; } @media screen and (min-width: 320px) { .inner-page p { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .inner-page p { font-size: 18px; } } .inner-page .btn { display: inline-block; position: relative; color: white; text-align: center; padding: 10px; min-width: 170px; line-height: 45px; font-weight: bold; line-height: normal; background: #c0984e; border-radius: 200px; transition: all 0.3s ease-in-out; } .inner-page .btn { font-size: 16px; } @media screen and (min-width: 320px) { .inner-page .btn { font-size: calc(16px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .inner-page .btn { font-size: 18px; } } .inner-page .btn:hover { background-color: #39c0f3; color: white !important; } .updateMemberSection .title { margin-bottom: 20px; } .updateMemberSection .title { font-size: 22px; } @media screen and (min-width: 320px) { .updateMemberSection .title { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .title { font-size: 28px; } } .updateMemberSection .title { line-height: 20px; } @media screen and (min-width: 320px) { .updateMemberSection .title { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { .updateMemberSection .title { line-height: 45px; } } .forgetPassword .btnContainer button { border: none !important; } .forgetPassword .inputEntity { margin-bottom: 20px; } .forgetPassword .inputEntity label { margin-bottom: 10px; display: block; } .forgetPassword .inputEntity:last-of-type { margin-bottom: 0; } .forgetPassword .inputEntity input { width: 100%; max-width: 500px; padding: 10px 20px; } .errorMessage .errorMainText { color: red; font-size: 16px; } .errorMessage .btnContainer { margin: 0; } .successMessage .messageMainText { font-size: 16px; color: green; } .successMessage .btnContainer { margin: 0; } .text-danger { color: red; font-size: 12px; } footer { background: rgba(0, 192, 243, 0.27); padding: 50px 0; } footer .topFooter { display: flex; margin-bottom: 50px; } footer .topFooter .logoContainer { max-width: 310px; margin-bottom: 75px; } footer .topFooter .social h3 { margin-bottom: 10px; } footer .topFooter .social h3 { font-size: 22px; } @media screen and (min-width: 320px) { footer .topFooter .social h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .topFooter .social h3 { font-size: 28px; } } footer .topFooter .social h3 { line-height: 20px; } @media screen and (min-width: 320px) { footer .topFooter .social h3 { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .topFooter .social h3 { line-height: 45px; } } footer .topFooter .social li { margin-bottom: 15px; } footer .topFooter .social li a { display: flex; gap: 10px; } footer .topFooter .social li a { font-size: 12px; } @media screen and (min-width: 320px) { footer .topFooter .social li a { font-size: calc(12px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .topFooter .social li a { font-size: 14px; } } footer .topFooter .social li a { line-height: 18px; } @media screen and (min-width: 320px) { footer .topFooter .social li a { line-height: calc(18px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .topFooter .social li a { line-height: 20px; } } footer .topFooter .social li img { width: auto; } footer .topFooter .social li:last-of-type { margin-bottom: 0; } footer .topFooter .menusMain { margin-right: 90px; } footer .topFooter .menusMain .row { width: 100%; } footer .topFooter .menusMain ul { display: flex; flex-wrap: wrap; gap: 40px; } footer .topFooter .menusMain ul li a { color: black; display: inline-block; height: 26px; } footer .topFooter .menusMain ul li a:hover { color: #39c0f3; } footer .topFooter .menusMain .ddSecondLevel ul { flex-direction: column; margin-top: 5px; gap: 5px; } footer .topFooter .menusMain .ddSecondLevel ul li { height: unset; font-weight: normal; } footer .bottomFooter { display: flex; justify-content: space-between; align-items: end; } footer .bottomFooter .newsLetter h3 { font-size: 22px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter h3 { font-size: calc(22px + 6 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter h3 { font-size: 28px; } } footer .bottomFooter .newsLetter h3 { line-height: 20px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter h3 { line-height: calc(20px + 25 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter h3 { line-height: 45px; } } footer .bottomFooter .newsLetter p { font-weight: 500; } footer .bottomFooter .newsLetter p { font-size: 16px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter p { font-size: calc(16px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter p { font-size: 16px; } } footer .bottomFooter .newsLetter p { line-height: 24px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter p { line-height: calc(24px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter p { line-height: 24px; } } footer .bottomFooter .newsLetter .newsletterInputWrapper { margin-top: 20px; position: relative; display: flex; flex-direction: column; width: 450px; } footer .bottomFooter .newsLetter .newsletterInputWrapper input { border-radius: 30px; background-color: white; height: 48px; padding: 0 30px; } footer .bottomFooter .newsLetter .newsletterInputWrapper input { font-size: 18px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter .newsletterInputWrapper input { font-size: calc(18px + 0 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter .newsletterInputWrapper input { font-size: 18px; } } footer .bottomFooter .newsLetter .newsletterInputWrapper input::placeholder { color: #cacaca; } footer .bottomFooter .newsLetter .newsletterInputWrapper a { line-height: 26px; position: absolute; top: 50%; padding: 11px 40px; border-radius: 30px 0 0 30px; transform: translateY(-50%); left: 0; color: white; background-color: #39c0f3; font-weight: 500; transform: translateY(-50%); transition: all 0.3s ease-in-out; } footer .bottomFooter .newsLetter .newsletterInputWrapper a { font-size: 14px; } @media screen and (min-width: 320px) { footer .bottomFooter .newsLetter .newsletterInputWrapper a { font-size: calc(14px + 12 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .newsLetter .newsletterInputWrapper a { font-size: 26px; } } footer .bottomFooter .newsLetter .newsletterInputWrapper a:hover { color: white !important; opacity: 0.8; } footer .bottomFooter .dev, footer .bottomFooter .copyright { font-size: 12px; } @media screen and (min-width: 320px) { footer .bottomFooter .dev, footer .bottomFooter .copyright { font-size: calc(12px + 2 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .dev, footer .bottomFooter .copyright { font-size: 14px; } } footer .bottomFooter .dev, footer .bottomFooter .copyright { line-height: 20px; } @media screen and (min-width: 320px) { footer .bottomFooter .dev, footer .bottomFooter .copyright { line-height: calc(20px + 3 * (100vw - 320px) / 1601); } } @media screen and (min-width: 1921px) { footer .bottomFooter .dev, footer .bottomFooter .copyright { line-height: 23px; } } .loader { position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .loader:before { content: ""; border: 10px solid #f3f3f3; border-top: 10px solid #39c0f3; border-radius: 50%; width: 50px; height: 50px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .error-text { display: inline-block; color: Red; position: absolute; bottom: 100%; right: 0; } /*# sourceMappingURL=annahar-ar-sub.css.map */