/*

Theme Name: astra-child

Author: EBWEB

Author URI: https://ebweb.es

Description: Personalización del tema Astra versión 2 realizada por EBWEB, con algunos extras que no vienen por defecto con el tema gratuito.

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: astra-child

Template: astra

*/

/**************************************************************************************/

/***************************ÍNDICE DE MODIFICACIONES **********************************/

/**************************************************************************************/

/*



1. Variables.

2. Cabecera.

3. Smooth Scroll. ¡Extra añadido al tema! -- La versión gratuita del tema Astra no tiene botón de ir arriba.

4. Últimos post. ¡Extra añadido al tema! -- La versión gratuita del tema Astra no tiene la opción de mostrar los post en cajas.

5. Titulos de Páginas h1, h2, etc.

6. Elementos varios.

7. Botones.

8. Título blog. ¡Extra añadido al tema! -- IMPORTANTE: El blog no carga el título por defecto en WordPress. Si tiene imagen de fondo, añadir desde aquí.

9. Footer.

10. Iconos sociales.

11. Formulario contacto.

12. Formulario comentarios blog.



*/

/********************************************** VARIOS PERSONALIZADOS ****************************************/
a, a:hover {outline : none !important;}

.ast-header-break-point .ast-mobile-menu-buttons-fill.menu-toggle {
background:  var(--color1);
}

/**************************** Variables ****************************/

:root, body {

--color1:#ff5e18; /* color general del tema */

--color2:#d01f00; /* color secundario */

--color3:#f08656;

--font-size-footer:14px;

--font-weight-boton: bold;

--letter-spacing-boton: 1px;

--fuente-menu: 'Quicksand', sans-serif;

}


/**************************** Fin variables ****************************/



/**************************** Cabecera ****************************/

.main-header-bar{

font-family: var(--fuente-menu);

font-size:18px;

font-weight:600;

padding:8px 0;

-webkit-box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);

box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);

/*font-family: */
}
.ast-header-break-point .main-header-bar{

padding:10px 0;	

}



/**************************** FIN Cabecera ****************************/



/**************************** Smooth scroll ****************************/

html {

scroll-behavior: smooth;

}



i.sube{

border: solid white;

border-width: 0 4px 4px 0;

display: inline-block;

padding: 3px;

transform: rotate(-135deg);

-webkit-transform: rotate(-135deg);

position:relative;

}

#myBtn {

display: none; 

position: fixed; 

bottom: 15px; 

right: 30px; 

z-index: 9999; 

border: none; 

outline: none; 

background-color: var(--color1); 

cursor: pointer; 

padding: 7px 10px;

width:40px;

-webkit-animation-name: desliza;

-webkit-animation-duration: 0.3s;

animation-name: desliza;

animation-duration: 0.3s;

}

@keyframes desliza{

  from{

     bottom: -15px;

  }

  to{

     bottom: 15px;

  }

}

#myBtn:hover {

background-color: var(--color2); 

}



/**************************** FIN Smooth scroll ****************************/



/**************************** Últimos post ****************************/

.conten-new-post{

display: -ms-flex;

display: -webkit-flex;

display:flex;

flex-wrap:wrap;

justify-content:center;

background:transparent;

}

.content-one-post{

background:#fff;

text-align:center;

max-width:30%;

padding-bottom: 10px;

margin:10px;

-webkit-box-shadow: 0px 7px 24px -5px rgba(188,188,188,0.5);

-moz-box-shadow: 0px 7px 24px -5px rgba(188,188,188,0.5);

box-shadow: 0px 7px 24px -5px rgba(188,188,188,0.5);

}

@media screen and (max-width: 900px) {

 .content-one-post{

 max-width:90%;

 }

}

.content-one-post img, .content-one-post h3{

-webkit-transition: all 0.6s;

transition: all 0.6s;	

}

.content-one-post h3{

padding:20px 15px 0px 15px ;

font-size:20px;

line-height:25px;

margin-bottom:10px;

}

.content-one-post h3:hover{

color: var(--color1);

}

.content-one-post img:hover{

opacity:0.5;

}

.content-one-post p{

color:#545454;

margin-bottom:18px;

padding:0 15px;

}

.boton-leer-post{

padding:8px 18px;

color:#fff;

background:	var(--color1);

display:inline-block;

margin-bottom:20px;



}

.boton-leer-post:hover{

background:	var(--color2);

color:#fff;

}



/**************************** FIN Últimos post ****************************/

/**************************** Titulos de Páginas ****************************/



.page h4{

line-height:1.2em !important;

}

@media screen and (max-width: 1100px) {

 .page h2{

 font-size:34px;

 line-height:38px;

 }

}

@media screen and (max-width: 899px) {

 .page h2{

 font-size:28px;

 line-height:32px;

 }

}

@media screen and (max-width: 767px) {

 .centrar-resp  *{

 text-align:center !important;

 }

}



/**************************** FIN Titulos de Páginas ****************************/



/**************************** Elementos varios ****************************/



.color1{

color:var(--color1)!important;	

}

.fonfo-color{

background:var(--color3);

}

blockquote{

margin-left:10px;

}

.h2-mbm{

margin-bottom:10px !important;

}

.elementor-widget-container .elementor-icon-list-items li span.elementor-icon-list-icon i{

color: var(--color1) !important; /* Iconos listas especiales */

}

