@charset "utf-8";
/* CSS Document */

<style>

	body {
		background-color: #d6e9ff;
		font-family: verdana;
	}
	img { 
		width: 100%;
		height:100%;
	}
@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
}


	#icons01 {
		gap: 0rem;
	}

#icons01 {
	justify-content: flex-end;
	font-size: 1.25em;
	gap: 0rem;
}

#icons01 li a {
	border-radius: 2rem;
	height: 2em;
	width: 2em;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

#icons01 li a svg {
	height: 60%;
	width: 60%;
	transition: fill 0.25s ease;
}

#icons01 a {
	background-color: #00BB2D;
}

#icons01 a svg {
	fill: #FFFAFA;
}

#icons01 li a + svg {
	transition: fill 0.25s ease, stroke 0.25s ease;
}

#icons01 .n01 {
	background-color: #00BB2D;
}

#icons01 .n01 svg {
	fill: #FFFAFA;
}

#icons01 li a svg {
	display: block;
	width: 55px;
	height: 55px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	border-radius: 60%;
	line-height: 80px;
	text-align: center;
	z-index: 999;
}

#icons01 li a {
	display: block;
	width: 55px;
	height: 55px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	border-radius: 60%;
	line-height: 80px;
	text-align: center;
	z-index: 999;
}

.icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--flex-alignment);
	letter-spacing: 0;
	padding: 0;
}

.icons li {
	position: relative;
	z-index: 1;
}

.icons li a {
	align-items: center;
	display: flex;
	justify-content: center;
}

.icons li a svg {
	display: block;
	position: relative;
}

.icons li a + svg {
	display: block;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.icons li a .label {
	display: none;
}





	.container {
		width:970px;
		margin:0px auto;
		font-size:15px;
		height:400px;

	}
	.img {
		width:100px;
		height:100px;
		padding:0px;
		margin-right:10px;
		float:left;

	}
	.size10{
		font-size:10px;
		}
	.img1 {
		width:418px;
		padding:15px;
		display:block;
		margin:auto;
	}
	.text-align {
		text-align:center;
	}
	
	.beneficios {
		color: #a3144a;
		font-size: 15px;
	}
	
	.beneficios1 {
		color: #809fb3;
		font-size: 15px;
		text-align:center;
	}
		
		
	.marcas {
		text-align:center;
		size:16px;
		font-weight:bold;
		color:#039;
	}
	section,aside {
		padding: 10px;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
		background-color: #F2F2F2;
	}
	input, select, button, textarea {
	border: 1px dotted #999;
	border-radius: 5px;
	width: 90%;
	height: 35px;
	margin-left: 20px;
	margin-bottom:20px;
	box-sizing: border-box;
	padding:5px;
}

 .titulo_beneficio{
	 color:#c70a1c;
	 font-weight:bold;
 }
 
 
 .div-imagen {
  display:inline-block;
  position:relative;
    width:180px;
	height:180px;
	overflow:hidden;
	z-index: 0;
}

.div-imagen > div {
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  padding:10px;
  margin:0;
}

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}

/*Content Boxes*/
	.content-box-blue, .content-box-gray, .content-box-green, .content-box-purple, .content-box-red,
	.content-box-yellow {
margin: 0 0 15px;
overflow: hidden;
padding: 10px;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

	.content-box-red {
background-color: #49853F;
border: 1px solid #3F471F;
font-size:15px;
text-align:center;
color:#fff;
}

.content-box-green {
background-color: #809fb3;
border: spx solid #bcc3c7;
font-size:16px;
text-align:center;
color:#fff;
}

	section {
		float: left;
		width: 65%;
	}
	aside {
		float: right;
		width: 27%;
		background-color:#809fb3 !important;
	}
	nav {
		overflow: hidden;
	}
	nav ul {
		list-style-type:none;
		float:left;
		padding:0px;
	}
	nav ul li {
		float:left;
		padding:3px 10px;
		margin:2px;
		background: #09F;
		color:#f1f1f1;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	footer {
	margin:10px;
	text-align:center;
	clear:both;
	}
 
	/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}
		section {
			width:68%;
		}
	}
 
	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}
		nav, section {
			font-size:14px;
		}
		aside {
			margin-top:5px;
		}
		nav ul {
			float:none;
			clear:both;
		}
	}
 
	/* para 480px o menos */
	@media screen and (max-width:480px) {
		aside {
			/*display:none;*/
		}
		nav, section {
			font-size:13px;
		}
		section {
			width:94%;
		}
		nav ul {
			float:left;
			clear:none;
			width:50%;
		}
		nav ul li {
			float:none;
		}
	}
	.container aside p {
	color: #FFF;
}
    </style>.size10 {
	font-size: 10px;
}