/*
 Theme Name:   On Road Magazine
 Theme URI:    http://divi.space/
 Description:  A Child Theme built for Divi on Divi Space
 Author:       Ruben Villar
 Author URI:   http://rubenvillar.net
 Template:     Divi
 Version:      1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/****** Establece la fuente del texto ******/
body{
	font-family: 'Fauna One', sans-serif;
}

/****** Alinea los iconos sociales de la portada al centro ******/
.et_social_icons_container {
text-align: center!important;
}

.et_monarch .et_social_networks.et_social_circle li {
display: inline-block!important;
float: none!important;
}

.et_social_icons_container li{
display:inline-block !important;
float:none !important;
}

/****** Hace que la frase de portada ocupe todo el ancho ******/
.titulo-portada-h1 div.header-content{
	width:100% !important;
	max-width: 1080px !important;
}


/****** Efecto de color al pasar el ratón en el grid de patrocinadores ******/
.eg-grid-patrocinadores--wrapper .esg-entry-media img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.eg-grid-patrocinadores--wrapper:hover .esg-entry-media img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}


/****** Línea roja de separación entre el texto y los sponsors ******/
@media (min-width: 981px){
div.sponsors .et_pb_column:first-child{
	border-right: 4px solid #BF5346;
	padding-right: 10px;
}
}

/****** Hace que el título de los grid de la portada sea más grande ******/
.titulo-grid h2{
	font-size: 2em;
}

/****** Hace que el slider de la portada ocupe todo el alto de la ventana (sea fullscreen) ******/
.slider-portada .et_pb_slide {
height: 90vh;
}

/****** Cambia los colores de la paginación de la tienda ******/
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current, .woocommerce-page nav.woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background: #BF5346;
    color: #ffffff;
}

/****** Da formato a los formularios de optin ******/
.et_bloom .et_bloom_optin_1 h2,
.et_bloom .et_bloom_optin_1 h2 span,
.et_bloom .et_bloom_optin_1 h2 strong{
	font-family: 'Playfair Display' !important;
}

.et_bloom .et_bloom_optin_1 p, .et_bloom .et_bloom_optin_1 p span, .et_bloom .et_bloom_optin_1 p strong, .et_bloom .et_bloom_optin_1 form input, .et_bloom .et_bloom_optin_1 form button span{
	font-family: 'Fauna One ' !important;
}

.et_bloom .et_bloom_optin_1 .et_bloom_form_content button {
font-family: 'Fauna One ' !important;

}

#bloomwidget-2 .et_bloom_widget_content .et_bloom_form_container {
	width: 95%;
}

/****** Hace que el los iconos sociales del footer y la cabecera aparezca el color de cada red al pasar el ratón ******/
li.et-social-facebook a.icon:hover{
	color: #3b5998 !important;
}
.et-social-twitter a.icon:hover{
	color: #55acee !important;
}
.et-social-google-plus a.icon:hover{
	color: #dd4b39 !important;
}
.et-social-vimeo a.icon:hover{
	color: #1ab7ea !important;
}
.et-social-instagram a.icon:hover{
	color: #125688 !important;
}

/****** Centra los contenidos de los productos ******/
div#left-area{
	width: 100%;
	padding-right: 0px !important;
}

/****** Hace que los metadatos de los posts aparezcan en mayúsculas ******/
p.et_pb_title_meta_container{
	text-transform: uppercase;
}

/****** Hace que el correo electrónico del footer tenga la fuente más pequeña ******/
.mail-footer{
	font-size: 13px;
}

/****** Da estilos al botón de Visualizar online ******/
div a.bigred{
	background: #BF5346 !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	padding: 6px 20px !important;
	Border: none !important;
}


/****** Hace que el menú movil aparezca a partir de 1024px ******/
@media only screen and ( max-width:1024px ) {
#et_mobile_nav_menu { 
display:block 
}
#top-menu-nav { 
display:none; 
}
}