/* background gif properties */

html { 
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}

.video {
   padding-top: 56%;
   position: relative;
}

.video iframe {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
}

/* styling to place logo in top right of home page */
.topRight { 
	position: absolute;
    margin-left: 1%;
	top: 0px;
	left:0px;
    margin-top: 1%;
	width: 5%;
	height: auto;
}

/*stlying for gif hover fade */

img.opacity {
	opacity: .4;
	filter: alpha(opacity=50);
 	-webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear; 
     -o-transition: opacity 1s linear;
	}	
	
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
 	-webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear; 
     -o-transition: opacity 1s linear;
     
	}

@import "compass/css3";

@-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1080px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  height: auto\9; /* ie8 */
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1080px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

/*styling for images, sets image to its full size with ability to dynamically resize */
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* fade in page */

body {
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -o-transition;
    opacity 3s;
    /* Safari */
}