html{
    position: relative;
    top: 100vh;
    opacity: 0;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
    
}
* {
	margin: 0;
	padding: 0;
}
nav ul li{
    list-style: none
}
body {
	font-family: Georgia, serif;
	color: #fff;
	font-size: 14px;
    background: url(../images/images/back_retro.png)0 0 repeat #91693d;
    background-attachment: fixed;
}
.embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
img{
    max-width: 100%
}
video {  
   width:100%; 
   max-width:1000px; 
   height:auto; 
    position: relative
}
.sl-overlay{
    opacity: 0.9!important
}
header{
    background: url(../images/images/granada-hechos-victimizantes.jpg);
    height: 430px;
    opacity: 0.19;
    background-size: cover
}
figure.title{
    display: table;
    margin: -280px auto 0
}
.intro {
    display: table;
    margin: 0 auto;
    min-width: 80%;
    position: relative
}
video.video_content {
    width: 40%;
    margin: 0 2em 0 11em;
    float: left;
}
.intro::before {
    content: url(../images/ppal-video-before.png);
    position: absolute;
    right: -65px;
    top: -70px;
    z-index: 1;
}
.intro::after {
    content: url(../images/ppal-video-after.png);
    position: absolute;
    left: -89px;
    bottom: -57px;
}
.video-content {
    padding: 2em;
}
figure.image_content {
    width: 80%;
    margin: 0 auto;
}
figure.image_content img{
    width: 100%
}
.gallery a, .gallery1 a, .gallery2 a, .gallery3 a, .gallery4 a, .gallery5 a, .gallery6 a, .gallery7 a, .gallery8 a, .gallery9 a, .gallery10 a, .gallery11 a, .gallery12 a, .gallery13 a, .gallery14 a, .gallery15 a, .gallery16 a, .gallery17 a {
    padding: 1em
}

.big-image{
    text-align: center;
    margin: 0 auto;
    display: table;
}
.big-image > img{
    width: 70%!important;
    
}
.info_content{
    display: table;
    height: 360px;    
    border-left: 2px dotted #fff;
    background: url(../images/biggerdot.png) -4px center no-repeat;
}
.info_content img {
    display: table;
    margin: 0 auto;
}
a {
	color: #ffffcc;
	text-decoration: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
    display: table-cell;
    vertical-align: middle
}
	a:hover,
	a.selected {
		color: #ffcc00;;
	}

h1,h2,h4,h5,h6 {
	text-align: center;
	color: #ccc;
	text-shadow: #000 1px 1px 2px;
	margin-bottom: 5px;
}
	h1 {
		font-size: 18px;
	}
	h2 {
		font-size: 14px;
	}
