@import url(https://fonts.googleapis.com/css?family=Raleway:900,700,500,300,100);

.loading_shadow
{
	position: absolute;
	width: 100%;
	min-height: 2000px;
	z-index: 2500; 
	background: #f1f1f1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}
.loading_container_suggestions
{
	position: absolute;
	width: 100%;
	min-height: 2000px;
	z-index: 2500; 
	background: transparent;
}
.loading_center{
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin-top: 26%;
  z-index: 2500; 
  min-width: 280px;
}

/*##################*/
/*suggestione loader*/
#suggestions_box_loader{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 140px;
	height: 140px;
	padding:1em; /* use em not px for responsive design */
	margin-bottom: 15px;
	text-align: center;
	background-color: #3a95d2;
	-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
		
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration:1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-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);
    }
}

.spin {
  animation: move 2s steps(10) infinite alternate;
}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

/*#####################*/

/*########2 VER#########*/
.suggestions_box_loader_2 {
  display: inline-block;
  width: 140px;
  height: 140px;
  z-index: 10;
  position: relative;
  border: 4px solid #2D677F; /* #3a95d2; */
  background-color: #2D677F; /*#3a95d2;*/
  top: 50%;
  animation: suggestions_box_loader_2 2s infinite ease;
  
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
	 border-radius: 5px;
	
	 animation-name: suggestions_box_loader_2;
    animation-duration:1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
		
    -webkit-animation-name: suggestions_box_loader_2;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: suggestions_box_loader_2;
    -moz-animation-duration: 1500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    -ms-animation-name: suggestions_box_loader_2;
    -ms-animation-duration: 1500ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease;        
      	
}

.suggestions_box_loader_2-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #3a95d2;
  animation: suggestions_box_loader_2-inner 4s infinite ease-in;
}


