body
{
	margin: 0px;
	font-family: verdana, arial, sans-serif;
	font-size: 1rem;
	font-weight: normal;
	color: #000;
	background-color: #fff;
}

body a { color: #2e2f2c; }

.clearafter:after {
    content: '';
    display: block;
    clear: both;
}

#skip-link
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	margin: 0px;
	text-align: center;
	color: #000;
}

#skip-link a
{
	position: absolute;
	top: 5px;
	left: -99999px;
	color: #000;
	background-color: #fff;
	
}

#skip-link a:active, #skip-link a:focus, #skip-link a:hover
{
	position: relative;
	top: 5px;
	left: 0px;
	width: auto;
	height: auto;
	overflow: visible;
	margin: 0 auto;
	padding: 10px 10px 10px 10px;
	text-align: center;
	color: #000;
	background-color: #fff;
}

#header { }

.branding{
	margin: 0px auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 15px;
}

.banding {
	justify-self: start;
	align-self: center;
}

.user-tools {
	justify-self: end;
	align-self: center;
}

nav.user-tools a{
	padding-right: 7px;
	color: #017ABC;
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#hero {
  background: url('../images/hero_1600w.jpg') center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #202020;
  padding: 1.5rem;
}


#hiphoplogo {
	float: left;
	width: 200px;
	padding-right: 30px;
}

#hero-title
{
	font-family: 'Montserrat Alternates', sans-serif; 
	font-weight: 900;
	font-size: 3.5rem;
	color: #fff;
	line-height: 3.5rem;
	letter-spacing: .15rem;
}

#hero-aside
{
	max-width: 500px;
	clear: left;
	padding: 2.2rem 4rem 1.5rem 4rem;
	font-family: verdana, arial, sans-serif;
	font-size: 1.2rem;
	font-style: italic;
	color:#C4C4C4;
	line-height: 3rem;
	width: 35%;
}


#mainnav
{
	margin: 0px;
	padding: 0px;
	font-size: 1.4rem;
	letter-spacing: 1px;
	text-align: left;
	white-space: nowrap;
}

#mainnav .icon {
  display: none;
}

#mainnav a {
	margin-right: 20px;
	padding: 0px;
	text-align: center;
	font-weight: normal;
	color: #555;
	text-decoration: none;
}

#mainnav a:hover, #mainnav a:active
{
	color: #880000;
	text-decoration: none;
}

#mainnav a.selectednavtab
{
	color: #880000;
	font-weight: bold;
}



#socialmedia
{	
	margin: 0px;
	padding: 0px;
	text-align: right;
}


#mainframe
{
	max-width: 1200px;
	margin: 0px auto;
	background-color: #fff;
	padding: 0px 30px 20px 30px;
	font-family: verdana, arial, sans-serif;
	font-size: 1rem;
	line-height: 28px;
	font-weight: normal;
	color: #222;
}

#mainframe a { text-decoration: underline; }

#mainframe a:link, #mainframe a:visited { color: #880000; }

#mainframe a:hover, #mainframe a:active { color: #f00; }

/*#mainframe p:before {
  content: "";
  width: 200px;
  display: block;
  overflow: hidden;
  clear: left;  
}*/

.imagemediumright {
	float: right;
	width: 500px;
	margin: 0px 0px 60px 30px;
}

.carrousel_image {
  width: 100%;
  margin: 0px;
  padding: 0px;
}



.hiphopcollitem {
	clear: left;
	margin: 25px 0px 20px 0px;
}


.hiphopcollimage {
	float: left;
	margin: 5px 20px 10px 0px;
	border-radius: 10px;
	/*box-shadow: 5px 5px 8px #999;*/
}

.hiphopcolldescription {
	margin: 0px 0px 0px 170px;
}

#footer
{
	margin: 0px auto;
	padding: 20px 10px 30px 30px;
	font-family: verdana, arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6rem;
	font-style: normal;
	font-variant: normal;
	color: #bbb;
	background-color: #2e2f2c;
}

#footer p
{
	margin: 8px 0px 0px 0px;
	font-style: normal;
}

#footer a { text-decoration: underline; color: #fff; }



H1
{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	font-weight: nold;
	color: #880000;
	font-style: normal;
	font-variant: normal;
}

H2
{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color: #000;
	font-style: normal;
}

H3
{
	font-size: 1.2rem;
	font-weight: bold;
	color: #000;
	font-style: normal;
}

H4
{
	font-size: 1rem;
	font-weight: bold;
	color: #000;
	font-style: normal;
}

.culib
{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4rem;
	color: #ddd;
}

.culib a { text-decoration: none; }


