#boxzilla-overlay,.boxzilla-overlay { position: fixed; background: rgba(0, 0, 0, 0.65 ); width: 100%; height: 100%; left: 0; top: 0; z-index: 10000; } .boxzilla-center-container { position: fixed; top: 0; left: 0; right: 0; height: 0; text-align: center; z-index: 11000; line-height: 0; } .boxzilla-center-container .boxzilla { display: inline-block; text-align: left; position: relative; line-height: normal; } .boxzilla { position: fixed; z-index: 12000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: white; padding: 25px; } .boxzilla.boxzilla-top-left { top: 0; left: 0; } .boxzilla.boxzilla-top-right { top: 0; right: 0; } .boxzilla.boxzilla-bottom-left { bottom: 0; left: 0; } .boxzilla.boxzilla-bottom-right { bottom: 0; right: 0; } .boxzilla-content > *:first-child { margin-top: 0; padding-top: 0; } .boxzilla-content > *:last-child { margin-bottom: 0; padding-bottom: 0; } .boxzilla-close-icon { position: absolute; right: 0; top: 0; text-align: center; padding: 6px; cursor: pointer; font-size: 28px; font-weight: bold; line-height: 20px; color: #000; opacity: .5; } .boxzilla-close-icon:hover, .boxzilla-close-icon:focus { opacity: .8; } .boxzilla-wobble { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: boxzilla-wobble; } @keyframes boxzilla-wobble { from { transform: none; } 15% { transform: translate3d(-21%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(18%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(6%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: none; } }