/*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');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');


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

}
@font-face {
  font-family: 'Luis George Cafe';
  src: url('../fuentes/Louis George Cafe.ttf') format('truetype');
  font-style: normal;
}

body
{
  margin: 0px auto;
font-size: .85rem !important;
font-weight: 400 !important;
line-height: 1.5;

}

p, p a,ul li, ol li, ul li p, table
{
  font-size: large !important;
  text-align: justify;
  color: #000000 !important;
}


b, i {
color:#410099 ;
}

#logoUAEM{
  max-width:180px !important;
  width:280px !important;
}
#logoUATM{
  max-width:100px !important;
  width:90px !important;
  min-width:30px !important;
}

/*div para enfatizar contenidos, la cajita de los videos*/
.marco{
    width:90%;
    border-radius: 10px;
    box-shadow: lightgrey 1px 1px 15px;
    background-color: #fafafa;
    margin: auto;
    padding: 2.5rem;
    border: 2px solid #410099;
    max-width: 650px;
}

.marcocodepen{
    width:100%;
    margin: auto;
    padding: .5rem;
    /*    box-shadow: lightgrey 1px 1px 15px;
    border: 2px solid #410099;
      background-color: #fafafa;
      border-radius: 10px;
    */
    max-width: 850px;

}
/*clase para meter margen a los indices*/
.margen{
 margin-left: 5%;
}

/* clase para div con borde punteado y sombra*/
.cajapunteada{
  width:90%;
  border-radius: 10px;
  box-shadow: lightgrey 1px 1px 15px;
  background-color: #fafafa;
  margin: auto;
  padding: 2.5rem;
  border: 3px dotted #410099;
}
/*estilo para las referencias*/
.txt-cita{
text-align: right;
color: #410099 ;/*cambio*/
}

/*estilo para los links*/
.linkcrea
{
color:#135794 !important;
text-decoration: none;
word-wrap: break-word;
text-align: center;
}

.linkcrea:hover{
text-decoration: underline;
}

.linkcrea:active,.linkcrea:before,.linkcrea:visited{
  color:#135794 !important;
}


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

}

.encabezado #baner-color img
{
  vertical-align: top !important;
  margin-top: 30px;
  margin-left: 10%;
}

.piepagina #baner-color, .piepagina #baner-color table{
  height: 20px;
  margin: 0px;
  width: 100%;
  vertical-align: top !important;

}

.bimages {
  width: 100%;
  background: white;
  margin: 1.25em;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  margin: 0 auto !important;
}

.mcontenido{
  width:80% !important;
  margin: 0 10% !important;
}

.uatmimg {
  width: 100%;
  max-width: 650px !important;
  height: auto;
  margin: 0 auto;

}

.uatmimg2{
  width: 100%;
  max-width: 350px !important;
  height: auto;
  min-width: 280px  !important;
  margin: 0 auto;
}

.uatmimg3{
  width: 100%;
  max-width: 350px;
  height: auto;
  margin: 0 auto;
}

h3, h4, h5{
  color:#410099;
  text-align: justify;

}

h5{
  font-size: 18px !important;
}
.textjusti{
  text-align: justify;
}

/*para las tarjetas del punto 1.1.1*/



/* estilo para el pie de imagen*/
.pie, .pie a{
  text-align: center ;
  font-size: 11px;
  padding-top: 0px;
  text-decoration: none !important;
}

.pie a:hover{
  text-decoration: underline !important;
}

/* * * * * * * * * * * * * * * * * *  tablas * * * * * * * * * * * * * * * * * */
table {
width: 100% !important;
background: white;
margin-bottom: 1.25em;
border-collapse: collapse;
border-spacing: 0;
background: none;
margin: 0 auto !important;
text-align: center;
}

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

table thead tr td, table tr td p{
  text-align: center !important;
  font-weight: normal !important;
}

.resp2 tr td{
  border: thin solid #410099;
  text-align: center;
}

.resp4  tbody tr td{
  width: 33% !important;
  text-align: center;
}