.sociales {
	text-align: center;
	margin-bottom: 20px;
}

	#timeline {
		width: 768px;
		height: auto;
		overflow: hidden;
		margin: 4em auto;
		position: relative;
		background: url('../images/dot.gif') left 95px repeat-x;
	}
		#dates {
			width: 768px;
			height: auto;
			overflow: hidden;
		}
			#dates li {
				list-style: none;
				float: left;
				width: 200px;
				height: 100px;
				font-size: 25px;
				text-align: center;
				background: url('../images/biggerdot.png') center bottom no-repeat;
                display: table
			}
				#dates a {
					line-height: 23px;
					padding-bottom: 10px;
				}
				#dates .selected {
			        font-size: 28px;
				}
		
		#issues {
			width: 768px;
			height: auto;
			overflow: hidden;
		}	
			#issues li {
				width: 768px;
				height: auto;
				list-style: none;
				float: left;
			}
            .gallery img, .gallery1 img, .gallery2 img, .gallery3 img, .gallery4 img, .gallery5 img, .gallery6 img, .gallery7 img, .gallery8 img, .gallery9 img, .gallery10 img, .gallery11 img, .gallery12 img, .gallery13 img, .gallery14 img, .gallery15 img, .gallery16 img, .gallery17 img {
                border: 5px solid rgba(255, 255, 255, 0.28);
            }
				/*#issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				}
				#issues li img {
					float: left;
					margin: 10px 30px 10px 50px;
					background: transparent;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";  
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);    
					zoom: 1;
					-webkit-transition: all 2s ease-in-out;
					-moz-transition: all 2s ease-in-out;
					-o-transition: all 2s ease-in-out;
					-ms-transition: all 2s ease-in-out; 
					transition: all 2s ease-in-out;
					-webkit-transform: scale(0.7,0.7);
					-moz-transform: scale(0.7,0.7);
				    -o-transform: scale(0.7,0.7);
				    -ms-transform: scale(0.7,0.7);
				    transform: scale(0.7,0.7);
				}*/
				#issues li h1 {
                    color: #ffcc00;
                    font-size: 1.5em;
                    text-shadow: #000 1px 1px 2px;
                    width: 60%;
                    margin: 1em auto;
                }
				#issues li p {
                    font-size: 22px;
                    margin-right: 70px;
                    font-weight: normal;
                    line-height: 28px;
                    padding: 0 2em;
                    display: table-cell;
                    vertical-align: middle;
                }
		
		#grad_left,
		#grad_right {
			width: 100px;
			height: 190px;
			position: absolute;
			top: 0;
		}
			#grad_left {
		        left: 0;
		        background: url('../images/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('../images/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				opacity: 0.5
			}
			#next {
				right: 10px;
				background-image: url('../images/next.png');
			}
			#prev {
				left: 10px;
				background-image: url('../images/prev.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}


/*navegacion*/

.cd-stretchy-nav {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 1%;
}
.cd-nav-trigger p{
    position: relative;
    z-index: 1;
    top: 18px;
    left: -60px;
    font-size: 21px;
}
.cd-stretchy-nav .stretchy-nav-bg {
  /* this is the stretching navigation background */
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: #ffffcc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: height 0.2s, box-shadow 0.2s;
  -moz-transition: height 0.2s, box-shadow 0.2s;
  transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
  height: 180px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.cd-nav-trigger {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  white-space: nowrap;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
  /* this is the hamburger icon */
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: #333;
}
.cd-nav-trigger span {
  /* middle line of the hamburger icon */
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
  /* top and bottom lines of the hamburger icon */
  content: '';
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover ~ .stretchy-nav-bg {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.nav-is-visible .cd-nav-trigger span {
  background-color: transparent;
}
.nav-is-visible .cd-nav-trigger span::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cd-stretchy-nav ul {
  position: relative;
  z-index: 2;
  padding: 40px 0 0;
  visibility: hidden;
  -webkit-transition: visibility 0.3s;
  -moz-transition: visibility 0.3s;
  transition: visibility 0.3s;
  text-align: right;
}
.cd-stretchy-nav ul a {
  position: relative;
  display: block;
  height: 40px;
  line-height: 50px;
  padding: 0 calc(1em + 60px) 0 1em;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  transition: color 0.2s;
}
.cd-stretchy-nav ul a::after {
  /* navigation item icons */
  content: '';
  position: absolute;
  height: 30px;
  width: 35px;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(0);
  -moz-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  -o-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
  opacity: 1;
  background: url(../images/images/cd-sprite-1.svg) no-repeat 0 0;
}
.cd-stretchy-nav ul a::before {
  /* line visible next to the active navigation item */
  content: '';
  position: absolute;
  width: 3px;
  height: 16px;
  top: 50%;
  right: 60px;
  -webkit-transform: translateX(3px) translateY(-50%) scaleY(0);
  -moz-transform: translateX(3px) translateY(-50%) scaleY(0);
  -ms-transform: translateX(3px) translateY(-50%) scaleY(0);
  -o-transform: translateX(3px) translateY(-50%) scaleY(0);
  transform: translateX(3px) translateY(-50%) scaleY(0);
  background-color: #432638;
}
.cd-stretchy-nav ul li:first-of-type a::after {
  /* change custom icon using image sprites */
  background-position: 0px 0;
}
.cd-stretchy-nav ul li:nth-of-type(2) a::after {
  background-position: -40px 0;
}
.cd-stretchy-nav ul li:nth-of-type(3) a::after {
    background-position: -72px 0;
}

.cd-stretchy-nav ul span {
  opacity: 0;
  -webkit-transform: translateX(-25px);
  -moz-transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -o-transform: translateX(-25px);
  transform: translateX(-25px);
}

.cd-stretchy-nav.nav-is-visible ul {
  visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul a::after {
  /* navigation item icons */
  -webkit-transform: translateY(-50%) scale(1);
  -moz-transform: translateY(-50%) scale(1);
  -ms-transform: translateY(-50%) scale(1);
  -o-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
  -webkit-animation: scaleIn 0.15s backwards;
  -moz-animation: scaleIn 0.15s backwards;
  animation: scaleIn 0.15s backwards;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul a.active {
  color: #ffffff;
}
.cd-stretchy-nav.nav-is-visible ul a.active::after {
  opacity: 1;
}
.cd-stretchy-nav.nav-is-visible ul a:hover::before {
  -webkit-transform: translateX(3px) translateY(-50%) scaleY(1);
  -moz-transform: translateX(3px) translateY(-50%) scaleY(1);
  -ms-transform: translateX(3px) translateY(-50%) scaleY(1);
  -o-transform: translateX(3px) translateY(-50%) scaleY(1);
  transform: translateX(3px) translateY(-50%) scaleY(1);
  -webkit-transition: -webkit-transform 0.15s 0.3s;
  -moz-transition: -moz-transform 0.15s 0.1s;
  transition: transform 0.15s 0.1s;
}
.cd-stretchy-nav.nav-is-visible ul span {
  color: #fff;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: slideIn 0.15s backwards;
  -moz-animation: slideIn 0.15s backwards;
  animation: slideIn 0.15s backwards;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover {
  color: #ffffff;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after {
  opacity: 1;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span {
  -webkit-transform: translateX(-5px);
  -moz-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  transform: translateX(-5px);
}
.cd-stretchy-nav.nav-is-visible ul li{
    list-style-type: none
}
.cd-stretchy-nav.nav-is-visible ul li a{
    text-decoration: none
}
.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
@media only screen and (max-width: 640px) {
    #timeline, #dates, #issues, #issues li {
		width: 640px;
		
	} 
}
@media only screen and (min-width: 1024px) {
    #timeline, #dates, #issues, #issues li {
		width: 1024px;
		
	}
    .video-content {
        padding: 5em;
    }  
    
}
@media only screen and (min-width: 1280px) {
    #timeline, #dates, #issues, #issues li {
		width: 1280px;
		
	}  
    figure.image_content, .video-content {
        width: 40%!important;
        margin: 0 2em 0 11em;
        float: left;
    }
    .video-content{
        padding: 1em 0;
    }
    
}
@media only screen and (min-width: 1366px) {
    #timeline, #dates, #issues, #issues li {
		width: 1366px;
		
	} 
    
}
@media only screen and (min-width: 1600px) {
    #timeline, #dates, #issues, #issues li {
		width: 1600px;
		
	} 
    
}