/*
@font-face {
        font-family: 'Benton Gothic Bold';
        src: url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.eot');
        src: url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.eot?#iefix') format('embedded-opentype'),
             url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.woff') format('woff'),
             url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-bold.ttf') format('truetype');
        font-weight:normal;
        font-style:normal;
    }

@font-face {
        font-family: 'Benton Gothic Regular';
        src: url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.eot');
        src: url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.eot?#iefix') format('embedded-opentype'),
             url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.woff') format('woff'),
             url('//s3.amazonaws.com/latimes-datadesk-template/fonts/0.5.0/benton-gothic-regular.ttf') format('truetype');
        font-weight:normal;
        font-style:normal;
    }
*/


/* override base templates */
#tophat-container {
    background: #ffffff;
    box-shadow: 0 0 10px 0 #cbc7c7;
}

.tophat-banner-container {
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: none;
}

.breadcrumb-row {
    height: auto;
    margin-bottom: 55px;
}

/* overriding bootstrap for now */
.breadcrumb {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: -20px;
}

h6.award-label {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Benton Gothic Bold', Arial, serif;
}

h6.award-label a {
    color: rgba(221, 158, 17, 1);
}

#tophat-logo {
    background-image: url(//d1qqc1e9kvmdh8.cloudfront.net/img/latimes-logo.svg);
}

#tophat hr {
    background-color: rgba(221, 158, 17, 1);
}

#tophat ul {
   background: #fcf9f1;
   z-index: 442;
}

#tophat a {
    color: #333;
}

.subscribe-button {
    background-color: rgba(221, 158, 17, .1);
    font-family: 'Benton Gothic Regular', Arial, serif;
}

/*special video embed */

.video-holder{
    max-width: 728px;
    width: 100%;
    text-align: center;
    margin: 0px auto 40px;
}
.video-holder-ceremony-page{
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin: 50px auto -20px;
}

.image-holder{
    /*max-width: 100%;*/
    max-width: 728px;
    width: 100%;
    text-align: center;
    margin: 0px auto 40px;
}
.video-container {
    position:relative; background-color: #111;
    max-width: 100%;
    /*max-width: 800px;*/
    width: 100%;
    margin: 20px auto;
}

.video-play-btn {
    background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDczLjg1NiA3My44NTYiPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik01NS45MjgsMzYuOWwtMjgsMTcuNTI4di0zNUw1NS45MjgsMzYuOXoiLz48cGF0aCBkPSJNMzYuODMsNzEuOTI4Yy0xOS4yOTksMC0zNS0xNS43MDEtMzUtMzVzMTUuNzAxLTM1LDM1LTM1czM1LDE1LjcwMSwzNSwzNVM1Ni4xMjksNzEuOTI4LDM2LjgzLDcxLjkyOHogTTM2LjgzLDcuOTI4IGMtMTUuOTkxLDAtMjksMTMuMDA5LTI5LDI5YzAsMTUuOTksMTMuMDA5LDI5LDI5LDI5YzE1Ljk5LDAsMjktMTMuMDEsMjktMjlDNjUuODMsMjAuOTM4LDUyLjgyLDcuOTI4LDM2LjgzLDcuOTI4eiIvPjwvZz48L3N2Zz4K") no-repeat top center;
    background-size:contain;
    height:100px;
    width:100px;
    margin:0 auto;
    position:absolute;
    top:calc(53% - 75px);
    left:calc(50% - 50px);
}

.video-play-btn:hover {opacity:0.7; cursor:pointer;}
.video-play-btn span {font-family: Arial, sans-serif; display:block; color:#fff; position:absolute; bottom:-30px;
        font-size:24px; right:-30px; width:180px;}

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

.responsive-image {
    max-width: 100%;
}

.cell {
    margin: 1% auto 1% auto;
    display: block;
    text-align: center;
}

.database-name {
    font-family: 'Benton Gothic Bold', Arial, serif;
    font-size: 24px;
    line-height: 48px;
    text-indent: 18px;
    height: 48px;
    font-weight: normal;
    color: white;
    background-color: #9A0600;
}

