/*

	Theme Name: Editorial El Colectivo
	Theme URL: http://www.visualko.com/
	Description: Sitio ecommerce Landing Page.
	Author: Ernesto Schulz
	Author URI: http://www.visualko.com/
	Version: 1.0

*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Piazzolla:wght@300;400;600;700&display=swap');
:root{

  --negro:#000;
  --oscuro:#3c3c3c;
  --gris:#6e7780;
  --claro:#eedfcc;
  --blanco:#fff;

  --principal:#5b9894;
  --secundario:#d46661;
  --tercero:#797ea4;
  --cuarto:#385776;
  --quinto:#2B2B2B;
}

/*
h2.titulo{
  color:var(--secundario);
  background:var(--quinto);
  text-shadow: 10px 10px 5px var(--cuarto);
}
*/

html, body{
  height:100% !important;
}
body{
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color:var(--principal);
  background:var(--claro);
}

.receso{
  padding:5px;
  background:var(--secundario) !important;
}
.receso p{
  color:var(--blanco) !important;
  text-align: center;
}
.vko{
  background:var(--oscuro);
  color:var(--claro);
}
.vko a, .vko a :hover{
  color:var(--secundario);
  text-decoration: none;
}

input{
  color:var(--gris);
}

ul {
    list-style-image: url("img/autores-icon-list.png")
}
.clear{ clear:both;}

