@media screen and (max-width: 500px){
	@keyframes zoomIn {
	0%{transform: scale(0.5, 0.5); opacity: 0%;}
	100%{transform: scale(1, 1); opacity: 100%;}
	}
	@keyframes zoomOut {
		0%{transform: scale(1, 1); opacity: 100%;}
		100%{transform: scale(0.5, 0.5); opacity: 0%;}
	}
	@keyframes zoomIn2 {
		0%{transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(20deg); opacity: 0%;}
		100%{transform: translate(-50%, -50%) scale(1, 1) rotate(0deg); opacity: 100%;}
	}
	@keyframes zoomOut2 {
		0%{transform: translate(-50%, -50%) scale(1, 1) rotate(0deg); opacity: 100%;}
		100%{transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(-20deg); opacity: 0%;}
	}
	.wrapper{
		background-color: #fff;
		position: relative;
	}
	h1{
		font-size: 32px;
		text-align: center;
		margin: 30px 0 150px 0;
		font-weight: bold;
		letter-spacing: 2px;
	}
	.container{
		animation: zoomIn 0.8s;
		width: 80%;
		margin: 0 auto 0 auto;
	}
	.seguro{
		height: 350px;
		position: relative;
	}
	h2{
		text-align: center;
	}
	.seguro p{
		padding: 0 15px 0 15px;
		text-align: center;
	}
	.seguro button{
		font-size: 12px;
		color: #06a;
		background-color: unset;
		border: unset;
		text-decoration: underline #06a;
	}
	.seguro button:hover{
		cursor: pointer;

	}
	.seguro a{
		font-size: 12px;
		font-family: sans-serif;
		color: #06a;
	}
	.seguro a:hover{
		color: #333 !important;
	}
	.seguro a:visited{
		color: #06a;
	}
	.seguro img{
		width: 100px;
	}
	.centerImg{
		position: absolute;
		top: -18%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#moreInfoBox{
		display: none;
		width: 80%;
		height: 70vh;
		z-index: 99;
		padding: 0;
		background-color: #fff;
		border: solid 2px #06a;
		position: fixed;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		box-shadow: 5px 5px 10px #555c;
		overflow: scroll;
		overflow-x: hidden;
	}
	.closeBtn{
		float: right;
		opacity: 40%;
		font-size: 30px;
		color: #000;
	}
	.closeBtn:hover{
		opacity: 80%;
	}
	.seguroType{
		width: 100%;
		height: 300px;
		position: relative;
	}

	.seguroType.auto{
		background-image: url(../images/car.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.seguroType h1{
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		color: #fff;
		font-size: 40px;
		font-family: sans-serif;
		font-weight: bold;
		letter-spacing: 5px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	.content h2{
		font-size: 28px;
		margin: 0 0 15px -20px;
		text-align: left;
	}
}
@media screen and (min-width: 501px){
	@keyframes zoomIn {
	0%{transform: scale(0.5, 0.5); opacity: 0%;}
	100%{transform: scale(1, 1); opacity: 100%;}
	}
	@keyframes zoomOut {
		0%{transform: scale(1, 1); opacity: 100%;}
		100%{transform: scale(0.5, 0.5); opacity: 0%;}
	}
	@keyframes zoomIn2 {
		0%{transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(20deg); opacity: 0%;}
		100%{transform: translate(-50%, -50%) scale(1, 1) rotate(0deg); opacity: 100%;}
	}
	@keyframes zoomOut2 {
		0%{transform: translate(-50%, -50%) scale(1, 1) rotate(0deg); opacity: 100%;}
		100%{transform: translate(-50%, -50%) scale(0.5, 0.5) rotate(-20deg); opacity: 0%;}
	}
	.wrapper{
		background-color: #fff;
		position: relative;
	}
	h1{
		font-size: 32px;
		text-align: center;
		margin: 50px 0 50px 0;
		font-weight: bold;
		letter-spacing: 2px;
	}
	.container{
		animation: zoomIn 0.8s;
		height: 380px;
		width: 80%;
		margin: 0px auto 80px auto;
	}
	.seguro{
		font-size: 12px;
		width: 25%;
		height: 150px;
		position: relative;
		float: right;
	}
	h2{
		font-size: 18px;
		position: relative;
		top: 100%;
		text-align: center;
	}
	.seguro p{
		padding: 0 15px 0 15px;
		text-align: center;
		position: relative;
		top: 100%;
	}
	.seguro button{
		font-size: 12px;
		color: #06a;
		background-color: unset;
		border: unset;
		text-decoration: underline #06a;
	}
	.seguro button:hover{
		cursor: pointer;

	}
	.seguro a{
		font-size: 12px;
		font-family: sans-serif;
		color: #06a;
	}
	.seguro a:hover{
		color: #333 !important;
	}
	.seguro a:visited{
		color: #06a;
	}
	.seguro img{
		width: 100px;
	}
	.centerImg{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#moreInfoBox{
		display: none;
		width: 80%;
		height: 70vh;
		z-index: 99;
		padding: 0;
		background-color: #fff;
		border: solid 2px #06a;
		position: fixed;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 5px;
		box-shadow: 5px 5px 10px #555c;
		overflow: scroll;
		overflow-x: hidden;
	}
	.closeBtn{
		float: right;
		opacity: 40%;
		font-size: 30px;
		color: #000;
	}
	.closeBtn:hover{
		opacity: 80%;
	}
	.seguroType{
		width: 100%;
		height: 300px;
		position: relative;
	}

	.seguroType.auto{
		background-image: url(../images/car.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.seguroType h1{
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		color: #fff;
		font-size: 40px;
		font-family: sans-serif;
		font-weight: bold;
		letter-spacing: 5px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	.content h2{
		font-size: 28px;
		margin: 0 0 15px -20px;
		text-align: left;
	}
}