*, *:before, *:after {
  box-sizing: border-box; }


/*
 * -- BASE STYLES --
 */



body, html {
  height: 100%;
  margin: 0;
}
body {
    line-height: 1.7em;
    color: #7f8c8d;
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6, label {
    color: #34495e;
}

a {
	transition: all 0.6s ease;
	text-decoration: none;
}
a, a:visited {
	color: #1f8dd6;
}
a:hover, a:focus {
	color: #80cafa;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}



/*
 * -- LAYOUT STYLES --
 */



.l-box {
    padding: 1em;
}
.l-box-lrg {
    padding: 0em 2em 2em 2em;
}
.is-center {
    text-align: center;
}
.vid-size {
	width: 260px;
	height: 146px;
}
.iconsvg {
  height: 50px;
}
.social {
	margin: 0 .25em;
	padding: 0 .25em;
	font-size: 250%;
}



/*
 * -- MENU STYLES --
 */



.home-menu {
    padding: 0.5em;
    text-align: center;
}
.home-menu {
    background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
    border-bottom: 2px solid #192430;
    /* need higher z-index for scroll-over */
    z-index: 4;
}

.home-menu .pure-menu-heading {
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: none;
}

.home-menu .pure-menu-selected a {
    color: #fff;
}

.home-menu a {
    color: #80cafa;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #def2ff;
}



/*
 * -- SPLASH STYLES --
 */



.splash-container {
	background: #000;
	background-image: url("http://www.blackcoralmovie.com/img/bc-coral2.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
/*	background-size: cover; */
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed !important;

	/* Preserve aspet ratio  when cover is broken*/
	min-width: 100%;
	min-height: 100%;
}
/*
.splash-container { animation: changeBg 15s infinite; }
   @keyframes changeBg{
    0%,100%  {background-image: url("http://127.0.0.1/blackcoralmovie/img/bc-coral2.jpg");}
    33% {background-image: url("http://127.0.0.1/blackcoralmovie/img/bc-forest.jpg");}
    66% {background-image: url("http://127.0.0.1/blackcoralmovie/img/bc-flashlight.jpg");}
}
*/

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 35%; left: 0; bottom: 0; right: 0;
    text-align: center;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: #fff;
    text-shadow: 1px 3px #000;
}

/* This is the subheading that appears on the blue section */
.splash-scroll a {
    font-size: 3em;
    color: #fff;
    text-shadow: 1px 3px #000;
}

.bclogo {
	opacity: 0.75;
}




/*
 * -- CONTENT STYLES --
 */



.content-wrapper {
    position: absolute;
    top: 87%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background: #fff;

}
.content {
    padding: 1em 1em 3em;
}
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}
.content-head-ribbon {
    color: #fff;
}
.content-subhead {
    color: #1f8dd6;
}
.ribbon {
    background: #2d3e50;
    color: #aaa;
}
.hilite {
    background: #d0deec;
    color: #000;
	border-radius: 6px;
}
.hilite a:hover, .hilite a:focus {
	color: #333;
}



/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 */



@media screen and (min-width: 35.5em) { /* ≥ 568px .pure-u-sm-* */
    body {
        font-size: 14px;
    }
    .splash {
        width: 60%;
    }
	.vid-size {
		width: 320px;
		height: 180px;
	}
}
@media screen and (min-width: 48em) { /* ≥ 768px .pure-u-md-* */
    body {
        font-size: 15px;
    }
    .splash {
        width: 55%;
    }
	.vid-size {
		width: 480px;
		height: 270px;
	}
    /* align the menu header to the left, float menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }
}



/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 */



@media screen and (min-width: 64em) { /* ≥ 1024px .pure-u-lg-* */
    body {
        font-size: 16px;
    }
    .splash {
        width: 50%;
    }
}
@media screen and (min-width: 80em) { /* ≥ 1280px */
}