/* Copyright 2016 Ranker Inc. All rights reserved. */
/**
 * Collections
 * DESKTOP
 * @fileoverview Styles for list collection.
 * @author emily@ranker.com (Lostaunau, Emily)
 * @author paul@ranker.com (Paul West)
 */

/* Collection */
#collection{ z-index: 1; height:290px; background-position: top right; background-repeat: no-repeat; }
#collection::after{ content: ''; z-index:-1; position: absolute; width:790px; height:270px; top:10px; right:10px; border: 1px solid rgb( 255,255,255 ); }

    /* Collection Head */
    #collection__head{ z-index: 6; top:21px; left: 0; width:584px; height: auto; min-height: 81px; max-height: 155px; padding:8px 10px 8px 0; 
        font-size:35px; font-weight: 700; border: 1px solid rgb( 210,210,210 ); border-width: 1px 1px 1px 0; }
        #collection__headTitle{ margin:0; min-height: 64px; padding-left:10px; }
        #collection__headTitle::before{ content: 'COLLECTION'; position:relative; top: 3px; left: 0; display: block; margin: -2px 0 5px; font-size:13px; line-height: 15px; 
            font-family: Arial, Helvetica, sans-serif; color: rgb( 99,99,99 ); }
        #collection__headNumLists{ flex-flow: column; align-items: center; top: 0; left: 0; font-size: 35px; line-height: 35px; 
            font-weight: 400; border-right: 1px solid rgb( 210,210,210 ); }
        #collection__headNumListsIcon{ width: 20px; height: 20px; padding: 0 26px; margin: 3px 0 7px; }
        #collection__headNumListsSub{ font-size: 13px; line-height: 16px; font-weight: 700; }
        #collection__headDesc{ margin-top:5px; font-size:14px; font-weight:300; line-height:18px; }
    
    /* Collection Sponsor */
    #collection__headSponsorLink:hover{ text-decoration: none; }
    #collection__headSponsorImg{ max-width: 140px; width: auto; height: 35px; margin:5px 5px 0; }
    
    /* Collection Image */
    #collection__imageAttribute{ margin-top: 4px; padding-right: 5px; box-sizing: border-box; }
    
    /* Collection Items */
    #collection__itemsParent{ bottom: 10px; left: -5px; margin: 0 45px; width: calc( 100% - 90px ); height: 190px; }
    
        .collection__trackContainer{ top: 0; width: 100%; height: 100%; z-index: 6; }
        
            #collection__track{ width: 1000000px; height: 100%; }
            #collection__itemsPrev,
            #collection__itemsNext{ bottom: 19px; width: 28px; height: 28px; padding: 26px 0; fill: rgb( 255,255,255 ); 
                /* Drop Shadow */
                -webkit-filter: drop-shadow( 0 0 1px rgb( 0,0,0 ) );
                filter: drop-shadow( 0 0 1px rgb( 0,0,0 ) );
                /* Need all pseudo elements s standard is still in beta */
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none; }
            #collection__itemsPrev{ left:9px; }
            #collection__itemsNext{ right:15px; }
            #collection__itemsPrev.collection__itemsNav--isDisabled,
            #collection__itemsNext.collection__itemsNav--isDisabled{ cursor: default; fill: rgb( 160,160,160 ); 
                /* Drop Shadow */
                -webkit-filter: none;
                filter: none; } 
        
                /* Collection Item */
                .collection__item{ top: 95px; margin: 10px 7px; width: 143px; height: 75px; font-size: 18px; line-height: 20px; border: 1px solid rgb( 203,203,203 );
                     background-size: 101%; text-align: center; }
                .collection__item:hover{ text-decoration: none; }
                    .collection__itemLabel{ padding:0 3%; background: rgba( 0,0,0,0.5 ); align-items: center; justify-content: center; height: 100%; }
                    .collection__item--isFirst .collection__itemLabel{ background: rgba( 255,255,255,0.7 ); font-weight: 700; text-align: center; }
                    .collection__item:hover .collection__itemLabel{ top: -78px; background: rgb( 255,255,255 ); color: rgb( 0,0,0 ); border: 1px solid rgb( 0,0,0 ); z-index: 5; 
                        left: 0; margin: 0 -1px; font-size: 12px; line-height: 14px; }

