/*   www.jota3w.com.br/ 
            
    Art Director: Italo Santana
    Art Finalyst: Caco Guedes
    Website Encoder: @ehurafa Rafael Gomes 
    Scripts Developer: @ehurafa Rafael Gomes  					
    Systematic Programmer:  Luan Alves
    Administrative team: Cadu Junqueira/ Julio Daniel
      
*/


.content{     
    margin:0 auto;
    width:990px;
}

body{
    font-family: 'overlockregular', Trebuchet MS; font-size:13px;
}

header{ 
    width:100%; height:170px;
    float: left;
    position: fixed;
    background: url('img/bg-menu.png') 50% 0 no-repeat; 
    display: none;
    z-index:9999;
}

header h1{ 
    float:left;
    width:196px; height:27px;
    color:#fff;
    margin:68px 0 0 40px;
}

header h1 a{ 
    float:left;
    width:196px; height:27px;
    color:#fff;
}

header h1 a img{
    float:left;
    width:196px; height:27px;
    color:#fff;
}

header .content{ 
    height:170px;
    position:relative;  
}

header nav{ 
    width:728px; height:170px;
    float: right;
}

header nav ul{ 
    float: left; 
    height:40px; width:728px; 
    margin:68px 0 0 0 ;
}

header nav ul li{ 
    float: left;
    height:40px;    
    margin-left:10px;
}

header nav ul .comum{ ;
                      padding-left:20px;
                      background: url('img/menu-bullets.png') 0 -70px no-repeat;
}

header nav ul .separator{ 
    padding-left:40px;
    background: url('img/menu-bullets.png') 0 0 no-repeat;
}


header nav ul li a{
    float: left;
    height:40px;
    font-size:20px; font-weight: normal;
    color:#e6dac7;
    font-family: 'overlockbold';
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

header nav ul li a:hover{   
    color:#fff;   
}

header nav ul li .active{   
    color:#fff;   
}
.max{         
    width:100%;
    float: left;
    display:none;

}



#socialMediaTopo{
    position:absolute;
    right:35px;
    bottom:35px;
    background: url('img/bg-compartilhe.png');
    width:73px;
    height:30px;
    padding:0 0 0 80px;


}

#socialMediaTopo .social{
    float:left;
    width:32px;
}

.loader{
    width:100%; height:250px; 
    position:fixed; 
    bottom:0;
    background: url('img/loading.gif') 50% 50% no-repeat;
}

/*  HOME    */
.home{
    height:944px;
    background: url('img/bg-home.jpg') 50% 0 no-repeat;
}

.home article{
    height:482px;
    margin:350px 0 0 0;
    width: 440px;
    /* display: block; display:none; */
    text-align: center;
    position: relative;
}

.home p{       
    color: #6A3E28 !important;
    background: none;
    font-family: 'overlockbold'; 
    font-size:30px;
    font-style: italic;
    padding: 5px 22px 5px 22px;
    margin-bottom: 1px;
    /* float: left;*/
    /* line-height:35px; */
    letter-spacing: -1px;
    min-height:35px; width: auto !important;  

}


#home article p .b-um{
    font-size:35px;
    color:#fff;
    width:10px; height:10px;
    left:0;    
    position: absolute;
    display: block; 
}

#home article p .b-dois{
    font-size:35px;
    color:#fff;
    width:10px; height:10px;
    right:0;     
    position: absolute;
    display: block; 
    padding:0 5px 0 0;

}
.home span{
    color: #6a3e28;
    font-family: 'overlockregular'; 
    font-size:20px; 
    font-style: italic;
    padding: 5px;
    width:95%;
    float: left;
    text-align: right;
}


/*  /HOME    */

/*  CAFE BISTRO   */
.cafe-bistro{  
    height:884px;
    background: url('img/bg-bistro.jpg') 50% 0 no-repeat;   
}

.box-cafe-bistro{    
    width:860px;
    float: right;   
    margin:50px  0 0 0;  
}

.box-cafe-bistro h2{       
    color:#f8cb9f;
    font-size:60px;  font-family: 'overlockblack'; font-weight: normal;

}

.box-cafe-bistro p{          
    color:#fff;
    font-size:16px;  font-family: 'overlockregular'; font-weight: normal;

}

.box-cafe-bistro .em-22{          
    font-size:22px;
}

#cafe-bistro .carrossel{     
    position: relative;
    width:100%; 
}

