/* ================ home-V1-banner ============ */ /* ====== left-col ======= */ .vote_for_best--wrapper { padding: 40px 0px 20px; } .vote_for_best--wrapper .election_year { max-width: 185px; width: 100%; background: #EAEAEA; text-align: center; } .election_year .election { font-family: var(--open-sans); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: #615E5E; padding: 5px 9px; display: block; } .election .year { color: var(--primary-color); } .vote_for_best--wrapper .vote_title br, .vote_for_best--wrapper p br { display: none; } .vote_for_best--wrapper .vote_title { font-family: var(--poppins); font-style: normal; font-weight: 500; font-size: 25px; line-height: 30px; text-transform: capitalize; color: var(--quaternary-color); padding: 18px 0px; margin-bottom: 0; } .vote_title .vote { color: var(--secondary-color); } @media (min-width: 768px) { .vote_for_best--wrapper .vote_title { font-size: 30px; line-height: 39px; } } @media ( min-width: 1200px ) { .vote_for_best--wrapper .vote_title { font-size: 40px; line-height: 44px; } } /* ====== mid-col ======= */ .candidate_img--wrapper { position: relative; } .candidate_img--wrapper .play_btn { position: absolute; right: 0rem; top: 5rem; width: 100px; z-index: 10; } .candidate_img--wrapper .candidate_image { z-index: 0; } @media ( min-width: 576px ) and ( max-width: 767px ) { .candidate_img--wrapper .play_btn { right: 5rem; top: 13rem; } } @media ( min-width: 768px ) and ( max-width: 991px ) { .candidate_img--wrapper .candidate_image { margin-top: 30px; } } @media (min-width: 1300px) { .candidate_img--wrapper .candidate_image { margin-left: 50px; } } @media (min-width: 1600px) { .candidate_img--wrapper .candidate_image { margin-left: 75px; } } @media (min-width: 1680px) { .candidate_img--wrapper .candidate_image { margin-left: 90px; } } @media (min-width: 1792px) { .candidate_img--wrapper .candidate_image { margin-left: 132px; } } @media (min-width: 1900px) { .candidate_img--wrapper .candidate_image { margin-left: 165px; } } /* ====== right-col ======= */ .candidate_names--wrapper { padding: 30px 0px; position: relative; } .candidate_names--wrapper .candidate_name { font-family: var(--poppins); font-style: normal; font-weight: 900; font-size: 50px; line-height: 72px; text-transform: capitalize; color: var(--primary-color); margin-bottom: 0; padding-bottom: 25px; } .candidate_names--wrapper .candidate_name br { display: none; } .candidate_img_thumbnail--wrapper { display: flex; } .candidate_img_thumbnail--wrapper .thumbnail-img { box-shadow: 0px 20px 30px rgba(15, 16, 17, 0.2); margin-right: 15px; border-radius: 8px; } @media ( min-width: 768px ) and ( max-width: 1199px ) { .candidate_img_thumbnail--wrapper .thumbnail-img { margin-right: 5px; width: 60px; } } @media (min-width: 768px) { .candidate_names--wrapper .candidate_name { font-size: 65px; } } @media ( min-width: 992px ) { .candidate_img--wrapper { position: relative; } .candidate_img--wrapper::before { content: ''; position: absolute; background: url('../../images/banner-bg-mid.png') no-repeat 0 0; background-size: cover; top: -9rem; left: 50%; transform: translateX(-50%); width: 255px; height: 33.2rem; z-index: -9; margin: 0 auto; } .search_row { margin-top: -5rem; } .candidate_names--wrapper .candidate_name { /* font-size: 80px; */ font-size: 72px; line-height: 80px; padding-bottom: 39px; } .candidate_names--wrapper .candidate_name br { display: block; } } @media ( min-width: 1024px ) { .candidate_img--wrapper::before { width: 275px; } .search_row { margin-top: 0rem; } } @media ( min-width: 1200px ) { .candidate_names--wrapper .candidate_name { font-size: 96px; line-height: 98px; padding-bottom: 59px; } .candidate_img--wrapper .play_btn { right: 4rem; top: 6rem; width: auto; } .candidate_img--wrapper::before { width: 300px; } .candidate_names--wrapper { margin-left: -40px; } } @media (min-width: 1300px) { .candidate_img--wrapper .play_btn { right: 6rem; } } @media (min-width: 1500px) { .candidate_img--wrapper .play_btn { right: 8rem; } } @media (min-width: 1600px) { .candidate_img--wrapper .play_btn { right: 9.5rem; } } @media (min-width: 1680px) { .candidate_img--wrapper .play_btn { right: 10.5rem; } } /* ========== from 992px ========= */ .round_balls--wrapper { background: #585F71; box-shadow: 0px 20px 35px rgba(99, 105, 120, 0.4); max-width: 100px; width: 100px; height: 100px; border-radius: 50%; position: relative; z-index: 1; } .round_balls--wrapper .inner_balls--wrapper { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .round_balls--wrapper .info_numbers { font-family: var(--montserrat); font-style: normal; font-weight: bold; font-size: 26px; line-height: 32px; text-align: center; text-transform: uppercase; color: var(--white); margin-bottom: 0; } .round_balls--wrapper .info_plans { font-family: var(--montserrat); font-style: normal; font-weight: 600; font-size: 10px; line-height: 12px; text-align: center; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 0; } @media ( max-width: 991px ) { .main_ball_first--wrapper, .main_ball_second--wrapper { display: none; } } @media ( min-width: 992px ) { .home_v1_banner--wrapper { position: relative; } .home_v1_banner--wrapper::before { content: ''; position: absolute; background: url('../../images/vector-bg.svg') no-repeat center; background-size: 100%; width: 100%; height: 100%; top: -14rem; left: 0rem; z-index: -10; } .home_v1_banner--wrapper::after { content: ''; position: absolute; background: url('../../images/round-circle.png') no-repeat center; background-size: 100%; top: -9rem; width: 100%; height: 100%; z-index: -10; margin: 0 auto; } .vote_for_best--wrapper, .candidate_img_thumbnail--wrapper { position: relative; } .vote_for_best--wrapper { padding-left: 35px; } .vote_for_best--wrapper::before { content: ''; position: absolute; background: url('../../images/dotted-map.png')no-repeat 0 0; background-size: 100%; max-width: 685px; width: 485px; height: 406px; z-index: -9; left: 0rem; top: 0rem; } .candidate_img_thumbnail--wrapper::before { content: ''; position: absolute; background: url('../../images/dotted-map.png')no-repeat 0 0; background-size: 100%; max-width: 685px; width: 300px; height: 406px; z-index: -9; left: 0rem; top: 0rem; } .main_ball_first--wrapper { position: relative; top: 10rem; } .main_ball_second--wrapper { position: absolute; bottom: -17rem; right: 0rem; } } @media ( min-width: 1199px ) { .candidate_img_thumbnail--wrapper::before { width: 385px; } .vote_for_best--wrapper { padding-left: 45px; margin-right: -22px; } } @media ( min-width: 1280px ) { .vote_for_best--wrapper { padding-left: 70px; margin-right: -40px; } } @media (min-width: 1300px) { .home_v1_banner--wrapper::before { top: -16rem; } .vote_for_best--wrapper { padding-left: 50px; margin-right: 0; } } @media (min-width: 1500px) { .vote_for_best--wrapper { padding-right: 45px; } } @media (min-width: 1600px) { .vote_for_best--wrapper { padding-left: 80px; padding-right: 30px; } } @media ( min-width: 1780px ) { .candidate_img--wrapper::before { top: -10rem; left: 50%; transform: translate(-50%); } .candidate_image { position: relative; left: 16px; top: 25px; } .candidate_img--wrapper .play_btn { /* right: 4rem; */ right: 12rem; top: 9rem; } .vote_for_best--wrapper { padding-top: 115px; /* margin-left: 15rem; */ margin-left: 10rem; padding-left: 0; padding-right: 0; } .candidate_names--wrapper .candidate_name { padding-top: 71px; } .vote_for_best--wrapper::before { width: 685px; height: 100%; left: -10.5rem; } .candidate_img_thumbnail--wrapper::before { width: 590px; right: 0; left: auto; } .main_ball_first--wrapper { top: 3rem; left: 7rem; } .main_ball_second--wrapper { bottom: -22rem; right: 15rem; } } @media (min-width: 1900px) { .candidate_img--wrapper .play_btn { right: 14.5rem; } .vote_for_best--wrapper { margin-left: 14rem; margin-right: -32px; } } /* ================ home-V1-banner-ends ============ */