.cbp-so-scroller { /*margin-top: 3em;*/
overflow: hidden; }

.cbp-so-section { /*margin-bottom: 15em;*/
}

/* Clear floats of children */
.cbp-so-section:before, .cbp-so-section:after {
	content: " ";
	display: table;
}

.cbp-so-section:after { clear: both; }

/* Text styling */
.cbp-so-section h2 { /*font-size: 5em;
	font-weight: 300;
	line-height: 1;*/
}

.cbp-so-section p { /*font-size: 2em;
	font-weight: 300;*/
}

/* Sides */
.cbp-so-side {
	/*width: 50%;
	float: left;
	margin: 0;
	padding: 3em 4%;
	min-height: 12em;*/
	overflow: hidden;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	-moz-transition: -moz-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

/* Clear floats of children */
.cbp-so-side:before, .cbp-so-side:after {
	content: " ";
	display: table;
}

.cbp-so-side:after { clear: both; }

.cbp-so-side-right { text-align: left; }

.cbp-so-side-left { text-align: right; }

/* .cbp-so-side-right img { float: left; }

.cbp-so-side-left img { float: right; }*/

/* Initial state (hidden or anything else) */
.cbp-so-init .cbp-so-side { opacity: 0; }

.cbp-so-init .cbp-so-side-left {
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	transform: translateX(-100px);
}

.cbp-so-init .cbp-so-side-right {
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	transform: translateX(100px);
}

/* Animated state */
/* add you final states (transition) or your effects (animations) for each side */
.cbp-so-section.cbp-so-animate .cbp-so-side-left, .cbp-so-section.cbp-so-animate .cbp-so-side-right {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
	opacity: 1;
}

/* For example, add a delay for the right side:
.cbp-so-section.cbp-so-animate .cbp-so-side-right {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
*/