/* ---- Grid ---- */

.row .row {
    padding: calc(0.3% + 7px)
}

#main > .container-fluid {padding: 60px 6%; max-width: 1300px}

/* ---- General ---- */

.playable {
    padding-left: 16px; 
    color: #FFEFDD !important;
    cursor: pointer;
    background: url("images/playSymbolOrange.svg") no-repeat 0 50%;
    background-size: 13px;
    font-style: normal;
}

.tableList {
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-size: 0.8125rem;
    color: #FFEFDD;
    font-weight: 400;
    letter-spacing: 0.45px;
}

.tableList tr {
    height: 24px
}

/* ---- Infotext ---- */

.dropdownText {
    display: none;
}

.dropdownTextButton {
  width: 100%;
  padding: 10px 10px 10px 0px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.dropdownTextButton::after{
    content: " ";
    height: 1px;
    width: 100%;
    position: absolute;
    top: 85%;
    left: 0; 
    border: 1px solid #36312C;
}

.infoText {padding-bottom: 8px;}

.infoText span {
    padding-left: 16px; 
    color: #EF6D28;
    cursor: pointer;
    background: url("images/playSymbolOrange.svg") no-repeat 0 50%;
    background-size: 13px;
    font-style: normal;
}

.dropdownArrow {
    width: 25px;
    height: 25px;
    margin-top: -1px;
    float: left;
    background-image: url("images/playSymbolOrange.svg");
    background-position: 0px 50%;
    background-size: 16px;
    background-repeat: no-repeat;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* ---- Graphics ---- */

#graphicContainer {
    width: 100%;
    height: 300px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 1;
}


/* ---- Playlist Soundsamples ---- */

.soundsamples h2 span {
    background: url(images/headphonesIcon.svg) 2px 2px/24px no-repeat;
    height: 28px;
    width: 26px;
    position: absolute;
    right: 0;
}

.playlist {
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-size: 0.8125rem;
    color: #FFEFDD;
    font-weight: 400;
    letter-spacing: 0.45px;
}

.data-card {
    padding: 0 15px 15px;
}

.playlist tr {height: 24px; cursor: pointer;}
#bluePlayer tr:hover {color: #839D92;}
.playlist th {height: 24px}
#orangePlayer tr:hover {color: #EF6D28;}

.playlist td:nth-of-type(1) {
    width: 7%;
    background-image: url("images/playSymbolBlue.svg");
    background-position: -2px 50%;
    background-size: 17px;
    background-repeat: no-repeat;
}

.orangePlayer td:nth-of-type(1) {background-image: url("images/playSymbolOrange.svg");}

.playlist td:nth-of-type(2) {width: 13%;}
.playlist td:nth-of-type(3) {width: 40%;}
.playlist td:nth-of-type(4) {width: 40%;}

.subheadingTable {
    position: relative;
    cursor: default;
    margin-top: 0.57rem;
}

.subheadingTable::after{
    content: " ";
    height: 2px;
    width: 100%;
    position: absolute;
    top: 126%;
    left: 0;
    background-color: #36312C
}

.bluePauseSymbol {
    background-image: url("images/pauseSymbolBlue.svg") !important
}

.orangePauseSymbol {
    background-image: url("images/pauseSymbolOrange.svg") !important
}

/* ---- Device Columns ---- */

.deviceColumn h2 span {
    background: url(images/headphonesIcon.svg) 2px 2px/24px no-repeat;
    height: 28px;
    width: 26px;
    position: absolute;
    right: 0;
}

/*
.deviceColumn > div > div {
    padding-left: 2%; 
    padding-right: 2%;
}
*/

.left-devices, .left-devices .subtitle2 {
    padding-left: 0;
    padding-right: 2%;
}

.mid-devices, .right-devices {
    padding-left: 2%;
    padding-right: 0;
}

.mid-devices .deviceContainer, .right-devices .deviceContainer {
}

.deviceContainer {
    height: auto;
    width: 100%;
    /*
    max-width: 205px;
    min-width: 170px;
    */
    position: relative;
    display: block;
    padding: 8px 0px;
}

.deviceContainer > :first-child {
    width: 100%;
    height: 42px;
    top: 70%;
    padding: 3% 6% 4%;
    position: absolute;
    z-index: 2;
}

.deviceContainer h3 {
    line-height: 0.3rem;
    display: inline-block;
    opacity: 0.84;
    margin-top: 0.6rem
}

.playSymbolCircle {
    height: 23px; 
    width: 23px;
    background: url(images/playSymbolCircle.svg) 0px 0px/23px no-repeat;
    margin: auto 0px auto 3px;
    float: right;
    cursor: pointer;
}

.deviceContainer img {
    width: 100%;
    position: relative;
    z-index: 0;
    border: 1px solid #36312C;
    border-radius: 5px;
}

.img-mask {
    width: 100%;
    height: calc(100% - 16px);
    position: absolute;
    left: 0;
    top: 8px;
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(91,83,76,0)), color-stop(rgba(91,83,76,0.4)), to(rgba(46,41,37,1)));
    background: linear-gradient(to bottom, rgba(91,83,76,0), rgba(91,83,76,0.4), rgba(46,41,37,1));
}

 /*--- Interviews ---*/
/* ---------------- */

.interviewContainer {
    padding: 0 15px
}
.interviewWrapper {
    padding: 14px 0 12px !important;
    border-bottom: 2px solid #36312C;
}

/*
.interviewContainer:la {
}
*/

.interviewWrapper > div {
    padding: 0;
}

.quote {
    font-size: 1.15rem;
    padding-bottom: 0;
}

.interview {
    padding-right: 8px;
}

.quoteParent {
    padding-left: 8px;
}

.quoteParent > p {
    margin-bottom: 7px
}

.quoteParent > h3 {
    line-height: 0;
    display: inline
}

#contentWrapper {
    visibility: hidden;
}

footer {
    visibility: visible;
}

 /*--- TEXT ---*/
/* ---------- */

.first {
    margin-top: 26px;
}

.subtitle1 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 10px;
    letter-spacing: normal;
    text-align: right;
}

.comingSoon {
    padding-bottom: 5px
}

/* 3-col-layout for devices */
@media only screen and (max-width: 992px) {
    
    .mid-devices {
        padding-right: 1%;
        padding-left: 1%;
    }

}

@media only screen and (max-width: 768px) {
    
    .left-devices {
        padding-right: 2%;
    }
    .right-devices {
        padding-left: 2%;
    }
    .mid-devices {
        padding-right: 0;
        padding-left: 2%;
    }
    .quoteParent {
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .quote {
        text-align: left;
    }
    
    #main > .container-fluid {padding: 60px 5%; max-width: 1300px}
    
}

@media only screen and (max-width: 450px) {
    
    .deviceColumn > div   {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    .left-devices {
        padding-left: 0
    }
    .mid-devices {
        padding-right: 0;
    }
    .right-devices {
        padding-left: 0;
    }
    
    .data-card {padding: 0 10px 10px}
}

/* table on small screen */
@media only screen and (max-width: 380px) {
    td:nth-of-type(1) {width: 8}
    td:nth-of-type(2) {width: 16%;}
    td:nth-of-type(3) {width: 38%;}
    td:nth-of-type(4) {width: 38%;}    
}