@keyframes suggestions_box_loader_2{
  0% {
   transform: rotate(0deg);
  }
  
  25% {
   transform: rotate(180deg);
  }
  
  50% {
   transform: rotate(180deg);
  }
  
  75% {
   transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes suggestions_box_loader_2{
  0% {
   -moz-transform: rotate(0deg);
  }
  
  25% {
   -moz-transform: rotate(180deg);
  }
  
  50% {
   -moz-transform: rotate(180deg);
  }
  
  75% {
   -moz-transform: rotate(360deg);
  }
  
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes suggestions_box_loader_2 {
  0% {
   -webkit-transform: rotate(0deg);
  }
  
  25% {
   -webkit-transform: rotate(180deg);
  }
  
  50% {
   -webkit-transform: rotate(180deg);
  }
  
  75% {
   -webkit-transform: rotate(360deg);
  }
  
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-o-keyframes suggestions_box_loader_2 {
  0% {
   -o-transform: rotate(0deg);
  }
  
  25% {
   -o-transform: rotate(180deg);
  }
  
  50% {
   -o-transform: rotate(180deg);
  }
  
  75% {
   -o-transform: rotate(360deg);
  }
  
  100% {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes suggestions_box_loader_2 {
  0% {
   -ms-transform: rotate(0deg);
  }
  
  25% {
   -ms-transform: rotate(180deg);
  }
  
  50% {
   -ms-transform: rotate(180deg);
  }
  
  75% {
   -ms-transform: rotate(360deg);
  }
  
  100% {
    -ms-transform: rotate(360deg);
  }
}

@keyframes suggestions_box_loader_2-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

/*#####################*/

.bouncywrap{
  position: relative;
}
#pagination_container
{
	margin-bottom: 40px;
}
#signal_container
{
	text-align: left;
	margin-bottom: 20px;
	width: 265px;
}
.signal_msg
{
	float: right;
	width: 85%;
	text-transform: lowercase;
}
.signal {
    /*border:5px solid #171716;
    border-radius:30px;*/
    height:85px;
    left:41%;
    margin:-15px 0 0 -15px;
    opacity:0;
    z-index: 1000;  
    position:absolute;
    top:32%;
    width:85px;
      
    animation: pulsate 1s ease-out;
    animation-iteration-count:infinite;
    
    animation-name: pulsate;
	 animation-duration:1500ms;
	 animation-iteration-count: infinite;
	 animation-timing-function: ease-out;
	
	 -webkit-animation-name: pulsate;
	 -webkit-animation-duration: 1200ms;
	 -webkit-animation-iteration-count: infinite;
	 -webkit-animation-timing-function: ease-out;
	 -moz-animation-name: pulsate;
	 -moz-animation-duration: 1200ms;
	 -moz-animation-iteration-count: infinite;
	 -moz-animation-timing-function: ease-out;
	 -ms-animation-name: pulsate;
	 -ms-animation-duration: 1200ms;
	 -ms-animation-iteration-count: infinite;
	 -ms-animation-timing-function: ease-out;  
}

.signal_small {
    border:3px solid #171716;
    border-radius:30px;
    height:20px;
    left:0;
    margin: 1px 0 0 1px;
    opacity:0;
    position:relative;
    top:0;
    width:20px;
 
 	 float: left;
       
    animation: pulsate 1s ease-out;
    animation-iteration-count:infinite;
    
    animation-name: pulsate;
	 animation-duration:1500ms;
	 animation-iteration-count: infinite;
	 animation-timing-function: ease-out;
	
	 -webkit-animation-name: pulsate;
	 -webkit-animation-duration: 1200ms;
	 -webkit-animation-iteration-count: infinite;
	  -webkit-animation-timing-function: ease-out;
	 -moz-animation-name: pulsate;
	 -moz-animation-duration: 1200ms;
	 -moz-animation-iteration-count: infinite;
	 -moz-animation-timing-function: ease-out;
	 -ms-animation-name: pulsate;
	 -ms-animation-duration: 1200ms;
	 -ms-animation-iteration-count: infinite;
	 -ms-animation-timing-function: ease-out;  
}

@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;
    }
}

@-moz-keyframes pulsate{
    0% {
      -moz-transform:scale(.1);
      opacity: 0.0;
    }
    50% {
      opacity:1;
    }
    100% {
      -moz-transform:scale(1.2);
      opacity:0;
    }
}

@-webkit-keyframes pulsate {
	0% {
      -webkit-transform:scale(.1);
      opacity: 0.0;
    }
    50% {
      opacity:1;
    }
    100% {
      -webkit-transform:scale(1.2);
      opacity:0;
    }
}

@-o-keyframes pulsate {
	0% {
      -o-transform:scale(.1);
      opacity: 0.0;
    }
    50% {
      opacity:1;
    }
    100% {
      -o-transform:scale(1.2);
      opacity:0;
    }
}

@-ms-keyframes pulsate {
	0% {
      -ms-transform:scale(.1);
      opacity: 0.0;
    }
    50% {
      opacity:1;
    }
    100% {
      -ms-transform:scale(1.2);
      opacity:0;
    }
}

.dotcon{
  display: block;
  float: left;
  width: 50px;
  position: absolute;
}

.dc1{
  -webkit-animation: bouncy1 1.5s infinite;
  left: -40px;
  animation: bouncy1 1.5s infinite;
}

.dc2{
  -webkit-animation: bouncy2 1.5s infinite;
  animation: bouncy2 1.5s infinite;
  left: 0;
}

.dc3{
  -webkit-animation: bouncy3 1.5s infinite;
  animation: bouncy3 1.5s infinite;
  left: 40px;
}

.dot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: rgba(152,192,34,0.8);
}


@-webkit-keyframes bouncy1{
  0% {-webkit-transform: translate(0px,0px) rotate(0deg);}
  50% {-webkit-transform: translate(0px,0px) rotate(180deg);}
  100% {-webkit-transform: translate(40px,0px) rotate(-180deg);}
}

@keyframes bouncy1{
  0% {transform: translate(0px,0px) rotate(0deg);}
  50% {transform: translate(0px,0px) rotate(180deg);}
  100% {transform: translate(40px,0px) rotate(-180deg);}
}

@-webkit-keyframes bouncy2{
  0% {-webkit-transform: translateX(0px);}
  50% {-webkit-transform: translateX(-40px);}
  100% {-webkit-transform: translateX(-40px);}
}

@keyframes bouncy2{
  0% {transform: translateX(0px);}
  50% {transform: translateX(-40px);}
  100% {transform: translateX(-40px);}
}

@-webkit-keyframes bouncy3{
  0% {-webkit-transform: translateX(0px);}
  50% {-webkit-transform: translateX(0px);}
  100% {-webkit-transform: translateX(-40px);}
}

@keyframes bouncy3{
  0% {transform: translateX(0px);}
  50% {transform: translateX(0px);}
  100% {transform: translateX(-40px);}
}

.bubblingG {
text-align: center;
width:80px;
height:50px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 25px auto;
background: #6e6f6c;
-moz-border-radius: 50px;
-moz-animation: bubblingG 0.5s infinite alternate;
-webkit-border-radius: 50px;
-webkit-animation: bubblingG 0.5s infinite alternate;
-ms-border-radius: 50px;
-ms-animation: bubblingG 0.5s infinite alternate;
-o-border-radius: 50px;
-o-animation: bubblingG 0.5s infinite alternate;
border-radius: 50px;
animation: bubblingG 0.5s infinite alternate;
}

#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}

#bubblingG_2 {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
-ms-animation-delay: 0.15s;
-o-animation-delay: 0.15s;
animation-delay: 0.15s;
}

#bubblingG_3 {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}

@-moz-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#6e6f6c;
-moz-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#6e6f6c;
-moz-transform: translateY(-21px);
}

}

@-webkit-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#6e6f6c;
-webkit-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#6e6f6c;
-webkit-transform: translateY(-21px);
}

}

@-ms-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#6e6f6c;
-ms-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#6e6f6c;
-ms-transform: translateY(-21px);
}

}

@-o-keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#6e6f6c;
-o-transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#6e6f6c;
-o-transform: translateY(-21px);
}

}

@keyframes bubblingG {
0% {
width: 10px;
height: 10px;
background-color:#6e6f6c;
transform: translateY(0);
}

100% {
width: 24px;
height: 24px;
background-color:#6e6f6c;
transform: translateY(-21px);
}

}