/*  FIX dos botões de FEchar das Galerias  */

#hospital .swiper-slide:nth-child(5) .close-tab {
    right: 16px;
}

#administration-office-news .swiper-slide:nth-child(4) .close-tab {
    right: 20px;
}

#administration-office-leprosy-representation-swiper .close-tab {
    right: 14px;
    top: 0;
}


/* caso a Tati não coloque borda nessas imagens */
#administration-office-leprosy-representation-swiper img.image-fit
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid white;
}

/* usar só se tiver com borda */
#administration-office-leprosy-representation-swiper .swiper-slide:nth-child(2) .close-tab {
    right: 4px;
    top: 0;
}    


/* prev e next com pouco espaço - joga o before mais para o meio */
.swiper-next.little-space:before
{
    background-position: 30% 48%;
}

.swiper-previous.little-space:before
{
    background-position: 70% 48%;
}



/*  FIX dos botões de FEchar das Galerias  */






.fix-float
{
    float: none;
    width: 100%;
    height: 100px;
    clear: both;
    display: block;
}



.volume-control {
    color: #333;
}

.volume-control span {
    top:3px;
}


.navbar .btn-sm, .navbar .btn-group-sm>.btn
{
    font-size: 13px;
}


.language {
    color: #ddd !important;
    cursor: pointer;
}




/* entrance-porch legend */
#table-legendation {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    bottom: 30%;   
}

#table-legendation p {
    background-color: rgba(255, 255, 255, 0.6) !important;
    display: inline;
    padding: 2px 8px;
}




/* residents evils */
.fade > .resident
{
    margin-left: -100px;
}



/* remove blue border on focus */
button:focus {outline:0 !important;}
button:active {
    outline: none !important;
}


/* botoes do cassino */
#casino-parties .btn
{
    padding: 6px 0;
}

#casino-parties .btn i + span
{
    padding-left: 6px;
}


/* galeria e lightbox */

.close-tab-white {
    background: url(../img/closew.png) top right no-repeat;
}

.lb-data .lb-close {
    position: absolute;
    /*top: 5px;
    right: 5px;*/

    right: 0px;
}

.lb-dataContainer {
    position: relative;
    padding-top: 0;
}

.lb-data {
    padding: 0;
}


/* english translation */
.english-translation
{
    display: block;
    text-align: left;
    width: 99%;
    margin: 0 auto;
}

.english-translation p
{
    display: inline-block;
    background-color: black;
    color: white;
    font-family: 'PFTempestaFiveCondensed', 'Lucida Console', monospace;
    letter-spacing: 0.2em;
    font-size: 13px;
    padding: 5px 14px;
}

.inline-block a.translate-document
{
    position: relative;
    display: block;
}

.translated-document {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(1,1,1,0.75);
    padding: 40px 10px 40px 40px;
    text-align: left;
    color: white;
    display: none;
}

.translated-text {
    overflow-y: auto;
    height: 100%;
    padding-right: 20px;
    font-family: 'DINMittelschriftStd', Helvetica, Arial, sans-serif
}


/* extra credits (get it? ha?) */
.credits-down-logos
{
    margin: 0 auto;
    width: 150%;
    margin-left: -25%;
    text-align: center;
}

.credits-down-block
{
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 40px 5px;
}

.credits-down-block p {
    text-align: left;
    margin-bottom: 15px;
}

.credits-down-block img
{
    /*max-width: 70px;*/
    max-width: 100px;
}

.credits-down-logo
{
    max-width: 80px;
    display: inline;
}


/* hack para Safari */
/* padding em botões com numeros */
@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{
    [data-board-next] span.background-gray,
    [data-board|=last] span.background-gray {
        padding-bottom: 0;
        padding-top: 8px;
    }
}

/********************************************************************************************************
|
|	RESPONSIVE MENU
|
********************************************************************************************************/

#nav-main {
	font-family: 'DINMittelschriftStd', Helvetica, Arial, sans-serif;
	transition: all 0.3s ease-out;
    position: fixed;
    height: 100%;
    margin-left: -10px;
}

#nav-main .btn {
    pointer-events: auto;
    margin-top: 6px;
}

.hidemenu {
    /*margin-left: -382px !important;*/
    margin-left: -255px !important;
    pointer-events: none;
}


.accordion-pannel {
    display: none;
    margin: 10px 0;
    /*background-color: white;*/
}





/* Botões de Share */

.accordion-pannel .no-divider {
    /*margin: 0 34px;*/
    margin: 0 15px;
}

.accordion-pannel .share {

}

.accordion-pannel .share a:hover {
    text-decoration: none;
    display: block;
    padding: 0;
    color: white;
}


.accordion-pannel .no-divider a
{
    text-indent: -9999em;
    display: inline-block;
    height: 35px;
    width: 35px;

    /*height: 50px;
    width: 50px;*/
    vertical-align: middle;
    
    /*transform: scale(3);
    margin: 30px;*/
    
    margin: 0 4px 10px 10px;
    padding: 0;
}

