@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=News+Cycle:400,700");
@font-face {
    font-family: 'gothamlight';
    src: url('fonts/gotham-light-webfont.eot');
    src: url('fonts/gotham-light-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/gotham-light-webfont.woff') format('woff'),
         url('fonts/gotham-light-webfont.ttf') format('truetype'),
         url('fonts/gotham-light-webfont.svg#gotham_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gothambook';
    src: url('fonts/gotham-book-webfont.eot');
    src: url('fonts/gotham-book-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/gotham-book-webfont.woff') format('woff'),
         url('fonts/gotham-book-webfont.ttf') format('truetype'),
         url('fonts/gotham-book-webfont.svg#gotham_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{margin: 0; padding: 0}
strong{font-weight: 700;}
body{font-family: 'News Cycle', sans-serif;letter-spacing: 0.1em; color: #4e4e4e; font-size: 12px;font-variant: small-caps;}
a{color: #4e4e4e;}

div#logo{ font-family: 'gothamlight', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: #4e4e4e;}
div.home{ width: 500px; position: fixed;top: 45%; right: 40px;font-size: 30px;}
div.inner{ font-size: 20px; width: 50%; position: fixed; top: 50px; left: 50px;}

h1, h2, h3{ font-family: 'News Cycle', sans-serif; text-transform: uppercase; font-weight: normal;}
h2, h3{ font-size: 26px;}
h1{ font-size: 16px; color: #000; position: fixed; right: 50px; top: 50px;}
h2{ color: #4e4e4e; margin-bottom: 4px}
h3{ color: #4e4e4e; margin-bottom: 20px; font-size: 14px;}

p{font-size: 13px; font-family: Verdana;}

#left{ height: 400px;
    left: 50%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;}

#right{ height: 400px;
    left: 50%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: auto;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 356px;
    clear: both; 
}

#right .viewport { 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
    width: 346px; 
}
#right .overview { 
    list-style: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin-right: 25px;
}
#right .thumb .end,
#right .scrollbar { 
    position: relative; 
    float: right; 
}
#right .thumb { 
    height: 20px; 
    width: 9px; 
    cursor: pointer; 
    overflow: hidden; 
    position: absolute; 
    top: 0;
}
#right .thumb .end { 
    overflow: hidden; 
    height: 5px; 
    width: 13px; 
}
#right .disable { 
    display: none; 
}
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

#right .thumb { 
    background-color: #000000; 
}
#right .track { 
    background-color: #999999; 
    height: 100%; 
    width:9px; 
    position: relative; 
    padding: 0;}

div#conteudo-biografia .viewport { height: 410px; overflow: hidden; position: relative; width: 382px; margin-left: 25px; }

.webkit div#conteudo-biografia .viewport { top: 0;}
.gecko div#conteudo-biografia .viewport { top: -400px;}

div#conteudo-biografia .overview { list-style: none; position: absolute; left: 0; top: 0; margin-right: 25px;}
div#conteudo-biografia .thumb .end,
div#conteudo-biografia .scrollbar { position: relative; float: right; }
div#conteudo-biografia .thumb { height: 20px; width: 9px; cursor: pointer; overflow: hidden; position: absolute; top: 0;}
div#conteudo-biografia .thumb .end { overflow: hidden; height: 5px; width: 13px; }
div#conteudo-biografia .disable{ display: none; }

.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

div#conteudo-biografia .thumb { background-color: #000000; }
div#conteudo-biografia .track { background-color: #AAAAAA; height: 100%; width:9px; position: relative; padding: 0;}

div#left #anos-biografia{bottom: 10px; position: relative; left: 0; margin: 10px 0 20px;}
div#left #anos-biografia ul li {float: left; list-style: none; }
div#left #anos-biografia ul li a{text-decoration: none; margin-right: 10px; padding: 1px 5px; font-size: 10px;}
div#left #anos-biografia ul li a:hover, .current{background-color: #000000; color: #FFFFFF;}

div#left #bibliografia-biografia{bottom: 0; position: absolute; left: 0; margin: 0 0 0 40px;}
div#left #bibliografia-biografia ul li {float: left; list-style: none; }
div#left #bibliografia-biografia ul li a{text-decoration: none; margin-right: 10px; padding: 1px 5px;}
div#left #bibliografia-biografia ul li a:hover, .current{background-color: #000000; color: #FFFFFF;}

#conteudo-biografia{ position: absolute; clear: both; overflow: auto; width: 415px; padding-left: 0; margin-top: 15px;}

