@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
@import url('https://fonts.googleapis.com/css?family=Voces');
@import url('https://fonts.googleapis.com/css?family=Paprika');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

/*
====================== START OF SPECIFIC RULES/STYLES FOR THE MUSIC PAVILION ======================
 */
/**
 * STYLES ORDER
 *
 * Positioning (inc. float, position, z-index
 * Box Model (margin/padding)
 * Dimensions (width/height)
 * Font (font-size, etc)
 * Colors (background first, text second)
 * Text (any text modifications)
 * Borders (if applicable)
 * Animations (if applicable)
 */
/* Temporary for Placeholder Page before launch. Remove after */
.transparent{background: transparent;}
.temp-content-container{background-color: #363636;}
.col-88{width: 88%;}
.proza{font-family: 'Proza Libre', sans-serif;}
.page-header{font-size: 2rem;}
.page-h2{
    font-size: 1.5rem;
    text-transform: uppercase;}
body{
	color:#FFF;
    padding-bottom:100px;
}

/* Navigation */
.nav-container{
	background-color: #252525;}

/** ===== CONTAINERS and GLOBAL STYLES ========= */
/* Main Content Container */
.content-container{
	height: 100%;
	background-color: transparent;
	font-family: 'Roboto', sans-serif;}
    .content-container.home{
        margin-top:0;
    }
    .welcome-container{
        margin: 0 0 10% 23%;
        padding-top:100px;
    }
        .welcome-container img{ padding: 0; margin: 0; }
        .title-font{
        	padding: 0 0 1% 3%;
        	letter-spacing: 2px;
        	font-family: 'Josefin Sans', sans-serif;
        	font-size: 3.5rem;
        	text-transform: uppercase;
        	text-shadow: 0px 0px 6px #4d79ff;}

/* ====== START OF SPECIFIC RULES/STYLES FOR THE MUSIC PAVILION ======== */
/* Temporary for Placeholder Page before launch. Remove after */
.temp-content-container{background-color: #363636;}

/* =========== Containers =========== */
/* Navigation */
.nav-container{
	background-color: #252525;}

/**
 * ================== Containers
 */
 /* Intro Text */
 .intro-copy{width:72%;
 	text-align:center;}
.content-container{
	margin-top: 10%;
	height:80%;
	background-color: transparent;
	font-family: 'Roboto', sans-serif;}

.banner-container{
	display: table;
	margin-top: -5%;
    background: #000;
    width:100%;
}
.top-banner{
	z-index:2;
    position:relative;
	width: 100%;
    height: 250px;
    margin:auto;
    display:block;
    padding-top:75px;
}

.black-back{
    background:url('/images/black-scratches.jpg');
    background-attachment:fixed;
    background-size: cover;}
.black-back.top{
    /*border: 1px solid #fff;*/
    border-left-width:0px;
	text-shadow: 3px 3px 20px #fff;
	box-shadow: 6px 6px 30px #fff;}
.site-header{
    display: block;
    margin: 0 auto;
    width:900px;
}
.top-nav{
    position:absolute;
    width:100%;
}
    .top-nav .site-icons.transparent{
        margin: 0 auto;
        width:60%;
        text-align:center;
    }
        .top-nav .site-icons.transparent img{
            padding-right:5px;
        }
            .top-nav .site-icons.transparent li{
                float: left;
                display:block;
                width:180px;
                border:1px solid white;
                list-style-type: none;
                text-transform: uppercase;}
                .top-nav .site-icons.transparent a{
                    color: #fff;
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.2rem;
                    text-decoration: none;}

/**
 * ================== FOOTER
 */
.foot-container{background-color: #252525;}
    .footer{
        position: fixed;
        width: 100%;
        height: 11%;
        margin-top: 1%;
        bottom: 0;
        background: #252525;}
        .footer .footer-ul{
            display: block;
            margin: 0 auto;
            padding-top: 1%;
            width: 90%;}
            .footer .footer-ul li{
                float: left;
                list-style-type: none;
                text-transform: uppercase;
				text-align:center;
                min-width: 20%;}
                .footer .footer-ul a{
                    color: white;
                    font-family: 'Roboto', sans-serif;
                    text-decoration: none;
                    width: 100%;}
            .footer .footer-ul img{
                padding-right: 7%;
                vertical-align: text-top;}
        .footer p{
            clear: both;
            text-align: center;
            padding: 12px 0 2px 0;
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;}

/** ================== RESOURCES  ================== */
.resources-container{
    margin: 15% 0 15% 13%;
	width: 70%;
	color: #AFAFAF;
	font-family: 'Roboto', sans-serif;}
    .resource-link a{
    	color: #000;
    	transition-duration: 0.5s;
    	text-decoration: none;}
    	.resource-link a:hover{
    		background: #000;
    		color: #4d79ff;
    		transition-duration: 0.5s;}
    .resources-container img{
        max-width:100%;
        max-height:100%;
        margin: 1% 0 1% 0;}

.right-main-container{
    margin-top:0px;
    margin-left: 2em;
    padding-top:100px;
    padding-bottom:100px;
    padding-left:225px;
    max-width: 80%;
	font-family: 'Roboto', sans-serif;
	color: #AFAFAF;}

.body-container{
    width:90%;}
    .body-container a{
        color:#a85751;}
.article-video a{
    color:#a85751;}

/** ================== ARTIST FEATURES  ================== */
.feature-headline{
	font-size: 2rem;
	text-transform: uppercase;}

/** ================== ABOUT PAGE  ================== */
.about-content-wrapper{}
.about-content-wrapper img{margin:1%;}
.about-content-wrapper a {color: #4d94ff; text-decoration:none;}
.about-content-wrapper p{padding:1%;}
.about-content-wrapper li{
	list-style:none;}
    .about-content-wrapper li a::before{
    	content:"»";
    	color:#4d94ff;
    	font-size:1.3rem;
    	padding:1%;}

/** ================== ARTIST FEATURES  ================== */
.pagination-container{}
    .pagination-container ul{
    	list-style:none;
    	margin: 0;}
        .pagination-container li {
            float: left;
            margin-right: 0.5%;
            width: 5%;
            font-size: 1.4rem;
            text-align: center;
            text-transform: uppercase;}
            .pagination-container a{
            	display: block;
            	padding: 1%;
            	background: rgba(255,255,255,0.25);
            	color: #000;}
                .pagination-container li a::hover{
                	background:#4d94ff;
                	color: red;}
.page-preview-wrapper{
    margin-left:2em;
    max-width:80%;}
    .page-preview-wrapper a{
        color:#a85751;
    	text-decoration: none;
    	transition-duration: 0.5s;
        font-weight: 400;
        letter-spacing: 1px;}
        .preview-description{
            width:80%;
            font-size:1.1rem;
        }
        .read-more{
            display: block;
            padding: 0.25%;
            width: 150px;
            background: #4d79ff;
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
            border: 1px solid #9a9a9a;
            margin:10px 0;
            transition-duration: 0.5s;}
            .read-more:hover{
                background: #fff;
                color: #4d79ff;
                transition-duration: 0.5s;}