﻿.trophiesPage{
    position: relative;
}

.trophiesPage .breadcrumb{
    z-index: 10;
}

.trophiesPage .filter-navigation.fixed{
    position: fixed;
    top: 55px;
}

/* Navs */
.trophiesPage .main-nav-row .nav-option{
    display: inline-block;
    float: left;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.trophiesPage .filter-navigation .main-nav-row .item.nav-competition{
    width: 100%;
    font-size: 22px;
    height: auto;
    z-index: 5;
    padding: 20px;
    line-height: normal;
}

.trophiesPage .filter-navigation{
    position: fixed;
    z-index: 10;
}

.trophiesPage .filter-navigation .main-nav-row .item.nav-competition.active{
    border-bottom: 1px solid #ddd;
}

.trophiesPage .filter-navigation .main-nav-row{
    z-index: auto;
}

.trophiesPage .filter-navigation .main-nav-row .item{
    z-index: 3;
    background: #fff;
}

.trophiesPage .main-nav-row .nav-competition .trophy-img,
.trophiesPage .competitions-container .trophy-img {
    display: inline-block !important;
    width: 71px;
    position: relative;
    margin-right: 8px;
    height: 101px;
    float: left;
}

.trophiesPage .nav-competition .active-option,
.trophiesPage .competitions-container .competition p
{
    width: 93%;
}

.trophiesPage .active-option,
.trophiesPage .competitions-container .competition p
{
    font-size: 16px;
    margin: 0px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    text-transform: uppercase;
}

.trophiesPage .main-nav-row .nav-competition .trophy-img svg,
.trophiesPage .competitions-container .trophy-img svg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 66px;
    height: 66px;
    stroke: none !important;
    fill: #242424;
    fill-opacity: 0.1;
    transition: all 0.5s ease-in-out;
}


.trophiesPage .main-nav-row .nav-competition .trophy-img svg,
.competition:hover .trophy-img svg,
.competition.active .trophy-img svg
{
    fill: #c30000;
}

.trophiesPage .main-nav-row .nav-competition .trophy-img img,
.trophiesPage .competitions-container .trophy-img img{
    width: 100%;
    left: 50%;
    background: none;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    max-width: none;
    height: 100%;
}
.trophiesPage .competitions-container .trophy-img img{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.trophiesPage .competitions-container .competition.active .trophy-img img {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.trophiesPage .main-nav-row .nav-competition .text-wrapper,
.trophiesPage .competitions-container .text-wrapper{
   font-size: 16px;
    margin: 0px;
    
    width: 70%;
    display: inline;
    vertical-align: middle;
    height: 101px;
    float: left;
    line-height: 101px;
    text-transform: uppercase;
    transition: opacity 500ms ease-in-out;
}

.trophiesPage .dropdown-header{
    padding: 0 10% 30px;
    color: #242424;
    font-size: 24px;
    font-weight: 200;
    text-transform: uppercase;
}


.trophiesPage .filter-navigation .my-dropdown {
    padding: 30px 1%;
    
    max-height: calc(100vh - 270px);
    overflow-y: auto;
}


.trophiesPage #competitions-dropdown.open{
    transform: translate(0,-80px);
    z-index: 3;
}

.trophiesPage .competitions-container .competition{
    padding: 0 5% 24px;
    cursor: hand;
    cursor: pointer;
}


.trophiesPage .filter-navigation .date{
    padding: 16px 5%;
    cursor: pointer;
    cursor: hand;
    font-size: 30px;
}

.trophiesPage .filter-navigation .date:not(.hasTrophy){
    display:none;
}

.trophiesPage .nav-competition .count,
.trophiesPage .competitions-container .count {
    color: #bebebe;
}

.trophiesPage .main-nav-row .nav-modalities {
    border-right: 1px solid #ddd;
    text-align: center;
    padding: 0;
}


.trophiesPage .main-nav-row .nav-modalities .active-option p {
    display: none;
}

.trophiesPage .main-nav-row .nav-date p{
    color: #c30000;
    font-size: 30px;
}


.trophiesPage .nav-option.active {
    border: none;
}

#dates-dropdown{
    padding: 0;
}


.decade.active{
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.decade{
    background-color: #f4f4f4;
}

.decade .decade-prev,
.decade .decade-next{
    max-width: 12px;
    height: 12px;
    stroke: #333;
    fill: none;
    stroke-width: 4px;

    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;

    cursor:pointer;
}
.decade .decade-next{
    right: 100%;
    margin-right: 5px;
}
.decade .decade-prev{
    left: 100%;
    margin-left: 5px;
}
.decade:first-child .decade-prev,
.decade:last-child .decade-next{
    display:none;
}
.decade .decade-next{
    transform: rotate(180deg);
}
    .decade .decade-name p {
        display: flex;
        align-items: center;
    }

.trophiesPage .nav-option.active + .item {
    border-left: 1px solid #ddd;
}

.trophiesPage div#competitions-dropdown .active{
    display: none;
}
.trophiesPage #dates-dropdown .decade:not(.active){

}


.trophiesPage #dates-dropdown .decade-name{
    display: none;
    min-height:175px;
}


/** CONTENT AREA */

.trophiesPage .content{
    padding-top: 183px;
    margin-top: 10%;
}

.trophiesPage .content-wrapper{
    position: relative;
    padding: 0 3.75%;
    opacity: 1;
    padding-bottom: 60px;
    border-bottom: 1px solid #ddd;
    transition: opacity 250ms ease-in-out;
}


.trophiesPage .content-wrapper.loading{
    opacity: 0;
}

.trophiesPage .content .description {
    padding-top: 40px;
    margin-bottom: 30px;
}

.trophiesPage .cup-image{
    position: relative;
    padding-bottom: 62%;
}

.trophiesPage .cup-image > *{
    position: absolute;
}

.trophiesPage .cup-image img{
    position: absolute;
    max-width: none;
    width: 33.3333333%;
    left: 50%;
    transform: translateX(-50%);
    top: 40px;
    max-height: none;
    z-index: 1;
}

.trophiesPage .cup-image hr{
    height: 1px;
    bottom: 5%;
    margin: 0;
    background-color: #ddd;
    width: 100%;
    border: none;
    clear:both;
    display:block;
    position: absolute;
}

.trophiesPage .content-wrapper span.year{   
    font-weight: 800;
    font-family: "Roboto Condensed", sans-serif;
    float: right;
    color: #f4f4f4;
    font-size: 160px;
    line-height: 1;
    letter-spacing: -13px;
    margin-right: 13px;
    top: 0;
    right: 0;
}

.trophiesPage .season{
    color: #c30000;
    font-size: 13px;
    margin-bottom: 8px;
}


.trophiesPage h3{
    color: #242424;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 16px;
}

.trophiesPage p.text{
    font-family: Roboto, sans-serif;
    font-size: 12px;
    margin-bottom: 13px;
}

.trophiesPage h4{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 200;
}


.trophiesPage .players{
    padding-right: 24px;
}

.trophiesPage .player-wrapper{
    display: inline-block;
    border-right: 1px solid #fff;
    font-size: 10px;
}

.trophiesPage .player-wrapper img{
    width: 100%;
    margin: 0;
}

@media screen and (max-width: 425px) {
    .trophiesPage .filter-navigation .main-nav-row .item.nav-competition {
        padding: 5px;
    }

    
    .trophiesPage .filter-navigation .my-dropdown {
        max-height: calc(100vh - 210px) !important;
    }
    

    .trophiesPage .main-nav-row .nav-competition .trophy-img, .trophiesPage .competitions-container .trophy-img,
    .trophiesPage .main-nav-row .nav-competition .text-wrapper, .trophiesPage .competitions-container .text-wrapper {
        height: 70px !important;
        line-height: 70px !important;
    }


}


@media screen and (max-width: 600px) {

    .trophiesPage .main-nav-row .nav-competition .trophy-img, .trophiesPage .competitions-container .trophy-img,
    .trophiesPage .main-nav-row .nav-competition .text-wrapper, .trophiesPage .competitions-container .text-wrapper {
        height: 50px;
        line-height: 50px;
    }

    .trophiesPage .main-nav-row .nav-competition .trophy-img img, .trophiesPage .competitions-container .trophy-img img {
        width: auto;
        margin-left: 0;
    }
    
    
    .trophiesPage .filter-navigation .my-dropdown {
        padding: 30px 1%;
    
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }
}


