/*
* -- STYLES FOR SLYDER --
* Styles used for top slider
*/

.slider{
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
    /* calculated height for the slider
        display-height - ribbon heading height (line-height + padding) - menu height */
    height: calc(100% - 4.7em - 3em);
    top: 3em;
    left: 0;
    position: fixed !important

}

.slider-spacer{
    /* These styles are required for the "scroll-over" effect */
    top: 88%;
    /* calculated height for the slider
        display-height - ribbon heading height (line-height + padding-top + margin-bottom) - menu height */
    top: calc(100% - 4.7em);
}



/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background: #00171f;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 100%;
    top: 3em;
    left: 0;
    background-position: center;
    background-repeat: none;
    background-size: cover;
    position: relative;
    float: left;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0,23,31,0.3);
    padding-bottom: 1.6em;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 28px;
    font-weight: bold;
    color: white;
    padding: 1em 1.6em;
    margin: 0;
    font-weight: 100;
    line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
    line-height: 1em;
}

.custom-slider{
	position: fixed;
	top: 0px;
	left: 0%;
	width: 100%;
    height: 88%;
    /* calculated height for the slider
        display-height - ribbon heading height (line-height + padding) - menu height */
    height: calc(100% - 4.7em - 3em);
    -webkit-transition: left 1.0s ease-in-out;
    -moz-transition: left 1.0s ease-in-out;
    -o-transition: left 1.0s ease-in-out;
    transition: left 1.0s ease-in-out;
}

.custom-slider-controls{
	position: fixed;
	bottom: 15%;
	left: 0px;
	width: 100%;
	z-index: 1;
}

.custom-radio{
	background: #004777;
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #004777;
    top: 3px;
    left: 0;
    border-radius: 50%;
}

input[type=radio]{
	display: none;
}

#slide01:checked ~ .custom-slider-controls label[for="slide01"],
#slide02:checked ~ .custom-slider-controls label[for="slide02"],
#slide03:checked ~ .custom-slider-controls label[for="slide03"],
#slide04:checked ~ .custom-slider-controls label[for="slide04"]{
	background: #fff;
    border: 4px solid #004777;
}

#slide02:checked ~ .custom-slider {
    left: -100%;
}
 
#slide03:checked ~ .custom-slider {
    left: -200%;
}
 
#slide04:checked ~ .custom-slider {
    left: -300%;
}


/*
 * -- TABLET (AND UP) MEDIA QUERIES FOR SPLASH--
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
 @media (min-width: 48em) {

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 250%;
    }
 }

 /*
  * -- DESKTOP (AND UP) MEDIA QUERIES --
  * On desktops and other large devices, we want to over-ride some
  * of the mobile and tablet styles.
  */
 @media (min-width: 78em) {
     /* We increase the header font size even more */
     .splash-head {
         font-size: 300%;
     }
 }