.popupS-layer{ -webkit-box-shadow: 0 0 20px rgba(0,0,0,.25); -moz-box-shadow: 0 0 20px rgba(0,0,0,.25); box-shadow: 0 0 20px rgba(0,0,0,.25); position: relative; border-radius:6px; background-color: #FFF; margin:20px; z-index:1000; } .popupS-resetFocus { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .popupS-close{ position: absolute; top: 0; right: 0; line-height: 40px; font-size: 32px; text-align: center; font-weight: 700; width: 32px; height: 40px; cursor: pointer; z-index:1020; } .popupS-title{ position: absolute; width: 100%; line-height: 40px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; z-index:1001; } .popupS-title + .popupS-content{ padding-bottom:20px; } .popupS-content{ max-width:700px; padding:40px; border-radius:6px; } .popupS-content img{ max-width:100%; height:auto; } .popupS-layer .btn{ float:right; } /* * Default Animation * very Important */ .popupS-layer{ -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; opacity: 0; } .popupS-overlay{ -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; background:rgb(0,0,0); opacity: 0; } .popupS-layer.popupS-open{ opacity: 1; } .popupS-open>.popupS-overlay{ opacity:.6; } /* Loader */ @-moz-keyframes spinner { to {-moz-transform: rotate(360deg); transform: rotate(360deg);} } @-o-keyframes spinner { to {-o-transform: rotate(360deg); transform: rotate(360deg);} } @-webkit-keyframes spinner { to {-webkit-transform: rotate(360deg);} } @keyframes spinner { to {transform: rotate(360deg);} } @-moz-keyframes pulsate { 0% { -moz-transform:scale(.1); transform:scale(.1); opacity: 0.0; } 50% { opacity:1; } 100% { -moz-transform:scale(1.2); transform:scale(1.2); opacity:0; } } @-o-keyframes pulsate { 0% { -o-transform:scale(.1); transform:scale(.1); opacity: 0.0; } 50% { opacity:1; } 100% { -o-transform:scale(1.2); transform:scale(1.2); opacity:0; } } @-webkit-keyframes pulsate { 0% { transform:scale(.1); opacity: 0.0; } 50% { opacity:1; } 100% { transform:scale(1.2); opacity:0; } } @keyframes pulsate { 0% { transform:scale(.1); opacity: 0.0; } 50% { opacity:1; } 100% { transform:scale(1.2); opacity:0; } } .popupS-loading{ width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 30px; } .popupS-loading.pulser{ border: 3px solid #1caff6; opacity: 0; -moz-animation: pulsate 1s ease-out infinite; -o-animation: pulsate 1s ease-out infinite; -webkit-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .popupS-loading.spinner{ border-top: 3px solid #1caff6; border-right: 3px solid transparent; -moz-animation: spinner .6s linear infinite; -o-animation: spinner .6s linear infinite; -webkit-animation: spinner .6s linear infinite; animation: spinner .6s linear infinite; }