@font-face {
    font-family: "margin-demo";
    src: url("https://static.igem.wiki/teams/5007/wiki/margin-demo/margin-demo.otf") format(opentype)
}

@font-face {
    font-family: "futrfw";
    src: url("https://static.igem.wiki/teams/5007/wiki/margin-demo/futrfw.ttf") format(truetype)
}

@font-face {
    font-family: "bahnschrift";
    src: url("https://uploads.igem.org/teams/5007/wiki/bahnschrift/bahnschrift.ttf") format(truetype)
}

head{
    max-width: 100%;    
}

body { 
    padding-top: 56px;
    background-color: #f6f3ea;
    margin: 0;
    max-width: 100%;
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06c; }
.bg-VI_Green1 { background-color: #028c5a; }
.bg-VI_Green2 { background-color: #59b362; }
.bg-VI_Yellow { background-color: #f2e203; }
.bg-VI_Orange1 { background-color: #f2b707; }
.bg-VI_Orange2 { background-color: #ee7411; }
.bg-VI_Baige { background-color: #f6f3ea; }


.font_margin{
    font-family:  "margin-demo"!important;
}

h3, h4, h5, h6 {
    font-family:  "futrfw";;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 3px !important;
}

.nomes_membros h6{
    font-family:  "futrfw";
    font-size: 15px;
    letter-spacing: -5px !important;
}

h2 {
    font-family:  "margin-demo"!important;
    font-weight: 900;
    font-size: 50px;
    letter-spacing: 3px !important;
}

h1 {
    font-family:  "margin-demo"!important;
    font-weight: 100;
    font-size: 60px;
    letter-spacing: 3px !important;
}

p1{
    font-family:  "futrfw";
    font-weight: 900;
    letter-spacing: -6px !important;
    text-align: justify;
    word-wrap: break-word;
}


p,li{
    font-family:  "bahnschrift";
    font-weight: 10;
    font-size: 20px;
    letter-spacing: -1px !important;
    text-align: justify;
    background-color: rgba(255, 255, 255, 0); /* Set the background color with transparency */

}

p2{
    font-family:  "bahnschrift";
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0px !important;
    word-wrap: break-word;
}

p3{
    font-family:  "futrfw";
    font-weight: 400;
    letter-spacing: -2px !important;
    text-align: center;
    word-wrap: break-word;
}

p4{
    font-family:  "bahnschrift";
    font-weight: 10;
    font-size: 17px;
    letter-spacing: -1px !important;
    text-align: center;
    background-color: rgba(255, 255, 255, 0); /* Set the background color with transparency */

}

a{
    font-family:  "bahnschrift";
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -1px !important;
    text-align: justify;
    color: black;
    background-color: rgba(255, 255, 255, 0); /* Set the background color with transparency */

}

span, td, th{
    font-family:  "bahnschrift";;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0px !important;
    word-wrap: break-word;
    text-align: center;
}

th{
    font-family:  "futrfw";;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0px !important;
    word-wrap: break-word;
    text-align: center;
}

.table {
    table-layout: fixed;
    width: 100%;
    background-color: #59b362;
}

.table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Hover Effects --- */

.tab:hover img {
    opacity: .4;
    background-color: #028c5a;
}

.tab:hover {
    flex-shrink: 0;
}

.tab:hover .caption {
    transition: all .5s ease;
    opacity: 1;
}


.hr_stripes{
    width: 100%;
    height: 30px !important;
    margin: 0;
    padding: 0;
    border: none;
    background: linear-gradient(to right, #59b362, #59b362) 0% 0%, 
                linear-gradient(to right, #f2b707, #f2b707) 0% 50%, 
                linear-gradient(to right, #ee7411, #ee7411) 0% 100%;
    background-size: 100% 33.3%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 33.3%, 0 66.6%;
    opacity: 1;
}

	.demo {
		border:3px Duplo #C0C0C0;
		border-collapse:colapso;
		padding:4px;
	}
	.demo th {
		border:3px Duplo #C0C0C0;
		padding:4px;
		background:#F2E203;
	}
	.demo td {
		border:3px Duplo #C0C0C0;
		text-align:Centro;
		padding:4px;
	}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: black; font-weight: bold; text-decoration: none; }
footer a:hover { color: black; text-decoration: underline; }
.container_footer {display:flex;
justify-content:space-evenly;}
.container_contato {display: flex; flex-direction:column;
}
.container_social_logo {
    display:flex;
    align-items:center;
    gap: 5px;
}
.container_footer a {color: black; font-weight: bold; text-decoration: none;}
.container_contato {padding: 0px;}
footer {
    max-width: 100%;
    margin-right: 0;
}

/*                                        Classes Navbar                                          */

.dropdown:hover .dropdown-menu{
    display:block;
}

/*.dropdown-item {
    position: relative;
    padding: 10px 20px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}*/

.dropdown-item::after {
    content: ''; 
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background-color: #59b362;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: -1; /* Move the white block behind the text */
}

/* Show white block on hover */
.dropdown-item:hover::after {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu {
    background: #59b362 !important;
}

.nav-item{
    font-weight: bold;
}

/*                                      Classes Divs                                            */


.div_img_home img {
    max-width: 100%;
    height: auto;
}


.div_img_titles img {
    margin: 0px !important;
    margin-top: 10px !important;
    padding: 0px !important;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.centered-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Garante que o conteúdo ocupe a altura total do pai. */
  }
  
  .custom-paragraph {
    font-family: "bahnschrift";
    font-weight: 10;
    font-size: 17px;
    letter-spacing: -1px !important;
    text-align: center;
    background-color: rgba(255, 255, 255, 0); /* Set the background color with transparency */
  }

  .subcolumn {
    display: inline-block;
    width: 30%; 
    text-align: center; 
  }

.big_text p{
    font-size: 20px;
}

.align_right{
    text-align: right;
}

/*                               Tentativas imagens de fundo                               */

.faixa1 {
    position: absolute;
    z-index: -2;
    height: 220px;
    width: 200px;
    background-repeat: no-repeat;
    background-size: cover; /*codigo pra manter tamanho com zoom in e out*/
    background-size: contain;
    top: 80px;
    right: 0px;
}


.cbdfrente {
    position: absolute;
    z-index: 1;
    margin-top: 1000px;
    background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixa-cbd-frente.png");
    height: 30%;
    width: 30%;
    background-repeat: no-repeat;
    background-size: cover; /*manter zoom in e out*/
    background-size: contain;
    bottom: 0px;
    right: 0px;
}

.faixaesquerda {
    position: absolute;
    z-index: -1;
    margin-top: 20px;
    background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixa-pro-lado.png") ;
    height: 20%;
    width: 20%;
    background-size: cover;
    background-size: contain;
    bottom: 0px;
    right: 0px;
    background-repeat: no-repeat;
}

.cbdhorizontal {
    position: absolute;
    z-index: 1;
    margin-top: 0px;
    background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixa-cbd-horizontal.png");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
}

.faixas_fundo {
    position: absolute;
    z-index: -2;
    height: 220px;
    width: 200px;
    background-repeat: no-repeat;
    background-size: cover; /*codigo pra manter tamanho com zoom in e out*/
    background-size: contain;
    /*clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);*/
}

.container_faixa {
    position: absolute;
    width: 150px;
    height: 300px;
    overflow: hidden;
}

.container_images_home {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.faixaprafrente {
  position: absolute;
  z-index: 1;
   background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixas/faixas/faixa-8.png");
 height: 100%;
 width: 100%;
 background-repeat: no-repeat;
 background-size: contain;
right: 0px;
bottom: 0px;
}

.faixaprabaixo {
  position: absolute;
  z-index: 1;
  margin-top: -100px;
   background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixas/faixas-baixo.png");
 height: 100%;
 background-repeat: no-repeat;
 background-size: contain;
 width: 100%;
 right: 300px;
}

.estrelinha {
  position: absolute;
  z-index: 1;
  margin-top: -100px;
   background-image: url("https://static.igem.wiki/teams/5007/wiki/faixas/faixas/estrela.png");
 height: 100%;
 background-repeat: no-repeat;
 background-size: contain;
 width: 100%;
}

/*                          Classes Margins and Paddings                                                   */

.center p, h1, h2, h3, h4, h5, h6{
    padding: auto 0;
}

.py_home {
    margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.py_team {
    margin-bottom: 5px;
    padding-top: 2px;
    padding-bottom: 5px;
}

.navbar {
    max-width: 100vw !important;
}

.navbar-expand-lg .navbar-nav {
    margin-right: -16px !important; /* Adjust margin to prevent expansion */
}

.navbar-expand-lg .navbar-toggler {
    padding-right: 50px; /* Adjust padding to prevent expansion */
}



/*                                     Flip Card vamo ver isso ai                           */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 1px solid #f6f3ea;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
  
  /* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    transform: rotateX(180deg);
}
  
  /* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
  
  /* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: transparent;
}
  
  /* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
    transform: rotateX(180deg);
}




/*                      Flip Prism               */

/* Flip prism styles */
.flip-prism {
    background-color: transparent;
    width: 300px;
    height: 500px;
    border: 1px solid #f6f3ea;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: relative;
}

.flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.flip-prism input[type="radio"] {
    display: none; /* Hide the radio buttons */
}

/* Style the sides of the prism */
.flip-prism-left, .flip-prism-center, .flip-prism-right {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: #f6f3ea; /* Set background color for sides */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Initial positions of the sides */
.flip-prism-left {
    transform: rotateY(-120deg) translateZ(5em); /* TranslateZ moves the side to the back */
}

.flip-prism-center {
    transform: rotateY(0deg) translateZ(5em);
}

.flip-prism-right {
    transform: rotateY(120deg) translateZ(5em); /* TranslateZ moves the side to the back */
}

/* ADJUST ROTATION, 69 # IN THIS #$%*%@*/
#l1:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c1:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r1:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l2:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c2:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r2:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l3:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c3:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r3:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l4:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c4:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r4:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l5:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c5:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r5:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l6:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c6:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r6:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l7:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c7:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r7:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l8:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c8:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r8:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l9:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c9:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r9:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l10:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c10:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r10:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l11:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c11:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r11:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l12:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c12:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r12:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l13:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c13:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r13:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l14:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c14:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r14:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l15:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c15:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r15:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l16:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c16:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r16:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l17:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c17:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r17:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l18:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c18:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r18:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l19:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c19:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r19:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l20:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c20:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r20:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l21:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c21:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r21:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l22:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c22:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r22:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l23:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c23:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r23:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l24:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c24:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r24:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l25:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c25:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r25:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l26:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c26:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r26:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l27:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c27:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r27:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l28:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c28:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r28:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l29:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c29:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r29:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l30:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c30:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r30:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l31:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c31:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r31:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l32:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c32:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r32:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l33:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c33:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r33:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l34:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c34:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r34:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l35:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c35:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r35:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l36:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c36:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r36:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l37:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c37:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r37:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l38:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c38:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r38:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l39:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c39:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r39:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l40:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c40:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r40:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l41:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c41:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r41:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l42:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c42:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r42:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l43:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c43:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r43:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l44:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c44:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r44:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l45:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c45:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r45:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l46:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c46:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r46:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l47:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c47:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r47:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l48:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c48:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r48:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l49:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c49:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r49:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l50:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c50:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r50:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l51:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c51:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r51:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l52:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c52:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r52:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l53:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c53:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r53:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l54:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c54:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r54:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l55:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c55:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r55:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l56:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c56:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r56:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l57:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c58:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r57:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l58:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c58:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r58:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l59:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c59:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r59:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l60:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c60:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r60:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l61:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c61:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r61:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l62:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c62:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r62:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l63:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c63:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r63:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l64:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c64:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r64:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l65:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c65:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r65:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l66:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c66:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r66:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l67:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c67:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r67:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l68:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c68:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r68:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
#l69:checked ~ .flip-card-inner {
    transform: rotateY(120deg);
}

#c69:checked ~ .flip-card-inner {
    transform: rotateY(0deg);
}

#r69:checked ~ .flip-card-inner {
    transform: rotateY(-120deg);
}
/* AAAAAAAAAAAAAAAAACABO MDS DO CEU*/


.flip-prism-cover {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px; /* Adjust the width according to your design */
    height: 100%;
    transform: translateX(-1px); /* Adjust the translation to center the cover */
    z-index: 1; /* Ensure the cover appears above the prism sides */
}


/*                                              SIDE NAV CONFIG                                  */

.side-nav {
    float: left;
    top: 100px;
    width: 16vw;
    font-family: "bahnschrift";
    font-size: 1.15rem;
    border-radius: 20px;
    background: #59b362;
    box-shadow: inset 20px 20px 60px #59b362, inset -20px -20px 60px #59b362;
    position: sticky;
    overflow: hidden;
}

.page-right {
    padding-left: 20vw;
}

.side-nav button {
    color: black;
    text-decoration: none;
    background-color: transparent;
    border: none;
    padding: 15px;
    width: 100%; /* Added width to fill the container */
    text-align: left; /* Align text to the left */
}

.side-nav button:hover {
    color: #f2b707;
    font-weight: bold;
    cursor: pointer;
}

.subtopics {
    padding-left: 30px;
}

.subtablinks {
    display: block; 
    padding: 5px 10px; 
    margin-bottom: 5px; 
    background-color: transparent; 
    border: none; 
    text-align: left; 
    cursor: pointer; 
  }
  

/* Added style for the active button */
.side-nav button.active {
    color: #ee7411;
    font-weight: bold;
}