OwlCyberSecurity - MANAGER

Edit File: _woo-nav.scss

/*------------------------------------------------------------------
Woo Product Navigation
-------------------------------------------------------------------*/
@media (min-width: 1080px) {
	.owp-product-nav-wrap {
	    position: absolute;
	    top: 0;
	    right: 0;
	}
}

.owp-product-nav-wrap {
    text-align: right;
    z-index: 1;
}

.owp-product-nav {
	position: relative;
	display: inline-block;

li {
		display: inline-block;
		margin-left: 3px;

&:first-child {
			margin-left: 0;
		}

a.owp-nav-link {
			display: inline-block;
			width: 28px;
    		height: 28px;
			line-height: 24px;
			border: 2px solid $color-7;
			@include border-radius( 50% );
			text-align: center;

i {
				line-height: 1.2;
			}

.owp-icon {
				display: inline-block;
				height: 100%;
				width: 100%;
				padding: 6px;

&:hover {
					use {
						stroke: #fff;
					}
				}
			}

&:hover {
				background-color: $color-5;
				color: #fff;
				border-color: $color-5;
			}
		}

a.owp-nav-text {
			display: none;
		    font-size: 12px;

&.next-text {
			    padding-right: 5px;
			}

&.prev-text {
			    padding-left: 5px;
			}
		}

.owp-nav-thumb {
			position: absolute;
			top: 100%;
		    left: -99999px;
		    display: inline-block;
		    width: 90px;
		    opacity: 0;
		    @include transition( opacity 0.25s ease-in-out );
		    @include box-shadow( 1px 1px 15px rgba(0,0,0,0.15) );
		    z-index: 100;
		}

&:hover > .owp-nav-thumb {
			opacity: 1;
		    left: 50%;
		    -webkit-transform: translateX(-50%);
		    transform: translateX(-50%);
		}
    }
}

@media only screen and (max-width: 767px) {
	.owp-product-nav-wrap {
	    margin-bottom: 15px;
	}

.owp-product-nav {
		display: block;

li.next-li {
			float: right;
			display: flex;
    		align-items: center;
		}

li.prev-li {
			float: left;
			display: flex;
    		align-items: center;
		}

li {
			position: relative;

a.owp-nav-text {
				display: inline-block;
			}
		}
	}
}