.loading_waiter{background: rgba(00,00,00, .6); position: absolute;z-index: 10000000000;text-align: center;top:0px;left:0px}

.loading_waiter a{ position: absolute; top: 110px; right: 20px; color: white; text-shadow: none; font-size: 20px; font-family: sans-serif;}

.loadingcont {
    position: fixed;
    top: 42%;
    left: 50%;
    margin: -14px 0 0 -38px;
    padding: 10px;
    /*background: rgba(20, 20, 20, 0.9);*/
  
  /*  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
 /* 
    -webkit-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
    -ms-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
    -o-box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 5px #000, 0 1px 1px rgba(255, 255, 255, 0.1);*/
}

.loading-dot {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: white;
  
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius:50%;
  
    opacity: 0;
  
    -webkit-box-shadow: 0 0 2px black;
    -moz-box-shadow: 0 0 2px black;
    -ms-box-shadow: 0 0 2px black;
    -o-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
  
    -webkit-animation: loadingFade 1s infinite;
    -moz-animation: loadingFade 1s infinite;
    animation: loadingFade 1s infinite;
}

.loading-dot:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

.loading-dot:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.loading-dot:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loading-dot:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

@-webkit-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@-moz-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}



/* ---------------------------------------------------------------------------------*/
div.spinner {position: relative; width: 54px; height: 54px; display: inline-block; } 

div.spinner div {width: 12%; height: 26%; background: #000; position: absolute; left: 44.5%; top: 37%; opacity: 0; -webkit-animation: fade 1s linear infinite; -webkit-border-radius: 50px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2); }

div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}

@-webkit-keyframes fade {from {opacity: 1;} to {opacity: 0.25;}}











/*FACEBOOOK*/

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0%   { -webkit-transform:scale(1) ; opacity:1 }
    60% {  opacity: 0 }
    100% { -webkit-transform:scale(19); opacity: 0 }
}


@-webkit-keyframes moving_clouds_left {
    0%   {  -webkit-transform: translateX(0%); }
    100% {  -webkit-transform: translateX(400px); }
}
@-webkit-keyframes moving_clouds_right {
    0%   {  -webkit-transform: translateX(0); }
    100% {  -webkit-transform: translateX(-400px); }
}

@-webkit-keyframes jiggle {
  0%   { -webkit-transform:   translateX(-1px)}
  100% { -webkit-transform:   translateX(1px); }
}

#loginWithFBBanner{background: rgba(0,0,0,1);position: absolute;width: 100%;top: 0px;bottom: 0px;z-index: 100000000;}
#facebook{
}
#facebook h2{text-align: center;font-size: 25px;text-shadow: 0px -1px 0px #000;color: white;padding-top: 1px;padding: 1px 20px;}

#facebook .facebook_card:after {
content: "";
position: absolute;
height: 1px;
width: 86%;
background: white;
background: -moz-linear-gradient(left, #1F6EE6, #357BE4 5%, white 20%, #4183FA 70%);
background: -ms-linear-gradient(left, #1F6EE6, #357BE4 5%, white 20%, #4183FA 70%);
background: -o-linear-gradient(left, #1F6EE6, #357BE4 5%, white 20%, #4183FA 70%);
background: -webkit-linear-gradient(left, #1F6EE6, #357BE4 5%, white 20%, #4183FA 70%);
top: 0;
left: 5%;
}

#facebook .facebook_card:before{
content: "";
position: absolute;
width: 38px;
height: 1px;
background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent);
background: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent);
background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), to(transparent));
background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent);
background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent);
top: -1px;
left: 15%;
}


#facebook .facebook_card{
    width: 94%;
    border-radius: 10px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2),inset 0px 2px 0px rgba(255, 255, 255, 0.2),0px 3px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;