.hl{ clear:both; height:auto; overflow:hidden;}
.hlb{ clear:both; height:1px; overflow:hidden; background:#ebe9eb; margin-top:10px; margin-bottom:10px;}
.hl10{ clear:both;	height:10px;}
.hl20{ clear:both;	height:20px;}
.hl30{ clear:both;	height:30px;}
.hl50{ clear:both;	height:50px;}
.hl100{ clear:both;	height:100px;}
.hl150{	clear:both;	height:150px;}

.bb{ padding-bottom:10px; border-bottom:solid 1px #ccc; margin-bottom:10px;}
.bt{ padding-top:10px; border-top:solid 1px #ccc; margin-top:10px;}
.br{ padding-right:10px; border-right:solid 1px #ccc; margin-right:10px;}
.bl{ padding-left:10px; border-left:solid 1px #ccc; margin-left:10px;}

.p0{ padding:0;}
.pl0{ padding-left:0}
.pr0{ padding-right:0}
.m0{ margin:0;	}
.p100{ padding:100px 0;	}
.pbox { padding: 50px;}


h1{
  font-family: 'Piazzolla', serif;
  /*font-size: 48px;
  font-weight: 900;*/
}
h2{
  font-family: 'Piazzolla', serif;
  /*font-size: 36px;
  font-weight: 300;*/
}
h3{
  font-family: 'Piazzolla', serif;
  /*font-size: 30px;
  font-weight: 900;*/
}
h4{
  font-family: 'Piazzolla', serif;
  /*font-size: 22px;
  font-weight: 900;*/
}

.img-full{ width:100%;	height:auto;}
.center{ margin:auto 0;}

.btn-principal{
  background-color: var(--principal);
  color: var(--claro);
}
.btn-principal:hover{
  background-color: var(--secundario);
  color: var(--claro);
}

.google-maps {
    position: relative;
    padding-bottom: 540px; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 540px !important;
}

.italica{font-style: italic;}
.centrado{text-align:center}
.mayuscula{text-transform:uppercase;}
/*
.naranja{color:rgba(209,132,86,1)}
.bg-naranja{background-color:rgba(209,132,86,1)}
.blanco{color:rgba(255,255,255,1)}
.bg-blanco{background-color:rgba(255,255,255,1)}
.azul{color:rgba(120,148,204,1)}
.bg-azul{background:rgba(120,148,204,1)}
.gris{color:rgba(223,223,220.1)}
.bg-gris{background-color:rgba(223,223,220,1)}
.negro{color:rgba(44,44,44,1)}
.bg-negro{background-color:rgba(44,44,44,1)}
*/
.weight900{font-weight: 900}
.weight400{font-weight: 400}
.weight300{font-weight: 300}
.weight100{font-weight: 100}




.menu{background:transparent}
.header-logo{
  width:auto;
  max-width: 170px !important;
  height:auto !important;
  float:left;
}

@media screen and (max-width: 768px) {
	.navbar-collapse.in {
			overflow-y: inherit !important;
		}
  .menu {
			height: auto !important;
			max-height: none !important;
  }
	#navbar{
		padding-top:20px;
		border: none !important;
	}
}

#global-nav{
  padding:15px 0;
  background:var(--oscuro);
  -moz-box-shadow: 0px 0px 10px #212121;
	-webkit-box-shadow: 0px 0px 10px #212121;
	box-shadow: 0px 0px 20px #212121;
}
.scrolled-nav{
	visibility: hidden;
	padding:0;
  transition: all 0.2s ease-in-out;
}
.scrolled-nav-y{
	position: fixed;
	transition: all 0.2s ease-in-out;
	background:var(--oscuro);
}

.navbar-site{
	height:auto;
	overflow:hidden;
}

.navbar-brand{
	height:auto;
	padding:0;
}

ul.menu-principal{width:auto; height:auto; float:right; background:transparent; background: transparent; margin:0; margin-top:20px;}
ul.menu-principal li{font-size:14px; float:left; list-style:none; margin:0 5px;}
ul.menu-principal li a{
  float:left;
	color:var(--claro);
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	font-weight: 400;
  position: relative;
}
/*  ul.menu-principal li a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 0%;  content: '.';  color: transparent;  background: #cc5a1c;  height: 5px;}  */
ul.menu-principal li:hover{}
ul.menu-principal li a:hover{color:var(--secundario);}
ul.menu-principal li a:hover:after{width: 100%;}
ul.menu-principal li.active a {color:var(--principal);; text-shadow:none;	background:none !important;}
/*  ul.menu-principal li.active a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 100%;  content: '.';  color: transparent;  background: #cc5a1c;  height: 5px;} */
ul.menu-principal li ul.dropdown-menu li.current-menu-item a{color:var(--secundario) !important;	text-shadow:none;	background:none !important;}

ul.menu-principal li > ul.dropdown-menu{background:var(--oscuro); left:0; right:auto; top:30px ; width:auto; margin:0; padding:0; box-shadow: none; border-bottom:solid 5px var(--secundario)}
ul.menu-principal li > ul.dropdown-menu li{clear:both; margin:5px 0;}
ul.menu-principal li > ul.dropdown-menu li:hover{color:var(--oscuro); background:none; border-bottom:none !important}
ul.menu-principal li > ul.dropdown-menu li a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 0%;  content: '.';  color: transparent;  background: var(--secundario);  height: 5px;}
ul.menu-principal li > ul.dropdown-menu li a:hover{color:var(--secundario); background:none; border-bottom:none !important}
ul.menu-principal li > ul.dropdown-menu li a:hover:after{width: 0%;}


@media screen and (max-width : 960px) {
  ul.menu-principal{width:100%; height:auto; clear:both; background:transparent; margin:20px 0}
  ul.menu-principal li{clear:both; padding:5px;}
  ul.menu-principal li a:hover:after{display:none}
  ul.menu-principal li.active a:after{display:none}
  ul.menu-principal li ul.dropdown-menu li.current-menu-item a{color:#cc5a1c !important;	text-shadow:none;	background:none !important;}
	ul.menu-principal li > ul.dropdown-menu{background: rgba(66,66,0,1 !important); left:0; right:auto; top:30px ; width:auto; margin:0; padding:0; box-shadow: 0 0 15px #444}
}

/******* fin menu *****/



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

#intro{
  padding:50px 0;
  background: rgb(110,119,128);
  background: linear-gradient(0deg, rgba(110,119,128,1) 0%, rgba(54,60,65,1) 18%, rgba(110,119,128,1) 100%);
  color:var(--claro);
}

.texto-intro div span.diferente{
  color:var(--principal);
}

#products-intro div div div ul.intro-portada, #products-intro div div div ul.ultima-publicacion-portada{
  margin:0;
  padding:0;
  list-style: none;
}
#products-intro div div div ul.intro-portada li a, #products-intro div div div ul.ultima-publicacion-portada li a{
  color:var(--principal)
}
#products-intro div div div ul.intro-portada li a:hover, #products-intro div div div ul.ultima-publicacion-portada li a:hover{
  color:var(--secundario);
  text-decoration: none;
}

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

}

.hl-video{
  box-shadow: 0 0 60px rgba(0,0,0,.1);
  border-radius: .25rem;
  border: .625rem solid #fff;
}


#intro-productos-destacados{
  padding:50px 0;
  background:var(--claro);
  color:var(--gris);
}
#intro-productos-destacados div span.diferente{color:var(--principal)}

#owl-intro-products div div .owl-item  {
  padding:10px;
}

#intro-productos-destacados div div div div div div:hover
  .product-imagen{
    filter: grayscale();
}