@media screen and (max-width: 1000px)
{
	#hero { padding: 1.6rem 1.8rem 2rem 1.6rem; background-size: contain; background-position: right; }
	.branding {padding: 10px 5px;}
	#hero-title{ font-size: 5vw; line-height: 5vw;}
	#hero-aside {display: none;}
	#hiphoplogo {padding-right: 20px; width: 18%;}
	#mainnav { margin: 0px; padding: 0px; font-size: 1.4rem;}
	#mainnav a {display: none;}
	#mainnav.responsive { padding: 0px 2px 2px 2px; box-shadow: 0px 0px 0px 3px #eee; }
  #mainnav.responsive a { float: none; display: block; clear: left;  margin-top: 10px; text-align: left;}
  #mainnav a.icon { float: left; display: block; margin-top: 0px; }
	#mainframe{padding: 0px 15px 20px 15px;}
	.imagemediumright {width: 400px; margin-bottom: 30px;}
	H1 { font-size: 1.6rem;}
}

@media screen and (max-width: 660px)
{
	#hiphoplogo {display: none;}
	.imagemediumright {float: none;	 margin: 30px auto;}
	.hiphopcollimage { margin-bottom: 10px; }
	.hiphopcolldescription { margin: 0px 0px 0px 0px; }
	#footer { padding: 10px 15px; }
}

@media screen and (min-width: 2000px)
{
	#hero-title{ font-size: 4.5rem; line-height: 4.5rem;}
	#hiphoplogo {width: 250px;}
	#hero-aside { padding-left: 8vw;}
}




/* ------------------ carrousel styles ------------------ */
.relative { position: relative; }
.mod--hidden { overflow: hidden; }

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  color: #000;
  background-color: #fff;
}

.rmc-carrousel__container {
  white-space: nowrap;
}

/* ------------------ hack to fix left spacing between carrousel images with slide transition ------------------ */
/*.js-carrousel__content{
	margin-right: -5.6px;
}*/

.rmc-carrousel__control__list {
  position: absolute;
  list-style-type: none;
  top: 100%;
  right: 0;
  left: 0;
  margin-top: -0.5em;
  padding-left: 0;
  text-align: center;
}
.rmc-carrousel__control__list__item {
  display: inline-block;
  margin: 0 .5em;
}
.rmc-carrousel__control__list__link {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #fff;
  border: 1px solid #880000;
  border-radius: 1em;
  cursor: pointer;
}

.rmc-carrousel__button-container {
  position: absolute;
}
.rmc-carrousel__button__previous {
  bottom: -25px;
  left: 15px;
}
.rmc-carrousel__button__next {
  bottom: -25px;
  right: 15px;
}
.rmc-carrousel__button__button {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.carrousel_caption {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	text-align: center;
	font-size: 1rem;
	background-color: #fff;
	color: #595959;
}

/* only for minimalist example */
.carrousel__content[aria-hidden=true] {
  display: none;
}
/* ------------------ State rules ------------------ */
.rmc-carrousel__control__list__link:focus,
.rmc-carrousel__control__list__link:hover,
.rmc-carrousel__control__list__link:active,
.rmc-carrousel__control__list__link[aria-selected=true] {
  background: #880000;
}
.rmc-carrousel__control__list__link:focus,
.rmc-carrousel__control__list__link:hover,
.rmc-carrousel__control__list__link:active {
  outline: 2px dotted #4d287f;
}


/* ------------------ transition slide ------------------ */
.slide .carrousel__content {
  display: inline-block;
  vertical-align: top;
  visibility: visible;
  width: 100%;
  position: relative;
  transition: visibility 0s ease, transform .5s ease-in;
  transition-delay: 0;
  white-space: normal;
}

[data-carrousel-active-slide="1"].slide > .carrousel__content {
  transform: translateX(0);
}
[data-carrousel-active-slide="2"].slide > .carrousel__content {
  transform: translateX(-100%);
}
[data-carrousel-active-slide="3"].slide > .carrousel__content {
  transform: translateX(-200%);
}
[data-carrousel-active-slide="4"].slide > .carrousel__content {
  transform: translateX(-300%);
}
[data-carrousel-active-slide="5"].slide > .carrousel__content {
  transform: translateX(-400%);
}
[data-carrousel-active-slide="6"].slide > .carrousel__content {
  transform: translateX(-500%);
}
[data-carrousel-active-slide="7"].slide > .carrousel__content {
  transform: translateX(-600%);
}
[data-carrousel-active-slide="8"].slide > .carrousel__content {
  transform: translateX(-700%);
}
[data-carrousel-active-slide="9"].slide > .carrousel__content {
  transform: translateX(-800%);
}

[data-carrousel-active-slide].slide > [aria-hidden="true"].carrousel__content {
  visibility: hidden;
  transition-delay: .5s, 0s;
}



/* ------------------ transition fade ------------------ */
.fade .carrousel__content {
  -webkit-animation: fadein 1s;
  animation:         fadein 1s;
  white-space: normal;
}
.fade .carrousel__content[aria-hidden=true] {
  -webkit-animation: fadeout 1s;
  animation:         fadeout 1s;
}
.fade .carrousel__content[aria-hidden=true] {
  display: none;
}

@keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}



/* ------------------ transition none ------------------ */
.none .carrousel__content {
  white-space: normal;
}
.none .carrousel__content[aria-hidden=true] {
  display: none;
}