.ag-format-container {
width: 1142px;
margin: 0 auto;
}
.js-ag-hide {
display: none;
}
.ag-page-404 {
padding: 0;
background: url(../images/toaster-bg.png)no-repeat 50% 100%;}
.ag-canvas-404_img {
display: none;
}
.ag-canvas-404 {
opacity: .7;
filter: alpha(opacity=70);
z-index: -1;
position: absolute;
left: 0;
top: 0;
}
.ag-toaster-wrap {
display: table;
margin: 0 auto;
padding: 200px 0 0;
position: relative;
}
.ag-toaster {
width: 340px;
height: 217px;
position: relative;
}
.ag-toaster_toast-handler {
width: 155px;
height: 200px;
margin-left: 85px;
padding-top: 60px;
overflow: hidden;
z-index: 1;
position: absolute;
top: -150px;
}
.ag-toaster_shadow {
width: 165px;
height: 9px;
background: -340px -195px no-repeat;
position: absolute;
left: 0;
bottom: 91px;
}
.ag-toaster_toast {
width: 159px;
height: 171px;
background: url(../images/sprite-toaster.png) -340px 0 no-repeat;
z-index: -1;
position: relative;
}
.ag-toaster_front {
width: 340px;
height: 217px;
background: url(../images/sprite-toaster.png) 0 -18px no-repeat;
z-index: 2;
position: relative;
}
.ag-toaster_lever {
width: 22px;
height: 21px;
background: url(../images/sprite-toaster.png) -340px -171px no-repeat;
position: absolute;
top: 75px;
right: 12px;
}
.ag-toaster_back {
width: 340px;
height: 18px;
background: url(../images/sprite-toaster.png) no-repeat;
z-index: -3;
position: relative;
}
@-webkit-keyframes an-bounce-in-up {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes an-bounce-in-up {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-moz-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes an-bounce-in-up {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-ms-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes an-bounce-in-up {
0% {
opacity: 0;
-o-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-o-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes an-bounce-in-up {
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translateY(2000px);
-moz-transform: translateY(2000px);
-ms-transform: translateY(2000px);
-o-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
.js-ag-animated {
-webkit-animation-duration: .6s;
-moz-animation-duration: .6s;
-ms-animation-duration: .6s;
-o-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.js-ag-bounce-in-up {
-webkit-animation-name: an-bounce-in-up;
-moz-animation-name: an-bounce-in-up;
-ms-animation-name: an-bounce-in-up;
-o-animation-name: an-bounce-in-up;
animation-name: an-bounce-in-up;
}
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
@media only screen and (max-width: 639px) {
}
@media only screen and (max-width: 479px) {
}
@media (min-width: 768px) and (max-width: 979px) {
.ag-format-container {
width: 750px;
}
}
@media (min-width: 980px) and (max-width: 1161px) {
.ag-format-container {
width: 960px;
}
}