/* Desktop maiores */
@media (min-width: 1600px) {
    
    #contentHospedagens, #menu, #content, #map, #termo {
        height: 100%;
    }

    #menu {
        position: absolute;
        width: 200px;
    }

    #contentHospedagens, #content {
        width: 30%;
        float: right;
        background: rgba(0,0,0,0.8);
        padding-left: 30px;
        padding-right: 30px;
        display: none;
        font-size: 16px;
        line-height:30px;
    }

    #map {
        width: auto;
        margin-left: 200px;
    }

    #mapContainer {
        float: left;
        position: relative;
    }
    
    /***** CSS DO MENU!!!!!!! *****/
    #divCima, #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        width: 100px;
    }

    #divGrande, #divCima, #divBaixo, #divEscondida{
        height: auto;
    }

    #divGrande, #divCima, #divCimaPeq, 
    #divBaixo, #divEscondida, #divEscondidaPeq, 
    #divBaixoPeq{
        float: left;
    }

    #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        height: 100px;
        text-align: center;
        font-size: 12px;
        background: rgba(0,0,0,0.8);
        padding: 15px;
        line-height: 20px;
    }

    #divCimaPeq:hover, #divEscondidaPeq:hover, #divBaixoPeq:hover{
        background: #CFA100;
    }

    #divGrande{
        z-index: 99;
        position: fixed;
    }

    #divBaixo{
        width: 100%;
    }

    #divEscondida{
        width: auto;
        display: none;
    }

    #menuIMG{
        border: 0px;
        padding-top: 3px;
    }
    /***** FIM DO CSS DO MENU!!!!!!! *****/
    
    /****** CSS CAPITAIS!!!!!!! ******/
    .capitalHover{
        display: none;
        vertical-align: top;
        font-size: 18px;
    }

    .capitalAtiva{
        vertical-align: top;
        font-size: 18px;
    }

    #Brasilia, #BeloHorizonte, #Fortaleza, 
    #Recife, #RioDeJaneiro, #Salvador,
    #Natal, #Manaus, #Cuiaba,
    #PortoAlegre, #SaoPaulo, #Curitiba{
        height: 30px !important;
    }

    #Brasilia{
        margin-left: 340px;
        margin-top: -280px;
    }

    #BeloHorizonte{
        margin-left: 400px;
        margin-top: 30px;
    }

    #Fortaleza{
        margin-left: 470px;
        margin-top: -250px;
    }

    #Recife{
        margin-left: 515px;
        margin-top: 25px;
    }

    #RioDeJaneiro{
        margin-left: 420px;
        margin-top: 168px;
    }

    #Salvador{
        margin-left: 470px;
        margin-top: -172px;
    }
    
    #Natal{
        margin-left: 510px;
        margin-top: -120px;
    }
    
    #Manaus{
        margin-left: 180px;
        margin-top: -65px;
    }
    
    #Cuiaba{
        margin-left: 225px;
        margin-top: 135px;
    }
    
    #PortoAlegre{
        margin-left: 310px;
        margin-top: 170px;
    }
    
    #SaoPaulo{
        margin-left: 350px;
        margin-top: -110px;
    }
    
    #Curitiba{
        margin-left: 320px;
        margin-top: -5px;
    }
    /***** FIM CSS CAPITAIS!!!!!!! ****/   
    
    #img{
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 100%;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;

    }
    
    #divGrande{
        display: block;
    }   
    
    #menu {
        position: absolute;
    }
    
    #menuMobile{
        display: none;
    }
    
    #mapMobile{
        display: none;
    }
    
    #termo{
        margin-left: 20%;
        width:  60%;
    }

    #texto{
        position: relative;
        top: 50%;
        margin-top: -293.5px;
        padding-top: 3px;
        padding-left: 13px;
        padding-right: 13px;
        float: left;
        font-size: 12pt;
        background: rgba(0,0,0,0.8);
    }
}

