/******************************************************************************************************** PIXEL TO REM CONVERSION TABLE - Root Size: 16px --------------------------------------------------------------------------------------------------------- PX REM / EM | PX REM / EM | PX REM / EM | PX REM / EM | PX REM | PX REM / EM --------------------------------------------------------------------------------------------------------- 10 = 0.625 | 20 = 1.25 | 30 = 1.875 | 40 = 2.5 | 50 = 3.125 | 60 = 3.75 11 = 0.6875 | 21 = 1.3125 | 31 = 1.9375 | 41 = 2.5625 | 51 = 3.1875 | 61 = 3.8125 12 = 0.75 | 22 = 1.375 | 32 = 2 | 42 = 2.625 | 52 = 3.25 | 62 = 3.875 13 = 0.8125 | 23 = 1.4375 | 33 = 2.0625 | 43 = 2.6875 | 53 = 3.3125 | 63 = 3.9375 14 = 0.875 | 24 = 1.5 | 34 = 2.125 | 44 = 2.75 | 54 = 3.375 | 64 = 4 15 = 0.9375 | 25 = 1.5625 | 35 = 2.1875 | 45 = 2.8125 | 55 = 3.4375 16 = 1 | 26 = 1.625 | 36 = 2.25 | 46 = 2.875 | 56 = 3.5 17 = 1.0625 | 27 = 1.6875 | 37 = 2.3125 | 47 = 2.9375 | 57 = 3.5625 18 = 1.125 | 28 = 1.75 | 38 = 2.375 | 48 = 3 | 58 = 3.625 19 = 1.1875 | 29 = 1.8125 | 39 = 2.4375 | 49 = 3.0625 | 59 = 3.6875 --------------------------------------------------------------------------------------------------------- *********************************************************************************************************/ /** ----------------- SPACES RELATED --------------------- */ footer { padding: 2.25rem 0 1.86rem; } .footer__information__navigations, .footer__information ul { margin-top: 1.45rem !important; } .footer__information__navigations__navigation, .footer__information ul li a { margin-right: 1rem; } .footer__information__paragraph { margin-top: 1rem; } .footer__socmed, .footer__newsletter { margin-top: 0.3rem; } .footer__socmed__tagline, .footer__newsletter__tagline { margin-top: 1.1rem; } .footer-socmed__img { margin: 0.4rem 0.4rem 0.4rem 0; } footer .menu-social-media-container { margin-top: 1.5rem !important; } .menu-social-media-container li a i, .footer-socmed__icons__icon { margin-right: 0.8rem; } .menu-social-media-container li a i { margin-left: 0px; } .footer__newsletter__input { padding-left: 1rem; } .footer__copyright { margin-top: 1rem; margin-bottom: 0px; } /** ----------------- FONTS RELATED ---------------------- */ .footer__information__navigations__navigation, .footer__information ul li a { font-size: 0.78rem; } .footer__information__paragraph { font-size: 0.78rem !important; } .footer__socmed__tagline, .footer__newsletter__tagline { font-size: 1rem !important; } .menu-social-media-container li a i, .footer-socmed__icons__icon { font-size: 1.8rem; } .footer__newsletter__button { font-size: 0.9rem; } .footer__copyright { font-size: 0.73rem !important; } /** ----------------- FONT WEIGHT RELATED ---------------------- */ .footer__information__navigations__navigation, .footer__information ul li a, .footer__information__paragraph__focus, .footer__socmed__tagline, .footer__newsletter__tagline { font-weight: 600; } /** ----------------- FONT WEIGHT RELATED ---------------------- */ /** ----------------- COLOR RELATED ---------------------- */ .footer__information__navigations a, .footer__information__navigations a:hover, .footer__information ul li a, .footer__information ul li a:hover, .footer__socmed__tagline, .footer__newsletter__tagline { color: var(--defaultYellow); } .footer-socmed__icons__icon { color: var(--defaultWhite); } /** ----------------- COLOR RELATED ---------------------- */ /* Footer */ footer { background: linear-gradient(to right, var(--defaultBrown), hsl(0, 4%, 10%)); } .footer__logo, .footer__logo img { display: inline-block; } .footer__logo img { max-width: 75%; height: auto; } .footer__information-wrapper .footer__information { padding-right: 8%; } .footer__information ul, .footer__information li { margin: 0px; padding: 0px; display: inline-block; text-decoration: none; list-style: none; } .footer__information__navigations a, .footer__information__navigations a:hover, .footer__information ul li a, .footer__information ul li a:hover { text-transform: uppercase; } .footer__information__navigations a:hover, .footer__information ul li a:hover { text-decoration: underline; } .footer__socmed__tagline, .footer__newsletter__tagline { position: relative; } .footer-socmed__picture-wrap .widget_block > p { display: none; } .footer-socmed__picture-wrap > .widget_block:first-child { margin-left: -10px; margin-top: -5px; margin-right: 1rem; } @media screen and (max-width: 767px) { .footer-socmed__picture-wrap > .widget_block:first-child{ margin-right: 0px; } } /** SOCIAL MEDIA LISTS **/ .menu-social-media-container ul, .menu-social-media-container ul li { margin: 0px; padding: 0px; list-style: none; } .menu-social-media-container ul { display: flex; flex-direction: row; } .menu-social-media-container li:first-child i { margin-left: 0px; } .footer__newsletter__input-wrap { background-color: white; border-radius: 35px; height: 44px; overflow: hidden; } .footer__newsletter__input-wrap .es-field-wrap, .footer__newsletter__input-wrap form label { margin: 0px; } .footer__newsletter__input-wrap form { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .footer__newsletter__input-wrap form > label { /* display: none; */ } .footer__newsletter__input-wrap .emaillist, .footer__newsletter__input-wrap form { height: 100%; } .footer__newsletter__input-wrap form .es-field-wrap, .footer__newsletter__input { width: 70%; height: 100%; outline: none; border: none; } .footer__newsletter__input-wrap form .es-field-wrap label, .footer__newsletter__input-wrap form .es-field-wrap input { display: inline-block; width: 100%; height: 100%; } .footer__newsletter__input-wrap form .es-field-wrap input{ padding-left: 1em; border: none; } .footer__newsletter__input-wrap form input[type="submit"], .footer__newsletter__button { width: 30%; border: none; height: 100%; font-size: 0.9rem; background-color: var(--defaultYellow); } /* Akhir Footer */ @media screen and (max-width: 1200px) { } @media screen and (max-width: 992px) { /* FOOTER */ .footer__logo { max-width: 43%; } .footer__logo img { max-width: 78%; } .footer__information__navigations, .footer__information ul { margin-top: 0px !important; } footer .menu-social-media-container { margin-top: 0.5rem !important; } .footer__information-wrapper .footer__information { padding-right: 15px; } } @media screen and (max-width: 768px) { /* Footer */ .footer-socmed__img { margin: 0.4rem 0.4rem 0.4rem 0; } /* Akhir Footer */ } @media screen and (max-width: 576px) { .footer__logo { max-width: 78%; } } @media screen and (max-width: 480px){ footer #sb_instagram.sbi_col_3 #sbi_images .sbi_item { width: 33.3333333% !important; } }