.accordion-pannel .no-divider a.facebook
{
    /*background: url(../img/sprite-social.png);
    background-position: 0 0;    */
    background: url(../img/facebook.svg) no-repeat top left;
    background-size: contain;
}
.accordion-pannel .no-divider a.twitter
{
    /*background: url(../img/sprite-social.png);
    background-position: -25px 0;*/
    background: url(../img/twitter.svg) no-repeat top left;
    background-size: contain;
}
.accordion-pannel .no-divider a.gplus
{
    /*background: url(../img/sprite-social.png);
    background-position: -48px 0;*/
    background: url(../img/plus.svg) no-repeat top left;
    background-size: contain;
}
.accordion-pannel .no-divider a.whats
{
    /*background: url(../img/sprite-social.png);
    background-position: -70px 0; */
    background: url(../img/whatsapp.svg) no-repeat top left;
    background-size: contain;
}
.accordion-pannel .no-divider a.copylink
{
    /*text-indent: initial;
    transform: none;
    margin: 10px 12px 45px 12px;
    vertical-align: initial;
    background: none;*/
    background: url(../img/sprite-social.png);
    background-position: -90px 0;
}






/* fim dos botões de Share */





#navmain .btn-link:hover, .btn-link:focus {
    outline: 0;
}


i.icon-main-menu 
{
	background-image: url(../img/sprites_novo.png);
    background-position: -5px -5px;
    background-size: 140%;

    border: none;
    border-radius: inherit;
    display: inline-block !important;
    opacity: inherit;
    vertical-align: middle;
    width: 27px;
    height: 27px;
    box-shadow: none;
    background-color: #808080;
    
    /*margin-top: -2px;*/

    /*background-image: url(../img/sprites_novo.png);
    background-size: 100%;
    border: 3px solid #FFF;
    border-radius: inherit;
    display: inline-block !important;
    opacity: inherit;
    vertical-align: middle;
    box-shadow: 1px 1px 2px #000;

    background-position: 0px 0px;
    border: none;
    width: 40px;
    height: 40px;
    box-shadow: none;*/
}


.nav-responsive-menu button
{
	max-width: 464px;
	float: left;
}


.nav-responsive-menu 
{
	/*max-width: 464px;*/
    max-width: 245px;
	float: left;

    /*background-color: white;*/
    background-color: black;
    height: 100%;
    padding: 0;
    list-style-type: none;
    overflow-y: auto;
    overflow-x: auto;
}

.nav-responsive-menu li
{
	/*width: 364px;*/
    /*width: 244px;*/
    width: 246px;

    /*padding: 15px 0 15px 15px;*/
    /*font-size: 22px;*/
    font-size: 16px;
    list-style-type: none;
    /*display: inline-block;*/
}

/*
.nav-responsive-menu li:hover
{
    
}
*/

.nav-responsive-menu li .accordeon-pointer {
    background-image: url(../img/sprites_novo.png);
    background-size: 100%;
    display: inline-block;
    /*background-position: 0px -45px;*/
    
    background-position: 0px -25px;
    margin-right: 15px;
    margin-top: 8px;
    
    float: right;
    border: none;
    /*width: 40px;
    height: 40px;*/
    width: 22px;
    height: 22px;

    transition: all 0.3s ease-out;
}

