@charset "UTF-8";

#qodef-single-portfolio-navigation2 {
	margin: 3px 0 50px;
	line-height: normal;
	/*@include qodefScreenSize680 {
		margin: 13px 0 55px;
	}*/

	.qodef-m-inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.qodef-m-nav {
		position: relative;
		display: flex;
		align-items: center;
		/*color: $custom-heading-color;*/

		&:hover {
			/*color: $main-color;*/
		}
		
		> * {
			display: block;
			line-height: inherit;
		}

		&.qodef--prev,
		&.qodef--next {

			> svg {
				position: relative;
				top: -1px;
				fill: currentColor;
				stroke: currentColor;
				overflow: visible;

				rect,
				polygon {
					transition: transform .2s ease-in-out;
				}

				rect {
					transform: scaleX(1);
					transform-origin: left;
				}

				polygon {
					transform: translateX(0);
					stroke: none;
				}
			}

			&:hover {
				/*color: $heading-color;

				> svg {

					rect {
						transform: scaleX(1.3);
					}

					polygon {
						transform: translateX(10px);
					}
				}*/
			}
		}

		&.qodef--prev {
			
			> svg {
				margin-right: 16px;
				transform: rotate(180deg);
			}
		}
		
		&.qodef--next {
			flex-direction: row-reverse;
			text-align: right;
			margin-left: auto;
			
			> svg {
				margin-left: 14px;
			}
		}
		
		&.qodef--back-link {
			position: absolute;
			top: 0;
			left: calc(50% - 10px); // 10 is half size of icon size

			@include qodefScreenSize680 {
				transform: translateY(calc(-50% + 2px));
			}
			
			.qodef-m-nav-icon {
				font-size: 20px;
			}
		}
	}
	
	.qodef-m-nav-label {
		font-family: "Work Sans",sans-serif;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .2em;

		@include qodefScreenSize680 {
			display: none;
		}
	}

	.qodef-navigation-skin--light & {

		.qodef-m-nav {
			color: #fff;

			&:hover {
				/*color: $main-color;*/
			}
		}
	}
}
@media screen and (max-width: 680px) {
	#qodef-single-portfolio-navigation2 {
		margin: 13px 0 55px;
		.qodef-m-nav-label {
			display: none !important;
		}
	}
}