/* ABTEST COLLECTIONS Var 10 - Change CSS to Class if this WINS */
.collection--var10 .collection__item{ width: 238px; font-size: 13px; padding: 0 130px 0 7px; line-height: 15px; box-sizing: border-box; color: rgb( 0,0,0 ); display: flex; 
     align-items: flex-start; flex-direction: column; justify-content: center; text-align: left; }
     .collection--var10 .collection__item::after{ content:''; background-color: rgb( 255,255,255 ); width: 236px; height: 73px; display: block; position: absolute; top: 0; 
        z-index: -1; left: 0; }
    .collection--var10 .collection__item--isFirst{ border: 1px solid rgb( 129,38,46 ); font-weight: 400; pointer-events: none; }
        .collection--var10 .collection__item--isFirst .collection__itemLabel{ text-align: left; }
        .collection--var10 .collection__item--isFirst::after{ background: rgba( 255,255,255,0.7 ); z-index: 0; }
        .collection--var10 .collection__item:hover.collection__item--isFirst::after{ background: rgba( 255,255,255,0.7 ); z-index: 5; pointer-events: none; }
    .collection--var10 .collection__item:hover{ border: 1px solid rgb( 129,38,46 ); }
        .collection--var10 .collection__item:hover .collection__itemLabel{ top: 0; border: unset; line-height: 15px; font-size: 13px; margin: 0; justify-content: flex-start; }
            .collection--var10 .collection__item--isFirst .collection__itemLabel,
            .collection--var10 .collection__itemLabel{ background: unset; font-weight: 700; height: auto; }
                .collection--var10 .collection__itemTag{ font-size: 11px; color: rgb( 129,38,46 ); font-weight: 700; text-transform: uppercase; padding-left: 2px; display: block; }
/* Copyright 2016 Ranker Inc. All rights reserved. */
/**
 * Collections Footer
 * DESKTOP
 * @fileoverview Styles for list collection.
 * @author jharkey@ranker.com (Justin Harkey)
 */

/* Collection */
#collectionBottom{ z-index: 1; height: 377px; background-position: center center; background-repeat: no-repeat; margin-top: 52px; margin-bottom: 50px;
    padding-top: 20px; font-size: 16px; display: none; }
