@font-face { font-family: 'TrajanProRegular'; src: url('img/TrajanProRegular.eot'); src: local('TrajanProRegular'), url('img/TrajanProRegular.woff') format('woff'), url('img/TrajanProRegular.ttf') format('truetype'); } @font-face { font-family: 'Gotham Light'; src: url("img/Gotham-Light.woff"); } body{ background: #04080d url(img/bg3.jpg) no-repeat top center; } body.modal-open{ position:relative; overflow: hidden !important; } body div{ z-index: 2; position: relative; } .text-center{ text-align: center; } .header{ margin-top: 30px; } .header .head-top{ font-size: 24px; color: #cecac3; font-family: 'TrajanProRegular' !important; margin-bottom: 10px; } .grandprize-value{ font-size: 28px; color: #cecac3; font-family: 'Gotham Light'; max-width: 328px; margin: auto; border: 1px solid #ccc; margin-top: 18px; padding: 7px 10px; } .spinner-wrapper{ margin: auto; width: 496px; height: 500px; } .spinner{ position: relative; width: 100%; } .btn-spin{ background: #ffe997; color: #000; height: 50px; border-radius: 6px; padding: 0px !important; border: 1px solid rgba(255, 184, 47, 0.55); max-width: 300px; width: 100%; font-size: 24px; text-transform: uppercase; font-family: "Gotham Light"; cursor: pointer; font-weight: bold; transition: transform 0.2s; } .btn-spin:hover{ transform: scale(1.1); } .btn-spin.active{ animation: glowing 1500ms infinite; } @keyframes glowing { 0% { box-shadow: 0px 0px 20px 0px rgba(255, 184, 47, 0.55); } 50% { box-shadow: 0px 0px 50px 10px rgba(255, 184, 47, 0.55); } 100% { box-shadow: 0px 0px 20px 0px rgba(255, 184, 47, 0.55); } } .spinner-col{ position: absolute; width: 123px; height: 501px; overflow: hidden; display: inline-block; } .spinner-col2{ left: 50%; transform: translateX(-50%); } .spinner-col3{ left: auto; right: 0px; } .spinner-col .img{ background-image: url(5e621fa513696_v.png); background-repeat: repeat-y; width: 100%; height: 14400px; background-size: contain; transition: margin-top 3s; } .spinner-col2 .img{ background-image: url(5e621fa4ebbc1_v.png); } .spinner-col2 .img{ margin-top: -311px; transition: margin-top 4s; } .spinner-col3 .img{ margin-top: -158px; transition: margin-top 5s; } .spinner-col1.spinned-1 .img{ margin-top: -4646px; } .spinner-col1.spinned-2 .img{ margin-top: -8978px; } .spinner-col1.spinned-3 .img{ margin-top: -12692px; } .spinner-col2.spinned-1 .img{ margin-top: -4954px; } .spinner-col2.spinned-2 .img{ margin-top: -8670px; } .spinner-col2.spinned-3 .img{ margin-top: -12537px; } .spinner-col3.spinned-1 .img{ margin-top: -4800px; } .spinner-col3.spinned-2 .img{ margin-top: -8670px; } .spinner-col3.spinned-3 .img{ margin-top: -12692px; } .spin-error{ font-family: "Gotham Light"; background: red; color: #fff; padding: 10px; width: 100%; max-width: 300px; margin: auto; margin-top: 20px; margin-bottom: 20px; transform: scale(0); transition: all 0.5s; } .spin-error.active{ transform: scale(1); } .spin-modal{ position: absolute; top: -100%; left: 50%; transform: translate(-50%, 0%); width: calc(100% - 40px); max-width: 500px; background: #000; color: #fff; z-index: 1072; transition: all 1s; animation: glowing2 1500ms infinite; } @keyframes glowing2 { 0% { box-shadow: 0px 0px 20px 0px rgba(255, 184, 47, 0.55); } 50% { box-shadow: 0px 0px 100px 10px rgba(255, 184, 47, 0.55); } 100% { box-shadow: 0px 0px 20px 0px rgba(255, 184, 47, 0.55); } } .spin-modal.open{ top: 50%; transform: translate(-50%, -50%); } .spin-modal-backdrop{ position: fixed; top:0px; left: 0px; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); opacity: 0; z-index: 1071; display:none; } .spin-modal-header{ padding: 10px 20px; background: #ffae15; color: #000; font-family: "TrajanProRegular"; text-align: center; font-size: 28px; } .spin-modal .content{ padding-left: 25px; padding-right: 25px; padding-top: 30px; padding-bottom: 30px; font-family: "Gotham Light"; line-height: 26px; text-align: left; } .finalButton{ background: #000; color: #fff; height: 50px; padding: 0px !important; border: 1px solid rgba(255, 184, 47, 0.55); max-width: 300px; width: 100%; font-size: 16px; text-transform: uppercase; font-family: "Gotham Light"; margin-top: 20px; cursor: pointer; display: block; margin: auto; line-height: 50px; text-decoration: none; margin-top: 20px; border-radius: 10px; animation: pump 1800ms infinite; transition: transform 0.5s; } .finalButton:hover{ box-shadow: 0px 0px 30px 0px rgba(255, 184, 47, 0.55); } @keyframes pump { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @media only screen and (max-width: 650px) { .grandprize-text{ max-width: 400px; width: calc(100% - 40px); } .header .head-top { font-size: 20px; } .grandprize-value { font-size: 24px; } .img-infos{ max-width: calc(100% - 40px); } .spinner-wrapper { max-width: 496px; width: 100%; height: 406px; } .spinner{ transform: scale(0.8); } } @media only screen and (max-width: 530px) { .spinner-wrapper { margin-top: -68px; margin-bottom: 38px; } .spinner{ transform: scale(1); } .spinner .spinner-col{ transform: scale(0.7); } .spinner .spinner-col2{ transform: translateX(-50%) scale(0.7); } }