/*styling for images, sets image to its full size with ability to dynamically resize */

img {
    /*max-width: 100%;*/
    width: 100%;
    height: auto;
    height: auto\9;
    /* ie8 */
}



/*stlying for shatter background */

img.overLayOp {
    opacity: 1;
}

/* opacity of logo */

img.logoOp {
    z-index: 99;
    opacity: .5;
    filter: alpha(opacity=50);
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
}

/* opacity of logo with hover */

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

/*styling to keep shatter overlay full screen and placed against backgrounf */

img.bg {
    min-height: 100%;
    min-width: 1080px;
    width: 100%;
    height: auto;
    height: auto\9;
    position: fixed;
    top: 0;
    left: 0;
}


img.bgDevil {
    /* Set rules to fill background */
    /*min-height: 100%;*/
    /*min-width: 100%;*/
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    height: auto\9;
    /* ie8 */
    /* Set up positioning */
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 50%;
}


/* styling to place logo in bottom right of video page */

.topRight {
    margin-bottom: 3%;
    z-index: 6;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 145px;
    height: auto;
    height: auto\9;
    margin-left: 5%;

    -webkit-transition:all ease-in-out 0.6s;
    -moz-transition:all ease-in-out 0.6s;
    -ms-transition:all ease-in-out 0.6s;
    -o-transition:all ease-in-out 0.6s;
    transition:all ease-in-out 0.6s;
}

.map {
    
}

/*this is for computer screen */
@media all and (min-width: 600px) {

    #cf7 {
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img {

        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img.top:hover {
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }

    .topRight {


        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }


}

/*set the breakpoint to change layout*/
@media all and (max-width: 1050px) {
    #cf7 {
        margin-left: 13.5%;
        z-index: 6;
        position: fixed;
        bottom: 0px;
        width: 65px;
        height: auto;
        height: auto\9;
        left: 0px;

        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img {
        width: 60px;
        margin-bottom: 40px;
        opacity: .7;
        position: relative;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img.top:hover {
        opacity: 1;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }

    .topRight {
        margin-bottom: 3%;
        z-index: 6;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 145px;
        height: auto;
        height: auto\9;
        margin-left: 3%;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }

}

@media all and (max-height: 550px) {

    #cf7 {
        margin-top:120px;
        margin-left: 1%;
        z-index: 6;
        position: fixed;
        top: 0px;
        width: 65px;
        height: auto;
        height: auto\9;
        left: 0px;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img {
        width: 60px;
        margin-bottom: 40px;
        opacity: .7;
        position: relative;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    #cf7 img.top:hover {
        opacity: 1;
        -webkit-transition: background 2s;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }
    .topRight {
        margin-bottom: 3%;
        z-index: 6;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 120px;
        height: auto;
        height: auto\9;
        margin-left: -1%;
        -webkit-transition:all ease-in-out 0.6s;
        -moz-transition:all ease-in-out 0.6s;
        -ms-transition:all ease-in-out 0.6s;
        -o-transition:all ease-in-out 0.6s;
        transition:all ease-in-out 0.6s;
    }



}


/* fade in background on page load */

@import "compass/css3";
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

/* background fade in, turned off atm */














/* styling for logo hover */
.image1:hover ~ #imagesToFadeIn img {
    opacity: .8;
    
}
#imagesToFadeIn img {
    opacity: 0;
    transition: all .5s ease-in;
}





/*styling for media links */

#cf {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 20%;
    bottom: 0px;
    left:0px;
}
#cf img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
    opacity: 1;
}
#cf2 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 17%;
    bottom: 0%;
    left:0%;
}
#cf2 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf2 img.top:hover {
    opacity: 1;
}
#cf3 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 14%;
    bottom: 0%;
    left:0%;
}
#cf3 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf3 img.top:hover {
    opacity: 1;
}
#cf4 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 11%;
    bottom: 0%;
    left:0%;
}

#cf4 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf4 img.top:hover {
    opacity: 1;
}
#cf5 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 8%;
    bottom: 0%;
    left:0%;
}
#cf5 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf5 img.top:hover {
    opacity: 1;
}
#cf6 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    margin-left: 5%;
    bottom: 0%;
    left:0%;
}
#cf6 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf6 img.top:hover {
    opacity: 1;
}

#cf7 {
    margin-bottom: 1%;
    margin-right:1%;
    z-index: 6;
    position: fixed;
    bottom: 0px;
    width: 75px;
    height: auto;
    height: auto\9;
    right: 0px;
}
#cf7 img {

    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf7 img.top:hover {
    opacity: 1;
}

#cf8 {
    margin-bottom: 8px;
    width: 1.5%;
    height: auto;
    height: auto\9;
    /* ie8 */
    position: absolute;
    bottom: 0px;
    left:0px;
    margin-left: 2%;
}
#cf8 img {
    opacity: .7;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf8 img.top:hover {
    opacity: 1;
}

/* fade in background */

@import "compass/css3";
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




/* 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.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.fade-in.two {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    animation-delay: .9s;
}
.fade-in.three {
    -webkit-animation-delay:  1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.fade-in.four {
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.fade-in.five {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    animation-delay: 1.7s;
}
.fade-in.six {
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    animation-delay: 2.1s;
}

.fade-in.seven {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
    animation-delay: 2.7s;
}

.fade-in.eight {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    animation-delay: 2.4s;
}




.bgOp {
 opacity: 1; 
    
}


/* media query to deal with fucktards who like to look at things in portrait */

#maincontent{
    width:100%;
}
#message{
    width:100%;
    position: fixed;
    top: 90%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

   @media screen and (orientation:portrait) {
        /* Portrait styles */
        /*hide your main content and display message */


       .wrapper {

        display:none

    }

       body {

           background-color: black;
       }

       .bg {

           display:none;
       }

    }
    /* Landscape */
    @media screen and (orientation:landscape) {
        /* Landscape styles */
        /* show your content*/
       #maincontent
       {

       }
       #message{display:none}
        
       

    

    }

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

/* fade in html/body on page load */

/* fade in page */

body {
    /* Hide it for nifty fade-in effect */
    display: none;
}