/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/* vertical-align: baseline; */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/****************************
-- General --
****************************/

html {
  font-size: 62.5%;
  /*height: 100%;*/
  background:#da262c;
}

body {
  height: 100%;
  overflow-y: scroll;
  background:#da262c;
  
}

@font-face {
      font-family: 'iconos-new';
      src: url('../fonts/iconos-new.eot?28085500');
      src: url('../fonts/iconos-new.eot?28085500#iefix') format('embedded-opentype'),
           url('../fonts/iconos-new.woff?28085500') format('woff'),
           url('../fonts/iconos-new.ttf?28085500') format('truetype'),
           url('../fonts/iconos-new.svg?28085500#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

@font-face {
      font-family: 'fontello';
      src: url('../fonts/fontello.eot?28085500');
      src: url('../fonts/fontello.eot?28085500#iefix') format('embedded-opentype'),
           url('../fonts/fontello.woff?28085500') format('woff'),
           url('../fonts/fontello.ttf?28085500') format('truetype'),
           url('../fonts/fontello.svg?28085500#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
	
.demo-icon2
    {
        font-family: 'iconos-new';
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
     /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
.demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
/****************************
-- General Layout --
****************************/
#main {
  position: relative;
}

.wrapper {
  margin: 0 auto;
}
.wrapper {
  margin: 0 auto;
  padding: 0 5px;
  max-width: 580px;
}

/****************************
-- Text Generals --
****************************/
body {
  font-family: Helvetica, sans-serif;
  background: #da262c;
}

a {
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  font-size: 1.2rem;
  color: #5C5C5C;
  line-height: 1.2;
}

/****************************
-- Paragraphs --
****************************/


h1 {
  color: #d52b1e;
  font-size: 15px;
  font-size: 1.5rem;
  text-align: left;
  line-height: 1;
  font-family: "roboto-bold";
}

h1 span {
  display: block;
}

h3 {
  font-family: "roboto-bold";
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  color: #000000;
}

p {
  display: block;
  font-size: 15px;
  /*font-size: 1.2rem;*/
  color: #000000;
  font-family: "roboto-light";
  line-height: 20px;
}

p a {
  font-size: 15px;
  /*font-size: 1.2rem;*/
  color: #000000;
  font-family: "roboto-light";
  line-height: 20px;
}

p span {
  display: block;
}

p strong {
  font-family: "roboto-bold";
  font-size:16px;
}

p.titulo {
  display: block;
  font-size: 24px;
  color: #FFF;
  font-family: "roboto-light";
  line-height: 1.2;
  margin: 10% 0% 10% 0%!important;
}

p.titulo-bold {
  display: block;
  font-size: 24px;
  color: #FFF;
  font-family: "roboto-bold";
  line-height: 1.2;
  margin: 10% 0% 2% 0%!important;
}

.copete {
    font-family: "roboto-bold"!important;
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 10px!important;
    display: block;
    text-align: left!important;
}

.btn-back {
 	font-family:"roboto-regular", Verdana, Geneva, sans-serif;
 	font-size: 18px;
 	color:#FFF!important;
 	margin-top: 25%;
 	display:block;
 	transition: all 0.5s;
 	padding-left: 15px;
}
.btn-back:hover {
	margin-left:20px;
	transition: all 0.5s;
}
/****************************
-- Header --
****************************/
#header {
  background:url(../images/fondo.jpg) no-repeat center center;
  padding: 100px 0px 0 7px;
  height:234px;
  width:100%;
}

#header p{
  float:left;
  display:block;
  clear:both;
}
#header h1 {
  color: #fff;
  font-size: 14px;
  /*font-size: 1.5vw;*/
  text-align: left;
  margin-left:8px; 
  line-height: 1.3;
  font-family: "roboto-light";
  float:left;
   position:relative;
       margin-top: 7px;
}
#header h1 strong {
  color: #fff;
  font-size: 15px;
 /* font-size: 1.5vw;*/
  text-align: left;
  line-height: 1.3;
  font-family: "roboto-bold";
  padding-left:0px!important;
  margin-left:0px!important;
  
}

/****************************
-- Section --
****************************/
#home,
#home-two,
#main,
#pages {
  max-width: 1280px;
  min-width:300px;
  width: 100%;
  margin: 0 auto;
}

#home,
#home-two{
  padding: 14px 0;
}

#home > p,
#home-two > p{
  padding: 5px 30px;
  margin-bottom: 14px;
}

.box > a {
  height: 56px;
  display: block;
}

.box .icon {
  width: 16%;
  background: #eee;
  height: 100%;
}

.box .icon img {
  margin: 20px 13px;
}

.box.odd .icon {
  background: #f5f5f5;
}
#main .box .txt, #pages .box .txt.box .txt{
	 width: 100%;
}
.box .txt {
  width: 100%;
  background: #E6E6E6;
  height: 100%;
    border-radius: 5px;
}
/*hr { height:0px; background:#FFF; border:none;}*/

