#four-blocks {
	display: flex;
	flex-direction: row;			
	background: #f5f5f5;
	margin-bottom: 15px;
	overflow: hidden;
}
#four-blocks span:not(.bg-image){
	position: relative;
	z-index: 2;
	text-align: center;
}
#four-blocks a {
	flex-grow: 1;
	position: relative;
	/* width: 100%; */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	text-decoration: none;
	margin: -6px!important;
}
#four-blocks > div {
	width: 50%;
	border: 10px solid #fbfbfb;
    overflow: hidden;
    width: calc(50% - 1px);
    margin: -1px;

#   border-top: 2px solid #fbfbfb; mc - tried adding this to put a white border on top and bottom of boxes bc on mobile there is none
#   border-bottom: 2px solid #fbfbfb;
} 

#four-blocks .bg-image {
	background-position: center!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-blend-mode: overlay;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	filter: blur(2px);
}
#four-blocks a:before {
	content: "";
	display: block;
	padding-top: 50%;
}
#four-blocks .group-block .bg-image {
	background: url(/images_shared/fourblocks1opt.jpg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
#four-blocks .video-block .bg-image {
	background: url(/images_shared/fourblocks2opt.jpg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
#four-blocks .sites-block .bg-image {
	background: url(/images_shared/fourblocks3opt.jpg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
#four-blocks .chat-block .bg-image {
	background: url(/images_shared/fourblocks4opt.jpg), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}





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

	
	#four-blocks {
		flex-wrap: wrap;
	}
	#four-blocks a:before {
		padding-top: 35%;
	}
	#four-blocks > div {
		border: 3px solid #fbfbfb;
		overflow: hidden;
		width: calc(50% - 1.5px);
		margin: -1px;
	}
	
	.group-block-container {
		border-top: 0!important;
		border-left: 0!important;
	}
	.video-block-container {
		border-top: 0!important;
		border-right: 0!important;
	}
	.sites-block-container {
		border-bottom: 0!important;
		border-left: 0!important;
	}
	.chat-block-container {
		border-bottom: 0!important;
		border-right: 0!important;
	}
	
	
}

@media screen and (max-width:1100px){
	
	#four-blocks {
		row-gap: 4px;
	}
	
	#four-blocks a:before {
		padding-top: 22%;
	}
	#four-blocks > div {
		width: calc(50% - 1px);
		border: 0!important;
	}
	
	#four-blocks a:before {
		padding-top: 24%;
	}
	#four-blocks {
		column-gap: 1px;
		justify-content: space-between;
	}
	#four-blocks > div {
		width: calc(50% - 0.25px);
		border: 0!important;
	}

}

@media screen and (max-width:767px){
	
	.group-link-block {
		width: 100%;
		margin-bottom: 0;
		height: 173px;
	}

	#four-blocks a:before {
		padding-top: 30%;
	}

	
}
@media screen and (max-width:650px){

	#four-blocks > div {
		width: 100%;
	}
	
	#four-blocks a:before {
		padding-top: 18%;
	}
}

@media screen and (max-width:560px){
	#profile-main-menu {
		justify-content: space-between;
		border-radius: 4px;
		overflow: hidden;
	}
	#four-blocks a:before {
		padding-top: 20%;
	}

}

@media screen and (max-width:500px){	
	#four-blocks a:before {
		padding-top: 26%;
	}
	
	#four-blocks > div {
		width: 100%;
	}
}



@media screen and (max-width:400px){
	#four-blocks a:before {
		padding-top: 24%;
	}
}

@media screen and (max-width:370px){
	#four-blocks {
		row-gap: 2px;
		padding: 0 15px;
	}
	#four-blocks > div {
		width: 100%;
		margin: 0;
	}
}