html, body
{
    height: 100vh;
    margin: 0px;
    overflow-x: hidden;
}
.col-img
{
	/*background-color: #125488;*/
	background-color: #02D6FC;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	z-index: 2;
	transform-style: preserve-3d;
}
.col-info
{
	/*background-color: #957256;*/
	background-color: #1B46F4;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content:  center;
	height: 100vh;
	clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
	z-index:  1;
	transform-style: preserve-3d;
}
.col-img::before{
	content: "";
	/*background-color: #125488;*/
	background-color: #02D6FC;
    position: absolute;
    left: 100%;
    top: 0;
    clip-path: polygon(0 0, 50% 0, 10% 100%, 0 100%);
    height: 100vh;
    width: 100%;
    z-index: 2;
    transform-style: preserve-3d;
    transform: translateX(-1px);
}
@media (max-width: 767px) and (orientation: portrait)  {
	.col-img
	{
		height: 30vh;
	}
	.col-info
	{
		height: 70vh;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.col-info .fa-8x
	{
		font-size: 6em;
	}
	.col-img::before
	{
		left: 0;
		top: 100%;
    	height: 30vh;
		clip-path: polygon(100% 0, 100% 5%, 50% 25%, 0 5%, 0 0);
    	transform: translateY(-1px);
	}
}
@media (max-width: 767px) and (orientation: landscape)  {
	.col-img
	{
		height: 30vw;
	}
	.col-info
	{
		padding-top: 5%;
		height: 70vw;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	.col-info .fa-8x
	{
		font-size: 6em;
	}
	.col-img::before
	{
		left: 0;
		top: 100%;
    	height: 30vw;
		clip-path: polygon(100% 0, 100% 5%, 50% 25%, 0 5%, 0 0);
    	transform: translateY(-1px);
	}
}