@charset "utf-8";
/*Revisiting Hip Hop Now Available*/
/*Aurthor: Calvin Jenkins*/
/*Email: calvin@pgvdesigndevelopment.com*/

@font-face {
  font-family: 'GOTHAM-BOLD';
  src: url('../fonts/GOTHAM-BOLD.TTF')  format('truetype'); 
}
@font-face {
  font-family: 'GOTHAM-LIGHT';
  src: url('../fonts/GOTHAM-LIGHT.TTF')  format('truetype'); 
}

body { margin:0;font-family: 'GOTHAM-LIGHT', Helvetica, Arial, sans-serif; min-height:100%; background-color:#000;}
a { text-decoration:none;}
img {max-width:100%;}
li, span, a, img, section {-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.container { 
  background: url(../img/release-promo-revisiting-hip-hop.jpg) no-repeat ; -webkit-background-size: 100%;  -moz-background-size: 100%;
  -o-background-size: 100%;  background-size: 100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/release-promo-revisiting-hip-hop.jpg');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/release-promo-revisiting-hip-hop.jpg')"; background-attachment:fixed;
  min-height:740px; border:none;
  max-width:100%;
}
.header-block {height:30px; display:block; position: relative;}
.event-logo { position: relative; margin:0 auto; width:10%;}
#highlight {background-color: rgba(0, 0, 0, 0.5);border-bottom-left-radius: 6px 6px;border-bottom-right-radius: 6px 6px; padding: 10%;}
#highlight:hover, #highlight:focus {box-shadow: 0px 2px 10px 1px white;	background-color: rgba(0, 0, 0, 0.7);}
.page-menu {position: relative;width:100%; height:auto; font-size:2.1vw; z-index: 1003; }
.page-menu ul { list-style:none;  width:60%; margin:20px auto;  background: rgba(0,0,0,0.5); padding: 2% 2% 2% 2%; border-radius: 6px;}
.page-menu li { list-style:none; display:block;}
.page-menu li .btn1 { margin-bottom: 30px; }
.page-menu .styled-btn {background:#000; opacity: 0.7; color:#fff; border-radius: 6px;}
.page-menu li a {display: block; text-align: center;  padding:3% 3%;}
.page-contents {/*position: absolute;*/ display:block; width:100%; font-size:2.2vw;  color: #fff;   text-align:center;  bottom:2%;}
.promotional-content { height:100%; }
.promotional-content .promo {margin: 5% 0% 0% 20%; border-radius: 6px; background-color: rgba(0, 0, 0, 0.3);  width:60%; padding:2%;}
.promo h1 { text-transform: uppercase; font-weight:bold;}
.promo a {  text-shadow: 0px 2px #000000; color:white;}
.promo a:hover, .promo a:focus {text-decoration:underline;}
.promo ul { list-style: none;text-align:left;}
.disclaimer { color:#fff; font-size:16px; background: rgba(0,0,0,0.7); margin-left:16%}
.disclaimer a { color:#fff; }
.disclaimer a:hover, .disclaimer a:focus {text-decoration:underline;}
.styled-btn {background:#000;  -moz-box-shadow:3px 5px 0px rgba(0,0,0,0.46);-webkit-box-shadow:3px 5px 0px rgba(0,0,0,0.46);box-shadow:3px 5px 0px rgba(0,0,0,0.46); }
.styled-btn:hover, .styled-btn:focus {text-decoration:underline; opacity: 1.0;  }
.event-date { position:relative; font-size:3.5vw; color:#ff7900; text-transform:uppercase; margin-bottom:1%;}
#event-call-to-action { font-family: 'GOTHAM-BOLD', Helvetica, Arial, sans-serif; position:relative; height:100%; border-radius: 6px; padding:0 2%; background-color: rgba(0, 0, 0, 0.5); font-size:8vw; font-weight:bold; display:inline-block;}
.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { display:none;}
.call-to-action-1 { height:auto;}
.event-registration { font-family: 'GOTHAM-BOLD', Helvetica, Arial, sans-serif; opacity: 0.7; position: relative;width: 50%; height:10%; text-transform:uppercase; background:#000; -moz-box-shadow:3px 5px 0px rgba(0,0,0,0.46);-webkit-box-shadow:3px 5px 0px rgba(0,0,0,0.46);box-shadow:3px 5px 0px rgba(0,0,0,0.46); margin:3% auto;padding:2% 2%;font-weight:bold; border-radius: 6px;}
.event-registration:hover, .event-registration:focus {opacity: 1.0; }
.event-registration a {color: #fff;  font-weight:bold; }
.event-registration a:hover, .event-registration a:focus {text-decoration:underline;  opacity: 1.0; }
.event-registration .top-line { font-size:1.8vw; font-family: 'GOTHAM-LIGHT', Helvetica, Arial, sans-serif;}
.event-registration .bottom-line { font-size: 2.5vw; padding-top:1%; }
/* On page popup overlay */
.overlay-bg {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content {
display: none;
background: #fff;
width: 80%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -40%; /* add negative left margin for half the width to center the div */
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 0px 2px rgba(0,0,0,0.9);
}
.close-btn {position:absolute; padding:3px 6px; color:#000; border:1px solid #000; text-decoration:none; right:0px; top:0px; font-size:16px;}
.close-btn:hover {text-decoration: underline;}
.hidden-content-area {padding: 15%; font-weight: lighter; font-size:16px; margin:10 auto; }
.hidden-content-area a{ font-family: 'GOTHAM-BOLD', Helvetica, Arial, sans-serif; font-weight:bold; text-decoration:underline; }
.hidden-content-area a{ color:#000; padding:3px 6px; }


/* code for animated menu icon */


/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 35px;
  height: 35px;
  position: relative;
  margin: 10px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 10001;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #fff;
  background:rgba(255, 255, 255, 0.9);
  /*border-radius: 9px;*/
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 13px;
}

#nav-icon1 span:nth-child(3) {
  top: 26px;
}

#nav-icon1.open span:nth-child(1) {
  top: 13px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 13px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 50%;
  background: #fff;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 18px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 36px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 5px;
  top: 29px;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* Icon 4 */

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

/*End anymated icon code */


#nav-menu{
	display:none;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out; 
}


/* media query for medium display devices */
@media only screen and (max-width: 1280px){
	.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:100px;}
}	

/* media query for small display laptop devices */
@media only screen and (max-width: 1180px){
	.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:90px;}
} 
/* media query for small display laptop and larger display tablet devices */
@media only screen and (max-width: 1080px){
	.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:80px;}
}
/* media query for small display devices */
@media only screen and (max-width: 980px){
		.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:70px;}
}	
/* media query for small display devices */
@media only screen and (max-width: 880px){
		.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:60px;}
}	

/* media query for most tablet devices */
@media only screen and (max-width: 780px){
	.container { background-position: 0% 10%; min-height:540px;}
	.page-menu {font-size:3vw;}
	.page-contents {font-size: 4vw;}
	.event-registration .styled-btn { padding:4%; }
	.event-date { margin-bottom:1%;}
    #event-call-to-action { margin-bottom:20%;}
	.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:40px;}
}

/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 680px){	
}
/* media query for most mobile phone devices */
@media only screen and (min-width: 0px) and (max-width: 580px){		
	
	.event-date { font-size:3.6vw;}
    #event-call-to-action { font-size:9vw;}
	.call-to-action-1,.call-to-action-2,.call-to-action-3,.call-to-action-4,.call-to-action-5,.call-to-action-6,.call-to-action-7 { height:30px;}
	.event-registration .top-line { font-size:12px; }
	.event-registration .bottom-line { font-size: 16px; }
}

/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px){		
  #event-call-to-action {top:30%;}	
}
/* media query for iPhone devices */
@media only screen and (min-width: 0px) and (max-width: 380px){	
	.event-date { font-size:12px; }
    #event-call-to-action {font-size:24px;}
	.event-registration .top-line { font-size:10px; }
	.event-registration .bottom-line { font-size: 15px; }
}