.sponsor-name {
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 18px; /* 14px */
    line-height: 48px;
    height: 48px;
    color: rgba(221, 158, 17, 1);
    text-align: center;
    margin: 12px 0;
}

h1 {
    text-align: left;
}


.studios-kicker {
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 14px; /* 14px */
    line-height: 24px;
    color: #aaa;

}

.links-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* flex-start */
}

.links-row * {
    font-family: 'Benton Gothic Regular', Arial, serif;
/*  color: red !important;*/
    /*display: inline;*/
    /*margin: 24px 12px 0 0;*/
    margin: 0 0 48px 0;
}

.section-body {
    max-width: 640px;
}

.event-subhead {
    margin-bottom: 12px;
}

.list-headline {
    font-family: 'Benton Gothic Bold', Arial, serif;
    font-size: 18px;
    line-height: 1.4em;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid #000;
    margin-top: 2em;
}

.list-headline a, .title-row-1-item-1 a, .song-row-1-item-1 a, .song-row-2-item-1 a, .song-row-3-item-1 a, .name-row-1-item-1 a, .name-row-2-item-1 a, .special-row-1-item-1 a, .title-detail-row-1-item-1 a, .other-row-1-item a, .ensemble-row-item a {
    color: #000;
    text-decoration: none;
}

a.search-results, a.display-results {
    font-size: 16px;
    color: #4591B8;
    text-decoration: none;
}


.list-headline a:hover, .title-row-1-item-1 a:hover, .song-row-1-item-1 a:hover, .song-row-2-item-1 a:hover, .song-row-3-item-1 a:hover, .name-row-1-item-1 a:hover, .name-row-2-item-1 a:hover, .special-row-1-item-1 a:hover, .title-detail-row-1-item-1 a:hover , .other-row-1-item a:hover {
    color: #4591B8;
    text-decoration: none;
}

/* not in use */
.left-side {
    float: left;
}

.right-side {
    float: right;
}

.nominations-count, .winners-count {
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 16px;
    text-transform: none;
}


.LATLinkOutArrow {
    font-size: 16px;
    color: #4591B8;
}

.name-row-1, .title-detail-row-1, .song-detail-row-1  {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* flex-start space-between */
    padding: 6px 0 0 0;
    align-items: baseline;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 17px;
    line-height: 1.5em;
}

.title-row-1, .special-row-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 0 6px 0;
    align-items: baseline;
    border-bottom: 1px solid #ccc;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 17px;
    line-height: 1.5em;

}

.song-row-1 {
    justify-content: space-between; /* flex-start space-between */
    padding: 6px 0 0 0;
    align-items: baseline;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 18px;
    line-height: 1.5em;
}

.song-row-2 {
    padding: 0px 0 3px 0;
    align-items: baseline;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 14px;
    line-height: 1.5em;
}

.name-row-2, .song-row-3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0 10px 0; /* 0 0 6px 0 */
    align-items: baseline;
    border-bottom: 1px solid #ccc;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 14px;
    line-height: 1.5em;
}


.caption-credit {
    max-width: 700px;
    width: 100%;
    margin: 15px auto 0 auto;
    text-align: left;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 14px;
    line-height: 22px;
}


.ad-container {
    margin: 35px auto 10px auto;
    padding-bottom: 0px;
}

.name-row-1-item-1, .song-row-1-item-1, .title-detail-row-1-item-1 {
    padding: 10px 0 3px 0;
    font-size: 17px;
    line-height 1.3em;
}
/*
    flex-basis: 50%;
.name-row-1-item-2, .song-row-1-item-2 {
    flex-basis: 20%;
    visibility:hidden;
}
*/

.ensemble-row-item {
    flex-basis: 100%;
}

