/* -- Sticky footer styles -- */

/* The html and body elements cannot have any padding or margin. */
html,
body {
  height: 100%;
}

body {
  background-color: #3c3b4d;
}

/* Wrapper for page content to push down footer */
#wrap {
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
  min-height: 100%;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}

#footer {
  background-color: #f5f5f5;
}

.container {
  padding-left: 0;
  padding-right: 0;
  width: auto;
}

.section-white {
  margin-top: 44px;
}

.thumbnail {
  border: none;
  padding: 0;
  margin-bottom: 0;
}

/* --------------------------------------*/
.ribbon {
  position: absolute;
  left: 10px; top: 5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #BD2C08 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #BD2C08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #BD2C08;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #BD2C08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #BD2C08;
}
/*------------------------------------------*/



.container .credit {
  margin: 20px 0;
}

/* -- HEADER -- */
.navbar {
  border-width: 0;
  margin-bottom: 0;
  min-height: 44px;
}

.container.nav-format {
  padding: 0;
}

.jumbotron {
  background:#428bca;
  color:#fff;
  padding:20px 0;
}

.seccion-link {
  padding: 6px 20px 4px 20px;
}

.secciones {
  margin: 0;
}

/* -- POST -- */
.main {
  margin: 20px 0;
}

.post {
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.post .post-title a {
  color: #333;
}

.post .thumb {
  margin-right: 10px;
  width: 40%;
}

.post .thumb img {
  width: 100%;
}

.post .contenedor-botones {
  width: 100%;
}

.contenedor {
  padding-left: 0;
  padding-right: 0;
}

.nav {
  align-items: center;
  background: #323344;
  display: flex;
  min-height: 44px;
}

.nav-pills>li+li {
  margin-left: 0;
}

.nav-pills>li>a {
  color: #666a82;
}

.nav-pills>li>a:hover {
  background-color: #323344;
}

.nav-pills>li.active>a {
  background-color: #323344;
  border-radius: 0;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
  background-color: #323344;
}

.button-view {
  background-color: #3b3c4f;
  padding: 5px 10px;
}

@font-face {
  font-family: 'SFProDisplay-Bold';
  src: url('../fonts/SF-Pro-Display-Bold.otf')
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
  and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
  and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px) {
  
  /* Styles */
  .nav li a, .btn {
    border-color: #3b3c4f;
    font: 13px 'SFProDisplay-Bold';
    padding: 5px 15px;
  }

  .btn:hover {
    background-color: #3b3c4f;
    border-color: #3b3c4f;
  }

  .btn {
    border-radius: 25px;
    margin: 248px 15px 0 0 !important;
  }

  .thumbnail {
    border-radius: 15px;
    height: 285px;
  }

  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .cover-wrapper {
    padding-bottom: 10px;
  }

  .button-view {
    padding: 5px 10px;
  }
}

/* iPads (landscape) ----------- */
@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/
@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation : portrait)
  and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
  and (min-width : 1224px) {

  /* Styles */
  .nav li a, .btn {
    border-color: #3b3c4f;
    font: 13px 'SFProDisplay-Bold';
    padding: 5px 15px;
  }

  .btn:hover {
    background-color: #3b3c4f;
    border-color: #3b3c4f;
  }

  .btn {
    border-radius: 25px;
    margin: 248px 15px 0 0 !important;
  }

  .thumbnail {
    border-radius: 15px;
    height: 285px;
  }

  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .cover-wrapper {
    padding-bottom: 10px;
  }

  .button-view {
    padding: 5px 10px;
  }
}

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

  /* Styles */
  .thumbnail {
    border-radius: 15px;
    height: 285px;
  }

  .nav li a, .btn {
    border-color: #3b3c4f;
    font: 13px 'SFProDisplay-Bold';
    padding: 5px 15px;
  }

  .btn:hover {
    background-color: #3b3c4f;
    border-color: #3b3c4f;
  }

  .btn {
    border-radius: 25px;
    margin: 248px 15px 0 0 !important;
  }

  .button-view {
    padding: 5px 10px;
  }
}

/* Large screens ----------- */
@media only screen
  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px)
  and (orientation : portrait)
  and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 568px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .button-view {
    color: #fff;
  }

  .btn {
    border-radius: 25px;
    margin: 155px 15px 0 0 !important;
  }

  .thumbnail {
    border-radius: 15px;
    height:192px;
  }

  .tapa .cover-wrapper {
    padding-bottom: 10px;
  }

  .col-xs-12 {
    width: 50%;
  }
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 568px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .button-view {
    color: #fff;
  }

  .button-view:hover {
    background-color: #bB3c4f;
    border-color: #3b3c4f;
  }

  .btn {
    border-radius: 25px;
    margin: 285px 15px 0 0 !important;
  }

  .thumbnail {
    border-radius: 15px;
    height: 320px;
  }

  .tapa .cover-wrapper {
    padding: 10px 20px;
  }
}

