/******** HOME PAGE CAROUSEL *********/
/* Carousel structure for reference:

 - div#carousel_homepage
   - div.carousel-indicators (circles showing number of panels & which number is visible)
   - div.carousel-inner (wrapper of all panels)
     - div.carousel-item (individual panel wrapper w/ user-chosen background image)
       - div.carousel-template-bg (individual panel template style, ex: angle vs pixel etc)
         - div.carousel-caption (title of panel, paragraph text, and call to action button)
   - button.carousel-control-prev
   - button.carousel-control-next
 */
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

#carousel_homepage_wrapper {
  padding: 0;
  background-color: #000; }

#carousel_homepage_slide_wrapper {
  padding: 0;
  max-width: 1800px; }

#carousel_homepage .carousel-indicators [data-bs-target] {
  height: 12px;
  width: 12px;
  border-radius: 8px;
  border: 2px solid #fff;
  margin: 0 12px;
  background-color: transparent; }

#carousel_homepage .carousel-indicators .active {
  background-color: #fff; }

#carousel_homepage .carousel-item {
  background-color: #000;
  background-repeat: no-repeat; }
  #carousel_homepage .carousel-item.active {
    display: flex;
    justify-content: center; }
    #carousel_homepage .carousel-item.active .carousel-caption {
      -webkit-animation: 800ms ease 0s normal forwards 1 fadein;
      animation: 800ms ease 0s normal forwards 1 fadein; }
  #carousel_homepage .carousel-item .carousel-caption {
    position: relative;
    opacity: 0;
    padding: 0;
    bottom: auto;
    text-align: left; }
    #carousel_homepage .carousel-item .carousel-caption h2 {
      line-height: 1em;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 6px #000; }
    #carousel_homepage .carousel-item .carousel-caption p {
      text-shadow: 2px 2px 6px #000;
      margin-top: 20px; }
    #carousel_homepage .carousel-item .carousel-caption .btn-call-to-action {
      align-self: flex-start;
      background-color: #E87024;
      color: #fff;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 600;
      border-radius: 2px;
      padding: 12px 16px;
      box-shadow: 2px 2px 6px #000;
      margin-top: 2rem;
      margin-left: auto;
      margin-right: auto; }
      #carousel_homepage .carousel-item .carousel-caption .btn-call-to-action:hover {
        background-color: #e88424; }

#carousel_homepage .carousel-control-next,
#carousel_homepage .carousel-control-prev {
  width: 3%; }

#carousel_homepage .carousel-control-next-icon,
#carousel_homepage .carousel-control-prev-icon {
  min-width: 20px;
  width: 4rem;
  height: 8rem;
  background-color: #2b2b2b; }

#carousel_homepage .carousel-control-next-icon {
  border-radius: 4px 0 0 4px; }

#carousel_homepage .carousel-control-prev-icon {
  border-radius: 0 4px 4px 0; }

/** Screen size optimization - NOT template specific **/
#carousel_homepage .carousel-indicators {
  margin-bottom: 4rem; }

#carousel_homepage .carousel-item {
  min-height: 450px;
  padding-top: 400px;
  background-size: auto 400px;
  background-position: top left 50%; }
  #carousel_homepage .carousel-item .carousel-template-bg {
    height: 100%; }
  #carousel_homepage .carousel-item .carousel-caption {
    right: 0;
    left: 0;
    padding: 70px 20px 150px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 650px; }
    #carousel_homepage .carousel-item .carousel-caption h2 {
      font-size: 40px;
      text-align: center; }
    #carousel_homepage .carousel-item .carousel-caption p {
      text-align: left;
      width: 100%; }

@media (min-width: 500px) {
  #carousel_homepage .carousel-item .carousel-caption {
    padding: 70px 30px 150px 30px; }
    #carousel_homepage .carousel-item .carousel-caption h2 {
      font-size: 45px; } }