#cafe-bistro .carrossel .mask{  
    background: url('img/cafe-bistro-carrossel-mask.png');     
    width: 220px; height:275px;
    position: absolute;
    z-index:9000;

}
.boxGaleria {
    background: url('img/cafe-bistro-carrossel-mask.png') no-repeat;
}
.container-mask{       
    position: absolute;
    z-index:5000;
    width:100px; height:100px;
    left:0; top:o;}
/*  /CAFE BISTRO     */

/*  EMPORIO  */
#emporio{    
    height:909px;     width:100%;
    position: relative;
    float: left;

}
#emporio .slider{      
    height:909px; width:100%;

    float: left;
}

#emporio .mascara-slider-emporio{             
    height:909px; width:100%;
    position: absolute;
    top:0; left:0;
    background: url('img/mascara-slider-emporio.png') repeat-y 50% 0;
    z-index:900;

}

#emporio nav{           
    width:990px; height:50px;
    left:50%; margin-left:-445px;
    position: absolute;
    z-index:5000;
    margin-top:630px;
}

#emporio nav a{          
    width:70px; height:42px;
    display: block;
}

#emporio .prev1{          
    float: left;
    background: url('img/seta-emporio.png') 5px 0 no-repeat;
    height:39px;
}
#emporio .prev1:hover{          
    background-position: 0 0;
}

#emporio .next1{          
    float: right;
    background: url('img/seta-emporio.png') 10px -40px no-repeat;    
}

#emporio .next1:hover{         
    background-position: 15px -40px;   
}



#emporio .foto{       
    border: none;
    height:909px; width:100% !important;
    /*max-width:1600px;*/

    float: left;
    /* margin:0 auto !important;*/
    background-position: 50% 387px; background-repeat: repeat-x;/*background-repeat: no-repeat;*/
}

#emporio .foto1{ border:none;
                 background-image: url('img/emporio/emporio01.jpg');
}

#emporio .foto2{     
    background-image: url('img/emporio/emporio02.jpg');
}

#emporio .foto3{     
    background-image: url('img/emporio/emporio03.jpg');
}

#emporio .foto4{     
    background-image: url('img/emporio/emporio04.jpg');
}
#emporio .foto5{     
    background-image: url('img/emporio/emporio05.jpg');
}

#emporio .foto6{     
    background-image: url('img/emporio/emporio06.jpg');
}





.emporio{     
    height:909px;
    background: url('img/bg-emporio.png') 50% 0 no-repeat;
    position: absolute;
    z-index:1000;
}

.emporio h2{    
    font-family: 'overlockblack'; font-size:60px; font-weight: normal;
    color:#aedce0;
}

.emporio p{    
    font-size:16px; 
    color:#aedce0;
    line-height:18px;
    color:#fff;
    margin-top: 20px;
}
.box-emporio{         
    float: right;
    width:940px;
    margin-top:50px;
}
/*  /EMPORIO     */

/*  GALERIA   */
#galeria{  }
.galeria{       
    height:820px;
    background: url('img/bg-galeria.jpg') 50% 0 no-repeat;
}

#acontece{    
    float: right;  
    width:924px; height:626px;
    margin:136px 0 0 47px;
    background: url('img/bg-acontece.png') no-repeat;
}



/*  MENU OSCAR CAFE   */
#menu-oscar-cafe{
    height:1112px;
    background: url('img/bg-menu-oscar-cafe.jpg') 50% 0 no-repeat;
}

#container-iframe-menu-oscar-cafe{  
    float: left;
    overflow: hidden;
    width:747px; height:560px;
    margin:250px 0 0 108px;
}
/*  /MENU OSCAR CAFE   */



/*  CONTATO    */
.contato{           
    height:945px;
    background: url('img/bg-contato.jpg') 50% 0 no-repeat;
}

#contato{       
    float: right;
    width:415px;
    margin:200px 42px 0 0;
    padding:0 0 10px 0; 
}

#contato form{   
    float: left;
    width:415px;
    margin-top:-10px;
}

#contato form span{    
    position: relative;
    float: right;
    width:385px; min-height:50px;
    display: block;
}

#contato form span input{      
    float: left;
    margin:45px 0 0  0;
    width:375px;  height:30px;
    padding:0 0 0 10px;
    color:#3a2e24;
    font-size:13px; font-family: 'overlockregular';
    border:0;
}

