@media screen and (max-width: 500px){
	.hidden{
	display: none;
	}
	.seguroType{
		background-size: 100%;
		width: 100%;
		height: 130px;
		position: relative;
		background-repeat: no-repeat;
	}
	.seguroType.auto{
		background-image: url(../images/car.png);
	}
	.seguroType.vida{
		background-image: url(../images/life.png);
	}
	.seguroType.gastos{
		background-image: url(../images/medico.png);
	}
	.seguroType.mascotas{
		background-image: url(../images/mascota.png);
	}
	.seguroType.hogar{
		background-image: url(../images/casa.png);
	}
	.seguroType.contratistas{
		background-image: url(../images/obra.png);
	}
	.seguroType.comercio{
		background-image: url(../images/comercio.png);
	}
	.seguroType.transito{
		background-image: url(../images/transito.png);
	}
	.seguroType h1{
		display: none;
	}
	h2{
		font-size: 26px;
		margin: 0 0 15px -20px;
		text-align: center;
	}
	@keyframes showText{
		0%{transform: translate(-50px); opacity: 0%}
		50%{opacity: 100%}
		100%{transform: translate(0px); opacity: 100%}
	}
	@keyframes hideText{
		from{opacity: 100%}
		to{opacity: 0%}
	}
	#subNavBtn{
		width: 100%;
		background-color: #0053a7;
		height: 35px;
		color: #fff;
		font-family: sans-serif;
		font-size: 21px;
		font-weight: bold;
		border: none;
		text-decoration: underline 1px #fff;
	}
	#subNav{
		display: none;
		width: 100%;
		height: 19vh;
		background-color: #0053a7e6;
		color: #fff;
		z-index: 2;
	}
	.right{
		float: right;
		width: 50%;
	}
	.left{
		width: 50%;
	}
	#subNav a{
		text-decoration: none;
	}
	.subNavLink{
		padding: 14px 0 0 0;
		text-align: center;
		width: 100%;
	}
	.sLink{
		color: #fff;
		font-size: 18px;
		font-family: sans-serif;
	}
	.subNavLink:hover{
	}
	.content{
		padding: 5px 0 30px 0;
	}
	h3{
		border-radius: 6px;
		width: fit-content;
		margin-bottom: 10px;
	}
	.dropBtn{
		color: #06a;
		font-size: 19px;
		font-family: sans-serif;
		border: none;
		background-color: #fff0;
		outline: none;
		margin-left: 15px;
		text-align: left;
		text-decoration: underline;
		z-index: 1;
	}
	.dropBtn:hover{
		font-weight: 100;
		cursor: pointer;
	}
	.dropBox{
		margin-left: 35px;
		overflow: hidden;
		font-family: Georgia;
		font-size: 16px;
		color: #333;
		animation: none;
		position: relative;
		transition-duration: 2s;
	}
	.arrow{
		margin-left: 7px;
		position: relative;
		top: 0px;
		transition: 0.4s;
	}
	strong{
		font-family: serif;
		color: #111;
	}
}
@media screen and (min-width: 501px){
	.hidden{
	display: none;
	}
	#headWrap{
		box-shadow: none;
	}
	.seguroType{
		width: 1000px;
		height: 400px;
		margin: 34px auto 20px auto;
		background-repeat: no-repeat;
		position: relative;
	}
	.seguroType.auto{
		background-image: url(../images/car.png);
	}
	.seguroType.vida{
		background-image: url(../images/life.png);
	}
	.seguroType.gastos{
		background-image: url(../images/medico.png);
	}
	.seguroType.mascotas{
		background-image: url(../images/mascota.png);
	}
	.seguroType.hogar{
		background-image: url(../images/casa.png);
	}
	.seguroType.contratistas{
		background-image: url(../images/obra.png);
	}
	.seguroType.comercio{
		background-image: url(../images/comercio.png);
	}
	.seguroType.transito{
		background-image: url(../images/transito.png);
	}
	.seguroType h1{
		text-align: center;
		margin: 0;
		color: #fff;
		font-size: 40px;
		font-family: sans-serif;
		font-weight: bold;
		letter-spacing: 5px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	.auto h1{
		position: absolute;
		top: 28%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.mascotas h1{
		position: absolute;
		top: 48%;
		left: 35%;
		transform: translate(-50%, -50%);
	}
	h2{
		font-size: 28px;
		margin: 0 0 15px -20px;
		text-align: left;
	}
	@keyframes showText{
		0%{transform: translate(-50px); opacity: 0%}
		50%{opacity: 100%}
		100%{transform: translate(0px); opacity: 100%}
	}
	@keyframes hideText{
		from{opacity: 100%}
		to{opacity: 0%}
	}
	#subNavBtn{
		display: none;
	}
	#subNav{
		width: 100%;
		position: fixed;
		top: 25px;
		z-index: 2;
		transition: top, padding 0.2s, 0.2s;
	}
	.right{
		float: right;
		width: 50%;
	}
	.left{
		width: 50%;
	}
	#subNav nav{
		position: relative;
		top: 80px;
	}
	.subNavLink{
		text-align: center;
		float: right;
		width: 25%;
		height: 60px;
		background-color: #06b;
	}
	.sLink{
		position: relative;
		top: 20px;
		color: #fff;
		text-decoration: none;
		font-size: 18px;
		font-family: sans-serif;
	}
	.subNavLink:hover{
		background-color: #1544ad;
	}
	.content{
		padding-top: 5px;
		padding-bottom: 50px;
	}
	h3{
		border-radius: 6px;
		width: fit-content;
		margin-bottom: 10px;
	}
	.dropBtn{
		color: #06a;
		font-size: 19px;
		font-family: sans-serif;
		border: none;
		background-color: #fff0;
		outline: none;
		margin-left: 15px;
		text-align: left;
		text-decoration: underline;
		z-index: 1;
	}
	.dropBtn:hover{
		font-weight: 100;
		cursor: pointer;
	}
	.dropBox{
		margin-left: 35px;
		overflow: hidden;
		font-family: Georgia;
		font-size: 16px;
		color: #333;
		animation: none;
		position: relative;
		transition-duration: 2s;
	}
	.arrow{
		margin-left: 7px;
		position: relative;
		top: 0px;
		transition: 0.4s;
	}
	strong{
		font-family: serif;
		color: #111;
	}
}