html{
height:100%;
}
body {
background: url("/holiday/2015/images/bg.jpg") no-repeat center center fixed #57c8e1;
background-size:cover;
margin:0px;
padding:0px;
}
canvas {
}
.spinner {
width: 250px;
height: 252px;
background: url("/holiday/2015/images/snowflakeThree.png") no-repeat;
margin:20% auto 0 auto;
top:50%;
opacity: 1;
-webkit-animation-name: spin;
-webkit-animation-duration: 7000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 7000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 7000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 7000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.waiting {
margin:5% auto 0 auto;
width:30%;
}
.waiting img{
width:100%;
}
#load-screen {
opacity: 0.7;
width: 100%;
height: 100%;
opacity: 0.7;
background: center center #0078b1;
position:fixed;
background-size:cover;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.HappyHolidaysTwo {
display:none;
}
.stageOne{
position: absolute;
top: 20%;
transform: translateY(20%);
-webkit-transform: translateY(20%);
-ms-transform: translateY(20%);
opacity: 0;
width:100%;
z-index:1;
}
.treat {
margin:auto;
width:9%;
}
.treat img{
width:100%;
}
.hat {
margin:auto;
width:4%;
margin-top:20px;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 2s infinite;
animation: swing 2s infinite;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.hat img{
width:100%;
}
.clicky {
margin:auto;
width:6%;
margin-top:20px;
}
.clicky img{
width:100%;
}
#stageTwo{
display:none;
}
.stageTwoB{
display:block;
position:absolute;
z-index:1;
width:100%;
height:100%;
}
.bigHug {
width:28%;
margin: -15% 0 0 5%;
}
.bigHug img{
width:100%;
}
.grrFic {
width:16%;
margin:60% 0 0 78%;
}
.grrFic img{
width:100%;
}
.colorBlock {
display:none;
}
#two {
width:150%;
}
.danielPop {
bottom: -110%;
margin-left:-25%;
position: absolute;
}
#snow {
background:transparent;
position:absolute;
z-index:-1;
}
#stageThree{
display:none;
}
.stageThreeB{
opacity:0;
display:block;
position:absolute;
z-index:1;
width:100%;
height:100%;
}
.characters {
width:47%;
margin:2% auto;
}
.characters img {
width:100%;
}
.surprise {
width:25%;
margin:15% auto 0 auto;
}
.surprise img {
width:100%;
}
.grouping{
width:100%;
}
.groupingTwo {
display:none;
}
.boxOne {
width:553px;
height:235px;
background:url('/holiday/2015/images/Present-One.png') no-repeat;
float:left;
margin:0 0 0 5%;
}
.boxTwo {
width:553px;
height:235px;
background:url('/holiday/2015/images/Present-Two.png') no-repeat;
float:right;
margin:0 5% 0 0;
}
.boxOne.active,
.boxTwo.active{
-webkit-animation: playOne .03s steps(3) forwards;
-moz-animation: playOne .03s steps(3) forwards;
-ms-animation: playOne .03s steps(3) forwards;
-o-animation: playOne .03s steps(3) forwards;
animation: playOne .03s steps(3) forwards;
}
.copyRight{
width:95%;
font-size:8px;
margin-top:-10px;
padding:43px;
color:#beeeef;
text-align: center;
}
@-webkit-keyframes swing {
5% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
25% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
45% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
65% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
85% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
5% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
25% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
45% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
65% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
85% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -474px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -474px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -474px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -474px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -474px; }
}
@media only screen and (min-width: 2051px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-25%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 46% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.surprise {
width:30%;
margin:12% auto 0 auto;
}
.boxOne{
margin:0 0 0 22%;
}
.boxTwo{
margin:0 22% 0 0;
}
.copyRight{
width:73%;
margin:7px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 2050px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:140%;
z-index: 1;
}
.danielPop {
bottom: -110%;
margin-left:-20%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.surprise {
width:40%;
margin:17% auto 0 auto;
}
.boxOne{
margin:0 0 0 15%;
}
.boxTwo{
margin:0 15% 0 0;
}
.copyRight{
width:73%;
margin:20px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1600px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:120%;
z-index: 1;
}
.danielPop {
bottom: -85%;
margin-left:-5%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:60%;
}
.surprise {
width:50%;
margin:20% auto 0 auto;
}
.boxOne{
width:533px;
height:227px;
float:left;
background-size:100%;
margin:0 0 0 10%;
}
.boxTwo{
width:533px;
height:227px;
float:right;
background-size:100%;
margin:0 10% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
.copyRight{
width:95%;
margin:25px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1380px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -70%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:60%;
}
.surprise {
width:50%;
margin:24% auto 0 auto;
}
.boxOne{
width:443px;
height:188px;
float:left;
background-size:100%;
margin:0 0 0 6%;
}
.boxTwo{
width:443px;
height:188px;
float:right;
background-size:100%;
margin:0 6% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
.copyRight{
width:95%;
margin:25px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1025px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -59%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:30%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 50% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:80%;
}
.surprise {
width:50%;
margin:26% auto 0 auto;
}
.boxOne{
width:380px;
height:161px;
float:left;
background-size:100%;
margin:0;
}
.boxTwo{
width:380px;
height:161px;
float:right;
background-size:100%;
margin:0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
.copyRight{
width:95%;
margin:15px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 775px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -58%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:40%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 61% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:100%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:553px;
height:235px;
float:none;
margin:0 0 0 6%;
}
.boxTwo{
width:553px;
height:235px;
float:none;
margin:0 0 0 6%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -470px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -470px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -470px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -470px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -470px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 600px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -51%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:block;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 60% 0 0 0;
}
.characters {
width:100%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 500px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -63%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 109% 0 0 0;
}
.characters {
width:111%;
margin:5% 0 4% -7%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 400px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -58%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:60%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 115% 0 0 0;
position:absolute;
}
.characters {
width:111%;
margin:5% 0 4% -7%;
}
.surprise {
width:65%;
margin:4% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (min-width: 2051px) and (max-height: 1050px) {
.treat {
width: 6%;
}
.hat {
width: 3%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-23%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:10%;
}
.spinner {
margin:10% auto 0 auto;
}
.grrFic {
display:block;
margin:58% 0 0 78%;
width:13%;
}
.bigHug {
width:15%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:28%;
margin:2% auto 1%;
}
.surprise {
width:25%;
margin:14% auto 0 auto;
}
.boxOne{
margin:0 0 0 22%;
}
.boxTwo{
margin:0 22% 0 0;
}
.copyRight{
width:73%;
margin:7px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 2050px) and (max-height: 1050px) {
.treat {
width: 8%;
}
.hat {
width: 4%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-23%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.spinner {
margin:10% auto 0 auto;
}
.grrFic {
display:block;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:34%;
}
.surprise {
width:30%;
margin:18% auto 0 auto;
}
.boxOne{
margin:0 0 0 15%;
}
.boxTwo{
margin:0 15% 0 0;
}
.copyRight{
width:73%;
margin:10px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1600px) and (max-height: 1050px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:125%;
z-index: 1;
}
.danielPop {
bottom: -103%;
margin-left:-10%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.spinner {
margin:15% auto 0 auto;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:50%;
}
.surprise {
width:40%;
margin:20% auto 0 auto;
}
.boxOne{
width:533px;
height:227px;
float:left;
background-size:100%;
margin:0 0 0 10%;
}
.boxTwo{
width:533px;
height:227px;
float:right;
background-size:100%;
margin:0 10% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
.copyRight{
width:95%;
margin:10px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1380px) and (max-height: 1050px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:120%;
z-index: 1;
}
.danielPop {
bottom: -90%;
margin-left:-10%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:24%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:60%;
}
.surprise {
width:50%;
margin:23% auto 0 auto;
}
.boxOne{
width:443px;
height:188px;
float:left;
background-size:100%;
margin:0 0 0 6%;
}
.boxTwo{
width:443px;
height:188px;
float:right;
background-size:100%;
margin:0 6% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
.copyRight{
width:95%;
margin:-3px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1025px) and (max-height: 1050px) {
.treat {
width: 15%;
}
.hat {
width: 8%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -69%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:28%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 50% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:80%;
}
.surprise {
width:50%;
margin:26% auto 0 auto;
}
.boxOne{
width:380px;
height:161px;
float:left;
background-size:100%;
margin:0;
}
.boxTwo{
width:380px;
height:161px;
float:right;
background-size:100%;
margin:0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
.copyRight{
width:95%;
margin:15px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 775px) and (max-height: 1050px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -65%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:35%;
}
.grrFic {
display:block;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 61% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:90%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:450px;
height:191px;
float:none;
margin:0 0 0 15%;
}
.boxTwo{
width:450px;
height:191px;
float:none;
margin:0 0 0 15%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 600px) and (max-height: 1050px) {
.treat {
width: 30%;
}
.hat {
width: 15%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -58%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:block;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 60% 0 0 0;
}
.characters {
width:100%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:5px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 500px) and (max-height: 1050px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -73%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 109% 0 0 0;
}
.characters {
width:111%;
margin:5% 0 4% -7%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 400px) and (max-height: 1050px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -66%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:60%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 115% 0 0 0;
position:absolute;
}
.characters {
width:111%;
margin:5% 0 4% -7%;
}
.surprise {
width:65%;
margin:4% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (min-width: 2051px) and (max-height: 888px) {
.treat {
width: 8%;
}
.hat {
width: 4%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-25%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.spinner {
margin:7% auto 0 auto;
}
.grrFic {
display:block;
margin:53% 0 0 78%;
}
.colorBlock {
display: none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:25%;
margin:1% auto 1% auto;
}
.surprise {
width:23%;
margin:12% auto 0 auto;
}
.boxOne{
width:483px;
height:205px;
margin:0 0 0 22%;
background-size:100%;
}
.boxTwo{
width:483px;
height:205px;
margin:0 22% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
.copyRight{
width:73%;
margin:0px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 2050px) and (max-height: 888px) {
.treat {
width: 8%;
}
.hat {
width: 4%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-25%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.spinner {
margin:7% auto 0 auto;
}
.grrFic {
display:block;
margin:55% 0 0 78%;
}
.bigHug {
width:20%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:30%;
margin: 1% auto;
}
.surprise {
width: 25%;
margin: 15% auto 0 auto;
}
.boxOne{
width:483px;
height:205px;
margin:0 0 0 15%;
background-size:100%;
}
.boxTwo{
width:483px;
height:205px;
margin:0 15% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -410px; }
}
.copyRight{
width:73%;
margin: 1px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1600px) and (max-height: 888px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-25%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.spinner {
margin:10% auto 0 auto;
}
.grrFic {
display:block;
margin:63% 0 0 78%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:40%;
margin: 1% auto 1% auto;
}
.surprise {
width:32%;
margin:19% auto 0 auto;
}
.boxOne{
width:533px;
height:227px;
float:left;
background-size:100%;
margin:0 0 0 10%;
}
.boxTwo{
width:533px;
height:227px;
float:right;
background-size:100%;
margin:0 10% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -454px; }
}
.copyRight{
width:95%;
margin:4px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1380px) and (max-height: 888px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:140%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-20%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:25%;
}
.grrFic {
display:block;
margin:70% 0 0 78%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:50%;
}
.surprise {
width:50%;
margin:17% auto 0 auto;
}
.boxOne{
width:443px;
height:188px;
float:left;
background-size:100%;
margin:0 0 0 6%;
}
.boxTwo{
width:443px;
height:188px;
float:right;
background-size:100%;
margin:0 6% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -376px; }
}
.copyRight{
width:95%;
margin:25px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1025px) and (max-height: 888px) {
.treat {
width: 15%;
}
.hat {
width: 8%;
}
#two {
width:120%;
z-index: 1;
}
.danielPop {
bottom: -122%;
margin-left:-10%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:30%;
}
.grrFic {
display:block;
margin:93% 0 0 78%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:70%;
}
.surprise {
width:50%;
margin:24% auto 0 auto;
}
.boxOne{
width:380px;
height:161px;
float:left;
background-size:100%;
margin:0;
}
.boxTwo{
width:380px;
height:161px;
float:right;
background-size:100%;
margin:0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
.copyRight{
width:95%;
margin:4px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 775px) and (max-height: 888px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -70%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:40%;
}
.grrFic {
display:block;
margin:75% 0 0 78%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 47% 0 0 0;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:80%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:450px;
height:191px;
float:none;
margin:0 0 0 15%;
}
.boxTwo{
width:450px;
height:191px;
float:none;
margin:0 0 0 15%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -382px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 600px) and (max-height: 888px) {
.treat {
width: 30%;
}
.hat {
width: 15%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -59%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:block;
margin:70% 0 0 78%;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 50% 0 0 0;
}
.characters {
width:90%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:5px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 500px) and (max-height: 888px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -80%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:55%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 109% 0 0 0;
}
.characters {
width:90%;
margin:2% auto;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:485px;
height:206px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -412px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 400px) and (max-height: 888px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -74%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:60%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 115% 0 0 0;
position:absolute;
}
.characters {
width:111%;
margin:2% 0 2% -7%;
}
.surprise {
width:65%;
margin:4% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:100%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (min-width: 2051px) and (max-height: 715px) {
.treat {
width: 5%;
}
.hat {
width: 3%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:3% auto 0 auto;
width:15%;
}
.bigHug {
width:15%;
margin: -18% 0 0 5%;
}
.grrFic {
display:block;
width:10%;
margin:52% 0 0 78%;
}
.colorBlock {
display: none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:24%;
margin:1% auto 1% auto;
}
.surprise {
width:18%;
margin:12% auto 0 auto;
}
.boxOne{
width:370px;
height:157px;
margin:0 0 0 29%;
background-size:100%;
}
.boxTwo{
width:370px;
height:157px;
margin:0 29% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 2050px) and (max-height: 715px) {
.treat {
width: 8%;
}
.hat {
width: 4%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.bigHug {
width:20%;
margin: -18% 0 0 5%;
}
.grrFic {
display:block;
margin:50% 0 0 78%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:30%;
margin:1% auto 1% auto;
}
.surprise {
width: 23%;
margin: 11% auto 0 auto;
}
.boxOne{
width:370px;
height:157px;
margin:0 0 0 22%;
background-size:100%;
}
.boxTwo{
width:370px;
height:157px;
margin:0 22% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1600px) and (max-height: 715px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.bigHug {
width: 25%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:50% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:38%;
margin: 1% auto 1% auto;
}
.surprise {
width:28%;
margin:14% auto 0 auto;
}
.boxOne{
width:383px;
height:163px;
float:left;
background-size:100%;
margin:0 0 0 18%;
}
.boxTwo{
width:383px;
height:163px;
float:right;
background-size:100%;
margin:0 18% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1380px) and (max-height: 715px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:22%;
}
.bigHug {
width: 25%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:57% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:43%;
}
.surprise {
width:35%;
margin:17% auto 0 auto;
}
.boxOne{
width:353px;
height:150px;
float:left;
background-size:100%;
margin:0 0 0 10%;
}
.boxTwo{
width:353px;
height:150px;
float:right;
background-size:100%;
margin:0 10% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1025px) and (max-height: 715px) {
.treat {
width: 15%;
}
.hat {
width: 8%;
}
#two {
width:140%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-20%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:30%;
}
.bigHug {
width: 30%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:70% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:60%;
}
.surprise {
width:40%;
margin:24% auto 0 auto;
}
.boxOne{
width:380px;
height:161px;
float:left;
background-size:100%;
margin:0;
}
.boxTwo{
width:380px;
height:161px;
float:right;
background-size:100%;
margin:0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 775px) and (max-height: 715px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:120%;
z-index: 1;
}
.danielPop {
bottom: -123%;
margin-left:-10%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:38%;
}
.bigHug {
width:40%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:25%;
margin:80% 0 0 73%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:80%;
margin:1% auto 2% auto;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 113px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 113px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 600px) and (max-height: 715px) {
.treat {
width: 25%;
}
.hat {
width: 15%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -115%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:45%;
}
.bigHug {
width:40%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:25%;
margin:108% 0 0 73%;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.colorBlock {
display:none;
}
.characters {
width:76%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 500px) and (max-height: 715px) {
.treat {
width: 30%;
}
.hat {
width: 15%;
}
.bigHug {
width: 60%;
margin: -15% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -86%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 107% 0 0 0;
}
.characters {
width:90%;
margin:2% auto;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:98%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 400px) and (max-height: 715px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -85%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:60%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 115% 0 0 0;
position:absolute;
}
.characters {
width:111%;
margin:2% 0 2% -7%;
}
.surprise {
width:65%;
margin:4% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:98%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (min-width: 2051px) and (max-height: 700px) {
.treat {
width: 5%;
}
.hat {
width: 3%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:3% auto 0 auto;
width:15%;
}
.bigHug {
width:15%;
margin: -18% 0 0 5%;
}
.grrFic {
display:block;
width:10%;
margin:52% 0 0 78%;
}
.colorBlock {
display: none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:24%;
margin:1% auto 1% auto;
}
.surprise {
width:18%;
margin:12% auto 0 auto;
}
.boxOne{
width:370px;
height:157px;
margin:0 0 0 29%;
background-size:100%;
}
.boxTwo{
width:370px;
height:157px;
margin:0 29% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 2050px) and (max-height: 700px) {
.treat {
width: 8%;
}
.hat {
width: 4%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:15%;
}
.bigHug {
width:20%;
margin: -18% 0 0 5%;
}
.grrFic {
display:block;
margin:50% 0 0 78%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:30%;
margin:1% auto 1% auto;
}
.surprise {
width: 23%;
margin: 11% auto 0 auto;
}
.boxOne{
width:370px;
height:157px;
margin:0 0 0 22%;
background-size:100%;
}
.boxTwo{
width:370px;
height:157px;
margin:0 22% 0 0;
background-size:100%;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -314px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1600px) and (max-height: 700px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:20%;
}
.bigHug {
width: 25%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:50% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:38%;
margin: 1% auto 1% auto;
}
.surprise {
width:28%;
margin:14% auto 0 auto;
}
.boxOne{
width:383px;
height:163px;
float:left;
background-size:100%;
margin:0 0 0 18%;
}
.boxTwo{
width:383px;
height:163px;
float:right;
background-size:100%;
margin:0 18% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -326px; }
}
.copyRight{
width:80%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1380px) and (max-height: 700px) {
.treat {
width: 10%;
}
.hat {
width: 6%;
}
#two {
width:150%;
z-index: 1;
}
.danielPop {
bottom: -132%;
margin-left:-22%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:22%;
}
.bigHug {
width: 25%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:57% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:43%;
}
.surprise {
width:35%;
margin:17% auto 0 auto;
}
.boxOne{
width:353px;
height:150px;
float:left;
background-size:100%;
margin:0 0 0 10%;
}
.boxTwo{
width:353px;
height:150px;
float:right;
background-size:100%;
margin:0 10% 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -300px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 1025px) and (max-height: 700px) {
.treat {
width: 15%;
}
.hat {
width: 8%;
}
#two {
width:140%;
z-index: 1;
}
.danielPop {
bottom: -130%;
margin-left:-20%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:30%;
}
.bigHug {
width: 30%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:20%;
margin:70% 0 0 75%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:60%;
}
.surprise {
width:40%;
margin:24% auto 0 auto;
}
.boxOne{
width:380px;
height:161px;
float:left;
background-size:100%;
margin:0;
}
.boxTwo{
width:380px;
height:161px;
float:right;
background-size:100%;
margin:0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -322px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 775px) and (max-height: 700px) {
.treat {
width: 20%;
}
.hat {
width: 10%;
}
#two {
width:120%;
z-index: 1;
}
.danielPop {
bottom: -123%;
margin-left:-10%;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:38%;
}
.bigHug {
width:40%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:25%;
margin:80% 0 0 73%;
}
.colorBlock {
display:none;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.characters {
width:80%;
margin:1% auto 2% auto;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 113px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 113px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 600px) and (max-height: 700px) {
.treat {
width: 25%;
}
.hat {
width: 15%;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -115%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:45%;
}
.bigHug {
width:40%;
margin: -15% 0 0 5%;
}
.grrFic {
display:block;
width:25%;
margin:108% 0 0 73%;
}
.pbsSingle {
display:none;
}
.grrSingle {
display:none;
}
.colorBlock {
display:none;
}
.characters {
width:76%;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:95%;
margin:0 auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 500px) and (max-height: 700px) {
.treat {
width: 30%;
}
.hat {
width: 15%;
}
.bigHug {
width: 60%;
margin: -15% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -86%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:50%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
position:absolute;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 107% 0 0 0;
}
.characters {
width:90%;
margin:2% auto;
}
.surprise {
width:65%;
margin:2% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 62px;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:98%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen and (max-width: 400px) and (max-height: 700px) {
.treat {
width: 35%;
}
.hat {
width: 20%;
}
.bigHug {
width: 60%;
margin: -5% auto 0 auto;
}
#two {
width:100%;
z-index: 1;
}
.danielPop {
bottom: -85%;
margin-left:auto;
position: absolute;
}
.waiting {
margin:5% auto 0 auto;
width:60%;
}
.grrFic {
display:none;
}
.pbsSingle {
display:block;
width:40%;
margin: -23% 0 0 7%;
float:left;
}
.pbsSingle img{
width:100%;
}
.grrSingle {
display:block;
width:35%;
margin: 9% 5% 0 78%;
float:right;
}
.grrSingle img{
width:100%;
}
.colorBlock {
z-index:2;
display:block;
background:#3cabd0;
width:100%;
height:100%;
margin: 115% 0 0 0;
position:absolute;
}
.characters {
width:111%;
margin:2% 0 2% -7%;
}
.surprise {
width:65%;
margin:4% auto 0 auto;
}
.boxOne{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
.boxTwo{
width:385px;
height:164px;
float:none;
margin:0 0 0 0;
}
@-webkit-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-moz-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-ms-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@-o-keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
@keyframes playOne {
from { background-position: 0 0; }
to { background-position: 0 -328px; }
}
.copyRight{
width:98%;
margin:-9px auto 0 auto;
padding:5px;
}
}
@media only screen
and (min-device-width : 360px)
and (max-device-height : 640px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.clicky {
display:none;
}
.bigHug {
margin: -15% auto 0 auto;
}
.danielPop {
bottom: -77%;
}
.colorBlock {
margin: 105% 0 0 0;
}
}
@media only screen
and (min-device-width : 640px)
and (max-device-height : 360px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
.clicky {
display:none;
}
.treat {
margin:-8% auto 0 auto;
width:20%;
}
.hat {
width:10%;
}
.bigHug {
width:28%;
margin: -15% 0 0 5%;
}
.grrFic {
width:16%;
margin:54% 0 0 78%;
}
.danielPop {
bottom: -105%;
}
.copyRight{
width:90%;
font-size:5px;
margin-top:35px;
padding:43px;
}
.characters {
width:35%;
margin: .5% auto 0;
}
}
@media screen and (min-width:0\0) {
.danielPop {
height:150%;
}
.boxLeft, .boxOne {
background:url('/holiday/2015/images/IE-ButtonOne.png') no-repeat;
background-size:100%;
}
.boxRight, .boxTwo {
background:url('/holiday/2015/images/IE-ButtonTwo.png') no-repeat;
background-size:100%;
}
.boxOne.active,
.boxTwo.active{
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
}