/* iPhone 6, 7, 8 ----------- */
@media only screen
  and (min-device-height: 375px)
  and (max-device-width: 667px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 195px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
  }

  .thumbnail {
    border-radius: 15px;
    height: 230px;
  }

  .col-xs-12 {
    width: 50%;
  }

  .tapa .cover-wrapper {
    padding-bottom: 10px;
  }
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-height: 667px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 375px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
  }

  .thumbnail {
    border-radius: 15px;
    height:412px;
  }

  .tapa .cover-wrapper {
    padding: 10px 20px;
  }
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen
  and (device-width: 414px)
  and (device-height: 736px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 173px 5px 0 0 !important;
  }

  .button-view {
    color: #fff;
  }

  .thumbnail {
    border-radius: 15px;
    height: 230px;
  }

  .col-xs-12 {
    width: 50%;
  }
}

@media only screen
  and (device-width: 414px)
  and (device-height: 736px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2) {

  /* Styles */
  .nav li a, .btn {
    font-size: 13px;
    padding: 5px 9px;
  }

  .btn {
    margin: 148px 5px 0 0 !important;
  }

  .thumbnail {
    border-radius: 15px;
    height: 412px;
  }

  .button-view {
    border-radius: 25px;
    margin: 375px 15px 0 0 !important;
  }
}

/* iPhone X ----------- */
@media only screen
  and (min-device-width: 375px)
  and (max-device-height: 812px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 3) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 195px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
    padding: 5px 10px;
  }

  .thumbnail {
    border-radius: 15px;
    height: 230px;
  }

  .col-xs-12 {
    width: 50%;
  }

  .tapa .cover-wrapper {
    padding-bottom: 10px;
  }
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-height: 812px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 3) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 375px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
    padding: 5px 10px;
  }

  .thumbnail {
    border-radius: 15px;
    height: 412px;
  }

  .tapa .cover-wrapper {
    padding: 10px 20px;
  }
}

/* iPhone XS Max, XR ----------- */
@media only screen
  and (min-device-width: 414px)
  and (max-device-height: 896px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}

@media only screen
  and (min-device-width: 414px)
  and (max-device-height: 896px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 640px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 640px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2) {
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 640px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-height: 640px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 3) {
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen
  and (min-device-width: 360px)
  and (max-device-height: 640px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2.5) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 195px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
    padding: 5px 10px;
  }

  .thumbnail {
    border-radius: 15px;
    height: 230px;
  }

  .col-xs-12 {
    width: 50%;
  }

  .tapa .cover-wrapper {
    padding-bottom: 10px;
  }
}

@media only screen
  and (min-device-width: 640px)
  and (max-device-height: 360px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2.5) {

  /* Styles */
  .nav li a, .btn {
    border-color: #323344;
    color: #888aaa;
    font: 13px 'SFProDisplay-Bold';
    letter-spacing: 0;
    padding: 5px 9px;
  }

  .btn {
    border-radius: 25px;
    margin: 375px 15px 0 0 !important;
  }

  .button-view {
    color: #fff;
    padding: 5px 10px;
  }

  .thumbnail {
    border-radius: 15px;
    height: 412px;
  }

  .tapa .cover-wrapper {
    padding: 10px 20px;
  }
}

/* Pixel 3A ----------- */
@media only screen
  and (min-device-width: 411px)
  and (max-device-height: 846px)
  and (orientation : landscape)
  and (-webkit-device-pixel-ratio: 2.625) {
/* Styles */
  .thumbnail {
    border-radius: 15px;
    height: 285px;
  }
}

/* Iphone XS --------------*/
@media only screen and (min-width: 812px) and (orientation: landscape) {
  .ribbon {
    left: 10px; top: 5px;
  }
}
@media only screen and (min-width: 375px) and (orientation: portrait) {
  .ribbon {
    left: 15px; top: 15px;
  }
}
/* End Iphone XS --------------*/

@media only screen
  and (min-device-width: 411px)
  and (max-device-height: 846px)
  and (orientation : portrait)
  and (-webkit-device-pixel-ratio: 2.625) {
/* Styles */
  .thumbnail {
    border-radius: 15px;
    height: 285px;
  }
}

@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }

  .nav {
    /*background: #000;*/
    background: rgb(18, 18, 18);
  }

  .nav-pills>li.active>a,
  .nav-pills>li.active>a:hover,
  .nav-pills>li.active>a:focus {
    /*background: #000;*/
    background: rgb(18, 18, 18);
  }
 
  .nav-pills>li>a {
    color: rgb(153,153,153);
  }
 
  .nav-pills>li>a:hover {
    background-color: #000;
  }

  .button-view {
    background-color: #000;
  }

  @media only screen and (min-width: 1224px) {

    .btn:hover {
      background-color: #000;
      border-color: #000;
    }

    .nav li a, .btn {
      border-color: #000;
    }
  }

}