.title-row-1-item-1, .special-row-1-item-1, .name-row-2-item-1, .song-row-3-item-1 {
/*    flex-basis: 50%;*/
    width: 55%;
    text-align: left;
}
.title-row-1-item-2, .special-row-1-item-2, .name-row-2-item-2, .song-row-3-item-2 {
    font-size: 14px;
    min-width: 59.313px;
}
.title-row-1-item-3, .special-row-1-item-3, .name-row-2-item-3, .song-row-3-item-3 {
    font-size: 14px;
    min-width: 36.875px;
}

.winner-label {
    text-align: left;
    font-family: 'Benton Gothic Bold', Arial, serif;
    font-size: 14px;
    color: rgba(221, 158, 17, 1);
    /*padding-left: 3px;*/
}

.nominee-label {
    text-align: left;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 14px;
    color: #aaa;
}


.winner-name, .category-name-row {
    font-family: 'Benton Gothic Bold', Arial, serif;
}

.non-bold {
    font-family: 'Benton Gothic Regular', Arial, serif;
}


.sponsor-ad {
    text-align: center;
    font-family: 'Benton Gothic Bold', Arial, serif;
    font-size: 18px;
    text-transform: none;
    padding: 24px 0;
    margin: 2em 0;
    background-color: #fdf3d0;
}

.other-row-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* flex-start space-between */
    padding: 6px 0 0 0;
    align-items: baseline;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 16px;
    line-height: 1.5em;
}

@media screen and (min-width: 640px) {
    .grid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .cell {
        width: 50%;
    }
    .section-body {
        max-width: 640px;
        margin: 0 auto;
    }
    h1 {
        text-align: center;
    }
}


@media screen and (min-width: 1000px) {
    .cell {
        width: calc(100%/4);
    }
}

.sharebuttons {
    margin: 10px auto 10px auto;
}

h1.lead-headline {
    max-width: 640px;
    margin: 0 auto;
}


section.noms-block {
    width: 100%;
    height: auto;
    margin: 60px auto 80px auto;
}

section.section-body p.methods {
        font-family: 'Benton Gothic Regular', Arial, serif;
        line-height: 16px;
        font-size: 14px;
        color: #333;
        overflow-wrap: break-word;
}

ul.legend {
    width: 100%;
    height: 8px;
    list-style-type: none;
    margin: 0px 0 0px 0;
}

ul.legend li {
    float: left;
    margin: 0 20px 0 0;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 16px;
    line-height: 16px;
}

ul.legend span {
    float: left;
    width: 12px;
    height: 12px;
    margin: 2px 5px 2px 2px;
}

ul.legend li span.nominations {
    background-color: #e0e0e0!important
}

ul.legend li span.wins {
    background-color: rgba(221, 158, 17, 1)!important
}

.leaderboard-row {
    width: 100%;
    height: auto;
    padding: 6px 0 6px 0;
    align-items: baseline;
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 17px;
    line-height: 1.5em;
    margin: 10px auto 25px auto;
}

.nominations-chart {
/*    width: 100%;*/
    height: 10px;
    color: #000!important;
    background-color: #e0e0e0!important;
    border-radius: 3px;
}

.nominations-gold {
    height: 10px;
    background-color: rgba(221, 158, 17, 1)!important;
    border-radius: 3px 0px 0px 3px;
}

.leaderboard-header {
    height: auto;
    margin: 45px 0 10px 0;
}

.leaderboard-header h3{
    font-family: 'Benton Gothic Bold', Arial, serif;
    font-size: 24px;
    margin-top: 30px 0 0 0!important;
}

.nominations-win-percent {
    position: relative;
    margin: 10px 0 0 0;
}

.nominations-win-percent p {
    font-family: 'Benton Gothic Regular', Arial, serif;
    font-size: 15px;
    line-height: 0.5em;
    margin: 0!important;
}

.nominations-win-percent p span.win{
    position: absolute;
    top: 100%;
    font-family: 'Benton Gothic Bold', Arial, serif;
}

.nominations-win-percent p span.noms{
    position: absolute;
    top: 100%;
    color: #999;
}