#references .bx-wrapper{position: relative;
max-width: 52vw !important;
width: 52vw;
margin: 0 auto;}

#references .bx-wrapper img{max-width: 100%;
height: auto;
display: block;}

#references .bx-wrapper .bx-viewport{width: 47vw !important;
margin: 0 auto;}

#references .bx-wrapper .bx-loading{}

#references .bx-wrapper .bx-pager{}

#references .bx-wrapper .bx-pager .bx-pager-item{}

#references .bx-wrapper .bx-pager.bx-default-pager a{}

#references .bx-wrapper .bx-pager.bx-default-pager a:hover{}

#references .bx-wrapper .bx-pager.bx-default-pager a.active{}

#references .bx-wrapper .bx-controls-direction a{}

#references .bx-wrapper .bx-controls-direction a.disabled{}

#references .bx-wrapper .bx-prev{position: absolute;
    top: 20%;
    left: 0px;
    z-index: 55;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0;}

#references .bx-wrapper .bx-prev:hover{}

#references .bx-wrapper .bx-next{    position: absolute;
  bottom: 26%;
    right: 0px;
    z-index: 55;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0;}

#references .bx-wrapper .bx-next:hover{}

@media screen and (min-width: 992px) {
#references .bx-wrapper .bx-viewport { height: auto !important;}
}
#references .bx-viewport li {
    width: 23vw !important;
    background: #fff;
    border: 7px solid #e1e1e1;
    height: 325px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#references .bx-viewport li:nth-child(even) {
    margin-top: 345px;
}
#references .bx-prev:before {
    content: "\61";
    font-family: "sbfonts";
    font-size: 31px;
    color: #ed2321;
}
#references .bx-next:before {
    content: "\63";
    font-family: "sbfonts";
    font-size: 31px;
    color: #ed2321;
}
#references .bx-prev:hover:before {
    color: #fff;
}
#references .bx-next:hover:before {
    color: #fff;
}
#references .bx-pager.bx-default-pager {
    display: none;
}
@media screen and (max-width: 1440px) {
#references .bx-viewport li:nth-child(even) {
    margin-top: 305px;
}
#references .bx-viewport li {
   height: 270px;
    padding: 30px;
}
#references .bx-wrapper {
    max-width: 56vw !important;
    width: 56vw;
}
#references .bx-wrapper .bx-viewport {
    width: 48vw !important;
}
}
@media screen and (max-width: 1024px) {
#references .bx-viewport li:nth-child(even) {
    margin-top: 240px;
}
#references .bx-viewport li {
   height: 215px;
    padding: 15px;
}
}
@media screen and (max-width: 991px) {
#references .bx-viewport li:nth-child(even) {
    margin-top: 0;
}
#references .bx-wrapper {
    max-width: 52vw !important;
    width: 52vw;
}
#references .bx-wrapper .bx-viewport {
    width: 52vw !important;
}
#references .bx-viewport li {
    height: 400px;
    padding: 15px;
    width: 52vw !important;
}
#references .bx-controls-direction {
    position: relative;
    width: 52vw;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}
#references .bx-wrapper  .bx-prev {
    position: relative;
    bottom: 0;
    left: 0px;
    margin-right: 7px;
}
#references .bx-wrapper .bx-next {
    position: relative;
    top: 0;
    right: 0px;
    left: 0;
    margin-left: 7px;
}
}
@media screen and (max-width: 550px) {
#references .bx-controls-direction {
    margin-top: 25px;
}
#references .bx-wrapper {
    max-width: 80vw !important;
    width: 80vw;
}
#references .bx-wrapper .bx-viewport {
    width: 80vw !important;
}
#references .bx-viewport li {
    height: 300px;
    width: 80vw !important;
}
}
@media screen and (max-width: 420px) {
#references .bx-wrapper {
    max-width: 90vw !important;
    width: 90vw;
}
#references .bx-wrapper .bx-viewport {
    width: 90vw !important;
}
#references .bx-viewport li {
    height: 250px;
    width: 90vw !important;
}
}