﻿body {
}

.custom-jumbotron {
    width: 100%;
    position:absolute;
    right: 0;
    left: 0;
    border-radius: 0;
    border-width: 0 0 1px;
    padding-right: 0;
    padding-left: 0;
}

.second-jumbotron-picture-position {
        position: absolute;   
            left: 350px; 
    top: 0px;
}

.third-jumbotron-picture-position {
            position: absolute;   
            left: 700px; 
    top: 0px;
}

.fourth-jumbotron-picture-position {
            position: absolute;   
            left: 1050px; 
    top: 0px;
}

.first-jumbotron-title-overlay-position {
        position: absolute;   
            left: 50px; 
    top:200px;
    color: white;
}

.second-jumbotron-title-overlay-position {
        position: absolute;   
            left: 400px; 
    top:200px;
    color: white;
}

.advance-jumbotron-pictures-button-overlay-position {
        position: absolute;   
            left: 1160px; 
    top:185px;
}

.pause-jumbotron-pictures-button-overlay-position {
        position: absolute;   
            left: 40px; 
    top:185px;
    visibility:visible;
}

.play-jumbotron-pictures-button-overlay-position {
        position: absolute;   
            left: 40px; 
    top:185px;
        visibility:hidden;
}

.img-circular
{
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 position:relative;
 z-index:200;
 width: 30px;
 height: 30px;
 background-color: white;
 background-size: cover;
 display: block;
 border-radius: 15px;
 }

.img-left-thumb-link-guard
{
 -webkit-border-radius: 40px; 
 -moz-border-radius: 40px; 
 position:relative;
 z-index:100;
 top:-240px;
 left:15px;
 width: 80px;
 height: 80px;
 background-color: transparent;
 background-size: cover;
 display: block;
 border-radius: 40px;
 }

.img-right-thumb-link-guard
{
 -webkit-border-radius: 40px; 
 -moz-border-radius: 40px; 
 position:relative;
 z-index:100;
 top:-320px;
 left: 1072px; 
 width: 80px;
 height: 80px;
 background-color: transparent;
 background-size: cover;
 display: block;
 border-radius: 40px;
 }

.normalize-right-arrow-button
{
    top:3px;
    left:3px;
}

.normalize-pause-button, .normalize-play-button
{
    top:5px;
    left:7px;
}

.glyphicon.glyphicon-circle-arrow-right:before
{
    font-size: 24px;
            color:black;
}

.glyphicon.glyphicon-pause:before, .glyphicon.glyphicon-play:before
{
    font-size: 18px;
            color:black;
}

#slider {
    width: 0;
    height: 400px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 0;
    height: 400px;
}

/* helper css, since we don't have images */
.slide1 {
    /*background-image: url("Images/CathedralGraphic.JPG");*/
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.slide2 {/*background-image: url("Images/CircuitLayoutGraphic.JPG");*/
                      background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.slide3 {/*background-image: url("Images/ComputerServerGraphic.JPG");*/
                               background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.slide4 {/*background-image: url("Images/Telescope.JPG");*/
                          background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


.overlay-text{
      z-index: 100;
  position: relative;
  color: white;
  font-size: 34px;
  font-weight:100;
  margin-left: 100px;
  top: 60px;
  margin-right:110px;
  font-family:'Open Sans';
}

.thumb-nail1 {
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    background-repeat: no-repeat;
    background-position: 50% 50%;

    width: 175px;
    height: 140px;
}
.thumb-nail2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail4 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail5 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail6 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail7 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail8 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail9 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}
.thumb-nail10 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
    width: 175px;
    height: 140px;
}