#collectionBottom::before,
#collectionBottom::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 242,242,242,0.8 ); z-index: -1; }
#collectionBottom::after{ /* Background Gradient */
    background: -webkit-linear-gradient(left, rgba(242,242,242,1) 0%,rgba(242,242,242,0) 10%,rgba(242,242,242,0) 90%,rgba(242,242,242,1) 100%);
    background: linear-gradient(to right, rgba(242,242,242,1) 0%,rgba(242,242,242,0) 10%,rgba(242,242,242,0) 90%,rgba(242,242,242,1) 100%); }

    /* Collection Head */
    #collectionBottom__title{ font-size: 40px; line-height: 45px; margin: 0 0 5px; font-weight: 700; }
    #collectionBottom__titleIcon{ margin: 0 8px; font-size: 9px; font-weight: 700; line-height: 9px; }
        #collectionBottom__titleIconSvg{ margin-bottom: 3px; width: 20px; height: 20px; }
    
    /* Collection Items */
    #collectionBottom__itemsParent{ top: 104px; margin: 0 0 0 35px; width: calc( 100% - 35px ); height: 267px; }
    .collectionBottom__trackContainer--centered #collectionBottom__itemsParent{ width: calc( 100% - 70px ); }
    
        .collectionBottom__trackContainer{ top: 0; width: 100%; height: 100%; z-index: 6; }
        .collectionBottom__trackContainer::after{ content: ''; width: 87px; height: 100%; display: block; position: absolute; top: 114px; right: 0;
        /* Background Gradient */
        background: -webkit-linear-gradient(left, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 70%,rgba(242,242,242,1) 100%);
        background: linear-gradient(to right, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 70%,rgba(242,242,242,1) 100%); }
        .collectionBottom__trackContainer--centered::after{ display: none; }
        
            #collectionBottom__track{ width: 1000000px; height: 100%; position: absolute; }
            .collectionBottom__trackContainer--centered #collectionBottom__track{ display: inline-block; width: auto; margin: 0 auto; position: static; }
            #collectionBottom__itemsPrev,
            #collectionBottom__itemsNext{ top: 111px; padding: 111px 2px; width: 27px; height: 27px; user-select: none; z-index: 7; }
            #collectionBottom__itemsPrev{ left: 0; }
            #collectionBottom__itemsNext{ right: 0; }
            #collectionBottom__itemsPrev:hover,
            #collectionBottom__itemsNext:hover{ fill: rgb( 8,108,184 ); }
            #collectionBottom__itemsPrev.collectionBottom__itemsNav--isDisabled,
            #collectionBottom__itemsNext.collectionBottom__itemsNav--isDisabled,
            #collectionBottom__itemsPrev.collectionBottom__itemsNav--isDisabled:hover,
            #collectionBottom__itemsNext.collectionBottom__itemsNav--isDisabled:hover{ cursor: default; fill: rgb( 160,160,160 ); } 
        
                /* Collection Item */
                .collectionBottom__item{ margin: 10px 7px; width: 267px; height: 245px; font-size: 18px; line-height: 20px; flex-flow: column;
                    justify-content: flex-end; align-items: center; }
                .collectionBottom__item::after{ content: ''; position: absolute; top: 0; left: 0; z-index: 1; border: 1px solid rgb( 255,255,255 ); border-width: 1px 1px 0;
                    width: 237px; height: 125px; margin: 15px 15px 0; }
                .collectionBottom__item:hover{ text-decoration: none; }
                    .collectionBottom__itemTag{ padding: 8px 12px; border: 1px solid rgb( 255,255,255 ); margin-bottom: 10px; background-color: rgba(0,0,0,0.44); font-weight: 400;
                        font-size: 16px; line-height: 16px; max-width: 65%; }
                    .collectionBottom__itemLabel{ padding: 4%; min-height: 104px; width: 269px; font-size: 20px; line-height: 27px; align-items: center; justify-content: center; 
                        border: 1px solid rgb( 203,203,203 ); box-sizing: border-box; z-index: 2; }
/* Copyright 2017 Ranker Inc. All rights reserved. */
/**
 * List
 * DESKTOP
 * @fileoverview Styles for list content.
 * @author paul@ranker.com (Paul West)
 * @author jharkey@ranker.com (Justin Harkey)
 */

body{ background-color: rgb(255,255,255); }

/* Blocks */
.list__section{ max-width:1350px; min-width: 1063px; margin:0 auto; }

/* Image Caption */
figcaption{ margin:3px 2px; font-size:11px; line-height:12px; }
    figcaption a{ color:inherit; }
    
/* Right Rail */
.listItem__rightRail{ float:right; }