#contato form span textarea{       
    float: left;
    margin:50px 0 0  0;
    width:375px;  height:110px;
    font-size:13px; font-family: 'overlockregular';
    color:#3a2e24;
    border:0;
    padding:10px 0 0 10px;
    resize:none;
}
#contato form span label {
    color: #FFF;
    font-size: 10px;
    margin-left: 10px;
    position: absolute;
    color: red;
    left:0; bottom:-15px;
}
#contato form .textarea label {
    color: #FFF;
    font-size: 10px;
    margin-left: 10px;
    position: absolute;
    color: red;
    left:0; bottom:0px;
}
#contato .enviar{      
    float: right;
    width:114px;  height:60px;
    background: url('img/btn-enviar.png');
    margin:5px 0 0 0;
}

#contato p{
    float: left;
    width:415px;
    color:#ecdece;
    font-size:14px;
    margin:19px 0 0 30px;
}

#contato p span{ 
    float: right;
}

#contato .botao{ 
    display: none !important;
}


/*
 * SCRIPT EM CONSTRUÇÃO
 */
#acontece .fotos{   
    float: left;  
    width:740px; height:438px;
    margin:40px 0 0 55px;
}
#acontece h2{ 
    float: left;  
    width:740px;  
    color:#7c2d1b;
    font-size:60px; font-weight: normal;  font-family: 'overlockblack';
}
#acontece .carrossel-acontece{  
    float: left;  
    position: relative;
    width:740px;  height:560px;
    /*background: url('img/bg-acontece-carrossel-acontece.png') 50% 100% no-repeat;*/
}
.bgOut {
    background: none;
}
.bgIn {
    background: url('img/bg-acontece-carrossel-acontece.png') 50% 100% no-repeat;
}
#acontece .carrossel-acontece ul{
    float: left;
    width: 789px;
    margin-left: -20px;
    top: 443px!important;
}
#acontece .carrossel-acontece ul li{ 
    position: relative;
    width:780px; 
    overflow: hidden;
    margin:0 0 0 18px;
}
#acontece .carrossel-acontece  .albumLista{   
    width:150px;
}
#acontece .carrossel-acontece ul li div{    
    float: left;  
    position: relative;
    width:150px;     height:154px;
    margin:0 23px 0 22px;
    overflow: hidden;
}
#acontece .carrossel-acontece .margin-zero{ 
    margin:0 0 40px 0;
}
#acontece .carrossel-acontece ul li a{
    float: left;
    width:150px; 
    display: block;
}
#acontece .carrossel-acontece ul li .imagem{
    float: left;
    width:150px; height:112px;
    display: block;
    color:#fff;
}
#acontece .carrossel-acontece ul li p{ 
    float: left;   
    width:150px;  height:100px;
    display: block;
    color:#cf6f13;
    font-size:16px;
    text-align: center;
    margin-top:5px;
}
#acontece .carrossel-acontece ul li p:hover{
    color:#7e4107;
}
#acontece .carrossel-acontece nav{
    /*NAV DAS CAPAS*/ 
    /*border: 1px solid red;*/
    position: absolute;
    width:854px;  height:13px;
    top:150px; left:-48px;
    z-index:1000;
}
#acontece nav.links-de-albuns {
    /*NAV DO ALBUM*/
    /*border: 1px solid blue;*/
    position: absolute;
    width:810px;  height:13px;
    top:150px; left:-35px;
    z-index:1000;
}
#acontece .carrossel-acontece nav .prev2{ 
    float: left;
    width:30px;  height:13px;
    background: url('img/carrossel-acontece-arrows.png') no-repeat 5px 0;   
}

#acontece .carrossel-acontece nav .prev2:hover{    
    background: url('img/carrossel-acontece-arrows.png') no-repeat 0 0;   
}