.nav-responsive-menu li .accordeon-pointer-click {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.nav-responsive-menu li a {
    text-decoration: none;
    display: block;
    /*padding: 15px 0 15px 15px;*/
    padding: 10px 0 10px 25px;
    /*color: #4d4d4d;*/
    color: white;

    font-family: 'PFTempestaFiveCondensed', 'Lucida Console', monospace;
    -webkit-font-smoothing: antialiased;
}


.nav-responsive-menu li a:hover
{
    color: #ffffff;
    background-color: #4d4d4d;
}

.nav-responsive-menu li .dashBorder
{
    display: block;
    width: 91%;
    margin: auto;
    border-bottom: 2px #4d4d4d dashed;
}


.responsive-hint-left 
{
    border-left: 10px solid #FFF;
    /*padding: 4px 15px 6px 15px;*/
    /*padding: 20px 6px !important;*/
    padding: 15px 6px !important;

    position: relative;
    min-height: 1px;

    letter-spacing: 0px;
    /*padding-left: 15px;
    padding-right: 15px;*/
}





#nav-main .responsive-hint-left
{
    margin-left: 5px;
    border-left: 6px solid rgba(255,255,255,0.5);
    /*padding: 4px 15px 6px 15px;*/
    /*padding: 20px 6px !important;*/
    position: relative;
    min-height: 1px;

    height: 27px;
    vertical-align: middle;

    /*letter-spacing: 0px;*/
    /*padding-left: 15px;
    padding-right: 15px;*/
}


.menu-text {
    /* display: none !important; */
    /*padding: 4px 15px 6px 15px !important;*/
    padding: 4px 8px 4px 8px !important;
    letter-spacing: 1px;
}


.nav-responsive-menu-full-backgroud
{
    width: 150%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: -1;
    transition: all 0.3s ease-out;
}



/******************************************************************************************************** 
|
| CSS do Menu para telas menores
|
********************************************************************************************************/
@media screen and (max-width: 382px) 
{
    .nav-responsive-menu li {
        /*max-width: 275px;
        width: 100%;*/
    }

    .hidemenu {
        /*margin-left: -296px !important;*/
        /*margin-left: -240px !important;*/
    }

    .accordion-pannel .no-divider a {
        height: 40px;
        width: 40px;
        margin: 0 6px 10px 0px;
    }
}



/*
@media screen and (max-width: 824px) 
{
    .responsive-hint-left {
        display: none !important;
    }

    #nav-main button {
        //position: fixed;
        //right: 0;
    }
}
*/


@media screen and (min-width: 1280px) 
{
    .row .content
    {
        /*-webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);*/
        -webkit-transform-origin: top center;
        transform-origin: top center;
    }
}





/********************************************************************************************************
|
|   HOME SCREEN
|
********************************************************************************************************/
body.is-ios section,
body.is-ios section .content
{
    /*pointer-events: auto; // not work because youtube api requires a click on player */
}

.content {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    width: 1024px;
    margin: auto;   
}


#home .content
{
    margin: auto;
    max-width: 1280px;
    padding-top: 44px;
    pointer-events: auto;
}




.home-title-block
{
    min-width: 378px;
    width: 45%;
    padding: 80px 30px;
    text-align: right;
    display: inline-block;
}

.home-title-block-2colums
{
    text-align: left;
    padding: 20px;
    background: transparent;
    margin-right: -10px;
}

.home-title-block-2colums p 
{
    font-size: 16px;
    line-height: 25px;
}

.home-title-block-2colums p strong.color-white
{
    font-size: 21px;
}

.home-title-big-font
{
    font-size: 25px;
    line-height: 20px;
    margin: 0 10px;

    /*margin: 0 6px;*/

    text-decoration: none;
}


.home-title-minor-font
{
    font-size: 12px;
    
    /*margin: 4px 0;*/
    
    letter-spacing: 1px;
    text-decoration: none;
}

.home-title-block a
{
    text-decoration: none;
    display: block;
    color: white;
}

.home-title-block a span 
{
    text-decoration: none !important;
}





.home-ghost-block 
{
    height: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/******************************************************************************************************** 
|
| CSS da Home para telas menores
|
********************************************************************************************************/
@media screen and (max-width: 1023px) 
{

    /* tela de apresentação */
    #presents .content
    {
        padding-top: 20px;
        margin: auto;
        width: 100%;
        height: 100%;
        position: relative;
        top: auto;
        left: auto;
    }

    #presents .slide {
        height: 100%;
        /* vertical-align: middle; */
        display: table;
        margin: auto;
    }

    #presents .slide p {
        vertical-align: middle;
    }

    #presents .content div p.active
    {
        display: table-cell;
    }

    /* Imagens da apresentação */
    .presents-image {
        display: block !important;
        margin: 40px auto !important;
    }






    #home .content
    {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        max-width: auto;
        padding-right: 0;
    }

    #home {
        padding-right: 0;
        padding-left: 0;
        padding-top: 40px;
    }


    .ignore-on-ios,
    .ignore-on-ios a,
    .ignore-on-ios i,
    .ignore-on-ios span,
    .ignore-on-ios p
    {
        pointer-events: none !important;
    }

    
    .home-title-block
    {
        /*min-width: auto;
        width: 88%;
        margin: 30px 20px 0 20px;*/

        min-width: auto;
        width: 95%;
        margin: 0 10px 0 10px;
        /*padding: 30px;*/
        padding: 5px;
    }


    #home .home-title-block-2colums p
    {
        padding: 5px;
        font-size: 14px;
    }

    
    .home-title-big-font
    {
        font-size: 18px;
    }

    /*
    .home-title-minor-font
    {
        font-size: 16px;
        margin: 0;
    }

    .home-title-block-2colums {
        padding: 0;
        margin: 20px;
    }*/

    .fullscreen {
        display: none;
    }
}

@media screen and (min-width: 1240px) 
{
    /*
    .home-title-big-font
    {        
        font-size: 36px;
    }

    home .play {
        margin: -18px 10px 0 0;
    }
    */
}

/*************************************************
// Item escondido que deixa a caixa da Home alinhada
*************************************************/

.home-hidden-content {
    opacity: 0;
    display: none;
}

@media screen and (max-width: 1002px) and (min-width: 825px) 
{
    .home-hidden-content {
        display: block;
    }
}




/********************************************************************************************************
|
|   MOTIVATION SCREEN
|
********************************************************************************************************/
@media screen and (max-width: 1023px) 
{
    #motivation .content
    {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        margin: 0;
        /*padding-top: 80px;*/
    }

    #motivation .motivation-image
    {
        height: 230px;
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
    }

    #motivation .content-left
    {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }


    #motivation .content-right
    {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: initial;
        display: block;
    }
     
}   





/********************************************************************************************************
|
|   MOVIE SCREEN
|
********************************************************************************************************/
@media screen and (max-width: 1023px) 
{
    #movie .content
    {
        margin: auto;
        width: 100%;
        min-width: 1px;
        padding-top: 41px;
        position: inherit;
        top: 0;
        left: 0;
    }


    #movie .movietop
    {
        margin: 0;
        width: 100%;
        float: none;
    }

    #movie .awards
    {
        width: 100%;  
        float: none;
        margin: 20px 0;
    }

    #movie .whodid
    {
        float: none; 
        margin: auto;
    }

    #movie .highlight
    {
        position: relative;
        float: none;
        margin: auto;
    }

    #movie .highlightcontainer
    {
        margin: 25px auto;
    }

    #movie .whodid .row 
    {
        max-width: 488px;
    }
}


/* Especifico para os textos dos créditos na tela do Movie */
@media screen and (max-width: 488px) 
{
    #movie .whodid .whodid-right,
    #movie .whodid .whodid-left
    {
        width: 100%;
        margin: 0;
        float: none;
        text-align: center;
    }
}






