body .btn { text-transform: uppercase; font-weight: 600; font-family: 'Poppins', Arial, sans-serif; color: #ffffff } body .btn .material-icons { font-size: 28px; display: inline-block; vertical-align: middle; width: auto; margin: 0 } body .btn-success { background-color: #b5ce2f; background: -webkit-gradient(linear, left top, left bottom, from(#b5ce2f), to(#a3b92a)); background: -webkit-linear-gradient(top, #b5ce2f, #a3b92a); background: -moz-linear-gradient(top, #b5ce2f, #a3b92a); background: -ms-linear-gradient(top, #b5ce2f, #a3b92a); background: -o-linear-gradient(top, #b5ce2f, #a3b92a); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none } body .btn-success:hover { background-color: #bcd344; background: -webkit-gradient(linear, left top, left bottom, from(#bcd344), to(#b5ce2f)); background: -webkit-linear-gradient(top, #bcd344, #b5ce2f); background: -moz-linear-gradient(top, #bcd344, #b5ce2f); background: -ms-linear-gradient(top, #bcd344, #b5ce2f); background: -o-linear-gradient(top, #bcd344, #b5ce2f); border-color: transparent; color: #ffffff } body .btn-success:not(:disabled):not(.disabled):active { background-color: #b5ce2f; background-color: #a3b92a; background: -webkit-gradient(linear, left top, left bottom, from(#a3b92a), to(#b5ce2f)); background: -webkit-linear-gradient(top, #a3b92a, #b5ce2f); background: -moz-linear-gradient(top, #a3b92a, #b5ce2f); background: -ms-linear-gradient(top, #a3b92a, #b5ce2f); background: -o-linear-gradient(top, #a3b92a, #b5ce2f) } body .btn-success:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-success:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-primary { background-color: #48c0e1; background: -webkit-gradient(linear, left top, left bottom, from(#48c0e1), to(#41adcb)); background: -webkit-linear-gradient(top, #48c0e1, #41adcb); background: -moz-linear-gradient(top, #48c0e1, #41adcb); background: -ms-linear-gradient(top, #48c0e1, #41adcb); background: -o-linear-gradient(top, #48c0e1, #41adcb); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none } body .btn-primary:hover { background-color: #5ac6e4; background: -webkit-gradient(linear, left top, left bottom, from(#5ac6e4), to(#48c0e1)); background: -webkit-linear-gradient(top, #5ac6e4, #48c0e1); background: -moz-linear-gradient(top, #5ac6e4, #48c0e1); background: -ms-linear-gradient(top, #5ac6e4, #48c0e1); background: -o-linear-gradient(top, #5ac6e4, #48c0e1); border-color: transparent; color: #ffffff } body .btn-primary:not(:disabled):not(.disabled):active { background-color: #48c0e1; background-color: #41adcb; background: -webkit-gradient(linear, left top, left bottom, from(#41adcb), to(#48c0e1)); background: -webkit-linear-gradient(top, #41adcb, #48c0e1); background: -moz-linear-gradient(top, #41adcb, #48c0e1); background: -ms-linear-gradient(top, #41adcb, #48c0e1); background: -o-linear-gradient(top, #41adcb, #48c0e1) } body .btn-primary:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-primary:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-info { background-color: #e70581; background: -webkit-gradient(linear, left top, left bottom, from(#e70581), to(#d00574)); background: -webkit-linear-gradient(top, #e70581, #d00574); background: -moz-linear-gradient(top, #e70581, #d00574); background: -ms-linear-gradient(top, #e70581, #d00574); background: -o-linear-gradient(top, #e70581, #d00574); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none } body .btn-info:hover { background-color: #e91e8e; background: -webkit-gradient(linear, left top, left bottom, from(#e91e8e), to(#e70581)); background: -webkit-linear-gradient(top, #e91e8e, #e70581); background: -moz-linear-gradient(top, #e91e8e, #e70581); background: -ms-linear-gradient(top, #e91e8e, #e70581); background: -o-linear-gradient(top, #e91e8e, #e70581); border-color: transparent; color: #ffffff } body .btn-info:not(:disabled):not(.disabled):active { background-color: #e70581; background-color: #d00574; background: -webkit-gradient(linear, left top, left bottom, from(#d00574), to(#e70581)); background: -webkit-linear-gradient(top, #d00574, #e70581); background: -moz-linear-gradient(top, #d00574, #e70581); background: -ms-linear-gradient(top, #d00574, #e70581); background: -o-linear-gradient(top, #d00574, #e70581) } body .btn-info:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-info:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-warning { background-color: #f9c606; background: -webkit-gradient(linear, left top, left bottom, from(#f9c606), to(#e0b205)); background: -webkit-linear-gradient(top, #f9c606, #e0b205); background: -moz-linear-gradient(top, #f9c606, #e0b205); background: -ms-linear-gradient(top, #f9c606, #e0b205); background: -o-linear-gradient(top, #f9c606, #e0b205); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none } body .btn-warning:hover { background-color: #facc1f; background: -webkit-gradient(linear, left top, left bottom, from(#facc1f), to(#f9c606)); background: -webkit-linear-gradient(top, #facc1f, #f9c606); background: -moz-linear-gradient(top, #facc1f, #f9c606); background: -ms-linear-gradient(top, #facc1f, #f9c606); background: -o-linear-gradient(top, #facc1f, #f9c606); border-color: transparent; color: #ffffff } body .btn-warning:not(:disabled):not(.disabled):active { background-color: #f9c606; background-color: #e0b205; background: -webkit-gradient(linear, left top, left bottom, from(#e0b205), to(#f9c606)); background: -webkit-linear-gradient(top, #e0b205, #f9c606); background: -moz-linear-gradient(top, #e0b205, #f9c606); background: -ms-linear-gradient(top, #e0b205, #f9c606); background: -o-linear-gradient(top, #e0b205, #f9c606) } body .btn-warning:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-warning:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-danger { background-color: #f04c3e; background: -webkit-gradient(linear, left top, left bottom, from(#f04c3e), to(#d84438)); background: -webkit-linear-gradient(top, #f04c3e, #d84438); background: -moz-linear-gradient(top, #f04c3e, #d84438); background: -ms-linear-gradient(top, #f04c3e, #d84438); background: -o-linear-gradient(top, #f04c3e, #d84438); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border: none } body .btn-danger:hover { background-color: #f25e51; background: -webkit-gradient(linear, left top, left bottom, from(#f25e51), to(#f04c3e)); background: -webkit-linear-gradient(top, #f25e51, #f04c3e); background: -moz-linear-gradient(top, #f25e51, #f04c3e); background: -ms-linear-gradient(top, #f25e51, #f04c3e); background: -o-linear-gradient(top, #f25e51, #f04c3e); border-color: transparent; color: #ffffff } body .btn-danger:not(:disabled):not(.disabled):active { background-color: #f04c3e; background-color: #d84438; background: -webkit-gradient(linear, left top, left bottom, from(#d84438), to(#f04c3e)); background: -webkit-linear-gradient(top, #d84438, #f04c3e); background: -moz-linear-gradient(top, #d84438, #f04c3e); background: -ms-linear-gradient(top, #d84438, #f04c3e); background: -o-linear-gradient(top, #d84438, #f04c3e) } body .btn-danger:not(:disabled):not(.disabled):active:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } body .btn-danger:focus { -webkit-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; -moz-box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset; box-shadow: 0 2px 4px 1px rgba(54, 64, 74, 0.4) inset } html body .wa-accordion .card { text-align: left; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border: none; margin-bottom: 5px } html body .wa-accordion .card .card-header:first-child { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box } html body .wa-accordion .card .card-header { border-bottom: none; cursor: pointer; position: relative; padding-top: 15px; padding-bottom: 15px; padding-right: 42px } html body .wa-accordion .card .card-header h4, html body .wa-accordion .card .card-header h5, html body .wa-accordion .card .card-header h6 { text-transform: none } html body .wa-accordion .card .card-header .chevronBaseStyle { position: absolute; right: 0; top: 50%; margin-right: 10px; margin-top: -15px; font-size: 24px } html body .wa-accordion .card .card-header[aria-expanded='false']:after { font-family: 'Material Icons'; content: "keyboard_arrow_down"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; position: absolute; right: 0; top: 50%; margin-right: 10px; margin-top: -15px; font-size: 24px } html body .wa-accordion .card .card-header[aria-expanded='true']:after { font-family: 'Material Icons'; content: "keyboard_arrow_up"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; position: absolute; right: 0; top: 50%; margin-right: 10px; margin-top: -15px; font-size: 24px } html body .wa-accordion .card .card-header button { position: relative } html body .wa-accordion .card .card-header button::after { position: absolute; font-family: 'Material Icons'; text-transform: none; right: 1rem } html body .wa-accordion .card .card-header button[aria-expanded='false']::after { content: "keyboard_arrow_down" } html body .wa-accordion .card .card-header button[aria-expanded='true']::after { content: "keyboard_arrow_up" } html body form .form-group .form-control { width: 100%; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ececec; font-size: 16px } html body form .form-group .error { color: #f04c3e } html body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, html body .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: #48c0e1 } .alert-success { background-color: #b5ce2f; color: #ffffff; border: 0 } .alert-danger { background-color: #f04c3e; color: #ffffff; border: 0 } .tooltip-more:after { font-family: 'Material Icons'; content: "info"; font-weight: normal; font-style: normal; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-size: 21px; vertical-align: middle; color: #48c0e1; margin-left: 5px; display: inline-block; height: 25px } .popover .popover-header { background-color: #48c0e1; color: #ffffff; text-transform: none; font-family: 'Poppins', Arial, sans-serif } .popover .popover-body { padding: 9px 14px; font-family: 'Muli', Calibri, sans-serif } body .slick-slide img, body .slick-slide picture{ max-width: 100% } body .slick-slide picture{ display: block; margin: auto; } body .product-slide .slick-next, body .product-slide .slick-prev { font-size: 0; line-height: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px; cursor: pointer; color: transparent; background: 0 0; border: none; outline: 0; position: absolute } body .product-slide .slick-next:before, body .product-slide .slick-prev:before { font-size: 50px } body .product-slide .slick-prev { left: -50px } body .product-slide .slick-prev:before { font-family: 'Material Icons'; content: "play_circle_filled"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); color: #48c0e1; position: relative; margin-left: -12px; margin-top: -3px } body .product-slide .slick-next { right: -50px } body .product-slide .slick-next:before { font-family: 'Material Icons'; content: "play_circle_filled"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; color: #48c0e1; position: relative; margin-left: -12px; margin-top: -3px } body .slick-disabled { cursor: default !important } body .slick-disabled:before { color: #afafaf !important } body .product-slide .slick-list { padding: 0 !important; margin: 0 15px } body .product-slide .slick-list .slick-track { padding: 30px 0 20px 0 } body .product-slide .slick-center .product-price { background-color: #48c0e1 } body .product-slide .slick-center .product-price .price { font-size: 42px; color: #ffffff } body .product-slide .slick-center .product-price .price-cycle { color: #ffffff } html body .product { -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff; text-align: center } html body .product .product-header { background-color: #ffffff; padding-top: 37px; padding-bottom: 69px } html body .product .product-header h4 { font-size: 36px; text-transform: uppercase; font-weight: 600; min-height: 60px; display: block; margin-bottom: 0 } html body .product .product-description { background-color: #f3f3f3; padding: 25px } html body .product .product-description .form-group { margin-bottom: 10px } html body .product.featured .product-price { background-color: #48c0e1 } html body .product .product-price { background-color: #343a40; color: #ffffff; padding: 25px } html body .product .product-price .price { font-size: 42px } html body .product .product-price .price-cycle { font-size: 14px } html body .product .product-price .btn { margin-top: 5px } html body .product .product-specs { padding: 24px; text-align: left } html body .product .product-specs ul { list-style-type: none; margin: 0; padding: 0 } html body .product .product-specs ul li { padding: 6px 0; font-size: .875rem } html body .product .product-specs ul li.yes:before { font-family: 'Material Icons'; content: "check_circle"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; margin-right: 5px; font-size: 21px; height: 25px; color: #b5ce2f; vertical-align: middle } html body .product .product-specs ul li.no:before { font-family: 'Material Icons'; content: "remove_circle"; font-weight: normal; font-style: normal; display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; margin-right: 5px; font-size: 21px; height: 25px; color: #f04c3e; vertical-align: middle } .contact-section { color: #ffffff } .contact-section .contact-us-whatsapp svg { width: 28px; height: 28px; display: inline-block; vertical-align: middle; width: auto; margin: 0 } .contact-section .contact-us-whatsapp:hover .whatsapp-icon { fill: black } .contact-section .btn .material-icons { margin-right: 10px } .contact-section .ajax-loader { visibility: hidden; display: inline-block; background-image: url('/wa-front-res/images/ajax-loader.gif'); width: 16px; height: 16px; border: none; padding: 0; margin: 0 0 0 4px; vertical-align: middle } .contact-section #frm-contact .form-control { padding: 8px 10px } .parallax-overlay { position: absolute; top: 0; height: 100%; width: 100%; background-color: rgba(54, 64, 74, 0.7); background: -webkit-gradient(linear, left top, left bottom, from(rgba(54, 64, 74, 0.7)), to(rgba(54, 64, 74, 0.7))); background: -webkit-linear-gradient(top, rgba(54, 64, 74, 0.7), rgba(54, 64, 74, 0.7)); background: -moz-linear-gradient(top, rgba(54, 64, 74, 0.7), rgba(54, 64, 74, 0.7)); background: -ms-linear-gradient(top, rgba(54, 64, 74, 0.7), rgba(54, 64, 74, 0.7)); background: -o-linear-gradient(top, rgba(54, 64, 74, 0.7), rgba(54, 64, 74, 0.7)) } .jarallax { position: relative; z-index: auto !important } .jarallax > .jarallax-img { position: absolute; object-fit: cover; font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1 } .font-awesome-loader { display: block; position: fixed; padding: 0 30%; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(62, 197, 234, 0.8); z-index: 9999 } .font-awesome-loader .spinner { position: relative; top: 50%; transform: translateY(-50%); font-size: 26px; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); z-index: 9999; margin: 0 auto; text-align: center; width: auto } .font-awesome-loader .spinner i { font-size: 55px; padding: 15px } .font-awesome-loader .spinner span { display: block; line-height: 1.3em } .spin { -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear } .pulse { -webkit-animation: spin 1s infinite steps(8); animation: spin 1s infinite steps(8) } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes spin { 0% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } html body .wa-tabs .nav-tabs { background-color: #eee; border: solid 1px #dee2e6 } html body .wa-tabs .nav-tabs .nav-link { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0 40px; min-height: 54px; line-height: 54px } html body .wa-tabs .tab-content { background-color: #ffffff; padding: 50px; padding-top: 30px; border: solid 1px #dee2e6; border-top: none } .modal-fullscreen { max-width: 1140px } #alert-covid-19 h6.card-subtitle { line-height: 24px } #alert-covid-19 #btn-collapseCovid19Message[aria-expanded="true"] div:first-child { display: inline } #alert-covid-19 #btn-collapseCovid19Message[aria-expanded="true"] div:last-child { display: none } #alert-covid-19 #btn-collapseCovid19Message[aria-expanded="false"] div:first-child { display: none } #alert-covid-19 #btn-collapseCovid19Message[aria-expanded="false"] div:last-child { display: inline } #alert-covid-19 .whatsapp-icon { width: 24px; background-image: url(../images/social-icons/WhatsApp_Logo.png); height: 24px; display: block; background-size: contain; float: left } #alert-covid-19 a { color: #007bff } #alert-covid-19 a:hover { color: #0056b3 } #covid-19-footer .btn.btn-link:hover { color: #41adcb; text-decoration: none } .bg-dark { background-color: #343a40 !important; color: #ffffff } .bg-dark a { color: #ffffff } #pnp-page .bg-dark { background-color: #b9154a !important } #pnp-page .nav-link img { display: none } #standard-bank-page .bg-dark { background-color: #0089ff !important } .bg-darker { background-color: #2a363f; color: #ffffff } .bg-darker a { color: #ffffff } .bg-white { color: #343a40 } .bg-light-grey { background-color: #f3f3f3 } .bg-blue { background-color: #48c0e1; color: #ffffff } .bg-yellow { background-color: #f9c606; color: #ffffff } .bg-pink { background-color: #e70581; color: #ffffff } .txt-blue { color: #48c0e1 } .txt-green { color: #b5ce2f } .txt-yellow { color: #f9c606 } .txt-red { color: #f04c3e } .txt-pink { color: #e70581 } .dark-blue-highlight { background-color: #1A8EAE } .text-dark-blue { color: #1A8EAE } .jumbotron { border-radius: 0; margin-bottom: 0 } .footer hr { border-top-color: rgba(255, 255, 255, 0.1) } @media (min-width: 992px) { } .footer .copyright .list-inline { line-height: 1em } @media (min-width: 992px) { .footer .copyright .list-inline { margin-top: -4px } } .footer .pacifiers { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end } .footer .pacifiers ul { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; list-style: none; margin: 0; padding: 0 } .footer .pacifiers ul li { width: 100px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 10px } .footer .pacifiers ul li:nth-child(1) { background-image: url("/templates/WebAfrica/resources/images/security/payfast-logo-colour.png") } .footer .pacifiers ul li:nth-child(2) { background-image: url("/templates/WebAfrica/resources/images/security/Visa.png"); width: 50px } .footer .pacifiers ul li:nth-child(3) { background-image: url("/templates/WebAfrica/resources/images/security/Mastercard horizontal-01.png") } .footer .pacifiers ul li:last-child { margin-right: 0 } .footer .pacifiers ul li span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } #top-bar .badge, .footer .badge { line-height: 1rem; font-size: .5rem; padding: 0 .25rem } #top-bar .badge.badge-primary, .footer .badge.badge-primary { background-color: #e70581 } #top-bar a { font-size: .625rem !important } @media (min-width: 576px) { #top-bar a { font-size: .75rem !important } } @media (min-width: 992px) { #top-bar a { font-size: .875rem !important } } #top-bar .badge { left: -5px; top: -8px } .bg-animate { background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 4px; transition: background-size .2s } .bg-animate:hover { color: #fff !important; background-size: 4px 50px } @media (min-width: 768px) { #main-nav { padding: 7px 0 } #main-nav .btn-success { border-radius: 3px !important } .wrapper-icon-login{ height: 25px; width: 25px; } #main-nav .btn-success .material-icons { position: relative; top: 4px } #main-nav a { color: #343a40 !important } #main-nav #navbarSupportedContent { display: flex !important; flex-basis: 100%; flex-grow: 1; align-items: center } #main-nav .navbar-nav .nav-item { position: relative; text-transform: uppercase } #main-nav .navbar-nav .nav-item::after { content: ""; position: absolute; right: -1px; width: 1px; background-color: #ced4da; height: 50%; top: 50%; transform: translateY(-50%) } #main-nav .navbar-nav .nav-item:last-child::after { display: none } } @media (min-width: 768px) and (min-width: 992px) { #main-nav #navbarSupportedContent { flex-basis: auto } } .chat-container { bottom: 0px !important; -webkit-border-radius: 4px !important; -webkit-border-bottom-right-radius: 1px !important; -webkit-border-bottom-left-radius: 1px !important; -moz-border-radius: 4px !important; -moz-border-radius-bottomright: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-radius: 4px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important } .chat-container .chat-header { background-color: #48c0e1 !important; height: 43px !important } .chat-container .chat-header .left-icon { color: #ffffff !important; background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22512px%22%20height%3D%22512px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3A%23FFFFFF%3B%7D%0A%3C/style%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M339.1%2C144.8l-252.9%2C1.6C41.2%2C146.7%2C4.9%2C182.4%2C5.1%2C226l0.7%2C113.3c0.3%2C40.1%2C31.4%2C73.1%2C71.5%2C77.9%20%20%20c1.2%2C0.1%2C2.4%2C0.2%2C3.6%2C0.3l1.3%2C40c6.3%2C50.1%2C44.7%2C38.7%2C58.4%2C29.7c18-11.7%2C54.1-50.2%2C72.5-70.3l127.7-0.8%20%20%20c45.1-0.3%2C81.4-35.9%2C81.1-79.5l-0.7-113.3C421%2C179.7%2C384.2%2C144.5%2C339.1%2C144.8z%20M383.1%2C343.5c0.1%2C18.8-15.3%2C34.1-34.4%2C34.2%20%20%20l-146.6%2C0.9l-67%2C67.9l-17.4%2C0.1l-0.4-67.5L78%2C379.5c-19.1%2C0.1-34.7-15-34.8-33.8l-0.8-126.6c-0.1-18.8%2C15.3-34.1%2C34.4-34.2%20%20%20l270.7-1.7c19.1-0.1%2C34.7%2C15%2C34.8%2C33.8L383.1%2C343.5z%22/%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M311.5%2C251.2c0.1%2C9.6-7.7%2C17.4-17.3%2C17.5l-183.7%2C1.2c-9.6%2C0.1-17.4-7.7-17.5-17.3l0%2C0%20%20%20c-0.1-9.6%2C7.7-17.4%2C17.3-17.5l183.7-1.2C303.6%2C233.9%2C311.4%2C241.6%2C311.5%2C251.2L311.5%2C251.2z%22/%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M230.3%2C319.7c0.1%2C10-8%2C18.2-18%2C18.3l-100.5%2C0.6c-10%2C0.1-18.2-8-18.3-18l0%2C0c-0.1-10%2C8-18.2%2C18-18.3l100.5-0.6%20%20%20C222.1%2C301.7%2C230.2%2C309.7%2C230.3%2C319.7L230.3%2C319.7z%22/%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M434.2%2C54.3l-220.5%2C1.4c-39.3%2C0.3-71%2C31.3-70.8%2C69.4l0.1%2C16.9l32.6-0.2l-0.1-22.7c-0.1-16.4%2C13.3-29.8%2C30-29.9%20%20%20l236.1-1.5c16.7-0.1%2C30.2%2C13.1%2C30.4%2C29.5l0.7%2C110.4c0.1%2C16.4-13.3%2C29.8-30%2C29.9l-17.7%2C0.1l0.2%2C33.4l10.6-0.1%20%20%20c39.3-0.3%2C71-31.3%2C70.8-69.4l-0.6-98.8C505.6%2C84.7%2C473.5%2C54%2C434.2%2C54.3z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E) !important } .chat-container .chat-header #widget-header { margin-right: 10px !important } .chat-container .chat-header #widget-header li { padding: 10px !important } .chat-container .chat-header #widget-header li span { min-width: 18px !important } .chat-container .chat-header #widget-header li .left-icon:after { display: block !important; content: "Chat with us"; width: 125px !important; height: auto !important; position: absolute; margin-left: 35px !important; font-size: 14px !important; font-weight: 700 !important } .chat-container .chat-header #widget-header li label { color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important } .chat-container .chat-header #widget-header li:last-child { display: none } .chat-container .chat-header #widget-header li:empty { display: none !important } .chat-container .chat-body { background-image: none !important } .chat-container .chat-body .chat-footer .title-tag { display: none !important } #fc_frame { bottom: 0px !important } #mobile-chat-container.mobile-chat-container { background-color: #48c0e1 !important } .page-error h1, .page-error h2 { line-height: 1.2 } @media (min-width: 768px) { .page-error h1 { font-size: 6rem } } @media (min-width: 768px) { .page-error h2 { font-size: 3.5rem } } @media (min-width: 768px) { .page-error h2 { font-size: 2.5rem } } #recaptcha-error { color: #f04c3e } @media only screen and (max-width: 990px) and (min-width: 768px) { .form-containers .col-md-8, .form-containers .col-md-4 { flex: 100%; max-width: 100% } .form-containers .offset-md-4 { margin-left: 0 !important } .form-containers .btn { margin-bottom: 1rem } } @media (max-width: 1199px) { .why-choose-fibre h4 { display: inline-block } } @media (max-width: 414px) { .slick-next { display: none !important } } @media (max-width: 414px) { #ul-location li a { width: 49% !important } } .ul-breadcrumbs li a { margin-right: 8px } .areas-with-fibre { padding-bottom: 20px } .areas-with-fibre ul li { display: inline-block; margin-right: 1px } .areas-with-fibre ul li i.material-icons { position: relative; top: 3px; color: #36404a; font-size: 16px } .areas-with-fibre p.area-name { font-size: 22px } .yes-no-buttons { text-align: center } .whatsapp-widget { position: fixed; z-index: 99; cursor: pointer; right: .5rem; bottom: 2rem } @media (min-width: 992px) { .whatsapp-widget { right: 2rem; bottom: 3rem } } .whatsapp-widget .whatsapp-icon-icon > a { display: block } .whatsapp-widget .whatsapp-widget-info { width: 226px; color: #36404a; background: #fff; padding: 0; border: 2px solid #48c0e1; border-radius: 6px; -webkit-animation: slide-down .3s ease-out; -moz-animation: slide-down .3s ease-out } .whatsapp-widget .whatsapp-widget-info-header { padding: 5px 10px; background: #48c0e1; color: #ffffff; position: relative } .whatsapp-widget .whatsapp-widget-info-header .close-whatsapp { position: relative; left: 93px; bottom: 3px } .whatsapp-widget .whatsapp-widget-info-header .heading-whatsapp { font-size: 19px } .whatsapp-widget span.whatsapp-number { font-size: 23px; font-weight: bold } .whatsapp-widget .whatsapp-widget-info-body { padding: 10px; font-size: 14px } .static-color-blue { background-color: #b5ce2f } .static-color-blue .carousel-item { min-height: 225px } .carousel-caption-contact { position: absolute; right: 15%; bottom: 20px; left: 0%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center } .fibrepage-card-pad { padding: 30px 0 } .cabling-inf-fibre-provide { text-transform: uppercase } @media (max-width: 414px) { .card-header { margin-bottom: 10px } } .vumareach-payment .bg-blue { background-color: rgba(19, 173, 233, 0.9) } footer { background-color: #343a40 !important } .ispa-logo { float: right } section#dom-and-dommer { background-color: #ef4b3e } @media (min-width: 768px) { section#dom-and-dommer .hero-banner { background: no-repeat right bottom url(../images/fibre-page/dom-and-dommer.jpg); background-size: contain } } section#dom-and-dommer .hero-banner .text-block { max-width: 543px } section#dom-and-dommer .hero-banner .text-block div:first-child { background-color: #48c0e1; color: #fff } section#dom-and-dommer .hero-banner .text-block div:last-child { background-color: #fac809; color: #fff } section#dom-and-dommer .hero-banner .text-block div .h3, section#dom-and-dommer .hero-banner .text-block div .h5 { font-family: "Poppins", Arial, sans-serif; font-weight: 600; text-transform: uppercase } section#dom-and-dommer #connectivity-address-input .fibre-question { display: none !important } section#dom-and-dommer #connectivity-address-input.bg-dark { background-color: transparent !important } section#dom-and-dommer #connectivity-address-input.pt-5 { padding-top: 0 !important } section#dom-and-dommer #connectivity-address-input.pb-5 { padding-bottom: 0 !important } section#dom-and-dommer.dom-and-dommer-vuma-reach { background-color: #de2085 } section#dom-and-dommer.dom-and-dommer-vuma-reach .hero-banner { background-image: none } @media (min-width: 992px) and (max-width: 1199.98px) { section#dom-and-dommer.dom-and-dommer-vuma-reach .hero-banner { background: no-repeat right bottom url(../images/fibre-page/firestarter-will.png); background-size: contain } } @media (min-width: 1200px) { section#dom-and-dommer.dom-and-dommer-vuma-reach .hero-banner { background: no-repeat right bottom url(../images/fibre-page/firestarter-will.png); background-size: auto; background-position-y: -200px; background-size: 50% } } section#dom-and-dommer.dom-and-dommer-vuma-reach .hero-banner .display-3 { background-color: #fac809; color: #fff; font-family: "Poppins", Arial, sans-serif; font-weight: 900 } section#dom-and-dommer.dom-and-dommer-vuma-reach .hero-banner .img-block { max-width: 550px } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner { background-image: none } @media (min-width: 992px) and (max-width: 1199.98px) { section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner { background: no-repeat right bottom url(../images/fibre-page/firestarter-will.png); background-size: contain } } @media (min-width: 1200px) { section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner { background: no-repeat right bottom url(../images/fibre-page/firestarter-will.png); background-size: auto; background-position-y: -139px; background-size: 35% } } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .display-3 { background-color: #b5ce2f; color: #fff; font-family: "Poppins", Arial, sans-serif; font-weight: 900; font-size: 2.8rem; margin-bottom: 42px !important; margin-top: 58px !important } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .img-block { max-width: 550px } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .text-block { max-width: 543px } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .text-block div:last-child { background-color: #48c0e1; color: #fff; margin-bottom: 53px !important } section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .text-block .h3, section#dom-and-dommer.dom-and-dommer-vuma-reach .vuma-hero-banner .text-block .h5 { font-family: "Poppins", Arial, sans-serif; font-weight: 600; text-transform: uppercase } .non-semantic-protector { position: absolute; z-index: 1; top: -8px; left: 0 } [data-state="preorder"] .non-semantic-protector, [data-state="preorder"] .vuma-dontshowme { display: none } .ribbon { font-size: 16px !important; width: 100%; position: relative; background: #ec008c; color: #fff; text-align: center; padding: 2px 5px } .ribbon.opernserve-ribbon { background: #394d5c } .ribbon-3 { font-size: 16px !important; width: 100%; position: relative; background: #ec008c; color: #fff; text-align: center; padding: 2px 5px } .ribbon-3 .ribbon-content:before { content: ""; position: absolute; display: block; border-style: solid; border-color: #ec008c transparent transparent transparent; bottom: -1em } .ribbon-2 { font-size: 16px !important; width: 100%; position: relative; background: #28a71a; color: #fff; text-align: center; padding: 2px 5px } .ribbon-2.link-africa-ribbon { background: #706499 } .ribbon-2 .ribbon-content:before { content: ""; position: absolute; display: block; border-style: solid; border-color: #1b4e15 transparent transparent transparent; bottom: -1em } .ribbon .ribbon-content:before { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em } .ribbon.opernserve-ribbon .ribbon-content:before { border-color: #13181d transparent transparent transparent } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em } .ribbon-2 .ribbon-content:before { left: 0; border-width: 1em 0 0 1em } .ribbon-3 .ribbon-content:before { left: 0; border-width: 1em 0 0 1em } .card-with-ribbon .non-semantic-protector { top: -11px; left: -16px } .card-with-ribbon .ribbon-2 { font-size: 16px !important; padding: 5px 14px } .card-with-ribbon .ribbon-3 { font-size: 16px !important; padding: 5px 14px } #vumatel-fibre-connectivity-package .non-semantic-protector, #vumafibrehoods-fibre-connectivity-package .non-semantic-protector, #vumareach-fibre-connectivity-package .non-semantic-protector, #openserve-fibre-connectivity-package .non-semantic-protector { top: -18px !important; left: -21px !important } #vumatel-fibre-connectivity-package .non-semantic-protector .ribbon, #vumafibrehoods-fibre-connectivity-package .non-semantic-protector .ribbon, #vumareach-fibre-connectivity-package .non-semantic-protector .ribbon, #openserve-fibre-connectivity-package .non-semantic-protector .ribbon { font-size: 20px !important } .time-outages .input-group-append { margin: 10px 0 } .col-md-12.time-outages { padding-bottom: 12px; padding-left: 15px } .gm-style-iw.gm-style-iw-c { min-width: 300px !important; min-height: 200px !important } @media (max-width: 991.98px) { .gm-style-iw.gm-style-iw-c h5, .gm-style-iw.gm-style-iw-c p { font-size: 16px !important; line-height: 22px !important } .gm-style-iw.gm-style-iw-c .btn-group .btn { font-size: 12px !important; padding: 7px !important } } @media (max-width: 991.98px) { #vumareachAddressVerificationModal .modal-header { padding: 5px } #vumareachAddressVerificationModal .modal-header .modal-title { font-size: 16px } #vumareachAddressVerificationModal .modal-body { padding: 10px } #vumareachAddressVerificationModal .modal-body #staticVumaReachAddressConfirm { padding: 10px } #vumareachAddressVerificationModal .modal-body #staticVumaReachAddressConfirm h6, #vumareachAddressVerificationModal .modal-body #staticVumaReachAddressConfirm p { font-size: 14px } #vumareachAddressVerificationModal .modal-body #staticVumaReachAddressConfirm .form-inline .form-group { margin: 0 !important; width: 100% } #vumareachAddressVerificationModal .modal-body #staticVumaReachAddressConfirm #vumareach-findMyAddress-btn { width: 100% } #vumareachAddressVerificationModal .modal-body h5 { font-size: 16px } #vumareachAddressVerificationModal .modal-body #vumareachAddressSelect { font-size: 13px } #vumareachAddressVerificationModal .modal-body #vumareachAddressSelect_showMore, #vumareachAddressVerificationModal .modal-body #vumareachAddressSelect_showLess { font-size: 14px } #vumareachAddressVerificationModal .modal-body #vumareachAddressSelect_showMore .material-icons, #vumareachAddressVerificationModal .modal-body #vumareachAddressSelect_showLess .material-icons { display: none } } .card-freebies { background: #48c0e1; color: #fff; padding: 10px; margin: 6px } .card-freebies .tooltip-more:after { color: #ffffff } .extra-padding { padding-top: 20px } .dial-anerd-modal .modal-footer { display: block } .dial-anerd-modal .button-wrapper { display: block; width: 100%; text-align: center; margin-top: 10px } .dial-anerd-modal .material-icons { font-size: 37px } .dial-anerd-modal .btn-success { padding: 10px 86px; font-size: 18px } @media (max-width: 414px) { .dial-anerd-modal .btn-success { width: 100%; padding: 10px 13px; margin-left: -12px } } .dial-anerd-modal .btn-secondary { font-size: 16px } @media (max-width: 414px) { .dial-anerd-modal .btn-secondary { font-size: 13px; margin-left: -20px } } .danger-result-card .tooltip-more:after { color: #ffffff } #static-card .text-primary { color: #48c0e1 !important } #static-card .btn-outline-primary { color: #48c0e1 !important; border-color: #48c0e1 !important } #static-card .btn-outline-primary.active, #static-card .btn-outline-primary:hover { background-color: #48c0e1 !important; color: white !important } #static-card .btn-outline-primary.active img, #static-card .btn-outline-primary:hover img { filter: brightness(0) invert(1) } #static-card div.bg-danger { background: #ef4b3e !important } .promo-ribbon { position: absolute; z-index: 1; top: -20px; left: 0 } .promo-ribbon > div { font-family: "Poppins", Arial, sans-serif; font-size: 20px !important; line-height: 16px; width: 96%; position: relative; background: black; color: white; text-align: center; padding: 5px; text-transform: uppercase } .promo-ribbon > div::before { content: ""; position: absolute; display: block; border-style: solid; border-color: #595953 transparent transparent transparent; bottom: -15px; left: 0; border-width: 15px 0 0 15px } [data-role="connectivity-package"].promo .promo-ribbon > div { font-size: 16px !important } [data-provider="linkafrica"] .promo-ribbon > div, [data-provider="linkafrica_promo"] .promo-ribbon > div { background: #5f518d !important } [data-provider="openserve"] .promo-ribbon > div, [data-provider="frogfoot"] .promo-ribbon > div { background: #12ad39 !important } .promo-ribbon-pnp > div { background: #be1d37 !important } [data-provider="vumatel"] .promo-ribbon > div, [data-provider="vumatel_promo"] .promo-ribbon > div, [data-provider="vumatel_rgb"] .promo-ribbon > div { background: #ec008c !important } [data-provider="metrofibre"] .promo-ribbon > div, [data-provider="metro_sdu"] .promo-ribbon > div, [data-provider="metro_sdu2"] .promo-ribbon > div, [data-provider="metro_mdu"] .promo-ribbon > div, [data-provider="metrofibre_promo"] .promo-ribbon > div, [data-provider="metro_sdu_promo"] .promo-ribbon > div, [data-provider="metro_mdu_promo"] .promo-ribbon > div, [data-provider="zoom"] .promo-ribbon > div { background: #29a3db !important } [data-role="connectivity-package"][data-display-state="active"][data-state="preorder"] { order: 100 !important } [data-role="connectivity-package"][data-display-state="active"][data-state="preorder"][data-connection-package-type="fibre"] { order: 8 !important } .mnt-uncapped-single-centered { position: relative; left: 300px } .list-inside-list ul li { margin-left: 15px } .promo-alert { border: 2px solid #de4d3f; color: #de4d3f; display: flex !important; width: 60%; margin: 0 auto } .promo-alert .limited-promo-content { padding-top: 22px } .promo-alert-pnp { border: 2px solid #de4d3f; background-color: #be1d37; color: #ffffff; width: 76%; margin: 0 auto; padding: 31px; text-align: center } .promo-alert-pnp .limited-promo-logo { padding: 17px 0px } .promo-alert-small { border: 2px solid #de4d3f; color: #de4d3f; display: flex; width: 100%; margin: 0 auto } .promo-alert-small img { max-width: none !important } #vumareach-fibre-connectivity-package[data-display-state="active"][data-state="preorder"] .hide-preorder { display: none } #direct-vumareach-fibre-connectivity-package[data-state="preorder"] .hide-preorder { display: none } .results-old-price { text-decoration: line-through } .month-crossed { text-decoration: line-through } .product .product-price .price-price { font-size: 42px } .product .product-price .price-zoom { font-size: 42px } #vumaCoreModal .modal-header { background-color: #48c0e1; color: #fff } #vumaCoreModal .wrapper { color: #856404; background-color: #fff3cd; border-color: #ffeeba } #vumaCoreModal .wrapper .page-item:first-child.disabled, #vumaCoreModal .wrapper .page-item:last-child.disabled { visibility: hidden } #vumaCoreModal .wrapper #vumaCore_showLess, #vumaCoreModal .wrapper #vumaCore_showMore { background-color: #856404; border-color: #856404; color: #fff3cd; font-weight: bold } #vumaCoreModal .wrapper #vumaCore_showLess:hover, #vumaCoreModal .wrapper #vumaCore_showMore:hover { opacity: .9 } #vumaCoreModal .wrapper #vumaCore_showCounter { color: #856404 !important } #vumaCoreModal #list > div { display: none } #vumaCoreModal #list > div.show-this { display: block } #vumaCoreModal #list > div.hidden-by-filter { display: none !important } #vumaCoreModal #list > div.show-by-filter { display: block !important } #zoom-static .col-md-4 { padding-left: 0 !important; padding-right: 11px !important } #pnp-logo { position: relative; top: 8px; left: 26px; border-left: 2px solid #ffffff; padding-left: 16px; padding-top: 10px } @media (max-width: 414px) { #pnp-logo img { width: 79% } } #standard-logo { position: relative; top: 16px; left: 26px; padding-left: 22px; padding-top: 7px } @media (max-width: 414px) { #standard-logo img { width: 79% } } .main-nav-pnp { background: #b9154a !important; padding: 15px 0 } .main-nav-pnp a { color: #ffffff } @media (max-width: 414px) { .main-nav-pnp .navbar-brand img { width: 44% } } .main-nav-standardbank { background: #0033a1 !important; padding: 15px 0 } .main-nav-standardbank .container { display: flex; justify-content: space-between } #fibrepage-pnp .bg-dark { background-color: #3366cc !important } #frogfoot-fibre-pnp-connectivity-package .card-freebies, #linkafrica-pnp-connectivity-package .card-freebies, #openserve-pnp-promo-fibre-connectivity-package .card-freebies, #vodacom-pnp-connectivity-package .card-freebies, #metro-fibre-mdu-pnp-connectivity-package .card-freebies, #mitsol-fibre-pnp-connectivity-package .card-freebies, #clearaccess-fibre-pnp-connectivity-package .card-freebies, #lightstruck-pnp-fibre-connectivity-package .card-freebies, #octotel-fibre-pnp-connectivity-package .card-freebies, #frogfoot-fibre-pnp-connectivity-package .card-freebies, #linkafrica-pnp-connectivity-package .card-freebies, #evotel-fibre-pnp-connectivity-package .card-freebies, #teralink-fibre-pnp-connectivity-package .card-freebies, #vumatel-fibre-pnp-connectivity-package .card-freebies, #zoom-fibre-pnp-connectivity-package .card-freebies, #linklayer-fibre-pnp-connectivity-package .card-freebies, #geeks-fibre-pnp-connectivity-package .card-freebies, #metro-fibre-pnp-sdu-connectivity-package .card-freebies, #mtn-lte-pnp-connectivity-package .card-freebies { background-color: #be1d37 !important } #frogfoot-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #linkafrica-pnp-connectivity-package .card-freebies .tooltip-more:after, #openserve-pnp-promo-fibre-connectivity-package .card-freebies .tooltip-more:after, #vodacom-pnp-connectivity-package .card-freebies .tooltip-more:after, #metro-fibre-mdu-pnp-connectivity-package .card-freebies .tooltip-more:after, #mitsol-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #clearaccess-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #lightstruck-pnp-fibre-connectivity-package .card-freebies .tooltip-more:after, #octotel-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #frogfoot-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #linkafrica-pnp-connectivity-package .card-freebies .tooltip-more:after, #evotel-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #teralink-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #vumatel-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #zoom-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #linklayer-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #geeks-fibre-pnp-connectivity-package .card-freebies .tooltip-more:after, #metro-fibre-pnp-sdu-connectivity-package .card-freebies .tooltip-more:after, #mtn-lte-pnp-connectivity-package .card-freebies .tooltip-more:after { color: #ffffff !important } #frogfoot-fibre-pnp-connectivity-package .btn-success, #linkafrica-pnp-connectivity-package .btn-success, #openserve-pnp-promo-fibre-connectivity-package .btn-success, #vodacom-pnp-connectivity-package .btn-success, #metro-fibre-mdu-pnp-connectivity-package .btn-success, #mitsol-fibre-pnp-connectivity-package .btn-success, #clearaccess-fibre-pnp-connectivity-package .btn-success, #lightstruck-pnp-fibre-connectivity-package .btn-success, #octotel-fibre-pnp-connectivity-package .btn-success, #frogfoot-fibre-pnp-connectivity-package .btn-success, #linkafrica-pnp-connectivity-package .btn-success, #evotel-fibre-pnp-connectivity-package .btn-success, #teralink-fibre-pnp-connectivity-package .btn-success, #vumatel-fibre-pnp-connectivity-package .btn-success, #zoom-fibre-pnp-connectivity-package .btn-success, #linklayer-fibre-pnp-connectivity-package .btn-success, #geeks-fibre-pnp-connectivity-package .btn-success, #metro-fibre-pnp-sdu-connectivity-package .btn-success, #mtn-lte-pnp-connectivity-package .btn-success { background: #52ae32 !important } #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #openserve-pnp-promo-fibre-connectivity-package .btn.btn-outline-primary.rounded-0.active, #vodacom-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #metro-fibre-mdu-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #mitsol-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #clearaccess-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #lightstruck-pnp-fibre-connectivity-package .btn.btn-outline-primary.rounded-0.active, #octotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #evotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #teralink-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #vumatel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #zoom-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #linklayer-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #geeks-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active, #metro-fibre-pnp-sdu-connectivity-package .btn.btn-outline-primary.rounded-0.active, #mtn-lte-pnp-connectivity-package .btn.btn-outline-primary.rounded-0.active { background-color: #003359 !important; color: #ffffff !important } #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #openserve-pnp-promo-fibre-connectivity-package .btn.btn-outline-primary.rounded-0, #vodacom-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #metro-fibre-mdu-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #mitsol-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #clearaccess-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #lightstruck-pnp-fibre-connectivity-package .btn.btn-outline-primary.rounded-0, #octotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #evotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #teralink-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #vumatel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #zoom-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #linklayer-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #geeks-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0, #metro-fibre-pnp-sdu-connectivity-package .btn.btn-outline-primary.rounded-0, #mtn-lte-pnp-connectivity-package .btn.btn-outline-primary.rounded-0 { border-color: #003359 !important; color: #003359 !important } #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #openserve-pnp-promo-fibre-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #vodacom-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #metro-fibre-mdu-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #mitsol-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #clearaccess-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #lightstruck-pnp-fibre-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #octotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #frogfoot-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #linkafrica-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #evotel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #teralink-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #vumatel-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #zoom-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #linklayer-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #geeks-fibre-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #metro-fibre-pnp-sdu-connectivity-package .btn.btn-outline-primary.rounded-0:hover, #mtn-lte-pnp-connectivity-package .btn.btn-outline-primary.rounded-0:hover { background-color: #003359 !important; color: #ffffff !important } #frogfoot-fibre-pnp-connectivity-package .tooltip-more:after, #linkafrica-pnp-connectivity-package .tooltip-more:after, #openserve-pnp-promo-fibre-connectivity-package .tooltip-more:after, #vodacom-pnp-connectivity-package .tooltip-more:after, #metro-fibre-mdu-pnp-connectivity-package .tooltip-more:after, #mitsol-fibre-pnp-connectivity-package .tooltip-more:after, #clearaccess-fibre-pnp-connectivity-package .tooltip-more:after, #lightstruck-pnp-fibre-connectivity-package .tooltip-more:after, #octotel-fibre-pnp-connectivity-package .tooltip-more:after, #frogfoot-fibre-pnp-connectivity-package .tooltip-more:after, #linkafrica-pnp-connectivity-package .tooltip-more:after, #evotel-fibre-pnp-connectivity-package .tooltip-more:after, #teralink-fibre-pnp-connectivity-package .tooltip-more:after, #vumatel-fibre-pnp-connectivity-package .tooltip-more:after, #zoom-fibre-pnp-connectivity-package .tooltip-more:after, #linklayer-fibre-pnp-connectivity-package .tooltip-more:after, #geeks-fibre-pnp-connectivity-package .tooltip-more:after, #metro-fibre-pnp-sdu-connectivity-package .tooltip-more:after, #mtn-lte-pnp-connectivity-package .tooltip-more:after { color: #003359 !important } #frogfoot-fibre-pnp-connectivity-package .card-footer .text-primary, #linkafrica-pnp-connectivity-package .card-footer .text-primary, #openserve-pnp-promo-fibre-connectivity-package .card-footer .text-primary, #vodacom-pnp-connectivity-package .card-footer .text-primary, #metro-fibre-mdu-pnp-connectivity-package .card-footer .text-primary, #mitsol-fibre-pnp-connectivity-package .card-footer .text-primary, #clearaccess-fibre-pnp-connectivity-package .card-footer .text-primary, #lightstruck-pnp-fibre-connectivity-package .card-footer .text-primary, #octotel-fibre-pnp-connectivity-package .card-footer .text-primary, #frogfoot-fibre-pnp-connectivity-package .card-footer .text-primary, #linkafrica-pnp-connectivity-package .card-footer .text-primary, #evotel-fibre-pnp-connectivity-package .card-footer .text-primary, #teralink-fibre-pnp-connectivity-package .card-footer .text-primary, #vumatel-fibre-pnp-connectivity-package .card-footer .text-primary, #zoom-fibre-pnp-connectivity-package .card-footer .text-primary, #linklayer-fibre-pnp-connectivity-package .card-footer .text-primary, #geeks-fibre-pnp-connectivity-package .card-footer .text-primary, #metro-fibre-pnp-sdu-connectivity-package .card-footer .text-primary, #mtn-lte-pnp-connectivity-package .card-footer .text-primary { color: #3366cc !important } #small-n { text-transform: lowercase } #vumareach-fibre-connectivity-package[data-state="preorder"] [data-role="today-price"] { display: none !important } #vuma-reach-address-table_length { display: none } .select2-container { width: 100% !important } .loader { border: 5px solid lightgray; border-top: 5px solid #e70581; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .hud-grid { display: grid; grid-column-gap: 16px; grid-row-gap: 16px; justify-items: stretch; align-items: stretch } @media (min-width: 992px) { .hud-grid { grid-template-columns:1fr 1fr 1fr } } .staff-logged-in.wa-display[data-state="active"] { display: block !important } body :not(.fibre-page-pnp ) #mtn-lte-pnp-connectivity-package { display: none !important; visibility: hidden !important } #vuma-fibre-address-table_wrapper #vuma-fibre-address-table_length { display: none } #vuma-fibre-address-table_wrapper #vuma-fibre-address-table_filter input { background-color: white } #vuma-fibre-address-table { border-bottom: none } #vuma-fibre-address-table .even { background-color: transparent } .show-preorder { display: none } [data-state="preorder"] .show-preorder { display: block } .standard-bank-tabs .tab-content .active { background-color: white; color: #000; padding: 10px } .standard-bank-tabs a.nav-item { color: #ffffff } .four-blocked-sec { margin-bottom: 35px } .four-blocked-sec h4 { font-weight: normal } .std-sec-icon { margin-bottom: 11px } .standard-bank-page { background-color: #0089ff } .standard-bank-page .highlight { color: #96ab26 } #direct-vumareach-fibre-connectivity-package[data-state="active"] [data-role="preorder-today-price"] { display: none !important } .buttons-wrapp input[type=radio] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none } .buttons-wrapp .btn.btn-outline-primary { margin: 0 5px } .buttons-wrapp .h-100 { position: relative; bottom: 10px } @media (max-width: 414px) { #main-nav .nav-link { padding: .5rem .2rem !important } } @media (max-width: 414px) { .support-li { padding-right: 0px !important } } @media (max-width: 414px) { .nav-support-icon { display: none !important } } .h-product .h-product-info { padding: 15px; min-height: 289px } .h-product-header { min-height: 298px } /*New reponsive top nav styles*/ #main-nav .navbar.navbar-light .navbar-nav .nav-item > .nav-link { min-height: 44px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.8em; } #main-nav .navbar.navbar-light .navbar-nav .nav-item > .nav-link.active { background-color: rgba(0, 0, 0, 0.1); border-bottom: unset; } #main-nav .navbar.navbar-light .navbar-nav .nav-item > .btn-block { margin-top: 0.8em; margin-bottom: 0.3em; } @media (min-width: 768px) { #main-nav #navbarSupportedContent { flex-basis: unset; } } /* A new style for the remvoe local storage response in the search input*/ .wrapper-lc-remove .lc-remove{ position: absolute; right:0; top:5px; } @media (max-width: 767px) { .wrapper-lc-remove .lc-remove{ right:10px; } } .wrapper-lc-remove .lc-remove.input-group-text { background-color: transparent; border: none; cursor: pointer; } .wrapper-lc-remove .lc-remove.input-group-text i { font-size: 1rem; color: #999; } .wrapper-lc-remove .lc-remove.input-group-text:hover i { color: #333; } /*BG on product card logos exclude picture that has alt Card corner*/ [data-role='connectivity-package'] .card-body picture img:not([alt*='Card corner']){ filter: grayscale(100%); } /*A css rules that checks if the id contains string*/ /*#section-result-card{ display: block !important; } [data-role='connectivity-package']{ display: none !important; } [data-role='connectivity-package'][id*='mitsol-fibre-connectivity-package']{ display: block !important; border: 2px dashed green !important; }*/ /*From header global, I think this applies to store pages or old banners*/