#acontece .carrossel-acontece nav .next2{ 
    float: right;
    margin:;
    width:30px;  height:13px;
    background: url('img/carrossel-acontece-arrows.png') no-repeat 0 -14px;   
}
#acontece .carrossel-acontece nav .next2:hover{ 
    float: right;
    width:30px;  height:13px;
    background: url('img/carrossel-acontece-arrows.png') no-repeat 5px -14px;   
}
.albumSelecionado{
    float: left;
    position: relative;
    width:720px; height:554px;
    margin:0;
}
.albumSelecionado .slider3{   
    float: left;
    position: relative;
    width:608px ; height:438;
    margin-top: -587px;
    margin-left: 55px;
}
/*
.albumSelecionado .slider3 img{
    width:608px ; height:438;
    display: block;
}*/
.albumSelecionado h5{ 
    position: absolute;
    top:50px; left:10px;
    background: #fff;
    padding:0 0 0 4px;
    z-index:1000;   
    color:#7c2d1b; 
    font-size:35px; font-family: 'overlockblack'; font-weight: normal;
}
.albumSelecionado .fechar{  
    float: right;   
    cursor: pointer;
    color: brown;
    padding:5px;
    margin:-25px 10px 0 0;
}
.links-de-albuns{		
    width:570px!important;
    height:40px;
    float: left;
    margin:-160px 0 0 90px;
}
.links-de-albuns a{		
    color: brown;
    margin:0 10px 0 0;
    float: left;
    font-size:16px;	
}
#nav3{

}

#nav3 li {
    width: 77px !important; 
    height:55px !important;
    float: left!important;
    margin:0 10px 0 0!important;
    /*left:10px;
        width: 77px; 
    height:55px;
    float: left;
    margin:0 10px 0 0;
    left:10px;*/
}
#nav3 a {      
    /*width: 77px; 
    height:55px;
    top: -37px;
    left: -30px;
    display: block; 
    float: left;
    */
    width: 77px !important; 
    height:55px !important;
    top: 0px!important;
    left: 0px!important;
    display: block; 
    float: left;
}

#nav3 li.activeSlide a { /*background: #FFF;padding: 2px; border: 1px solid yellow;*/ }
#nav3 li.activeSlide a img, #nav3 li a img:hover {
    opacity: 0.7;
}
#nav3 a:focus { outline: none; }
#nav3 img { 
    border: none; 
    display: block;
    float: left;
    width: 77px;
    height: 55px;
}

#nav3 .activeSlide{}
.container-carrossel-acontece {
    min-height:450px;
}

.albumSelecionado .jcarousel-skin-tango .jcarousel-clip-horizontal {
    height: 542px!important;
    margin-left: 15px;
    width: 690px!important;
}
.nav4 {
    top: 235px!important;
}
#acontece .carrossel-acontece  .albumLista{   
    background: url('img/moldura.png') no-repeat 0 0;
    padding: 7px;
    width:153px;
}
#acontece .carrossel-acontece ul li div{    
    float: left;  
    position: relative;
    width:150px;     height:154px;
    margin:0 23px 0 3px;
    overflow: hidden;
}
/*
 * SCRIPT EM CONSTRUÇÃO
 */
#acontece .midias{   
    float: left;  
    display: none;
    width:824px; height:570px;
    margin:25px 0 0 15px;
    background: url('img/bg-acontece-midias_sradio.png') no-repeat 0 0;
}

#acontece .midia-title{     
    position: relative;  
    width:824px; 
    top:65px;
    left:45px;
}

#acontece .midia-title h3{     
    position:  absolute;
    font-size:35px; font-family: 'overlockblack'; font-weight: normal;
    color:#7c2d1b;
    background: #fff;
    padding:0 5px 10px 5px;
    height:30px;
    z-index:1000;
}

#acontece .midia-title p, #acontece .midia-title p a{     
    position:  relative;
    font-size:16px;  font-family: 'overlockregular'; font-weight: normal; font-style: italic;
    color:#7c2d1b;   
    top:45px;
    text-decoration: none;
    margin-bottom: 5px;
}
#acontece .midia-title p a.marcado{
    color: #7c2d18;
    text-decoration: underline;
    font-weight: bold;
}



#container-slider-midias{   
    width:480px; height:416px;
    margin:20px 0 0 175px;
    padding:0 0 32px 0;
    float: left;
    background: url('img/container-slider-midias.png') 50% 100% no-repeat; 
}

#slider-midias{   
    width:480px; 
    height:416px;
    /*background:#ddd;*/
    margin:0;
    float: left;

}
#slider-midias div{
    display: none;
}

#slider-midias img{    
    width:480px; height:416px;
    float: left;
}

#container-slider-midias nav{      
    width:480px;
    position: relative;

}
.prev3{    
    display: block;
    width:87px; height:50px;
    position: absolute;
    z-index:1000;  
    left:-100px; 
    top:200px;
    background: url('img/slider-midias-a.png') 0 0 no-repeat;
}
.prev3:hover{       
    left:-102px;     
}