@media (min-width: 1400px) and (max-width: 1599px){
    
    #contentHospedagens, #menu, #content, #map, #termo {
        height: 100%;
    }

    #menu {
        position: absolute;
        width: 200px;
    }

    #contentHospedagens, #content {
        width: 35%;
        float: right;
        background: rgba(0,0,0,0.8);
        padding-left: 30px;
        padding-right: 30px;
        display: none;
        font-size: 14px;
        line-height:23px;
    }

    #map {
        width: auto;
        margin-left: 200px;
    }

    #mapContainer {
        float: left;
        position: relative;
    }
    
    /***** CSS DO MENU!!!!!!! *****/
    #divCima, #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        width: 100px;
    }

    #divGrande, #divCima, #divBaixo, #divEscondida{
        height: auto;
    }

    #divGrande, #divCima, #divCimaPeq, 
    #divBaixo, #divEscondida, #divEscondidaPeq, 
    #divBaixoPeq{
        float: left;
    }

    #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        height: 100px;
        text-align: center;
        font-size: 12px;
        background: rgba(0,0,0,0.8);
        padding: 15px;
        line-height: 20px;
    }

    #divCimaPeq:hover, #divEscondidaPeq:hover, #divBaixoPeq:hover{
        background: #CFA100;
    }

    #divGrande{
        z-index: 99;
        position: fixed;
    }

    #divBaixo{
        width: 100%;
    }

    #divEscondida{
        width: auto;
        display: none;
    }

    #menuIMG{
        border: 0px;
        padding-top: 3px;
    }
    /***** FIM DO CSS DO MENU!!!!!!! *****/
    
    /****** CSS CAPITAIS!!!!!!! ******/
    .capitalHover{
        display: none;
        vertical-align: top;
        font-size: 18px;
    }

    .capitalAtiva{
        vertical-align: top;
        font-size: 18px;
    }

    #Brasilia, #BeloHorizonte, #Fortaleza, 
    #Recife, #RioDeJaneiro, #Salvador,
    #Natal, #Manaus, #Cuiaba,
    #PortoAlegre, #SaoPaulo, #Curitiba{
        height: 30px !important;
    }

    #Brasilia{
        margin-left: 340px;
        margin-top: -280px;
    }

    #BeloHorizonte{
        margin-left: 400px;
        margin-top: 30px;
    }

    #Fortaleza{
        margin-left: 470px;
        margin-top: -250px;
    }

    #Recife{
        margin-left: 515px;
        margin-top: 25px;
    }

    #RioDeJaneiro{
        margin-left: 420px;
        margin-top: 168px;
    }

    #Salvador{
        margin-left: 470px;
        margin-top: -172px;
    }
    
    #Natal{
        margin-left: 510px;
        margin-top:-120px;
    }
    
    #Manaus{
        margin-left: 180px;
        margin-top: -65px;
    }
    
    #Cuiaba{
        margin-left: 225px;
        margin-top: 135px;
    }
    
    #PortoAlegre{
        margin-left: 310px;
        margin-top: 170px;
    }
    
    #SaoPaulo{
        margin-left: 350px;
        margin-top: -110px;
    }
    
    #Curitiba{
        margin-left: 320px;
        margin-top: -5px;
    }
    /***** FIM CSS CAPITAIS!!!!!!! ****/   
    
    #img{
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 100%;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;

    }
    
    #divGrande{
        display: block;
    }   
    
    #menu {
        position: absolute;
    }
    
    #menuMobile{
        display: none;
    }
    
    #mapMobile{
        display: none;
    }
    
    #termo{
        margin-left: 20%;
        width:  60%;
    }

    #texto{
        position: relative;
        top: 50%;
        margin-top: -293.5px;
        padding-top: 3px;
        padding-left: 13px;
        padding-right: 13px;
        float: left;
        font-size: 12pt;
        background: rgba(0,0,0,0.8);
    }
}

