.bgAnim,
.bgAnimTop
 {
    height:600px;
    width:100%;
    background-position:bottom center;
    background-repeat:no-repeat;
    color:white;
    font-size:30px;
    text-align:center;
    text-shadow: 0 0 20px #000000;
    clear:both;
    position:relative;
    
    border-top:1px solid #bbb;
    border-bottom:10px solid #ddd;
    
}
.bgAnimTop
{
    background-position:top center;
    text-shadow: 0 0 12px #000000;
}

.revert{
    background-position:top center;
}
.bgAnim .slogan{
  /*
  color:#a00;
  background:rgba(255,250,125,0.6);
  text-shadow: 0 0 6px #fff;
  */
  padding:20px;
  padding-bottom:0px;
  padding-top:0px;
  width:100%;
}
.bgAnim .top,
.bgAnim .middle,
.bgAnim .bottom{
  position:absolute;
}
.bgAnim .bottom{
  bottom:0px;
}
.bgAnim .top{
  top:0%;
}
.bgAnim .middle{
  top:20%;
}

.wbg50{
  /*
  background-color:rgba(255,255,255,0.5);
  */
}
.dark {
  color:#e70 !important;
  text-shadow:none;
  -webkit-text-shadow:none;
}

.bgAnim .slogan,
.camera_effected{                              
  font-family:  'Open Sans';
  font-weight:normal;
}

.slideHtml {
	width: 320px;
  margin-top:5%;
  margin-right:10%;
	padding: 15px;
	float: right;
	border-top-right-radius: 25px;
	border-bottom-left-radius: 25px;
	background-color: hsla(0, 0%, 100%, .91);
  border:1px solid #eee;
}
.slideHtml:empty{
  display:none;
}

.slideHtml0{
  display:block;
  border:0px solid black;
  width:100%;
  height:auto;
  position: absolute;
  bottom:40px;
  right:0%;
}

.slideHtml h3,.slideHtml p {
  font-family: open_sans;
  text-align: left;
  text-shadow: none;
  color:#555;
  font-size:16px !important;
}
.slideHtml h3{
  font-family: open_sans_light;
  font-size:18px !important;
  border-bottom: 1px solid #3bb6ed;
  color:#3bb6ed;
  text-transform: uppercase;
  padding:5px 0px;
  font-weight: bold;
}
.slideHtml p{
  background:none;
  padding:5px 0px;
  margin:0px;
  margin-left:-3px;
}

.slogan .content{
  padding-top:0px;
  padding-bottom:0px;
  margin-top:0px;
  margin-bottom:0px;
}


.bgAnim .slogan h3,.bgAnimTop .slogan h3{
  font-size: 50px !important;
  font-weight:normal;
  font-style:normal;
}
.camera_effected p{
  padding:4px;
}


.bgAnim .slogan .content>p,.bgAnimTop .slogan .content>p{
  letter-spacing: 1px;
  font-family: 'PT Serif','Noto Sans' ,'Prelo Medium','Great Vibes', Lora, Courgette, 'Open Sans';
  font-style:italic;
  font-weight:bold;
  color:#ffe;
  font-size:24px;
}

  /*
.slogan p{
  font-size: 40px;
}
  */

.bgAnim .slogan .abox{
  font-family:'Open Sans' !important;
  font-size:20px !important;
  color:#444;
  background-color:rgba(255,255,255,0.9);
  width:40%;
  margin:auto;
  position:relative;
  top:0px;
  line-height:30px;
  text-shadow:none;
  -webkit-text-shadow:none;
  -webkit-border-radius: 0 0 20px 20px;
  border-radius: 0 0 20px 20px ;
  padding:10px 30px 5px 30px;

}

.loading {
	background: url('../images/ico_loading.gif') no-repeat center center;
}

.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}
main {
	overflow-x: hidden;
}
#preload {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}


.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(even) {
  animation-duration: 1.3s; /* So they look staggered */
}
.come-in:nth-child(odd) {
  animation-duration: 0.9s; /* So they look staggered */
}


.come2in a{
  transform: translateX(50px);
  opacity:0;
  animation: come2in 0.3s ease forwards;
}

.come2in:nth-child(0) a{ animation-duration: 0.1s; }
.come2in:nth-child(1) a{ animation-duration: 0.2s; }
.come2in:nth-child(2) a{ animation-duration: 0.3s; }
.come2in:nth-child(3) a{ animation-duration: 0.4s; }
.come2in:nth-child(4) a{ animation-duration: 0.5s; }
.come2in:nth-child(5) a{ animation-duration: 0.6s; }
.come2in:nth-child(6) a{ animation-duration: 0.7s; }
.come2in:nth-child(7) a{ animation-duration: 0.8s; }
.come2in:nth-child(8) a{ animation-duration: 0.9s; }
.come2in:nth-child(9) a{ animation-duration: 1s; }
.come2in:nth-child(10) a{ animation-duration: 1.1s; }
.come2in:nth-child(11) a{ animation-duration: 1.2s; }
.come2in:nth-child(12) a{ animation-duration: 1.3s; }
.come2in:nth-child(13) a{ animation-duration: 1.4s; }
.come2in:nth-child(14) a{ animation-duration: 1.5s; }
.come2in:nth-child(15) a{ animation-duration: 1.6s; }
.come2in:nth-child(16) a{ animation-duration: 1.7s; }
.come2in:nth-child(17) a{ animation-duration: 1.8s; }
.come2in:nth-child(18) a{ animation-duration: 1.9s; }
.come2in:nth-child(19) a{ animation-duration: 2s; }


@keyframes come2in {
  to { 
    transform: translateX(0);
    opacity:1;
  }
}

@keyframes come-in {
  to { transform: translateY(0); }
}