background: rgb(96,141,186);
background: -moz-radial-gradient(center, ellipse cover,  rgba(96,141,186,1) 0%, rgba(70,87,163,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(96,141,186,1)), color-stop(100%,rgba(70,87,163,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(96,141,186,1) 0%,rgba(70,87,163,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(96,141,186,1) 0%,rgba(70,87,163,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(96,141,186,1) 0%,rgba(70,87,163,1) 100%);
background: radial-gradient(ellipse at center,  rgba(96,141,186,1) 0%,rgba(70,87,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608dba', endColorstr='#4657a3',GradientType=1 );

    position: absolute;
    left: 3%;
    right: 3%;
    z-index: 1000000;
    top: 10px;
    bottom: 10px;
}

.facebook_logo{
width: 162px;
height: 120px;
margin-left: -80px;
background: url(images/login_with_facebok.png) center center no-repeat;
position: absolute;
top: 50%;
z-index: 1000;
right: 50%;
left: 50%;
margin-top: -60px;
}

.facebook_logo.two{
background: url(images/little_cloud.png) center center no-repeat;
height: 80px;
position: absolute;
top: 36%;
left: -90px;
zoom: 0.4;
z-index: 100;
    -webkit-animation: moving_clouds_left 62s 0s infinite alternate ;
    -moz-animation:    moving_clouds_left 62s 0s infinite alternate ;
    -ms-animation:     moving_clouds_left 62s 0s infinite alternate ;
    -o-animation:      moving_clouds_left 62s 0s infinite alternate ;
}

.facebook_logo.three{
background: url(images/little_cloud.png) center center no-repeat;
height: 80px;
position: absolute;
top: 66%;
right:-100px;
left:auto;
z-index: 100;
    -webkit-animation: moving_clouds_right 59s 0s infinite alternate;
    -moz-animation:    moving_clouds_right 59s 0s infinite alternate;
    -ms-animation:     moving_clouds_right 59s 0s infinite alternate;
    -o-animation:      moving_clouds_right 59s 0s infinite alternate;
zoom: .9;
}



#facebook a[data-role="button"]{
margin:8px 10%;
width: 80%;
top:81%;
position: absolute;
}

#facebook .loader_container{
    width: 40px;
    position: absolute;
    zoom: 1;
    height: 40px;
    top: 50%;
    bottom: 50%;
    left: 50%;
    margin-left: -20px;
} 

#facebook dl{}
#facebook  dd{
border: 0px solid  #B8B8B8; border-radius: 50%;
height: 40px;
width: 40px;
display: block;
position: absolute;
margin: 0 auto;
top: 0;
left: 0;
box-shadow: 0 0 2px #b8beff;
background: -moz-radial-gradient(center, ellipse cover,  rgba(96,141,186,0) 0%, rgba(70,87,163,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(96,141,186,0)), color-stop(100%,rgba(70,87,163,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(96,141,186,0) 0%,rgba(70,87,163,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(96,141,186,0) 0%,rgba(70,87,163,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(96,141,186,0) 0%,rgba(70,87,163,1) 100%);
background: radial-gradient(ellipse at center,  rgba(96,141,186,0) 0%,rgba(70,87,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00608dba', endColorstr='#4657a3',GradientType=1 );

}

#facebook  dd:nth-of-type(1){
    -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0s infinite ;
    -moz-animation:    NAME-YOUR-ANIMATION 1.6s 0s infinite ;
    -ms-animation:     NAME-YOUR-ANIMATION 1.6s 0s infinite ;
    -o-animation:      NAME-YOUR-ANIMATION 1.6s 0s infinite ;
}



#facebook  dd:nth-of-type(2){
    -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0.1s infinite ;
    -moz-animation:    NAME-YOUR-ANIMATION 1.6s 0.1s infinite ;
    -ms-animation:     NAME-YOUR-ANIMATION 1.6s 0.1s infinite ;
    -o-animation:      NAME-YOUR-ANIMATION 1.6s 0.1s infinite ;
}


#facebook  dd:nth-of-type(3){
    -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0.4s infinite ;
    -moz-animation:    NAME-YOUR-ANIMATION 1.6s 0.4s infinite ;
    -ms-animation:     NAME-YOUR-ANIMATION 1.6s 0.4s infinite ;
    -o-animation:      NAME-YOUR-ANIMATION 1.6s 0.4s infinite ;
}




/*ERASEABLE*/


.front_animation{
    width: 300px;
    height:300px;
    border: 1px solid #333;
    border-radius: 50%;
    display: block;
    -webkit-animation: front_animation 6s 0.4s  infinite ;
    -moz-animation:    front_animation 6s 0.4s  infinite ;
    -ms-animation:     front_animation 6s 0.4s  infinite ;
    -o-animation:      front_animation 6s 0.4s  infinite ;
    ;
    position:absolute;
    -webkit-transform: rotate(45deg); 
margin: 0 auto;
bottom: -150px;
left: 67px;
}

.front_animation .slide{width: 130px;height: 130px;display:block;background: url(images/little_cloud.png) center center no-repeat; float:left;margin:0 10px;position: absolute;} 

.front_animation .one{} 
.front_animation .two{
    right: 0px;
} 
.front_animation .three{
    right: 0px;
    bottom: 0px;

}
.front_animation .four{
    left: 0px;
    bottom: 0px;
}
/*END ERASEABLE*/



/*REGULAR CLOUDS*/
@-webkit-keyframes reg_moving_clouds_right {
    0%   {  -webkit-transform: translateX(0); }
    100% {  -webkit-transform: translateX(-170%); }
}

@-webkit-keyframes reg_moving_clouds_left {
    0%   {  -webkit-transform: translateX(0); }
    100% {  -webkit-transform: translateX(170%); }
}


@-webkit-keyframes front-an {
    0%   {  -webkit-transform: rotateX(90deg) translateY(-14px); }
    100% {  -webkit-transform: rotateX(0deg) translateY(-14px); }
}


#wagsignup .regular_clouds,
#waglogin .regular_clouds{
width: 100%;
display: block;
position: absolute;
height: 100%;
background: -webkit-radial-gradient(50% 90%, 309% -126%, #3D60A0 0%, #44A4E4 30%,#44A4E4  79%);
z-index: 10;
overflow: hidden;

}

#wagsignup .regular_clouds:hover,
#waglogin .regular_clouds:hover{
 /* transform: rotateX(90deg) translateZ(320px)*/
}


#wagsignup .reg,
#waglogin .reg{
background: url(images/little_cloud.png) center center no-repeat;
height: 80px;
z-index: 100;
position: absolute;
width: 140px; 
}

#wagsignup .one,
#waglogin .one{
right: 20%;
top: 65%;
zoom: .5;
-webkit-animation: reg_moving_clouds_right 10s 0s infinite alternate;
-moz-animation: reg_moving_clouds_right 10s 0s infinite alternate;
-ms-animation: reg_moving_clouds_right 10s 0s infinite alternate;
-o-animation: reg_moving_clouds_right 10s 0s infinite alternate;
}

#wagsignup .two,
#waglogin .two {
left: 40px;
top: 77%;
zoom: .45;
-webkit-animation: reg_moving_clouds_left 16s 0s infinite alternate;
-moz-animation: reg_moving_clouds_left 16s 0s infinite alternate;
-ms-animation: reg_moving_clouds_left 16s 0s infinite alternate;
-o-animation: reg_moving_clouds_left 16s 0s infinite alternate;
}

#wagsignup .three,
#waglogin .three{
right: 45%;
top: 77%;
zoom: .2;
-webkit-animation: reg_moving_clouds_right 20s 0s infinite alternate;
-moz-animation: reg_moving_clouds_right 26s 0s infinite alternate;
-ms-animation: reg_moving_clouds_right 26s 0s infinite alternate;
-o-animation: reg_moving_clouds_right 26s 0s infinite alternate;
-webkit-transform: scale(.2);
}