table tr th,
table tr td {
padding: 0.5625em 0.625em;
margin-right:auto ;
text-align: justify;
/*  font-size: 0.875em; */
width: 33% !important;
}

/* tamaño del link*/
table tr td p a{
overflow-wrap: break-word;
color: #410099;
}

/*fondo de las filas pares*/
table tbody tr.even,
table tbody tr.alt,
table tbody tr.alt,
table tbody tr:nth-of-type(even),
table tbody tr:nth-of-type(even) p,
table tbody tr:nth-of-type(even) a
{
background: #9978CE !important;/*cambio*/
color: #ffffff !important;

}

/* código para el borde de las tablas*/

.resp1, .resp1 tr th, .resp2, .resp2 tr th{
border: thin solid #410099;
text-align: center !important;

}

.resp2 tr th{
  width: 15% !important;
}
.resp2 tr .tabla-texto{
  width: 55% !important;
}

/** * * * * * * * * * fondo de libro * * * * * * * * * * * * * * * * * * */

.cajalibro{
  width: 80%;
  height: auto;
  margin: 0 auto;

}

.textolibro{
  border-radius: 10px;
  padding: 20px;
  width: 80%;
  max-width: 460px;
  margin: 0 auto;
  font-family: sans-serif;
}
.bg-texto{
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  background-image: url("../images/FondoTexto.png");
}

.textolibro p, .textolibro h5
{
  font-family: "Luis George Cafe", Serif !important;
}

.textolibro h5{
  font-size: 1.5em !important;
}

.fondoejemplo{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom !important;
  height: 120px;
  top: -36px;
  position: relative;
  background-image: url("../images/fondo-libro.png");
}
/*Código para las notas*/

.fondonota{
  background-image: url("../images/papel.png") !important;
  text-align: center;
    background-size : contain !important;
    background-repeat: repeat-y;
    border-radius: 10px !important;
    /*border: 3px solid #c1c1c1 !important; */
    box-shadow:6px 6px 7px rgba(0,0,0,.4);
    margin: 0 auto;
}

.fondonota02{
  background-image: url("../images/papel.png") !important;
  text-align: left !important;
   background-size : cover 100% !important;
   border-radius: 10px !important;
   border: 3px solid #c1c1c1 !important;
     box-shadow:6px 6px 7px rgba(0,0,0,.4);
   width: 100%;
   max-width: 650px;
   margin: 0 auto;
}


.fondonota h5{
  font-family: 'Patrick Hand'  !important;
  font-size: 2.5rem !important;
  color: #410099 !important;
    padding: 10px 15% !important;
    text-align: center;
}

.fondonota h6{
  font-family: 'Patrick Hand'  !important;
  font-size: 2em !important;
  color: #410099 !important;
  padding: 30px 40px 0px 10px ;
}

.fondonota02 h5{
  font-family: 'Patrick Hand', cursive !important;
  font-size: 2em !important;
  color: #410099 !important;
  padding: 20px 20px 0px 20px;
}

.fondonota02 p, .fondonota02 p b  {
  padding: 0px 30px 20px 30px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5rem !important;
  line-height: 1;
  margin-bottom: 0px !important;
  text-align: left !important;
}
.fondonota02 p  a{
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1em !important;
  line-height: 1.2;
}
.fondonota p{
  padding: 0px 50px 20px 10% ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}

.fondonota ul, .fondonota ol, .fondonota02 ul {
  padding: 0px 50px 20px 90px ;
}

.fondonota ol {
  padding: 0px 50px 20px 15% ;
  font-size: 1.25em !important;
  line-height: 1.2;
}

.fondonota ul li, .fondonota02 ul li {
  padding: 0px 5px 20px 0px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}

.fondonota ol li {
  padding: 0px 50px 20px 0px ;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.5em !important;
  line-height: 1.2;
}




