/*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;
}

b, .card-title {
color:#410099;
}

.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;
}

/* * * * * * * * * * * * Estilo para los iconos representativos * * * * * * * * * * * * * * *  * *  */


.iconos{
  height: 48px;
  width: 100%;
  background-size: 48px 48px;
}

.hijo{

}

.iconos .hijo p{
  text-align: left;
  padding-left: 50px;
  line-height: 48px;
}


/*lista en forma de conceptos** * * * * * * * * * * * *  * * * * * * * */
dl dt /*este es para los conceptos*/
{
  padding-top: 15px;
  color:#410099;/*cambio*/
}

dl dd /* es para las definiciones*/
{}

.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: 650px;
        height: auto;
        min-width: 250px;
        margin: 0 auto;

}
.cosdacimagen02 {
        width: 100%;
        max-width: 250px;
        height: auto;
        min-width: 250px;
        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: 14px;
color: #410099;
}

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

/*para las imagenes que van en apres*/
.imgnotas{
  width: 45%;
}

.imgnotas01{
  width: 100%;
  max-width: 600px;
  padding:0px;
  margin:0px;
  min-width: 280px;
   text-align: center;
}

.imgnotas02{
  width: 100%;
  max-width: 75%;
  padding:0px;
  margin:0px;
  min-width: 280px;
   text-align: center;
}

@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";
                  color: #410099;
              	}

                .resp3 td:nth-of-type(1):before {
              	  content: "Extensión";
                  color: #410099;
              	}

              	.resp3 td:nth-of-type(2):before {
              	  content: "Características";
                  color: #410099;
              	}

              	.resp3 td:nth-of-type(3):before {
              	  content: "Programa";
                  color: #410099;
              	}
/*
                .resp2 td:nth-of-type(1):before {
              	  content: "Características";
                  color: #410099;
              	}

              	.resp2 td:nth-of-type(2):before {
              	  content: "Contenido en formato físico";
                  color: #410099;
              	}

                .resp2 td:nth-of-type(3):before {
                  content: "Contenido en formato digital";
                  color: #410099;
                }
*/
                .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;
                }
                /* clase para las imágenes en tamaño pequeño*/
                .imgnotas{
                  width: 100%;
                }
                .imgnotas01{
                margin:0%;
                padding:0%;
                width: 100%;
				min-width:280px;
                }
    }
/*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;
}
/*código para los postit*/

.postit{
  width: auto;
  height: auto;
  margin:0;
  padding:0;
}

.postit h2,.postit p{
  font-size:100%;
  font-weight:normal;
}
.postit ul,.postit li{
  list-style:none;
}
.postit ul{
  overflow:hidden;
  padding:3em;

}
.postit ul li a{
  text-decoration:none;
  color:#000;
  background:#FFFED7;
  display:block;
  height:auto;
  width: 100%;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
.postit ul li{
  margin:1em;
  margin-left: 5%;
  float:left;
}
.postit ul li h2 {
  font-family:"Indie Flower",arial,sans-serif;
  font-size:140%;
  padding-bottom:10px;
}
.postit ul li a h2 span{
  font-family:"Indie Flower",arial,sans-serif;
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}

.postit ul li p{
  font-family:"Indie Flower",arial,sans-serif;
  font-size:120%;
}
.postit ul li .pie a{
  text-align: center;
  font-size: 11px;
  color:#d35f17;
}

.postit ul li a:hover,ul li a:focus{
  box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -moz-box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -webkit-box-shadow: 6px 6px 7px rgba(0,0,0,.4);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -o-transform: scale(1.15);
  position:relative;
  z-index:5;
}
.postit ol{text-align:center;}
 .postit ol li{display:inline;padding-right:1em;}
 .postit ol li a{color:#fff;}

/* * * * * * *  clases para las botoneras de los íconos * * * * * * * * * */
.botonerapp a img:hover
{
  box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -moz-box-shadow:6px 6px 7px rgba(0,0,0,.4);
  -webkit-box-shadow: 6px 6px 7px rgba(0,0,0,.4);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -o-transform: scale(1.15);
  position:relative;
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  z-index:5;
}

.botonerapp a img
{
  max-width: 125px;
  margin: 20px;
}

.filtrosIG img{
  max-width: 150px;
  margin: 20px;

}