/*
.main-content {
    padding: 0;
    background-color: #292e39;
    background-image: url(//cdn.shopify.com/s/files/1/0355/9135/6553/t/11/assets/bg-img.png?v=3288902828710032121);
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 70px;
    background-attachment: fixed;
} */
.product-single{
	  background-color: transparent !important; 
} 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


 
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------POWERALL---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerspowerall {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselpowerall, #navigationpowerall {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carouselpowerall{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperpowerall {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonpowerall_a:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonpowerall_b:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonpowerall_c:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonpowerall_d:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

#buttonpowerall_e:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}

#buttonpowerall_f:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}

#buttonpowerall_g:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}

#buttonpowerall_h:checked ~ #carouselpowerall .p-wrapperpowerall{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}
[class^="panelpowerall_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationpowerall {
    margin-left: 24px;
}

[class^="labelpowerall_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelpowerall_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonpowerall_a:checked ~ #navigationpowerall .labelpowerall_a,
#buttonpowerall_b:checked ~ #navigationpowerall .labelpowerall_b,
#buttonpowerall_c:checked ~ #navigationpowerall .labelpowerall_c,
#buttonpowerall_d:checked ~ #navigationpowerall .labelpowerall_d,
#buttonpowerall_e:checked ~ #navigationpowerall .labelpowerall_e,
#buttonpowerall_f:checked ~ #navigationpowerall .labelpowerall_f,
#buttonpowerall_g:checked ~ #navigationpowerall .labelpowerall_g,
#buttonpowerall_h:checked ~ #navigationpowerall .labelpowerall_h {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------MAGICDATA------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersmagicdata {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselmagicdata, #navigationmagicdata {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselmagicdata{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappermagicdata {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonmagicdata_a:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonmagicdata_b:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonmagicdata_c:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonmagicdata_d:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

#buttonmagicdata_e:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}

#buttonmagicdata_f:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}

#buttonmagicdata_g:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}

#buttonmagicdata_h:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}

#buttonmagicdata_i:checked ~ #carouselmagicdata .p-wrappermagicdata{
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%); 
}
[class^="panelmagicdata_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationmagicdata {
    margin-left: 24px;
}