/* * * * * * * * * * * * * * * Tablas responsivas * * * * * * * * * * * * * * * * * */
@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 tbody tr td,
  .resp4 caption,
  .resp5,
  .resp5 thead,
  .resp5 tbody,
  .resp5 tr,
  .resp5 th,
  .resp5 td,
  .resp5 caption,
  .resp6,
  .resp6 thead,
  .resp6 tbody,
  .resp6 tr,
  .resp6 th,
  .resp6 td,
  .resp6 caption,
  .resp7,
  .resp7 thead,
  .resp7 tbody,
  .resp7 tr,
  .resp7 th,
  .resp7 td,
  .resp7 caption
   {
    display: block;
    min-width: 240px;
    width: 100% !important;

  }

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


  .resp, .resp1, .resp2, .resp3, .resp4, .resp5, .resp6, .resp7 {
    border: none;
    max-width: 100% !important;
    width: auto;
  }


  .resp1 thead tr,.resp2 thead tr,  .resp3 thead tr, .resp4 thead tr, .resp5 thead tr, .resp6 thead tr, .resp7 thead tr {
    display: none;
    width: 100% !important;
    min-width: 260px !important;
    max-width: 740px !important;
  }

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

  .resp1 tbody tr {
    margin: 0 auto;
  }

  .resp1 th, .resp7  td {
    border: none;
    border-bottom: 1px solid #BCF8E4;
    position: relative;
    text-align: center;
  }
  .resp1 td, .resp2 td,.resp3 td, .resp4 td, .resp5 td, .resp6 td, .resp7 tr td {
    border: none;
  /*  position: relative; */
    width: 100% !important;
    text-align: justify;
    margin: 0 auto;
  }
  .resp1 img, .resp2 img,.resp3 img, .resp4 img, .resp5 img, .resp6 img, .resp7 img {
    border: none;
    text-align: center;
    width: 50%;
  }

  .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, .resp5 td:before, .resp6 td:before, .resp7 td:before {
          position: relative;
          top: 6px;
          margin:0px !important;
          padding: 5px 0px !important;
          width: 100% !important;
          white-space: nowrap;
          font-weight: bold;
        }

        .resp2 tr th, .resp2 tr th p{
          text-align: center !important;
          width: 100% !important;
        }


              .resp1 th:nth-of-type(1):before {
                content: "Abreviatura";
                color: #410099;
                font-size: 18px;
                display: block;
                text-align: center !important;
                padding-bottom: 10px;
              }

              .resp1 th:nth-of-type(2):before {
                content: "Descripción";
                color: #410099;
                font-size: 18px;
                display: block;
                text-align: center !important;
                padding-bottom: 10px;
              }


              .resp2 th:nth-of-type(1):before {
                content: "Operador";
                color: #410099;
                font-size: 18px;
                display: block;
                text-align: center !important;
                padding-bottom: 10px;
              }

              .resp2 th:nth-of-type(2):before {
                content: "Definición";
                color: #410099;
                font-size: 18px;
                display: block ;
                text-align: center !important;
              }

              .resp2 th:nth-of-type(3):before {
                content: "Ejemplo";
                color: #410099;
                font-size: 18px;
                display: block ;
                text-align: center !important;
              }
              .resp2 th:nth-of-type(4):before {
                content: "Caso de uso";
                color: #410099;
                font-size: 18px;
                display: block ;
                text-align: center !important;
              }

              .resp2 table tr td ul li{
                font-size: 1
              }
              .resp2 table tr th p{
                display: block ;
                text-align: center !important;
              }

              #respTable .carta img{
                width: 290px;
              }

              /* para el margen del contenido total*/
              .mcontenido{
                width:96% !important;
                margin: 0 2% !important;
              }

              /*div para enfatizar contenidos, la cajita de los videos*/
              .marco{
                  width:100%;
                  border-radius: 10px;
                  box-shadow: lightgrey 1px 1px 15px;
                  background-color: #fafafa;
                  margin: auto;
                  padding: 2.5rem;
                  border: 2px solid #410099;
              }

              /* clase para div con borde punteado y sombra*/
              .cajapunteada{
                width:100%;
                border-radius: 10px;
                box-shadow: lightgrey 1px 1px 15px;
                background-color: #fafafa;
                margin: auto;
                padding: 1rem;
                border: 3px dotted #410099;
              }

              /* cuando la imagen está en dispositivos pequeños*/
              .uatmimg {
                width: 100%;
                height: auto;
                margin: 0 auto;

              }
              .uatmimg3 {
                width: 100% !important;
                height: auto;
                margin: 0 auto;

              }

              /* modificación para los logos del baner*/
              .bimages  tbody tr td{
                max-width: 33% !important;
                vertical-align: middle !important;
              }
              .bimages  tbody tr td img {
                /*width: 140px !important;*/
                text-align: left !important;
                align-items: center !important;
                vertical-align: middle !important;

              }

              .fondonota h5{
                font-family: 'Patrick Hand', cursive !important;
                font-size: 2rem !important;
                color: #410099 !important;
                padding: 10px 15% !important;
                text-align: left;
              }

              .fondonota h6{
                font-size: 1.5rem !important;
              }

              .fondonota p{
                padding: 0px 50px 20px 80px ;
                font-family: 'Patrick Hand', cursive !important;
                font-size:  1rem !important;
                line-height: 1.2;
              }


              .fondonota02 h5{
                font-family: 'Patrick Hand', cursive !important;
                font-size: 2rem !important;
                color: #410099 !important;
                padding: 0px 20px 10px 20px;
              }

              .fondonota02 p, .fondonota02 p b  {
                padding: 0px 20px 10px 20px;
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1.5rem !important;
                line-height: 2rem !important;
              }
              .fondonota ul, .fondonota02 ul {
                padding: 0px 50px 20px 90px ;
              }

              .fondonota ul li, .fondonota02 ul li {
                padding: 0px 5px 20px 0px ;
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1rem !important;
                line-height: 1.2;
              }


              .fondonota02 {
                font-size: 1.5rem !important;
                width: 100% !important;
              }


              .fondonota ul {
                padding: 0px 30px 20px 60px !important;
              }

              .fondonota ul li {
                padding: 0px 15px 5px 0px !important;
                font-family: 'Patrick Hand', cursive !important;
                font-size: 1rem !important;
                line-height: 1.2;
              }

              /*apartado del div del libro*/
              .cajalibro{
                width: 100%;

              }

              .textolibro{
                padding: 20px;
                width: 100% !important;
                margin: 0 auto;

              }

              .fondoejemplo{
                background-size: contain !important;
                background-repeat: no-repeat !important;
                background-position: bottom !important;
                height: 150px;
                top: -100px;
                position: relative;
              }

              .VentanaExa{
                width: 100% !important;
                margin: 0 auto;
              }

  }




  /* * * * * * * * * Personalización de la barra de navegación * * * * * * * * * */

  /*fondo blanco para todos los contenedores de la barra de navegación*/
  .navbar, .sticky-top, .navbar-light, .bg-light{
    background-color: #ffffff !important;

  }
  /*para la línea inferior de las pestañas*/
  ul.nav-tabs{
    border-bottom: 1px solid transparent !important;
    padding: 0px;


  }
  /* el color de fondo para el menú*/
  nav, nav .container-fluid{
      background-color: #ffffff !important;

  }

  nav .container-fluid{
      border-bottom: 1px solid #410099 !important;

  }


  /*es para el tipo de texto que tendráen las pestañas*/
  .nav-link{
    margin-right: 2px;
    line-height: 1.42857143;
    border-radius: 4px 4px 0 0;
    color:#555 !important;
  }

  /*código para la pestaña activa*/
  button.active{
    color:#ffffff !important;
    border: 1px solid #410099 !important;
    background-color: #410099 !important;
  }

  /* código para el hover de la pestaá*/
  button:hover{
    color:#ffffff !important;
    background-color: #410099 !important;
    border: 1px solid #410099 !important;
  }
