/*Estilo de títulos*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

*{
font-family: 'Open Sans', sans-serif;

}
body
{
  margin: 0px;
}



.encabezado, .piepagina{
  width: auto;
  height: 85px;
  margin:0px;
}
.encabezado #baner-color{
    background-color: #410099 ;
    height: 20px;
    margin: 0px;

}

.encabezado #baner-color img
{

  margin-top: 10px;
  margin-left: 6%;
}

.piepagina #baner-color, .piepagina #baner-color table{
  height: 20px;
  margin: 0px;
  width: 100%;
}

.titulo-v{
/*  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px;
  padding: 1px;
  background-color: none;
  */
  text-align: center;
  justify-content: center;
  width:85%;
  margin: auto;
  padding: .5rem;
}
.titulo{
/*  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px; */
  padding: 1px;
  background-color: none
  text-align: center;
  justify-content: center;
  width:85%;
  margin: auto;
  padding: .5rem;
}

.titulo-d{
/*  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px;
  padding: 1px;
  background-color: #b38e5d;*/
  text-align: center;
  justify-content: center;
  width:75%;
  margin: auto;
  padding: .5rem;
}

.txt-titulo{
  color: #410099;;
  font-family: Open Sans;
}

.pie{
  text-align: center;
  font-size: 11px;
  color:#d35f17;
  padding-top: 0px;
}
.centerboton{
    text-align: center;
}

.bcontenido{
  margin: 12px;
  text-align: justify;
  line-height: #410099 ;
  border: none;
  background-color:transparent;
  font-size: 16px;
}

.bcontenido:hover{
  color:#9c90bd;
  text-decoration: underline;
  cursor: pointer;
}
.bcontenido:visited{
  color:#d35f17;
  text-decoration: underline;
  cursor: pointer;
}


.txt-gral, div, ul li, dl, dl dd, dl dd dt, ol, ol li, table, table tr, table tr td, table tr td p, .tabcontent {
  margin: 12px;
  font-family: Open Sans;
  text-align: justify;
  line-height: 150%;
}

p, {
  padding: 0 15px;
}
.centrarimg, table tr td img{
  display:block;
  margin:auto;
}

.txt-enfatiza{
color:#410099;/*cambio*/
font-weight: bold;
}

.txt-dorado{
  color:#b38e5d;
  font-weight: bold;
}

.txt-cita{
text-align: right;
color: #633c9a ;/*cambio*/
font-weight: bold;

}
.txt-cita2{
text-align: right;
color: #633c9a ;/*cambio*/
}

a{
color:#410099 ;
text-decoration: none;
word-wrap: break-word;
}

a:hover{
text-decoration: underline;
}

a:active, a:before, a:visited{
  color:#d35f17;
}

.cosdacimagen {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;

}


.persona{
  width: 400px;
}

.video-responsive
{
  position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden; }
.video-responsive iframe, .video-responsive object, .video-responsive embed
{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; }

  table {
  width: 90%;
  background: white;
  margin-bottom: 1.25em;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  margin: 0 auto;
}

table thead {
  text-align: center;
  background: #410099;
  color: #FFF;
/*  border-bottom: 2px double #4E232E; */
  font-weight: bold;
  text-align: center;
  width: 90%;
}



table tr th,
table tr td {
  padding: 0.5625em 0.625em;
  margin-right:auto ;
  text-align: center;
/*  font-size: 0.875em; */

}

/* tamaño del link*/
.resp3 tr td p a{
overflow-wrap: break-word;
font-size: 12px;
}

/*fondo de las pestañas*/
table tr.even,
table tr.alt,
table tr:nth-of-type(even) {
background: #D4CEE3;/*cambio*/
}

