You are on page 1of 4

/*!

* avgrund 0.1
* http://lab.hakim.se/avgrund
* MIT licensed
*
* Created by Hakim El Hattab, http://hakim.se
*/

.avgrund-active body {
-webkit-transform: scale( 0.9 );
-moz-transform: scale( 0.9 );
-ms-transform: scale( 0.9 );
-o-transform: scale( 0.9 );
transform: scale( 0.9 );
background: #fff;
}

.avgrund-cover {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
background: #FFF;
}
.avgrund-active .avgrund-cover {
visibility: visible;
opacity: 1;
background: #fff;
}

.avgrund-contents {
position: fixed;
padding: 10px;
max-width: 700px;
height: 100%;
margin: auto;
background: #fff;
}
.avgrund-active .avgrund-contents {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
background: #fff;
}
.no-blur.avgrund-active .avgrund-contents {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
background: #fff;
}
.avgrund-popup {
position: relative;
width: 700px;
height: 500px;
left: 40%;
top: 30%;

visibility: hidden;
opacity: 0;
z-index: 2;
padding: 20px;

background: #fff;
box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
border-radius: 3px;

-webkit-transform: scale( 0.8 );


-moz-transform: scale( 0.8 );
-ms-transform: scale( 0.8 );
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
.avgrund-popup2 {
position: absolute;
width: 700px;
height: 500px;
left: -30%;
top: -10%;

visibility: hidden;
opacity: 0;
z-index: 2;
padding: 20px;

background: #fff;
box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
border-radius: 3px;

-webkit-transform: scale( 0.8 );


-moz-transform: scale( 0.8 );
-ms-transform: scale( 0.8 );
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
.avgrund-popup3 {
position: absolute;
width: 700px;
height: 500px;
left: 40%;
top: -10%;

visibility: hidden;
opacity: 0;
z-index: 2;
padding: 20px;

background: #fff;
box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
border-radius: 3px;
-webkit-transform: scale( 0.8 );
-moz-transform: scale( 0.8 );
-ms-transform: scale( 0.8 );
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
.avgrund-popup4 {
position: fixed;
width: 300px;
height: 300px;
left: 30%;
top: inherit;

visibility: hidden;
opacity: 0;
z-index: 2;
padding: 20px;

background: #fff;
box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
border-radius: 15px;

-webkit-transform: scale( 0.8 );


-moz-transform: scale( 0.8 );
-ms-transform: scale( 0.8 );
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
.avgrund-popup5 {
position: absolute;
width: 300px;
height: 300px;
left: 40%;
top: -10%;

visibility: hidden;
opacity: 0;
z-index: 2;
padding: 20px;

background: #fff;
box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
border-radius: 15px;

-webkit-transform: scale( 0.8 );


-moz-transform: scale( 0.8 );
-ms-transform: scale( 0.8 );
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
.avgrund-active .avgrund-popup-animate {
visibility: visible;
opacity: 1;

-webkit-transform: scale( 1.1 );


-moz-transform: scale( 1.1 );
-ms-transform: scale( 1.1 );
-o-transform: scale( 1.1 );
transform: scale( 1.1 );
background: #fff;
}
.avgrund-popup.stack {
-webkit-transform: scale( 1.5 );
-moz-transform: scale( 1.5 );
-ms-transform: scale( 1.5 );
-o-transform: scale( 1.5 );
transform: scale( 1.5 );
background: #fff;
}
.avgrund-active .avgrund-popup.stack {
-webkit-transform: scale( 1.1 );
-moz-transform: scale( 1.1 );
-ms-transform: scale( 1.1 );
-o-transform: scale( 1.1 );
transform: scale( 1.1 );
background: #fff;
}

.avgrund-ready body,
.avgrund-ready .avgrund-contents,
.avgrund-ready .avgrund-popup,
.avgrund-ready .avgrund-cover {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background: #fff;

-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);


-moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
-ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.avgrund-ready .avgrund-popup.no-transition {
background: #fff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

You might also like