/*videos responsivos*/
.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%; }

/* * * * * * *  clases para las botoneras de los íconos * * * * * * * * * */
.botonerapp a img:hover, .botonerapp2 a img:hover,
.botonerapp3 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.10);
  -moz-transform: scale(1.10);
  -o-transform: scale(1.10);
  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, .botonera img
{
  width: 100%;
  max-width: 450px;
  margin: 20px;
  border-radius: 10px;
}

.botonerapp2 a img, .botonera2 img
{
  width: 100%;
  max-width: 400px !important;
  margin: 20px;
  border-radius: 10px;
}


.botonerapp3 a img
{
  width: 100%;
  max-width: 650px;
  margin: 10px;
  padding: 30px;
}


/* Modificación de la separación de las tarjetas*/
.card{
  border: 3px solid #410099 !important;
  border-radius: 5px !important;
  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);

}

.col .card img{
  width: 100% !important;
  margin: auto;
  vertical-align: middle !important;
}

h5.card-title {
  font-size: 1.7rem !important;
  text-align: left;
}

.card-text{
  text-align:
}

/* Modificación de los mensajes de alerta de la pestaña 4*/

.txt-alert
{
  font-size: 1.25em !important;
  text-align: justify;;
}




@media only screen and (min-width: 1200px) {
        .fondonota{
          background-image: url("../images/papel.png") !important;
          text-align: center;
            background-size : cover 100% !important;
            background-repeat: repeat-y;
            border-radius: 10px !important;
          /*  border: 3px solid #c1c1c1 !important;*/
            box-shadow:6px 6px 7px rgba(0,0,0,.4);
            max-width: 800px !important;
            margin: 0 auto;
        }

        .fondonota h5{
          font-family: 'Patrick Hand', cursive !important;
          font-size: 2em !important;
          color: #410099 !important;
            padding: 30px 40px 0px 60px ;
            text-align: left !important;
        }

        .fondonota p {
          padding:20px 60px ;
          font-family: 'Patrick Hand', cursive !important;

        }
        .fondonota ul {
          padding: 0px 50px 20px 90px ;
        }

        .fondonota ul li {
          padding: 0px 5px 20px 0px ;
          font-family: 'Patrick Hand', cursive !important;
          font-size: 1.5em !important;
          line-height: 1.2;
        }
}

