/* The Modal (background) */ .tableskate-tables-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* 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; } .tableskate-tables-modal-close:hover { -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(0.9); /* Safari 3-8 */ transform: scale(0.9); } #dandyBoardClickHint { text-align: left; margin-left: 10%; } #dandyBoard { width: 12%; height: 27%; /*background-image: url('tableskate.png');*/ /* background-image: url("data:image/svg+xml;utf8,"); */ background-repeat: no-repeat; background-size: 100%; background-color: rgba(0, 0, 0, 0); margin: 6%; position: absolute; font-weight: bold; font-size: 20px; padding: 10px; animation: animated_div 5s infinite; -moz-animation: animated_div 5s infinite; -webkit-animation: animated_div 5s infinite; -o-animation: animated_div 5s infinite; border-radius: 5px; -webkit-border-radius: 5px; cursor: pointer; } @keyframes animated_div { 0% { -webkit-transform: rotate(0deg); left: 0%; } 25% { -webkit-transform: rotate(14deg); left: 0%; } 43% { -webkit-transform: rotate(-17deg); left: 50%; } 70% { -webkit-transform: rotate(2deg); left: 50%; } 100% { -webkit-transform: rotate(-360deg); left: 0%; } } @-webkit-keyframes animated_div { 0% { -webkit-transform: rotate(0deg); left: 0%; } 25% { -webkit-transform: rotate(14deg); left: 0%; } 43% { -webkit-transform: rotate(-17deg); left: 50%; } 70% { -webkit-transform: rotate(2deg); left: 50%; } 100% { -webkit-transform: rotate(-360deg); left: 0%; } } @-o-keyframes animated_div { 0% { -webkit-transform: rotate(0deg); left: 0%; } 25% { -webkit-transform: rotate(14deg); left: 0%; } 43% { -webkit-transform: rotate(-17deg); left: 50%; } 70% { -webkit-transform: rotate(2deg); left: 50%; } 100% { -webkit-transform: rotate(-360deg); left: 0%; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 300px) and (orientation:portrait) { #dandyBoard { position: relative; margin-left: 10%; margin-bottom: -30%; /*margin-left: 90px;*/ /*margin-bottom: -90px;*/ z-index: 1; } #tableskate-hand-id{ margin-left: -300%; } } #dandyBridge { display: none; position: absolute; width: 20%; z-index: 3; } #dandyBridge:hover { width: 19.7%; } #dandyops { display: none; position: absolute; width: 20%; z-index: 3; } #dandyops:hover { width: 19.7%; } #dandydrops { display: none; position: absolute; width: 20%; z-index: 3; } #dandydrops:hover { width: 19.7%; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 20%; padding: 10px; height: 100px; /* Should be removed. Only for demonstration */ background-color: grey; border: 2px solid #000; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } #tableskatingTable { position: absolute; width: 100%; height: 10%; margin-top: 20%; } #redTape { background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */ border: none; cursor: pointer; } #idBasedtableskatingEquipmentModalClose { position: absolute; top:5%; right: 7%; font-size: 50px; } #table-legs { width:10%; } #table-legs-hidden { visibility: hidden; }