/** * The following styles are for our example message. Change these as desired. */ .custom-message-container { display: table; height: 50%; width: 100%; text-align: center; } #custom-message-text { color: #3A3B3F; font-family: "Source Sans Pro", Arial, "Helvetica Neue", Helvetica,sans-serif; font-size: 22px; font-weight: 400; line-height: 28px; margin: 2px auto; display: table-cell; vertical-align: middle; } /** * The following styles are for Akamai's default Crypto Challenge spinner. * These styles can be removed if you choose to remove/hide the spinner. */ #sec-if-cpt-container .timer-container { display: none; } .bm-processing { font-size: 10px; width: 75px; height: 75px; border-radius: 50%; background: #079ccd; background: -moz-linear-gradient(left, #079ccd 20%, rgba(0,255,255,0) 50%); background: -webkit-linear-gradient(left, #079ccd 20%, rgba(0,255,255,0) 50%); background: -o-linear-gradient(left, #079ccd 20%, rgba(0,255,255,0) 50%); background: -ms-linear-gradient(left, #079ccd 20%, rgba(0,255,255,0) 50%); background: linear-gradient(to right, #079ccd 20%, rgba(0,255,255,0) 50%); position: absolute; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .bm-processing:before { width: 50%; height: 50%; background: #079ccd; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .bm-processing:after { background: #fff; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .timer-container { color: #3a3b3f; font-family: "Source Sans Pro", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 22px; font-weight: 400; width: 75px; height: 75px; line-height: 75px; text-align: center; position: absolute; } .spinner-time-parent { position: relative; margin: 2px auto; width: 75px; height: 75px; } #sec-if-cpt-container .timer-container { display: block !important; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }