OwlCyberSecurity - MANAGER

Edit File: _royalslider.scss

/* v1.0.5 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider{
	width: 600px;
	height: 400px;
	position: relative;
	direction: ltr;
}
.royalSlider > *{
	float: left;
}

.rsWebkit3d .rsSlide{
	-webkit-transform: translateZ(0);
}

.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl,
.rsWebkit3d .rsABlock,
.rsWebkit3d .rsLink{
	-webkit-backface-visibility: hidden;
}
.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer{
    -webkit-transform: none;
}
.rsOverflow{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	float: left;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.rsVisibleNearbyWrap{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	left: 0;
	top: 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.rsVisibleNearbyWrap .rsOverflow{
	position: absolute;
	left: 0;
	top: 0;

}
.rsContainer{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.rsArrow,
.rsThumbsArrow{
	cursor: pointer;
}

.rsThumb{
	float: left;
	position: relative;
}

.rsArrow,
.rsNav,
.rsThumbsArrow{
	opacity: 1;
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
}
.rsHidden{
	opacity: 0;
	visibility: hidden;
	-webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	-moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	-o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
	transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

/* Slider Captions */
.rsGCaption{
	width: 30%;
	position: absolute;
	top: $base-spacing-unit;
	left: $base-spacing-unit;
	color:#fff;

@include media-query(lap-and-up) {
		top: 2 * $base-spacing-unit;
		left: 2 * $base-spacing-unit;
	}
}
	.rsCaption__title {
		font-family:$heading-font-family;
		font-size:19px;
		font-weight:bold;
		letter-spacing: 0.5px;
		line-height: 1;
		display:block;
	}
	.rsCaption__desc {
		font-family:$sans-serif-font-family;
		font-size:12px;
	}

/* Full Width/ Screen Gallery */
	.single-gallery-fullwidth .rsGCaption, .single-gallery-fullscreen .rsGCaption {
		text-align:right;
		left:auto;
		right:$base-spacing-unit;

@include media-query(lap-and-up) {
			right: 2 * $base-spacing-unit;
		}
	}

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen{
	position: fixed !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2147483647 !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
}

.royalSlider .rsSlide.rsFakePreloader{
	opacity: 1 !important;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-o-transition:  0s;
	transition:  0s;
	display: none;
}

.rsSlide{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	overflow: hidden;
	
	height: 100%;
	width: 100%;
}

.royalSlider.rsAutoHeight,
.rsAutoHeight .rsSlide{
	height: auto;
}

.rsContent{
	width: 100%;
	height: 100%;
	position: relative;
}

.rsPreloader{
	position:absolute;
	z-index: 0;	
}

.rsNav{
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	user-select: none;
}
.rsNavItem{
	-webkit-tap-highlight-color:rgba(0,0,0,0.25);
}

.rsThumbs{
	cursor: pointer;
	position: relative;
	overflow: hidden;
	float: left;
	z-index: 22;
}
.rsTabs{
	float: left;
	background: none !important;
}
.rsTabs,
.rsThumbs{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.rsVideoContainer{
	/*left: 0;
	top: 0;
	position: absolute;*/
	/*width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	float: left;*/
	width: auto;
	height: auto;
	line-height: 0;
	position: relative;
}
.rsVideoFrameHolder{
	position: absolute;
	left: 0;
	top: 0;
	background: #141414;
	opacity: 0;
	-webkit-transition: .3s;
}
.rsVideoFrameHolder.rsVideoActive{
	opacity: 1;
}
.rsVideoContainer iframe,
.rsVideoContainer video,
.rsVideoContainer embed,
.rsVideoContainer .rsVideoObj{
	position: absolute;
	z-index: 50;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
/* ios controls over video bug, shifting video */
.rsVideoContainer.rsIOSVideo iframe,
.rsVideoContainer.rsIOSVideo video,
.rsVideoContainer.rsIOSVideo embed{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 44px;
}

/***************
*
*  6. Play/close video button
*
****************/

.rsDefault .rsPlayBtn {
	-webkit-tap-highlight-color:rgba(0,0,0,0.3);
	width:64px;
	height:64px;
	margin-left:-32px;
	margin-top:-32px;
	cursor: pointer;
}
.rsPlayBtnIcon {
	width:64px;
	display:block;
	height:64px;
    margin-top: -32px;
    margin-left: -32px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;

background:url(../img/rs-default.png) no-repeat 0 -32px;
	background-color: #000;
	background-color: rgba(0,0,0,0.75);
	*background-color: #000;
}
.rsPlayBtn:hover .rsPlayBtnIcon {
	background-color: rgba(0,0,0,0.9);
}
.rsBtnCenterer {
	position:absolute;
	left:50%;
	top:50%;
}
.rsCloseVideoBtn {
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	z-index: 500;
	position: absolute;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	
}
.rsCloseVideoBtn.rsiOSBtn {
	top: -38px;
	right: -6px;
}

.rsCloseVideoIcn {
	margin: 6px;
	width: 32px;
	height: 32px;
	background: url('../img/rs-default.png') -64px 0;
	background-color: #000;
	background-color: rgba(0,0,0,0.75);
	*background-color: #000;
}
.rsCloseVideoIcn:hover {
	background-color: rgba(0,0,0,0.9);
}

.rsABlock{
	left: 0;
	top: 0;
	position: absolute;
	z-index: 15;
	
}

img.rsImg{
	max-width: none;
}

.grab-cursor{
	cursor:url(../img/grab.png) 8 8, move; 
}

.grabbing-cursor{ 
	cursor:url(../img/grabbing.png) 8 8, move;
}

.rsNoDrag{
	cursor: auto;
}

.rsLink{
	left:0;
	top:0;
	position:absolute;
	width:100%;
	height:100%;
	display:block;	
	z-index: 20;
	background: url(blank.gif);
}

/*----------------------------------------*\
    $CUSTOM STYLING
\*----------------------------------------*/

.pixslider{
    @extend .royalSlider;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0;

img {
        width: 100%;
        height: auto;
        display: block;
    }

blockquote{
        @include rem(margin-bottom, 3*$base-spacing-unit);
    }
}

.pixslider__slide {
    width: 100%;
}

/*----------------------------------------*\
    $ARROWS CUSTOM STYLING
\*----------------------------------------*/

.rsArrow{
    @include rem(width, $base-spacing-unit*0.75);       
    @include rem(height, $base-spacing-unit*0.75);       
    @include rem(margin, $half-spacing-unit $base-spacing-unit 0 $base-spacing-unit);
    display: block;
    color: white;
    border-bottom: 1px solid $light;
    position: absolute;
    @include rem(bottom, $half-spacing-unit);
}

.rsArrowLeft{
    border-left: 1px solid $light;
    @include rotate(45deg);
    @include rem(right, $half-spacing-unit);
}

.rsArrowRight{
    border-right: 1px solid $light;
    @include rotate(-45deg);
    right: 0;
}

.full-width-slider{
    width: 100%;
}

/*----------------------------------------*\
    $BULLETS CUSTOM STYLING
\*----------------------------------------*/

.rsBullets{
    @extend .nav;
    display: block;
    margin: 0;
    float: left;
    position: absolute;
    @include rem(bottom, $half-spacing-unit);
    left: 0;
    float: left;
}

.rsBullet{
    display: inline-block;
    padding: 0.1rem;
    margin: 0 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    text-indent: -999em;
    background-color: rgb(202, 202, 202);
    cursor: pointer;
}

.rsNavSelected{
    width: 0.4rem;
    height: 0.4rem;
    position: relative;
    top: 0.05rem;
    left: 0.05rem;
    background-color: $accent-color;
}