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

.lineash{
  color:#410099;
}

.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:#621132;
font-weight: bold;
}

b{
  color: #410099 ;
}

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

.txt-cita{
text-align: right;
color: #410099 ;
font-weight: bold;

}
.txt-cita2{
text-align: right;
color: #410099 ;
}

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: 350px;
  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: #9D2449;
  color: #FFF;
/*  border-bottom: 2px double #4E232E; */
  font-weight: bold;
  text-align: center;
}



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

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

@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 {
            display: block;
          }

          .resp, .resp1 {
            border: none;
          }


          .resp thead tr,  {
            display: none;
          }

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

          .resp1 tbody tr {
            margin: 0 auto;
          }

          .resp td {
            border: none;
            border-bottom: 1px solid #4E232E;
            position: relative;
            padding-left: 45%;
            text-align: left;
          }
          .resp1 td {
            border: none;
          /*  position: relative; */
            width: 100%;
            text-align: center;
            margin: 0 auto;
          }
          .resp1 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;
          }

          .resp td:before {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
          }

                .resp td:nth-of-type(1):before {
              	  content: "Función de la lengua";
              	}

              	.resp td:nth-of-type(2):before {
              	  content: "Centrado en el factor";
              	}

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

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

    }
/*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 10px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  width: 87%;
  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;}
}