* {
    
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* f o n t s */


/* public-sans-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 200;
    src: url('../_styles/fonts/public-sans-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* public-sans-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../_styles/fonts/public-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* public-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../_styles/fonts/public-sans-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

  /* public-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../_styles/fonts/public-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* public-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../_styles/fonts/public-sans-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
    
  /* roboto-mono-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 300;
    src: url('../_styles/fonts/roboto-mono-v23-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../_styles/fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url('../_styles/fonts/roboto-mono-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* roboto-mono-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 600;
    src: url('../_styles/fonts/roboto-mono-v23-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
    
  /* titillium-web-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: url('../_styles/fonts/titillium-web-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* titillium-web-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('../_styles/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* titillium-web-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url('../_styles/fonts/titillium-web-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* titillium-web-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: url('../_styles/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  
  /* END > f o n t s */


body {
    background: #F0F2F5;
    color: #5f5f5f;
    font:100%;
}

/*-------- Navbar ------------------ */

.navbar_container {
    display:flex;
    justify-content: space-between;
    position: sticky;    
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 5px 3%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}    

.navbar {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3px;
}

.navbar-left {
    display: flex;
    justify-content: left;
    align-items: center;
}

.navbar-left p {
    font-family: "Titillium Web";
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 3px;
}

.navbar-left img {
    max-width: 100%;
    margin-right: 15px;
    margin-top: 5px
}

.navbar-center {
    display:flex;
    list-style: none;
}

.navbar-center a {
    color:#5f5f5f;
    font-family: "Titillium Web";
    font-size: 1.2em;
    font-weight: 500;
    padding: 5px 0;
    margin:0 10px;
    text-decoration: none;
}

.navbar-center a:hover {
    color: #CD1269;
}

.navbar-mail {
    display: flex;
    align-items: center;
    text-decoration: none;
    list-style: none;
}

.navbar-mail a {
    font-family: 'Public Sans';
    font-size: 2.1em;
    font-weight: 600;
    color: #1560bd;
    text-decoration: none;
    margin-right: 25px;
    margin-left: 10px;
}

#hamburger {
    font-size:35px;
    cursor:pointer;
    z-index: 10001;
    display:none;
}


/*-------- Container --------*/

.container {
    width:100%;
    padding: 25px 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}

/*-------- left-content --------*/

.left-content {
    width:450px;
    align-self:flex-start;
    position:sticky;
    top:94px;
    margin-right: 1.6%
  }

/*-------- CD Title ------*/

.title {
    display: flex;
    align-items: center;
    color:#000;
    margin-bottom: 30px;
}
.title img {
    width: 74px;
}
.title span {
    min-width:90%;
    font-family: 'Public Sans';
    font-size: 1.4em;
    font-weight: 500;
    margin-left: 5px;
}

/*-------- Release container --------*/

.release_container {
    align-self: flex-start;
}

.release-title {
    display:flex;
    margin-bottom: 1px;
}
.release-title img {
    width: 27px;
    margin-right: 10px;
    }