#wagsignup .four,
#waglogin .four{
right: -60px;
top: 46%;
zoom: .4;
-webkit-animation: reg_moving_clouds_right 30s 0s infinite alternate;
-moz-animation: reg_moving_clouds_right 30s 0s infinite alternate;
-ms-animation: reg_moving_clouds_right 30s 0s infinite alternate;
-o-animation: reg_moving_clouds_right 30s 0s infinite alternate;
}

#wagsignup .five,
#waglogin .five{
left:40px;
top: 80%;
zoom: 1;
-webkit-animation: reg_moving_clouds_left 24s 0s infinite alternate;
-moz-animation: reg_moving_clouds_right 24s 0s infinite alternate;
-ms-animation: reg_moving_clouds_right 24s 0s infinite alternate;
-o-animation: reg_moving_clouds_right 24s 0s infinite alternate;
}
/* END REGULAR CLOUDS*/





/*--------------------------------------------------------------------*/
@-webkit-keyframes cube4{
    0% { -webkit-transform: rotate3d(0,1,0,0);  }
    100% { -webkit-transform: rotate3d(0,1,0,190deg); }
}
 
 .box{
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    
 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 44px;
    left: 0;
    padding:0px; 
    /*-webkit-animation: cube4 15s ease-in-out;*/
    /*/*-webkit-transform: rotateY(-40deg);*/
    /*-webkit-transform: rotateX(10deg) rotateY(70deg);*/
     
      /*-webkit-transform: rotate3d(1,0,0,10deg);*/
      -webkit-transform: rotate3d(0,1,0,0); 
    right: 0px;
    box-shadow: inset 1px -1px 9px #333;
    bottom: 0px;
    
}
 .box.roll{
    -webkit-transition: all .2s ease-in-out;
    -webkit-transform: rotate3d(0,1,0,90deg) !important;

}

 .box.roll2{
    -webkit-transition: all .2s ease-in-out;
    -webkit-transform: rotate3d(0,1,0,0deg) !important;
}

.face{
-webkit-transform-style: preserve-3d;
width: 100%;
height: 100%;
position: absolute; 
/*-webkit-perspective: 2000;*/
}

    .face.one{background: pink;
-webkit-transform: translate3d(0,0,160px);
}
    .face.two{background: green;
    -webkit-transform: rotate3d(0,1,0,-90deg) translate3d(0,0,160px);
}
    .face.three{background: orange;
-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,160px);
}
    .face.four{background: black;
-webkit-transform:  translate3d(0,0,-160px);
}

/*--------------------------------------------------------------------*/