@media (min-width: 1000px) {
  #carousel_homepage .carousel-indicators {
    margin-bottom: 1rem; }
  #carousel_homepage .carousel-item {
    padding-top: 0;
    background-position: center center; }
    #carousel_homepage .carousel-item .carousel-template-bg {
      width: 50%;
      left: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: left; }
    #carousel_homepage .carousel-item .carousel-caption {
      right: 15%;
      left: 15%;
      padding: 0; }
      #carousel_homepage .carousel-item .carousel-caption h2 {
        font-size: 54px;
        text-align: left; }
      #carousel_homepage .carousel-item .carousel-caption .btn-call-to-action {
        margin-left: 0;
        margin-right: 0; }
    #carousel_homepage .carousel-item.align-right .carousel-template-bg {
      right: 0;
      left: auto; }
    #carousel_homepage .carousel-item.align-right .carousel-caption {
      right: 0;
      left: -75px; } }

@media (min-width: 1200px) {
  #carousel_homepage .carousel-item .carousel-caption {
    max-width: 750px; }
    #carousel_homepage .carousel-item .carousel-caption h2 {
      font-size: 60px; } }

/*---------------------------------------------------------------------------------*/
/** TEMPLATE SPECIFIC - class defined by user in Strapi **/
/* Angled panel template styles only */
@media (min-width: 1000px) {
  #carousel_homepage .carousel-item.panel_angle.align-left {
    background-position: calc(50% + 32rem) 50%;
    background-size: auto 450px; }
    #carousel_homepage .carousel-item.panel_angle.align-left .carousel-template-bg {
      background-color: #000; }
    #carousel_homepage .carousel-item.panel_angle.align-left .carousel-template-bg::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 450px solid transparent;
      border-bottom: 0 solid transparent;
      border-left: 360px solid #000;
      position: absolute;
      right: -360px;
      z-index: -1; }
    #carousel_homepage .carousel-item.panel_angle.align-left .carousel-template-bg::before {
      display: none; }
    #carousel_homepage .carousel-item.panel_angle.align-left .carousel-caption {
      margin-right: 8%; }
  #carousel_homepage .carousel-item.panel_angle.align-right {
    background-size: auto 450px;
    background-position: calc(50% - 32rem) 50%; }
    #carousel_homepage .carousel-item.panel_angle.align-right .carousel-template-bg {
      background-color: #000; }
    #carousel_homepage .carousel-item.panel_angle.align-right .carousel-template-bg::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 450px solid transparent;
      border-bottom: 0 solid transparent;
      border-left: none;
      border-right: 360px solid #000;
      margin-right: 0;
      margin-left: -360px; }
    #carousel_homepage .carousel-item.panel_angle.align-right .carousel-template-bg::after {
      display: none; }
    #carousel_homepage .carousel-item.panel_angle.align-right .carousel-caption {
      margin-left: 8%; } }

/* Pixel panel template styles only */
@media (min-width: 1000px) {
  #carousel_homepage .carousel-item.panel_pixel {
    background-size: auto 450px; }
    #carousel_homepage .carousel-item.panel_pixel .carousel-template-bg {
      background-color: #000; }
    #carousel_homepage .carousel-item.panel_pixel .carousel-template-bg::before {
      content: '';
      width: 510px;
      height: 450px;
      display: block;
      position: absolute;
      background-size: 450px;
      background-repeat: no-repeat;
      background-image: url(/pixel_overlay.png); }
  #carousel_homepage .carousel-item.panel_pixel.align-left {
    background-position: calc(50% + 40rem) 50%; }
    #carousel_homepage .carousel-item.panel_pixel.align-left .carousel-template-bg::before {
      right: 0;
      margin-right: -370px;
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: "FlipH"; }
    #carousel_homepage .carousel-item.panel_pixel.align-left .carousel-caption {
      margin-right: 12%; }
  #carousel_homepage .carousel-item.panel_pixel.align-right {
    background-position: calc(50% - 40rem) 50%; }
    #carousel_homepage .carousel-item.panel_pixel.align-right .carousel-template-bg::before {
      -moz-transform: scaleX(1);
      -o-transform: scaleX(1);
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      filter: none;
      -ms-filter: none;
      right: auto;
      margin-right: 0;
      margin-left: -370px; }
    #carousel_homepage .carousel-item.panel_pixel.align-right .carousel-caption {
      margin-left: 12%; } }

/* Line art panel template styles only */
#carousel_homepage .carousel-item.panel_line_art {
  background-image: url(/assets/talos_o_lineart-005b76d7affcf3296e9698703a6ac886d9745382f4406b8075b30509cb44a486.png);
  background-repeat: no-repeat;
  background-position: top -110px center;
  background-size: 800px auto; }

