@charset "UTF-8";
/* CSS Document */

html, body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    border: none;
}

.OuterWrap{
	width: 100vw;
	height: 100vh;
	background: url('../images/Marble_Johannesburg_Background.jpg') no-repeat;
    background-size: cover;
    background-position: center;
	background-attachment: fixed;
	overflow-y: hidden;
	display: flex;
	flex-direction: column; 
	justify-content: center;
	align-items: center;
}

.LogoWrap{
	width: 100%; 
	text-align: center; 
	margin-bottom: 100px;
	padding: 30px;
}

.IconWrap{
	display: flex;
	flex-direction: row;
	width: 85%;
}

.IconColumn{
	width: 25%;
	text-align: center;
}

.IconImage{
		height: 160px;
		width: auto;
}

.LogoImage{}

@media screen and (max-width: 850px) {
	
	.OuterWrap{
	    height: 100%;
	    padding-top:50px;
	    padding-bottom:50px;
	}
	
	.LogoWrap{
		margin-bottom: 60px;
	}
	
	.IconWrap{
	flex-direction: column;
	width: 100%;
	}
	
	.IconColumn{
	width: 100%;
	text-align: center;
	margin-bottom: 80px;
	}
	
	.LogoImage{
		width: 30%;
		height: auto;
	}
	
	.IconImage{
		height: 160px;
		width: auto;
	}
}

@media screen and (max-width: 500px) {
	
	.OuterWrap{
	    height: 100%;
	    padding-top:30px;
	    padding-bottom:30px;
	}
	
	.LogoWrap{
		margin-bottom: 20px;
	}
	
	.IconWrap{
	flex-direction: column;
	width: 100%;
	}
	
	.IconColumn{
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
	}
	
	.LogoImage{
		width: 40%;
		height: auto;
	}
	
	.IconImage{
		height: 100px;
		width: auto;
	}
}