.box.odd .txt {
  background: #E6E6E6;
}

.box .txt p {
  font-size: 18px;
  margin: 20px 0px 0 26px;
}

.box .txt img {
  margin: 20px 30px 0 0px;
}

#main, #pages {
  padding: 15px 0;
}

.title {
  text-align: center;
  margin-bottom: 15px;
}

#main .box > a {
  height: 65px;
  display: block;
}

#main .box .txt,
#pages .box .txt {
  width: 100%;
}

#main .box .txt p {
  margin-top: 15px;
}

#main .box .txt img {
  margin-top: 26px;
}

/*#home .dropdown {
  padding: 0;
}*/

.dropdown {
  /*display: none;
  background: #f5f5f5;
      padding-top: 18px;
 */
}

.step {
  background: #fff;
  /* padding: 20px 0px; */
}
.txt-step {
  background: #f5f5f5;
  padding: 5px 30px;
}


.dropdown h1 {
  margin-bottom: 0px;
}

.dropdown > p {
  margin-bottom: 0px;
}

.step h2 {
  margin-bottom: 23px!important;
}

.step h2 span {
 /* padding: 8px 12px!important;
  border-radius: 100%!important;
  background-color:#da262c;
  color:#FFF;*/
}

.step h3 {
  margin-bottom: 15px;
}

.step img {
  /*margin-right: 27px;*/
   display: inline-block;
    vertical-align: middle;
  
}

.step .subscription img {
  margin-right: 16px;
}

.step p {
  width: 100%;
  text-align: justify;
}

.step .subscription p {
  width: 78%;
  margin-top: 3px;
}
.solo-letra{
	margin-bottom: 0px!important;
    margin-top: -36px!important;
    text-align: center!important;
    margin-left: 56px!important;
}
.step .space {
 /* margin-bottom: 20px; */
}

.margintop {
  /*margin-top: 20px;*/
  margin-top: 13px;
}
.margintop-dies {
    margin-top: 8px;
}

.separator {
    /* border-bottom: 1px solid #fcfcfc; 
    margin-bottom: 30px;*/
    padding-bottom: 0px;
}

.terms {
  margin-top: 20px;
  font-size: 13px;
}

.float_o {
  float: left;
  font-size: 15px;
  left: 150px;
  position: relative;
  top: -105px;
}

/****************************
-- Utilities --
****************************/
/* For modern browsers */
*:before,
*:after {
  /* content: ''; */
  position: absolute;
}

.cf:before,
.cf:after {
  content: "\0020";
  display: table;
  position: static;
}

.cf:after {
  clear: both;
}

.first {
  float: left;
  display:inherit!important;
  margin-right: 12px;
  
}

.last {
  /*float: right;*/
  /* float: left; */
  /* margin-left: 8%; */
}

.center {
  margin: 0 auto;
  text-align: center;
}

/* Vertical Align */
.vertical {
  height: 100%;
}

.vertical:before{
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  position: static;
  vertical-align: middle;
}

.vertical .centered {
  display: inline-block;
  vertical-align: middle;
}

.legal {
  background:#FFF;
  width:90%;
  padding: 10px 0 10px 0;
  margin:30px auto;
  display:block;
  text-align: center;
 
}

.legal .collapse-legal {
  font-size: 1.4rem;
  color: #808080;
  display: block;
  margin: 0 auto;
}

.legal .content {
  display: none;
  padding: 10px;
  border-top: 1px solid #ccc;
  padding: 14px 10px 14px 10px;
  border-top: 1px solid #ccc;
  margin-top: 13px;
  width: 100%;
}

.legal .collapse-legal {
  text-align: center;
  color: #343434;
  font-family: "roboto-regular";
}

.legal p {
  text-align: justify;
  color: #343434;
  font-family: "roboto-regular";
}

/****************************
-- Footer --
****************************/
#footer {
  margin-top:20px;
  background: #d52b1e;
  padding: 20px 0 35px;
}

#header .logo {
  background: url(../images/logo_claro_flat.png);
  width: 119px;
  height: 53px;
  display: block;
  text-indent: -9999px;
}

#header a {
  font-size: 2rem;
  color: #fff;
  text-align:center;
}

.list-inline li {
  display: inline-block;
  margin-right: 2px;
}


/****************************
-- Fonts --
****************************/



@font-face {
  font-family: 'roboto-black';
  src: url('../fonts/roboto-black.eot'); /* IE9 Compat Modes */
  src: url('../fonts/roboto-black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/roboto-black.woff') format('woff'), /* Modern Browsers */
  url('../fonts/roboto-black.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../fonts/roboto-black.svg#ba4ac0babd0f10b69ed14d91cd5c8788') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}