/********************************************************************************************************
|
|   CREDITS SCREEN
|
********************************************************************************************************/
@media screen and (max-width: 1023px) 
{
    #credits .credits-left,
    #credits .credits-right
    {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 13px;
        padding: 0;
        margin-left: 0;
        margin-bottom: 0;
    }

    .credits-fix {
        height: 30px;
    }

    #credits .column-row 
    {
        margin-bottom: 20px;
    }
        
}



/* Especifico para os icones na tela */
@media screen and (max-width: 408px) 
{
    #credits .credits-left a,
    #credits .credits-right a
    {
        display: block;
    }

    #credits .credits-left img,
    #credits .credits-right img
    {
        margin: 20px 0;
    }
}




/********************************************************************************************************
|
|   CINEJOURNAL SCREEN
|
********************************************************************************************************/
@media screen and (max-width: 794px) 
{
    #cinejournal .play-cinejournal,
    #cinejournal .film-cinejournal
    {
        display: block;
        margin: auto;
        padding: 7px;
    }

    .no-br-in-mobile {
        display: none;
    }
}







/********************************************************************************************************
|
|   WIFI WARNING SCREEN, ON HOME
|
********************************************************************************************************/



#tutorial > div.wifi-background 
{
    background-image: url(../img/circulo.svg);
    background-position: center;
}



#tutorial .wifi-icon
{
    background: url(../img/wifi_icon.png) no-repeat;
    background-size: 35%;
    background-position: top 30px center;
    height: 150px !important;
}



#tutorial p.wifi-warning 
{
    font-family: 'DINMittelschriftStd', Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
}

#tutorial p.wifi-warning span {
    font-size: 24px;
    font-size: 38px;
    line-height: 50px;
}


/*font-family: 'DINMittelschriftStd', Helvetica, Arial, sans-serif;*/

/********************************************************************************************************
|
|   TUTORIAL SCREEN, ON MAP
|
********************************************************************************************************/
#tutorial
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000; /* a frente inclusive do menu */
    background-color: rgba(0,0,0,0.7);
    display: table;
    width: 100%;
    height: 100%;
}


#tutorial > div {
    display: none;
    margin: auto;
    vertical-align: middle;
}

#tutorial > div.active {
    display: table-cell;
}

#tutorial > div.active > div {
    text-align: center;
    /*margin-top: 30px;*/
    margin-top: 10px;
}



#tutorial span.tutorialHandContainer 
{
    display: block;
    margin: auto;
    border: none;
    
    /*width: 200px;
    height: 200px;*/
    width: 300px;
    height: 200px;

    overflow: hidden;
    position: relative;
}


#tutorial span.tutorialBGMap 
{
    display: block;
    margin: -10%;
    border: none;
    width: 200%;
    height: 200%;
    transform: scale(0.9);
    background-image: url(../img/background-map.jpg);
    background-position: -1000px 700px;

    -webkit-animation: myOrbit 5s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 5s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 5s linear infinite; /* Opera 12+ */
            animation: myOrbit 5s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}


#tutorial span.handContent 
{
    display: block;
    margin: auto;
    background-image: url(../img/mao_pura.png);
    background-size: 100%;
    border: none;
    width: 75px;
    height: 75px;

    z-index: 1;
    position: absolute;
    top: 30%;
    left: 28%;

    margin-bottom: 30px;
    /*position: absolute;*/
    /*left: 315px;    
    top: 143px;*/

    -webkit-animation: handAnimation 5s steps(2) infinite; /* Chrome, Safari 5 */
       -moz-animation: handAnimation 5s steps(2) infinite; /* Firefox 5-15 */
         -o-animation: handAnimation 5s steps(2) infinite; /* Opera 12+ */
            animation: handAnimation 5s steps(4) infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
}


/* hand sprite animation */

@-webkit-keyframes handAnimation {
    
    100% {
        background-position: 0 128px;
    }
}

@-moz-keyframes handAnimation {
    
    100% {
        background-position: 0 128px;
    }
}

@-o-keyframes handAnimation {
    
    100% {
        background-position: 0 128px;
    }
}

@keyframes handAnimation {
    
    
    100% {
        background-position: 0 896px;
    }

}




/* close hand - move down right - move u left - open hand */

@-webkit-keyframes myOrbit {
    0% {
        -webkit-transform:  translate(-70px,-70px)  ;
    }
    33% {
        -webkit-transform:  translate(42px,38px)  ;
    }
    66% {
        -webkit-transform:  translate(-70px,-70px)  ;
    }
    100% {
        -webkit-transform:  translate(-70px,-70px)  ;
    }
}

@-moz-keyframes myOrbit {
    0% {
        -moz-transform:  translate(-70px,-70px)  ;
    }
    33% {
        -moz-transform:  translate(42px,38px)  ;
    }
    66% {
        -moz-transform:  translate(-70px,-70px)  ;
    }
    100% {
        -moz-transform:  translate(-70px,-70px)  ;
    }
}

@-o-keyframes myOrbit {
    0% {
        -o-transform:  translate(-70px,-70px)  ;
    }
    33% {
        -o-transform:  translate(42px,38px)  ;
    }
    66% {
        -o-transform:  translate(-70px,-70px)  ;
    }
    100% {
        -o-transform:  translate(-70px,-70px)  ;
    }
}

@keyframes myOrbit {
    0% {
        transform:  translate(-70px,-70px)  ;
    }
    33% {
        transform:  translate(42px,38px)  ;
    }
    66% {
        transform:  translate(-70px,-70px)  ;
    }
    100% {
        transform:  translate(-70px,-70px)  ;
    }
}





/* circle
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(25px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(25px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(25px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(25px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
*/


