@keyframes buzz {
  50% {
    transform: translate(3px); }
  100% {
    transform: translate(-3px); } }
@keyframes spin {
  from {
    transform: rotateZ(0); }
  to {
    transform: rotateZ(1turn); } }
@keyframes shake {
  0%, 20%, 100% {
    transform: translateX(0); }
  40%, 80% {
    transform: translateX(-2px); }
  60% {
    transform: translateX(2px); } }
* {
  box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html {
  height: 100%; }

body {
  min-height: 100%;
  font-size:1em;
  background-color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  color: #F7F7F6;
  display: flex;
  flex-direction: column; }
  body.page--detail .site__title {
    margin-top: 0; }

h1, h2, h3, h4, h5, .title {
  font-family: 'Rufina', serif; }

a {
  text-decoration: none;
  color: #5D6BCF;
  font-weight: 700; }
  a:hover {
    text-decoration: underline; }

footer {
  background-color: #f4f4f4;
  padding:2em;
  font-size: 1rem;
  font-weight: 300; }
  
 footer.internarfooter{
	 float:left;
 }
	
		footer #logos{
			width:50%;
			margin:0 auto;
			text-align:center;
		}
		
		 footer.internarfooter #logos{
			width:90%;
		}
		
				footer #logos img{
					max-width:100%;
				}
				
				footer p{
					color:#333;
				}

.hidden {
  opacity: 0; }

nav {
  position: relative;
  background: #F7F7F6;
  box-shadow: 5px 2px 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex: 1;
  z-index:30;
  }
  
  nav > * {
    width: 50%; }

.nav__logo {
  display: block;
  transform: translate3d(20px, 40px, 0); }

.nav__list {
  list-style: none;
  text-align: right;
  display:flex;
  margin-top:6em;
  margin-left:1em; }