@media (min-width: 1200px) and (max-width: 1399px){
    
    #contentHospedagens, #menu, #content, #map, #termo {
        height: 100%;
    }

    #menu {
        position: absolute;
        width: 200px;
    }

    #contentHospedagens, #content {
        width: 35%;
        float: right;
        background: rgba(0,0,0,0.8);
        padding-left: 30px;
        padding-right: 30px;
        display: none;
        font-size: 12px;
        line-height:22px;
    }

    #map {
        width: auto;
        margin-left: 200px;
    }

    #mapContainer {
        float: left;
        position: relative;
    }
    
    /***** CSS DO MENU!!!!!!! *****/
    #divCima, #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        width: 100px;
    }

    #divGrande, #divCima, #divBaixo, #divEscondida{
        height: auto;
    }

    #divGrande, #divCima, #divCimaPeq, 
    #divBaixo, #divEscondida, #divEscondidaPeq, 
    #divBaixoPeq{
        float: left;
    }

    #divCimaPeq, #divEscondidaPeq, #divBaixoPeq{
        height: 100px;
        text-align: center;
        font-size: 12px;
        background: rgba(0,0,0,0.8);
        padding: 15px;
        line-height: 20px;
    }

    #divCimaPeq:hover, #divEscondidaPeq:hover, #divBaixoPeq:hover{
        background: #CFA100;
    }

    #divGrande{
        z-index: 99;
        position: fixed;
    }

    #divBaixo{
        width: 100%;
    }

    #divEscondida{
        width: auto;
        display: none;
    }

    #menuIMG{
        border: 0px;
        padding-top: 3px;
    }
    /***** FIM DO CSS DO MENU!!!!!!! *****/
    
    /****** CSS CAPITAIS!!!!!!! ******/
    .capitalHover{
        display: none;
        vertical-align: top;
        font-size: 18px;
    }

    .capitalAtiva{
        vertical-align: top;
        font-size: 18px;
    }

    #Brasilia, #BeloHorizonte, #Fortaleza, 
    #Recife, #RioDeJaneiro, #Salvador,
    #Natal, #Manaus, #Cuiaba,
    #PortoAlegre, #SaoPaulo, #Curitiba{
        height: 30px !important;
    }

    #Brasilia{
        margin-left: 340px;
        margin-top: -280px;
    }

    #BeloHorizonte{
        margin-left: 400px;
        margin-top: 30px;
    }

    #Fortaleza{
        margin-left: 470px;
        margin-top: -250px;
    }

    #Recife{
        margin-left: 515px;
        margin-top: 25px;
    }

    #RioDeJaneiro{
        margin-left: 420px;
        margin-top: 168px;
    }

    #Salvador{
        margin-left: 470px;
        margin-top: -172px;
    }
    
    #Natal{
        margin-left: 510px;
        margin-top:-120px;
    }
    
    #Manaus{
        margin-left: 180px;
        margin-top: -65px;
    }
    
    #Cuiaba{
        margin-left: 225px;
        margin-top: 135px;
    }
    
    #PortoAlegre{
        margin-left: 310px;
        margin-top: 170px;
    }
    
    #SaoPaulo{
        margin-left: 350px;
        margin-top: -110px;
    }
    
    #Curitiba{
        margin-left: 320px;
        margin-top: -5px;
    }
    /***** FIM CSS CAPITAIS!!!!!!! ****/   
    
    #img{
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 100%;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;

    }
    
    #divGrande{
        display: block;
    }   
    
    #menu {
        position: absolute;
    }
    
    #menuMobile{
        display: none;
    }
    
    #mapMobile{
        display: none;
    }
    
    #termo{
        margin-left: 20%;
        width:  60%;
    }

    #texto{
        position: relative;
        top: 50%;
        margin-top: -273.5px;
        padding-top: 3px;
        padding-left: 13px;
        padding-right: 13px;
        float: left;
        font-size: 12pt;
        background: rgba(0,0,0,0.8);
    }
}
 
/* dispositivo no formato paisagem e abaixos */
@media (max-width: 1199px){
    
    #img{
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 100%;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;

    }
    
    #divGrande{
        display: none;
    }
    
    #menuMobile{
        position: relative;
        z-index: 99;
    }
    
    #menuMobileCima{
        width: 100%;
        background: rgba(0,0,0,0.8);
        position: absolute;
        font-size: 11px;
        text-align: center;
    }
    
    #menuMobileCimaLinks{
        float: left;
        width: 33.3%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #menuMobileEscondido{
        display: none;
        width: 100%;
        background: rgba(0,0,0,0.8);
        position: absolute;
        font-size: 11px;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 83px;
        z-index: 99;
    }
    
    #menuMobileEscondidoLinks{
        float: left;
        width: 25%;
    }
    
    #menu {
        position: static;
        z-index: 1;
    }
    
    #mapContainer{
        display: none;
    }
    
    #mapMobile{
        margin-top: 85px;
        padding: 10px;
        position: relative;
    }
    
    #cidadesMobileRow{
        width: 100%;
        list-style: none;
    }
    
    #capitalMobile{
        float: left;
        width: 33.3%;
        margin-bottom: 7px;
        background: rgba(0,0,0,0.7);
        text-align: center;
        font-size: 13px;
        padding-bottom: 2px;
        padding-top: 2px;
    }
    
    #contentHospedagens, #termo, #content {
        background: rgba(0,0,0,0.8);
        font-size: 14px;
        line-height:23px;
        margin-top: 110px;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    #contentHospedagens, #content{
        display: none;
    }
    
    #termo{
        margin-top: 30px !important;
    }
    
    #contentHospedagens{
        margin-top: 120px !important;
    }
    
    #termo, #contentText{
        padding: 10px;
    }
    
    #rodape{
        margin-right: 25px;
    }
    
    footer{
        display: none;
    } 
    
    #espaçamento{
        display: block;
    }
}