#intro-productos-destacados div div div div div div ul.destacados-portada{
  margin:0;
  padding:0;
  list-style: none;
}
#intro-productos-destacados div div div div div div ul.destacados-portada li a{
  color:var(--secundario)
}




#datos-contacto{
  color:var(--claro);
  background: var(--blanco);
  padding:40px 0;
}
#datos-contacto div .item .hl div .circulo{
  background: var(--secundario);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
  color:var(--claro)
}
#datos-contacto div .item .hl h4 a{
  font-weight: 700;
  color:var(--secundario) !important;
}
#datos-contacto div .item .hl{
  color:var(--principal)
}

#datos-contacto div .item:hover .hl div .circulo{
  background: var(--principal);
}



#ultima-publicacion{
  background: var(--secundario);
  color:var(--claro);
}
#ultima-publicacion div div .ultima-publicacion-info .hl-info{
  margin:150px 0px;
}

#ultima-publicacion div div .ultima-publicacion-info .hl-info ul.ultima-publicacion-portada, #ultima-publicacion div div .ultima-publicacion-info .hl-info ul.ultima-autores-portada {
  margin:0;
  padding:0;
  list-style: none;
}
#ultima-publicacion div div .ultima-publicacion-info .hl-info ul.ultima-publicacion-portada li a, #ultima-publicacion div div .ultima-publicacion-info .hl-info ul.ultima-autores-portada li a {
  color:var(--oscuro)
}

.noticias-intro-info{
  background:var(--secundario);
  color:var(--claro)
}
#noticias-intro div div .noticias-intro-info .hl-info{
  margin:150px;
}

@media screen and (max-width: 768px) {
  #ultima-publicacion div div .ultima-publicacion-info .hl-info{
    margin:0px;
  }
  #noticias-intro div div .noticias-intro-info .hl-info{
    margin:0px;
  }
}


/*    Autores */

#autores ul, #autores ul li{
  margin:0;
  padding:0;
  list-style: none;
}

#autores ul li{

}

#autores ul li a{
  font-weight: 700;
  color:var(--secundario);

}



/*    Colecciones */

#colecciones ul, #colecciones ul li{
  margin:0;
  padding:0;
  list-style: none;
}

#colecciones ul li a{
  font-weight: 700;
  color:var(--secundario);

}

                  /*        page_id           */

#page-content{
  background:var(--blanco);
  padding-top: 30px;
  padding-bottom: 30px;
}



                  /*        woocommerce       */


#site{
  margin-top:150px;
}

body.page-template-portada #site, body.woocommerce-checkout #site, body.woocommerce-cart #site {
  margin-top:100px;
}


.woocommerce-notices-wrapper{
  clear: both;
  padding:15px;
  margin-right: calc( 100% - widthOfelement);
}



                  /* archiv */
.single-producto{
  background: var(--blanco);
  padding:20px;
}

.info{
}

.info h2{
  font-weight:700;
}
.info h3{
  font-weight:400;
  color:var(--secundario)
}
.info .price{
  font-size: 24px;
}
.info .product_meta ul.autores{
  list-style-image: url("img/autores-icon-list.png")
}
.info .product_meta ul.colecciones{
  list-style-image: url("img/autores-icon-list.png")
}

.item-publicacion .hl{
  background: var(--claro);
  padding:5px;
}
.item-publicacion .item-titulo{
  font-size: 14px;
}
.item-publicacion .item-titulo a{

}
.item-publicacion .item-titulo a:hover{
  text-decoration: none;
}
                /*   single */
.form-control{
  background-color: var(--claro);
}
/******************************************************************************* cart **********************/

body.woocommerce-cart #site #contenido{
  background: var(--blanco);
  padding:50px 0;
}






tr.woocommerce-cart-form__cart-item th, tr.woocommerce-cart-form__cart-item td{
  padding:10px;
}

.woocommerce-cart-form__contents tr:nth-child(odd) {
  background:var(--blanco);
}
.woocommerce-cart-form__contents tr:nth-child(even) {
  background:#f5f5f5
}

.product-thumbnail a img.img-100x100{
  max-width: 100px;
  height:auto;
}
/* The "Apply Coupon" button */
.button[name="apply_coupon"] {
  background-color: var(--principal);
  color: var(--claro);
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: var(--secundario);
  color: var(--claro);
}

/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: var(--principal);
  color: var(--claro);
}

.button[name="update_cart"]:hover {
  background-color: var(--secundario);
  color: var(--claro);
}
.wc-proceed-to-checkout a.checkout-button{
  background-color: var(--principal);
  color: var(--claro);
}

