@charset "utf-8"; .middle-cover { padding: 60px 0; background: #efefef; } .g-top { position: relative; z-index: 2; padding: 100px 0; background: url(../img/giveaway/gotd1.webp) no-repeat center; background-size: cover; } .top-heading h1 { font-family: 'gotham-bold'; font-size: 50px; text-align: center; color: #9af7ff; margin-bottom: 80px; } .top-heading h1 span { color: #fff; } .gray-box { background: rgba(254, 254, 254, 1); margin: 0 auto; padding: 30px 0 20px 0; border-radius: 3px; transition: ease .5s; } .gray-2 h3 { font-family: 'robotobold'; font-size: 22px; color: #101010; margin-bottom: 15px; } .gray-2 h3 span { color: #e83b45; font-size: 16px; font-family: robotoregular; font-weight: bold; } .gray-2 p.bolder-text { font-family: 'robotobold'; font-size: 22px; color: #101010; margin-bottom: 15px; } .gray-2 p.bolder-text span { color: #5fc400; font-size: 16px; } .gray-2 ul { padding: 0 0 10px 0; list-style-type: disc; } .gray-2 ul li { padding-top: 10px; font-size: 14px; color: #101010; margin-bottom: 5px; } .gray-2 input { font-size: 15px; width: 90%; background: none; border: 1px solid #999; color: #000; padding: 10px 5px; border-radius: 4px; margin-top: 10px; } .gray-2 .v-btn { margin-top: 20px; background: url(../img/activity/v-btn-bg.webp) no-repeat center; background-size: cover; border-radius: 4px; padding: 8px 8px 8px 40px; } .gray-2 button.v-btn span .span1 { font-size: 20px; color: #fff; margin: 0; display: block; } .gray-2 button.v-btn span { font-size: 14px; color: #fff; margin: 0; display: block; } .gray-2 button.v-btn:hover { opacity: .6; } .vs { text-align: center; } .vs img { width: 90%; max-width: 90px; display: block; } .vs img.line-dotted { width: 2px; margin: 10px auto; } .time-left1 { background: url(../img/giveaway/time-icon1.webp) no-repeat left top; } .time-left2 { background: url(../img/giveaway/time-icon-2.webp) no-repeat left top; } .time-left p { margin-left: 20px !important; display: inline-block; font-size: 18px; color: #101010; } .full-version .btn-cart { width: 250px; margin-bottom: 20px; text-align: right; padding: 8px 5px; position: relative; } .full-version .btn-cart .cart-icon { position: absolute; left: 5px; } .full-version .btn-cart span.bolder-text { text-align: left; font-size: 20px; color: #fff; margin: 5px 0 0 50px; display: block; } .full-version .btn-cart span.overlined { position: absolute; right: 11px; top: 5px; font-size: 13px; color: #101010; margin: 0 10px 0 0; display: block; } .full-version .btn-cart span.red-text { display: block; position: absolute; right: 15px; bottom: 5px; font-size: 16px; color: #fff7cb; margin: 0; } .full-version a:hover { text-decoration: none; } .time-text p { font-size: 14px; color: #101010; margin-top: 10px; } .time-text .btn-outline-action { padding: 8px 10px; width: 150px; } .time-text .btn-outline-action a:hover, .time-text .btn-outline-action:hover { color: #fff; text-decoration: none; } .middle-heading { background: url(../img/giveaway/ribbon.webp) center no-repeat; min-height: 60px; } .middle-heading h2 { text-align: center; font-size: 26px; color: #fff; padding-top: 10px; } .middle-content { padding: 40px 0; } .middle-boxes { margin-top: 50px; padding: 0; } .one-box { background: rgba(255, 255, 255, .6); padding-top: 10px; padding-bottom: 20px; border-radius: 5px; border: 1px solid rgba(204, 204, 204, .6); margin: 10px; } .one-box h3 { font-size: 25px; color: #2b95ba; margin: 10px auto; } .one-box-image img { width: 140px; } .one-box p { font-size: 20px; color: #101010; margin-bottom: 15px; } .one-box ul { padding-left: 0; } .one-box ul li { list-style: url(../img/giveaway/list-arrow.png) inside; font-size: 16px; color: #101010; padding: 8px 0; border-bottom: 1px dashed #ccc; } .one-box ul li span { color: #2bab1e; } .one-box span { display: block; font-size: 16px; color: #fff; background: #e83b45 url(../img/giveaway/play-icon.webp) no-repeat left; border-radius: 3px; border: none; padding: 10px 20px 10px 45px !important; } .g-bottom { position: relative; z-index: 2; margin-top: -60px; padding: 100px 0; background: url(../img/giveaway/gotd2.webp) no-repeat center top; background-size: cover; } .more-tips { padding: 10px; border-radius: 3px; background: url(../img/giveaway/more-tips-bg.webp) center; } .more-tips h5 { font-size: 24px; color: #fff; margin-bottom: 10px; margin-top: 10px; } .more-tips ul { display: table; list-style-type: disc; color: #fff; padding-left: 20px; } .more-tips ul.right { padding-right: 20px; } .more-tips ul li a { display: block; padding: 3px 0; font-size: 16px; color: #fff; text-decoration: none; } .more-tips ul li a:hover { color: #00fff0; } .pull-right { float: right !important } .pull-left { float: left !important } .car-custom { margin-bottom: 50px !important; } .g-right-arrow img, .g-left-arrow img { margin-top: 40px; } @media screen and (max-width: 1200px) { .one-box-image img { width: 100%; } .one-box button { font-size: 13px; } } @media screen and (max-width: 1000px) { .full-version .btn-cart p.overlined { font-size: 10px; } .full-version .btn-cart p.red-text { font-size: 13px; } .full-version .btn-cart p.bolder-text { font-size: 16px; } } @media screen and (max-width: 993px) { .one-box-image, .box-description { width: 100%; text-align: center; } .one-box-image img { width: 150px; } .one-box ul li { text-align: left; } .g-right-arrow img, .g-left-arrow img { margin-top: 40px; } } @media screen and (max-width: 769px) { .top-heading h1 { font-size: 50px; } .gray-1, .gray-2, .gray-3, .vs { width: 100%; padding: 0; } .gray-1 { text-align: center; } .gray-2, .vs { text-align: center !important; } .line-dotted { display: none !important; } .vs img { width: 45px; margin: 20px auto; float: none; } .time-left p { float: left; display: block; margin-left: 10px; } .time-text button { margin-bottom: 10px; } .more-tips ul { float: none !important; } .top-btns { margin: 10px auto; } .gray-2 h3 { margin-top: 15px; } .gray-2 ul { display: table; text-align: left; margin-left: 15px; padding: 0 15px; } .gray-2 ul li { padding-top: 0; } .middle-content { padding: 0 0 40px 0; } .middle-boxes { margin: 0; } .g-bottom { padding: 40px 0; } } @media screen and (max-width: 580px) { .middle-heading { background: rgb(19, 116, 185) none repeat scroll 0% 0%; } .middle-boxes { padding: 0; } .one-box { margin: 10px auto; } .one-box-image img { width: 100px; } } @media screen and (max-width: 480px) { .g-right-arrow img, .g-left-arrow img { margin-top: 130px; } } @media screen and (max-width: 420px) { .top-btns button { font-size: 15px; } .top-btns button img { height: 25px; } .top-heading h1 { margin-bottom: 20px; font-size: 30px; } .top-btns button h2 { font-size: 13px; } .gray-2 button.v-btn { width: 200px; background-size: contain; } .gray-2 button.v-btn p span { font-size: 16px; } .gray-2 button.v-btn p { font-size: 10px; } } .modal-open { overflow: hidden; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal a { color: #259bd6; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; } .modal-header .close { margin-top: -2px; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 15px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .modal-footer .btn+.btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn+.btn { margin-left: -1px; } .modal-footer .btn-block+.btn-block { margin-left: 0; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } }