/* STYLES FOR THE AOTW COMPONENT GOIES HERE */
.component-aotw .headshot { --bs-aspect-ratio:110% }
.component-aotw .headshot img { width:100% }
.component-aotw .default-headshot { display:flex; flex-direction:column; justify-content:center; align-items:center; }  

/* STANDARD LAYOUT */
.component-aotw.layout-standard .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-standard .details-wrapper { width:100% }
.component-aotw.layout-standard .component-image { display:none; align-self:center; text-align:center }
.component-aotw.layout-standard .players { display:flex; flex-direction:column; flex-wrap:wrap; gap:20px }
.component-aotw.layout-standard .player { width:100%; position:relative }
.component-aotw.layout-standard .player-details { position:absolute; left:10px; right:10px; bottom:10px }

@media only screen and (min-width:576px) {
    .component-aotw.layout-standard .players { flex-direction:row; justify-content:space-between }
    .component-aotw.layout-standard .player { flex:1 1 48% }
}

@media only screen and (min-width:768px) {
    .component-aotw.layout-standard .details-wrapper { width:30%; align-self:center; order:2 }
    .component-aotw.layout-standard .page-details { flex-direction:column }
    .component-aotw.layout-standard .players { flex-wrap:nowrap }
    .component-aotw.layout-standard .player { flex:1 0 200px; max-width:270px }
    .component-aotw.layout-standard .player:last-child { order:3 }
    .component-aotw.layout-standard .component-headings { display:none }
    .component-aotw.layout-standard .component-image { display:block }
    .component-aotw.layout-standard .component-image img { max-width:100% }
}

/* INLINE LAYOUT */
.component-aotw.layout-inline .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-inline .layout-wrapper { display:flex; flex-direction:column; gap:1rem }
.component-aotw.layout-inline .component-image { display:none }
.component-aotw.layout-inline .players { display:flex; flex-direction:column; gap:20px }
.component-aotw.layout-inline .player { flex:1; max-width:270px }

.component-aotw.layout-inline .player-bio { padding:5px 10px }
.component-aotw.layout-inline .player-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  }
.component-aotw.layout-inline .team-logo { position:absolute; left:0; bottom:0; width:60px; background:#fff }
.component-aotw.layout-inline .team-logo + .player-bio { margin-left:60px }

.component-aotw.layout-inline .slick-slider { margin:0; overflow:hidden; }
.component-aotw.layout-inline .slick-slider .player { max-width:none }
.component-aotw.layout-inline .slick-dots { position:static }
.component-aotw.layout-inline .btn { margin-top:-3rem }
.component-aotw.layout-inline .btn.slick-disabled { display:none !important }
.component-aotw.layout-inline .btn { visibility:hidden; border:none; transition:all .4s; }
.component-aotw.layout-inline .slick-prev { border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0 }
.component-aotw.layout-inline .slick-next { border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius) }
.component-aotw.layout-inline .slick-slider:hover .btn { visibility:visible }
.component-aotw.layout-inline .slick-slider:hover .slick-prev { left:0 }
.component-aotw.layout-inline .slick-slider:hover .slick-next { right:0 }
.component-aotw.layout-inline .slider-buttons { display:none }

@media only screen and (min-width:576px) {
    .component-aotw.layout-inline .players:not(.slick-slider) { flex-direction:row }
   
    .component-aotw.layout-inline .slick-list { margin-left:-20px }
    .component-aotw.layout-inline .slick-slider .player { margin-left:20px }
    .component-aotw.layout-inline .slider-buttons { display:block; margin-top:20px; display:flex; justify-content:center; }
}

@media only screen and (min-width:992px) {
   .component-aotw.layout-inline .layout-wrapper { flex-direction:row; align-items:center; justify-content:space-between }
   .component-aotw.layout-inline .page-details { flex-direction:column }
   .component-aotw.layout-inline .details-wrapper { width:30% }
   .component-aotw.layout-inline .players { width:62%; justify-content:flex-end }
   .component-aotw.layout-inline .component-title,
   .component-aotw.layout-inline .component-sub-title { display:none }
   .component-aotw.layout-inline .component-image { display:block }
}

