/*
Properties listed in this file are meant to be defaults for the 
theming of the front row widget. Any of the rules listed here
can safely be overwritten depending upon the theming needs of 
the widget per event activation
*/

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Base Styles
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row .front-row-inner {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}

#front-row h1 {
    padding: 13px;
    width: 50%;
}

#front-row h1 .desktop-logo-collapsed {
    width: 250px;
}

#front-row .watch-live-now {
    padding: 0 13px 0 13px;
    width: 50%;
}

@media (min-width: 320px) {
    #front-row h1 {
        width: 50%;
        padding: 1px 1px 1px 10px;
    }

    #front-row .watch-live-now {
        width: 46%;
    }
}

@media (min-width: 768px) {
    #front-row h1 {
        padding: 13px;
        width: 50%;
    }

    #front-row .watch-live-now {
        width: 46%;
    }
}

#front-row .watch-live-now #watch-now-button-narrow {
    max-height: 48px;
}

#front-row .sponsorship {
    height: 40px;
    width: 50%;
    margin-right: -1px;
}
#front-row .sponsorship .by-message {
    padding: 2px 4px 2px 12px;
    font-size: 8px;
    color: #CCC;
    width: 120px;
}

#front-row .video-player {
    padding: 13px 0;
}
#front-row .video-player-aspect {
    background: #000000;
    padding-bottom: 56.25%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* MOBILE RESPONSIVE COLLAPSED - handles the collapsed state
* of the widget on mobile
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row[data-behavior='interactive'].collapse h1 {
    width: 50%;
}

#front-row[data-behavior='interactive'].collapse .watch-live-now {
    width: 45%;
}

@media (min-width: 320px) {
    #front-row[data-behavior='interactive'].collapse h1 {
        width: 65%;
    }

    #front-row[data-behavior='interactive'].collapse .watch-live-now {
        width: 30%;
    }
}

@media (min-width: 768px) {
    #front-row[data-behavior='interactive'].collapse h1 {
        padding: 13px;
        width: 54%;
    }

    #front-row[data-behavior='interactive'].collapse .watch-live-now {
        width: 46%;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* MOBILE RESPONSIVE EXPANDED - handles the expanded state of the 
* widget on mobile
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row[data-behavior='interactive'].expand h1 {
    padding: 10px 0;
}

#front-row[data-behavior='interactive'].expand h1 .desktop-logo-expanded {
    margin-top: -35px;
    max-width: 250px;
}

#front-row[data-behavior='interactive'].expand .see-full-coverage {
    padding: 13px 0 0 0;
}

#front-row[data-behavior='interactive'].expand .video-player {
    border: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DESKTOP FIXED COLLAPSED - handles the collapsed state of the 
* widget on desktop
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row[data-layout='fixed'].collapse .front-row-inner {
    border-bottom-width: 3px;
    padding: 0 20px 0 20px;
}

#front-row[data-layout='fixed'].collapse h1 {
    padding: 5px 0;
    width: 70%;
}

#front-row[data-layout='fixed'].collapse .watch-live-now {
    width: 30%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DESKTOP FIXED EXPANDED - handles the expanded state of the widget
* on desktop
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row[data-layout='fixed'].expand .front-row-container {
    height: 400px;
}

#front-row[data-layout='fixed'].expand .front-row-inner {
    padding: 60px 24px 24px 736px;
}

#front-row[data-layout='fixed'].expand h1 {
    padding: 0;
}

#front-row[data-layout='fixed'].expand .sponsorship {
    margin-top: 20px;
    width: 248px;
}

#front-row[data-layout='fixed'].expand .sponsorship .by-message {
    font-size: 8px;
    height: 18px;
    padding: 0 0 4px;
}

#front-row[data-layout='fixed'].expand .sponsorship .sponsorship-container {
    display: none;
    height: 30px;
    width: 120px;
}

#front-row[data-layout='fixed'].expand .video-player {
    border-top: none;
    border-bottom: none;
    width: 710px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* APPS ONLY: WEBVIEW COLLAPSED - handles the appearance of the
* widget as it is loaded in a webview for use within the mobile
* app; only shows in the collapsed state
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#front-row[data-behavior='static'][data-layout='fluid'] h1 {
    width: 65%;
    margin: 0;
    height: 82px;
    padding: 0;
}
#front-row[data-behavior='static'][data-layout='fluid'] .watch-live-now {
    width: 35%;
}
#front-row[data-behavior='static'][data-layout='fluid'] .desktop-logo-collapsed {
    display: none;
}
#front-row[data-behavior='static'][data-layout='fluid'] .mobile-logo-collapsed {
    display: block;
    height: auto;
    margin-left: 10px;
    padding-right: 5px;                
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}


/* Custom All */
#front-row {
  background-color: #13142a !important;
}


/* Custom Desktop */
#front-row.collapse.active, #front-row.expand.active { 
  background-repeat: no-repeat !important;
}

/* Custom Desktop Collapsed */
#front-row .watch-live-now #watch-now-button-wide {
  margin-right: 24px !important;
}

@media (min-width: 768px) {
  #front-row.collapse.active[data-layout="fixed"] {
    background-position: right -150px bottom !important;
    background-size: 40% !important;
  }
}

