/* ================ New splash for index.html ================ */

@media only screen and (max-width:480px){div#splash_container{margin-top:12px;}}
@media only screen and (min-width:481px) and (max-width:768px){div#article_format{padding:6px 6px 36px 6px;}}
/*@media only screen and (min-width:769px){
	div.splash_box_container{flex:1 1 190px;}
	}*/

div#splash_container{display:flex;flex-flow:row wrap;position:relative;} /* Relative positioning sets up absolute of the ::after. Without it, the ::after becomes absolute relative-to the entire article area */
div#splash_container::after{
	content:"";
	position:absolute;
	display:block;z-index:-2;
	top:0px;right:0px;bottom:0px;left:0px;
	background-color:#FFFFFF;
	}

div.splash_box_container{position:relative;flex:1 1 190px;margin:0px 1px 1px 0px;}
div.splash_box_container::before{content:"";display:block;padding-top:100%;}

a.splash_box{
	display:flex;flex-flow:column nowrap;justify-content:flex-end; /* Each spash_box is a flex container itself, to position the banner and descriptions within it */
	position:absolute;top:0;right:0;bottom:0;left:0;
	}

a.splash_box:link{}
a.splash_box:hover{border:0px none;}
a.splash_box:active{}
a.splash_box:visited{}

a.splash_box:hover div.splash_banner{color:#0D4D1A;}
a.splash_box:active div.splash_banner{color:#16802B;}

a.splash_box::after{
	content:"";
	position:absolute;
	display:block;z-index:-1;
	top:0px;right:0px;bottom:0px;left:0px;
	background-size:cover;
	opacity:1;
	}
a.splash_box:hover::after{opacity:0.55;}

p.splash_banner{
	flex:0 0 auto;
	width:100%;
	margin:0px;padding:6px;
	font-family:'Crimson-regular';
	font-size:1.25em;line-height:1;
	font-style:italic;
	color:#16802B;background-color:#f0f6fa;
	}

p.splash_description{
	flex:0 0 auto;
	position:relative;
	width:100%;
	margin:0px;padding:6px 6px 7px 6px; /* Just looks nicer */
	font-size:0.8em;line-height:1;
	color:#000000;
	background:url('images/splash/splash_description_bg.png') 0px 0px repeat;
	}

/* ---------------- Splash specific boxes ---------------- */

a.splash_box#splash_conducting::after{background-image:url('images/splash/splash_conducting.jpg');}
a.splash_box#splash_biography::after{background-image:url('images/splash/splash_biography.jpg');}
a.splash_box#splash_news::after{background-image:url('images/splash/splash_news.jpg');}
a.splash_box#splash_compositions::after{background-image:url('images/splash/splash_compositions.jpg');}
a.splash_box#splash_rhetoric::after{background-image:url('images/splash/splash_rhetoric.jpg');}
a.splash_box#splash_consort::after{background-image:url('images/splash/splash_consort.jpg');}