/* ALIGN LAYOUT */
.component-aotw.layout-align .headshot img { min-width:100%; height:100%; }
.component-aotw.layout-align .slick-list .slick-track { align-items: self-start; }
.component-aotw.layout-align .page-details { flex-direction:column; text-align:center }
.component-aotw.layout-align .player { position:relative; display:flex !important; justify-content:space-between; overflow:hidden;  }
.component-aotw.layout-align .player .player-headshot { z-index:2; position:relative; display:flex; flex-direction:column; }
.component-aotw.layout-align .player .player-headshot .headshot-wrapper { padding:0; }
.component-aotw.layout-align .player .headshot {
    border-radius:0;
    position:relative;
    transform:skewX(-8deg);
    overflow:hidden;
    padding:0;
    border-left:0.5rem solid #fff;
    border-right:0.5rem solid #fff;
    box-shadow:0 0 2rem rgba(0, 0, 0, 0.25);
}
.component-aotw.layout-align .player .headshot .headshot-holder {
    overflow:hidden;
    border-radius:0;
    transform:skewX(8deg) scale(1.2);
    scale:1;
    width:100%;
    background-position: center 0;
    transform-origin: right top;
    background-size: cover;
    border:0;
}
@media only screen and (min-width:992px) {
    .component-aotw.layout-align .player .player-headshot { padding-right:6rem; }
}

.component-aotw.layout-align .player .headshot .headshot-holder img { max-width:300px; max-height:400px; }
.component-aotw.layout-align .player .headshot-cutout { position:absolute; left:-10%; bottom:0; width:80%; height:80%; z-index:1; background:none no-repeat top 50%; background-size:cover }

.component-aotw.layout-align .player .player-details { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; text-transform:uppercase; padding:1rem 0; }
.component-aotw.layout-align .player .player-details .player-bio { display:flex; align-items:center; flex-direction:column; gap:10px; text-align:center }
.component-aotw.layout-align .player .player-details .player-name { font-size:1.5rem; font-weight:700; line-height:1.2 }
.component-aotw.layout-align .player .player-details .team-logo,
.component-aotw.layout-align .player .player-details .player-bio .pos { display:none }

.component-aotw.layout-align .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-align .slick-slider .slick-dots { position:static; margin:1rem 0 }
.component-aotw.layout-align .slick-slider .btn { border-radius:0; transition:all .4s }
.component-aotw.layout-align .slick-slider .slick-next { right:-9999px }
.component-aotw.layout-align .slick-slider .slick-prev { left:-9999px }

@media only screen and (min-width:992px) {
    .component-aotw.layout-align .player .headshot {
        background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent);
    }
    .component-aotw.layout-align .player .headshot .headshot-holder img { max-width:400px; max-height:500px; }
   .component-aotw.layout-align .player .player-headshot .headshot-wrpaper { padding-right:3rem; }
   .component-aotw.layout-align .player .player-details { padding:3rem 0; }
   .component-aotw.layout-align .player .player-details .player-bio { flex-direction:row-reverse }
   .component-aotw.layout-align .player .player-details .player-name { font-size:1.5rem }
   .component-aotw.layout-align .slick-slider:hover .slick-next { right:0 }
   .component-aotw.layout-align .slick-slider:hover .slick-prev { left:0 }
   .component-aotw.layout-align .slick-dots { display:none }
}

@media only screen and (min-width:1200px) {

}

/* BIO LAYOUT*/
.component-aotw.layout-bio .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-bio .player {  display:flex !important; justify-content:center }
.component-aotw.layout-bio .player-headshot { position:relative; width:25%; min-width:100px; max-width:250px  }
.component-aotw.layout-bio .headshot { flex:1; position:relative; background:transparent !important }
.component-aotw.layout-bio .headshot .headshot-holder img.invisible { visibility: visible !important;}
.component-aotw.layout-bio .player-details { flex:1 1 50%; padding:0 1rem; padding-bottom:2.5rem; display:flex; align-items:center }
.component-aotw.layout-bio .player-details .player-bio { display:flex; flex-direction:column; gap:10px; font-size:1.2rem }
.component-aotw.layout-bio .player-details .player-name { font-size:1.5rem; order:2; font-weight:700; line-height:1.2; text-transform:uppercase }
.component-aotw.layout-bio .player-details .full-story-link { order:3 }
.component-aotw.layout-bio .player-details .full-story-link:hover { color: var(--bs-secondary) }
.component-aotw.layout-bio .player-details .player-bio .player-attrs { display: flex; flex-direction:row-reverse; order:1; background: var(--bs-primary); color: #fff; padding: 0 1rem; justify-content: flex-end; max-width:500px }
.component-aotw.layout-bio .player-details .player-bio .player-attrs .pos:before { content:"|"; margin:0 10px }
.component-aotw.layout-bio .player-details .player-bio .synopsis { order:3 }
.component-aotw.layout-bio .player-details .team-logo { display:none }

.component-aotw.layout-bio .slick-track { align-items:stretch }
.component-aotw.layout-bio .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-bio .slick-slider .btn { display:none !important; height:2rem; border:none; border-radius:0; transition:all .4s; transform:none  }
.component-aotw.layout-bio .slick-slider .slick-next,
.component-aotw.layout-bio .slick-slider .slick-prev { right:0; top:auto; bottom:0 }
.component-aotw.layout-bio .slick-slider .slick-prev { left:auto; right:80px }
.component-aotw.layout-bio .slick-pp { right:40px; bottom:0 !important }
.component-aotw.layout-bio .slick-slider .slick-dots {  position:static }


@media only screen and (min-width:992px) {
   .component-aotw.layout-bio .player-details { padding:1.5rem; padding-bottom:2rem }
   .component-aotw.layout-bio .player-details .player-name { font-size:2.5rem }
   .component-aotw.layout-bio .slick-slider .btn { display:block !important }
}

/* SLIDER LAYOUT */
.component-aotw.layout-slider .headshot { --bs-aspect-ratio:110% }
.component-aotw.layout-slider .layout-wrapper { display:flex; flex-direction:column; gap:1rem; justify-content:space-between }
.component-aotw.layout-slider .page-details { flex-direction:column-reverse }
.component-aotw.layout-slider .details-wrapper { text-align:center }
.component-aotw.layout-slider .players { display:flex; flex-direction:column; gap:20px }
.component-aotw.layout-slider .player { flex:1; max-width:270px }

.component-aotw.layout-slider .player-bio { padding:5px 10px }
.component-aotw.layout-slider .player-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff  }

.component-aotw.layout-slider .slick-slider { margin:0; overflow:hidden }
.component-aotw.layout-slider .slick-slider .slick-list { padding-bottom:3rem }
.component-aotw.layout-slider .slick-slider .slick-slide { margin:0 15px }
.component-aotw.layout-slider .slick-slider .player { max-width:none }
.component-aotw.layout-slider .slick-dots { display:none !important }
.component-aotw.layout-slider .btn.slick-disabled { opacity:0.2 }

.component-aotw.layout-slider .slick-slider .btn { position:absolute; top:auto !important; bottom:15px !important; z-index:3 !important; width:2rem; height:2rem; line-height:1; border:2px solid; background:var(--bs-primary); transform:none; transition:all .4s; border-radius:50%; --bs-btn-color:#fff; --bs-btn-hover-color:var(--bs-tertiary); --bs-btn-active-color:var(--bs-tertiary) }
.component-aotw.layout-slider .slick-slider .slick-prev { left:50% !important; transform:translateX(-75px) }
.component-aotw.layout-slider .slick-slider .slick-next { left:50% !important; right:auto !important; transform:translateX(50px) }
.component-aotw.layout-slider .slick-slider .slick-pp { left:50% !important; transform:translateX(-15px) }
.component-aotw.layout-slider .slick-slider .slick-pp .fa-play { margin-left:3px }
.component-aotw.layout-slider .slick-slider .slick-pp .fa-play:before { font-weight:400 }


@media only screen and (min-width:576px) {
    
    .component-aotw.layout-slider .players:not(.slick-slider) { flex-direction:row }
   
    .component-aotw.layout-slider .slick-list { margin-left:-20px }
    .component-aotw.layout-slider .slick-slider .player { margin-left:20px }
    
    .component-aotw.layout-slider .slick-slider .slick-prev { transform:translateX(-3.5rem) }
    .component-aotw.layout-slider .slick-slider .slick-next { transform:translateX(3.5rem) }
    .component-aotw.layout-slider .slick-slider .slick-pp { transform:translateX(0) }

}

@media only screen and (min-width:992px) {
    
   .component-aotw.layout-slider .layout-wrapper { align-items:center; justify-content:space-between }
   .component-aotw.layout-slider .players { width:100%; justify-content:center }
   .component-aotw.layout-slider .player-details { position:absolute; left:0; right:0; bottom:0; background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.8) 100%) }

}


/* DUAL LAYOUT */
.component-aotw.layout-dual .layout-wrapper { overflow:hidden;  text-align:center;  } 
.component-aotw.layout-dual .component-title {   position: relative;}
.component-aotw.layout-dual .players > .player + .player { margin-top:1rem }
.component-aotw.layout-dual .player { max-width:none; vertical-align:top }
.component-aotw.layout-dual .headshot { background-color:var(--bs-white) !important }
.component-aotw.layout-dual .headshot .headshot-holder { background-repeat:no-repeat; background-position:top center; background-size:cover } 
.component-aotw.layout-dual .player-details .player-name {  font-weight:700 } 
.component-aotw.layout-dual .player-details .player-sport {     font-size: 1rem;  }
.component-aotw.layout-dual .player-details a {   --bs-link-color: var(--bs-primary); --bs-link-hover-color: var(--bs-tertiary); }
.component-aotw.layout-dual .slick-slider { margin:0 0 1rem }
.component-aotw.layout-dual .slider-navigation { display:flex; gap:.5rem; justify-content:center; margin-top:1rem }
.component-aotw.layout-dual .slider-navigation .btn { position:static; transform:none; width:auto; height:auto; padding:0; font-size:1.25rem; line-height:normal; color:var(--bs-primary); border:none;; border-radius:0 }
.component-aotw.layout-dual .slider-navigation .btn:hover  {    filter: brightness(100%);   color: var(--bs-secondary); background: transparent;}
.component-aotw.layout-dual .slider-navigation .btn.slick-pp { display:block; width:2.5rem; height:auto !important; padding:0; flex:0 0 2.5rem }
.component-aotw.layout-dual .slider-navigation .btn.slick-prev .fa:before,
.component-aotw.layout-dual .slider-navigation .btn.slick-next .fa:before { font-weight:400 }
.component-aotw.layout-dual .page-details .component-headings p.component-sub-title {   display: none; } 
 .component-aotw.layout-dual .component-aotw .player-details { position: absolute; left: 0; background: transparent !important; color: #fff; padding: 1rem !important; bottom: 0; width: 100%;     display: flex;   flex-direction: column-reverse;     gap: 0.5rem;}
.component-aotw.layout-dual .headshot::after {  content: "";  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 0%) 35%, rgb(0 0 0 / 18%) 51%, rgb(0 0 0 / 85%) 82%, rgba(0, 0, 0, 1) 100%);        background: rgba(0, 0, 0, 0.3);}
.component-aotw.layout-dual .component-image {   display: none; }
.component-aotw.layout-dual .page-details {   padding-block: 1rem; }