@media (min-width: 1008px) {
  #front-row.collapse.active[data-layout="fixed"] {
    background-position: right bottom -20px !important;
    background-size: 28% !important;
  }
}

#front-row[data-behavior='interactive'].collapse h1 .desktop-logo-collapsed {
    height: 100%;
}

/* Custom Desktop Expanded*/
@media (min-width: 768px) {
  #front-row.expand.active[data-layout="fixed"] {
    background: url("https://m.media-amazon.com/images/G/01/IMDb/experiments/front-row/emmys-2018/desktop_bg_graphic--lg._CB1536187745_.png") !important;
    background-color: #13142a !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    background-size: 65% !important;
  }
}

#front-row.expand[data-layout="fixed"] .arrow-collapse {
    max-height: 50%;
}

/* Custom Mobile */
#front-row.collapse[data-behavior="interactive"][data-layout="fluid"] {
  background-repeat: no-repeat;
}

#front-row.expand[data-layout="fluid"] .arrow-collapse {
    max-height: 38%;
}
/* Custom Mobile Collapsed*/
#front-row.collapse.active[data-behavior='interactive'][data-layout="fluid"], 
#front-row.collapse.active[data-behavior='static'][data-layout="fluid"] {
  background-position: center bottom;
  background-size: contain;
}

#front-row[data-behavior='interactive'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed,
#front-row[data-behavior='static'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed {
  max-width: unset;
  max-height: unset;
  width: 140%;
  height: 100%;
}

#front-row[data-behavior='interactive'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed {
  margin-left: 0px;
}

#front-row[data-behavior='static'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed {
  margin-left: calc(4%) !important;
}

#front-row[data-behavior='interactive'][data-layout="fluid"].collapse .watch-live-now,
#front-row[data-behavior='static'][data-layout="fluid"].collapse .watch-live-now, {
  margin-right: 5px;
  width: 33%;
}

#front-row[data-behavior='interactive'][data-layout="fluid"].collapse h1,
#front-row[data-behavior='static'][data-layout="fluid"].collapse h1, {
  width: 64%;
}

#front-row[data-behavior='interactive'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow,
#front-row[data-behavior='static'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow {
  transform: scale(1.1);
  flex: 1 auto;
  position: unset;
}

#front-row[data-behavior='interactive'].collapse .watch-live-now .watch-live-now-wrapper {
    display: -webkit-box !important; 
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important; 
    display: flex !important;
    -webkit-box-align: center !important;
    -moz-box-align: center !important;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
}


/* 6 7 8 plus X Collapsed Landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 
    #front-row.collapse.active[data-behavior='interactive'][data-layout="fluid"], 
    #front-row.collapse.active[data-behavior='static'][data-layout="fluid"] {
        background-position: calc(50% - 6%) bottom;
    }

    #front-row[data-behavior='interactive'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed {
        margin-left: calc(-15%) !important;
    }

    #front-row[data-behavior='interactive'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow,
    #front-row[data-behavior='static'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow {
        transform: scale(1);
        margin-right: calc(5%);
    }
}

/* 5 6 7 8 Collapsed Landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
    #front-row.collapse.active[data-behavior='interactive'][data-layout="fluid"], 
    #front-row.collapse.active[data-behavior='static'][data-layout="fluid"] {
        background-position: calc(50% - 6%) bottom;
    }

    #front-row[data-behavior='interactive'][data-layout="fluid"].collapse h1 .mobile-logo-collapsed {
        margin-left: calc(-15%) !important;
    }

    #front-row[data-behavior='interactive'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow,
    #front-row[data-behavior='static'][data-layout="fluid"].collapse .watch-live-now #watch-now-button-narrow {
        transform: scale(1);
        margin-right: calc(5%);
    }
}

/* Custom Mobile Expanded */
#front-row.expand.active[data-behavior='interactive'][data-layout="fluid"] {
  background-position: right -130px bottom;
  background-size: contain;
}

#front-row.expand.active[data-behavior='interactive'][data-layout="fluid"] .footer-row {
  margin-top: -3px;
}

#front-row.expand.active[data-behavior='interactive'][data-layout="fluid"] #front-row-full-coverage-cta {
  transform: scale(0.9);
}

/* Custom Mobile Expand Transitioning*/
#front-row.expand.transitioning[data-behavior='interactive'][data-layout="fluid"] .footer-row {
  margin-top: -3px;
}

#front-row.expand.transitioning[data-behavior='interactive'][data-layout="fluid"] #front-row-full-coverage-cta {
  transform: scale(0.9);
}

/* Custom Transitioning */
#front-row.transitioning {
  background-image: none;
  background-color: #13142a;
  background-repeat: no-repeat;
}

/* iPhone 10 Landscape Expanded Adjustments */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 
    #front-row.expand.active[data-behavior='interactive'][data-layout="fluid"] {
        background-position: calc(100% + 25%) calc(100%) !important;
        background-size: calc(43%) !important;
    }
}

/* 6 7 8 Landscape Expanded Adjustments */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
    #front-row.expand.active[data-behavior='interactive'][data-layout="fluid"] {
        background-position: calc(100% + 25%) calc(100%) !important;
        background-size: calc(43%) !important;
    }
}