/* List Header */
.list__header{ min-height: 443px; margin: 0 15px 12px; }
.list--headerImage .list__header,
.list--headerImageVideo .list__header{ margin-top: 15px; }
.list--headerVideo .list__header,
.list--headerEmpty .list__header{ min-height: 0; }

    /* List Image */
    .list__image{ top: 0; right: 0; z-index: 1; width: 60.51%; height: 427px; background-repeat: no-repeat; background-position: 50% 50%; }
    .list__image::after{ content: ''; display: block; border: 1px solid rgb(255,255,255); width: 95.10%; height: 90.63%; position: absolute; top: 20px; left: 20px; }
    .list__imageAttribute{ right:0; margin-top: 428px; }
    
    /* List Video Shared */
    .videoPlayer__icon{ display: block; top: 50%; left: 50%; color: rgb(255,255,255); text-shadow: none; z-index: 2; }
    
    /* List Video */
    .list__video{ text-shadow: 1px 1px 0 rgb(0,0,0); }
    .list--headerVideo .list__video{ float: right; width: 400px; height: 215px; margin-left: 10px; padding-bottom: 10px; font-size: 25px; line-height: 30px; }
    .list__video .videoPlayer{ width: 400px; height: 215px; flex-flow: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; }
        .list__video .videoPlayer::before{ position: absolute; display: block; top: 0; left: 0; content: ''; width: 100%; height: 100%; 
            /* Gradient */
            background: -webkit-linear-gradient( top, rgba( 255,255,255,0 ) 0%, rgba( 7,7,7,0 ) 55%, rgba( 0,0,0,0.03 ) 56%, rgba( 0,0,0,0.8 ) 80%, rgba( 0,0,0,0.8 ) 100% );
            background: linear-gradient( to bottom, rgba( 255,255,255,0 ) 0%, rgba( 7,7,7,0 ) 55%, rgba( 0,0,0,0.03 ) 56%, rgba( 0,0,0,0.8 ) 80%, rgba( 0,0,0,0.8 ) 100% ); 
                z-index: -1; }
            .list__video--sponsored .videoPlayer::before{ display: none !important; }
    .list__video .videoPlayer__image{ width: 100%; height: 100%; top: 0; left: 0; z-index: -2; }
    .list--headerVideo .list__videoIcon{ margin: -28px 0 0 -24px; width: 48px; height: 48px; fill: rgb( 255,255,255 ); background: rgba( 0,0,0,0.6 ); border-radius: 50%; }
    .list--headerVideo .list__videoIcon::before{ background: rgba(0,0,0,0.6); border-radius: 50%; position: absolute; top: 8px; left: 12px; 
        display: block; height: 44px; width: 44px; content: ''; z-index: -1; }
    .list--headerImageVideo .list__video{ width: 216px; height: 122px; float: right; margin: 271px 32px 0 0; padding: 0; flex-flow: column; align-items: center; 
        justify-content: flex-end; border: 1px solid rgb(255,255,255); font-size: 13px; font-weight: 700; overflow: visible; }
        .list--headerImageVideo .list__video .videoPlayer{ width: 204px; height: 112px; padding: 0 6px 10px; }
        .list--headerImageVideo .list__video .videoPlayer::before{
                /* Gradient */
                background: -webkit-linear-gradient( top, rgba( 255,255,255,0 ) 0%, rgba( 7,7,7,0 ) 62%, rgba( 0,0,0,0.03 ) 63%, rgba( 0,0,0,0.8 ) 80%, rgba( 0,0,0,0.8 ) 100% );
                background: linear-gradient( to bottom, rgba( 255,255,255,0 ) 0%, rgba( 7,7,7,0 ) 62%, rgba( 0,0,0,0.03 ) 63%, rgba( 0,0,0,0.8 ) 80%, rgba( 0,0,0,0.8 ) 100% ); }
        .list--headerImageVideo .list__videoIcon{ width: 32px; height: 32px; margin: -16px 0 0 -16px; fill: rgb( 255,255,255 ); background: rgba( 0,0,0,0.44 ); border-radius: 50%; }
            
    /* List Video - Video Format */
    #list__video--single{ text-shadow: 1px 1px 0 rgb(0,0,0); width: 100%; height: auto; }
    #list__video--single .videoPlayer__icon{ margin: -50px 0 0 -50px; width: 100px; height: 100px; fill: rgb( 255,255,255 ); background: rgba( 0,0,0,0.6 ); border-radius: 50%; }
    #list__video--single .videoPlayer{ height: 527px; flex-flow: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; }
    #list__video--single .videoPlayer__image{ top: 0; left: 0; z-index: -2; max-width: 100%; }
    
    /* Voting closed */
	.list__closedMsg{ font-size: 18px; font-weight: 700; line-height: 21px; color:rgb( 184,21,7 ); margin: 0 13px 3px; }
	.list__closedIcon{ top: -2px; margin-right: 3px; width: 14px; height: 14px; fill: rgb( 184,21,7 ); }
    
    /* List Title */
    .list__title{ width: 39.49%; }
    .list--headerVideo .list__title,
    .list--headerEmpty .list__title{ width: 100%; }
    .list__h1{ font-size: 50px; line-height: 57px; font-weight: 700; top: 7px; left: 0; border: 1px solid rgb(210,210,210); border-width: 1px 1px 1px 0; 
        padding: 20px 15px 15px 0; margin: 28px -18% 14px 0; z-index: 1; }
    .list--headerVideo .list__h1,
    .list--headerEmpty .list__h1{ margin-right: 0; }
        .list__tag{ text-transform: uppercase; top: -1px; left: 0; border: 1px solid rgb(126,126,126); font-weight: normal; font-size: 13px; line-height: 25px; 
            color: rgb(126,126,126); padding: 0 12px; z-index: 3; margin-top: -14px; }
        #list__edit{ top:-15px; left:0; border:1px solid rgb(135,135,135); padding:0 12px; font-weight:normal; font-size:13px; line-height: 25px; z-index:2; }
        #list__edit:hover,
        #list__edit:focus,
        #list__edit:active{ background-color:rgb( 8,108,184 ); }
        #list__sponsor{ font-size: 25px; line-height: 25px; }
        #list__sponsorLink { text-decoration: none; }
        #list__sponsorLink:hover { color: rgb( 8,108,184 ); margin-bottom: 4px; text-decoration: none; }
        
        /* List Share */
        .listStats{ top: 3px; height: 36px; }
            .listStats__icon{ margin-right: 7px; background: rgb( 30,62,102 ); border-radius: 50%; }
            .listStats__icon--fb{ background-color: rgb( 255,255,255 ); border: 2px solid rgb( 59,89,152 ); border-radius: 50%; }
            .listStats__icon--pinterest{ background-color: rgb( 255,255,255 ); border: 2px solid rgb( 189,8,28 ); border-radius: 50%; }
            .listStats__icon--email{ background-color: rgb( 255,255,255 ); border: 2px solid rgb( 99,99,99 ); border-radius: 50%; }
            .listStats__iconSvg{ fill: rgb( 255,255,255 ); padding: 10.5px; width: 15px; height: 15px; }
                .listStats__icon--fb .listStats__iconSvg{ fill: rgb( 59,89,152 ); }
                .listStats__icon--pinterest .listStats__iconSvg{ fill: rgb( 189,8,28 ); }
                .listStats__icon--email .listStats__iconSvg{ fill: rgb( 99,99,99 ); }
    
    /* List Author */
    .list__authorImage{ width: 56px; height: 56px; overflow: hidden; border-radius: 100%; margin: 0 15px 12px 0; }
    .list__author{ font-size: 25px; font-weight: 700; margin: 21px 0 6px; }
    .list__authorLink:hover{ text-decoration: none; color: rgb(8,108,184); }
    .list__data{ font-size: 13px; }
        .list__dataItem{ margin-right: 22px; }
        .list__dataItem::after{ content: '\2022'; position: absolute; top: 0; right: -14px; color: rgb(100,100,100) !important; line-height: 100%; }
        .list__dataItem--last:hover{ text-decoration: none; }
        .list__dataItem--last::after{ display: none; }
    
    /* List Criteria */
    .list__criteria{ clear: left; font-size: 16px; line-height: 25px; font-style: italic; border-left: 1px solid rgb(100,100,100); padding: 0 0 0 20px; 
        margin: 20px 0 0 20px; }
    .list__criteria::before{ content: ''; position: absolute; top: 50%; left: -1px; margin-top: -8px; width: 0; height: 0; border-top: 8px solid transparent; 
        border-bottom: 8px solid transparent; border-left: 8px solid rgb(255,255,255); z-index: 2; }
    .list__criteria::after{ content: ''; position: absolute; top: 50%; left: -1px; margin-top: -9px; width: 0; height: 0; border-top: 9px solid transparent; 
        border-bottom: 9px solid transparent; border-left: 9px solid rgb(100,100,100); z-index: 1; }
        .list__criteriaTitle{ font-size:18px; font-style: normal; line-height:14px; padding-bottom: 5px; }

