@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400,500,500i,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

head {
    max-width: 1280px;
}

body {
    font: 24px Raleway;
    background: #ffffff;
    width: 100%;
    margin: auto;
    position: relative;
}

/*------------------------Home------------------------*/

#body-home {
    background-image: url("../images/DÍA DE MUERTOS_FONDO TABLET.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1280px;
    min-height: 679px;
}

.encabezado-logo-home {
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.encabezado-logo-home img {
    width: 400px;
}

.texto-bienve {
    margin-right: 10px;
    margin-top: 15px;
    color: #003085;
    font-weight: 600;
    text-align: center;
    font-size: 34px;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, 
                 rgb(255, 255, 255) 2.83487px 0.981584px 0px, 
                 rgb(255, 255, 255) 2.35766px 1.85511px 0px, 
                 rgb(255, 255, 255) 1.62091px 2.52441px 0px, 
                 rgb(255, 255, 255) 0.705713px 2.91581px 0px, 
                 rgb(255, 255, 255) -0.287171px 2.98622px 0px, 
                 rgb(255, 255, 255) -1.24844px 2.72789px 0px, 
                 rgb(255, 255, 255) -2.07227px 2.16926px 0px, 
                 rgb(255, 255, 255) -2.66798px 1.37182px 0px, 
                 rgb(255, 255, 255) -2.96998px 0.42336px 0px, 
                 rgb(255, 255, 255) -2.94502px -0.571704px 0px, 
                 rgb(255, 255, 255) -2.59586px -1.50383px 0px, 
                 rgb(255, 255, 255) -1.96093px -2.27041px 0px, 
                 rgb(255, 255, 255) -1.11013px -2.78704px 0px, 
                 rgb(255, 255, 255) -0.137119px -2.99686px 0px, 
                 rgb(255, 255, 255) 0.850987px -2.87677px 0px, 
                 rgb(255, 255, 255) 1.74541px -2.43999px 0px, 
                 rgb(255, 255, 255) 2.44769px -1.73459px 0px, 
                 rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.titulo-home {
    color: #003085;
    font-weight: 600;
    text-align: center;
    font-size: 28px;
    padding: 0px;
    text-shadow: rgb(255, 255, 255) 3px 0px 0px, 
                 rgb(255, 255, 255) 2.83487px 0.981584px 0px, 
                 rgb(255, 255, 255) 2.35766px 1.85511px 0px, 
                 rgb(255, 255, 255) 1.62091px 2.52441px 0px, 
                 rgb(255, 255, 255) 0.705713px 2.91581px 0px, 
                 rgb(255, 255, 255) -0.287171px 2.98622px 0px, 
                 rgb(255, 255, 255) -1.24844px 2.72789px 0px, 
                 rgb(255, 255, 255) -2.07227px 2.16926px 0px, 
                 rgb(255, 255, 255) -2.66798px 1.37182px 0px, 
                 rgb(255, 255, 255) -2.96998px 0.42336px 0px, 
                 rgb(255, 255, 255) -2.94502px -0.571704px 0px, 
                 rgb(255, 255, 255) -2.59586px -1.50383px 0px, 
                 rgb(255, 255, 255) -1.96093px -2.27041px 0px, 
                 rgb(255, 255, 255) -1.11013px -2.78704px 0px, 
                 rgb(255, 255, 255) -0.137119px -2.99686px 0px, 
                 rgb(255, 255, 255) 0.850987px -2.87677px 0px, 
                 rgb(255, 255, 255) 1.74541px -2.43999px 0px, 
                 rgb(255, 255, 255) 2.44769px -1.73459px 0px, 
                 rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.logos-productos {
    margin-top: -10px;
}

.btn-productos img {
    max-width: 150px;
}

.btn-home { background: #f0832a; color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 28px;
    padding: 10px 40px;
    max-width: 400px;
    margin: 10px 18px;
    text-align: center;
    border-radius: 50px;
    max-height: 60px;
    min-height: 70px;
    width: 200px;
    border: 3px solid #ffffff;
}

.btn-home:hover { background: #ad68bf; color: #ffffff;  
    border: 3px solid #ffffff; 
}
.btn-productos-esp:hover{ 
	background: #54e58a; 
    color: #ffffff; 
    border: 3px solid #ffffff; 
}

.btn-productos-esp {
 background: #f4d333;
     color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 28px;
    padding: 10px 35px;
    max-width: 300px;
    margin: 10px 30px;
    text-align: center;
    border-radius: 40px;
    max-height: 60px;
    min-height: 60px;
    width: 160px;
    border: 3px solid #ffffff;
}

#seleccion-home {
    padding: 10px;
    padding-top: 30px;
}

.banner-accesorios {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0px;
    margin-top: 20px;
    text-align: center;
}

.banner-accesorios img {
    width: 80px;
    vertical-align: middle;
    box-shadow: 0px 0px 10px #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 0px 7px;
    margin-left: 10px;
}

.ba-text, .ba-text a { color: #003085; 
}

/*------------------------------Pospago------------------------------*/

#body-pospago{
    background-image: url("../images/DÍA DE MUERTOS_FONDO TABLET.jpg");
    background-repeat: no-repeat;
    background-position: 0px -150px;
    background-size: cover;
    width: 1280px;
    height: 630px;
}

#iconos-pospago{
    position: absolute;
    left: 946px;
    top: 35px;
}

