html, body { 
	
	font: 300 1em/1.5 'Libre Franklin';
	padding:0; 
	margin: 0;
}

body { border: #FFF solid 50px; background: #F4F2EC; height: calc(100vh - 100px);}

#container { height: 100%; display: flex; flex-flow: column; }

.main-content { 
	margin: auto;
	display: flex;
	align-content: flex-end;
}

a { color: #cab48f;}
a:hover { text-decoration: none;}

.inside-content { 
	display: flex;
	gap: 3%;
	justify-content: space-between;
	max-width: 1400px;
	margin: auto;
	width: 90%;
}

.inside-content .col-4 { 
	padding-right: 3%;
	border-right: rgba(0,0,0,0.1) solid 1px;

}

.inside-content .col-4:last-child { 
	border: none;
	padding-right: 0;
}

footer { padding: 10px 50px }



@media screen and (max-width: 1280px) {
	
	.inside-content { 
		flex-flow: column;
	}
	
	.inside-content .col-4 { 
		padding: 2% 0;
		border: none;
		border-bottom:  rgba(0,0,0,0.1) solid 1px;

	}
	
}


@media screen and (max-width: 820px) {
	
	.main-content { 
		height: calc(100vh - 200px);
		width: calc(100vw - 200px);
		padding: 50px;
		margin: auto;
		background: #F4F2EC; 
		display: flex;
		align-content: flex-end;

	}
	
	.col img { width: 100%; height: auto;}
	
}


@media screen and  ( max-height: 760px) {
	
	body { height: 100%; border: #FFF solid 50px;}
}


@media screen and (max-width: 540px) {
	
	body { height: 100%; border: #FFF solid 30px;}
	
	
}