/**
 * #bodyContainer
 * Een algemene container om overflows te omzeilen en de rotated content netjes in te passen
 */
#RC_bodyContainer
{
	display:block;
	width:100%;
	overflow:hidden;
}

div.whiteBackground
{
	background-color:white;
	position:absolute;
	width:100%;
	height:1500px;
	z-index:20;
}

/*
#RC_bodyContainer .RC_rotateContainer:first-child .RC_contentContainer .RC_contentRow
{
	margin-top:300px;
}
*/
/**
 * Voorbeeld HTML:

	<div id="RC_bodyContainer">
		<div class="RC_cap">&nbsp;</div>
		<div class="RC_rotateContainer CW">
			<div class="RC_contentContainer background">
				<div class="RC_contentRow">
					<h1>HEADER CONTENT</h1>
					<p>CONTENT</p>
				</div>
				<div class="RC_close">&nbsp;</div>
			</div>
		</div>
	</div>
 */

/**
 * rotateContainer
 * Deze container wordt gedraaid (.CW of .CCW),
 * de content (.contentContainer) die daar in zit wordt teruggedraaid zodat
 * alle content weer recht komt te staan
 */
.RC_rotateContainer
{
	width:150%;
	margin:-100px 0 100px -25%; 
	position:relative;
	overflow: hidden;
	/* z-index:0; */
	
	/* Rezo-zero-footer */
	z-index:20;
}

.RC_rotateContainer.footer
{
	position:fixed;
	margin:-100px 0 100px -25%;
}

.RC_rotateContainer.CW
{
	transform:rotate(3deg);
	-ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform:rotate(3deg); /* Chrome, Safari, Opera */
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);

	/* Rezo-zero-footer */
	z-index:20;
}

.RC_rotateContainer.CCW
{
	transform:rotate(-3deg);
	-ms-transform:rotate(-3deg); /* IE 9 */
    -webkit-transform:rotate(-3deg); /* Chrome, Safari, Opera */
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);

	/* Rezo-zero-footer */
	z-index:20;

}

.RC_contentContainer
{
	border:1px solid transparent;
	margin:-100px auto;
	
	/* Rezo-zero-footer */
	/*z-index:2;*/
}	

.RC_rotateContainer.CW .RC_contentContainer
{
	transform:rotate(-3deg);
	-ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform:rotate(-3deg); /* Chrome, Safari, Opera */
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	
	/* Rezo-zero-footer */
	/*z-index:2;*/
}

.RC_rotateContainer.CCW .RC_contentContainer
{
	transform:rotate(3deg);
	-ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform:rotate(3deg); /* Chrome, Safari, Opera */
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);

	/* Rezo-zero-footer */
	/*z-index:2;*/
}

.RC_contentRow
{
	/*max-width:1020px;*/
	margin:164px auto;
	overflow: hidden;
}

.RC_contentRow.collapse
{
	margin:0px auto 100px auto;
}

/**
 * Gebruik cap of close om een rotated container af te vlakken
 */
 .RC_cap
 {
	 display:none;
	 width:100%;
	 height:140px; /* 200px; */
	 position:absolute;
	 top:-90px;
	 z-index:25;
	 background-color:white;
 }

 .RC_rotateContainer.capped
 {
	 margin-top:-180px;
 }
 
 .RC_rotateContainer.capped .RC_contentRow
 {
	 margin-top:300px;
 }
 
 .RC_rotateContainer.capped .RC_contentRow.collapse
 {
	 margin-top:200px;
 }
 
 .RC_close
 {
	 display:block;
	 width:100%;
	 height:200px;
	 position:absolute;
	 bottom:0;
}
 
 .RC_rotateContainer.closed
 {
	 margin-bottom:-180px;
}
 
 .RC_rotateContainer.closed .RC_close
 {
	 background-color:white;
}

/**
 * Eventuele extra optie is een achtergrond afbeelding
 */
 
.RC_contentContainer.background
 {
	background-color:gray;
	width:90%;
 }

.RC_contentContainer.background.fit
{
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

.RC_contentContainer.background.fit .RC_contentRow
{
	margin:500px auto;
}

/**
 * Responsive breakpoints
 */
@media screen and (max-device-width : 1280px)
{
	.RC_contentRow
	{
		max-width:73%;
	}
	
	.RC_contentContainer.background.fit .RC_contentRow
	{
		margin:300px auto;
	}
	
	.RC_contentRow.collapse
	{
		margin:50px auto 200px auto;
	}
}

@media screen and (max-device-width : 480px)
{
	.RC_contentContainer.background.fit .RC_contentRow
	{
		margin:200px auto;
	}
	
	.RC_contentRow.collapse
	{
		margin:80px auto 200px auto;
	}
}