#content{
	position: relative;
}
button{
    outline:none;
}

iframe{
	border:0;
	width: 100%;
}

.video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background: url('play-btn.png') no-repeat;
	background-size: cover;
  width: 64px;
  height: 64px;
}

.link{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background: url('link-btn.png') no-repeat;
	background-size: cover;
  width: 64px;
  height: 64px;
}

.whatsapp{
	float: right;
  background: url('whatsapp.png')	no-repeat;
	background-size: cover;
  max-width: 48px;
  width: 48px;
  height: 48px;
}

.facebook{
	float: right;
  background: url('facebook.png')	no-repeat;
	background-size: cover;
  max-width: 48px;
  width: 48px;
  height: 48px;
}


@media (min-width: 480px) {
	body, html{
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 1.1em;
	}

	#main{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.post{
		width: 50vw;
		padding: 2em;
		margin: 2em;
		border: solid 1px rgb(200,200,200);
		border-radius: 1em;
	}

	.post #title{
		text-align: justify;
		border-bottom: solid 1px rgb(200,200,200);
	}

	.post #content img{
		width: 50vw;
	}

	.post #content video{
		width: 50vw;
	}

	#footer{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 2em;
	}

	.arrow{
		width: 20vw;
		text-align: center;
		font-family: verdana;
		font-weight: bold;
		font-size: 3em;
		border: solid 1px rgb(200,200,200);
		border-radius: 2em;
		line-height: 2em;
		cursor: pointer;
	}
	
	.whastlink{
		display: none;
	}
	
	.facelink{
		display: block;
	}
}

@media (max-width: 480px) {
	body, html{
		font-family: Arial;
		font-size: 1em;
	}

	#main{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.post{
		width: 100%;
		margin-bottom: 2em;
		border-bottom: solid 1px rgb(200,200,200);
	}

	.post #title{
		text-align: justify;
		background-color: rgb(250,250,250);
		padding: 0.3em;
		border-bottom: solid 1px rgb(230,230,230);
	}

	.post #content img{
		width: 100%;
		margin-bottom: 2em;
	}

	.post #content video{
		width: 100%;
	}

	#footer{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.arrow{
		width: 30vw;
		text-align: center;
		font-family: verdana;
		font-weight: bold;
		font-size: 3em;
		border: solid 1px rgba(0,0,0,0.5);
		border-radius: 2em;
		line-height: 2em;
		cursor: pointer;
	} 
	
	.whastlink{
		display: block;
	}
	
	.facelink{
		display: block;
	}
}