/* cross 
@-webkit-keyframes myOrbit {
    0% {
        -webkit-transform:  translate(-27px,-50px)  ;
    }
    25% {
        -webkit-transform:  translate(-27px,1px)  ;
    }
    50% {
        -webkit-transform:  translate(-50px,-27px)  ;
    }
    75% {
        -webkit-transform:  translate(1px,-27px)  ;
    }
    100% {
        -webkit-transform:  translate(-27px,-50px)  ;
    }
}

@-moz-keyframes myOrbit {
    0% {
        -moz-transform:  translate(-27px,-50px)  ;
    }
    25% {
        -moz-transform:  translate(-27px,1px)  ;
    }
    50% {
        -moz-transform:  translate(-50px,-27px)  ;
    }
    75% {
        -moz-transform:  translate(1px,-27px)  ;
    }
    100% {
        -moz-transform:  translate(-27px,-50px)  ;
    }
}

@-o-keyframes myOrbit {
    0% {
        -o-transform:  translate(-27px,-50px)  ;
    }
    25% {
        -o-transform:  translate(-27px,1px)  ;
    }
    50% {
        -o-transform:  translate(-50px,-27px)  ;
    }
    75% {
        -o-transform:  translate(1px,-27px)  ;
    }
    100% {
        -o-transform:  translate(-27px,-50px)  ;
    }
}

@keyframes myOrbit {
    0% {
        transform:  translate(-27px,-50px)  ;
    }
    25% {
        transform:  translate(-27px,1px)  ;
    }
    50% {
        transform:  translate(-50px,-27px)  ;
    }
    75% {
        transform:  translate(1px,-27px)  ;
    }
    100% {
        transform:  translate(-27px,-50px)  ;
    }
}
*/





#tutorial p {
    margin: auto;
    text-align: center;
    color: white;
    font-size: 16px;
    font-family: 'PFTempestaFiveCondensed', 'Lucida Console', monospace;
    padding: 0 50px;
}

#tutorial button {
    margin: auto;
    display: block;

    background-color: transparent;
    background-size: 100%;
    border: 3px solid #FFF;
    border-radius: 100%;
    opacity: inherit;
    vertical-align: middle;

    width: 50px;
    height: 50px;
    color: white;
    /* box-shadow: 1px 1px 2px #000*/
}

#tutorial span.tutorial-point {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #fff;
    
    /*width:12px;
    height:12px;*/
    /*width:8px;
    height:8px;*/
    width:10px;
    height:10px;
    
    margin: auto 1px;
    display: inline-block;
}

#tutorial span.tutorial-point.active {
    background-color: #fff;
}




#tutorial span.colorContent 
{
    margin: auto;
    max-width: 700px;
    display: block;
    text-align: center;
}


#tutorial span.colorContent > span {
    width: 200px;
    display: inline-block;
}


#tutorial span.map-point {
    /*-webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;*/
    width:50px;
    height:50px;
    /*border:1px solid #fff;*/
    margin: auto;
    display: inline-block;
}

#tutorial span.map-point.bloc {
    background-color: #7a043f;
}

#tutorial span.map-point.visit {
    background-color: #ca5c31;
}

#tutorial span.map-point.nex {
    background-color: #00b100;
}





/*******************************************************************************************************
|
|   INTERNAL MAP SCREENS
|
********************************************************************************************************/

#administration-office      .content,
#amparo                     .content,
#beach                      .content,
#credits                    .content,
#casino                     .content,
#catolic-church             .content,
#cemetery                   .content,
#dining-hall                .content,
#elma-and-juraci            .content,
#entrance-porch             .content,
#eva                        .content,
#evangelical-church         .content,
#franciscan-sisters-house   .content,
#hospital                   .content,
#joao-and-theresina         .content,
#joao-saldanha              .content,
#marlene-and-nair           .content,
#square                     .content
{
    
    width: 1024px;
    height: 960px;
    
    /*
    width: 1280px;
    height: 960px;
    */
    position: relative;
    padding-top: 100px !important;
}

#credits                    .content {
    height: auto;
}



#cinejournal                .content 
{
    width: 1024px;
    padding-top: 30px !important;
}



/* tabs que ficam encima */
#administration-office      .tab-content,
#amparo                     .tab-content,
#casino                     .tab-content,
#catolic-church             .tab-content,
#cemetery                   .tab-content,
#cinejournal                .tab-content,
#credits                    .tab-content,
#elma-and-juraci            .tab-content,
#entrance-porch             .tab-content,
#eva                        .tab-content,
#evangelical-church         .tab-content,
#franciscan-sisters-house   .tab-content,
#hospital                   .tab-content,
#joao-and-theresina         .tab-content,
#joao-saldanha              .tab-content,
#marlene-and-nair           .tab-content,
#square                     .tab-content
{
    position: relative;
    /*height: 100%;*/
}



/* tabs que ficam embaixo */
#dining-hall                .tab-content,
#beach                      .tab-content
{

}




#administration-office      .block-bottom,
#amparo                     .block-bottom,
#beach                      .block-bottom,
#casino                     .block-bottom,
#catolic-church             .block-bottom,
#cemetery                   .block-bottom,
#cinejournal                .block-bottom,
#credits                    .block-bottom,
#dining-hall                .block-bottom,
#entrance-porch             .block-bottom,
#evangelical-church         .block-bottom,
#franciscan-sisters-house   .block-bottom,
#hospital                   .block-bottom,
#square                     .block-bottom
{
    position: absolute;
}


