img#logo {
    position: relative;
    float: left;
    min-width: 75px;
    width: 12%;
    max-width: 150px;
    box-shadow: 0px 0px 25px rgba(255,255,0,0.8);
}

#logoText {
    position: relative;
    left: 5%;
}

#spotlight {
    padding-top: 30px;
    padding-bottom: 70px;
}

#leftSpotlight {
    height: 100%;
}

#centerSpotlight {
    height: 100%;
}

#rightSpotlight {
    height: 100%;
}

img#fgn4360 {
    position: absolute;
    top: 1%;
    left: 4%;
    width: 22%;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.7);
    
    -webkit-animation: fgn4boxes_ends 22s linear infinite;
    -moz-animation: fgn4boxes_ends 22s linear infinite;
    -o-animation: fgn4boxes_ends 22s linear infinite;
    animation: fgn4boxes_ends 22s linear infinite;
    
    z-index: 75;
}

img#fgn4wii {
    position: absolute;
    top: 17%;
    left: 12%;
    width: 22%;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.7);
    
    -webkit-animation: fgn4boxes_middle 20s linear infinite;
    -moz-animation: fgn4boxes_middle 20s linear infinite;
    -o-animation: fgn4boxes_middle 20s linear infinite;
    animation: fgn4boxes_middles 20s linear infinite;
    
    z-index: 80;
}

img#fgn4ps3 {
    position: absolute;
    top: 35%;
    left: 20%;
    width: 22%;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.7);
    
    -webkit-animation: fgn4boxes_ends 18s linear infinite;
    -moz-animation: fgn4boxes_ends 18s linear infinite;
    -o-animation: fgn4boxes_ends 18s linear infinite;
    animation: fgn4boxes_ends 18s linear infinite;
    
    z-index: 85;
}

@-webkit-keyframes fgn4boxes_ends
{
0%   {-webkit-transform: rotateZ(0deg);}
25%    {-webkit-transform: rotateZ(-3deg);}    
50%    {-webkit-transform: rotateZ(0deg);}
75%    {-webkit-transform: rotateZ(3deg);}
100%    {-webkit-transform: rotateZ(0deg);}
}

@-moz-keyframes fgn4boxes_ends {
0%   {-moz-transform: rotateZ(0deg);}
25%    {-moz-transform: rotateZ(-3deg);}    
50%    {-moz-transform: rotateZ(0deg);}
75%    {-moz-transform: rotateZ(3deg);}
100%    {-moz-transform: rotateZ(0deg);}
}

@keyframes fgn4boxes_ends {
0%   {transform: rotateZ(0deg);}
25%    {transform: rotateZ(-3deg);}    
50%    {transform: rotateZ(0deg);}
75%    {transform: rotateZ(3deg);}
100%    {transform: rotateZ(0deg);}
}

@-webkit-keyframes fgn4boxes_middle {
0%   {-webkit-transform: rotateZ(0deg);}
25%    {-webkit-transform: rotateZ(3deg);}    
50%    {-webkit-transform: rotateZ(0deg);}
75%    {-webkit-transform: rotateZ(-3deg);}
100%    {-webkit-transform: rotateZ(0deg);}
}

@-moz-keyframes fgn4boxes_middle {
0%   {-moz-transform: rotateZ(0deg);}
25%    {-moz-transform: rotateZ(3deg);}    
50%    {-moz-transform: rotateZ(0deg);}
75%    {-moz-transform: rotateZ(-3deg);}
100%    {-moz-transform: rotateZ(0deg);}
}

@keyframes fgn4boxes_middle {
0%   {transform: rotateZ(0deg);}
25%    {transform: rotateZ(3deg);}    
50%    {transform: rotateZ(0deg);}
75%    {transform: rotateZ(-3deg);}
100%    {transform: rotateZ(0deg);}
}

img#kinect {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 40%;
    box-shadow: none;
    
    z-index: 60;
}
img#wii {
    position: absolute;
    top: 10%;
    left: 65%;
    width: 27%;
    
    z-index: 65;
    box-shadow: none;
}
img#motion {
    position: absolute;
    top: 32%;
    left: 77%;
    width: 20%;
    box-shadow: none;
    
    z-index: 70;
}

#feature{
    background-color: #1e2c33;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.5);
    font-size: 150%;
    border: none;
}

.featureTitle {
    font-size: 150%;
    color: #7a7870;
    text-align: center;
}

.featureDescription {
    font-size: 115%;
    text-align: center;
    color: #d2c9b8;
}

/* for 1600px or less viewport */
@media screen and (max-width: 1600px) {
    
    .description {
        font-size: 240%;
    }
}

/* for 1280px or less viewport */
@media screen and (max-width: 1280px) {
    
    .description {
        font-size: 220%;
    }
}

/* for 1199px or less viewport */
@media screen and (max-width: 1199px) {
    
    .description {
        font-size: 300%;
    }
}

/* for 600px or less viewport */
@media screen and (max-width: 600px) {

    .title {
        font-size: 300%;
    }
    
    .description {
        font-size: 250%;
    }
}

/* for 500px or less viewport */
@media screen and (max-width: 500px) {

    .title {
        font-size: 250%;
    }
    
    .description {
        font-size: 200%;
    }
}

/* for 375px or less viewport */
@media screen and (max-width: 375px) {

    .title {
        font-size: 225%;
    }
    
    .description {
        font-size: 175%;
    }
}

/* for 335px or less viewport */
@media screen and (max-width: 335px) {

    .title {
        font-size: 215%;
    }
    
    .description {
        font-size: 165%;
    }
}