.cross2 {position: relative; overflow: hidden; z-index: 10;}
.cross2 *, .cross2 *:before, .cross2 *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cross2-focused {outline: thin dotted; outline-offset: 1px;}
.cross2 img {width: 100%; height: auto; vertical-align: middle;}
.cross2-slider {position: absolute; width: 40px; height: 40px; border-radius: 50%; -webkit-border-radius: 50%; background-clip: padding-box; -webkit-background-clip: padding-box; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; background-color: black; background-color: rgba(0, 0, 0, 0.5); border: 3px solid white;}
.cross2-slider:focus {outline: none;}
.cross2-slider > span:before, .cross2-slider > span:after {content: ''; position: absolute; width: 0; height: 0; left: 9px; top: 11px; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #ffffff transparent;}
.cross2-slider > span:after {border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #ffffff; left: auto; right: 9px;}
.cross2-vertical .cross2-slider > span:before {border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; left: 11px; top: 9px;}
.cross2-vertical .cross2-slider > span:after {border-width: 6px 6px 0 6px; border-color: #ffffff transparent transparent transparent; left: 11px; top: auto; bottom: 9px;}
.cross2-slider:before, .cross2-slider:after {content: ''; width: 3px; height: 9999px; background-color: black; background-color: rgba(0, 0, 0, 0.5); border: 1px solid white; position: absolute; bottom: 50%; left: 50%; margin-left: -1px; margin-bottom: 19px; opacity: 0.5;}
.cross2-slider:after {top: 50%; bottom: auto; margin-top: 19px; margin-bottom: 0;}
.cross2-vertical .cross2-slider:before, .cross2-vertical .cross2-slider:after {top: 50%; bottom: auto; height: 3px; width: 9999px; margin-left: 19px; margin-top: -1px;}
.cross2-vertical .cross2-slider:after {right: 50%; left: auto; margin-right: 19px; margin-left: 0;}
.cross2-overlay {cursor: pointer;}
.cross2:hover .cross2-item-title {opacity: 0;}
.cross2-item-title {position: absolute; background-color: black; background-color: rgba(0, 0, 0, 0.6); padding: 5px; color: white; opacity: 1; transition: opacity .4s; -webkit-transition: opacity .4s; -moz-transition: opacity .4s;}
.cross2-item-before > .cross2-item-title {top: 45%; left: 0;}
.cross2-item-after > .cross2-item-title {top: 45%; right: 0;}
@media (max-width: 991px) {
  .cross2-focused {
    outline: none;
  }
}