@charset "utf-8";
/* CSS Document */
/* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
body{
	background-position:center center;
	background-size: cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-color:#000;
	font-family: 'Inconsolata', monospace;
	font-size:18px;
	color:#e1ffe1;
	line-height: 1.3;
	}
#dropdown { z-index:1000; }		

.BgHome {background-image:url(../images/site/artwork/bg-artwork-ROHI-1.jpg);}
.BgPage {background-image:url(../images/site/artwork/bg-artwork-ROHI-3.jpg); background-position:bottom; background-attachment:fixed;background-size: cover;}
#home h2 { text-transform:uppercase; color:#FFF; font-size:22px;}
#home h2:hover { text-decoration:underline;}
#home h2 span { background-color:rgba(0, 0, 0, 0.40);  padding: 0 10px;}
h1, h2, h3, h4, h5, h6 { font-family: 'Inconsolata', monospace; }
@media only screen and (max-width: 420px) {
	h1 { font-size:26px;}
	h2 { font-size:20px;}
}

p {} @media only screen and (max-width: 768px) {p { font-size:16px;}}

#page h1 { }
.breadcrumbs { font-size:14px;}
hr {border-top: 1px solid #eee;margin: 40px 0 0;}		
a { color:#99cc33;}
.rohi-title { color: #2196F3 !important; font-style:italic; text-decoration:none !important;}
.sots-title { color: #f44336 !important; font-style:italic; text-decoration:none !important;}

/*Store*/
.item-status-label { padding:2px 15px; font-size:75%;}
.item-price { font-size:24px; font-weight:bold; color:#CCC;}
.item-options-dropdown { font-size: 17px; }
@media only screen and (max-width: 1280px) { .item-options-dropdown { max-width: 185px;} }
@media only screen and (max-width: 992px) { .item-options-dropdown { max-width: 320px;} }

.pp-button {
	font-size:15px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	border-radius:15px; 
	padding:4px 20px 3px; 
	text-decoration:none;
	background-color:#ffc439;
	color:#000;
	}
.pp-blue { background-color:#009cde;}
.pp-yellow { background-color:#ffc439;}

.cart-button { margin-bottom: -42px; padding-top:20px;}
@media only screen and (max-width: 480px) { .cart-button { margin-bottom: 10px;} }

.item-anchor { padding-bottom:40px;}

/*PROMO---------------*/
/*Promo ROHI*/
/* PARALLAX */
.parallax {
    /* The image used */
    background-image: url("../promo/images/Bg-ROHI.jpg");
    /* Set a specific height */
    min-height: 1000px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#bg-1 {
    /*background-image: url('../promo/images/Logo-OldSchool.png');*/
	max-width:780px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin:auto;
}
/*---------------/PROMO*/
/*Utilities*/
.margin-top-0 { margin-top:0 !important;}
.margin-top-10 { margin-top:10px !important;}
.margin-top-20 { margin-top:20px !important;}
.margin-bottom-0 { margin-bottom:0 !important;}
.margin-bottom-05 { margin-bottom:05px !important;}
.margin-bottom-10 { margin-bottom:10px !important;}
.margin-bottom-20 { margin-bottom:20px !important;}
.pointer {cursor:pointer !important;}		
.italic { font-style:italic !important;}
.bold { font-weight:bold !important;}
.font-10 { font-size:10px !important;}
.font-15 { font-size:15px !important;}
.padding-bottom-10 { padding-bottom:10px !important;}
.padding-bottom-20 { padding-bottom:20px !important;}
.padding-top-05 { padding-top:5px !important;}
.padding-top-10 { padding-top:10px !important;}
.padding-top-20 { padding-top:20px !important;}
.padding-tb-10 { padding:10px 0 !important;}
.padding-lr-10 { padding:0 10px !important;}
.padding-0 {padding:0px;}
.padding-05 {padding:05px;}
.padding-10 {padding:10px;}
.no-side-padding { padding-left:0; padding-right:0; }
.no-text-underline { text-decoration:none !important;}
.top {vertical-align: text-top;}
.bottom {vertical-align: text-bottom;}
.uppercase { text-transform:uppercase;}

.border-bottom-center {
	padding-bottom: 10px;
	border-style: solid;
	border-width:  0 0 2px;
	border-image: linear-gradient(90deg, rgb(0,0,0, 0), rgb(205,220,057), rgb(0,0,0, 0)) 1;
	}

/*Tweaks*/
.w3-animate-fading-1s { animation: fading 1s infinite !important; }
.w3-modal {background-color: rgba(0,0,0,0.7);}
.w3-modal-content {width: 600px;}

/*Live Shows*/
#show-ads { margin-top:0px; margin-bottom:40px;}
@media only screen and (max-width: 420px) { #show-ads { margin-top:0px; margin-bottom:40px;} }

/*Bio*/
.font-effect-3d {
    text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #cddc39, 0px 8px 7px #001135;
    color: #fff;
}

.font-effect-fire {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70, 0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
    color: #ffe;
}

.archive-header { font-family: 'Permanent Marker', cursive; font-size:4.3rem;}
@media only screen and (max-width: 768px) { .archive-header {font-size:3rem;} }
@media only screen and (max-width: 420px) { .archive-header {font-size:26px;} }

#folder-band a{text-decoration:none !important;color: #99cc33 !important; filter: sepia(0%) !important;}
.tape-topleft {margin:-25px 0 0 30px;}
.tape-topleft img { width:220px;}
.tape-bottomright {margin:0 30px -20px 0px;}
.tape-bottomright img { width:220px;}
.file-image-container { margin-top:30px; margin-bottom:30px;}
.file-image-container p { margin-top:-40px; font-family: 'Permanent Marker', cursive; font-size: 20px;}
.file-image-border { border:6px solid #fff !important;}
#photos p { color:#333;}
.w3-sepia,.w3-hover-sepia:hover{filter: sepia(75%);}.w3-sepia-off,.w3-hover-sepia-off:hover{filter: sepia(0);}

/*Lyrics*/
#lyrics h3 { margin-bottom:0px;}
#lyrics p { margin-top:10px;}
#Song1, 
#Song2, 
#Song3, 
#Song4, 
#Song5,  
#Song6,
#Song7,
#Song8,
#Song9,
#Song10 {background-color: rgba(255, 255, 255, 0.10); margin-bottom:10px;}
		
.OM-container-top { max-width:980px; margin:auto; padding: 0;}	
@media only screen and (min-width: 1280px) {.OM-container-top {max-width: 1170px;}}
@media only screen and (min-width: 1680px) {.OM-container-top {max-width: 65%;}}
		
.container-bottom { max-width:195px; margin:20px auto; padding-bottom:20px;}
	
.w3-content {}
@media only screen and (min-width: 1280px) {.w3-content {max-width: 1170px;}}	
@media only screen and (min-width: 1680px) {.w3-content {max-width: 1350px;}}	

.content-page-Bg { margin-top:50px; background-color: rgba(12, 111, 179, .15);}

.home-logo {
	position: relative;
	width: 100%;
	margin:auto;
	margin-top:80px;
	text-align:center;
	 z-index: 0 !important;
	} 
@media only screen and (max-width: 767px) {.home-logo {margin-top:5rem;}}	
@media only screen and (max-width: 480px) {.home-logo {margin-top:60px;}}

.splash-logo {  max-width:100%; margin-bottom:40px;}
@media only screen and (max-width: 740px) {.splash-logo {  max-width:240px;}}
@media only screen and (max-width: 420px) {.splash-logo {  max-width:290px; margin-bottom:0px;}}
@media only screen and (max-width: 360px) {.splash-logo {  max-width:160px;}}

.home-CD {
	position: relative;
	width: 100%;
	margin:auto;
	margin-top:80px;
	padding:0 30px 0 10px !important;
	text-align:center;
	 z-index: 0 !important;
	} 
	@media only screen and (max-width: 768px) {.home-CD {padding:0 40px 0 0 !important;}}
	@media only screen and (max-width: 600px) {.home-CD {margin-top:0; padding:0 20px !important;}}
	@media only screen and (max-width: 420px) {.home-CD {margin-top:0; padding:0 5px !important;}}

/*Music*/
#image {
	background-color: #000;
	padding: 0 1px 0px 1px;
	}
.image-credit { 
    margin-bottom: -12px; 
	margin-right: 6px; 
	opacity: 0.50;
	text-align: right !important;
	font-size: 10px;
	}
.player-section-1 {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 355px;
    text-align: left;
}	
@media only screen and (min-width: 1280px) { .player-section-1 { height: 390px;} }
@media only screen and (max-width: 768px) { .player-section-1 { height: 250px;} }
@media only screen and (max-width: 420px) { .player-section-1 { height: 350px;} }

.music-album-title {margin:5px 0 ;}
.music-album-company {margin-top: 0px;}
.dedicatorial { color:#F96; font-size:16px;} 
#idmgy h3 { font-family:inherit;}
#idrohi h3 { font-family:inherit;}
#idsots h3 { font-family:inherit;}
#advtape h3 { font-family:inherit;}

.music-stores-header { margin:0 0 5px;}

.music-buttons a { margin:5px 2px; padding: 10px 20px; border-radius: 0px; font-size: 28px;}
@media only screen and (max-width: 1920px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 1679px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 1280px) { .music-buttons a { margin:5px 0; padding: 12px 12px; } }
@media only screen and (max-width: 939px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 768px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 600px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 536px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 420px) { .music-buttons a { margin:5px 0; } }
@media only screen and (max-width: 375px) { .music-buttons a { margin:5px 0; font-size: 24px; } }
@media only screen and (max-width: 320px) { .music-buttons a { margin:5px 0; padding: 8px 8px;} }


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Responsive video Controls */
#video {
	width:100% !important; 
	height:auto !important; 
	background-color: rgba(0,0,0, 0.6);
	}
.videoWrapper-home {
    position:relative;
	padding-bottom:56.25%;
	/* 16:9 */ 
	padding-top:0; 
	height:0;
	margin-bottom:60px; 
	margin-top:40px;
	}
	@media only screen and (max-width: 420px) { .videoWrapper-home { margin:0px 0 30px; } }
.videoWrapper-home iframe {position:absolute; top:0; left:0; width:100%; height:100%; padding:10px;}	
/* /Responsive video Controls */

/*--------------------------------------*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(../images/site/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
/*--------------------------------------*/
/*BIO*/

#bio-text p { margin-top:0;}

.bio-folder-desktop {
	padding-top:20px;
	/*background-color: rgba(0, 51, 0, 0.8);	*/
	}
.bio-folder-desktop h2 { font-size:42px;}
  @media only screen and (max-width: 420px) { .bio-folder-desktop h2 {font-size:30px;} }
  @media only screen and (max-width: 375px) { .bio-folder-desktop h2 {font-size:26px;} }
  @media only screen and (max-width: 320px) { .bio-folder-desktop h2 {font-size:22px;} }

.w3-hover-bio-folder-01:hover { background-image:url(../images/01/Folder-Pic-2.png); z-index:10000;}

.bg-black-opacity-40 { background-color: rgba(0,0,0, .50);}
.bg-table-store { background-color: rgba(51, 102, 102, 0.15); }

#Gallery { }
#Gallery img { padding:6px;}
@media only screen and (max-width: 375px) { #Gallery img {} }

.bio-preview { height:100px; overflow: hidden;}
@media only screen and (max-width: 1280px) {.bio-preview {height:120px;} }
@media only screen and (max-width: 860px) {.bio-preview {height:140px;} }
@media only screen and (max-width: 680px) {.bio-preview {height:100%;} }


/*@media only screen and  (max-width: 1280px) {.bio-preview { height:120px; }}
@media only screen and  (max-width: 880px) {.bio-preview { height:140px; }}
@media only screen and  (max-width: 780px) {.bio-preview { height:135px; }}
@media only screen and  (max-width: 750px) {.bio-preview { height:150px; }
@media only screen and  (max-width: 600px) {.bio-preview { height:100%; }}*/


/*--------------------------------------*/
/*Video*/
/*Banner*/
.fullscreen-bg-container { height:100% !important; }
.fullscreen-bg {
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.fullscreen-bg {
	padding:80px 0 0; 
	height:100%; 
	}
.fullscreen-bg__video {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: auto;
}
/*@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: auto;
    height: 100%;
  }
}*/
@media (max-width:1020px) {
  .fullscreen-bg__video {
    width: auto;
    height: 108%;
  }
}

@media (max-width:940px) {
  .fullscreen-bg__video {
    width: auto;
    height: 100%;
  }
}
@media (max-width:768px) {
  .fullscreen-bg__video {
	margin-left: -12%;
  }
}
@media (max-width:680px) {
  .fullscreen-bg__video {
	margin-left: -21%;
  }
}
@media (max-width:420px) {
  .fullscreen-bg__video {
	margin-left: -50%;
  }
}
@media (max-width:375px) {
  .fullscreen-bg__video {
	margin-left: -75%;
  }
}
.video-controls { margin-left: 2%;}
@media (max-width:600px) { .video-controls { margin-left: 10%;} }
.my-display-middle {
    position: absolute;
	width:100%;
	padding-top: 80px;
}
@media only screen and (max-width:600px){ .my-display-middle { padding-top: 60px;}}
.my-display-bottommiddle {
    position: absolute;
    bottom: 0px;
    transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
	width:100%;
}
.banner-container { text-align:center; } 
.banner-container {
	background-position:top center;
	background-attachment:fixed;
	padding:10px 20px;
	margin-bottom:10px;
	}
@media only screen and (max-width:1680px){.banner-container { padding:0;}}	
@media only screen and (max-width:435px){.banner-container { padding:0px 5%;}}	
.banner-container div {
    border-radius: 0px;
    padding: 0px;
	margin-bottom:10px;
}
@media only screen and (max-width:435px){ .banner-container div  { margin-bottom:10px; }}	
.banner-container h1 {
	font-size:33px;
	color:#FFF;
	line-height:1.2;
	text-shadow:1px 1px 0 #444;
	margin: 0;
	}
@media only screen and (max-width:780px){.banner-container h1 { font-size:30px;} }
@media only screen and (max-width:680px){.banner-container h1 { font-size:24px;} }
@media only screen and (max-width:600px){.banner-container h1 { } }
@media only screen and (max-width:435px){.banner-container h1 { font-size:20px;}}
.banner-logo { max-width:190px; margin-top:-35px;} 
@media only screen and (max-width:780px){.banner-logo { max-width:140px;} }
.banner-button { font-size:130%;} 
@media only screen and (max-width:780px){ .banner-button { font-size:110%;} }

.banner-container-bottom {
	padding:0 0 0;
	color:#FFF;
	}
.banner-container-bottom p {
	font-size:22px;
	color:#FFF;
	margin:0 ;
	padding:22px 20%;
	text-align:center;
	}
@media only screen and (max-width:1680px){.banner-container-bottom p { padding:22px 10%;}}
@media only screen and (max-width:480px){.banner-container-bottom p { font-size:18px; margin:0; padding:15px 5%;}}


 /* Slideshow container */
            .slideshow { /*NOT slideshow-container*/
                position: relative;
                margin: auto;
            }


/*--------------------------------------*/
#footer { margin-top:0px; padding-bottom:20px; color:#FFF; background-color: rgba(0,0,0, 0.6); height: 250px;}
.footer-bar-r { text-align:right;}
.footer-bar-l { text-align:left;}
@media only screen and (max-width:600px){.footer-bar-r {text-align:center;} .footer-bar-l {text-align:center;}}
.press-tools-footer a { text-decoration:none;}
.copyright { color: #666; margin-bottom:100px; font-size:10px !important;margin-top: 20px;}
.FooterAdd { color:#900; margin-bottom:10px; font-size:9px;}
.border-bottom { box-shadow: 0px 0px 40px rgba(205, 220, 57, 0.6);}