.next3{  
    display: block;
    width:87px; height:50px;
    position: absolute;
    z-index:1000; 
    right:-100px;
    top:200px;
    background: url('img/slider-midias-a.png') 0 -54px no-repeat;
}

.next3:hover{    
    right:-102px;   
}

.transition{
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}


#acontece .abas{    
    float: left;
    width:40px; height:530px;
    margin:99px 0 0 0;

}

#acontece .abas nav {   
    overflow: hidden;

}


#acontece .abas nav ul{    
    float: left;
    margin: 0 0 0  40px;

}

#acontece .abas ul li{   
    float: left;

}

#acontece .abas a{    
    width:40px;
    /*display: none;*/

}
.aba-galeria{    
    float: left;
    width:40px; height:138px;
    background: url('img/galeria-abas.png') no-repeat 0 0;
}

.aba-midias{    
    float: left;
    width:40px; height:123px;
    background: url('img/galeria-abas.png') no-repeat 0 -138px;
}
.lista-de-albuns{
    border:1px solid red;
    float: left;
    width:600px !important; height:40px;
    margin:0 0 0 100px;
}

.lista-de-albuns li{

    float: left;

}

.lista-de-albuns a{
    color:#cf6f13;
    font-size:16px;
    float: left;

}




/*  /GALERIA     */
footer{ 
    width:850px;
    height:40px;
    float: right;
    margin:46px 0 0 0;
}

footer ul{
    float: left;
    height:40px;
}
footer ul li{   
    float: left;
    width:40px; height:40px;
    margin:0 3px 0 0;
}

footer ul li a{  
    float: left;
    width:40px; height:40px;
    background: url('img/social-buttons.png');
}

footer ul li a:hover{   
    margin-top:-2px;
}

footer .facebook{  
    background-position: 0 0;
}
footer .four-square{  
    background-position: 0 -40px;
}
#assJota{    
    font-family: 'overlockblack'; font-size:13px;
    color:#fff;  
    padding: 0 0 0 30px;
}

#assJota span{          
    font-weight: bold;
    color:#fcb711;    
}
.maskPlay {
    background: url('img/radio_play.png');
    background-repeat: no-repeat;
    width: 291px;
    height: 202px;
    position: relative;
    top: 336px;
    left: 542px;
    cursor: pointer;
}
.maskPlayStop {
    background: url('img/radio_stop.png');
    background-repeat: no-repeat;
    width: 291px;
    height: 202px;
    position: relative;
    top: 336px;
    left: 542px;
    cursor: pointer;
}
/*  /CONTATO    */

.modal-content {
    border: 0!important;
    background: transparent!important;;
}
.modal-header {
    border: 0!important;
}
.modal-body {
    width: 143%;
    left: -24%;
    top: -24px;
}
button.close {
    top: 47px;
    position: relative;
    left: 77px;
    z-index: 10;
    font-size: 36px;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0,0,0,0.6);
}
.modal-content span{
    color: #52321f!important;
}
.close:focus, .close:hover {
       color: #52321f!important;
    text-decoration: none;
     opacity: .75;
}



/*  FONTES  */

@font-face {
    font-family: 'overlockblack';
    src: url('fontes/overlock-black-otf-webfont.eot');
    src: url('fontes/overlock-black-otf-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontes/overlock-black-otf-webfont.woff') format('woff'),
        url('fontes/overlock-black-otf-webfont.ttf') format('truetype'),
        url('fontes/overlock-black-otf-webfont.svg#overlockblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'overlockbold';
    src: url('fontes/overlock-bold-otf-webfont.eot');
    src: url('fontes/overlock-bold-otf-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontes/overlock-bold-otf-webfont.woff') format('woff'),
        url('fontes/overlock-bold-otf-webfont.ttf') format('truetype'),
        url('fontes/overlock-bold-otf-webfont.svg#overlockbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'overlockregular';
    src: url('fontes/overlock-regular-otf-webfont.eot');
    src: url('fontes/overlock-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontes/overlock-regular-otf-webfont.woff') format('woff'),
        url('fontes/overlock-regular-otf-webfont.ttf') format('truetype'),
        url('fontes/overlock-regular-otf-webfont.svg#overlockregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*  /FONTES  */