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

.row {
	display: flex;
	flex-wrap: wrap;
	align-items:stretch;
}

.paper-type-light .row h1,
.paper-type-light .row h2,
.paper-type-light .row h3,
.paper-type-light .row h4  {
	/*background: url("_images/texture-paper-light.jpg");*/
	background-color: white;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 8px;
}

.paper-type-white .row h1,
.paper-type-white .row h2,
.paper-type-white .row h3,
.paper-type-white .row h4 { 
	/*background: url("_images/texture-paper-white.jpg");*/
	background-color: white;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 8px;
}

.paper-type-green .row h1,
.paper-type-green .row h2,
.paper-type-green .row h3,
.paper-type-green .row h4 { 
	/*background: url("_images/texture-paper-green.jpg");*/
	background-color: white;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 8px;
}

.paper-type-orange .row h1,
.paper-type-orange .row h2,
.paper-type-orange .row h3,
.paper-type-orange .row h4 {
	/*background: url("_images/texture-paper-orange.jpg");*/
	background-color: white;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 8px;
}

.paper-type-red .row h1,
.paper-type-red .row h2,
.paper-type-red .row h3,
.paper-type-red .row h4 {
	/*background: url("_images/texture-paper-red.jpg");*/
	background-color: white;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 8px;
}

.row h1, .row h2, .row h3, .row h4 {
	/*position: absolute;
		top: -36px;
		left: 44px;*/
	/*display: inline-block;*/
	/*padding: 0 16px;*/
	/*margin-top: -52px;*/
	/*line-height: 20px;

	margin: 0 -16px;

	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.10em;

	font-size: 18px;*/
}

.page-product-knop h3 {
	color: #e04341;
}

.row-3 {
	position: relative;
	width: 30%;

	padding-bottom: 46px;
}

.column-half-page {
	position: relative;
	width: calc(50% - 264px);

	padding-left: 44px;
	padding-right: 44px;
	padding-bottom: 80px;

	margin-top: -42px;

	font-size: 18px;
	line-height: 26px;
}

.column-half-page img, .column-third-page img {
	width: 100%;
	height: auto;
	margin-bottom: 16px;
}

.column-full-page-image img {
	width: 100%;
	height: auto;
	margin-bottom: 0px;
}

.column-third-page {
	position: relative;
	width:calc(60% - 88px );
	
	padding-left: 44px;
	padding-right: 44px;
	padding-bottom: 80px;

	margin-top: -42px;

	font-size: 18px;
	line-height: 26px;
}

.column-one-third-page {
	position: relative;
	width:calc(30% - 44px );
	
	padding-left: 0px;
	padding-right: 44px;
	padding-bottom: 80px;

	margin-top: -16px;

	font-size: 18px;
	line-height: 26px;
}

.column-full-page {
	position: relative;
	width:calc(100% - 376px );
	
	padding-left: 44px;
	padding-right: 44px;
	padding-bottom: 80px;

	margin-top: -16px;

	font-size: 18px;
	line-height: 26px;
}

.column-full-page-image {
	position: relative;
	width:calc(100% );
	
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;

	margin-top: 0px;

	font-size: 18px;
	line-height: 26px;
}

.column-half-page-spacer {
	width: 64px;
}

.offset-2 {
	margin-left: 10%;
}

.offset-4 {
	margin-left: 40%;
}

.offset-5 {
	margin-left: 50%;
}

.offset-6 {
	margin-left: 60%;
}

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

	.row {
		/*justify-content: space-between;*/
		flex-wrap: nowrap;
	}

	.column-half-page {
		position: relative;
		width: calc(50%);

		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 32px;

		margin-left: 0px;

		font-size: 16px;
	}

	.column-third-page {
		position: relative;
		width: calc(60%);

		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 64px;

		font-size: 16px !important;
	}

	.row {
		margin: 0 -28px;
	}

	.row h1, .row h2, .row h3, .row h4 {
		position: absolute;
			top: -36px;
			left: 0px;
		/*display: inline-block;*/
		padding: 0 16px;
		/*margin-top: -52px;*/
		line-height: 20px;

		margin: 0 -16px;

		text-transform: uppercase;
		font-weight: normal;
		letter-spacing: 0.10em;

		font-size: 16px;
	}

	.column-full-page {
		width:calc(100% - 287px );
		
		padding-left: 0px;
		padding-right: 0px;
	}

	.column-full-page-image {		
		padding-left: 44px;
		padding-right:44px;
		padding-bottom: 0px;
	}

}

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

	.column-half-page, .column-third-page {
		position: relative;
		width:calc(100% - 32px );

		text-align: center;

		padding-top: 16px;
		padding-bottom: 16px;
		margin-left: 0;
		margin: auto;

		font-size: 16px;
	}

	.column-full-page-image {		
		padding-left: 0px;
		padding-right:0px;
		padding-bottom: 0px;
	}

	.column-full-page {
		width:calc(100%);
		padding-bottom: 0px;
	}

	.row {
		margin: 0;
		flex-wrap: wrap;
	}

	.row h1, .row h2, .row h3, .row h4 {
    position: relative;
    top: 0px;
    left: 0px;
    /* display: inline-block; */
    /* padding: 0 0 16px 0px; */
    /* margin-top: -52px; */
    line-height: 20px;
    margin: 0px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.10em;
    font-size: 20px !important;
    margin-bottom: 16px;
	}

	.row-3 {
		width: 100%;
		text-align: center;
		margin-top: 88px;
	}

	.offset-2 {
		margin-left: 0%;
	}

	.offset-4 {
		margin-left: 0%;
	}

	.offset-6 {
		margin-left: 0%;
	}

}