:root {
	--size-max-width: 1400px;
}


/*
-------------------
	TWO COLUMNS
-------------------
*/
.df_two_columns { display: flex; }
.df_two_columns .df_column { width: 50%; display: flex; }
.df_two_columns .df_column.df_column_text { padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: calc((100% - var(--size-max-width)) /2); display: flex; align-content: center; }
.df_two_columns .df_column.df_column_text :last-child { margin-bottom: 0 !important; }

.df_two_columns .df_column.df_column_image { display: flex; }
.df_two_columns .df_column.df_column_image img { width: 100%; height: auto; object-fit: cover; object-position: center; display: block; }
.df_two_columns .df_column.df_column_image.full img { height: 100%; }
.df_two_columns .df_column.df_column_image.haspadding { padding-top: 100px; padding-right: calc((100% - var(--size-max-width)) /2); padding-bottom: 100px; padding-left: 100px; display: flex; }

/* With Left Image */
.df_two_columns.leftimage .df_column.df_column_text { padding-left: 100px; padding-right: calc((100% - var(--size-max-width)) /2); order: 2; }
.df_two_columns.leftimage .df_column.df_column_image.haspadding { padding-left: calc((100% - var(--size-max-width)) /2); padding-right: 100px; order: 1; }


/* 
----------------------
	FULL WITH TEXT
----------------------
*/
.df_full_with_text { padding: 100px 0; }


/*
----------------
	PARALLAX
----------------
*/
.df_parallax { height: 700px; position: relative; overflow: hidden; }
.df_parallax .parallax_image { width: 100%; height: 130%; left: 0; top: 0; position: absolute; overflow: hidden; }
.df_parallax .parallax_image img { width: 100% !important; height: 100% !important; object-fit: cover; }


/*
-------------------
	RWD DESIGN
-------------------
*/
@media only screen and (max-width: 1400px) { 

	/* TWO COLUMNS */
	.df_two_columns .df_column.df_column_text { padding: 50px 20px !important; }

	/* TWO COLUMNS: With Left Image */
	.df_two_columns.leftimage .df_column.df_column_text { padding: 50px 20px; }
	.df_two_columns.leftimage .df_column.df_column_image.haspadding { padding-left: 20px; }
	
	/* FULL WITH TEXT */
	.df_full_with_text { padding: 50px 0; }
}

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

	/* TWO COLUMNS */
	.df_two_columns .df_column { width: 100%; }

	/* TWO COLUMNS: With Left Image */
	.df_two_columns.leftimage .df_column.df_column_image.haspadding { padding: 0; }

}