html,
body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

/*Wraps around everything and keeps footer at the bottom*/
#container {
    min-height: 100%;
    position: relative;
}    

#masthead {
    background-color: #FFC300;
}

/*Wraps around everything in between the header and the footer*/
#primary {
    padding-bottom: 65px; 
}

/*The footer*/
#colophon {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 65px; 
    background-color: #303030;
    color: lightgrey;
    font-size: 12px;
    padding: 10px 25px;
}

#colophon a {
    color: orange;
}

.wrapper-artist a {
    color: white;
}


body {
    font-family: 'Titillium Web', verdana, sans-serif;
    background:#03A856;
}

a {
    text-decoration: none;
 }

h1 {
     padding: 0;
     margin: 0;
 }

nav ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

nav ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
}

#site-navigation a {
    font-family: 'Baloo', verdana, sans-serif;
    font-size: 28px;
    color: #03A856;
    padding: 0 10px;
    line-height: 0.7;
}

#site-navigation a:hover {
    color: #DAF7A6;
    transition: 0.3s all ease;
}

.site-branding img {
    margin: 0 auto;
}

.main-soc-med a {
    color: #03A856;
    padding: 0 2px;
    font-size: 20px;
}

.main-soc-med a:hover {
    color: #DAF7A6;
    transition: 0.3s all ease;
}

.bungee {
    font-family: 'Bungee', verdana, sans-serif;
}

.bungee-shade {
    font-family: 'Bungee Shade', verdana, sans-serif;
}

.bungee-hairline {
    font-family: 'Bungee Hairline', verdana, sans-serif;
}

.unica-one {
    font-family: 'Unica One', verdana, sans-serif;
}

.hero-heading {
    font-size: 64px;
}

.hero-content {
    max-width: 750px;
}

.page-title {
    font-family: 'Bungee Shade', verdana, sans-serif;
    color: white;
    text-align: center;
    letter-spacing: 2px;
}

.soc-med-artist {
	text-align: center;
    font-size: 2.2rem;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 28px;
}

.soc-med-artist a {
	text-align: center;
    color: rgb(28, 40, 51);
    padding: 0 5px;
}

.soc-med-artist a:hover {
    color: rgb(255, 195, 0);
    transition: 0.3s all ease;
}

.wrapper-artist {
	width: 75%;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
    justify-content: center;
}

.wrapper-artist .tc img {
	width: 400px;
}

.artist-grid {
	display: flex;
	flex-wrap: wrap;
    padding-bottom: 50px;
    justify-content: center;
}

.artist-grid-item {
	margin: 25px;
	position: relative;
}

.artist-grid-item img {
	/*border-radius: 50%;*/
	width: 225px;
	box-shadow: 1px 1px 0px rgb(28, 40, 51), 2px 2px 0px rgb(28, 40, 51), 3px 3px 0px rgb(28, 40, 51), 4px 4px 0px rgb(28, 40, 51), 5px 5px 0px rgb(28, 40, 51), 6px 6px 0px rgb(28, 40, 51), 7px 7px 0px rgb(28, 40, 51),0px 0px 3px rgba(0,0,0,0.8);
}

.artist-label {
	background-color: rgb(255, 195, 0);
	position: absolute;
	top:175px;
	left:-20px;
	box-shadow: 1px 1px 0px rgb(28, 40, 51), 2px 2px 0px rgb(28, 40, 51), 3px 3px 0px rgb(28, 40, 51), 4px 4px 0px rgb(28, 40, 51), 5px 5px 0px rgb(28, 40, 51), 6px 6px 0px rgb(28, 40, 51), 7px 7px 0px rgb(28, 40, 51),0px 0px 3px rgba(0,0,0,0.8);
}

.label-text {
	font-family: "Unica One", "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
	color:rgb(28, 40, 51);
	text-transform: uppercase;
	margin:0;
	padding: 10px;
}


.label-text a:hover {
	color: rgb(218, 247, 166);
	transition: 0.3s all ease;
}



@media only screen and (max-width: 671px) {

    .site-branding {
        margin: 0 auto;
        padding: 10px 0;
    }

    #site-navigation {
        padding: 5px 0;
    }

    #site-navigation li {
        padding: 4px 0;
    }

    .main-soc-med li {
        padding: 10px 5px;
    }

    .wrapper-artist {
        width: 90%;
		padding-bottom: 60px;
    }

    .media-player p iframe{
        width: 90% !important;
    }

  }