[class^="labelmagicdata_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelmagicdata_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonmagicdata_a:checked ~ #navigationmagicdata .labelmagicdata_a,
#buttonmagicdata_b:checked ~ #navigationmagicdata .labelmagicdata_b,
#buttonmagicdata_c:checked ~ #navigationmagicdata .labelmagicdata_c,
#buttonmagicdata_d:checked ~ #navigationmagicdata .labelmagicdata_d,
#buttonmagicdata_e:checked ~ #navigationmagicdata .labelmagicdata_e,
#buttonmagicdata_f:checked ~ #navigationmagicdata .labelmagicdata_f,
#buttonmagicdata_g:checked ~ #navigationmagicdata .labelmagicdata_g,
#buttonmagicdata_h:checked ~ #navigationmagicdata .labelmagicdata_h,
#buttonmagicdata_i:checked ~ #navigationmagicdata .labelmagicdata_i {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------PROMOLOAD -------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerspromoload {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselpromoload, #navigationpromoload {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselpromoload{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperpromoload {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonpromoload_a:checked ~ #carouselpromoload .p-wrapperpromoload{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonpromoload_b:checked ~ #carouselpromoload .p-wrapperpromoload{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonpromoload_c:checked ~ #carouselpromoload .p-wrapperpromoload{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonpromoload_d:checked ~ #carouselpromoload .p-wrapperpromoload{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

[class^="panelpromoload_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationpromoload {
    margin-left: 24px;
}

[class^="labelpromoload_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelpromoload_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonpromoload_a:checked ~ #navigationpromoload .labelpromoload_a,
#buttonpromoload_b:checked ~ #navigationpromoload .labelpromoload_b,
#buttonpromoload_c:checked ~ #navigationpromoload .labelpromoload_c,
#buttonpromoload_d:checked ~ #navigationpromoload .labelpromoload_d {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------TRIPPLEDATA------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerstrippledata {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouseltrippledata, #navigationtrippledata {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouseltrippledata{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappertrippledata {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttontrippledata_a:checked ~ #carouseltrippledata .p-wrappertrippledata{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttontrippledata_b:checked ~ #carouseltrippledata .p-wrappertrippledata{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

[class^="paneltrippledata_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationtrippledata {
    margin-left: 24px;
}

[class^="labeltrippledata_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labeltrippledata_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttontrippledata_a:checked ~ #navigationtrippledata .labeltrippledata_a,
#buttontrippledata_b:checked ~ #navigationtrippledata .labeltrippledata_b {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------------------GIGA----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersgiga {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselgiga, #navigationgiga {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselgiga{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappergiga {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttongiga_a:checked ~ #carouselgiga .p-wrappergiga{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttongiga_b:checked ~ #carouselgiga .p-wrappergiga{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttongiga_c:checked ~ #carouselgiga .p-wrappergiga{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttongiga_d:checked ~ #carouselgiga .p-wrappergiga{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

#buttongiga_e:checked ~ #carouselgiga .p-wrappergiga{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
 
[class^="panelgiga_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationgiga {
    margin-left: 24px;
}

[class^="labelgiga_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelgiga_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttongiga_a:checked ~ #navigationgiga .labelgiga_a,
#buttongiga_b:checked ~ #navigationgiga .labelgiga_b,
#buttongiga_c:checked ~ #navigationgiga .labelgiga_c,
#buttongiga_d:checked ~ #navigationgiga .labelgiga_d,
#buttongiga_e:checked ~ #navigationgiga .labelgiga_e {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------DOUBLE GIGA----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersdoublegiga {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouseldoublegiga, #navigationdoublegiga {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouseldoublegiga{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperdoublegiga {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttondoublegiga_a:checked ~ #carouseldoublegiga .p-wrapperdoublegiga{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttondoublegiga_b:checked ~ #carouseldoublegiga .p-wrapperdoublegiga{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}
 
[class^="paneldoublegiga_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationdoublegiga {
    margin-left: 24px;
}

[class^="labeldoublegiga_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labeldoublegiga_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttondoublegiga_a:checked ~ #navigationdoublegiga .labeldoublegiga_a,
#buttondoublegiga_b:checked ~ #navigationdoublegiga .labeldoublegiga_b {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ALLACCESS----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersallaccess {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselallaccess, #navigationallaccess {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselallaccess{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperallaccess {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonallaccess_a:checked ~ #carouselallaccess .p-wrapperallaccess{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonallaccess_b:checked ~ #carouselallaccess .p-wrapperallaccess{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonallaccess_c:checked ~ #carouselallaccess .p-wrapperallaccess{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonallaccess_d:checked ~ #carouselallaccess .p-wrapperallaccess{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

[class^="panelallaccess_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationallaccess {
    margin-left: 24px;
}

[class^="labelallaccess_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelallaccess_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonallaccess_a:checked ~ #navigationallaccess .labelallaccess_a,
#buttonallaccess_b:checked ~ #navigationallaccess .labelallaccess_b,
#buttonallaccess_c:checked ~ #navigationallaccess .labelallaccess_c,
#buttonallaccess_d:checked ~ #navigationallaccess .labelallaccess_d {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------ALLNET-------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersallnet {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselallnet, #navigationallnet {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;      
} 
#carouselallnet{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperallnet {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
  
#buttonallnet_a:checked ~ #carouselallnet .p-wrapperallnet{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonallnet_b:checked ~ #carouselallnet .p-wrapperallnet{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

[class^="panelallnet_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationallnet {
    margin-left: 24px;    
}

[class^="labelallnet_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelallnet_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonallnet_a:checked ~ #navigationallnet .labelallnet_a,
#buttonallnet_b:checked ~ #navigationallnet .labelallnet_b {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */

img.carousel_image{
	height:245px;
	width:33.33%;
	float: left;
	padding: 5px;
}
 
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */


#gradient{ 
  background: #ccc;
  position: relative;
  margin-top: 10px; 
}
#gradient:before { 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;  
}

/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
.cart_images{
	width:100px;
	height:100px;
}


/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------GLOBE PROMOS---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containers_globepromos {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carousel_globepromos, #navigation_globepromos {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carousel_globepromos{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapper_globepromos {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#navigation_globepromos {
    margin-left: 24px;
}
[class^="panel_globepromos"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 

/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------GLOBE SURF---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containers_globesurf {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carousel_globesurf, #navigation_globesurf {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carousel_globesurf{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapper_globesurf {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#navigation_globesurf {
    margin-left: 24px;
}
[class^="panel_globesurf"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 

            
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------TM Promos---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containers_tmpromos {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carousel_tmpromos, #navigation_tmpromos {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carousel_tmpromos{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapper_tmpromos {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#navigation_tmpromos {
    margin-left: 24px;
}
[class^="panel_tmpromos"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 


/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------Regular---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
 /*
    .outer-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    #containers_regular {
      display: flex;
      align-items: center;
      gap: 20px;
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }

    #sizeSelect {
      width: 200px;
    }

    #previewImage {
      max-width: 300px;
      display: none;
      border: 1px solid #ccc;
      padding: 5px;
    }
   */         
   #containers_regular {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carousel_regular, #navigation_regular {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carousel_regular{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapper_regular {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#navigation_regular {
    margin-left: 24px;
}
[class^="panel_regular"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------smunlidata----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerssmunlidata {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselsmunlidata, #navigationsmunlidata {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselsmunlidata{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappersmunlidata {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonsmunlidata_a:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonsmunlidata_b:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonsmunlidata_c:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonsmunlidata_d:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
#buttonsmunlidata_e:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
#buttonsmunlidata_f:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}
#buttonsmunlidata_g:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}
#buttonsmunlidata_h:checked ~ #carouselsmunlidata .p-wrappersmunlidata{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}

[class^="panelsmunlidata_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationsmunlidata {
    margin-left: 24px;
}

[class^="labelsmunlidata_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelsmunlidata_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonsmunlidata_a:checked ~ #navigationsmunlidata .labelsmunlidata_a,
#buttonsmunlidata_b:checked ~ #navigationsmunlidata .labelsmunlidata_b,
#buttonsmunlidata_c:checked ~ #navigationsmunlidata .labelsmunlidata_c,
#buttonsmunlidata_d:checked ~ #navigationsmunlidata .labelsmunlidata_d,
#buttonsmunlidata_e:checked ~ #navigationsmunlidata .labelsmunlidata_e,
#buttonsmunlidata_f:checked ~ #navigationsmunlidata .labelsmunlidata_f,
#buttonsmunlidata_g:checked ~ #navigationsmunlidata .labelsmunlidata_g,
#buttonsmunlidata_h:checked ~ #navigationsmunlidata .labelsmunlidata_h {
     cursor: default;
     color: #fff;
     background-color: #222;
}   
   
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------sm_alldata----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */   
#containerssmalldata {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselsmalldata, #navigationsmalldata {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselsmalldata{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappersmalldata {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonsmalldata_a:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonsmalldata_b:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonsmalldata_c:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonsmalldata_d:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
#buttonsmalldata_e:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
#buttonsmalldata_f:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}
#buttonsmalldata_g:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}
#buttonsmalldata_h:checked ~ #carouselsmalldata .p-wrappersmalldata{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}

[class^="panelsmalldata_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationsmalldata {
    margin-left: 24px;
}

[class^="labelsmalldata_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelsmalldata_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonsmalldata_a:checked ~ #navigationsmalldata .labelsmalldata_a,
#buttonsmalldata_b:checked ~ #navigationsmalldata .labelsmalldata_b,
#buttonsmalldata_c:checked ~ #navigationsmalldata .labelsmalldata_c,
#buttonsmalldata_d:checked ~ #navigationsmalldata .labelsmalldata_d,
#buttonsmalldata_e:checked ~ #navigationsmalldata .labelsmalldata_e,
#buttonsmalldata_f:checked ~ #navigationsmalldata .labelsmalldata_f,
#buttonsmalldata_g:checked ~ #navigationsmalldata .labelsmalldata_g,
#buttonsmalldata_h:checked ~ #navigationsmalldata .labelsmalldata_h {
     cursor: default;
     color: #fff;
     background-color: #222;
}   
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------other promos----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */       
 #containerssmotherpromos {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselsmotherpromos, #navigationsmotherpromos {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouselsmotherpromos{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappersmotherpromos {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonsmotherpromos_a:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonsmotherpromos_b:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttonsmotherpromos_c:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttonsmotherpromos_d:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
#buttonsmotherpromos_e:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
#buttonsmotherpromos_f:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}
#buttonsmotherpromos_g:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}
#buttonsmotherpromos_h:checked ~ #carouselsmotherpromos .p-wrappersmotherpromos{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}

[class^="panelsmotherpromos_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationsmotherpromos {
    margin-left: 24px;
}

[class^="labelsmotherpromos_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelsmotherpromos_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonsmotherpromos_a:checked ~ #navigationsmotherpromos .labelsmotherpromos_a,
#buttonsmotherpromos_b:checked ~ #navigationsmotherpromos .labelsmotherpromos_b,
#buttonsmotherpromos_c:checked ~ #navigationsmotherpromos .labelsmotherpromos_c,
#buttonsmotherpromos_d:checked ~ #navigationsmotherpromos .labelsmotherpromos_d,
#buttonsmotherpromos_e:checked ~ #navigationsmotherpromos .labelsmotherpromos_e,
#buttonsmotherpromos_f:checked ~ #navigationsmotherpromos .labelsmotherpromos_f,
#buttonsmotherpromos_g:checked ~ #navigationsmotherpromos .labelsmotherpromos_g,
#buttonsmotherpromos_h:checked ~ #navigationsmotherpromos .labelsmotherpromos_h {
     cursor: default;
     color: #fff;
     background-color: #222;
}     
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------tnt promos----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerstntpromos {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouseltntpromos, #navigationtntpromos {
    flex: initial;
    display: block;
    margin-top:-350px;
     background-color: transparent !important;
} 
#carouseltntpromos{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappertntpromos {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttontntpromos_a:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttontntpromos_b:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttontntpromos_c:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttontntpromos_d:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
#buttontntpromos_e:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
#buttontntpromos_f:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}
#buttontntpromos_g:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}
#buttontntpromos_h:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}

#buttontntpromos_i:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%); 
}
#buttontntpromos_j:checked ~ #carouseltntpromos .p-wrappertntpromos{
    -webkit-transform: translateY(-900%);
    transform: translateY(-900%); 
}
[class^="paneltntpromos_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationtntpromos {
    margin-left: 24px;
}

[class^="labeltntpromos_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labeltntpromos_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttontntpromos_a:checked ~ #navigationtntpromos .labeltntpromos_a,
#buttontntpromos_b:checked ~ #navigationtntpromos .labeltntpromos_b,
#buttontntpromos_c:checked ~ #navigationtntpromos .labeltntpromos_c,
#buttontntpromos_d:checked ~ #navigationtntpromos .labeltntpromos_d,
#buttontntpromos_e:checked ~ #navigationtntpromos .labeltntpromos_e,
#buttontntpromos_f:checked ~ #navigationtntpromos .labeltntpromos_f,
#buttontntpromos_g:checked ~ #navigationtntpromos .labeltntpromos_g,
#buttontntpromos_h:checked ~ #navigationtntpromos .labeltntpromos_h,
#buttontntpromos_i:checked ~ #navigationtntpromos .labeltntpromos_i,
#buttontntpromos_j:checked ~ #navigationtntpromos .labeltntpromos_j  {
     cursor: default;
     color: #fff;
     background-color: #222;
}     
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------cignal---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerscignal {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselcignal, #navigationcignal {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carouselcignal{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappercignal {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttoncignal_a:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttoncignal_b:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#buttoncignal_c:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#buttoncignal_d:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

#buttoncignal_e:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}

#buttoncignal_f:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}

#buttoncignal_g:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}

#buttoncignal_h:checked ~ #carouselcignal .p-wrappercignal{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}
[class^="panelcignal_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationcignal {
    margin-left: 24px;
}

[class^="labelcignal_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelcignal_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttoncignal_a:checked ~ #navigationcignal .labelcignal_a,
#buttoncignal_b:checked ~ #navigationcignal .labelcignal_b,
#buttoncignal_c:checked ~ #navigationcignal .labelcignal_c,
#buttoncignal_d:checked ~ #navigationcignal .labelcignal_d,
#buttoncignal_e:checked ~ #navigationcignal .labelcignal_e,
#buttoncignal_f:checked ~ #navigationcignal .labelcignal_f,
#buttoncignal_g:checked ~ #navigationcignal .labelcignal_g,
#buttoncignal_h:checked ~ #navigationcignal .labelcignal_h {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------pilipinaslive---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerspilipinaslive {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselpilipinaslive, #navigationpilipinaslive {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carouselpilipinaslive{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperpilipinaslive {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonpilipinaslive_a:checked ~ #carouselpilipinaslive .p-wrapperpilipinaslive{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonpilipinaslive_b:checked ~ #carouselpilipinaslive .p-wrapperpilipinaslive{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

[class^="panelpilipinaslive_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationpilipinaslive {
    margin-left: 24px;
}

[class^="labelpilipinaslive_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelpilipinaslive_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonpilipinaslive_a:checked ~ #navigationpilipinaslive .labelpilipinaslive_a,
#buttonpilipinaslive_b:checked ~ #navigationpilipinaslive .labelpilipinaslive_b  {
     cursor: default;
     color: #fff;
     background-color: #222;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------satlite---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containerssatlite {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselsatlite, #navigationsatlite {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carouselsatlite{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrappersatlite {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonsatlite_a:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#buttonsatlite_b:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}
            
#buttonsatlite_c:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}
            
#buttonsatlite_d:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
            
#buttonsatlite_e:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%); 
}
            
#buttonsatlite_f:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-500%);
    transform: translateY(-500%); 
}
            
#buttonsatlite_g:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-600%);
    transform: translateY(-600%); 
}
            
#buttonsatlite_h:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-700%);
    transform: translateY(-700%); 
}
            
#buttonsatlite_i:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%); 
}
            
#buttonsatlite_j:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-900%);
    transform: translateY(-900%); 
}
            
#buttonsatlite_k:checked ~ #carouselsatlite .p-wrappersatlite{
    -webkit-transform: translateY(-1000%);
    transform: translateY(-1000%); 
}

[class^="panelsatlite_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationsatlite {
    margin-left: 24px;
}

[class^="labelsatlite_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelsatlite_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonsatlite_a:checked ~ #navigationsatlite .labelsatlite_a,
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_b,
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_c, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_d,
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_e,
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_f, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_g, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_h, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_i, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_j, 
#buttonsatlite_b:checked ~ #navigationsatlite .labelsatlite_k   {
     cursor: default;
     color: #fff;
     background-color: #222;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------ppv---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
#containersppv {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}          
#carouselppv, #navigationppv {
    flex: initial;
    display: block;
    margin-top:-350px;
    background-color: transparent !important;
} 
#carouselppv{ 
    overflow: hidden;
    width: 800px;
    height: 800px;
    border-radius: 4px;
    background-color: #fff;
    margin-top:50px;
}
.p-wrapperppv {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}
            
#buttonppv_a:checked ~ #carouselppv .p-wrapperppv{
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
             
[class^="panelppv_"]{
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
    border-right: 5px solid gray;
} 
            
#navigationppv {
    margin-left: 24px;
}

[class^="labelppv_"]{
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 300px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.3s ease;
}
            
[class^="labelppv_"]:hover{
    color: #444;
    background-color: #ffeed9;
}
            
#buttonppv_a:checked ~ #navigationppv .labelppv_a  {
     cursor: default;
     color: #fff;
     background-color: #222;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */
.ripple-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background-color: #ffffff;
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.ripple-btn .ripple-effect {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.flying-cart {
  position: fixed;
  width: 40px;
  height: 40px;
  z-index: 1000;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
  pointer-events: none;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.cart-icon.animate {
  animation: cartPulse 0.4s ease;
}

@keyframes cartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}