* {box-sizing: border-box;font-family: sans-serif;}
body {background-color: #f3f3f3;padding: 0;overflow-x:hidden;margin: 0;}
.container {width: 1280px;margin:0 auto;}
#main {}
.visible-xs {display: none;}

h1,h2,h3,h4 {font-family: 'Crimson Text', serif;color:#333;text-align: center;}
h1 {font-size: 98px;margin: 100px 0 0;font-weight: 500;}
h3 {font-size: 28px;margin: 0 0 40px;font-weight: 500;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}
h4, h5, h6 {margin-top: 10px;margin-bottom: 10px;font-weight: 500;line-height: 1.1;}
.titulo {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;   
}
#filter {
    text-align:center;
    margin: 20px 0 0px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: hsl(0deg 0% 90%);
}
#filter #elegir-autor {
    padding:5px 10px;
    vertical-align:middle;
    margin-right: 20px;
    width: 200px;
    background-color: #e6e6e6;
    border: 1px solid #b3b3b3;
}
#filter a {
    color:#555;
    padding: 15px 13px;
    cursor: pointer;
    text-decoration: none;
    display:inline-block;
    vertical-align: middle;
    font-size: 14px;
}
#filter a:hover {
    background-color:hsl(0 0% 90% / 1);
}
#filter a.on {
    background-color:hsl(0 0% 70% / 1);
    color:#000;
    transition:0.2s;
}
#filter a > span {
    display:block;
    font-size:11px;
    color:#444;
}

.grid {
    margin: 1em auto 0;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}
.item-sizer {width: 370px;}
.gutter-sizer {width: 5%;}
.grid-item {width: 370px;margin: 25px 0;padding:20px;background-color: white;transition:0.2s;box-shadow: 0px 4px 5px #e6eaef;text-align: center;}
.grid-item:HOVER {text-decoration: none;}
.grid-item a {width:100%;display:block;text-decoration:none;color:inherit;}
.grid-item a.enlaceExterno {position:relative;border-bottom:1px solid;color:#333;font-weight: bold;display: inline-block;width: auto;margin: 10px 0 0;background-color: #333;color: white;padding: 5px 7px;border-radius: 3px;}
.grid-item a.enlaceExterno:hover {background-color:#111;}
.grid-item h4 {/* text-align: left; */width: 100%;}
.grid-item img {width:100%;display: block;}
/*.grid-item img:after {
  content: '';
  padding-bottom: var(--paddingBottom);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}*/

#subir {position: fixed;bottom: 100px;right: 4vw;background-color: hsl(0deg 0% 43%);padding: 11px 13px;font-size: 20px;/* width: 50px; *//* height: 50px; */color: white;border-radius: 50px;z-index: 999;cursor: pointer;}
#subir:hover {background-color: hsl(0 0% 29% / 1)}
#subir:active {background-color: hsl(0 0% 55% / 1)}

#comentarios-titulo {position: sticky;bottom: 0;margin: 100px 0 20px;z-index: 999;padding: 20px 0;background-color: hsl(6deg 54% 52%);cursor:pointer;width: 100%;visibility:hidden;opacity:0;transition:0.3s;}
#comentarios-titulo.on {visibility:visible;opacity:1;}
#comentarios-titulo:hover {background-color: hsl(6deg 60% 49%);transition:0.2s;}
#comentarios-titulo h4 {color: white;font-family: sans-serif;text-transform: uppercase;font-size: 15px;letter-spacing: 0.05em;font-weight: bold;transition: 0.2s;}
#comentarios-titulo:hover h4 {letter-spacing: 0.2em;transition: 0.5s;}
#comments-container {position: fixed;bottom: 0;right: 20px;width: 500px;background-color: white;padding: 40px 30px;z-index: 999;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);font-size: 90%;}


footer {display: block;text-align: center;margin: 10em 0 3em;font-family: 'Crimson Text', serif;}
footer a {color:#333;border-bottom: 1px solid #333;text-decoration: none;}
footer a:HOVER {text-decoration: none;color:#333;}

@keyframes fadein {
    from { opacity: 0; }
    30%  { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    30%  { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    30%  { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    30%  { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    30%  { opacity: 0; }
    to   { opacity: 1; }
}

@media (min-width: 1600px){
    #main {width:1600px;}
    .grid-item,.item-sizer {width:350px;}
}

@media (max-width: 768px){
    .container {width: 100%;margin:0;}
    .grid {/* padding-top: 30px; */}
    .visible-xs {display: block;}
    h1 {font-size: 13vw;width: 90%;line-height: 1.1;margin: 0 auto;}
    h3 {font-size: 1.2em;width: 90%;margin: 10px auto;}
    #filter {position: relative;}
    #elegir-autor {margin:25px 0;width: auto;}
    .fluidbox__wrap {text-align: center;}
    .grid-item,.item-sizer {width:43%;margin: 0 0 2%;}
    .gutter-sizer {width: 1%;}
    .grid-item h4 {width: 100%;}
    #subir {padding:10px 11px;}
}