@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: -120px}
.pp_next{height: 100%; position: absolute; width: 30%; z-index: 9999; right: -120px;}

.pp_previous:hover{background: url("../img/seta-esq.png") no-repeat scroll 0px 50% transparent;}
.pp_next:hover{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) {
    
#all {
   height: 790px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    display: none;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    overflow-x: hidden;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .um iframe {
        width: 100%;
    }
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
    .dois iframe {
        width: 100%;
    }
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .tres iframe {
        width: 100%;
    }
    
}

@media only screen and (max-width: 414px) and (orientation:portrait) {
    
#all {
   height: 790px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    display: none;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    overflow-x: hidden;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .um iframe {
        width: 100%;
    }
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
    .dois iframe {
        width: 100%;
    }
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .tres iframe {
        width: 100%;
    }
    
}

@media only screen and (max-width: 360px) and (orientation:portrait) {
    
#all {
   height: 790px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    display: none;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    overflow-x: hidden;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .um iframe {
        width: 100%;
    }
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
    .dois iframe {
        width: 100%;
    }
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
     .tres iframe {
        width: 100%;
    }
    
}

@media only screen and (max-width: 320px) and (orientation:portrait) {
    
#all {
   height: 790px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    display: none;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    overflow-x: hidden;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
    .um iframe {
        width: 100%;
    }
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
    .dois iframe {
        width: 100%;
    }
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
     .tres iframe {
        width: 100%;
    }
    
}

/* Mobile Horizontal */

@media only screen and (max-width: 736px) and (orientation:landscape) {
   
#all {
   height: 1100px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
}

@media only screen and (max-width: 640px) and (orientation:landscape) {
 
    #all {
   height: 1100px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 130px;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
}

@media only screen and (max-width: 568px) and (orientation:landscape) {
 
    #all {
   height: 1100px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
}

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

    #all {
   height: 1100px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
}

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

    #all {
   height: 1100px !important
}
    
h1{ 
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 30px;
    top: 10px;
    }

  div#logo {
    visibility: hidden;
    width: 320px;
    position: absolute;
    left: 30px;
    font-size: 40px;
  }
    
.videos {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 50px;
    /* width: 960px; */
    /* height: 700px; */
    /* margin: 0 auto; */
    /* position: relative; */
    /* margin-top: 100px; */
}
    
.um {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
.dois {
    position: relative;
    bottom: 0%;
    left: 0px;
}
    
.tres {
    position: relative;
    left: 0%;
    margin-left: 0;
}
    
}