::-moz-selection {background: #b3d4fc; text-shadow: none; }
::selection {background: #b3d4fc; text-shadow: none; }
.grecaptcha-badge {display: none;}
.overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(16,16,16,0.35);}
.btn{cursor:pointer}
#qc-cmp2-container.open{display: block;}

#menu {-webkit-transition: background .5s; -moz-transition: background .5s; -o-transition: background .5s; transition: background .5s; }
#menu.affix{height: 55px;-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.3); box-shadow: 0 0 10px 0 rgba(0,0,0,.3); background-color: #ffffff; }
#menu.affix div.brand a, #menu.affix div.brand span{color: #000000; padding-left:15px; padding-top:0}
#menu.affix a.btn {margin: 11px; margin-left:0;}

#menu ul {width: 150px; background: #fff; border-radius: 5px; position: absolute; right: 32px; top: 70px; list-style: none; margin: 0; z-index: 9; padding: 0; max-height: calc(100vh - 80px); overflow-y: auto;}
#menu div.calendar {position: relative; float: right;}
#menu div.calendar:hover ul{display: block;}
#menu ul li a {text-decoration: none; display: block; padding: 10px; border-bottom: 1px solid #eaeaea;}
#menu ul li a:first-child {border-top-left-radius: 5px; border-top-right-radius: 5px;}
#menu ul li a:last-child {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#menu ul li a:hover {background-color: #eaeaea;}

#toc.open ol {display:block;}
#toc ol {font-size: 0.85rem; margin-top:10px;}
#toc ol li {margin-bottom: 0;}
#toc a {text-decoration: none}
#toc a span{color:#849924 !important;}
#toc a strong{font-weight:normal;}
#toc .toc3{margin-left: 25px;}

#page {z-index:2;}
#sep-sup.affix{margin-top:55px;}
#buscador{display:block; position:fixed; width:100%; height:100%; background-color: #49ccb0; z-index:12; text-align:center; left:100%; top:0;-webkit-transition: left .5s; -moz-transition: left .5s; -o-transition: left .5s; transition: left .5s;}
#buscador.open{left:0; padding:20px;}
#buscador input, #buscador .btn {width:100%; max-width:300px; display:inline-block;}
#buscador input {padding:10px; margin-bottom:10px; font-size:1rem;}
#buscador a.close {text-decoration:none; color:#fff;}

#footer {position:relative; z-index:2; background-color: #49a7cc; color: #ffffff; padding:20px; text-align: center;}
#footer ul {list-style: none; padding:0;}
#footer li {display: inline-block; margin-right: 20px;}
#footer li:last-child {margin-right: 0;}
#footer ul.inf li {font-size: 0.85rem; }
#footer ul.inf li a{text-decoration: none;}
#footer a{color: #ffffff;}
#footer p.creditos{padding-top: 20px; border-top: 1px solid #fff; font-size: 1rem; margin-top: 40px; margin-bottom:0}

.modal{position: fixed; left: 0; top:0; width: 100%; height: 100%; padding:20px; display: none; animation: popup 0.7s; z-index: 99;}
.modal .overlay {background-color: rgba(0,0,0,0.6); position: absolute; left: 0; top:0; width: 100%; height: 100%; cursor: pointer;}
.modal .content {background-color: #fff; width: 100%; max-width: 600px; position: relative; top: 50%; transform: translateY(-50%); z-index: 2; padding:20px;}

@keyframes popup {
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}

#form-contacto {max-width: 600px;}
form label {display: block; font-weight: bold; font-size: 0.9rem;}
form .form-group{margin-bottom: 20px;}
form input[type="text"], form textarea{width: 100%; padding: .5rem .75rem; line-height: 1.25; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
form button {padding:5px 10px; font-size: 1rem; background-color: #49a7cc; color: #ffffff; text-align: center; vertical-align: middle; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; border-radius: .25rem;}
form textarea{height: 150px;}
button{cursor: pointer;}

figure {position: relative; margin:0;}
figure img{margin: 0 auto; max-width: 100%; height: auto;}
figure.img100 img {width: 100%; height: auto;}
figure span.credits {position: absolute; left: 50%; top: 20px; display:block; padding:5px 10px; color: #fff; background-color: #000; cursor: pointer; transform: translate(-50%); font-size: 0.8em; opacity: 0.5;}
figure.img100 span.credits {left: auto; right: 20px; transform: none;}
figure span.credits:hover {opacity: 1;}
figcaption{font-size:0.9rem;font-style: italic;}

.col-2 > div {width: 47%; margin-right:3%;}

.flex.gallery h4 {font-size:0.9rem; text-align:center}
/* .flex.cluster img {padding-bottom:0.5rem} */

.flex{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center;
justify-content: center; margin:0 -1rem;}
.flex > div {padding: 0 5px; padding-bottom:0; position: relative;}
.flex > .col2 {flex-basis: 50%; max-width: 50%; padding:0 15px;}
.flex > .col3 {flex-basis: 33.33333333%; max-width: 33.33333333%;}
.flex > .col4 {flex-basis: 25%; max-width: 25%;}
.flex img {width:100%; height: auto;}
.flex h3 {margin:0; margin-bottom:1rem; font-size: 1.1rem;}
.flex.cluster h3 {margin-bottom:0;}
.flex.cluster p {margin:0; font-size: 0.75rem; line-height: 1rem; margin-top: 5px;}
.flex a, .list.amazon > div a {text-decoration:none; color:#000; display:block;}
.flex.cluster > div{padding:0.85rem;}

.flex.gallery{margin:0;}
.flex.gallery > div {padding: 0 5px;}

.amzn-ad-container{width:191px; height:325px;}
.content ul li {margin-bottom:0.8rem;}
.grecaptcha-badge {display: none;}

#snippet{background: #f3f3f3;padding: 20px;}
#snippet .title{margin-bottom:15px; background: #fff; padding: 5px 10px; line-height: 34px;}
#snippet .foto{width:300px; padding:0}
#snippet .foto img{width:100%;}
#snippet .resumen {width:calc(100% - 300px); padding:0}
#snippet .resumen .label {width:50%; font-weight:bold; text-align:right; display:inline-block; padding: 0.3em 0.5em;}
#snippet .resumen .data {width:45%; display:inline-block; padding: 0.3em 0.5em;}


#comentarios {padding:10px; border:1px solid silver; margin-top:40px;}
#comentarios p.titulo {font-size:1.2rem; text-decoration:underline;margin-top: 5px;}
#comentarios article{display: flex; display: -webkit-flex; margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px #dbdbdb solid;}
#comentarios article p{margin-bottom: 5px; font-size: 1rem;margin: 0;}
#comentarios article p.title{font-size: 1rem;}
#comentarios article p span.fecha{font-size: 0.8em; color: #8f8f8f; margin-left: 10px;}
#comentarios .avatar, #comentarios .content {float: left;}
#comentarios .avatar{width: 50px; flex-basis: 50px; margin-right: 10px; flex-shrink:0;}
#comentarios .avatar img{width: 100%;}
#comentarios .content{flex-grow:1;}
#comentarios article.sub1 {margin-left: 50px;}
#comentarios article.sub2 {margin-left: 100px;}
#comentarios article.sub3 {margin-left: 150px;}
#comentarios article:last-child {border-bottom: none}
#comentarios a.btn {font-size: 0.8em; padding:1px 5px; margin-top: 10px; display:inline-block;}
#comentarios button.btn {font-size: 0.9em; padding:5px 10px;}
#comentarios form input{font-size: 0.8em;}
#comentarios form label{margin-bottom: 5px; font-weight:normal;}
#comentarios form .form-group{margin-bottom: 5px;}
#comentarios form p {font-size: 1.1em; margin-bottom:0}
.form-content #form-comentario {margin-top: 10px;}

.cluster > div div div {background: #fff; padding: 10px;}
.cluster > div div div span {color: #49a7cc; font-size: 0.9rem; font-weight: 700;}

.amazon span.precio{font-weight: bold; font-size: 1.1rem; padding-top: 5px; display: block; text-align: right;}
.amazon span.comprar{display: block; padding-left: 30px; position: relative; margin-top: 5px;}
.amazon span.comprar::before{background-image: url('../img/ic-cart.svg'); position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: 14px 14px; background-position: 9px center;}
.amazon .oferta::before{content:"oferta"; display: block; position: absolute; left: 15px; top: 30px; padding: 0 10px; background-color: #ff4343; color: #fff; font-size: 0.8rem;}
.list.amazon .oferta::before{top: 15px;}

.cluster.amazon img{width: auto; margin:0 auto; display: block;}
.cluster.amazon p{font-size: 0.90rem; line-height: 1.25rem; margin-bottom: 5px;}
.cluster.amazon > div a, .cluster.amazon > div div, .list.amazon > div {border: 1px solid #dedede; padding: 10px;}
.cluster.amazon del{float: left; font-weight: normal; color: #888; font-size: 0.9rem;}

.list.amazon{position: relative;}
.list.amazon > div{margin-bottom: 10px; padding: 15px;}
.list.amazon > div img{width: 160px; display: block; margin:0 auto; margin-bottom: 10px}
.list.amazon > div .content p{color: #0066c0; font-weight: bold;margin-top: 0;}
.list.amazon > div .content li{margin-bottom: 3px; font-size: 0.9rem;}
.list.amazon > div .footer {text-align: right;}
.list.amazon span.precio{font-size: 1.2rem;}
.list.amazon span.comprar{display: inline-block;}

table {background-color: #fff; border:1px silver solid;}
table td, table th{border: none; padding:10px;}
table th{background-color: #cfb200; color: #fff;}

.d-none {display:none;}

@media (min-width: 720px){
	.list.amazon > div .content{margin-left: 160px; padding-left: 20px;}
	.list.amazon > div img{float: left; width: 160px; margin-bottom: 0;}
}

@media (min-width: 1300px){
	.grafico {margin: 0 -100px;}
}

@media (min-width: 1500px){
	.grafico {margin: 0 -200px;}
}

@media (max-width: 980px){
	.flex{margin:0 -0.5rem;}
}

@media (max-width: 850px){
	.flex.cluster > div{padding:0.45rem;}
}

@media (max-width: 800px){
	#snippet .foto{width:250px; padding:0}
	#snippet .resumen {width:calc(100% - 250px); font-size:0.9rem;}
}

@media (max-width: 768px){
	.flex > .col2, .flex > .col3, .flex > .col4 {flex-basis: 50% !important; max-width: 50% !important;}
}

@media (max-width: 700px){
	#snippet .foto{width:200px; padding:0}
	#snippet .resumen {width:calc(100% - 200px); font-size:0.8rem;}
	#snippet .resumen .label, #snippet .resumen .data {padding: 0.2em 0.4em;}
}

@media (max-width: 600px){
	#snippet .foto{width:100%; padding:0}
	#snippet .resumen {width:100%;}
}

@media (max-width: 576px){
	.grafico {height: 300px;}
	#footer{text-align: left;}
	#footer li {display: block;}
	.flex > .col2, .flex > .col3, .flex > .col4 {flex-basis: 100% !important; max-width: 100% !important;}
}
@media (max-width: 450px){
	.grafico {height: 200px;}
	#snippet .title{text-align:center}
	#rateYo{float:none; margin:0 auto;}
}