/*********CONEXION A FUENTES**********/
/*************************************/
@font-face {
    font-family: 'font-b'; /*a name to be used later*/
    src: url('fonts/Poppins-Bold.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'font-r'; /*a name to be used later*/
    src: url('fonts/Poppins-Regular.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'font-sb'; /*a name to be used later*/
    src: url('fonts/Poppins-SemiBold.ttf'); /*URL to font*/
}

/********Variables********/
:root{
    --color1: #1E3273;
    --color2: #0087D2;
    --color3: #FFD621;
    --color4: #66635B;
    --color5: #f5f7f7;

}
/*************************************/
/*******************/
nav.navbar div.container .font-nav{
    color: var(--color4) !important;
    font-family: "font-sb";
    font-size: 16px;
}

nav.navbar div.container .button3 {
    background-color: var(--color1);
    font-family: 'font-sb';
    color: white !important;
    padding: 0.50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
}
nav.navbar div.container  .activo{
    border-bottom: 2px solid var(--color3);
    padding-bottom: 5px;
}
/*#titulo {animation-timing-function: linear;}
@keyframes mymove {
  from {left: -100px;}
  to {left:0px;}
}*/

/*****TEXT*****/
.titulo {
    font-family: "font-b";
    font-size: 1.5em;
    text-align: left;
    color: var(--color4);
}
.subtitulo {
    font-family: "font-r";
    color: var(--color4);
    font-size: 0.90em;  
}

.card-title{
    font-family: "font-b";
    color: var(--color4);
    font-size: 16px;
}
.titulo3{
    font-family: "font-b";
    font-size: 2.2rem;
    color: white;
}
.subtitulo2 {
    font-family: "font-r";
    color: black;
}
/**text productos**/
 div.card span.t-product{
    font-family: "font-b";
    font-size: 22px;
}
 div.card span.s-product{
    font-family: "font-r";
}
div.app div.content div.container h6.titulos {
    font-family: "font-b";
    font-size: 1em;
    text-align: left;
    color: var(--color4);
}
 div.container span ul li {
    font-family: "font-r";
    color: var(--color4);
    font-size: 0.90em;  
}
 div.container span.descripcion{
    font-family: "font-r";
    color: var(--color4);
    font-size: 0.90em;  
}
/****text accesorios****/
 div.container span.t-product{
    font-family: "font-b";
}

 div.container div.card .card-text{
    font-family: "font-r";
}


/***text nosotros***/
 div.container span.descripcion{
    font-family: "font-r";
    color: var(--color4);
    font-size: 0.90em;  
}



.titulo8{
    font-family: "font-b";
    font-size: 1.6em;
    text-shadow: 2px 2px 2px rgb(143, 142, 142);
   /* position: relative;
    animation: mymove 0.80s ;*/
}


.especial{
    font-size: 1.2rem;
    font-family: "font-b";
    font-size: 2.5rem; 
    color: var(--color1);
    transform: translateY(300%);
 
 }  /* For mobile devices */
 @media only screen and (max-width: 767px) {
   .especial {
     transform: translateY(0%);
 
   }
}



/*************************************/
/**********NAVBAR*********************/
/*************************************/

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  
  .custom-toggler.navbar-toggler {
    border-color: rgb(255,102,203);
  } 

/*************************************/
/**********IMAGENES*******************/
/*************************************/
/* Responsive Full Background Image Using CSS
 * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
.fondo {
    /* Location of the image */
    background-image: url(../images/calplast-1.png) ;
    /* Image is centered vertically and horizontally at all times */
    background-position: right;
    /* Image doesn't repeat */
    background-repeat: no-repeat;
    width:100%;
height:auto;
    /* Makes the image fixed in the viewport so that it doesn't move when 
       the content height is greater than the image height 
    background-attachment: fixed;
    /* This is what makes the background image rescale based on its container's size 
    background-size: ;
    /* Pick a solid background color that will be displayed while the background image is loading 
    background-color:transparent;*/
    /* SHORTHAND CSS NOTATION
     * background: url(background-photo.jpg) center center cover no-repeat fixed;
     */
  }
  /* For mobile devices */
  @media only screen and (max-width: 767px) {
    .fondo {
      /* The file size of this background image is 93% smaller
       * to improve page load speed on mobile internet connections */
      background-image: url(../images/calplast-1.png);
      width:100%;
      height:auto;      background-repeat: no-repeat;
      background-position: right;
    }
      }
      /*.seccion2{
        background-image: url("/admin/images/hdpe2.png");*/




/*************************************/
/**********BOTONES********************/
/*************************************/
.button1{
    background-color: var(--color2);
    color: black;
    font-family: "font-b";
    padding: 0.50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
}
.button2{
    background-color:transparent;
    color: black;
    font-family: "font-b";
    padding: 0.50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid black;
    border-radius: 10px;
    font-size: 14px;
}

/*************************************/
/******************************/
/*************************************/


.tarjeta1{
   transform: translateY(-30%);
   margin: auto !important;
   border-radius: 10px !important;
   transition: width 2s, height 4s !important;
   max-width: 50rem !important; 
   box-shadow: 1px 1px 2px 1px  #979797;



}  /* For mobile devices */
@media only screen and (max-width: 767px) {
  .tarjeta1 {
    transform: translateY(-15%);

  }
    }

    .tarjeta2{

        background-color: var(--color1);  
        box-shadow: 2px 2px  6px #bfbdc1;
        transform: translateY(-7%);

    }
    @media only screen and (max-width: 767px) {
        .tarjeta2 {
          transform: translateY(0%);
      
        }
          }
      
/*************************************/
/******************************/
/*************************************/
.icon1{
    filter: invert(100%) sepia(1%) saturate(2%) hue-rotate(49deg) brightness(101%) contrast(100%);
}

.section.section2 .titulo2-2{
    font-family: 'popping-bold';
    font-size: 22px;
    color: var(--color5);
}
/*************************************/
/*************Section 3*****************/
/*************************************/
.section3{
background: #1E3273;
background: linear-gradient(90deg, rgba(30, 50, 115, 1) 0%, rgba(46, 74, 166, 1) 38%, rgba(5, 16, 51, 1) 100%);    width: 100%;
}
.section3.section3 div.container div.row div.card div.card-body{
    transform: translateY(-13%);
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.section3.section3 div.container div.row div.card div.img-asesor img {
    border: 3px solid var(--color3);  
    border-radius: 50%;
    max-width: 6rem;
}
.section3.section3 div.container div.row div.card div.titulo-asesor{
 font-family: 'poppins-bold' ;
 font-size: 18px;
 color: black;
 text-align: center;
}
.section3.section3 div.container div.row div.card div.text-asesor{
    font-family: 'poppins-regular';
    font-size: 16px;
    color: black;

}

/*****************************************************/
/***********************productos**********************/
/*****************************************************/


 div.card.tarjeta-producto{
    border-radius: 10px;
    max-width: 32rem;
    padding: 15px;
    box-shadow: -7px 11px 34px -8px rgba(59,59,59,0.75);
    -webkit-box-shadow: -7px 11px 34px -8px rgba(59,59,59,0.75);
    -moz-box-shadow: -7px 11px 34px -8px rgba(59,59,59,0.75);
}


/****************************/
/**********LOADER************/
/***************************/
.cssload-container {
	width: 100%;
	height: 49px;
	text-align: center;
}

.cssload-double-torus {
	width: 49px;
	height: 49px;
	margin: 0 auto;
	border: 4px double;
	border-radius: 50%;
	border-color: transparent rgba(0,2,22,0.9) rgba(0,2,22,0.9);
	animation: cssload-spin 690ms infinite linear;
		-o-animation: cssload-spin 690ms infinite linear;
		-ms-animation: cssload-spin 690ms infinite linear;
		-webkit-animation: cssload-spin 690ms infinite linear;
		-moz-animation: cssload-spin 690ms infinite linear;
}



@keyframes cssload-spin {
	100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
	100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
	100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
	100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

/****************************/
/**********SMARTPHONE************/
/***************************/
@media only screen and (max-width: 767px) {
    .navbar-nav {
        padding-bottom: 50px;
        margin-right: 15px;
    }

}

/************ICON WHATSAPP****************/
body .chat-bot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
    background: rgb(30,50,115);
    background: radial-gradient(circle, rgba(30,50,115,1) 0%, rgba(77,127,195,1) 100%);    z-index: 9999;
    border-radius: 30px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.5s ease;
}
body .chat-bot-icon img {
    height: 30px;
    width: 90px;
    position: absolute;
    right: 13px;
    top: 12px;
}