/*
#eva                        .block-bottom,
#joao-and-theresina         .block-bottom,
#joao-saldanha              .block-bottom,
#marlene-and-nair           .block-bottom,
#elma-and-juraci            .block-bottom,
*/


#administration-office      .buttons-bottom,
#amparo                     .buttons-bottom,
#beach                      .buttons-bottom,
#casino                     .buttons-bottom,
#catolic-church             .buttons-bottom,
#cemetery                   .buttons-bottom,
#cinejournal                .buttons-bottom,
#credits                    .buttons-bottom,
#dining-hall                .buttons-bottom,
#elma-and-juraci            .buttons-bottom,
#entrance-porch             .buttons-bottom,
#eva                        .buttons-bottom,
#evangelical-church         .buttons-bottom,
#franciscan-sisters-house   .buttons-bottom,
#hospital                   .buttons-bottom,
#joao-and-theresina         .buttons-bottom,
#joao-saldanha              .buttons-bottom,
#marlene-and-nair           .buttons-bottom,
#square                     .buttons-bottom
{
    position: absolute;
    bottom: 20px;
}







#administration-office      img.image-fit,
#amparo                     img.image-fit,
#beach                      img.image-fit,
#casino                     img.image-fit,
#catolic-church             img.image-fit,
#cemetery                   img.image-fit,
#cinejournal                img.image-fit,
#credits                    img.image-fit,
#dining-hall                img.image-fit,
#elma-and-juraci            img.image-fit,
#entrance-porch             img.image-fit,
#eva                        img.image-fit,
#evangelical-church         img.image-fit,
#franciscan-sisters-house   img.image-fit,
#hospital                   img.image-fit,
#joao-and-theresina         img.image-fit,
#joao-saldanha              img.image-fit,
#marlene-and-nair           img.image-fit,
#square                     img.image-fit
{
    max-height: 600px;
}






#administration-office      .tab-content .col-md-offset-2,
#amparo                     .tab-content .col-md-offset-2,
#beach                      .tab-content .col-md-offset-2,
#casino                     .tab-content .col-md-offset-2,
#catolic-church             .tab-content .col-md-offset-2,
#cemetery                   .tab-content .col-md-offset-2,
#cinejournal                .tab-content .col-md-offset-2,
#credits                    .tab-content .col-md-offset-2,
#dining-hall                .tab-content .col-md-offset-2,
#elma-and-juraci            .tab-content .col-md-offset-2,
#entrance-porch             .tab-content .col-md-offset-2,
#eva                        .tab-content .col-md-offset-2,
#evangelical-church         .tab-content .col-md-offset-2,
#franciscan-sisters-house   .tab-content .col-md-offset-2,
#hospital                   .tab-content .col-md-offset-2,
#joao-and-theresina         .tab-content .col-md-offset-2,
#joao-saldanha              .tab-content .col-md-offset-2,
#marlene-and-nair           .tab-content .col-md-offset-2,
#square                     .tab-content .col-md-offset-2
{
    margin-left: 0;
}



#administration-office      .tab-content .col-md-8,
#amparo                     .tab-content .col-md-8,
#beach                      .tab-content .col-md-8,
#casino                     .tab-content .col-md-8,
#catolic-church             .tab-content .col-md-8,
#cemetery                   .tab-content .col-md-8,
#cinejournal                .tab-content .col-md-8,
#credits                    .tab-content .col-md-8,
#dining-hall                .tab-content .col-md-8,
/*#elma-and-juraci            .tab-content .col-md-8, - não reinserir*/
#entrance-porch             .tab-content .col-md-8,
#eva                        .tab-content .col-md-8,
#evangelical-church         .tab-content .col-md-8,
#franciscan-sisters-house   .tab-content .col-md-8,
#hospital                   .tab-content .col-md-8,
#joao-and-theresina         .tab-content .col-md-8,
#joao-saldanha              .tab-content .col-md-8,
#marlene-and-nair           .tab-content .col-md-8,
#square                     .tab-content .col-md-8
{
    width: 100%;
}

#elma-and-juraci            .tab-content .col-md-8
{
    width: 70%;   
}


.swiper-pagination {
    display: none !important;
}



.catolic-gallery {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    margin: auto;
    width: 900px;
    height: 666px; 
}



@media screen and (max-width: 1239px)
{
    .credits-down-logos
    {
        width: 100%;
        margin-left: 0;
    }
}



/*
** Mobile Map Pages
*/

