div#gallery {    
    margin-top: -290px;
    overflow: hidden;
    position: relative;
    top: 50%;
    width: 100%;
}
div#gallery div#area {
    width: 100%; 
    padding-left: 40px;
}

div#gallery ul { 
    list-style: none; 
    width: 960px; 
    height: 460px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

div#gallery ul li { 
    float: left; 
    margin: 5px; 
   /* background: #000; */
}

div#gallery ul li a {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    width: 182px;
    height: 106px;
}

div#gallery .separador {
    border-right:1px solid #000; 
    width: 50px; 
}

.dragger {
    left: 0;
}

#imagens {
    width: 6900px;
}

#all{
    height: 858px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    /* width: 100%; */
    top: 10px;
}

/*div#gallery ul li { opacity: 0.4; filter:alpha(opacity=50);
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}*/
div#gallery ul li .description { 
    font-size: 12px; 
    width: 142px; 
    height: 82px;
    padding: 20px;
    position: absolute;
    color: rgba(255,255,255,0.0);
    float: left;
    margin-top: -126px;
    background: rgba(0,0,0,0.0); 
    text-align: center; 
    font-variant: small-caps; 
    display: table-cell; 
    vertical-align: middle;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

div#gallery ul li a:hover .description { 
    color: rgba(255,255,255,1.0); 
    background: rgba(0,0,0,0.7);
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

div#gallery ul li .description .points {
    font-size: 70px; 
    font-family: "Trebuchet MS"; line-height: 0px; letter-spacing: -10px;
}

/* Mobile  Vertical*/

@media only screen and (max-width: 504px) and (orientation:portrait) {
    
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px;
    left: 120px;
    width: 220px;
    /* padding-left: 30px; */
}
    
    div#gallery ul  { 
    /* list-style: none; */
    width: 290px;
    /* padding: 10px 30px; */
    /* float: left; */
    /* position: relative; */
} 

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 5px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 5px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 900px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
     width: 370px;
    top: 10px;
}

}

@media only screen and (max-width: 414px) and (orientation:portrait) {
    
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px;
    left: 70px;
    width: 220px;
    /* padding-left: 30px; */
}
    
    div#gallery ul  { 
    /* list-style: none; */
    width: 290px;
    /* padding: 10px 30px; */
    /* float: left; */
    /* position: relative; */
} 

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 5px;
    }
    
    #sessao2 { 

    height: 550px !important; 
}
    
    #sessao2 li {
        padding-bottom: 5px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 1050px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 290px;
    top: 10px;
}
    
}

@media only screen and (max-width: 360px) and (orientation:portrait) {

    #imagens {
    width: 320px;
}
    
    #tabela {
     margin-left: 40px;
    }
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px;
    left: 50px;
    width: 220px;
    /* padding-left: 30px; */
}
    
    div#gallery ul  { 
    /* list-style: none; */
    width: 290px;
    /* padding: 10px 30px; */
    /* float: left; */
    /* position: relative; */
} 

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 5px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 5px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 920px;
    min-height: 550px;
    /* overflow-y: hidden; */
    position: absolute;
    width: 290px;
    top: 10px;
}
    
}

@media only screen and (max-width: 320px) and (orientation:portrait) {
   
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px;
    left: 30px;
    width: 220px;
    /* padding-left: 30px; */
}
    
 div#gallery ul  { 
    /* list-style: none; */
    width: 290px;
    /* padding: 10px 30px; */
    /* float: left; */
    /* position: relative; */
    padding-bottom: 120px;
} 

    #sessao1 {
    height: 200px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 5px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 5px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 260px;
    top: 10px;
}
    
}

/* Mobile Horizontal */

@media only screen and (max-width: 720px) and (orientation:landscape) {
 
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 220px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 470px;
    top: 10px;
}
    
}

@media only screen and (max-width: 736px) and (orientation:landscape) {
 
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 220px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 470px;
    top: 10px;
}
    
}

@media only screen and (max-width: 640px) and (orientation:landscape) {
   
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 180px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 410px;
    top: 10px;
}
    
}

@media only screen and (max-width: 568px) and (orientation:landscape) {
    
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 150px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
     width: 370px;
    top: 10px;
}
    
}

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

    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 140px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 300px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 370px;
    top: 10px;
}
    
@media only screen and (max-width: 504px) and (orientation:landscape) {
    
    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 120px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 2360px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 13400px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 370px;
    top: 10px;
}
    
@media only screen and (max-width: 480px) and (orientation:landscape)  {

    #imagens {
    width: 320px;
}
    
    div#gallery {
    margin-top: 0px;
    overflow: hidden;
    /* position: relative; */
    top: 50px; 
    width: 100%;
    padding-left: 120px;
}
    
  div#gallery ul  { 
    list-style: none; 
    width: 320px; 
    padding: 10px 30px; 
    float: left; 
    position: relative;
}

    #sessao1 {
    height: 290px !important; 
    }
    
    #sessao1 li {
        padding-bottom: 20px;
    }
    
    #sessao2 { 

    height: 2740px !important; 
}
    
    #sessao2 li {
        padding-bottom: 20px;
    }
    
    #sessao3 { 

    height: 5040px !important; 
}
    
    #sessao4 { 

    height: 3060px !important; 
}
    
#all {
    height: 950px; 
    min-height: 550px; 
    overflow-y: hidden; 
    position: absolute; 
    width: 370px;
    top: 10px;
}
    
}