.single .ast-oembed-container{ /* Vídeos post */

	margin-bottom:25px;

}



/**************************** FIN Elementos varios ****************************/



/**************************** Botones ****************************/



a.elementor-button{

background:var(--color1);

font-weight: var(--font-weight-boton);

letter-spacing: var(--letter-spacing-boton);

text-transform:uppercase;

border-radius:0px !important;

}

a.elementor-button:hover{

background:var(--color2);

}



/**************************** FIN Botones ****************************/



/**************************** Título blog ****************************/



/**************** falta ajustar respoinsive y poner imagen genérica ***************/



#content-tit-blog{ 

text-align:center;

padding:135px 0px;

background-color: var(--color2);

background-image: url(https://dulcepsicologa.es/wp-content/uploads/2021/05/grupo-mujeres-abrazo-2.jpg); 

background-position: center center;

background-size: cover;

}



#content-tit-blog h1{

font-size:40px;

color:#fff;

font-weight:600;

text-transform: uppercase;

}

@media screen and (max-width: 1024px) {

 #content-tit-blog{ 

 padding:74px 0px;

 }

 #content-tit-blog h1{

 font-size:30px;

 }

}



@media screen and (max-width: 767px) {

 #content-tit-blog{ 

 padding:43px 0px;

 }

}



/**************************** FIN Título blog ****************************/



/**************************** Footer ****************************/



.site-footer{ 

border-top:3px solid var(--color1);

}



.footer-adv .footer-adv-overlay{

padding-top:45px !important;

padding-bottom:45px !important;

}

.ast-small-footer .ast-footer-overlay{

font-size: var(--font-size-footer)!important;

padding-top:10px;

padding-bottom:10px;

font-size:13px !important;

}

.site-footer h4{

color:white;

font-weight:bold;

margin-bottom:15px;	

}

.site-footer p{

font-size:15px;

line-height:20px;

margin-bottom:15px;

}

.footer-adv .footer-adv-overlay p, .footer-adv .footer-adv-overlay ul, .footer-adv .footer-adv-overlay li, .footer-adv .footer-adv-overlay a{

color:#c2c2c2;

}

.site-footer #custom_html-3{ /************************** ¡REVISAR EN CADA INSTALACIÓN! ****************************/

margin-bottom:0px;



}

.site-footer #menu-top-navigation li{

padding:5px 0px;

border-bottom:1px solid white;

font-size:15px;	



}

.site-footer #menu-top-navigation li:first-child{

padding-top:0px;

}

.site-footer #menu-top-navigation li a:hover{

color:#fff;

}

a.cn-revoke-cookie.cn-button.cn-revoke-inline.wp-default.button{

border-radius:0px;

font-weight: normal;

position:absolute;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

right: -37px!important;

bottom: 100px!important;

z-index:9999;

}



/**************************** FIN Footer ****************************/



/**************************** Iconos sociales ****************************/



.icono.fab {

padding: 8px;

font-size: 20px;

width: 35px;

height: 35px;

text-align: center;

text-decoration: none;

margin: 5px 2px;



color: white !important;

}

.icono.fab:hover {

opacity: 0.7;

}

.icono.fa-facebook-f {

background: #3B5998;

}

.icono.fa-twitter {

background: #55ACEE;

}

.icono.fa-linkedin-in {

background: #007bb5;

}

.icono.fa-youtube {

background: #bb0000;

}

.icono.fa-youtube:before{

margin-left:-3px;	

}

.icono.fa-instagram {

background: #125688;

}

.icono.fa-pinterest-p {

background: #cb2027;

}



/**************************** FIN Iconos ****************************/



/**************************** Formulario contacto ****************************/



.wpcf7 input[type=checkbox]{

height: 0.9em !important;

margin-right:0px !important;

}

.wpcf7 .wpcf7-list-item{

margin-left:0px !important;

}

.wpcf7 .wpcf7-list-item span.wpcf7-list-item-label{

font-size:16px !important;

}

.wpcf7-form-control-wrap input{

padding:10px !important;	

}

.legal p{

font-size:10px !important;

line-height:14px !important;

}

.wpcf7 p input[type=submit]{

background:var(--color1) !important;

-webkit-transition: background-color 0.3s ease-out;

-moz-transition: background-color 0.3s ease-out;

-o-transition: background-color 0.3s ease-out;

transition: background-color 0.3s ease-out;

font-size:15px !important;

padding:7px 18px !important;

letter-spacing:1px;

}

.wpcf7 p input[type=submit]:hover{

background:var(--color2) !important;

}



/**************************** FIN Formulario contacto ****************************/



/**************************** Formulario comentarios blog ****************************/



.comments-area #wp-comment-cookies-consent{

margin-right:3px;

}

p.comment-form-cookies-consent, p.comment-form-policy{

font-size:15px;

}

p.form-submit input[type=submit]{

background:var(--color1) !important;

-webkit-transition: background-color 0.3s ease-out;

-moz-transition: background-color 0.3s ease-out;

-o-transition: background-color 0.3s ease-out;

transition: background-color 0.3s ease-out;

font-size:15px !important;

padding:10px 15px !important;

}

p.form-submit input[type=submit]:hover{

background:var(--color2) !important;

}



/**************************** FIN Formulario comentarios blog ****************************/

.cn-button.bootstrap {
    color: #fff;
    background: var(--color1);
}