/* Fixes for SFCC default styles */

#mainRevCarousel .b-text_box	{
	justify-self:auto !important;
}
.sun-hgn-bev-cat {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.sun-hgn-bev-cat div[data-category="vodka-seltzer"] {
    background-color: #009DDA;
    color: white;
}
.sun-hgn-bev-cat div[data-category="vodka-iced-tea"] {
    background-color: #A28C5A;
    color: white;
}
.sun-hgn-bev-cat div[data-category="tequila-seltzer"] {
    background-color: #33B68F;
    color: white;
}
.sun-hgn-bev-cat div {
    flex: 1;
    text-align: center;
    padding: 23px;
    cursor: pointer;
}







/* sun styles */

.sun-container	{
  height: 1110px;
  overflow: hidden;
  clip-path: inset(0 0 400px 0);
  margin-bottom: -401px;
}
.sun-carousel-content {
    color: #fff;
    position: absolute;
  	bottom:440px;
    left: calc(50% - 165px);
    text-align: center;
    width: 330px;
    text-transform:uppercase;
}
.sun-carousel-images {
    position: absolute;
    bottom: 0%;
    left: 50%;
    --rotate: 0deg;
    transform: translate(-50%, 50%) rotate(var(--rotate));
    width: 2500px;
    height: 2500px;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out;
    pointer-events: none;
}
.sun-carousel-images:before	{
    background-color:#FCB53A;
    width:50%;
    height:50%;
    position:absolute;
    display:block;
    content:'';
    border-radius: 50%;
    transform: translate(50%, 50%) rotate(var(--rotate));
}
.sun-carousel-images .sun-carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
    rotate: calc(var(--rotateAdd) * var(--i));
}
.sun-carousel-images .sun-carousel-item.fade-out {
    opacity: 0;
}
.sun-carousel-header {
    position: absolute;
    width: 100%;
    z-index: 100;
}
.sun-carousel-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sun-carousel-images .sun-carousel-item img {
    height: 500px;
    top:120px;
    position:relative;
    pointer-events: auto;
    cursor:pointer;
}
.sun-carousel-content h3 {
    color:white;
    font-size:36px;
    font-family: neuzeit-grotesk, sans-serif;
    text-wrap: pretty;
}
.sun-carousel-content .sun-carousel-item {
    display: none;
}
.sun-carousel-content .sun-carousel-item.active {
    display: block;
}
@keyframes sun-carousel-showContent {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
    }
}
.sun-carousel-content .sun-carousel-item.active h3 {
    opacity: 0;
    animation: sun-carousel-showContent 0.3s ease-in-out 1 forwards;
}
.sun-carousel-item.active .sun-carousel-button {
    opacity: 0;
    animation: sun-carousel-showContent 0.3s 0.2s ease-in-out 1 forwards;
}
#sun-carousel-prev,
#sun-carousel-next {
    position: absolute;
    border: none;
    bottom:470px;
    left: calc(50% - 270px);
    font-size: 12px;
    background-color: transparent;
    color: #009DDA;
}
#sun-carousel-next {
    left: unset;
    right: calc(50% - 270px);
}
#sun-carousel-next:hover,
#sun-carousel-prev:hover {
    opacity: 1;
}
.next-module	{
	width:100%;
  height:500px;
  background:gray;
  position:relative;
}
.sun-chevron::after {
  content: "";
  margin-left: 10px;
  display: inline-block;
  border-left: 4px solid #009DDA;
  border-bottom: 4px solid #009DDA;
  width: 40px;
  height: 40px;
}
#sun-carousel-prev	{
	transform: rotate(45deg); /* Point in the direction you want */
}
#sun-carousel-next	{
	transform: rotate(225deg); /* Point in the direction you want */
  bottom:466px;
}
.sun-hgn-bev-cat .sun-category-button	{
	font-size:30px;
  font-weight:bold;
  line-height: 100%;
}
.sun-show-mobile	{
	display:none;
}







/* CSS for typography to match existing site */

