@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: 'Lato', sans-serif;
	background:url(../images/bg.jpg) no-repeat center center fixed;
	background-color:#817267;
	-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;
}

.clearfix {
	clear:both;
}

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

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

.container-fluid {
    background:rgba(235, 232, 230, 1)!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)!important;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3)!important;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3)!important;
}

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

.btn {
	padding:0px;
	border:none;
	border-radius:0px;
}

.content {
    width:920px;
    margin:10px 0px 0px 30px;
}

/* HEADER */

.logo-capriccio {
    display:block;
	width:120px;
	position:absolute;
	margin:30px 0px 0px 30px;
    z-index:100;
}

.logo-capriccio-mob {
    display:none;
}

/* NAVIGATION */
.navigation-bar {
    width:100%;
    text-align:center;
    display:block;
    padding-top:38px;
}

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

.navbtn {
    color:#000000;
    margin:0px 10px;
    padding:5px;
}

.nav-active {
    cursor:pointer;
    border-top:solid 5px #c5201d;
}

.nav-ornament {
    margin-top:18px;
}

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

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

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

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

/* Style the hamburger menu */
.topnav a.icon {
    background: #c72420;
    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:#c52c22;
  color:#FFF;
}

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

/* HOME */
.home-releases {
    width:520px;
    float:right;
}

.hr-indiv {
    width:100px;
    margin:4px 15px;
    position:relative;
}

.catno {
    font-size:13px;
    text-align:center;
    margin-top:10px;
}

.newflag {
    color:#fff;
    background-color:#C30003;
    text-align:center;
    padding:2px 10px;
    font-size:13px;
    position:absolute;
    right:-10px;
    top:5px;
    z-index:200;
}

.doppler-brothers {
    width:400px;    
    float:right;
    text-align:center;
}

.db-img {
    width:100%;
    margin:-50px auto -50px;
}

.home-title {
    font-family: 'Amiri', serif;
    line-height:30px;
}

.ht-m {
    font-size:25px;
    font-weight:700;
    color:#c5201d;
}

.ht-s {
    font-size:20px;
    font-weight:700;
}

.home-quote {
    font-weight:700;
    margin:10px;
    font-size:15px;
}

/* EACH RELEASE */
.relindiv-left {
    width:300px;
    margin-right:30px;
    float:left;
}

.backbtn {
    margin:5px 5px 5px 0px;;
}

.discoverbtn {
    width:120px;
    letter-spacing:1px;
    border-radius:5px;
    text-align:center;
    background-color:#c5201d;
    color:#FFFFFF;
    padding:3px;
    margin:5px auto;
}

.rel-review {
    font-size:13px;
    margin:10px 0px;
    text-align:center;
}

.track {
    margin:5px 0px;
}

.relindiv-right {
    width:590px;
    float:left;
    margin-top:15px;
    line-height:14px;
}

.vol-no {
    font-size:15px;
    font-weight:700;
    margin:10px 0px;
}

.vol-no2 {
    font-size:14px;
    line-height:17px;
    font-weight:700;
    color:#c5201d;
    margin:0px 0px;
}

.trackno {
    float:left;
    width:40px;
    margin-right:10px;
    font-size:10px;
}


.trackbox {
    width:13px;
    display:inline-block;
    border:1px solid #000000;
    text-align:center;
    padding:1px;
}

.trackname {
    float:left;
    width:530px;
    font-weight:700;
    padding:1px;
    margin:0px 0px;
    font-size:14px;
}

.trackname2 {
    font-weight:700;
    font-size:14px;
    line-height:17px;
}

