@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);


/* 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.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.fade-in.two {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay:1.5s;
  animation-delay: 1.5s;
}

.fade-in.three {
  -webkit-animation-delay: 1.9s;
  -moz-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

/*---make a basic box ---*/
.box{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 10px;
  float: left;
  border: 1px solid #333;
  background: #999;

}

div.image

  {

  width:500px;

  height:250px;

  background:url(../img/CA.jpg);

  background-repeat:no-repeat;

  background-position:center;



  }

div.transparentbox

  {

  width:400px;

  height:180px;

  margin:30px 50px;


  border:1px solid;


  opacity:0.6;

  filter:alpha(opacity=60);

  }

div.transparentbox p

  {

  margin:30px 40px;

  font-weight:bold;

  color:#CD853F;

  }