#linguas{font-size: 13px; position: fixed; right: 136px; top: 70%; width: 100%;}
#linguas a{text-decoration: none; color: gray;}
#linguas a:hover{color: black;}

#linguas ul li{list-style: none outside none; text-align: right;}

#navegacao{}
.pp_previous{height: 100%; position:absolute; width: 30%; z-index: 9999; left: -50px}
.pp_next{height: 100%; position: absolute; width: 30%; z-index: 9999; right: -50px;}

.pp_previous {background: url("../img/seta-esq.png") no-repeat scroll 0px 50% transparent;}
.pp_next {background: url("../img/seta-dir.png") no-repeat scroll 100% 50% transparent; }


.publicacao{margin-bottom: 20px;}
.publicacao a{text-decoration: none;}
.publicacao a:hover{text-decoration: none; }

#left-publicacoes{ height: 400px;
    left: 50%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 630px;}

.baixar{ background: url("../img/baixar.png") no-repeat scroll 0 50% transparent;
    float: left;
    height: 32px;
    margin-top: -10px;
    position: relative;
    width: 32px;}

#legenda{font-size: 20px; color: #000; position: fixed; right: 50px; top: 120px; text-align: right;}
#legenda strong{font-size: 28px; font-weight: normal; text-transform: uppercase;}

.texto p{margin-bottom: 20px;}
.texto h2{margin-bottom: 10px;}

#bio { height: 400px;
    left: 50px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px}

.videos{ width: 960px; height: 700px; margin: 0 auto; position: relative; margin-top: 100px;}
.um{ position: absolute;left: 50%; margin-left:-210px;}
.dois{position: absolute; bottom:0; left:20px;}
.tres{position: absolute; bottom:0; right:20px;}

.ampliacoes{
    height: 560px; 
    left: -332px; 
    margin-left: 50%; 
    margin-top: -320px; 
    position: relative; 
    top: 58%; 
    width: 728px;
}

.ampliacoes div{
    float: left; 
    margin: 10px;
}

.frames{ height: 490px;
    left: 50%;
    margin-left: -300px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 30%;
    width: 570px;}

/* Mobile  Vertical*/

@media only screen and (max-width: 504px) and (orientation:portrait) {
    
h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    left: 210px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 100px; 
    font-size: 40px;
  }
    
  #right {
    display: block;
    height: 100vh;
    left: 0%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 504px;
    clear: both;
}
    
    .ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
    #left {
    height: 400px;
    left: 94%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 35%;
    width: 430px;
}
}

@media only screen and (max-width: 414px) and (orientation:portrait) {

h1{ 
    /* visibility: hidden; */
    font-size: 20px;
    color: #000;
    position: fixed;
    left: 160px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    /* left: 30px; */
    font-size: 40px;
  }
    
  #right {
    display: block;
    height: 400px;
    left: -5%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 414px;
    clear: both;
}
    
    .ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 120%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 30%;
    width: 430px;
}

}
    
@media only screen and (max-width: 360px) and (orientation:portrait) {
    
h1{ 
    /*visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 350px; */
    left: 150px;
    top: 10px;
    }
    


  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 320px;
    clear: both;
}
    
    .ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
    #left {
    height: 400px;
    left: 110%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 35%;
    width: 430px;
}
}

@media only screen and (max-width: 320px) and (orientation:portrait) {
    
h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}

/* Mobile Horizontal */

@media only screen and (max-width: 736px) and (orientation:landscape) {
    
    h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}

@media only screen and (max-width: 640px) and (orientation:landscape) {
    
    h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}

@media only screen and (max-width: 568px) and (orientation:landscape) {
    
    h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}

@media only screen and (max-width: 533px) and (orientation:landscape)  {

    h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}

@media only screen and (max-width: 480px) and (orientation:landscape)  {

    h1{ 
    /* visibility: hidden; */
    font-size: 16px;
    color: #000;
    position: fixed;
    /* right: 25px; */
    left: 130px;
    top: 10px;
    }

  #logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
  #right {
    display: block;
    width: 320px;
    height: 400px;
    left: -10%;
    margin-left: -50px;
    margin-top: -120px;
    overflow: hidden;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    clear: both;
}
    
.ampliacoes {
    height: 100vh;
    margin-top: 320px;
    position: absolute;
    top: -130px;
    left: -170px;
    width: 100vw;
    display: inline;
}
    
#left {
    height: 400px;
    left: 130%;
    margin-left: -430px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 430px;
}
    
}