/* List Description */
.list__description{ height: auto; font-size: 16px; line-height: 27px; color: rgb( 66,66,66 ); margin: 0 15px; padding-bottom: 10px; }
.list--headerVideo .list__description{ height: 260px; }
    .list__description p{ overflow: visible; }
    .list__description li{ margin-left:40px; margin-bottom:5px; font-size:16px; line-height:30px; overflow:visible; }
    .list__description ol{ list-style:outside decimal; }
    .list__description ul{ list-style:outside disc; }
    .list__description blockquote{ margin: 0 40px; }
    .list__description .rankerList__caption{ text-align: left !important; }
    
/* List Filter */
.listFilter{ height: 55px; max-height: 55px; background-color: rgb( 242,242,242 ); border-bottom: 1px solid rgb( 233,236,239 ); padding: 12px 14px; box-sizing: border-box; white-space: nowrap; }
    .listFilter::after{ content: ''; display: table; clear: both; }

    .listFilter__title{ margin-right: 10px; padding-right: 10px; border-right: 1px solid rgb( 202,202,202 ); font-size: 17px; line-height: 30px; }
    .listFilter__title.listFilter__title--closed{ color: rgb( 129,38,46 ); }
    #listFilter__titleClosedIcon{ margin: -4px 8px 0 0; width: 11px; height: 11px; fill: rgb( 129,38,46 ); }
        .listFilter__selectedText{ text-transform: capitalize; }

    /* Rerank */
    #rerankButton{ right: 14px; padding: 5px 20px 4px 17px; font-size: 13px; line-height: 18px; }
        #rerankButton__icon{ margin-top: -2px; width: 12px; height: 12px; fill: rgb( 255,255,255 ); }
        
    /* Rerank Placeholder */
    #rerankPlaceholder{ width: 587px; height: 291px; border: 1px solid rgb( 33,63,104 ); font-size: 18px; font-weight: 700; padding: 33px 24px 24px; box-sizing: border-box; 
    box-shadow: 5px 5px 5px 0 rgba( 0,0,0,0.20 ); z-index: 8881; text-shadow: 1px 1px rgb( 255,255,255 ); bottom: 78px; right: 14px; }
        #rerankPlaceholder::after,
        #rerankPlaceholder::before{ content: ''; width: 0; height: 0; position: absolute; bottom: -20px; right: 63px; }
        #rerankPlaceholder::after{ border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid rgb( 255,255,255 ); }
        #rerankPlaceholder::before{ border-left: 21px solid transparent; border-right: 21px solid transparent; border-top: 21px solid rgb( 33,63,104 ); bottom: -21px; right: 62px; }
        #rerankPlaceholder__close{ top: 11px; right: 11px; cursor: pointer; width:30px; }
        #rerankPlaceholder__image{ background-position: -41px -75px; background-repeat: no-repeat; width: 226px; height: 226px; background-size: 226px 226px; opacity: 0.15; top: 0; left: 0; }
        #rerankPlaceholder__title{ font-size: 30px; margin-bottom: 8px; }
        .rerankPlaceholder__text{ font-size: 14px; font-weight: normal; line-height: 20px; }
        .rerankPlaceholder__text--first{ margin-top: 18px; }
        #rerankPlaceholder__link{ font-size: 16px; font-weight: normal; }
        
        
/* ABTEST - List After List : Remove once test is complete */
.listAfterList{ margin-top: 40px; }
#listAfterList__fullListBtn{ text-transform: uppercase; }
    #listAfterList__fullListBtnIcon{ margin: -7px 0 0 4px; width: 21px; height: 21px; fill: rgb( 255,255,255 ); }
    .listAfterList__loadMoreIcon{ fill: rgb( 255,255,255 ); width: 22px; height: 22px; }
.listAfterList .list__tag{ color: rgb( 255,255,255 ); background-color: rgb( 129,38,46 ); border: rgb( 129,38,46 ); }