/* clase para dar color a la base de las fichitas*/
.card-footer{
  background-color: #19d3c5 !important;
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius:7px !important;
}

/* Carbonara */
/*nuevas tarjetas*/
.carbonads{
  /*position: static;
  display: block;*/
  border-radius: 15px;
  color: #410099;
  border: solid 4px #410099;
/*  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;*/
  font-size: 1.2rem !important;
  font-weight: 450 !important;
  line-height: 1.5;
  width: 100%;
  padding: 15px 25px 15px 100px;
  margin: 2rem 0;
  overflow: hidden;
  line-height: 1.4;
  text-align: justify;
  box-shadow:6px 6px 7px rgba(0,0,0,.4);
  margin: 0 auto;
}

#carbonadas-pal01{
  /*background-color: #D64598;*/
}
#carbonadas-pal02{
  background-color: #FFB900;
}
#carbonadas-pal03{
  background-color: #00BE7F;
}
#carbonadas-pal04{
  background-color: #FF4058;
}

.carbonads a {
  color: #343a40;
}

.carbon-img {
  float: left !important;
  margin-left: -75px !important;
}

.carbon-poweredby {
  display: block;
  margin-top: .75rem;
  color: #495057 !important;
}

.carbonads01, .carbonads02, .carbonads03, .carbonads04 {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: bottom right !important;
}

.carbonads01{
 background-image: url("../images/cajas/01_NumArmar.png");

}

.carbonads02{
 background-image: url("../images/cajas/02_NumArmar.png");
}

.carbonads03{
 background-image: url("../images/cajas/03_NumArmar.png");
}

.carbonads04{
 background-image: url("../images/cajas/04_NumArmar.png");

}

