:root {
    --sunset: #6C0146;
    --sunset-purple: #997ADD;
    --sunset-pink: #EC91B9;
    --sunset-orange: #FFB72B;
    --sunset-red: #E13A06;
}


#bodysunset .bg-sunset-red {background-color: var(--sunset-red)!important;}

#bodysunset #header {position: relative; background: linear-gradient(var(--sunset-purple),var(--sunset-pink) 70%,var(--sunset-orange) 90%,var(--sunset-orange));}
#bodysunset #header:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent url('/assets/images/bg-sunset.png') no-repeat center bottom / 100% auto;}

#bodysunset #header .brand-inner {max-width: 585px;}
#bodysunset .page-headline {max-width: 100%;}

#bodysunset .bg-elements .bg-wave {background: var(--sunset-orange) url('/assets/images/bg-sunset-wave.png') no-repeat center top / 100% 100%;}

#bodysunset .bg-elements .cloud-1 {background: transparent url('/assets/svg/cloud-sunset-2.svg') no-repeat left center / 100% 100%;}
#bodysunset .bg-elements .cloud-2 {background: transparent url('/assets/svg/cloud-sunset-3.svg') no-repeat left center / 100% 100%;}
#bodysunset .bg-elements .cloud-3 {background: transparent url('/assets/svg/cloud-sunset-1.svg') no-repeat right center / 100% 100%;}
#bodysunset .bg-elements .fish-1 {top: 130px; right: 18%; background: transparent url('/assets/images/fish-5.png') no-repeat center top / contain;}    
#bodysunset .bg-elements .fish-2 {right: 50px;}
#bodysunset .bg-elements .fish-3 {top: 500px; background-image: url('/assets/images/fish-7.png');}
#bodysunset .bg-elements .fish-4 {top: 50px;}
#bodysunset .bg-elements .fish-5 {top: 300px; left: -100px; width: 75px; max-width: 100%; height: 0; padding-top: 10%; background: transparent url('/assets/images/fish-8.png') no-repeat center top / contain;}
#bodysunset .bg-elements .diver-1 {background-image: url('/assets/images/diver-top-2.png');}
#bodysunset .bg-elements .diver-2 {top: 255px; right: -200px; background-image: url('/assets/images/sealion-2.png');}
#bodysunset .bg-elements .trash-1  {top: 475px; left: -250px; width: 500px; max-width: 100%; padding-top: 20%; background-image: url('/assets/images/fish-group.png');}
#bodysunset .bg-elements .trash-2 {top: 550px; left: 155px; width: 95px; background-image: url('/assets/images/fish-6.png');}
#bodysunset .bg-elements .trash-3 {display: none;}
#bodysunset .bg-elements .squid-1 {top: 250px; right: -200px; width: 200px; max-width: 100%; height: 0; padding-top: 20%; background: transparent url('/assets/images/squid-1.png') no-repeat center top / contain;}
#bodysunset .bg-elements .turtle-2 {top: 1000px; right: -100px; width: 200px; max-width: 100%; height: 0; padding-top: 10%; background: transparent url('/assets/images/turtle-1.png') no-repeat center top / contain;}


#bodysunset #main {background: linear-gradient(#00AACD, #00AACD 30%, #014E90 50%, #023965 70%, #022C4C);}

#bodysunset #sectionTop {padding-top: 5rem;}

#bodysunset .live-counter, #bodysunset .live-counter-subtitle {color: var(--sunset)!important;}


/*RESPONSIVE DESIGNS*/
@media (max-width: 1368px){    
}

@media (max-width: 1199px){
    #bodysunset .bg-elements .fish-5 {left: -50px}

    #bodysunset .bg-elements .squid-1 {right: -50px;}

}

@media (max-width: 991px){
}

@media (max-width: 767px){   
    #bodysunset #section2 .section-inner {padding-top: 7rem;}
    
    #bodysunset .bg-elements .bg-wave {background-size: 180% 100%;}   

    #bodysunset .bg-elements .fish-1 {top: 60px; right: 15%; width: 30px; max-width: 100%; height: 0; padding-top: 10%;}    
    #bodysunset .bg-elements .fish-3 {top: 40px;}    
    #bodysunset .bg-elements .diver-2 {top: 475px; right: -80px; width: 250px; max-width: 100%; height: 0; padding-top: 60%;}

    #bodysunset .bg-elements .fish-5 {top: 500px; left: 45%; width: 10%;}
    #bodysunset .bg-elements .squid-1 {top: 450px; right: -50px;}
    #bodysunset .bg-elements .turtle-2 {top: 450px; right: auto; left: -50px;}

    #bodysunset .timeline-wrapper {margin-top: 100px;}
}


@media (max-width: 648px){
}


@media (max-width: 575px){    
    #bodysunset .large-ribbon {right: 0;}

    #bodysunset #section2 .section-inner {padding-top: 3rem;}

    #bodysunset .bg-elements .fish-5 {top: 600px; left: 45%; width: 10%;}
    #bodysunset .bg-elements .squid-1 {top: 550px; right: -50px;}
    #bodysunset .bg-elements .turtle-2 {top: 550px; right: auto; left: -50px;}
}

@media (max-width: 376px){
}

/*DARK DESIGNS*/

@media (prefers-color-scheme: dark) {
    #bodysunset .live-counter, #bodysunset .live-counter-subtitle {color: var(--sunset);}
}