/* The Modal (background) */ .tableskate-tableskaters-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 15%; padding-bottom: 5%; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(255, 255, 255, 0.95); /* Black w/ opacity */ text-align: center; } .tableskaters-loader-position { display: block; margin-left: auto; margin-right: auto; width: 50%; } .tableskaters-loader { background-image: url("data:image/svg+xml;utf8,"); width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; color: red; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tableskaters-loading { padding-top: 2px; text-align: center; font-size: 50px; text-shadow: 2px 2px white; } #shipping-loader{width: 50px; height: 50px; border: 5px solid #ccc; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Modal Content */ .tableskaters-modal-on-second-level-content { position: relative; margin-top: 0; margin-left: 50%; padding: 0; width: 25%; -webkit-animation-name: animatetableskaterbrands; -webkit-animation-duration: 0.4s; animation-name: animatetableskaterbrands; animation-duration: 0.4s position: absolute; left: 40px; transition: 0.3s; /*background-color: red;*/ } /* Add Animation */ @-webkit-keyframes animatetableskaterbrands { from { left: -300px; opacity: 0 } to { left: 0; opacity: 1 } } @keyframes animatetableskaterbrands { from { left: -300px; opacity: 0 } to { left: 0; opacity: 1 } } .tableskaters-modal-on-second-level-content:hover { left: 0; } #biggerTableskaterBrands { position: fixed; top: 20%; left: 2%; } .under-the-bigger-brands { position: fixed; top: 70%; left: 20%; } #goToTableskaterDotCom { font-size: 18px; color: blue; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); border: none; cursor: pointer; } #tableskaterBrands { display: none; } #tablefable { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; width: 300px; } #tsr1 { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; width: 300px; } #scurrymonster { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; width: 300px; } #racered { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; width: 300px; } #scurrycraft { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; width: 300px; } .tableskater-brand-size { display: block; width: 100%; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 960px) { #biggerTableskaterBrands { display: none; } .under-the-bigger-brands { display: none; } #tableskaterBrands { /*background-color: red;*/ margin-bottom: 300px; } .tableskaters-modal-on-second-level-content { margin-left: 18%; padding-top: 10%; } .tableskater-brand-size { display: block; width: 240%; margin-left: -30px; } } #idBasedtableskatingEquipmentModalClose { position: absolute; top:5%; right: 7%; font-size: 50px; }