@font-face {
    font-family: 'roboto-light';
    src: url('../fonts/roboto-light-webfont.eot');
    src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff'),
         url('../fonts/roboto-light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto-bold';
    src: url('../fonts/roboto-bold-webfont.eot');
    src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto-bold-webfont.woff') format('woff'),
         url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto-medium';
    src: url('../fonts/roboto-medium-webfont.eot');
    src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff'),
         url('../fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto-regular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#roboto-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.p-uno,
.p-dos,
.p-tres { color:#FFF; width:100%; text-align:left; margin-bottom:2px!important;}

.p-uno {font-family:roboto-bold, Verdana, Geneva, sans-serif;font-size: 36px;}
.p-dos {font-family:roboto-bold, Verdana, Geneva, sans-serif;font-size: 40px;}
.p-tres {font-family:roboto-regular, Verdana, Geneva, sans-serif;font-size: 26px;}





.tabla-basica tr {
	
	border-bottom:1px solid #000;
	
}

.tabla-basica tr:last-child  {
	
	border-bottom:none!important;
	
}

.tabla-basica tr td:last-child  {
	
	text-align:right;
	
}

.tabla-basica tr td {
	
	
	padding: 10px 10px 10px 10px!important;

}


.tabla-basica {
	color:#000;
	font-family:roboto-regular, Geneva, sans-serif;
	font-size:18px;

}

.tabla-basica span {
	
	color:#666666;
	font-family:roboto-light, Geneva, sans-serif;
	font-size:16px;

}


/*-----------------------------*/
.tabla-interna tr {
	
border-bottom:1px solid #FFF;
}

.tabla-interna tr:last-child  {
	
	border-bottom:none!important;
	
}

.tabla-interna tr td:last-child  {
	
text-align: left;
	
font-size: 15px;
	
width: 67px;
}

.tabla-interna tr td {
	
padding: 5px 0px 5px 0px!important;
}


.tabla-interna {
	/* color:#FFF!important; */
	font-family:roboto-regular, Geneva, sans-serif;
	font-size:18px;
}

.tabla-interna span {
	
	color:#666666;
	font-family:roboto-light, Geneva, sans-serif;
	font-size:16px;

}
/*---------------------------*/








@media (max-width: 445px) {
  .pack-dos strong::after  {
  	     content: '\A'; white-space: pre;
   }
   .s-pack p{
		font-size:24px;
	}


}

@media (max-width: 370px) {
  .pack-uno strong::after  {
  	content: '\A'; white-space: pre;
	  padding-left:0px;
  padding-right:0px;
  position:inherit!important;
   }
}

/****************************
-- Images Positioning --
****************************/
img {
  /*display: block;*/
  max-width: 100%;
}

.pack img {
  /*display: inline-block;
  vertical-align: middle;*/
  width:10%;
  margin-left:10px;
  vertical-align: top;
}

.pack h2 {
  display: block;
  font-size: 16px;
  font-size: 1.3rem;
  font-family: "roboto-bold";
  margin-bottom: 5px;
  
}


.pack .txt {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px
}

.pack.separator {
  padding-top:10px;
 /* margin-bottom: 15px;
  border-bottom: 1px solid #bdbdbd;*/
  padding-bottom: 10px;
}
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.pack .txta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 9px;
  width: 252px;
}

.txta {
  margin: 0px 0 0;
}
.text_red  p{
color:#d52b1e;
text-align:center;
margin-top:10px;
} 

h1 {
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.3;
  font-family: "roboto-bold";
}

h1 span {
  display: block;
}

h2 {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "roboto-bold";
  margin-bottom: 10px;
  line-height: 1;
}

/*h2 span {
  display: block;
}*/

/*p {
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  color: #5c5c5c;
  font-family: "roboto-light";
  /*line-height: 1.2;
  line-height: 18px;
}

p span {
  display: block;
}

p strong {
  font-family: "roboto-bold";
}*/

#contenedor-tabla-txt{ width:100%; float:left; clear:both; margin-bottom:20px;}
.div-tabla-txt { width:40%; float:left;}

.div-tabla-txt p {margin:0 auto;margin-top: 76%;padding-left: 19px;}


.fondo-tabla {
	background:#e6e6e6;
	border-radius:20px;
	width:100%;
	padding:10px;
	float:left;
}

.tabla-control {
	/*background:#e6e6e6;
	border-radius:20px;
	*/
	width:100%;


}

.tabla-control,
.tabla-control .txt-title,
.tabla-control .txt-uno,
.tabla-control .txt-dos {
	text-align:center;
}

.tabla-control .txt-title {
	font-family:roboto-regular, Verdana, Geneva, sans-serif;
	font-size:12px;
}

.tabla-control .txt-uno {
	font-family:roboto-regular, Verdana, Geneva, sans-serif;
	font-size:12px;
}
.tabla-control .txt-uno-g {
	font-family:roboto-regular, Verdana, Geneva, sans-serif;
	font-size:16px;
}

.tabla-control .txt-dos {
	font-family:roboto-bold, Verdana, Geneva, sans-serif;
	font-size:12px;
}


.tabla-control tr td{ padding:10px;}


.tabla-control tr td:first-child { border-right:1px solid #b3b3b3; } 
.tabla-control tr td:last-child { border-left:1px solid #b3b3b3; } 

.tabla-control .td-blanco,.tabla-control .td-blanco td { border:none!important; padding:0px!important; height:10px; }

.borde-med {
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 10px;
}

.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top:none!important;
}

.botones-principal {
    margin-top: 12%;
    margin-left: 5%;
}

.botones-principal li {width: 243px;margin-bottom:20px;}

.botones-principal li a {
  display: block;
  color: #fff;
  padding: 15px;
  border: 1px solid #FFF;
  position: relative;
  font-size: 19px;
  transition: all 0.5s;
  font-family:roboto-regular, Verdana, Geneva, sans-serif;
  text-align:center;
}

.botones-principal li a:hover {
    display: block;
    color: #000;
    padding: 15px;
    position: relative;
    background-color: white;
	transition: all 0.5s;
}


.foot-txt {
  display: block;
  font-size: 17px;
  color: #FFF;
  font-family: "roboto-light";
  line-height: 1.2;
  text-align:center;
}
.foot-txt a {
  color: #FFF;
}

.circulo-rojo{
		width: 70px;
		height: 70px;
		background: #da262c;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		text-align: center;
		padding-top: 15px;
		float: left;
		margin-right: 12px;
}

.circulo-rojo-precio{
		width: 70px;
		height: 70px;
		background: #da262c;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		text-align: center;
		padding-top: 20px;
		float: left;
		margin-right: 12px;
}

.megas{
  font-size: 12px;
  color: #FFF;
  font-family: "roboto-light";
  display:block;
  clear:both;
 }

.precio{
  font-size: 26px;
  color: #FFF;
  font-family: "roboto-regular";
  display:block;
  clear:both;
  letter-spacing: -2px;
 }


.g-black{
  font-family: "roboto-black"!important;
 }

.line-16{line-height: 16px; }



/*-----LISTA-----------*/

.lista-descarga {
	float:left;
	clear:both;
	width:100%;
}

.lista-descarga li {
	float:left;
	clear:both;
	width:100%;
	border:1px solid #000;
	margin: 0px 0px 15px 0px;
}

.lista-descarga li a {
	padding: 9px 5px 9px 15px;
	font-family:roboto-light, Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#000;
	width:100%;
	float:left;
	vertical-align: middle;
}
.lista-descarga li a span{
	/* display: block; */
	width: 87%;
	/* float: left; */
	vertical-align: -webkit-baseline-middle;
	/* height: auto; */
}
.lista-descarga li a:hover {color:#FFF; fill:#FFF!important; background:#000}


.lista-descarga li a .svg {
	width: 26px!important;
    margin-right: 8px;
    vertical-align: middle;
    height: auto;
	float:left;
	
}





@media (max-width: 950px) {
	
	#home,
    #home-two,
	#main,
	#pages {
	  max-width: 580px;
	
	}
		
	.step .space {
	  margin-bottom: 0px; 
	}
		
	.step {
		background: #fff;
		padding:20px 0px 0px 0px;
	}
	
	#accordion .panel-heading.active a:before,
	#accordion-nube .panel-heading.active a:before {
		transform: rotate(180deg)!important;     
	}
	p.titulo-bold {
		text-align:right;
		margin: 10% 0% 12% 0%!important;
	}
	
}










@media (min-width: 490px) {
	#accordion .panel-heading a:before,
	#accordion-nube .panel-heading a:before {
		right: 5px!important;
		/* top: 19%; */
		/* height: 71%; */
	}
}

@media (max-width: 471px) {
   #header {
   		padding: 50px 0px 0 7px;
   }
   #home p,
   #home-two p {
   padding: 0px 20px;
   line-height:35px!important;}
}

@media (max-width: 400px) {
   #header {
   		padding: 25px 0px 0 7px;
   }
  
}



@media (max-width: 390px) {
  	
	.div-tabla-txt { width:100%; float:left; clear:both;}
	
	.div-tabla-txt p {width:100%; margin:0 auto; margin-top: 10px;}
	
	
	.fondo-tabla {
		
		width:100%;
		padding:10px;
		float:left;
		clear:both;
	}
	.lista-descarga li a span {
    /* display: block; */
    width: 87%!important;
    float: left!important;
    vertical-align: -webkit-baseline-middle!important;
    height: auto!important;
	}
  
  
}