.release-title span {
    align-self: center;
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

/*-------- Release Content --------*/

.release-content {
    display: flex;
    background: #e3e3e3;
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.release-content ul li {
    list-style: none;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 500;
    color: #5C5B5B;
    margin-left:10px;
    line-height: 2;
}

.release-content ul li span {
    font-family: 'Public Sans';
    font-size: 1em;
    font-weight: 500;
    color: #000;
    margin-left:5px;
}

.release-content ul li a {
    color:#1560bd;
    text-decoration: none;
}

.release-content ul li a:hover {
    color:#CD1269;
}

/*-------- Main Content -------- */

.main-container {
    align-self: flex-start;
}

/*-------- Header -------- */

.main-title {
    display:flex;
    align-items: center;
    margin-bottom: 1px;
}

.main-title img {
    width: 27px;
    margin-right: 10px;
}

.main-title span {
    align-self: center;
    font-family: 'Public Sans';
    font-size: 1.15em;
    font-weight: 500;
    color: #0f4d92;
}

/*-------- Main Content -------- */

.main-content {
    display: flex;
    background: #c0efff;
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

.main-content ul li {
    list-style: none;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 500;
    color: #5C5B5B;
    margin-left:10px;
    line-height: 2;
}

.main-content ul li span {
    font-family: 'Public Sans';
    font-size: 1.0em;
    font-weight: 500;
    color: #000;
    margin-left:5px;
}

.main-content ul li span code {
    font-family: 'Roboto Mono';
    font-size: 1.1em;
    font-weight: 500;
    color: #65000b;
    margin:-4px;
}

.main-content ul li a {
    color:#1560bd;
    text-decoration: none;
}
.main-content ul li a:hover {
    color:#CD1269;
}


/*-------- Tracks Details -------- */

.head-title {
    margin-bottom: 2px;
    margin-top:35px;

}

.head-title p {
    text-align:left;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
    color:#701c1c;
}

.head-title hr {
    font-size: 1.1em;
    font-weight: 600;
    color:#701c1c;
    margin-bottom: 15px;
}

.tracks-container {
    align-self: flex-start;
}

/*-------- Header -------- */

.tracks-title {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.tracks-title img {
    width: 27px;
    margin-right: 10px;
}

.tracks-title span {
    align-self: center;
    font-family: 'Public Sans';
    font-size: 1.15em;
    font-weight: 500;
    color: #01796f;
}

/*-------- Extra Content -------- */

.tracks-detail {
    display: flex;
    background: #d5f1e5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 5px;
}

.tracks-detail ul li {
    list-style: none;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 500;
    color: #5C5B5B;
    margin-left:10px;
    line-height: 2;
}

.tracks-detail ul li span {
    font-family: 'Public Sans';
    font-size: 1.0em;
    font-weight: 500;
    color: #000;
    margin-left:5px;
}

.tracks-detail ul li span code {
    font-family: 'Roboto Mono';
    font-size: 1.1em;
    font-weight: 500;
    color: #65000b;
    margin:-4px;
}

.tracks-detail ul li a {
    color:#1560bd;
    text-decoration: none;
}
.tracks-detail ul li a:hover {
    color:#CD1269;
}

/*-------- Note Container -------- */

.note-container {
    align-self: flex-start;
}

.note-title {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.note-title img {
    width: 27px;
    margin-right: 10px;
}

.note-title span {
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

/*-------- Note content -------- */

.note-content {
    display: flex;
    background: #dbd7d2;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 15px;
    line-height: 1.6em;
}

.note-content p {
    font-family: 'Public Sans';
    color:#404040;
}

.note-content p a {
    color:#1560bd;
    text-decoration: none;
}

.note-content p a:hover {
    color:#CD1269;
}

/*-------- Extra Tracks -------- */

.extra-container {
    align-self: flex-start;
    margin-top: 25px;
}

/*-------- Header Extra Tracks -------- */

.extra-title {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.extra-title img {
    width: 25px;
    margin-right: 10px;
}

.extra-title span {
    /*---display:flex;
    width:400px;-- */
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

/*-------- Extra Content -------- */

.extra-content {
    display: flex;
    background: #ffdadc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0px;
}

.extra-content ul li {
    list-style: none;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 500;
    color: #5C5B5B;
    margin-left:10px;
    line-height: 2;
}

.extra-content ul li span {
    font-family: 'Public Sans';
    font-size: 1.0em;
    font-weight: 500;
    color: #000;
    margin-left:5px;
}

.extra-content ul li span code {
    font-family: 'Roboto Mono';
    font-size: 1.1em;
    font-weight: 500;
    color: #65000b;
    margin:-4px;
}

.extra-content ul li a {
    color:#1560bd;
    text-decoration: none;
}
.extra-content ul li a:hover {
    color:#CD1269;
}


/*-------- Extra Audio Row --------*/

.extra-row {
    width:100%;
    height:auto;
    display:flex;
    justify-content: space-between;
    background-color:#df9498;
}

.extra-row:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.extra-row img {
    max-width:100%;
    height: auto;
    margin: 6px;
}

.play {
    width:340px;
    padding-top: 6px;
    padding-bottom:2px;
}

.play audio {
    max-height: 30px;
    max-width: 270px;
    border-radius: 4px;
    margin-left:10px;
}

.extra-row .play p {
    flex-direction: column;
    font-family: 'Calibri';
    font-size:1.12em;
    font-weight:500;
    color:#490000;
    margin-left: 11px;
    margin-top: -2px;
}

.extra-row .span {
    flex-direction: column;
    font-family: 'Calibri';
    font-size:1.15em;
    font-weight:500;
    color:#3d3d3d;
    margin-left:12px;
    margin-bottom:5px;
}

.spectro {
    display:block;
    padding-top:2px;
    align-items: flex-end;
}

.spectro img {
    max-width: 96px;
    max-height: 60px;
    object-fit: cover;
    object-position: bottom;
    margin-left:9px;
    margin-top:4px;
    margin-bottom:5px;
    border-radius: 4px;;

}


/*-------- Accordion -------- */

.accordion-note {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    margin-top: 25px;
}

.accordion-note img {
    width: 27px;
    margin-right: 10px;
}

.accordion-note span {
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

/*-------- Accordion Content -------- */

.accordion-content {
    background: #dbd7d2;
    border-radius: 10px;
    padding: 10px;
    list-style: none;
    margin-bottom:15px;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms;
    cursor:pointer;
}

.accordion-content > div {
    overflow: hidden;
}

.accordion-content > div p {
    font-family: 'Public Sans';
    font-size: 1em;
    font-weight: 500;
    color: #404040;
    line-height: 1.6;
}

.accordion-content:hover {
    grid-template-rows: 1fr;
}

.accordion-content > div a {
    color:#1560bd;
    text-decoration: none;
}

.accordion-content > div a:hover {
    color:#CD1269;
}


/*-------- Quality Container-------- */

.listen-container {
    max-width:450px;
    margin:auto;
}

.listen-title {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.listen-title img {
    width: 27px;
    margin-right: 10px;
 }

.listen-title span {
    font-family: 'Public Sans';
    color: #5f5f5f;
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 1px;
}

/*-------- Listen-Row --------*/

.audio-row {
    width:100%;
    height:auto;
    display:flex;
    justify-content: space-between;
    background: #9bd9db;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    margin-bottom:20px;

}

.audio-row img {
    max-width:100%;
    height: auto;
    margin: 6px;
}

.play {
    width:340px;
    padding-top: 6px;
    padding-bottom:8px;
}

.play audio {
    max-height: 30px;
    max-width: 270px;
    border-radius: 4px;
    margin-left:10px;
}

.play p {
    font-family: 'Calibri';
    font-size:1.12em;
    font-weight:500;
    color:#002e63;
    margin-left:11px;
    margin-top: -2px;
}

.play ul li {
    display:flex;
    list-style-type: none;
    font-family: 'Calibri';
    font-size:1.12em;
    font-weight:500;
    color:#3d3d3d;
    margin-left:11px;
}

.spectro {
    display:block;
    padding-top:2px;
    align-items: flex-end;
}

.spectro img {
    max-width: 96px;
    max-height: 90px;
    object-fit: cover;
    object-position: bottom;
    margin-left:9px;
    margin-top:4px;
    margin-bottom:5px;
    border-radius: 4px;;
}

/*-------- Video -------- */

.video-container {
    align-self: flex-start;
    margin-top: 25px;
}

/*-------- Header -------- */

.video-title {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.video-title img {
    width: 25px;
    margin-right: 10px;
}

.video-title span {
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

/*-------- Studio Content -------- */

.video-content {
    display: flex;
    background: #ecebbd;
    border-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0px;
}

.video-content ul li {
    list-style: none;
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 500;
    color: #5C5B5B;
    margin-left:10px;
    line-height: 2;
}

.video-content ul li span {
    font-family: 'Public Sans';
    font-size: 1.0em;
    font-weight: 500;
    color: #000;
    margin-left:5px;
}

.video-content ul li span code {
    font-family: 'Roboto Mono';
    font-size: 1.1em;
    font-weight: 500;
    color: #65000b;
    margin:-4px;
}

.video-content ul li a {
    color:#1560bd;
    text-decoration: none;
}
.video-content ul li a:hover {
    color:#CD1269;
}

.video-quality {
    display:flex;
    align-items: center;
    margin-bottom: 1px;
    border-bottom:#000 1px solid;
    margin-top:20px;
}

.video-quality img {
    width: 25px;
    margin-right: 10px;
}

.video-quality span {
    font-family: 'Public Sans';
    font-size: 1.3em;
    font-weight: 600;
}

.video-screen {
    align-self: flex-start;
}

.video-screen hr {
    margin-bottom:20px;
}

.video-screen h1 {
    font-family: 'Public Sans';
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 35px;
    color:#00755e;
}

.video-screen p {
    font-family: 'Public Sans';
    font-size: 1em;
    font-weight: 500;
    font-style: italic;
    color: #1560bd;
    margin-top:-17px;
    margin-bottom: 25px;
    margin-left: 35px;
}

.video-screen figure {
    text-align:center;
    margin-bottom: 10px;
}

.video-screen img {
    max-width:100%;
    height:auto;
    object-fit: cover;
    object-position: bottom;
    margin:auto;
}

.video-screen figcaption {
    font-family:'Roboto Mono';
    font-size: 1em;
    font-weight: 500;
    color: #404040;
    text-align: center;
    margin-top:-2px;
    margin-bottom:20px;
}





/*------- Picture Box --------*/

.picture-box {
    min-width:280px;
    align-self:flex-start;
    padding:0 20px;
    background-color: #efefef;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.picture-box hr {
    margin:auto;
}

.picture-box h1 {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 20px;
}

.picture-box p {
    font-family: 'Public Sans';
    font-size: 0.95em;
    font-weight: 500;
    font-style: italic;
    color: #1560bd;
    margin-top:-17px;
    margin-bottom: 25px;
}

.picture-box figure {
    text-align:center;
    padding-top: 10px;
    margin-bottom: 15px;
}

.picture-box img {
    max-width:100%;
    height:auto;
    object-fit: cover;
    object-position: bottom;
    margin:auto;
}

.picture-box figcaption {
    font-family:'Roboto Mono';
    font-size: 1em;
    font-weight: 500;
    color: #404040;
    text-align: center;
    margin-top:-2px;
    margin-bottom:30px;
}

/*---- pictures div ----*/

.image-box {
    display: flex;
    justify-content:center;
    align-items: center;
    max-width: 100%;
    height:auto;
}

.image-sx {
    max-width: 100%;
    height: auto;
    padding:10px;
}

.image-sx img {
    max-width:100%;
    height:auto;
    object-fit: cover;
}

.image-dx {
    max-width: 100%;
    height: auto;
    padding:10px;
}

.image-dx img {
    max-width:100%;
    height:auto;
    object-fit: cover;
}

.img-info {
    display:flex;
    justify-content:center;
    max-width:100%;
    height: auto;
    margin-top: -5px;
    margin-bottom:30px;
}

.img-info h3 {
    font-family:'Roboto Mono';
    font-size: 1em;
    font-weight: 500;
    font-style: normal;
    color: #404040;
}

/*---- END >>> Picture div ----*/

/*------- END >>>> Picture Box --------*/

/*------- Media Query --------*/

@media only screen and (max-width: 680px) {

    .title img {
        width: 45px;
        margin-right: 5px;
    }

    .title span {
    font-family: 'Public Sans';
    font-size: 1.15em;
    font-weight: 500;
}

.release-title img {
    width: 22px;
    margin-right: 5px;
}

.release-title span {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
}

.release-content ul li span {
    font-size: 0.9em;
}

.main-title img {
    width: 22px;
    margin-right: 5px;
}
    
.main-title span {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
}

.main-content ul li span {
    font-size: 0.9em;
}

.tracks-title img {
    width: 22px;
    margin-right: 5px;
}

.tracks-title span {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
}

.extra-content ul li span {
    font-size: 0.9em;
}

.note-title img {
    width: 22px;
    margin-right: 5px;
}

.note-title span {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
}

.note-content p {
    font-size: 0.9em;
}

.accordion-note img {
    width: 22px;
    margin-right: 5px;
}

.accordion-note span {
    font-family: 'Public Sans';
    font-size: 1.1em;
    font-weight: 600;
}

.accordion-content > div p {
    font-size: 0.9em;
}

.listen-title img {
    width: 22px;
    margin-right: 5px;
 }

.spectro img {
    display: none;
}

.video-title span {
    font-size: 1em;
    font-weight: 600;
}

.video-quality span {
    font-size: 1em;
    font-weight: 600;
}

.video-screen h1 {
    font-family: 'Public Sans';
    font-size: 1em;
    font-weight: 600;
}

.video-content ul li {
    font-size: 0.9em;
    font-weight: 500;
}

.video-content ul li span {
    font-size: 0.9em;
    font-weight: 500;
}

.video-content ul li span code {
    font-size: 0.9em;
    font-weight: 500;
}

.video-screen figcaption {
    font-size: 0.8em;
    font-weight: 500;
}

.picture-box h1 {
    max-width:100%;
    font-size: 0.9em;
    margin-left:8px;
}

.picture-box p {
    font-size: 0.9em;
    margin-left: 8px;
    }

.picture-box hr {
    width:95%;
    margin:auto;
}

.picture-box figcaption {
    font-family:'Roboto Mono';
    font-size: 0.8em;
    font-weight: 500;
    color: #404040;
    text-align: center;
    margin-bottom:20px;
}

.img-info h3 {
    font-family:'Roboto Mono';
    font-size: 0.8em;
    font-weight: 500;
    font-style: normal;
    color: #404040;
}

}

@media only screen and (max-width: 1560px) {   

    body, html {
        overflow-x: hidden;
        padding: 0 0;
        width: 100vw;
    }

  
    #hamburger {
    display: block;
}
     
.navbar-center {
    position:absolute;
    top:100%;
    right:-100%;
    width:270px;
    height:auto;
    background:#000000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    
    border-radius: 10px;
    transition: all .50s ease;
}

.navbar-center a {
    color: antiquewhite;
    font-size: 1.4em;
    display: block;
    margin: 12px 0;
    padding: 0px 25px;
    transition: all .50s ease;
}
    
.navbar-center a:hover {
    color: #000;
    background: #fff;
}    
    
.navbar-center.open {
    right: 3%;     
}

.navbar_container {
    width:100%;
    position: fixed;
    margin: 0px;
}

.left-content {
    margin-top: 58px;
}

.accordion-content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 500ms;
 }

.accordion-note-info > div p {
    font-size: 1em;
}

.picture-box {
    margin-top: 58px;
    position: static;
}

}