@media screen and (min-width: 768px) {
    
    .trophiesPage{
        margin-bottom: 90px;
    }

    .trophiesPage .dropdown-header{
        display: none;
    }
    
    
    .trophiesPage .breadcrumb{
        border-bottom: 1px solid #ddd;
    }
    
    .trophiesPage .filter-navigation.open #competitions-dropdown{
        border-left: 1px solid #ddd;
    }

    .trophiesPage .filter-navigation #modalities-dropdown{
        top: 80px;
    }

    /** FILTERS */
    .trophiesPage .filter-navigation{
        position: fixed;     
        z-index: 9;
    }

    .trophiesPage .filter-navigation .my-dropdown#modalities-dropdown .modality p{
        width: 100%;
    }


    .trophiesPage #competitions-dropdown .competitions-container .slick-list.resetPosition{
        transition: transform 250ms ease-in-out;
    }
    
    .trophiesPage .filter-navigation .main-nav-row{
        border-bottom: none;
    }

    
    .trophiesPage div#competitions-dropdown,
    .trophiesPage #dates-dropdown{float: left;
        padding: 0;
        z-index: auto;
        transform: none;
    }

    .trophiesPage div#competitions-dropdown{
        width: 83.33333333%;
        position: relative;
        max-height: 80px;
        height: 80px;
        z-index: 5;
        line-height: 80px;
        overflow: hidden;
    }
    
    .trophiesPage div#competitions-dropdown .competition:not(.active) .text-wrapper{
        opacity: 0;
        transition: none;
        max-width: 0;
    }
    
    .trophiesPage #dates-dropdown .active{
        display: block;
    }
    
    .trophiesPage div#competitions-dropdown .competition{
        display: inline-block;
        padding: 0;
        width: auto;
    }
    .trophiesPage div#competitions-dropdown .competition:last-child {
       /*width:2440px;*/
    }

    .trophiesPage div#competitions-dropdown .competition .trophy-img{
        width: 42px;
        height: 60px;
    }


    .trophiesPage div#competitions-dropdown .competition .trophy-img svg{
       width: 48px;
       height: 48px;
    }

    .trophiesPage .main-nav-row .nav-competition .trophy-img, 
    .trophiesPage .competitions-container .trophy-img {
        margin: 10px 16px;
    }

    .trophiesPage .competitions-container .text-wrapper {
        height: 80px;
        line-height: 80px;
        width: auto;
    }

    
    .trophiesPage .competitions-container .text-wrapper p{
        width: auto;
    }
    .trophiesPage .competitions-container .competition:last-child .text-wrapper p{
        margin-right:30px;
    }
    .trophiesPage #dates-dropdown{
        position: absolute;
        margin-top: 80px;
        border-bottom: none;
        width: 16.6666667%;
    }
   
    .trophiesPage #dates-dropdown .decade-name{
        display: block;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 70px;
    }
    
    .trophiesPage .decade{
        float: left;
        border-bottom: 1px solid #ddd;
        height: 100%;
        display: flex;
        align-items: stretch;
    }
        
    .trophiesPage #dates-dropdown .decade-name p{
        position: relative;
        width: auto;
        float: none;
        text-align: center;
        transform: translateY(-50%) rotate(-90deg) translateX(-50%);
        white-space: nowrap;
        margin-top: 55px;
    }

    .trophiesPage .dates-container .century{
       display: none;
    }

    .trophiesPage .dates-container p{
       float: right;
    }
    
    .trophiesPage #dates-dropdown .date:not(.hasTrophy) p{
        opacity: 0.3;
    }
    
    .trophiesPage #dates-dropdown .date:not(.hasTrophy) {
        pointer-events: none;
        /*Fix #13710*/
        display:none;
    }
    
    .trophiesPage .dates-container .date.hasTrophy:hover + .date,
    .trophiesPage .dates-container .date.active + .date:not(:hover) {
        border-top: 1px solid #ddd;
    }
    
    .trophiesPage .dates-container .date{
        border-top: solid 1px transparent;
    }
    
    .trophiesPage .dates-container .date:hover{
        border-top: solid 1px #ddd;
    }
    
    .trophiesPage .dates-container .date:not(:hover):not(.active) + .date.hasTrophy:hover,
    .trophiesPage .dates-container .date + .date.active {
        border-top: 1px solid #ddd;
    }

       
    
    .trophiesPage .dates-container .years{
        /* issue 563 */
        margin-top: -1px;
        border-left: 1px solid #ddd;
        background-color: #f4f4f4;
    }
    
    
    .trophiesPage .dates-container .decade:last-child .years{
        height: 100vh;
        transition: height 500ms ease-in-out;
    }
    .trophiesPage .dates-container .decade:last-child .years.no-height{
        height: 0;
    }
    
    .trophiesPage {
        margin-bottom: 0;
    }

    .trophiesPage .filter-navigation .my-dropdown#dates-dropdown {
        max-height: none;
    }

    .trophiesPage ~ .footer-section {
        opacity: 1;
        padding-top: 90px;
        background-color: white;
        z-index: 9;
        border-top: solid 1px rgb(221,221,221);
        margin-top: -1px;
    }

    .trophiesPage .filter-navigation .date {
        display: none;
        /*padding: 26px 12px 17px;*/
        padding: 18px 12px 10px;
        font-size: 24px;
        border-right: 1px solid transparent;
        background-color: #f4f4f4;
    }
   
    .trophiesPage #dates-dropdown .date.active,
    .trophiesPage .filter-navigation .date.active ~ .date.hasTrophy,
    .trophiesPage .filter-navigation .decade.active ~ .decade .date{
        display: block;
    }
    
    
    .trophiesPage .dates-container .years,
    .trophiesPage .filter-navigation .decade{
        min-height: 100px;
    }

    .trophiesPage .filter-navigation .date.hasTrophy:hover,
    .trophiesPage .filter-navigation .date.active{
        background-color: #fff;
        border-right: none;
        padding-right: 13px;
    }

    
    .trophiesPage .filter-navigation #dates-dropdown .decade{
        display: none;
    }



    
    .trophiesPage .filter-navigation #dates-dropdown .decade.active,
    .trophiesPage .filter-navigation #dates-dropdown .decade.active ~ .decade{
        display: flex;
    }

    
    /**CONTENT  */

    .trophiesPage .content{
        padding-top: 0;
        margin-top: 80px;
    }
    .trophiesPage .content-wrapper{
        padding-top: 40px;
    }

    .trophiesPage .content-wrapper > .row{
        display: flex;
    }


    .trophiesPage .content-wrapper span.year{
        font-size: 320px;
        letter-spacing: -17px;
        margin-right: 0;
        line-height: 0.75;
    }
   
    .trophiesPage .cup-image{
        position: relative;
        padding-bottom: 0;
        padding-top: 400px;
        order: 1;
    }
    /* issue 568 */
     .trophiesPage .content .description {
        padding-top: 40px;
        margin-bottom: 60px;
    }
    
    .trophiesPage .cup-image img{
        width: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }


    .trophiesPage .cup-image hr {
        right: 0;
        top: auto;
        bottom: 32px;
        width: 200%;
    }

    .trophiesPage .season{
        font-size: 14px;
    }

    .trophiesPage h3 {
        font-size: 40px;
    }

    .trophiesPage p.text{
        font-family: Roboto, sans-serif;
        font-size: 16px;
    }

    .trophiesPage h4 {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .trophiesPage .trivia h4 {
        margin-left: 16px;
    }

    .trophiesPage .trivia p.text{
        margin-left: 32px;
    }

    .trophiesPage .player-wrapper {
        font-size: 14px;
    }

    .trophiesPage .mvps,
    .trophiesPage .trivia{
        margin-top: 40px;
        margin-bottom: 74px;
    }
    
    .trophiesPage .mvps{
        padding-right: 12px;
    }

    .trophiesPage .trivia{
        padding-left: 12px;
    }



    

    .trophiesPage .filter-navigation .my-dropdown {
        max-height: calc(100vh - 138px);
    }
    

    .trophiesPage .filter-navigation .my-dropdown#dates-dropdown {
        overflow: hidden;
    }
    
    
    .trophiesPage div#competitions-dropdown{
        border-left: none !important;
    }
    
    .trophiesPage .filter-navigation .main-nav-row .nav-modalities {
        border: solid 1px rgb(221,221,221);
        border-top: none;
    }
    .trophiesPage .filter-navigation .main-nav-row .nav-modalities.active {
        border-bottom: none;
    }

}
/* issue 568 */
@media screen and (min-width: 895px){
    .trophiesPage .content .description {
        padding-top:70px;
    }
}

@media screen and  (min-width: 992px) {


    
    .trophiesPage .filter-navigation{
        position: relative;     
    }



    .trophiesPage .content {
        margin-top: 0;
    }
    
    
    .trophiesPage #dates-dropdown,
    .trophiesPage .filter-navigation .main-nav-row {
        width: 10%;
    }
    .trophiesPage div#competitions-dropdown {
        width: 90%;
    }

}

@media screen and (min-width: 1025px) {
    
    .trophiesPage .filter-navigation.fixed{
        position: fixed;
        max-width: 1600px;
        /* issue 565 
        top: 80px;*/
        top: 87px;
    }
    
    

    .trophiesPage .filter-navigation .my-dropdown {
        max-height: calc(100vh - 262px);
    }

}

@media screen and  (min-width: 1200px) {
    
    .trophiesPage .filter-navigation .my-dropdown#modalities-dropdown .modality p{
        max-width: 110px;
        width: auto;
    }

    .trophiesPage .filter-navigation.fixed {
        top: 85px;
    }

}