*{
  margin: 0px;
  padding: 0px;
}
html, body
{
	height: 100%;
}
.withbg
{
	height: 100%;
	background-image: url("./Foodland Inside_edited.jpg");
	background-position: center;
	background-size: cover;
}
.icons
{
	/*
	 border: 2px solid black;
	*/
	position: fixed;
	top: 35%;
	right: 0%;
	width: 210px;
	display: flex;
	flex-direction: column;
	line-height: 50px;
	z-index: 10;
}

.icons a
{
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px;
	font-size: 22px;
	font-family: 'Oswald', sans-serif;
	margin: 2px;
	text-align: left;
	border-radius: 50px 0px 0px 50px;
	
	
	-webkit-transition: all 0.5s;   /* tried for ios*/
	-webkit-transform: translate(150px, 0px);  /* tried for ios*/
	transform: translate(150px, 0px);	
	transition: all 0.5s;
}


.icons a:hover
{
	cursor: pointer; /* tried for ios*/
	-webkit-transform: translate(0px, 0px);
	
	transform: translate(0px, 0px);	
	
}

.icons a i
{
	margin-right: 10px;
	background-color: white;
	height: 40px;
	width: 40px;
	color: black;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
}
.icons a i.fa-facebook
{
	color: #d92323;
	color: #3b5998;
}

.facebook
{
	background-color: #d92323;
	background-color: #3b5998;
	color: white;

}

.icons a i.fa-instagram-square
{
	color: #d92323;
	color: #cc61ec;
}

.instagram
{
	background-color: #d92323;
	background-color: #cc61ec;
	color: white;
}

.iconHide
{
display: inline;	
}

.icons a i.fa-youtube
{
	color: #d92323; 
	color: #fa0910;
}
.youtube
{
	background-color: #d92323;
	background-color: #fa0910;
	color: white;
}

.icons a i.fa-google
{
	color: #d92323;
	color: #dd4b39;
}

.google
{
	background-color: #d92323;
	background-color: #dd4b39;
	color: white;
}

.icons a i.fa-twitter
{
	color: #d92323;
}

.twitter
{
	background-color: #00ACEE;
	color: white;
}
.content
{
	margin-left:80px;
	margin-left:80px;
}

@media screen and (max-width: 500px) {
	.icons {
		line-height: 15px;
		top: 30%;
		position: fixed;
		width:60px;
		z-index: 10;
	}
	.iconHide
	{
		display: none;
	}
	.icons a {
		-webkit-transition: 0s;   /* tried for ios*/
		-webkit-transform: translate(150px, 0px);  /* tried for ios*/
		transform: translate(150px, 0px);	
		transition: 0s;
		transform: none
	}
	
	.icons a:hover
	{
		cursor: pointer; /* tried for ios*/
		-webkit-transform: translate(150px, 0px);
	
		transform: translate(150px, 0px);	
		transform: none;
	
	}
}