.nav__item {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.4rem;
  color: #141720;
  letter-spacing: 1.45px;
  text-transform: uppercase;
  margin:2em 0 0 0; }
  .nav__item a {
    color: #141720;
    font-weight: 500; }
    .nav__item a:hover {
      text-decoration: none;
      color: #5D6BCF; }

.nav__social {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  font-size: 1rem;
  line-height: .8; }

.nav_social__item {
  color: #141720;
  display: block; }
  .nav_social__item:hover {
    animation: shake .8s ease-in-out; }

.site {
  padding: 2rem 3rem; }

.site__title {
  font-size: 2.5em;
  margin-bottom: 1rem;
  position: relative;
  color:#333;
   }
  .site__title.site__title--separator:after {
    position: absolute;
    border-bottom: 3px solid #F79E77;
    width: 40%;
    content: '';
    left: 0;
    bottom: -1.3rem; }

.site__description {
  color: #333;
  font-size: 1.2rem;
  font-weight: 300;
  padding-top: 1rem;
  z-index: 1; }

.site__label {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 1px;
  color: #c1bfbf; }

.site__secondary_title {
  color: black;
  font-size: 2.8em;
  font-family: 'Source Sans Pro', sans-serif; }

.site__navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  z-index: 1;
  float:left;
  width:100%;
   }
  .site__navigation:hover .site__navigation_items {
    text-decoration: none; }
  .site__navigation * {
    transition: .5s ease-out; }
  .site__navigation .site__navigation_items {
    display: flex;
    flex-direction: column;
    justify-content: center;
	min-width:15em;
    padding: 1rem; }
    .site__navigation .site__navigation_items label {
      text-transform: uppercase;
      letter-spacing: 1px; }
    .site__navigation .site__navigation_items h4 {
      margin: 0;
      font-size: 1.2rem;
      line-height: 1.5rem;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 800;
      color: white; }
  .site__navigation .site__navigation_items--right {
    background-color: #F79E77;
    padding-left: 5rem;
    text-align: right; }
    .site__navigation .site__navigation_items--right label {
      color: #f15917; }
    .site__navigation .site__navigation_items--right:hover {
      background-color: #f15917; }
      .site__navigation .site__navigation_items--right:hover label {
        color: #692406; }
  .site__navigation .site__navigation_items--left {
    background-color: #7CCDB9;
    padding-right: 5rem; }
    .site__navigation .site__navigation_items--left label {
      color: #3fa48b; }
    .site__navigation .site__navigation_items--left:hover {
      background-color: #3fa48b; }
      .site__navigation .site__navigation_items--left:hover label {
        color: #14362d; }

#site__bg {
  display: none; }

.episode {
  position: relative;
  display: flex; }
  .episode:nth-child(1) .episode__image {
    background-image: url(../images/photos/edited/desaparicion.jpg); }
  .episode:nth-child(2) .episode__image {
    background-image: url(../images/photos/edited/enfoque.jpg); }
  .episode:nth-child(3) .episode__image {
    background-image: url(../images/photos/edited/genero.jpg); }
  .episode:nth-child(4) .episode__image {
    background-image: url(../images/photos/edited/justicia.jpg); }
	.episode:nth-child(5) .episode__image {
	background-image: url(../images/photos/edited/paramilitarismo.jpg); }
	.episode:nth-child(6) .episode__image {
	background-image: url(../images/photos/edited/regiones.jpg); }
	.episode:nth-child(7) .episode__image {
	background-image: url(../images/photos/edited/sujetos.jpg); }
	.episode:nth-child(8) .episode__image {
	background-image: url(../images/photos/edited/tierras.jpg); }
	.episode:nth-child(9) .episode__image {
	background-image: url(../images/photos/edited/memoria-camino.jpg); }
	.episode:nth-child(10) .episode__image {
	background-image: url(../images/photos/edited/contribucion.jpg); }
	.episode:nth-child(11) .episode__image {
	background-image: url(../images/photos/edited/4.png); }
	.episode:nth-child(12) .episode__image {
	background-image: url(../images/photos/edited/4.png); }
  .episode:hover .episode__detail:before {
    width: 100%; }
  .episode:hover:nth-child(1) .episode__image {
    background-image: url(../images/photos/original/desaparicion.jpg); }
  .episode:hover:nth-child(2) .episode__image {
    background-image: url(../images/photos/original/enfoque.jpg); }
  .episode:hover:nth-child(3) .episode__image {
    background-image: url(../images/photos/original/genero.jpg); }
  .episode:hover:nth-child(4) .episode__image {
    background-image: url(../images/photos/original/justicia.jpg); }
	 .episode:hover:nth-child(5) .episode__image {
    background-image: url(../images/photos/original/paramilitarismo.jpg); }
	 .episode:hover:nth-child(6) .episode__image {
    background-image: url(../images/photos/original/regiones.jpg); }
	 .episode:hover:nth-child(7) .episode__image {
    background-image: url(../images/photos/original/sujetos.jpg); }
	 .episode:hover:nth-child(8) .episode__image {
    background-image: url(../images/photos/original/tierras.jpg); }
	 .episode:hover:nth-child(9) .episode__image {
    background-image: url(../images/photos/original/memoria-camino.jpg); }
	 .episode:hover:nth-child(10) .episode__image {
    background-image: url(../images/photos/original/contribucion.jpg); }
	 .episode:hover:nth-child(11) .episode__image {
    background-image: url(../images/photos/original/justicia.jpg); }
	 .episode:hover:nth-child(12) .episode__image {
    background-image: url(../images/photos/original/justicia.jpg); }

.episode__number {
  display: none;
  position: absolute;
  top: -2rem;
  left: -1.5rem;
  z-index: 1;
  font-size: 3rem;
  margin: 0;
  color: #5D6BCF; }

.episode__image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  transition: all .1s ease-in-out;
  display: block; }

.episode__media {
  position: relative;
  width: 30%;
  transition: .2s ease-out; }
  .episode__media:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    background-image: url("../images/pixel-corner.svg");
    width: 50px;
    height: 50px;
    background-size: cover; }
  .episode__media:hover {
    transform-origin: 0 50%;
    transform: perspective(1000px) rotateY(-10deg) translate3d(-3px, 0, 0); }

.episode__detail {
  width: 70%;
  padding: 0;
  position: relative;
  transition: width .3s ease-in-out; }
  .episode__detail:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    content: '';
    background-color: #292C37;
    z-index: -1; }

.episode__title h4 {
  font-size: 1.6rem;
  margin: 1rem 0 .3rem 0;
  font-family: 'Source Sans Pro', sans-serif;
  color: #F7F7F6; }
  .episode__title h4:hover {
    color: #5D6BCF; }

.episode__description {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 300;
  color: #c1bfbf; }

.play-pause-btn {
  height: 100%;
  width: 60px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #141720;
  outline: none; }
  .play-pause-btn.play {
    background-image: url(../images/play.svg); }
  .play-pause-btn.pause {
    background-image: url("../images/pause.svg"); }

.audio-player {
  position: fixed;
  background-color: #292C37;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 300px;
  height: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .audio-player .play-pause-btn {
    display: none;
    cursor: pointer; }
  .audio-player .spinner {
    margin-left: 1.4rem;
    width: 18px;
    height: 18px;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);
    background-size: cover;
    background-repeat: no-repeat;
    animation: spin 0.4s linear infinite; }
  .audio-player .slider {
    flex-grow: 1;
    background-color: #F7F7F6;
    cursor: pointer;
    position: relative; }
    .audio-player .slider .progress {
      background-color: #7CCDB9;
      border-radius: inherit;
      position: absolute;
      pointer-events: none; }
      .audio-player .slider .progress .pin {
        height: 16px;
        width: 16px;
        border-radius: 8px;
        background-color: #7CCDB9;
        position: absolute;
        pointer-events: all;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32); }
  .audio-player .controls {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #55606E;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    margin-left: 24px;
    margin-right: 24px; }
    .audio-player .controls .slider {
      margin-left: 16px;
      margin-right: 16px;
      border-radius: 2px;
      height: 4px; }
      .audio-player .controls .slider .progress {
        width: 0;
        height: 100%; }
        .audio-player .controls .slider .progress .pin {
          right: -8px;
          top: -6px; }
    .audio-player .controls span {
      cursor: default; }

/* mobile first*/
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
  .page--detail .site {
    padding-bottom: 5rem;
    padding-top: 5rem; }

  .left .site__title.site__title--separator:after {
    display: none; }

  .right .episode__image {
    width: 100px;
    float: left;
    margin: 1.5rem 1rem 0 0;
    border-radius: 2px; }
  .right .playBtn {
    display: none; } }
/* Extra Small Devices, Phones */
/* Small Devices, Tablets */

  /* main page */
  body {
    position: relative; }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    flex-direction: column;
    width: 60px;
    transition: .5s; }

  footer {
    padding-left: 110px;
    margin-bottom: -1rem; }

  .main {
    display: flex;
    padding-left: 60px; }

  #site__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: block; }

  .site {
    padding-top:6em;
    padding-left:4em;
    flex: 1; }

  /* nav */
  .nav__list {
   transform: rotate3d(0,0,1,180deg);
   writing-mode: vertical-rl;}

  .nav__item {
    font-size: .8rem;
    letter-spacing: 2px; }
    .nav__item a {
      font-weight: 600; }

  .nav__social {
    display: block; }

  /* episodes */
  .episodes {
    display: flex;
    flex-wrap: wrap;
    padding:5em 4% 2%;
    max-width:60%;
	background-color:#141720;
	 }

  .episode {
    flex-direction: column;
    max-width:30.6%;
    margin-right:4%;
    margin-bottom: 3rem; }
	
	.episode:nth-child(3), .episode:nth-child(6), .episode:nth-child(9), .episode:nth-child(12), .episode:nth-child(15){
		margin-right:0;
	}
	
    .episode:hover .episode__detail:before {
      display: none; }

  .episode__number {
    display: block; }

  .episode__media {
    width: 100%;
    height: 300px;
    max-width: 100%; }

  .episode__detail {
    width: 100%; }

  .episode__description {
    font-size: 1rem;
    font-weight: 300; }

  /* page detail */
  .page--detail {
    flex-direction: row; }
    .page--detail .site {
      display: flex;
      padding: 0 0 0 60px; }

  .left,
  .right {}

  .left {
    padding-left: 5rem;
    padding-top: 5rem;
    display: flex;
    flex-direction: column; }
    .left .site__title.site__title--separator:after {
      display: block;
      width: 100px; }
    .left .episode__date {
      padding: 1rem 0 2rem 0;
      color: #5D6BCF;
      font-weight: 500;
      font-size: 1rem; }
	  
	 

  .right {
    display: flex;
    flex-direction: column;
    background-color: #F7F7F6;
    position: relative;
	width:70%;
	 }
    .right .episode__image {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: .1;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      width: 100%;
      margin: 0;
      float: none;
      object-fit: cover; }
    .right .site__description {
      color: #1C1F2A;
      font-weight: 500;
      font-size: 1rem;
      margin: 0 5rem auto 5rem; }
    .right .site__playbar {
      margin: 5rem 3rem 0 3rem; }
    .right .site__navigation {
      margin: 2rem 0; }

  .site__secondary_title {
    display: block; }

  /* audio player */
  .site__playbar {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); }

  .audio-player {
    position: inherit;
    background-color: white;
    margin-right: 5rem;
    border-radius: 4px; }

  .right .site__description {
    column-count: 1; } 

/*# sourceMappingURL=dropcast.css.map */

#contenedor-izq-der{
	float:left;
	width:100%;
	padding-left:4em;
}

#izquierda{
	position:fixed;
	width:40%;
	height:100vh;
	top:0;
	left:3em;
	padding:10em 0 4em 0;
}

		.portada1, .portada2, .portada3, .portada4, .portada5, .portada6, .portada7, .portada8, .portada9, .portada10, .portada11, .portada12{
			 background-size:cover;
		 }
		 
		 .portada1{
			 background-image:url(../images/balances/desaparicion-p.jpg);
		 }
		 
		 .portada2{
			 background-image:url(../images/balances/enfoque-p.jpg);
		 }
		 
		 .portada3{
			 background-image:url(../images/balances/genero-p.jpg);
		 }
		 
		 .portada4{
			 background-image:url(../images/balances/justicia-p.jpg);
		 }
		 
		 .portada5{
			 background-image:url(../images/balances/paramilitarismo-p.jpg);
		 }
		 
		 .portada6{
			 background-image:url(../images/balances/regiones-p.jpg);
		 }
		 
		 .portada7{
			 background-image:url(../images/balances/sujetos-p.jpg);
		 }
		 
		 .portada8{
			 background-image:url(../images/balances/tierras-p.jpg);
		 }
		 
		 .portada9{
			 background-image:url(../images/balances/memoria-camino-p.jpg);
		 }
		 
		 .portada10{
			 background-image:url(../images/balances/contribucion-p.jpg);
		 }
		 
		 .portada11{
			 background-image:url(../images/balances/justicia-p.jpg);
		 }
		 
		 .portada12{
			 background-image:url(../images/balances/justicia-p.jpg);
		 }
		 
		 #izquierda .titulo{
			 background-color:rgba(0,0,0,0.6);
			 position:absolute;
			 bottom:8em;
			 padding:2em 2em 3em 4em;
			 width:100%;
		 }
		 
		 #izquierda .descarga{
			 background-color:rgba(93,107,207,0.6);
			 position:absolute;
			 bottom:4em;
			 right:0;
			 padding:2em;
			 text-align:center;
		 }
		 
		 #izquierda .descarga a{
			 color:#fff;
		 }
		 
		 #izquierda .descarga a:after{
			 content:'+';
			 margin-left:0.5em;
		 }
		 
		 #izquierda h1{
			 color:#fff;
		 }
		 
		 #izquierda h1 span{
			 display:inline-block;
			 font-size:0.6em;
		 }

