.slideme{
    width: 100%;
    height: 600px;
    position: relative;
    /*background-color: yellow;*/
}
.slideme li {
    width: 100%;
    height: 600px;
  
  
}

.slideme li img{
    width: 100%;
    /*height: 600px;*/
}

.arrow{
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,.6);
     border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: none;
    cursor: pointer;
    position: absolute;
    margin-top: -25%;
    z-index: 80;
}

.next{
    right: 20px;
    background: rgba(255,255,255,.6) url('../images/next.png') 11px 8px no-repeat;
}

.prev{
    left: 20px;
    background: rgba(255,255,255,.6)url('../images/prev.png') 9px 8px  no-repeat;
}

.slideme_container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slideme_container ul,
.slideme_container ol, 
.slideme {
    margin: 0;
    padding: 0;
}

.slideme_container li, 
.slideme > li  {
    display: block;
    list-style: none;
}

.slideme_container,
.slideme {
    position: relative;
}

.slideme {
    overflow: hidden;
}

.slideme_container ol img, 
.slideme > * img{
    display: block;
}

.slideme > *:first-child {
    opacity: 1;
    position: relative;
    z-index: 5;
}

.slideme > *, 
.slideme_container .slideme > * {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.slideme > * {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slideme_container .slideme > *.current {
    opacity: 1;
    z-index: 5;
}

#foo .pagination
 {
     position: absolute;
     z-index: 85;
     bottom: 30px;
     right: 100px;
     
}

#foo .pagination *.current
 {
     opacity: .7
     
}

#foo .pagination li
 {
     float: left;
     margin-right: 10px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
}
#foo .pagination li img
 {
     float: left;
     margin-right: 5px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     cursor: pointer;
}

#foo .pagination li img:hover
 {
     opacity: .7;
}


.slideme-slide > *, 
.slideme_container .slideme-slide > * {
    visibility: hidden;
    z-index: 0;
}

.slideme-slide > .current,
.slideme-slide > .next {
    visibility: visible;
    z-index: 5;
}

.slideme-slide > .after {
    left: 100%;
    position: absolute;
    z-index: 999;
}

.slideme-slide > .before {
    left: -100%;
   
}

.slideme-slide.nextClicked > .current,
.slideme-slide.nextClicked > .next,
.slideme-slide.prevClicked > .current,
.slideme-slide.prevClicked > .next {
    background-color: red;
    -webkit-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.slideme-slide.prevClicked > .next, 
.slideme-slide.nextClicked > .next {
    left: 0;
}

.slideme-slide.prevClicked > .current {
    left: 100%;
}

.slideme-slide.nextClicked > .current {
    left: -100%;
}

/*
 * zoom
 */

.slideme-zoom > *, 
.slideme_container .slideme-zoom > * {
    opacity: 0;
    visibility: hidden;
}

.slideme-zoom > .current {
    visibility: visible;
    z-index: 4;
}

.slideme-zoom > .next {
    visibility: visible;
    z-index: 5;
}

.slideme-zoom > .before, 
.slideme-zoom.nextClicked > .current {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

.slideme-zoom > .after, 
.slideme-zoom.nextClicked > .next, 
.slideme-zoom.prevClicked > .current {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 5;
}

.slideme-zoom > .before {
    z-index: 6;
}

.slideme-zoom.nextClicked > .current,
.slideme-zoom.nextClicked > .next,
.slideme-zoom.prevClicked > .current,
.slideme-zoom.prevClicked > .next {
    -webkit-transition: opacity 0.35s cubic-bezier(0.47, 0, 0.745, 0.715), -webkit-transform 0.35s cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: opacity 0.35s cubic-bezier(0.47, 0, 0.745, 0.715), -moz-transform 0.35s cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: opacity 0.35s cubic-bezier(0.47, 0, 0.745, 0.715), -ms-transform 0.35s cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: opacity 0.35s cubic-bezier(0.47, 0, 0.745, 0.715), -o-transform 0.35s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: opacity 0.35s cubic-bezier(0.47, 0, 0.745, 0.715), transform 0.35s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.slideme-zoom.nextClicked > .current {
    opacity: 0;
}

.slideme-zoom.nextClicked > .after {
    opacity: 1;
}

.slideme-zoom.prevClicked > .next {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/*
 * fade
 */

.slideme-fade > *, 
.slideme_container .slideme-fade > * {
    opacity: 0;
    z-index: 0;
}

.slideme-fade.nextClicked > .current,
.slideme-fade.nextClicked > .next,
.slideme-fade.prevClicked > .current,
.slideme-fade.prevClicked > .next {
    -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
}

.slideme-fade.nextClicked > .current, 
.slideme-fade.prevClicked > .current  {
    opacity: 0;
    z-index: 5;
}

.slideme-fade.nextClicked > .next, 
.slideme-fade.prevClicked > .next  {
    opacity: 1;
    z-index: 4;
}

/*
 * page
 */

.slideme-page > .current {
    visibility: visible;
    z-index: 4;
}

.slideme-page > .next {
    visibility: visible;
    z-index: 6;
}

.slideme-page > .after {
    left: 100%;
}

.slideme-page > .before {
    left: -100%;
}

.slideme-page.nextClicked > .current, 
.slideme-page.prevClicked > .current {
    -webkit-transition: visibility 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: visibility 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: visibility 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: visibility 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: visibility 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    visibility: hidden;
}

.slideme-page.nextClicked > .next, 
.slideme-page.prevClicked > .next {
    -webkit-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: left 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
    left: 0;
}

/*
 *  SLIDEME TOUCH
 */

.slideme-touch {
    -webkit-overflow-scrolling: touch;
    font-size: 0;
    height: 100%;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}

.slideme-touch.snapping {
    overflow-x: hidden;
} 

.slideme_container .slideme-touch > * {
    -webkit-transform: translateZ(0px);
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
    position: absolute;
    bottom: 90px;
}

.slideme_container .slideme-touch > * img {
    display: block;
    min-height: 1px;
    min-width: 1px;
    width: 100%;
    float: left;
}



@media only screen
and (min-device-width : 320px)
and (max-width : 600px)
and (orientation : portrait) {

}

@media screen and (min-width : 960px) and (max-width : 1260px) {

}
@media screen and (min-width : 1365px) and (max-width : 1600px) {
    div#gallery_div{
    width: 100%;
    height: 750px;
}
.slideme{
    width: 100%;
    height: 750px;
    position: relative;
    /*background-color: yellow;*/
}
.slideme li {
    width: 100%;
    height: 750px;
  
}

.slideme li img{
    width: 100%;
    /*height: 600px;*/
 
}
}
@media screen and (min-width : 1600px)  {
    div#gallery_div{
    width: 100%;
    height: 900px;
}
.slideme{
    width: 100%;
    height: 900px;
    position: relative;
    background-color: yellow;
}
.slideme li {
    width: 100%;
    height: 900px;
  
}

.slideme li img{
    width: 100%;
    /*height: 600px;*/
 
}
}
@media screen and (min-width : 1100px) and (max-width : 1250px) {

}


@media screen and (min-width : 960px) and (max-width : 1260px) {


}

@media screen and (min-width : 1260px) and (max-width : 1500px) {

}

@media only screen
and (min-device-width : 320px)
and (max-width : 600px)
and (orientation : portrait) {
}