/* General */
* {
    box-sizing:border-box; 
    padding:0;
    margin:0;
}
#gallery ul {
    list-style:none;   
}
#gallery a {
    text-decoration:none;
    display:inline-block;
}
#gallery img {
    vertical-align:top;   
}


/* Gallery */
.wrapper {
    width:100%;
    height:100%;
    position:relative;
    padding:0px;
}
/*.container {
    padding:30px;
    height:100%;
    background:#131313;
    overflow:hidden;
    position:relative;
}*/
#gallery {
    overflow:hidden;
    height:400px;
}
#gallery ul {
    height:100%;
    width:99999px;
    position:relative;
    left:0;
    margin-left: 23px;
}
#gallery li {
    height:100%;
    margin-right:-10px;
     margin-left:-16px;
    float:left;
}
#gallery a {
    height:100%;
}
#gallery img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}
#gallery li {
    background:black;
    opacity:0.3;
    -webkit-transition:opacity 0.3s ease;
    transition:opacity 0.3s ease;
}
#gallery li.active {
    opacity:1;
}
#gallery img {
    pointer-events:none;
}

/* Loading */
#gallery ul {
    visibility:hidden;
}
#gallery .loading {
    font-size:25px;
    color:white;
    display:block;
    position:relative;
    top:45%;
    text-align:center;
}

/* Arrows */
 .arrows button {
    width:48px;
    height:48px;
    background:#fff;
     border-radius: 100%;
    border:none;
    outline:none;
    cursor:pointer;
    
}
 .arrows .prev,
 .arrows .next {
    top:50%;
    top:calc(50% - 22px);
    position:absolute;
   
}
  .arrows .prev {
    left:10%;  
}


  .arrows .next {
    right:10%;    
}
 .arrows .prev:before,
.arrows .next:before {
    font-size:35px;
    font-family:'fontawesome';
     color:#8f1158;
    opacity:0.7;
}
.arrows .prev:before {
    content:'\e800';
    padding-right: 5px;
}
.arrows .next:before {
    content:'\e801';
    padding-left: 5px;
}

 .arrows .prev:hover:before,
.arrows .next:hover:before {
    opacity:1;
}