.encabezado-logo{
    padding: 10px;
    text-align: center;
}

.encabezado-logo img{
    width: 180px;
}

#seleccion{
    padding: 10px;
    padding-top:60px;
}

.titulo{
    color: #08539A;
    font-weight: 600;
    text-align: center;
    font-size: 28px;
    padding: 10px;
}

.botones {
	margin:auto;    
    text-align: center;
    display: flex;
    align-items:baseline;
    justify-content: center;
    margin-top: 30px;
}

.btn-marcas {
	display: inline-block;
    background: #ef7f13;
    color: #fff;
    font-weight: 500;
    font-size: 32px;
	padding: 10px 35px 10px 35px;
    max-width: 300px;
    margin: 10px 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 40px;
}

.btn-marcas:hover {
    background: #08539A;
}

/*------------------------------Marcas------------------------------*/

#body{
    background-color: #f8f8f8;  
    width: 1280px;
    min-height: 630px;
}

.encabezado-logo-icns{
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    justify-content: space-around;
    padding: 20px 0px;
    height: 70px;
}

.encabezado-logo-icns img{
    width: 150px;
    margin-left: 20px;
}

#img-logo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50%;
}

#iconos{
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    align-items: center;
    width: 50%;
    justify-content: flex-end;
}

.btn-manteleta, .btn-inicio, .btn-regresar {
    color: #aaaaaa;
    font-weight: 600;
    font-size: 24px;
    margin: 0px 15px;
    cursor: pointer;
}

.icon-inicio {
    background-image: url(../images/marcas_home.png);
    display: inline-block;
    background-position: 64px 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
}

.icon-inicio:hover {
    background-image: url(../images/marcas_home2.png);
}

.icon-manteleta {
    background-image: url(../images/manteleta.png);
    display: inline-block;
    background-position: 64px 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
}

.icon-manteleta:hover {
    background-image: url(../images/manteleta2.png);
}

.icon-regresar {
    background-image: url(../images/marcas_regresar.png);
    display: inline-block;
    background-position: 64px 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
}

.icon-regresar:hover {
    background-image: url(../images/marcas_regresar.png);
}

#tabla-marcas{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.logos-marcas{
   margin: auto; 
}

.logos-marcas img{
    width: 260px;
    height: 130px;
}

.logos-marcas td{
    padding: 15px 10px;
    text-align: center;
}