@media (min-width: 1000px) {
  #carousel_homepage .carousel-item.panel_line_art .carousel-template-bg {
    min-width: 550px; }
  #carousel_homepage .carousel-item.panel_line_art.align-left {
    background-image: url(/assets/talos_o_lineart-005b76d7affcf3296e9698703a6ac886d9745382f4406b8075b30509cb44a486.png);
    background-repeat: no-repeat;
    background-position: right -150px center;
    background-size: 660px; }
  #carousel_homepage .carousel-item.panel_line_art.align-right {
    background-image: url(/assets/talos_o_lineart-005b76d7affcf3296e9698703a6ac886d9745382f4406b8075b30509cb44a486.png);
    background-repeat: no-repeat;
    background-position: left -180px center;
    background-size: 660px; } }

@media (min-width: 1200px) {
  #carousel_homepage .carousel-item.panel_line_art.align-left {
    background-position: right -160px center;
    background-size: 800px; }
  #carousel_homepage .carousel-item.panel_line_art.align-right {
    background-position: left -160px center;
    background-size: 800px; }
    #carousel_homepage .carousel-item.panel_line_art.align-right .carousel-caption {
      margin-right: 12%; } }

@media (min-width: 1500px) {
  #carousel_homepage .carousel-item.panel_line_art.align-left {
    background-image: url(/assets/left_linework-b5219aba23273b7bdf6c316d69cb8f4bf3c03785859c99bf7bd210de2a328dc2.png), url(/assets/talos_o_lineart-005b76d7affcf3296e9698703a6ac886d9745382f4406b8075b30509cb44a486.png);
    background-repeat: no-repeat,no-repeat;
    background-position: left -115px top -105px, right -10% center;
    background-size: 450px, 800px; }
    #carousel_homepage .carousel-item.panel_line_art.align-left .carousel-template-bg {
      margin-left: calc(50% - 750px); }
  #carousel_homepage .carousel-item.panel_line_art.align-right {
    background-image: url(/assets/talos_o_lineart-005b76d7affcf3296e9698703a6ac886d9745382f4406b8075b30509cb44a486.png), url(/assets/right_linework-529d35b67454e4d4fc5e15085e96792b009f7afbb91bd877b2c724bc0f83b865.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left -160px center, right -100px bottom -60px;
    background-size: 800px, 450px; }
    #carousel_homepage .carousel-item.panel_line_art.align-right .carousel-template-bg {
      margin-right: calc(50% - 750px); } }

/* Full background image styles */
@media (min-width: 1000px) {
  #carousel_homepage .carousel-item.panel_fullbackground_centered {
    background-size: cover; }
    #carousel_homepage .carousel-item.panel_fullbackground_centered .carousel-template-bg {
      width: 100%;
      justify-content: center;
      left: auto; }
      #carousel_homepage .carousel-item.panel_fullbackground_centered .carousel-template-bg .carousel-caption {
        margin-top: -30px;
        right: 0;
        left: 0; }
        #carousel_homepage .carousel-item.panel_fullbackground_centered .carousel-template-bg .carousel-caption h2, #carousel_homepage .carousel-item.panel_fullbackground_centered .carousel-template-bg .carousel-caption p {
          text-align: center; }
        #carousel_homepage .carousel-item.panel_fullbackground_centered .carousel-template-bg .carousel-caption .btn-call-to-action {
          margin-left: auto;
          margin-right: auto; } }

/* Left vs Right aligned full page bg */
#carousel_homepage .carousel-item.panel_full_background {
  background-size: auto 400px; }
  #carousel_homepage .carousel-item.panel_full_background.align-left {
    background-position: top center; }
  #carousel_homepage .carousel-item.panel_full_background.align-right {
    background-position: top center; }

@media (min-width: 1000px) {
  #carousel_homepage .carousel-item.panel_full_background.align-left {
    background-position-x: calc(50% + 400px); }
    #carousel_homepage .carousel-item.panel_full_background.align-left .carousel-caption {
      margin-right: 25%; }
  #carousel_homepage .carousel-item.panel_full_background.align-right {
    background-position-x: calc(50% - 400px); }
    #carousel_homepage .carousel-item.panel_full_background.align-right .carousel-caption {
      margin-left: 25%; } }