header{
background-color: #9596C1;
}
.shade{
/*text-shadow: 0 0 7px #FFF;*/
}
h2.titulo{
font-size: 55px !important;
line-height: 60px;
margin-top:100px;
font-weight: 700;

}
h3.titulo{
font-size: 18px;
margin-top: 10px;
}
.fixindex{
margin-top: 450px;
}
.fixindex, div.titulo{
position: relative;
z-index: 100;
}
div.titulo.gral{
margin-top: 70px;
display: flex;
justify-content: flex-end;
}
#scene-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 800px;
z-index: 1;
overflow: hidden;
}
#scene{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 800px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-bottom-style: solid;
border-bottom-color: #9596C1;
border-bottom-width: 7px;
}

#scene li:first-child{
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.layer{
width: 100%;
height: 100%;
}
.layer1 img{
position: absolute;
bottom: -20px;
left: -40px;
}
.layer2 img{
position: absolute;
bottom: -30px;
right: -75px;
}
.layer3 img{
position: absolute;
bottom: -30px;
right: 200px;
}
.pie-lamina{
/*margin-top: 540px;*/
text-align: center;
color: #9A9A9A;
font-size: 16px;
}
.historia{
font-size: 16px;
margin-left: auto;
margin-right: auto;
}
.historia p{
line-height: 28px;
max-width: 704px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.historia img.capital{
margin-right: 20px;
}
.galeria{
text-align: center;
}
.galeria div{
margin-bottom: 30px;
}
.galeria div:nth-child(odd){
text-align: right;
}
.galeria div:nth-child(even){
text-align: left;
}
#mapa{
position: relative;
margin-left: auto;
margin-right: auto;
}
.piefoto{
color:#333;
font-size: 14px;
}
#mapa .pin{
position: absolute;
transform: scale(0);
}
#bogota{
left:331px;
top:283px;
}
#cucuta{
top:74px;
left:440px;
}
#bucara{
top:153px;
left:400px;
}
#socorro{
top:200px;
left:380px;
}
#bucara{
top:153px;
left:400px;
}
#medellin{
top:187px;
left:195px;
}
#cali{
top:396px;
left:170px;
}
.extr-lamina{
display: inline-block;
position: relative;
max-width: 704px;
margin-bottom: 20px;
}
.extr-lamina > img{
position: relative;
z-index: 500;
}
.firma-autor{
color: #9596C1;
font-style: italic;
font-size: 18px;
}
.tags, .tags li{
list-style: none;
padding: 0;
margin: 0;
}
.tags{
text-align: center;
margin-bottom: 60px;
}
.tags li:first-child{
background-image: url('../images/ondas.png');
background-position: top left;
background-repeat: no-repeat;
}
.tags li{
display: inline-block;
padding-top: 5px;
margin-right: 20px;
font-size: 10px;
}
.tags li:last-child{
margin-right: 0px;
}
.linea{
max-width: 695px;
margin:20px auto;
border-bottom: 1px solid #A2A2A2;
}
.cita{
font-size: 21px;
color: #4168B5;
padding-left: 50px;
margin: 30px 0px;
}
.comillas{
margin-left: -13px;
}
div.titulo > div{
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -ms-animation-duration: 3s;
    animation-duration: 3s;
    -moz-animation-delay: 500ms;
  -webkit-animation-delay: 500ms;
  -ms-animation-delay: 500ms;
  animation-delay: 500ms;
}
.layer1 img {
  -moz-animation-delay: 100ms;
  -webkit-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  animation-delay: 100ms;
  /*-vendor-animation-iteration-count: infinite;*/
}

.layer2 img {
  -moz-animation-delay: 200ms;
  -webkit-animation-delay: 200ms;
  -ms-animation-delay: 200ms;
  animation-delay: 200ms;
  /*-vendor-animation-iteration-count: infinite;*/
}
.layer3 img {
  -moz-animation-delay: 300ms;
  -webkit-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  animation-delay: 300ms;
  /*-vendor-animation-iteration-count: infinite;*/
}

.dotnav{
position: absolute;
z-index: 11000;
right: 50px;
bottom: 20px;
}

.dotnav ul, .dotnav li{
list-style: none;
margin: 0;
padding: 0;
}
.dotnav li a{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #FFF;
border-radius: 15px;
}
.dotnav li a.activo{
background-color: #9596C1;
}
.dotnav li{
display: inline-block;
margin-right: 5px;
}
.dotnav li:last-child{
margin-right: 0px;
}
.flechas{
position: absolute;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.flechas div{
position: absolute;
}
.flechas .left{
left: 10px;
/*top:calc(50% - 100px);*/
top:300px;
}
.flechas .right{
right: 10px;
/*top:calc(50% - 100px);*/
top: 300px;
}
.flechas .down{
left: 50%;
margin-left: -25px;
bottom: 70px;
}

@keyframes flechas{
    0% {background-position: 20px 16px;}
    100% {background-position: 20px 24px;}
}

.flechas .down a{
display: block;
width: 50px;
height: 50px;
background-color: rgba(149, 150, 193, .6);
background-image: url('../images/down-white-arrow.png');
background-repeat: no-repeat;
background-position: 20px 18px;
-moz-animation: flechas 800ms linear infinite;
-webkit-animation: flechas 800ms linear infinite;
-ms-animation: flechas 800ms linear infinite;
-o-animation: flechas 800ms linear infinite;
animation: flechas 800ms linear infinite;
}
.galeria1{
max-width: 730px;
margin: auto;
}
.galeria1 a{
display: inline-block;
margin-right: 2px;
margin-bottom: 15px;
}
.galeria1 a:nth-child(4), .galeria1 a:nth-child(8){
margin-right: 0px;
}
#cboxOverlay{
background: rgba(0, 0, 0, 1) !important;
}
.cboxIframe, #cboxLoadedContent, #cboxContent{
background: none !important;
}
#cboxClose{
background: url('../images/plus-x-info.png') !important;
width: 50px !important;
height: 50px !important;
background-position: 0px -50px !important;
}
.seleccion{
font-size: 16px;
color: #4168B5;
line-height: 32px;
width: 704px;
margin-left: auto;
margin-right: auto;
background-image: url('../media/historias/lineas-seleccion.png');
background-position: top left;
background-repeat: repeat-y;
padding-left: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.gal > div{
display: flex;
justify-content: center;
margin-bottom: 40px;
}


.gal a{
display: inline-block;
}
.blue, a.blue{
color: #4168B5 !important;
text-decoration: underline;
}

.blue:hover, a.blue:hover{
text-decoration: none;
}