@media only screen and (max-width: 768px) {
          .resp,
          .resp thead,
          .resp tbody,
          .resp tr,
          .resp th,
          .resp td,
          .resp caption,
          .resp1,
          .resp1 thead,
          .resp1 tbody,
          .resp1 tr,
          .resp1 th,
          .resp1 td,
          .resp1 caption,
          .resp2,
          .resp2 thead,
          .resp2 tbody,
          .resp2 tr,
          .resp2 th,
          .resp2 td,
          .resp2 caption,
          .resp3,
          .resp3 thead,
          .resp3 tbody,
          .resp3 tr,
          .resp3 th,
          .resp3 td,
          .resp3 caption,
          .resp4,
          .resp4 thead,
          .resp4 tbody,
          .resp4 tr,
          .resp4 th,
          .resp4 td,
          .resp4 caption
           {
            display: block;
            min-width: 240px;

          }

          .resp3 tr td p a, .resp4 tr td p a{
          overflow-wrap: break-word;
          }


          .resp, .resp1, .resp2, .resp3, .resp4 {
            border: none;
            max-width: 100%;
            width: auto;
          }


          .resp1 thead tr,.resp2 thead tr, .resp3 thead tr, .resp4 thead tr {
            display: none;
            width: auto;
            min-width: 260px;
            max-width: 740px;
          }

          .resp tbody tr, .resp1 tbody tr,.resp2 tbody tr,.resp3 tbody tr, .resp4 tbody tr {
            margin: 1em 0;
          /*  border: 1px solid #4E232E; */
          }

          .resp1 tbody tr {
            margin: 0 auto;
          }

          .resp1 td, .resp  td {
            border: none;
            border-bottom: 1px solid #4E232E;
            position: relative;
            padding-left: 5%;
            text-align: left;
          }
          .resp1 td, .resp2 td,.resp3 td, .resp4 td {
            border: none;
          /*  position: relative; */
            width: 100%;
            text-align: center;
            margin: 0 auto;
          }
          .resp1 img, .resp2 img,.resp3 img, .resp4 img {
            border: none;
            text-align: left;
          /*  width: 50%;*/
            padding: 0 10px;
          }

          .resp tr td:last-child, {
          /*  border-bottom: 1px double #4E232E; */
          }

          .resp tr:last-child td:last-child {
            border: none;
          }



          .resp1 td:before,.resp2 td:before,.resp3 td:before, .resp4 td:before {
            position: relative;
            top: 6px;
            left: 6px;
            right: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
          }

                .resp td:nth-of-type(1):before {
              	  content: "Tipo de licencia";
              	}

              	.resp td:nth-of-type(2):before {
              	  content: "Descripción";
              	}

              	.resp td:nth-of-type(3):before {
              	  content: "Ejemplo";
              	}

              	.res td:nth-of-type(4):before {
              	  content: "Ejemplos";
              	}

                .resp3 td:nth-of-type(1):before {
              	  content: "Tipo de licencia";
              	}

              	.resp3 td:nth-of-type(2):before {
              	  content: "Descripción";
              	}

              	.resp3 td:nth-of-type(3):before {
              	  content: "Ejemplo";
              	}

                .resp2 td:nth-of-type(1):before {
              	  content: "Tipo de licencia";
              	}

              	.resp2 td:nth-of-type(2):before {
              	  content: "Ícono";
              	}

              	.resp2 td:nth-of-type(3):before {
              	  content: "Descripción";
              	}

              	.resp td:nth-of-type(4):before {
              	  content: "Ejemplos";
              	}

                .resp4 td:nth-of-type(1):before {
                  content: "Nombre";
                }

                .resp4 td:nth-of-type(2):before {
                  content: "Logo";
                }

                .resp4 td:nth-of-type(3):before {
                  content: "Descripción";
                }

                #respTable .carta img{
                  width: 290px;
                }
    }
/*Estilo para los botones + + + + + + + + + + + + + + + + */

.button {
  background-color: #410099 ; /* Green */
  border: none;
  color: white;
  padding: 12px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
}

.button1 {
  background-color: #410099 ;
  color: #ffffff;
  border: 2px solid #410099 ;
  border-radius: 8px;
}

.button1:hover {
  background-color: #9c90bd;
  color: #410099;
  border: 2px solid #9c90bd;
  border-radius: 8px;
}



/* + + Estilo de la pestaña + + + + + + + + + + ++ + + */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 3px solid #410099 ;
  background-color: #6e5c9f;
  width: 90%;
  margin: 0px auto;
  margin-top: 35px;
  border-radius: 8px;

}

/* Style the buttons inside the tab */
.tab button {
  background-color: #6e5c9f;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 16px;
  color: #ffffff;
  border: 1px solid #6e5c9f;
  font: Open Sans;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #9c90bd;
  border-bottom: 1px solid #9c90bd;
  border-radius: 8px;
}

/* Create an active/current tablink class */
.tab button.active, .tab button.active:focus {
  background-color: #410099;
  border-radius: 8px;
  margin: 0px;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  width: 88%;
  margin: 0px auto;
  margin-top: -3px;
  border: 3px solid #410099;
  border-radius: 8px;
  min-width: 300PX;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Estilo para tablas responsivas con div's */
#respTable {
  position: relative;
  text-align: center;
  top: 20px;
  margin: auto;
  max-width: 110%;
}

.carta {
  border: 2px;
  display: inline-block;
  height: auto;
  margin: auto;
  padding: 2px;
  text-align: center;
  /* width: 30%; */
  max-width: 90%;

}

.carta img{
  max-width: 450px;
  width: auto;
  vertical-align: top;
}