.carbonads .carbon-text b
{
  color: #410099 !important;
}

#carbonads01-fondo{
  height: 100px !important;
  float: inline-end !important;
  margin: 0px;
  padding: 0px;
  z-index: 10000;

}

/* cambios css solo para modo vertical */
@media only screen
and (max-width: 550px)
{
  .botonerapp img
  {
    width: 100%;
    max-width: 100% !important;
    margin: 0px auto;
    border-radius: 10px;
  }
}

/*Colores para el vocaroo*/
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #410099 !important;
-webkit-box-shadow:  2px 2px 4px 0px #410099 !important;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

/* clases para las flashcard bonitas*/
/* 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;
 max-width: 350px !important;
 height: 250px;
 /*border: 1px solid #f1f1f1;*/
 perspective: 1000px; /* Remove this if you don't want the 3D effect */
 margin: 0 auto;
}

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

.flip-card-front img{
 width: 300px  !important;
 height: 250px  !important;

}

/* 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;
 border-radius: 10px;
 border: 2px solid #c1c1c1;
 box-shadow: #c1c1c1 1px 1px 15px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
 background-color: #d8d8d8;
 color: black;
}

/* Style the back side */
.flip-card-back {
 background-color: #B38E5D;
 color: white;
 transform: rotateY(180deg);
 padding: 10px;
}
.fondonota{
  background-image: url("../images/papel.png");
  text-align: center;
   background-repeat: repeat-y;
   background-size : contain;
}

.fondonota02{
   background-image: url("../images/papel-v02.png") !important;
   text-align: left !important;
   background-size : cover 100% !important;
   border-radius: 10px !important;
   border: 3px solid #c1c1c1 !important;
   padding: 15px;
}





@media only screen and (min-width: 1200px) {
        .fondonota{
          background-image: url("../images/papel-xl.png");
          text-align: center;
           background-repeat: repeat-y;
           background-size : contain;
        }

        .fondonota h5{
          font-family: 'Patrick Hand', cursive !important;
          font-size: 3em !important;
          color: #410099 !important;
            padding: 20px 40px 0px 80px ;
            text-align: left !important;
        }

        .fondonota p {
          padding:20px 80px ;
          font-family: 'Patrick Hand', cursive !important;

        }
        .fondonota ul {
          padding: 0px 50px 20px 90px ;
        }

        .fondonota ul li {
          padding: 0px 5px 20px 0px ;
          font-family: 'Patrick Hand', cursive !important;
          font-size: 1.5em !important;
          line-height: 1.2;
        }
}

/*Estilo para bloques de código*/
pre {
text-align: justify;
width:100%;
margin: 0 auto;
border-radius: 10px;
font-size: 1.2em !important;
min-width: 300px;
max-width: 750px;
background-color: #333 !important;
}

/** Estilo para la cajita de examen que simula una ventana **/
.VentanaExa{
  border: 1px solid #333 !important;
  border-bottom-left-radius:15px !important;
  border-bottom-right-radius: 15px !important;
  width: 80%;
  max-width: 650px;
  margin: 0 auto;
}

.VentanaExa .BarraExa{
    width: 100%;
    height: 30px;
    background-color: #410099;
}

.VentanaExa .BarraExa p{
  color: #ffffff !important;
  text-align: center;
}

.VentanaExa .PreguntaExa{
    padding: 15px 30px;
}

/*
Estilo para el contorno de lkas tarjetas del punto 1
*/

.contornito{
    border: 2px solid #410099 !important;
    border-radius: 10px;
    box-shadow:3px 3px 4px rgba(0,0,0,.4);
    -moz-box-shadow:3px 3px 4px rgba(0,0,0,.4);
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.4);
    min-height: 530px;
    height: auto;
}


/*PErsonalizando color del boton de bootstrap*/
.btn-primary{
  background-color:#410099 !important;
  border: none !important;
}

.btn-primary:hover {
  background-color:#ED6C06 !important;
}