@charset "UTF-8";
/* CSS Document */

html { width:100%; min-height: -webkit-fill-available; height:100vh;}

body {
	height:100vh;
	min-height: -webkit-fill-available;
	min-height:100%;
	font-family: 'Raleway', sans-serif;
	background:url(../images/bg.jpg) no-repeat center center fixed;
	background-color:#A6A6A6;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100% cover;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	
	color:#000000;
	font-size:14px;
	font-weight:400;
	margin:0px;
}

*:focus { outline:0!important;}

.clearfix {
	clear:both;
}

a {
	font-weight:700;
	text-decoration: none;
	color:#5f490a;
}

a:hover {
	color:#000000;
	cursor: pointer;
}

.credit {
    font-size:10px;
    color:#ffffff;
    margin:-20px 0px 0px 10px;
    -moz-text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
	-webkit-text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
}

.container-fluid {
	background:rgba(245, 245, 245, 0.8)!important;
	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
	position:relative;
	margin:50px auto 0px;
	padding:0px 0px 0px 0px;
}

.shadow {
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.btn:hover {
	opacity:0.7;
	cursor: pointer;
}

#content {
	width:920px;
    margin:0px 0px 0px 30px;
    position:relative;
}

.bottom-wave {
    position:absolute;
    bottom:0px;
    z-index: 90;
}

/* NAVIGATION */
.navigation-bar {
    width:100%;
    height:19px;
    text-align:center;
    position:absolute;
    top:25px;
    padding:3px 0px;
    background-color:#0e1a31;
    display:block;
    z-index:50;
}

.navigation-mobile {
    display:none;
    width:100%;
    position:absolute;
    z-index:90;
    margin-bottom:20px;
}

.nav-container {
    width:560px;
    float:left;
    margin-left:150px;
}

.language-switch {
    width:100px;
    float:right;
    text-align:right;
    margin-right:30px;
    color:#ffffff;
}

.language-switch-mob {
    display:none;
}

.current-language {
    color:#ab0829;
    margin:0px 10px;
}

.lang-toggle {
    margin:0px 10px 0px 10px;
    color:#FFFFFF;
    font-weight:300;
}

.lang-toggle:hover {
    color:#ab0829;
    cursor:pointer;
}

.navbtn {
    color:#FFFFFF;
    margin:0px 15px;
    font-weight:300;
}

.navbtn:hover {
    cursor:pointer;
    color:#ab0829;
}

/* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color:#0e1a31;
    position: relative;
}

.nav-mob {
    width:100%;
    height:45px;
    color:#fff;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
}

/* Style navigation menu links */
.topnav a {
    color:#0e1a31;
    background-color:#eeeeee;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    display: block;
    text-align:center;
    border-bottom:1px solid #0e1a31;
}

