/**
* RUIK: LINE FRAMEWORK
* @author BORN A.K.A. CXJ
* @version 0.1
*/

/* COPPER */

.line-type-straight {
	background: url("_images/_lines/line-type-straight.svg");
	background-repeat: repeat-y;
	background-position: center;
}

.line-type-straight-bend-01 {
	background: url("_images/_lines/line-type-straight-bend.svg");
	background-repeat: repeat-y;
	background-position: center;
}


.line-type-straight-hr {
	background: url("_images/_lines/line-type-straight-hr.svg");
	background-repeat: repeat-x;
	background-position: center;
}

.line-type-straight-hr-bend-01 {
	background: url("_images/_lines/line-type-straight-hr-bend-01.svg");
	background-repeat: repeat-x;
	background-position: center;
}

.line-type-straight-hr-bend-02 {
	background: url("_images/_lines/line-type-straight-hr-bend-02.svg");
	background-repeat: repeat-x;
	background-position: right center;
}

.line-type-bend-dr-left-up {
	background: url("_images/_lines/line-type-bend-dr-left-up.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-bend-dr-left-down {
	background: url("_images/_lines/line-type-bend-dr-left-down.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-bend-dr-right-up {
	background: url("_images/_lines/line-type-bend-dr-right-up.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-bend-dr-right-down {
	background: url("_images/_lines/line-type-bend-dr-right-down.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-bend-dr-right-down-02 {
	background: url("_images/_lines/line-type-bend-dr-right-down-02.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-corner-top-left {
	background: url("_images/_lines/line-type-bend-dr-right-down-02.svg");
	background-repeat: no-repeat;
	background-position: center;

	transform:rotate(-180deg);
}

.line-type-corner-top-right {
	background: url("_images/_lines/line-type-corner-top-right.svg");
	background-repeat: no-repeat;
	background-position: center;
}

/*.line-type-corner-top-left {
	background: url("_images/_lines/line-type-corner-top-left.svg");
	background-repeat: no-repeat;
	background-position: center;
}*/

.line-type-corner-bottom-left {
	background: url("_images/_lines/line-type-corner-bottom-left.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.line-type-corner-bottom-right {
	background: url("_images/_lines/line-type-corner-top-left.svg");
	background-repeat: no-repeat;
	background-position: center;
}


/*wiht bends*/

.line-type-bend-dr-right-up-bend-01 {
	background: url("_images/_lines/line-type-bend-dr-right-up-bend-01.svg");
	background-repeat: no-repeat;
	background-position: center;
}

/* WHITE */

.line-type-straight-white {
	background: url("_images/_lines/line-type-straight-white.svg");
	background-repeat: repeat-y;
	background-position: center;

	opacity: 0.9;
}

/*.line-type-straight-white:after {
	content: "";
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	background: url("_images/_lines/line-type-straight-white.svg");
	background-repeat: repeat-y;
	background-position: center;

	opacity: 0.7;
}*/

.line-type-straight-hr-white {
	background: url("_images/_lines/line-type-straight-hr-white.svg");
	background-repeat: repeat-x;
	background-position: center;

	opacity: 0.9;
}

.line-type-bend-dr-left-up-white {
	background: url("_images/_lines/line-type-bend-dr-left-up-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-bend-dr-left-down-white {
	background: url("_images/_lines/line-type-bend-dr-left-down-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-bend-dr-right-up-white {
	background: url("_images/_lines/line-type-bend-dr-right-up-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-bend-dr-right-down-white {
	background: url("_images/_lines/line-type-bend-dr-right-down-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-bend-dr-right-down-02-white {
	background: url("_images/_lines/line-type-bend-dr-right-down-02-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-corner-top-left-white {
	background: url("_images/_lines/line-type-bend-dr-right-down-02-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	transform:rotate(-180deg);

	opacity: 0.9;
}

.line-type-corner-top-right-white {
	background: url("_images/_lines/line-type-corner-top-right-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-corner-bottom-left-white {
	background: url("_images/_lines/line-type-corner-bottom-left-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-corner-bottom-right-white {
	background: url("_images/_lines/line-type-corner-top-left-white.svg");
	background-repeat: no-repeat;
	background-position: center;

	opacity: 0.9;
}

.line-type-straight-hr-bend-01-white {
	background: url("_images/_lines/line-type-straight-hr-bend-01-white.svg");
	background-repeat: repeat-x;
	background-position: center;

	opacity: 0.9;
}

.line-type-straight-bend-01-white {
	background: url("_images/_lines/line-type-straight-bend-white.svg");
	background-repeat: repeat-y;
	background-position: center;

	opacity: 0.9;
}

/* HOLDERS */

.line-holder-straight-hr {
	position: relative;
	display: inline-block;
}

.line-holder-corner {
	position: relative;
	display: inline-block;

	width: 88px;
	height: 88px;
}

.line-width-100-full {
	position: relative;
	width: calc(100%);
	height: 44px;
}

.line-width-100 {
	position: relative;
	width: calc(100% - 176px);
	height: 88px;
}

.line-width-50 {
	position: relative;
	width: calc(50% - 132px);
	height: 88px;
}

.line-width-88px {
	position: relative;
	width: calc(88px);
	height: 88px;
}

.line-mobile-space {
	position: relative;
	min-width: 100%;
	height: 88px;
	display: none;
}

.line-tablet-space {
	position: relative;
	min-width: 100%;
	height: 88px;
	display: none;
}

.line-holder-corner-bottom-left-page {
	position: relative;
	min-width: 144px;
	min-height: 144px;
	/*margin-top: -28px;*/
}

.line-holder-corner-top-left-page {
	position: relative;
	width: 144px;
	height: 144px;
	/*margin-top: -28px;*/
}

.line-holder-corner-top-right-page {
	position: relative;
	width: 144px;
	height: 144px;
	/*margin-top: -28px;*/
}

.line-holder-corner-bottom-right-page {
	position: relative;
	min-width: 144px;
	min-height: 144px;
	/*margin-top: -28px;*/
}

.line-holder-straight-left-side {
	position: relative;
	min-width: 144px;
}

.line-holder-straight-right-side {
	position: relative;
	min-width: 144px;
}

.line-holder-straight-hr-full-width {
	position: relative;
	width: calc(100% - 288px);
	height: 144px;
}

.line-holder-straight-hr-half-width {
	position: relative;
	width: calc(50% - 188px);
	height: 144px;
}

.line-holder-corner-top-left {
	position: relative;
	width: 144px;
	height: 144px;
}

.line-holder-corner-top-right-small {
	position: relative;
	width: 88px;
	height: 144px;
}

.line-holder-corner-top-left-small {
	position: relative;
	min-width: 88px;
	min-height: 144px;	
}

.line-holder-straight-page-end {
	position: relative;
	margin-left: calc(100% - 144px);
	width: calc(144px);
	height: 88px;
}

.line-holder-footer-newsletter-above-right {
	position: relative;

	width: 88px;
	height: 40px;

	margin-left: calc(100% - 116px);
}

.line-holder-footer-newsletter-bottom-left {
	position: relative;

	width: 144px;
	height: 40px;
}

.line-holder-footer-newsletter {
	position: relative;
	height: auto;
	min-width: 144px;
}

.line-holder-footer-newsletter-between {
	position: relative;
	height: auto;
	width: calc(15% - 144px);
}

.line-holder-footer-top-left {
	position: relative;
	display: inline-block;
	width: 144px;
	height: 144px;

	margin-bottom: -28px;
}

.line-holder-footer-between {
	position: relative;
	display: inline-block;
	width: calc(50% - 188px);
	height: 88px;
	margin-top: 28px;
}

.line-holder-footer-top-right {
	position: relative;
	display: inline-block;
	width: 88px;
	height: 88px;
	margin-top: 28px;
}

.show-t {
	display: none;
}

@media screen and (max-width: 768px) {

	.hide-t {
		display: none;
	}

	.show-t {
		display: inherit;
	}

/*	.line-type-corner-top-left {
		background: url("_images/_lines/line-type-bend-dr-right-down.svg");
		background-repeat: no-repeat;
		background-position: center;
	}*/

	.line-tablet-space {
		display: inherit;
		display: flex;
		flex-wrap: wrap;
		align-items:stretch;
	}

	.line-holder-footer-newsletter {
		position: relative;
		height: auto;
		width: 88px;
		min-width: 0px;
	}

	.line-holder-footer-newsletter-between {
		display: none;
	}

	.line-holder-footer-newsletter-above-right {
		margin-left: calc(100% - 88px);
	}

	.line-holder-footer-newsletter-above-right, .line-holder-footer-newsletter-bottom-left {
		width: 88px;
		height: 24px;
	}

	.line-holder-footer-top-left {
		position: relative;
		display: inline-block;
		width: 144px;
		height: 144px;
		margin-left: -28px;
		margin-bottom: -28px;
	}

	.line-holder-footer-between {
		position: relative;
		display: inline-block;
		width: calc(50% - 160px);
		height: 88px;
		margin-top: 28px;
	}

	.line-holder-footer-top-right {
		position: relative;
		display: inline-block;
		width: 88px;
		height: 88px;

		margin-top: 28px;
	}

	.line-holder-straight-hr-half-width {
		width: calc(100% - 288px);
		height: 144px;
	}

/*	.line-holder-corner-bottom-left-page {
		margin-left: -28px;
	}

	.line-holder-straight-hr-half-width {
		width: calc(50% - 160px);
		height: 144px;
	}*/

	.line-holder-straight-page-end {
		margin-left: calc(100% - 116px);
		display: none;
	}

	.line-holder-corner-top-right-small {
		min-width: 144px;
		min-height: 144px;
	}

	.line-holder-corner-top-left-small {
		min-width: 144px;
		min-height: 144px;
	}

}

@media screen and (max-width: 440px) {

	.show-t {
		display: none;
	}

	.line-mobile-space {
		display: flex;
		flex-wrap: wrap;
		align-items:stretch;
	}

	.line-tablet-space {
		display: none;
	}

	.hide {
		display: none;
	}

	.line-width-50 {
		width: calc(50% - 132px);
	}

	.line-page-leftside {
		margin-left: -44px;
	}

	/*.line-width-100, .line-width-100-full, .line-width-50,*/ .line-width-88px  {
		height: 32px;
	}

	.line-holder-footer-newsletter {
		display: none;
	}

	.line-holder-footer-newsletter-above-right, .line-holder-footer-newsletter-bottom-left {
		height: 16px;
	}

}