@media screen and (max-width: 1023px)
{
    /* player */
    #video-controls
    {
        width: 80%;
        margin: 0 10%;
    }


    /* wifi */
    #tutorial > div.wifi-background 
    {
        background-image: none;
    }



    #cinejournal                .content,
    #credits                    .content,
    #interact                   .content
    {
        height: 100%;
        width: 96%;
        margin: 2%;
        pointer-events: auto;
        overflow-y: auto;

        padding-top: 0 !important;
        margin-top: 80px;
    }


    #interact .interact-top
    {
        margin: 0 auto;
        padding-bottom: 10px;
    }

    #interact p.interact-mail
    {
        margin: 0 auto;
        padding-bottom: 10px;   
    }

    #interact .interact-mail a {
        font-size: 14px;
        font-size: 4vw;
        line-height: 15vw;
    }   
    


    .credits-down-logos
    {
        width: 100%;
        margin-left: 0;
    }
    

    /* 
    * Title and Subtitle
    */
    header > nav > span.title,
    header > nav > span.subtitle 
    {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 200px;
        overflow: hidden;
        /*display: inline-block;*/
    }

    header > nav > span.subtitle 
    {
        display: none !important;
    }


    header nav, footer nav {
        letter-spacing: 0;
    }



    #administration-office      .content,
    #amparo                     .content,
    #beach                      .content,
    #casino                     .content,
    #catolic-church             .content,
    #cemetery                   .content,
    #dining-hall                .content,
    #elma-and-juraci            .content,
    #entrance-porch             .content,
    #eva                        .content,
    #evangelical-church         .content,
    #franciscan-sisters-house   .content,
    #hospital                   .content,
    #joao-and-theresina         .content,
    #joao-saldanha              .content,
    #marlene-and-nair           .content,
    #square                     .content
    {
        height: 85%;
        width: 96%;
        margin: 2%;
        pointer-events: auto;
        overflow-y: auto;

        padding-top: 0 !important;
        margin-top: 80px;
    }



    #square                     .buttons-bottom,
    #administration-office      .buttons-bottom,
    #amparo                     .buttons-bottom,
    #beach                      .buttons-bottom,
    #casino                     .buttons-bottom,
    #catolic-church             .buttons-bottom,
    #cemetery                   .buttons-bottom,
    #cinejournal                .buttons-bottom,
    #credits                    .buttons-bottom,
    #dining-hall                .buttons-bottom,
    #entrance-porch             .buttons-bottom,
    #evangelical-church         .buttons-bottom,
    #franciscan-sisters-house   .buttons-bottom,
    #hospital                   .buttons-bottom
    {
        position: relative;
        clear: both;
        top: 10px;
        margin-bottom: 20px;
    }


    #administration-office      .buttons-bottom ul,
    #amparo                     .buttons-bottom ul,
    #beach                      .buttons-bottom ul,
    #casino                     .buttons-bottom ul,
    #catolic-church             .buttons-bottom ul,
    #cemetery                   .buttons-bottom ul,
    #cinejournal                .buttons-bottom ul,
    #credits                    .buttons-bottom ul,
    #dining-hall                .buttons-bottom ul,
    #elma-and-juraci            .buttons-bottom ul,
    #entrance-porch             .buttons-bottom ul,
    #eva                        .buttons-bottom ul,
    #evangelical-church         .buttons-bottom ul,
    #franciscan-sisters-house   .buttons-bottom ul,
    #hospital                   .buttons-bottom ul,
    #joao-and-theresina         .buttons-bottom ul,
    #joao-saldanha              .buttons-bottom ul,
    #marlene-and-nair           .buttons-bottom ul,
    #square                     .buttons-bottom ul
    {
        text-align: left;
        margin: 0 auto;
        max-width: 320px;
        /*margin-top: 40px;*/
    }



    #administration-office      .buttons-bottom ul li,
    #amparo                     .buttons-bottom ul li,
    #beach                      .buttons-bottom ul li,
    #casino                     .buttons-bottom ul li,
    #catolic-church             .buttons-bottom ul li,
    #cemetery                   .buttons-bottom ul li,
    #cinejournal                .buttons-bottom ul li,
    #credits                    .buttons-bottom ul li,
    #dining-hall                .buttons-bottom ul li,
    #square                     .buttons-bottom ul li,
    #entrance-porch             .buttons-bottom ul li,
    #franciscan-sisters-house   .buttons-bottom ul li,
    #hospital                   .buttons-bottom ul li,
    #evangelical-church         .buttons-bottom ul li,
    #eva                        .buttons-bottom ul li 
    {
        display: block;
        margin-bottom: 5px;
    }



    #administration-office      .buttons-bottom a,
    #amparo                     .buttons-bottom a,
    #beach                      .buttons-bottom a,
    #casino                     .buttons-bottom a,
    #catolic-church             .buttons-bottom a,
    #cemetery                   .buttons-bottom a,
    #cinejournal                .buttons-bottom a,
    #credits                    .buttons-bottom a,
    #dining-hall                .buttons-bottom a,
    #elma-and-juraci            .buttons-bottom a,
    #entrance-porch             .buttons-bottom a,
    #eva                        .buttons-bottom a,
    #evangelical-church         .buttons-bottom a,
    #franciscan-sisters-house   .buttons-bottom a,
    #hospital                   .buttons-bottom a,
    #joao-and-theresina         .buttons-bottom a,
    #joao-saldanha              .buttons-bottom a,
    #marlene-and-nair           .buttons-bottom a,
    #square                     .buttons-bottom a
    {
        font-size: 14px;
    }



    /* entrance-porch */
    #entrance-porch {
        padding-left: 0;
        padding-right: 0;
    }

    #entrance-porch .buttons {
        padding: 0;
        text-align: center;

        bottom: 0;
        width: 100%;
        position: absolute;
    }

    #entrance-porch .buttons a {
        line-height: 100px !important;
        float: none;
    }

    #entrance-porch .map-brazil {
        height: auto;
    }


    #table-legendation {
        position: relative;
        bottom: 0;
        margin-bottom: 20px;
    }

    #table-legendation p {
        display: block;
    }

    /* 
    shadow
    */
    .shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }


    /*
    sub itens da administração
    */
    #administration-office .tab-pane .col-xs-3,
    #administration-office .tab-pane .col-xs-2 {
        width: 100%;
        float: none;
        text-align: center !important;
    }

    /*
    galeria fotos leprose administração
    */
    #administration-office-leprosy-representation div {
        width: 100%;
        float: none;
        clear: both;
        text-align: center;
        margin-bottom: 10px;
    }

    /* submenus dos menus principais */
    #administration-office .buttons-bottom ul li ul li a {
        font-size: 10px;
    }

    /* submenus dos textos  */
    #administration-office .list-name ul li,
    #administration-office .pdf-button
    {
        display: block;
        padding: 5px 20px;
        margin-left: 0 !important;
        width: 100%;
        text-align: center !important;
    }






    /*
        hospital
    */
    .hospital-specialist-image {
        float: none;
    }

    .submenu-videos {
        float: none;
        width: 100%;   
    }

    .hospital-specialist-image img {
        position: relative;
        margin: auto;
    }

     /* imagens internas das galerais */
    #hospital img.image-fit {
        
        /*max-width: none;*/
        height: 25% !important;
    }





    /* dinning hall e beach */
    #beach                      .block-bottom,
    #dining-hall                .block-bottom
    {
        position: relative;
        bottom: auto;
    }

    #beach .block-icon-info a,
    #beach .block-icon-info:after
    {
        right: 0px;
        position: relative;
        display: inline-block
    }

    #beach .block-icon-info:after {
        right: 45px;
    }
    



    /* catolic church */
    .catolic-gallery {
        width: 100%;
    }




    /* cassino */
    #casino-parties {
        margin-top: 10% !important;
        position: relative;
        padding: 15px;
        width: 100%;
        margin: 10px 0;
    }
    
    #casino-parties .col-xs-offset-3 {
        margin-left: 0;
    }

    #casino-parties .btn i + span
    {
        font-size: 11px;
    }




    /* eva */
    #eva-default .col-xs-offset-1 {
        margin-left: 0;
    }

    #eva-default .col-xs-4 {
        width: 100%;
    }

    #eva .tab-content p {
        margin-bottom: 0;
    }

    #eva-default-1 {
        position: relative !important;
        bottom: 0;
    }






    /* elma e juraci */
    #elma-and-juraci-default .col-xs-offset-1 {
        margin-left: 0;
    }

    #elma-and-juraci .tab-content .col-md-8 {
        width: 100%;
    }

    #elma-and-juraci .tab-content p {
        margin-bottom: 0;
    }

    #elma-and-juraci-default-1 {
        position: relative !important;
        bottom: 0;
    }






    /* joao and theresina */
    #joao-and-theresina-default .col-xs-offset-1 {
        margin-left: 0;
    }

    #joao-and-theresina-default .col-xs-6 {
        width: 100%;
    }

    #joao-and-theresina .tab-content p {
        margin-bottom: 0;
    }

    #joao-and-theresina-default-1 {
        position: relative !important;
        bottom: 0;
    }






    /* marlene e nair */
    #marlene-and-nair-default .col-xs-offset-1 {
        margin-left: 0;
    }

    #marlene-and-nair-default .col-xs-5 {
        width: 100%;
    }

    #marlene-and-nair .tab-content p {
        margin-bottom: 0;
    }

    #marlene-and-nair .block-bottom {
        position: relative !important;
        bottom: 0;
    }







    /* joao saldanha */
    #joao-saldanha-default .col-xs-offset-1 {
        margin-left: 0;
    }

    #joao-saldanha-default .col-xs-5 {
        width: 100%;
    }

    #joao-saldanha .tab-content p {
        margin-bottom: 0;
    }

    #joao-saldanha .block-bottom {
        position: relative !important;
        bottom: 0;
    }
    






    #elma-and-juraci            .buttons-bottom,
    #eva                        .buttons-bottom,
    #joao-and-theresina         .buttons-bottom,
    #joao-saldanha              .buttons-bottom,
    #marlene-and-nair           .buttons-bottom
    {
        margin: auto;
        position: relative;
    }



    #elma-and-juraci            .buttons-bottom ul,
    #joao-and-theresina         .buttons-bottom ul,
    #joao-saldanha              .buttons-bottom ul,
    #eva                        .buttons-bottom ul,
    #marlene-and-nair           .buttons-bottom ul
    {
        text-align: center;
    }



    #elma-and-juraci            .buttons-bottom ul li,
    #joao-and-theresina         .buttons-bottom ul li,
    #joao-saldanha              .buttons-bottom ul li,
    #eva                        .buttons-bottom ul li,
    #marlene-and-nair           .buttons-bottom ul li
    {
        /*display: inline-block;*/
    }







    /* swipers buttons */
    .swiper-previous, .swiper-next 
    {
        position: absolute;
    }


   



    /* sublists */
    .sublist a {
        margin-left: 0;
    }

    .sublist.sublist-high:after,
    .sublist.sublist-middle:after
    {
        height: 10px;
    }




    /* 
    franciscan-sister 
    photo galery 
     */
    .fix-gallery
    {
        height: auto;
        text-align: center;
    }

    .gallery a {
        position: relative
    }

    .fix-gallery .inline-block a,
    .fix-gallery a,
    #evangelical-church-othertimes-1
    /*#franciscan-sisters-house-photos-1,
    #franciscan-sisters-house-photos-2,
    #franciscan-sisters-house-photos-3*/
    {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        text-align: center;
        margin: 5px auto;
    }



    /* cemetery */
    #cemetery-default > div {
        padding-left: 0;
        padding-right: 0;    
    }
}