/* The "woocommerce_checkout_place_order" button */
.button[name="woocommerce_checkout_place_order"] {
  background-color: var(--principal);
  color: var(--claro);
}

.button[name="woocommerce_checkout_place_order"]:hover {
  background-color: var(--secundario);
  color: var(--claro);
}

.product-remove a.remove{

}

.quantity .input-text {
  width:45px;
}


/******************************************************************************* shop **********************/

.post-type-archive-product #site #woocommerce- ul.tienda, .tax-product_cat #site #woocommerce- ul.tienda, .tax-autor #site #woocommerce- ul.tienda, .tax-coediciones #site #woocommerce- ul.tienda, {
  margin:0;
  padding:0px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.post-type-archive-product #site #woocommerce- ul.tienda li, .tax-product_cat #site #woocommerce- ul.tienda li, .tax-autor #site #woocommerce- ul.tienda li, .tax-coediciones #site #woocommerce- ul.tienda li{
  list-style: none;
}

ul.tienda{
  background: var(--blanco);
  padding:20px !important;
}

/******************************************************************************* checkout **********************/

body.woocommerce-checkout #site #contenido{
  background: var(--blanco);
  padding:50px 0;
}

.woocommerce-checkout .checkout {
  display: flex;
  flex-wrap: wrap;
}
.checkout .col2-set {
  flex: 65%; /* 100% at small screens; 60% on larger screens */
}

/* The element that contains the cart totals */
.checkout .woocommerce-checkout-review-order {
  flex: 35%; /* 100% at small screens; 30% on larger screens */
  padding:0 10px;
}
@media screen and (max-width: 768px) {
  .checkout .woocommerce-checkout-review-order {
    order:1;
  }
  .checkout .col2-set {
    order: 2;
  }
}

.woocommerce-billing-fields__field-wrapper{
  display: flex;
  flex: flex-start;
  flex-wrap: wrap ;
}
.woocommerce-billing-fields__field-wrapper p{
  margin:5px;
  width: 48%;
}

@media screen and (max-width: 768px) {
  .woocommerce-billing-fields__field-wrapper p{
    margin:5px;
    width: auto;
  }
}

#order_review .shop_table .cart_item td{
  border-bottom:solid 1px var(--principal);
  padding:20px 0;
}

.related{}

/******************************************************        get_sidebar      ****************/

 .sidebar-page{
   background: var(--secundario);
   padding-top: 20px;
   padding-bottom: 20px;
 }
  h3.sidebar-page{
   color: var(--oscuro) !important;
 }
 .sidebar-page .colecciones{

 }

.social-sidebar, .social-sidebar a{
  color:var(--claro);
}
ul.colecciones-list{
  margin:0;
  padding: 0;
  list-style: none;
}

ul.colecciones-list li a{
  color:var(--claro);
}

/******************************************************        get_footer      ****************/
#newsletter{
  background-color: var(--claro);
  padding:150px 0;
}
.bg-newsletter{
  background-color: var(--secundario);
  color:var(--claro)
}
.bg-newsletter .left{
  padding-top:20px;
}
.libros{

}
#hl-libros{
  position:relative;
}
.hl-libros{
  position:absolute;
  left:-30px;
  bottom:50px;
}
.libro2{
  position:absolute;
  z-index:1;
  top:-50px;
}
.libro2 img{
  max-width: 310px;
}

.libro1{
  position:absolute;
  z-index:2;
  left:25px;
}
.libro1 img{
  max-width: 240px;
}
#wpoi_form{

}


#footer{
  padding:20px 0;
  background-color: var(--oscuro);
}

#footer .fin div div h3{
  font-size:18px;
  color: var(--secundario)
}


#footer .fin div div ul.colecciones{
  margin:0;
  padding:0;
  list-style: none;
}

#footer .fin div div ul.colecciones li a{
  color:var(--claro);
}
#footer .fin div div ul.colecciones li a:hover{
  text-decoration:none;
  color:var(--secundario);
}

#footer .fin div div .social-footer div a{
  color:var(--claro);
  margin-left:10px;
}

#footer .fin div div .social-footer div a:hover{
  text-decoration:none;
  color:var(--secundario);
}

#footer .fin div .editorial{
  color:var(--claro);
}
/******************************************************        categorias / colecciones      ****************/

.tax-product_cat{
  background:var(--claro);
  color:var(--oscuro);
}
form.woocommerce-ordering{
  visibility: hidden;
}