#derecha{
	float:right;
	width:59.5%;
}

		#contenedor-texto{
			margin:0 auto;
			max-width:650px;
			padding:2em 4em;
			width:100%;
			color:#333;
		}
		
				#img-1{
					float:left;
					width:100%;
					margin-bottom:1em;
				}
				
						#img-1 span.piefoto{
							float:right;
							width:70%;
							font-size:0.8em;
							margin:0.5em 0;
						}
						
				#destacado{
					float:right;
					width:60%;
					margin:0 -5em 1em 1em;
					padding:2em;
					font-family: 'Rufina', serif;
					font-size:1.2em;
					color:#b2792d;
				}
				
				#destacado-2{
					float:right;
					width:100%;
					padding:1em;
					font-family: 'Rufina', serif;
					font-size:1.2em;
					color:#b2792d;
				}
				
						#destacado-2 .pie-foto{
							font-family: 'Source Sans Pro', sans-serif;
							font-size:0.8em;
							color:#333;
						}
		
				#contenedor-texto img{
					max-width:100%;
				}
		
				#contenedor-texto p{
					font-size:1.2em;
					font-weight:300;
				}
				
				#contenedor-texto p.site__description{
					font-size:1.3em;
					font-weight:bold;
				}
				
				#links{
					float:left;
					width:100%;
					margin:1em 0 3em;
					border-top:1px dashed #333;
					border-bottom:1px dashed #333;
					padding:1em 0;
				}