/*Galleries List Begin*/
html, body{
	height: 100%;
}

.contactContainer{
	border-top: 1px solid var(--page-devider-color);
	
	
	
	display: grid;
	grid-template-columns: 
			minmax(var(--inline-padding), 1fr)
			minmax(0, calc(var(--wrapper-max-width) / 4))
			minmax(0, calc(var(--wrapper-max-width) / 4))
			minmax(0, calc(var(--wrapper-max-width) / 4))
			minmax(0, calc(var(--wrapper-max-width) / 4))
			minmax(var(--inline-padding), 1fr);
	grid-template-rows: 
			20px
			minmax(80px, 180px)
			minmax(350px, 1fr)
			minmax(80px, 210px);
			;		
	align-items: center;			
	position: relative;	
}

.contactContainer::after{
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	
	border-top: 0;
	border-bottom: 1px solid var(--page-devider-color);
	border-left: 0;
	border-right: 1px solid var(--page-devider-color);
	
	top: 0;
	left: 50%;
	
	margin-left: -12px;
	margin-top: -12px;
	transform: rotate(45deg);
	background: white;

}

.contactContainer span{
	width: 100%;
    display: inline-block;	
}

.contactAddress{
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	
	grid-column: 2 / 5;
	grid-row: 2 /3;
	position: relative;
	
	width: 100%;
	color: black;
}

.contactAddress li{
	border-right: 1px solid var(--page-devider-color);
    padding: 0 15px;
}

.contactSocial{	
	grid-column: 5 / 6; 
	grid-row: 2/3; 
	text-align: center;
	
	display: flex;
    justify-content: space-evenly;
    flex-direction: row;
	}


.contactImage{
	grid-row: 3/4;
	grid-column: 1 / -1;
	
    background-image: url('../media/contact_map.jpg');
   
    background-repeat: no-repeat;	
    background-position: center center;
	background-size: cover;	
	height: 100%;
	
}

.contactSocial .iconColor{
	fill : var(--page-devider-color);
}

.contactSocial a{
	height: 40px;
	display: inline-block;
}

.contactSocial svg{
	height: 40px;
	width: auto;
}

.contactSocial a:hover .iconColor{
	fill : var(--main-ds-color);
}

.contactSocial .iconTransparent{
	fill : white;
}


@media (max-width: 1024px){
	.contactAddress{
		grid-column: 3 / 5;
		grid-row: 2 /3;
		
		flex-direction: column;
    	align-items: center;
		
	}
	.contactAddress li{
		border-right: 0;
		text-align: center;
	}
	
	.contactSocial{	grid-column: 3 / 5; grid-row: 4 / 5; }

	
}
@media (max-width: 950px){}
@media (max-width: 832px){}
@media (max-width: 650px){}
@media (max-width: 430px){
	.contactContainer{
		grid-template-rows: 20px minmax(49px, 187px) minmax(180px, 1fr) minmax(80px, 210px);
	}
}