:root {
	--banner-width:260px;
	--banner-height:auto;
}
	
.banner-background {		
   background:green;
}
.content-banners {			
	width:1350px;
	margin:0 auto;
}

.banner-icon {
	font-size:40px;
	color:#bbb;
}

.banner-head {
	padding:20px 0px 20px 0px;
	font-size:30px;
	font-weight:bold;
	color:#3b5e69;
}

.cont-left {		
	width:var(--banner-width);
	height:var(--banner-height);
	padding:45px 45px 0px 45px;
	margin:-45px 0px 0px 0px;
	border-radius:50px 0px 0px 0px;
	border-left:1px solid gold;
	float:left;
	opacity:1;
	background-image: linear-gradient(#f2e7c3, #f5f9f6);
	
}
.cont-left-2 {
	width:var(--banner-width);
	height:var(--banner-height);
	padding:45px 45px 0px 45px;
	margin:-65px 0px 0px -20px;
	border-radius:50px 5px 0px 0px;
	border-left:1px solid gold;
	float:left;
	opacity:1;
	background-image: linear-gradient(#f4de98, #f5f9f9);
}
.cont-right-2 {
	width:var(--banner-width);
	height:var(--banner-height);
	padding:45px 45px 0px 45px;
	margin:-30px 0px 0px -20px;
	border-radius:50px 0px 0px 0px;
	border-right:1px solid gold;
	border-left:1px solid gold;
	float:right;
	opacity:1;
	background-image: linear-gradient(#ecce73, #f5f9f6);
}
.cont-right {		
	width:var(--banner-width);
	height:var(--banner-height);
	padding:45px 45px 0px 45px;
	margin:-85px 0px 0px -20px;			
	border-radius:50px 0px 0px 0px;
	border-right:1px solid gold;
	float:right;
	opacity:1;
	background-image: linear-gradient(#eac347, #f5f9f6);
}

.cpt-variable {			/*Block without columns and variable width*/
	text-align:center;
	margin:0 auto;
	width:60%;
	padding:30px 0px 20px 0px;
	clear:both;
}

.cpt-col-block {				/*Block with columns and fixed width*/
	margin:0 auto;		
	width:1200px;
	display:table;
	padding:0;
}

.cpt-left {		
	width:770px;
	padding:0px 20px 0px 0px;
	display: table-cell;
	background:transparent;
}
.cpt-right {				
	width:380px;
	padding:0px 25px 0px 25px;
	background:#eee;
	margin:20px;
	display: table-cell;
	height:auto;
}
	
@media screen and (max-width: 680px) {	
	.content-banners {		
		margin:0;		
		width:98%;
		clear:both;
		padding:0;
	}
	
	.banner-head {
		padding:20px 0px 20px 0px;
		font-size:25px;
		font-weight:bold;
		color:#3B5E69;
	}
	
	.cont-left, .cont-left-2, .cont-right-2, .cont-right {		
		width:93%;
		height:auto;
		padding:8px;
		margin:8px;		
		border-radius:0;
		border-left:1px solid gold;
		float:left;
		opacity:1;
		background-image: linear-gradient(#f2e7c3, #FfFAFD);		
	}
	
	.cpt-variable {		
		margin:0px auto;
		padding:15px 8px 15px 8px;
		width:auto;
	}
	
	.cpt-col-block {
		padding-top:0;
		margin:0 auto;
		width:100%;
		float:none;
	}
	.cpt-left {
		display:block;
		margin:0 auto;
		padding:8px 8px 20px 8px;			
		width:auto;
		color:#3b5e69;
		text-align:center;
	}
	
	.cpt-right {		
		display:block;
		width:auto;
		height:auto;
		margin:0 auto;
		padding:8px;
	}
	
	.cpt-right p, div {
		text-align:center;
	}
}