/* Style the hamburger menu */
.topnav a.icon {
    background: #0e1a31;
    color:white;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 50;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color:#1e295e;
  color:#ab0829;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}

/* HEADER */
.logo-orfeo {
    width:120px;
    position:absolute;
    margin:10px 0px 0px 30px;
    z-index:100;
    display:block;
}

.logo-orfeo-mob {
    width:120px;
    display:none;
}

table td {
padding:10px 0px
}

/* HOME */
.home-left {
    width:480px;
    float:left;
    margin:80px 0px 0px 0px;
}

.main-title {
    font-size:30px;
    color:#1e295e;
    font-weight:700;
}

.sub-title {
    font-size:20px;
    color:#cb1915;
    font-weight:700;
}

.album-mobile {
    display:none;
    position:relative;
}

.home-left p {
    font-size:13px;
}

.vid-thumb {
    width:180px;
    float:left;
}

.vid-thumb-de {
    width:130px;
    float:left;
}

.album-details {
    display:block;
    float:left;
    font-size:12px;
    margin:0px 0px 0px 15px;
}

.buystreambtn {
    width:120px;
    height:15px;
    padding:3px;
    background-color:#1e295e;
    color:#ffffff;
    text-align:center;
    letter-spacing:2px;
    border-radius:5px;
    margin:10px 0px;
    border:solid #1e295e 3px;
}

.buystreambtn:hover {
    background-color:transparent;
    color:#1e295e;
    cursor:pointer;
}

.home-right {
    width:440px;
    height:570px;
    float:left;
    position:relative;
}

.flag {
    width:210px;
    text-align:center;
    background-color:#ab0829;
    color:#fff;
    padding:3px;
    font-weight:700;
    letter-spacing:1px;
    font-size:13px;
    margin:10px 0px 0px;
}

.album-desktop {
    width:450px;
    position:absolute;
    z-index:30;
    right:-15px;
    bottom:16px;
}

/* TRACKLIST */
.tracklist-title {
    width:100%;
    text-align:center;
    padding-top:70px;
}

.track-maint {
    font-size:22px;
    color:#1e295e;
    font-weight:700;
}

.track-subt {
    font-size:19px;
    color:#cb1915;
    font-weight:700;
}

.track-half {
    width:50%;
    float:left;
    margin:0px;
}

.disc-no {
    width:50px;
    padding:3px;
    color:#ffffff;
    text-align:center;
    background-color:#6c0512;
    border-radius:10px;
    font-weight:700;
    letter-spacing:1px;
    margin:15px 0px 0px;
    font-size:11px;
    margin-bottom:10px;
}

.track-head {
    font-size:15px;
    font-weight:700;
    margin-top:10px;
}

.numberbox {
    width:18px;
    height:18px;
    display:inline-block;
    text-align:center;
    color:#ffffff;
    background-color:#0e1a31;
    font-size:12px;
}

.track-half td {
    padding:0px 0px;
    font-size:13px;
}

.slideshow-container {
    width:400px;
    position: relative;
    margin:auto;
}

.slides-height {
    height:300px;
}

.mySlides {
    display: none;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

.text {
    width:100%;
    bottom:0px;
    color:#ffffff;
    padding:5px 0px;
    font-size: 12px;
    position: absolute;
    text-align: center;
    background:rgba(0, 0, 0, 0.8);
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color:#E5E5E5;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.1s ease;
}

.active, .dot:hover {
    background-color: #717171;
}


.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* ARTISTS */
.artist-indiv {
    width:30%;
    margin:0px 15px 0px;
    float:left;
}

.artist-container {
    padding-top:120px;
}

.artist-label {
    text-align:center;
    margin:15px 0px;
    font-size:16px;
    font-weight:700;
}

.inline-style {
	width:100%;
    max-height:600px;
    position:relative;
    overflow-y:auto;
	font-family: 'Raleway', sans-serif!important;
	font-size:14px!important;
	line-height:1.3em!important;
	font-weight:500!important;
	border:3px solid #CCC;
	border-radius:2px;
	color:#333333;
	padding:20px;
	background-color:#FFF;
}

#artist1-content, #artist2-content, #artist3-content {
    overflow-y:scroll
}

.artist-left {
    width:40%;
    float:left;
}

.artist-right {
    width:60%;
    padding-left:30px;
    float:left;
}

.artist-title {
    padding-left:20px;
    font-size:20px;
    font-weight:700;
    border-left:10px solid #ab0829;
    margin-bottom:10px;
}

/* RECOMMENDED */
.reco-quotes {
    padding-top:80px;
    text-align:center;
    font-size:15px;
    margin-bottom:30px;
}

.reco-desktop {
    display:block
}

.reco-mobile {
    display:none;
}

.reco-page {
    width:100%;
    position:relative;
}

.reco-indiv {
    width:200px;
    float:left;
    margin:0px 15px;
    align-content:center;
    text-align: center;
}

.mauto {
    margin:auto;
}

/* FOOTER */
.footer {
	font-size:11px;
	text-align:center;
    margin:20px 0px 30px;
	color:#000000;
}

.footer a {
	color:#000000;
}

.footer a:hover {
	color:#ab0829;
    cursor:pointer;
}

@media screen and (min-width: 980px) {

.container-fluid {
	width:980px!important;
	height:570px!important;
}
}

@media screen and (max-width: 979px) {
    .container-fluid {
	    width:100%;
	    /*height:100%;*/
	    margin-top:0px;
	    padding-left:0px!important;
	    padding-right:0px!important;
	    overflow-y:scroll;
    }
    
    .logo-orfeo {display:none;}
    .logo-orfeo-mob {
        display:block;
        width:120px;
        margin:70px auto 0px;
    }
    
    #content {
        width:88%;
        padding:0px 0px 0px 0px!important;
        left:0px;
        right:0px;
        margin:0px auto 0px;
    }
    
    .navigation-bar {display:none;}
    .navigation-mobile {display:block;}
    
    .language-switch-mob {
        display:block;
        width:100px;
        position:absolute;
        z-index:100;
        text-align:right;
        top:12px;
        color:#ffffff;
    }
    
    .flag {
        margin:auto;
    }
    
    .buystreambtn {
        margin:15px auto;
    }
    
    .catno {
        text-align:center;
        margin:15px 0px 15px 0px;
    }
    
    .home-left {
        width:100%;
        margin:20px 0px 50px 0px;
    }
    
    .home-right {display:none;}
    
    .main-title {
        font-size:35px;
        text-align:center;
    }
    
    .sub-title {
        font-size:20px;
        text-align:center;
    }
    
    .album-mobile {
        display:block;
        margin:50px 0px 15px 0px;
    }
    
    .home-left p {
        font-size:15px;
    }

    .video {width:100%;}
    .vid-thumb, .vid-thumb-de {width:100%;margin:auto;}
    .album-details {display:none;}
    
    .tracklist-title {padding-top:20px;}
    .track-half {width:100%;}
    .track-half p {margin-bottom:50px;}
    
    .artist-container {padding-top:30px}
    .artist-indiv {width:100%; margin:0px 0px 20px;}
    .artist-left {width:100%; margin-bottom:20px;}
    .artist-right {width:100%; padding:0px;}
    
    .reco-quotes {
        padding-top:20px;
    }
    .reco-desktop {display:none}
    .reco-mobile {display:block; width:100%;}
    .reco-indiv {
        width:100%;
        margin:15px 0px;
    }
}