.sun-hgn-bev-cat .sun-category-button {
    letter-spacing:.5px;
    font-family: neuzeit-grotesk, sans-serif;
	font-weight:900;
}

.sun-carousel-button {
    margin-top: 20px;
    padding: 10px 30px;
    background-color: #009DDA;
    color: #fff;
    border: none;
    display:inline-block;
    text-decoration:none;
	transition: background-color 2s, color 2s;
	font: 700 18px/32px FaktConTTBold,sans-serif;
}

.sun-carousel-button:hover	{
	background-color: #ffffff;
	color:#FCB53A;
	text-decoration:none;
}






@media (max-width: 1200px) {
  .sun-container {
    height: 960px;
    clip-path: inset(0 0 350px 0);
    margin-bottom: -351px;
  }
  .sun-carousel-images {
    width: 2200px;
    height: 2200px;
  }
  .sun-carousel-images .sun-carousel-item img {
    height: 430px;
  }
  .sun-carousel-content {
    bottom: 380px;
    width:300px;
    left: calc(50% - 150px);
  }
  #sun-carousel-prev {
    bottom: 410px;
    left: calc(50% - 230px);  
  }
  #sun-carousel-next {
    bottom: 406px;
    right: calc(50% - 230px);
  }
  .sun-carousel-content h3 {
    font-size: 32px;
	}
  .sun-category-button	{
  	font-size:32px;
  }
  .sun-hgn-bev-cat .sun-category-button	{
    font-size:28px;
  }
  .sun-show-mobile	{
  	display:inline-block;
  }
}




@media (max-width: 1000px) {
    .sun-container {
        height: 850px;
        clip-path: inset(0 0 240px 0);
  	margin-bottom: -242px;
    }
    .sun-carousel-images {
        width: 1700px;
        height: 1700px;
    }
    .sun-carousel-images .sun-carousel-item img {
   		 top: -10px;
		}
    .sun-carousel-content {
        bottom: 270px;
        left: calc(50% - 130px);
        width: 260px;    
    }
    #sun-carousel-prev {
        bottom: 295px;
        left: calc(50% - 200px);
    }
    #sun-carousel-next {
        bottom: 291px;
        right: calc(50% - 200px);
    }
    .sun-carousel-content h3 {
    		font-size: 28px;
		}
	.sun-carousel-button	{
		margin-top:10px;
	}
}



@media (max-width: 768px) {
    .sun-container {
        margin-bottom: -266px;
    }
}





@media (max-width: 600px) {
    .sun-container {
        height: 678px;
        clip-path: inset(0 0 170px 0);
        margin-bottom: -197px;
    }
    .sun-carousel-images .sun-carousel-item img {
        height: 340px;
    }
		.sun-carousel-images .sun-carousel-item img {
        top: 10px;
    }
		.sun-carousel-images {
        width: 1400px;
        height: 1400px;
    }
    .sun-carousel-content {
        bottom: 200px;
        left: calc(50% - 120px);
        width: 240px;
    }
    #sun-carousel-next {
        bottom: 231px;
        right: calc(50% - 170px);
    }
    #sun-carousel-prev {
        bottom: 235px;
        left: calc(50% - 170px);
    }
    .sun-chevron::after {
    		width: 30px;
    		height: 30px;
		}
    .sun-hgn-bev-cat .sun-category-button	{
      font-size:18px;
    }
}




@media (max-width: 480px) {
    .sun-container {
        height: 576px;
        clip-path: inset(0 0 60px 0);
        margin-bottom: -87px;
    }
    .sun-carousel-images {
        width: 1000px;
        height: 1000px;
    }
    .sun-carousel-images .sun-carousel-item img {
        top: -90px;
    }
    .sun-carousel-content {
        bottom: 90px;    }
     #sun-carousel-next {
        bottom: 125px;
	right: calc(50% - 160px);
    }
    #sun-carousel-prev {
        bottom: 121px;
	left: calc(50% - 160px);
    }
}