@font-face { font-family: 'Avenir'; src: url(../webfonts/AvenirLTStd-Book.otf); } @font-face { font-family: 'Avenir'; src: url(../webfonts/AvenirLTStd-Roman.otf); font-weight: 500; } @font-face { font-family: 'Avenir'; src: url(../webfonts/AvenirLTStd-Black.otf); font-weight: 700; } @font-face { font-family: 'Museo'; src: url(../webfonts/Museo300-Regular.otf); font-weight: 300; } @font-face { font-family: 'Museo'; src: url(../webfonts/Museo700-Regular.otf); font-weight: 700; } * { -webkit-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; outline:0; } html{ height: 100%; scroll-behavior: smooth; } body { padding: 0; height: 100%; font-family: 'Avenir', sans-serif; color: #000000; font-size: 18px; font-weight: 400; line-height: 1.4; overflow-x: hidden; background-color: #f2ffe5; background: -moz-linear-gradient(90deg,rgba(242,255,229,1) 0%,rgba(213,255,237,1) 100%); background: -webkit-linear-gradient(90deg,rgba(242,255,229,1) 0%,rgba(213,255,237,1) 100%); background: linear-gradient(90deg,rgba(242,255,229,1) 0%,rgba(213,255,237,1) 100%); } a:hover { text-decoration: none; } .backtoscrat2win { font-size: 14px; transition: 0.3s; color: #cce4c5!important; } .backtoscrat2win:hover{ color: #ffee00!important; transition: 0.3s; } .error { color: #f1ffd8; font-size: 17px; } .verified{ color: #f1ffd8; font-size: 17px; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } .btn:focus, button:focus, button.active, button:hover { outline: none; box-shadow: none; } .force-break { overflow-wrap: break-word; /* These are technically the same, but use both */ word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; /* Instead use this non-standard one: */ } .validate_error_message, .invalid-feedback { font-size: .8em; color: red; } /* --------------------------------- */ /* Scratch & Win CSS */ /* --------------------------------- */ .phcare_promo h1, .phcare_promo h2, .phcare_promo h3, .phcare_promo h4 { font-family: museo, serif; text-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* check in html file */ } .phcare_promo .row{ margin: auto; /* background-color: #0FA3A7; */ } .phcare_promo h2 { font-size: 35px; } .phcare_promo h5 { text-shadow: 2px 2px 5px rgba(0,0,0,0.1); font-weight: 400; } .phcare_promo{ display: flex; flex-direction: column; background: #E0F7D7; /* position: relative; margin: 0; padding: 0; min-height: 100%; */ } .phcare_promo a, .phcare_promo a:hover, .phcare_promo a:focus { color:#ffffff; } .phcare_promo main{ padding-top: 72px; height: 100%; /* min-height: 100vh; */ background-image: url(../sw_bg.png); background-position: top center; background-size:1366px; background-repeat: no-repeat; /* display: flex; align-items: center; justify-content:space-between; flex-direction: column; */ } .sw_main_footer{ margin-top: auto; } .sw_form_div { max-width: 800px; /* height: 100%; */ min-height: 100vh; background-color: #0FA3A7; color: #ffffff; position: relative; padding: 0px; margin: auto; } .sw_footer_div{ background-color: #0FA3A7; width: 100%; /* height: 40px; */ /* position: absolute; bottom: 0;*/ font-size: .7em; display: block; color: #ffffff; } .sw_footer_div .footerlinks { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; list-style: none; padding-left: 0; } .sw_footer_div .footerlinks li:not(:last-child)::after { display: inline-block; padding-left: 0.75rem; padding-right: 0.75rem; color: #fff; content: "|"; } .sw_footer_div .sw_footer{ max-width: 800px; /* background-color: #0FA3A7; */ padding: 0 10px; font-size: 10px; } @media screen and (min-width: 768px){ .sw_footer_div .col-md-6:first-child { text-align: left; padding-bottom: 0; } .sw_footer_main{ position: absolute; bottom: 0; width: 100%; margin-top: 1000px; } .sw_footer_div .footerlinks { justify-content: flex-end; } .sw_footer .row div:first-child{ padding-right: 10px; } } @media screen and (max-width: 767px){ .sw_footer_div .sw_footer{ text-align: center; } } .sw_phcarelogo{ position: absolute; top: 0; z-index: 1; margin-top: -70px; } .sw_mechanics_info{ text-align: end; position: absolute; right: 0; margin: 15px 30px 10px 30px; } .sw_mechanics_info p{ display: flex; align-items: center; justify-content: center; } .sw_mechanics_info i{ font-size: 12px; margin-right: 10px; } .phcare_logo{ width: 140px; margin-left: -5px; } .sw_banner{ position: relative; max-width: 410px; text-align: center; margin: auto; } .phcare_products{ margin-top: -40px; } .phcare_products_big{ width: 319px; margin-bottom: -92px; } .phcare_products_small{ width: 181px; margin-bottom: -55px; } .phcare_promologo{ width: 400px; } .blank_white_big{ background-color: #ffffff; height: 128px; margin-top: -170px; margin-bottom: 60px; } .blank_white_small{ background-color: #ffffff; height: 58px; margin-top: -170px; margin-bottom: 130px; } .sw_row{ text-align: center; } .phcare_promo .modal-backdrop{ background-color: #fff; } /* SW form */ .sw_form_row { max-width: 432px; margin: auto!important; } .sw_form{ margin-bottom: 40px; } .sw_form_instruction { font-size: 14px; } .sw_form_category{ padding-bottom: 15px; } .sw_form_categorytitle{ border-bottom: 1px solid #E0F7D7; text-align: center; } .sw_form_categorytitle p{ background-color: #F1FFD8; color:#0FA3A7; font-size: 12px; width: 143px; padding: 4px 10px; margin-bottom: 0px; } /* Form textboxes */ .phcare_promo .form-control{ border:none!important; color: #481025; } .phcare_promo .form-control:focus{ box-shadow: 0 0 0 0.2rem rgba(241, 255, 216, 0.3); } .formWinner .form-control{ font-size: 12px; } .sw_inputDnD label{ font-size: 14px; } .phcare_promo select{ background-image: linear-gradient(45deg, transparent 50%, #333333 60%), linear-gradient(135deg, #333333 40%, transparent 50%) !important; background-position: calc(100% - 11px) 14px, calc(100% - 5px) 14px, 100% 0; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; -webkit-appearance: none; } .sw_form_fields{ padding-bottom: 20px; } .sw_code_form{ max-width: 569px; width: 100%; } .sw_code_form .form-control{ text-align: center; font-size: 2rem; } .text-field-code{ height: 70px; margin: auto; border-radius: 0.7rem; } .select_choice{ color: #481025; } .select_choice_default{ color: #71757d!important; } /* Drop and Click Field */ .sw_inputDnD .form-control-file { position: relative; width: 100%; height: 100%; min-height: 6.7em; outline: none; visibility: hidden; cursor: pointer; box-shadow: 0 0 5px solid currentColor; } .sw_inputDnD .form-control-file::before{ content: attr(data-title); position: absolute; left: 0; width: 100%; min-height: 9em; font-size: 12px; line-height: 2em; opacity: 1; visibility: visible; text-align: center; border: 0.2em dashed #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.1); transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } /* END Drop and Click Field */ .sw_btn{ background-color: #2B8233; color:#ffffff; min-width: 180px; min-height: 55px; box-shadow: 2px 4px 8px rgba(0,0,0,0.2); margin: 0 1em; padding: 10px 30px; font-size: 1em; font-weight: 700; text-decoration: none; border-radius: 12px; border:none; } .sw_btn.active, .sw_btn:hover { background-color: #f1ffd8; color: #0fa3a7; box-shadow: 2px 4px 8px rgba(0,0,0,0.2); } /* ENDForm textboxes */ /* END SW form */ /* SW Modal */ .sw_modal .modal-dialog{ max-width: 585px; max-height: 100vh; } .sw_modal .modal-content, .sw_modal .modal-header, .sw_modal .modal-footer{ border:none; border-radius: 0px; } .sw_modal .modal-header{ background-color: #0FA3A7; color: #ffffff; padding: 0.2rem 1rem; display: flex; align-items: center; justify-content: center; } .sw_modal .modal-header i, .sw_modal .modal-header .close{ color: #ffffff; opacity: 1; text-shadow: none; } .sw_modal .modal-header .close{ font-size:21px } .sw_modal h1, .sw_modal h2, .sw_modal h3, .sw_modal h4, .sw_modal h5, .sw_modal h6, .sw_modal h7{ font-weight: 400; } .sw_modal .modal-header .modal-title i, .sw_modal h7{ font-size:14px } .sw_modal .modal-body-title{ text-align: center; margin-bottom: 15px; } .sw_modal .modal-content{ background-color: #E0F7D7; color: #000000; } .sw_modal .modal-body { font-size: 14px; line-height: 24px; padding: 1.5rem 2rem; max-height: 78vh; overflow-y:scroll; } .sw_modal .mechanicsModal_div{ font-size: 11px; line-height: 17px; } .sw_modal .shippingModal_div p{ max-width: 432px; margin: auto; } .sw_modal .modal-footer{ margin: auto; padding-top: 0px; } .sw_modal .modal-footer a, .sw_modal .modal-footer a:hover, .sw_modal .modal-footer a.active, .sw_modal .modal-footer a:focus{ background-color: transparent; } .sw_modal .modal-footer a, .sw_modal .modal-footer a:hover, .sw_modal .modal-footer a.active, .sw_modal .modal-footer a:focus{ color: #000000; } .sw_modal .modal-footer .sw_btn_close { background-color: #ffffff; color: #000000; font-weight: 400; } .sw_modal .modal-body ol{ padding-left: 12px; } .sw_modal .modal-body li::marker{ text-align: left; } .sw_modal .modal-body::-webkit-scrollbar { width: 8px; } .sw_modal .modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0); } .sw_modal .modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); } .sw_modal .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); transition: all 0.3s; } /* END SW Modal */ .sw_codelocation{ text-align: center; padding: 20px 10px; font-size: 14px; } .sw_codelocation_link { position: relative; color: #FFFFFF; text-decoration: none; } .sw_codelocation_link::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0; left: 0; margin-bottom: -9px; background-color: #ffffff; transform-origin: bottom right; transition: transform 0.25s ease-out; } .sw_codelocation_link:hover::after { transform: scaleX(1); transform-origin: bottom left; } .privacytermspanel h2, .privacytermspanel h5 { font-weight: 600; } .privacytermspanel ol.first_ol > li::marker { font-weight: bold; } .sw_phcarestores{ background-color: #ffffff; text-align: center; padding: 20px 30px; margin-bottom: 1rem; } .sw_phcarestores img{ max-width: 189px; } .icon_warning{ padding-bottom: 5px; } h2 span:first-child .icon_congrats{ -webkit-transform: scaleX(-1); transform: scaleX(-1); } /* Media Queries */ @media (min-width:768px) { .sw_form_fields:nth-child(odd) { padding-left: 0px; } .sw_form_fields:nth-child(even) { padding-right: 0px; } .sw_form_fields_drag{ padding: 0px; } .hidden-in-mobile{ display: block; } .hidden-in-desktop{ display: none; } .sw_codelocation, .store_row { margin-bottom: 80px; } } @media (max-width:767px) { .sw_footer_div .sw_footer .col-md-6{ text-align: center; margin-bottom: 25px; } .sw_footer_div .footerlinks{ justify-content: center; } .hidden-in-mobile{ display: none; } .hidden-in-desktop{ display: block; } .phcare_products{ width: 225px; } .phcare_promo main{ padding-top: 132px; } .sw_phcarelogo{ margin-top: -130px; margin-left: -10px; } .blank_white_small{ margin-top: -190px; margin-bottom: 140px; } .sw_code_form, .sw_form_row{ padding-right: 33px; padding-left: 33px; } .sw_code_form .sw_form_fields{ padding-left: 0px; padding-right: 0px; } .sw_footer_div .sw_footer .col-md-6:first-child{ max-width: 255px; line-height: 38px; margin: auto; margin-bottom: 10px; } .sw_mechanics_info{ margin: -110px 20px 10px 20px; } .sw_mechanics_info a, .sw_mechanics_info a:hover, .sw_mechanics_info a:focus, .sw_mechanics_info a.active{ color: #481025; } .privacytermspanel ol ol{ padding-left: 0px; } .privacytermspanel ol.first_ol{ padding-left: 20px; } } @media (max-width:600px) { h2 span:first-child .icon_warning{ display: none; } } @media (max-width:480px) { h2 span:first-child .icon_congrats { display: none; } } /* --------------------------------- */ /* END Scratch & Win CSS */ /* --------------------------------- */