.txt-highlight { color:#c5201d; }

.tracklist2 {
	max-height:210px;
	overflow:auto;
}

.red {
    font-weight:400;
    font-size:12px;
    color:#c5201d;
}

.artists {
	font-size:14px;
	line-height:18px;
    font-weight:700;
    margin-top:10px;
}


.fw-400{font-weight:400;}
.fs-13 {font-size:13px;}
.fs-12 {font-size:12px;}
.fs-16 {font-size:16px;}
.mob-center{text-align:left}

.p-lr10 { padding-left:10px; padding-right:10px;}
.rel { position:relative;}

/* ABOUT */
.about-left {
    width:350px;
    float:left;
    margin:30px 30px 0px 0px;
}

.about-right {
    width:540px;
    float:left;
    margin-top:50px;
}

/* PERFORMERS */
.performers-nav {
    text-align:center;
    margin:20px auto 10px;
}

.pn-performers, .pn-others {
    margin:0px 20px;
    color:#000000;
}

.pn-btn-active {
    color:#c52c22;
}

.performers-left {
    width:350px;
    float:left;
    margin:20px 20px 0px 0px;
}

.performers-right {
    width:530px;
    padding-right:20px;
    height:350px;
    float:left;
    margin-top:20px;
    overflow-y: scroll;
}

.other-artists {
    font-size:12px;
    margin-top:20px;
}

.instru-indiv {
    margin:15px 0px 10px 0px;
    text-align:center;
}

.red-bold {
    color:#c52c22;
    font-weight:700;
}

/* THE COMPLETE FLUTE WORKS */
.flute-title {
    font-size:18px;
    font-weight:700;
    text-align:center;
    color:#c5201d;
}

#flute-works {
    width:850px;
    margin:10px auto;
    position:relative;
}

.flute-half{
    width:45%;
    float:left;
    position:relative;
    margin:0px 20px;
}

.mf-title {
    font-weight:700;
    text-align:center;
    margin:5px auto;
}

.sf-title {
    font-weight:700;
    font-style:italic;
    margin-top:5px;
}

.line-indiv {
    font-size:12px;
}

.line-title {float:left;}
.line-vol {float:right;}

.btns-row {
	display:table-cell;
	padding:0px 3px;
}


/* FOOTER */

.footer {
	width:100%;
	font-size:12px;
	line-height:15px;
	font-weight:400;
	text-align:center;
	margin:20px 0px;
	color:#000000;
}

.footer a {
	color:#000000!important;
}

.footer a:hover {
	color:#c72414!important;
	text-decoration:none!important;
}

/* FOOTER end */

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*margin-right: -15px;
  margin-left: -15px;*/
}

@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;
    }

    .content {width:80%; margin:0px auto;}

    .navigation-bar {
        display:none;
    }
    .navigation-mobile {
        display:block;
        position:absolute;
        top:0px;
    }
    
    .logo-capriccio {display:none;}
    .logo-capriccio-mob {
        display:block;
        margin-top:70px;
        text-align: center;
    }
    
    .doppler-brothers {
        width:100%;
        margin:50px auto 10px;
    }
    
    .home-releases {
        width:100%;
        margin:20px auto;
    }
    
    .hr-indiv {
        width:100%;
        margin:15px 0px;
    }
    
    .relindiv-left {width:100%;}
    .rel-review {width:80%; text-align:center; margin:10px auto;}
    .relindiv-right {width:100%;}
    .trackname {width:85%;}
    .artists {margin-bottom:50px;}
    .mob-center{text-align:center;}
    
    .about-left {width:100%;}
    .about-right {width: 100%; margin:20px auto;}
    
    .performers-left {width:100%;}
    .performers-right {
        width:100%;
        height:100%;
        overflow-y:hidden;
        padding:0px;
        margin-bottom:30px;
    }
    .other-artists {width:100%; margin-bottom:30px;}
    .mb-40 {margin-bottom:40px;}
    .mob-fs-13 {font-size:13px;}
    .mob-mt-0 {margin-top:0px;}
    
    .flute-title {margin-top:20px;}
    #flute-works {width:100%; margin-bottom:50px;}
    .flute-half{width:100%; margin:0px;}
    .line-title {width:85%;}
    
    .tracklist2 { max-height:100%;}
}