@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;}

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

div#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;
    
}

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

div#right .thumb { background-color: #000000; }
div#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;}


/*
div#left{width: 30%; margin:0 150px; vertical-align: center; position: absolute; top: 50%; margin-top: -25%; padding-bottom: 100px;}
div#right{width: 30%; margin:0 150px; vertical-align: center; position: absolute; top: 50%; margin-top: -25%; padding-bottom: 100px; right: 0;}
div#left p, div#right p{font-variant:small-caps; font-size: 16px; color:#4e4e4e; margin-bottom: 20px;}
div#left img, div#right img{margin:10px 0;}
.txtright{text-align: right !important;};*/

#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 */
    
@media only screen and (max-width: 600px) {
h1{ font-size: 16px; color: #000; position: fixed; right: 40px; top: 150px;}
}
    
@media only screen and (max-width: 600px) {
  div#logo {
      width: 340px;
      margin-top: 20px;
      font-size: 50px
  }
}

/* iPhone 4 */
/* @media only screen and (max-width: 320px) {
h1{ font-size: 16px; color: #000; position: fixed; right: 185px; top: 150px;}
} */

/* @media only screen and (max-width: 320px) {
h2{ font-size: 16px; color: #000; position: fixed; right: 190px; top: 190px;}
} */

@media only screen and (max-width: 320px) {
.titulo-mobile{ font-size: 16px; color: #000; position: fixed; right: 199px; top: 150px;}

.subtitulo-mobile{ font-size: 16px; color: #000; position: fixed; right: 290px; top: 180px;}
    
.subtitulo-mobile-tadeu{ font-size: 16px; color: #000; position: fixed; right: 250px; top: 110px;}

.biografia-mobile{ font-size: 16px; color: #000; position: fixed; right: 430px; top: 120px;}
    
.info_contato{ font-size: 16px; color: #000; position: fixed; right: 190px; top: 160px;}
   
.download{position: fixed; left: 100px; top: 230px;}
    
.fotografia_amplicacao{ font-size: 16px; color: #000; position: fixed; right: 70px; top: 120px;}
    
.frames_selecionados{ font-size: 16px; color: #000; position: fixed; right: 150px; top: 120px;}

.autor{ font-size: 16px; color: #000; position: fixed; right: 270px; top: 120px;}
    
.tadeu{ font-size: 16px; color: #000; position: fixed; right: 300px; top: 110px;}
    
.tadeu2{ color: #000; position: fixed; right: 170px; top: 190px;}
    
.tadeu3{ font-size: 16px; color: #000; position: fixed; right: 300px; top: 130px;}
    
.carlito{position: fixed; right: 290px; top: 140px;}

.carlito_entrevista{visibility: hidden}
    
.titulo_entrevista{position: fixed; right: 250px; top: 138px;}
    
.carlito_titulo{position: fixed; right: 210px; top: 150px;}
    
.carlito_titulo_entrevista{visibility: hidden}

    
.ponto{ font-size: 16px; color: #000; position: fixed; right: 320px; top: 220px;}
    
.voltar{ font-size: 16px; color: #000; position: fixed; right: 370px; top: 210px;}
    
.voltar_tadeu{ font-size: 16px; color: #000; position: fixed; right: 370px; top: 240px;}
    
div#right .viewport { height: 100%; overflow: hidden; position: relative; width: 346px; }
    
.webkit div#conteudo-biografia .viewport { top: 0;}
.gecko div#conteudo-biografia .viewport { top: -800px;}
    
#conteudo-biografia{ position: absolute; clear: both; overflow: auto; width: 400px;padding-left: 0; margin-top: 75px;}
    
div#conteudo-biografia .viewport { height: 210px; overflow: hidden; position: relative; width: 315px; margin-left: 20px; }

div#right .overview { list-style: none; position: absolute; left: 0; top: 0; margin-right: 125px;}
    
div#logo {
      width: 200px;
      margin-top: 20px;
      font-size: 35px
  }

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

div#left-publicacoes{ height: 500px;
    left: 50%;
    margin-left: -185px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 320px;
    width: 300px;
    }
   
.frames{ height: 550px;
    left: 72%;
    margin-left: -300px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 70%;
    width: 310px;
    }
}

/* iPhone 6/7/8 Plus */
/* @media only screen and (max-width: 414px) {
h1{ font-size: 16px; color: #000; position: fixed; right: 185px; top: 150px;}
} */

/* @media only screen and (max-width: 414px) {
h2{ font-size: 16px; color: #000; position: fixed; right: 190px; top: 190px;}
} */

@media only screen and (max-width: 414px) {
.titulo-mobile{ font-size: 16px; color: #000; position: fixed; right: 199px; top: 150px;}

.subtitulo-mobile{ font-size: 16px; color: #000; position: fixed; right: 290px; top: 180px;}
    
.subtitulo-mobile-tadeu{ font-size: 16px; color: #000; position: fixed; right: 250px; top: 110px;}

.biografia-mobile{ font-size: 16px; color: #000; position: fixed; right: 430px; top: 120px;}
    
.info_contato{ font-size: 16px; color: #000; position: fixed; right: 190px; top: 160px;}
   
.download{position: fixed; left: 100px; top: 230px;}
    
.fotografia_amplicacao{ font-size: 16px; color: #000; position: fixed; right: 70px; top: 120px;}
    
.frames_selecionados{ font-size: 16px; color: #000; position: fixed; right: 150px; top: 120px;}

.autor{ font-size: 16px; color: #000; position: fixed; right: 270px; top: 120px;}
    
.tadeu{ font-size: 16px; color: #000; position: fixed; right: 300px; top: 110px;}
    
.tadeu2{ color: #000; position: fixed; right: 170px; top: 190px;}
    
.tadeu3{ font-size: 16px; color: #000; position: fixed; right: 300px; top: 130px;}
    
.textos_felipe{ color: #000; position: fixed; right: 240px; top: 150px;}

    
.carlito{position: fixed; right: 290px; top: 140px;}

.carlito_entrevista{visibility: hidden}
    
.titulo_entrevista{position: fixed; right: 250px; top: 138px;}
    
.carlito_titulo{position: fixed; right: 210px; top: 150px;}
    
.carlito_titulo_entrevista{visibility: hidden}

.ponto{ font-size: 16px; color: #000; position: fixed; right: 320px; top: 250px;}
    
.contato {visibility: hidden;}
    
.voltar{ font-size: 16px; color: #000; position: fixed; right: 370px; top: 310px;}
    
.voltar_tadeu{ font-size: 16px; color: #000; position: fixed; right: 370px; top: 240px;}
    
div#right .viewport { height: 100%; overflow: hidden; position: relative; width: 346px; }
    
.webkit div#conteudo-biografia .viewport { top: 0;}
.gecko div#conteudo-biografia .viewport { top: -800px;}
    
#conteudo-biografia{ position: absolute; clear: both; overflow: auto; width: 414px;padding-left: 0; margin-top: -255px;}
    
div#conteudo-biografia .viewport { height: 510px; overflow: hidden; position: relative; width: 414px; margin-left: 20px; }

div#right .overview { list-style: none; position: absolute; left: 0; top: 0; margin-right: 125px;}
    
div#logo {
      width: 200px;
      margin-top: 20px;
      font-size: 35px
  }

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

div#left-publicacoes{ height: 500px;
    left: 50%;
    margin-left: -185px;
    margin-top: -160px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 320px;
    width: 300px;
    }
   
.frames{ height: 650px;
    margin-left: -280px;
    margin-top: -360px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 70%;
    width: 310px;
    }
}

 #cv {
    position: fixed;
    top: 90px;
    right: 45px;
    text-align: right;
    }

    
@media only screen and (max-width: 600px) {
.videos { width: 0px; height: 1100px; margin: 0 auto; position: relative; margin-top: 180px;}
.um{ position: relative;left: 50%; margin-left:-210px;}
.dois{position: relative; left: 50%; margin-left:-210px;}
.tres{position: relative; left: 50%; margin-left:-210px;}
}
    
@media only screen and (max-width: 600px) {
#left-publicacoes{ height: 400px;
    left: 50%;
    margin-left: -210px;
    margin-top: -90px;
    overflow: hidden;
    padding: 40px 120px 40px 40px;
    position: absolute;
    top: 40%;
    width: 380px;}
}
    
@media only screen and (max-width: 600px) {
div#gallery { height: 400px;
    left: 50%;
    margin-left: -310px;
    margin-top: -90px;
    overflow: hidden;
    padding: 40px 5180px 10px 10px;
    position: absolute;
    top: 40%;
    width: 1344px;}
div#timeline { 
    visibility: hidden}
}
    
@media only screen and (max-width: 600px) {
  div#linguas {
      font-size: 20px;
      position: fixed;
      right: 90px;
      
  }
    div#linguas a:hover{
        color: black;
    }
    
}
    
@media only screen and (max-width: 600px) {
div#conteudo-biografia { list-style: none; position: absolute; left: 0; top:100px; margin-right: 0px; margin-left: -20px;} 
div#conteudo-biografia .overview { list-style: none; position: absolute; left: 0; top: 0; margin-right: 105px;}
}

@media only screen and (max-width: 600px) {
  div#right{ height: 400px;
    left: 1%;
    margin-left: -70px;
    margin-top: 70px;
    overflow: auto;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 356px;
    clear: both;
    
}
} 
@media only screen and (max-width: 600px) {
 div#left{ height: 160px;
    left: 10%;
    margin-left: -70px;
    margin-top: -100px;
    overflow: auto;
    padding: 0 40px 0 120px;
    position: absolute;
    top: 40%;
    width: 356px;
    clear: both;
}