/* ***********VERSIÓN DE ESCRITORIO *****************/
@font-face {
    font-family: 'SpartanBold';
    src: url('../fonts/Spartan_Bold.ttf');
   }

   @font-face {
    font-family: 'SpartanSemi';
    src: url('../fonts/Spartan_SemiBold.ttf');
   } 
   
   @font-face {
    font-family: 'SpartanMed';
    src: url('../fonts/Spartan_Medium.ttf');
   } 

   @font-face {
    font-family: 'SpartanFina';
    src: url('../fonts/Spartan_Regular.ttf');
   } 


/* definición de las partes de la página en general */
body {
    font-family: SpartanFina, Calibri, Open Sans, sans-serif; 
    margin:0px;
}

header {
    width:100%;
    height: auto;
    background-image:url("../imagenes/roble.jpg");
    }
   
section {
    height:auto;
    margin: 0 auto;
   }

   footer {
    margin-top: 15px;
    clear: both;
   
   }

.tituloseccion {
    font-weight: bolder;
    font-style: italic;
    line-height: 1.4em;
}

.copeteseccion {
  /*  margin: 30px 0;*/
    text-align: center;
 /*   padding: 0 100px;*/
    font-weight: bold;
    font-style: italic;
    line-height: 1.8em;
}


   .verdeclaro {
    background-color:#dbf4cc;
}

.violetaclaro {
    background-color:#e7d1ec;
}

.violetaoscuro {
    background-color:#d18ce0;
}

.blanco {
    color:white;
}

.verdeoscuro {
    color:rgb(12, 54, 12)
}


a:hover {
    font-weight: bolder;
    color:#7c0597;
}

h1 {font-size: 57px;}
h2 {font-size: 33px;}
h3 {font: size 30px;}
h4 {font-size: 25px;}
h5 {font-size: 20px;}
h6 {font-size: 18px;}
p {font-size:  16px;}

.aclaracion {font-size:12px;}

.btn-verde {
    background-color:#b3d49e;
}

.btn-verde:hover {
    background-color: #e7d1ec;
}

.centrado {
    justify-content: space-between;
}

.conmargenarribabajo {
    margin-top: 15px;
    margin-bottom:15px;
}

.conmargeniz {
    margin-left:10px;
    margin-right: 10px;
}

/* ***** propiedades de los elementos de header ***** */

.letraslogo {
  font-family: 'SpartanBold';
  padding-left:  5px;
  margin:0;
  text-shadow: 1px 1px black;
}

.subletraslogo {
  padding-left:5px;
  margin:0;
  text-shadow: 1px 1px black;
}

#logoytexto {
    padding:20px;
    margin-left:50px;
    height:140px;
    width:100%;
     
}

#logo {
    background-image:url("../imagenes/logo.JPG");
    height:100px;
    width:100px;
    float:left;  
}

#texto_logo {
    height:100px;
    width:400px;
    float:left;
}

/* botonera horizontal */
.menucolapsado {
    margin:0;
}

.bothoriz { 
    padding:0;
    margin:0 auto;
   }

ul.bothoriz li a {
    font-family: 'SpartanMed';
    text-decoration:none;
    text-align: center;
    line-height: auto;
    background-color:#e5f9d9;
    color:#d18ce0;
}


ul.bothoriz li a:hover {
    background-color: #e7d1ec;
    color:darkgreen;
    }

/* el indicador de página al inicio de cada pag. después del include header */

.indicadordepagina {
    clear:both;
    padding-left: 140px;
    line-height:2em ;
    font-size:16px;
    color:darkgreen;
    font-style: italic;
}

/* propiedades de los elementos de footer */

#contenedorfooter {
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
     
} 

#redes {
    padding:25px;
    height:50px;
    width:auto;
    display:flex;
    justify-content:space-around;
    margin:auto;
    
}
.botonred {
    padding: 10px;;
}

ul.botonred li {
    margin-left: 10px;        
    display:inline;   
}

ul.botonred li a {
    display:inline-block;
    width: auto;
}


/* ********************** PAGINA DE INICIO ************** */

#texto_portada {
    padding: 50px;
    font-style: italic;
    line-height: 2.3em;
    text-align: center;
}

.diapositiva {
    width:60%;
}


/* ********************** PAGINA QUIENES SOMOS ************** */

/* nuestras herramientas */

#herramientas {
    width: 35%;
}

#herramientas ul {
    display:flex;
    flex-direction: column;
    list-style-type: none;
    width: 100%;
}

.herramienta {
    margin: 30px 10px;
    text-align: center;
    font-size: 16px;
    font-style:italic;
    height: auto;
}

.herramienta a {
    text-decoration: none;
    line-height: 60px;
    color:darkgreen;
    display:block;
}

#legal {
    padding:10px;
}

/* animación del botón de la herramienta */

.herramienta a:hover {
    background-color:#d8f3c7;
    animation: 1s baiven 1;
}

@keyframes baiven{
	20%{
		-webkit-transform: rotate(-4deg);
	}
	30%, 70%{
		-webkit-transform: rotate(4deg);
	}
	50%, 90%{
		-webkit-transform: rotate(-4deg);
	}	
}

/*aqui las definí separadas, porque la idea es poner características
de cada una. por ejemplo una imagen o distintos fondos */

#terapiafloral {
    background-color: #f2faed;
}

#descodificacion {
    background-color: #f2faed;
}

#constelaciones {
    background-color: #f2faed;
}

#pnl {
    background-color: #f2faed;
}

#reiki {
    background-color: #f2faed;
}
.detalle {
    margin-top: 30px;
    border:1px solid #dda8ec;
    background-color: #f7f0ff;
    float: right;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 65%;
    padding:20px;
}

.detalle p {
    line-height: 2em;
    font-size: smaller;
}

#aclaracion {
    clear: both;
    
}


/* pagina talleres y formaciones */

.contenedorformaciones {
    justify-content: center;
}

/* cards con modals  */
.imagenCard {
    padding-top: 10px;
   }


 
 /****** PAGINA DE AYUDA ACORDION ********/
.accordion-button {
    color:darkgreen;
    background-color:#f2faed ;
}

.accordion-button:not(.collapsed) {
    color: darkgreen;
    font-weight: bold;
    background-color:#e7d1ec;
}

/** PAGINA DE SESIONES Y CALENDARIO DE TURNOS ***/

.centro {
    text-align:center; 
    vertical-align:middle;
}

.dia {
    text-decoration: none;
}

#horariosdelmes {
    background-color: #d18ce0;
   
}


/** página de verificación de certificado *******/

#resultadoverificacion {
    text-align:center; 
    padding:10px;
    background-color: #ddf6cd; 
}