section.intro{z-index: 9}
section.intro .cover{max-height: unset;height: 100vh;margin-top: 0;margin-bottom: 5px}
section.intro .cover .curtain #flag{position:absolute;top:50px;left:3%;width:250px}
section.intro .cover .curtain{position:absolute;top:0px;left:0;width:100%;height:0;background:rgba(255, 0, 0, 0.7);overflow: hidden}
section.intro .cover .curtain .handle{position:absolute;bottom:0px;left:0;width:100%;height:40px;background:linear-gradient(#960000, red);}
section.intro .cover #pull{position:absolute;width:60px;top:35%;left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)}
section.intro h1 {color: white}
section.intro p.intro-text {margin-top: 0px;}
section.intro p {max-width: 600px;}
section.intro .left-title p.author{color: white}
section.intro .left-title p.author a{color: white}
section .article {max-width: 600px;margin: 0 auto;}
section.intro .cover02 {background-image: url(../img/mashendo_cover.jpg);background-position:bottom}
section.intro .cover03 {background-image: url(../img/river_cover.jpg);background-position:bottom}

.left-title {position: absolute;top: 40vh;left: 5%;opacity: 0}
.left-title#showhed{opacity: 1;top:44%}
.left-title#showhed2{opacity: 1;top:27%}
.left-title h1 {max-width: 600px;text-align: left;}
.left-title .subtitle{position: absolute;}
.left-title .subtitle{color: white;}
.center-title {position: absolute;left: 50%;transform: translate(-50%, 0);top: 35vh;}
.center-title h1 {max-width: 550px;text-align: left;text-align: center;}
.center-title .subtitle{position: absolute;left: 50%;transform: translate(-50%, 0);}
.right-title {position: absolute;top: 35vh;right: 5%;}
.right-title h1 {max-width: 450px;text-align: left;}
.right-title .subtitle{position: absolute;}

blockquote{font-family:Merriweather,serif;font-size:24px;line-height:32px;font-weight:700;margin:40px auto;color:#000;padding:20px 20px 40px 70px;position:relative}
blockquote::before{font-family:sans-serif;content:"\201C";color:#cbcbcb;font-size:5em;line-height:0;margin-top:45px;position:absolute;left:0}
blockquote::after{content:''}
blockquote span{display:block;color:#333;font-style:normal;font-weight:100;margin-top:20px;font-style:italic;float:right;font-size:18px}
.center {text-align: center !important;margin: 0 auto;}
.progressContainer{position:fixed;top:40px;left:0;width:100%;height:4px;background:#CCC;z-index:97}
.progress{height:4px;background:#ffcb05;width:0;transition:width .5s}
.clear {height: 50px;}
.moreLinks .wrapper {max-width: 600px;}
.varGraphic {width: 100%}
.caption {font-size: 12px!important;line-height: 18px;font-style: italic;font-weight: 100;margin: 0 auto 60px auto;color: #8e8e8e;width: 100%;padding-left: 10px}
p.caption{padding:0 0 0 0px}
.fullContent .max1200 {max-width: 1200px;width: 100%;}

#maphed{margin-bottom: 0}
.varGraphic425 {width: 100%; max-width: 600px;display: block;margin-left: auto;margin-right: auto}
.varGraphic2000 {width: 100%; max-width: 2000px;display: block;margin-left: auto;margin-right: auto}
.varGraphic900 {width: 100%; max-width: 900px;display: block;margin-left: auto;margin-right: auto}
.column {float: left;width: 50%; padding: 20px}

.column .caption {text-align: left;margin: 0}
.row:after {content: "";display: table;clear: both;}
.tweet{width: 80%;display: block;margin-left: auto;margin-right: auto}
video{width:100%}

@-moz-document url-prefix() {
    .column {float: left;width: 48%; padding: 20px 1%}
}

/*--------------------------------------------------------------------------  MENU */
menu {
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 4001;
    background-color: white;
    padding: 10px 10px 0 10px;
    height: 40px;
    transition: all ease 1s;
    border-top: solid #d0d0d0 1px;
	z-index: 2005;
}
menu.active{bottom: 0;}
menu.hidden{bottom: -50px;}
menu h4{font-weight: 400;color: #24205f;font-size: 12px;margin-bottom: 35px;display: inline-block;}
menu ul{margin: 0 0 0 10px; display: inline-block;}
menu ul li{
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    color: gray;
    font-weight: 300;
    margin-left: 35px;
}
menu ul li a{border: none;}
menu ul li.current{
    color: #24205f;
    font-weight: 700;
}
menu ul li.link01{
    border-left: 1px solid #d0d0d0;
    padding-left: 25px;
    position: relative;
    margin-left: 0;
}
menu ul li.link01:before{
    content: url(../img/empty.png);
    position: absolute;
    width: 20px;
    height: 1px;
    border-top: 1px solid #d0d0d0;
    left: 0;
    top: 50%;
}
menu p{
    float: right;
    position: relative;
    font-weight: 100;
    font-size: 12px;
    text-transform: uppercase;
    padding-right: 20px;
    cursor: pointer; 
    transition: ease 1s opacity;
    opacity: 1;   
    
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;
}
menu p:after{
    content: url('../svg/menu_ico.svg');
    position: absolute;
    right: 0;
    top: -2px;
    width: 15px;
    height: auto;
}
menu p:hover{opacity: 0.7;}

/*--------------------------------------------------------------------------   CHAPTER NAVIGATION*/
#navigation{
    position: fixed;
    top:50%;
    width: 100%;
    left: 0;
    pointer-events: none;
    z-index: 2000;
}
#navigation li{
    width: 50px;
    height: 50px;
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    transition: all 1s ease;
    pointer-events: all;
    overflow: hidden;
    cursor: pointer;
    background-color: white;
    cursor: pointer;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    position: relative;
}
#navigation li.backward{float: left;position: relative;border-right: 1px solid black;}
#navigation li.forward{float: right;position: relative;border-left: 1px solid black;text-align: right;}
#navigation li:hover{
    width: 120px;
    height: 50px;
    padding: 5px 15px;
}
#navigation li a{
    font-size: 28px;
    color: black;
    text-decoration: none;
    position: relative;
    width: 100px;
}
#navigation li a, #navigation li a:hover, #navigation li a:link, #navigation li a:active{border: none;text-decoration: none;}
#navigation li a span{
    position: absolute;
    font-size: 12px;
    color: white;
    transition: all 1s ease-in;
    transition-delay: 0.1s;
    width: 90px;
    top: 12px;
}
#navigation li:hover a span{color: black;}
#navigation li.backward a span{left: 8px;}
#navigation li.forward a span{right: 8px;}

.map-show {display: none;max-width: 425px;margin: 0 auto;}
.map-hide {display: block;margin: 0 auto;}