@media screen and (max-width: 500px){
	#content{
		width: 100%;
	}
	.img{
		background-image: url(../images/couple.png);
		background-size: 100%;
		width: 100%;
		height: 223px;
		background-repeat: no-repeat;
	}
	.title{
		width: 90%;
		padding: 25px 0 25px 0;
		margin: auto;
	}
	.title h1{
		text-align: center;
		text-transform: unset;
		font-weight: bold;
		font-size: 20px;
	}
	.list{
		display: none;
	}
	.list2{
		display: block;
		padding: 0 0 20px 20px;
	}
	.list2 li{
		color: #06a;
		font-size: 15px;
		font-family: arial;
	}
	.thirdpartyLogos{
		width: 95%;
		margin: auto;
		background-color: #eee;
		border-radius: 15px;
		margin-bottom: 20px;
	}
	.thirdpartyLogos img{
		width: 35px;
		filter: grayscale(100%);
		padding: 10px;
	}
	@keyframes slide{
		0%{transform: translate(300px, 45px); opacity: 0}
		20%{transform: translate(0px, 45px); opacity: 100%}
		80%{transform: translate(0px, 45px); opacity: 100%}
		100%{transform: translate(-300px, 45px); opacity: 0}
	}
	@keyframes slide2{
		0%{transform: translate(300px, 0px); opacity: 0}
		20%{transform: translate(0px, 0px); opacity: 100%}
		80%{transform: translate(0px, 0px); opacity: 100%}
		100%{transform: translate(-300px, 0px); opacity: 0}
	}
}
@media screen and (min-width: 501px){
	#content{
		width: 100%;
		height: 80vh;
	}
	.back{
		width: 35%;
		height: 80vh;
		background-color: #06a;
		float: right;
		position: relative;
	}
	.img{
		background-image: url(../images/couple.png);
		background-size: 100%;
		width: 560px;
		height: 333px;
		box-shadow: 5px 5px 20px 0px #484848;
		position: absolute;
		bottom: 25%;
		right: 10%;
	}
	.title{
		width: 50%;
		padding-top: 55px;
	}
	.title h1{
		text-align: center;
		text-transform: unset;
		font-weight: bold;
		font-size: 32px;
	}
	.list{
		text-align: center;
		margin-top: 1%;
		margin-left: 7%;
		width: 40%;
		height: 80px;
		border-bottom: solid 1px #ccc;
	}
	.list2{
		display: none;
	}
	.list h2{
		animation: slide 3s infinite;
		font-size: 30px;
		font-family: arial;
		text-transform: unset;
	}
	.thirdpartyLogos{
		width: fit-content;
		padding: 10px;
		background-color: #eee;
		border-radius: 30px;
		position: absolute;
		top: 81%;
		left: 50%;
		transform: translateX(-50%);
	}
	.thirdpartyLogos img{
		width: 80px;
		filter: grayscale(100%);
		padding: 10px;
	}
	@keyframes slide{
		0%{transform: translate(300px, 45px); opacity: 0}
		20%{transform: translate(0px, 45px); opacity: 100%}
		80%{transform: translate(0px, 45px); opacity: 100%}
		100%{transform: translate(-300px, 45px); opacity: 0}
	}
	@keyframes slide2{
		0%{transform: translate(300px, 0px); opacity: 0}
		20%{transform: translate(0px, 0px); opacity: 100%}
		80%{transform: translate(0px, 0px); opacity: 100%}
		100%{transform: translate(-300px, 0px); opacity: 0}
	}
}