.titulo-marcas{
    color: #08539A;
    font-weight: 600;
    font-size: 32px;
    padding: 10px;
}

a:link{
    text-decoration: none;
}

/*------------------------------Planes------------------------------*/

.titulo-planes{
    color: #08539A;
    font-weight: 600;
    font-size: 32px;
    padding: 10px;
    text-align: center;
}

.botones-planes td{
    padding: 25px 10px;
    text-align: center;
    width: 250px;
}

.botones-planes{
   margin: auto; 
}

.btn-planes {
	display: inline-block;
    background: #08539A;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
	padding: 10px 35px 10px 35px;
    max-width: 300px;
    padding: 20px 25px;
    text-align: center;
    text-decoration: none;
    border-radius: 40px;
}

.btn-planes:hover {
    background: #ef7f13 ;
}

/*------------------------------Manteletas------------------------------*/

.accordion {
    font-size: 18px;
    width: 85%;
    margin: 0 auto;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
    padding: 15px 10px;
    background: #ffffff;
    color: #08539A;
    cursor: pointer;
    font-size: 18px;
    transition: all .3s;
    font-weight: 600;
}

.accordion__item {
    border: 1px solid #aaaaaa;
}

.accordion .js-accordion {
   width: auto;
}

.accordion-header:hover {
  color: #ef7f13 ;
  position: relative;
  z-index: 5;
}

.accordion-body {
  background: #fcfcfc;
  color: #353535;
  display: none;
}

.accordion-body__contents {
  padding: 15px;
  font-size: 18px;
}

.accordion:first-child > .accordion__item > .accordion-header {
  border-bottom: 1px solid transparent;
}

.accordion__item > .accordion-header:after {
  content: "\f3d0";
  font-family: IonIcons;
  font-size: 20px;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
  background: white;
    color: #ef7f13;
    border-bottom: 1px solid #aaaaaa;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: #353535;
}

.accordion-body__contents_sub {
    font-size: 12px;
    padding: 15px;
    text-align: justify;
}

.accordion-header-sub {
    font-size: 14px;
}

.img-manteletas{
    width: 1050px;
}

#btn-cotizacion{
    left: 929px;
    bottom: 15px;
    z-index: 1000;
    width: auto;
    position: fixed;
    background-color: #ef7f13;
    padding: 15px 5px 15px 15px;
    border-radius: 180px 0 0 180px;
    font-size: 16px;
    color: white;
    line-height: 1;
    cursor: pointer;
}

.btn-manteletas img{
    max-width: 150px;
}

.btn-manteletas{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #aaaaaa;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
	padding: 10px 35px 10px 35px;
    max-width: 300px;
    margin: 10px 30px;
    text-align: center;
    border-radius: 40px;
    max-height: 60px;
    min-height: 60px;
    width: 160px;
}

.btn-manteletas:hover {
    background: #ef7f13;
}


/*---------------PDF  -------------------*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 90%;
    height: 540px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
    margin-top: -10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

iframe{
    height: 95%;
    width: 100%;
}

.pdf-icon{
    
}

/*-------------------------------Bandera-------------------------------*/

.titulo-banderas{
    color: #08539A;
    font-weight: 600;
    font-size: 30px;
    padding: 10px;
    text-align: center;
}

.botones-banderas td{
    padding: 15px 10px;
    text-align: justify;
    font-size: 18px;
    font-family: roboto;
    cursor: pointer;
}

.td-right{
    width: 180px;
}

.botones-banderas{
   margin: auto;
    width: 80%;
}

.btn-planes {
	display: inline-block;
    background: #08539A;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
	padding: 10px 35px 10px 35px;
    max-width: 300px;
    padding: 20px 25px;
    text-align: center;
    text-decoration: none;
    border-radius: 40px;
}


/*------------------------------Responsive------------------------------*/

@media all and (max-width: 640px) {
}


@media screen and (max-width:1024px) and (min-width:640px) {
}