.component-aotw.layout-dual .slick-dots li.slick-active button:before {   background: var(--bs-primary); }
.component-aotw.layout-dual .slick-dots li button:before { width: 10px; height: 10px; border-radius: 50%; line-height: 10px; border: 1px solid var(--bs-primary) !important; background: none; opacity: 1; }
.component-aotw.layout-dual .slick-dots li {    width: 1rem;    margin: 0 0.25rem;   height: 1rem; }
.component-aotw.layout-dual ul.slick-dots {    position: relative;   bottom: -1rem;}
.component-aotw.layout-dual .slider-navigation {   display: none;}
.component-aotw.layout-dual{   padding: 1rem !important; }
.component-aotw.layout-dual .component-image img {   max-height: 10rem; }

@media only screen and (min-width:568px) {
.component-aotw.layout-dual .players { display:flex !important; gap:1rem; justify-content:center }
.component-aotw.layout-dual .players:has(.slider) { margin-bottom:1rem }
.component-aotw.layout-dual .players > div { width:calc(50% - 1rem); max-width:calc(50% - .5rem) }
.component-aotw.layout-dual .players > .player + .player { margin-top:0 }
.component-aotw.layout-dual .slick-slider { margin:0 }
.component-aotw.layout-dual .slider-navigation { margin:0 } 
.component-aotw.layout-dual .slider-navigation .btn.slick-pp { padding:0 }
.component-aotw.layout-dual .slider-navigation {   display: flex;}
   

}
@media only screen and (min-width:768px) {
.component-aotw.layout-dual:before { display:none }
.component-aotw.layout-dual .layout-wrapper:has(.slider-navigation) { overflow:visible; }
.component-aotw.layout-dual .layout-wrapper:before { display:none }
.component-aotw.layout-dual .page-details {      flex-direction: column-reverse;}
.component-aotw.layout-dual .details-wrapper { position:absolute; overflow:hidden; left:50%; top:0; bottom:0; transform:translateX(-50%); height:100%; margin-bottom:0; display:flex; align-items:center ; justify-content: center;}
.component-aotw.layout-dual .players { justify-content:space-between }
.component-aotw.layout-dual .players:has(.slider) { margin-bottom:0 }
.component-aotw.layout-dual .players > div { width:calc(27% - .5rem); max-width:calc(27% - .5rem) }
.component-aotw.layout-dual .slider-navigation { position:absolute; left:0; bottom:0rem; width:100% }
 .component-aotw.layout-dual:before {    top: 10%;   height:80%; }
.component-aotw.layout-dual .page-details {   padding-block: 0; } 
    
}
@media only screen and (min-width:992px) { 
.component-aotw.layout-dual .slider-navigation .btn.slick-pp { padding:0 }
.component-aotw.layout-dual > .container {     position: relative; }
.component-aotw.layout-dual .player {   max-width: 100%;}
.component-aotw.layout-dual .headshot::after {  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 0%) 35%, rgb(0 0 0 / 18%) 51%, rgb(0 0 0 / 85%) 82%, rgba(0, 0, 0, 1) 100%);         background: rgba(0, 0, 0, 0.3);}
.component-aotw.layout-dual .component-image {   display: block; }
 .component-aotw.layout-dual .page-details .component-title:after { content: ""; position: absolute; bottom: -10px; width: 66%; height: 2px; background:var(--bs-primary); left: 0; right: 0; margin: 0 auto; }

    
}
@media only screen and (min-width:1200px) { 
    .component-aotw.layout-dual .component-image img {   max-height: 12rem; }
}