/*
****************************
Variables Globales
****************************
*/

:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #82B7CB;
    --secundario: #0A2939;
    --tercercolor:#75A9BE;
    --gris: #757575;
    --grisClaro: #DFE9F3;
    --font-family1: 'Borel', cursive; 
    --font-family2: 'Playfair Display', serif;
    --font-family3: 'Yeseva One', cursive;

}

#logo{
  height: 100px;
  width: 150px;
}

body {
    padding-top: 2rem;
    /* font-family: 'Borel', cursive;
    font-family: 'Yeseva One', cursive; */
    font-family: var(--font-family2);
    width: 100%;
    height: 100%;
  }
  .starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
    
  }

  /* main {
    background:linear-gradient(to left,  rgba(116, 103, 197, 0.062)  , rgba(255, 255, 255, 0) );
  } */
  /* html{
    width: 100%;
    height: 100%;
    background-color: var(--secundario)!important;
    
  } */
  
  nav{
    background-color: var(--secundario);
  }

 #main{
  padding: 0px;
 } 
 h1,h2,h3,h4{
    color: var(--secundario);
 }
 p{
    color: var(--secundario)
 }
 hr{
  color: var(--secundario);
 }
.sombraDerecha{
  box-shadow: 12px 13px 11px 4px #1f3752;
}
.sombraizquierda{
  box-shadow: -10px 13px 11px 4px #1f3752;
}

 .imgpersonalizada, .transparencia2{
  width: 50%;
 }
 @media only screen and (max-width: 480px) {
  .imgpersonalizada, .transparencia2 {
    width: 30%;
  }
}
 .fondoBanner{
    
  background-image: url("../img/banner/calidad.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  height: 340px;
  position: relative;


}

 .transparencia{
  background-color:rgba(51, 71, 88, 0.582);
  width: 100%;
  height: 100%;
  position: absolute;
}

.transparencia2{
  background-color:rgba(113, 116, 119, 0.582);
  width: 300px;
  height: 300px;
  position: absolute;
}

.carruseluno{
    
  background-image: url("../img/misbanner/banner1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  position: relative;

}

.carruseldos{
    
  background-image: url("../img/misbanner/banner2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  width: 100%;
  /* height: 450px; */
  position: relative;
  
}
.carruseltres{
  
  background-image: url("../img/misbanner/banner3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  width: 100%;
  /* height: 450px; */
  position: relative;
  
}

 
/*
**********************************************
 Home
**********************************************
*/
/* #home { font-family: var(--font-family2), sans-serif; background: url("../img/banner1.jpg") var(--blanco) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 340px; padding: 0px 0 0 0; color: #ffffff !important; margin: 0px; } */
/* #home { font-family: var(--font-family), sans-serif;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 940px; padding: 0 0 0 0; color: #ffffff !important; margin: 0px; } */
.home-content { padding-top: 200px; width: 100%; }
/* #home .home-content {font-family: 'PT Sans', sans-serif; text-align: left; font-size: 40px; font-weight: 300; color: #143f6a; } */
#home .home-content h1 , h2, h3{
     color: var(--oscuro);
     /* font-size: 4rem; */
        /* font-size: 40px;
        background: linear-gradient(#06070a, #1c2aec);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        animation: text 3s linear infinite;

    
     @keyframes text {
        0% {
            filter: hue-rotate(0deg);
        }
        100% {
            filter: hue-rotate(5deg);
        }
    }  */
    }
#home .home-content p { margin-top: 40px; }
#home .home-content .btn { text-transform: uppercase; margin: 0 5px 0 5px; }
/*
**********************************************
 Home
**********************************************
*/

/*
**********************************************
 nosotros
**********************************************
*/
/* #nosotros { font-family: var(--font-family), sans-serif; background: linear-gradient(to right, var (--primario)50%,var (--blanco) 50%);   height: 100vh; width: 100%; } */
#nosotros { font-family: var(--font-family), sans-serif; background:linear-gradient(to right,var(--secundario) 50% , rgba(255, 255, 255, 0) 50%);  margin-bottom:3rem; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }

#nosotros  p {color:var(--secundario);}
#nosotros  h2 {color:var(--primario); font-size: 56px; font-weight: bold; }



.Centrarvertical {
  display: flex;
  align-items: center;
}
.fondo{
  background-color:rgba(9, 24, 41, 0.582);
  width: 50%;
  height: 100%;
  position: absolute;
}
.animation {
  animation: myAnim 3s linear 3s 1 normal both;
  border: 4px solid #1f3752;
  border-radius: 0px;
  box-shadow: 5px 5px 10px 1px #1f3752;
}

@keyframes myAnim {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateX(-48px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateX(-26px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateX(-13px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateX(-6.5px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateX(-4px);
	}

	25%,
	55%,
	75%,
	87%,
	98% {
		animation-timing-function: ease-out;
		transform: translateX(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateX(0px);
	}
}

.animation2{
  animation: myAnim2 3s linear 3s 1 normal both;
  border: 4px solid #1f3752;
  border-radius: 0px;
  box-shadow: 5px 5px 10px 1px #1f3752;}
  @keyframes myAnim2 {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateX(48px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateX(26px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateX(13px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateX(6.5px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateX(4px);
    }
  
    25%,
    55%,
    75%,
    87%,
    98% {
      animation-timing-function: ease-out;
      transform: translateX(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0px);
    }
  }

/* fondo dos colores  */
  .fondo {
    width: 100%;
    height: 100%;
    background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
      bottom right,
      left,
      right;
    background:
      -moz-linear-gradient(
        to right,
        rgba(30, 75, 115, 1),
        rgba(255, 255, 255, 0)
      ),
      -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
      -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  }

/*
**********************************************
 Marketing
**********************************************
*/
/* #marketingServices { font-family: var(--font-family), sans-serif; background:linear-gradient(to right,var(--secundario)  , rgba(255, 255, 255, 0) );  margin-bottom:3rem;   } */
#marketingServices  h2 {color:var(--primario); font-size: 30px; font-weight: bold; padding-bottom: 35px;margin-bottom: 15px; }
#marketingServices p {color: var(--secundario);}
#marketingServices li {color: var(--secundario);}
.ingresoizq {
  animation: marketing 2s ease 0s 1 normal forwards;}
  @keyframes marketing {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateX(-48px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateX(-26px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateX(-13px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateX(-6.5px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateX(-4px);
    }
  
    25%,
    55%,
    75%,
    87%,
    98% {
      animation-timing-function: ease-out;
      transform: translateX(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0px);
    }
  }
  .ingderecho{
    animation: marketingimg 3s ease 1s 1 normal forwards;
  }
  @keyframes marketingimg {
    0% {
      animation-timing-function: ease-in;
      opacity: 1;
      transform: translateX(48px);
    }
  
    24% {
      opacity: 1;
    }
  
    40% {
      animation-timing-function: ease-in;
      transform: translateX(26px);
    }
  
    65% {
      animation-timing-function: ease-in;
      transform: translateX(13px);
    }
  
    82% {
      animation-timing-function: ease-in;
      transform: translateX(6.5px);
    }
  
    93% {
      animation-timing-function: ease-in;
      transform: translateX(4px);
    }
  
    25%,
    55%,
    75%,
    87%,
    98% {
      animation-timing-function: ease-out;
      transform: translateX(0px);
    }
  
    100% {
      animation-timing-function: ease-out;
      opacity: 1;
      transform: translateX(0px);
    }
  }

  /* .imgsmall{
    width: 400px;
    height: 400px;} */
  @media only screen and (max-width: 480px) {
    .imgsmall {
      width: 200px;
      height: 200px;
    }
  }
/*
**********************************************
 general  
**********************************************
*/
#general { font-family: var(--font-family), color var(--secundario) sans-serif; background: url("#") var(--blanco) no-repeat center center fixed;   padding-top: 1rem; }
#general h2 {color: var(--secundario);}
#general p {color: var(--secundario);}

/*
**********************************************
07 Pricing table
**********************************************
*/
#precios { padding: 50px 5px 50px 5px; font-family: 'PT Sans', sans-serif; background:var(--blanco) }
/* .plans { padding-top: 20px; } */
.price-table { padding-bottom: 20px; }
.price-bg { height: 50px; color: #ffffff;text-align: center; background-color: var(--secundario); }
.price-bg-popular { height: 150px; }
.box-plan { background: #ffffff; /*padding: 0 5px 5px 5px;*/ position: relative; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.box-plan h3 { color: #ffffff;}
.box-plan .plan-title { padding: 8px 5px 5px; text-align: center; color: #ffffff; margin: 5px 0 5px 0; -moz-border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; -moz-border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; border-top-left-radius: 8px; }
.box-plan .plan-title-popular { padding: 8px 15px 15px; text-align: center; color: #ffffff; margin: 5px 0 5px 0; }
.box-plan .price { min-height: 50px; position: relative; font-size: 60px; line-height: 80px; text-align: center; font-weight: bold; padding: 20px 15px 0; color: #ffffff; }
.box-plan .price .type { font-size: 16px; margin-top: -30px; }
.box-plan .descr { color: #333333; margin-top: 10px; padding: 20px 15px; }
.box-plan .descr p { text-align: center; font-size: 1.2em; color: var(--secundario);}
.box-plan .plan-btn { min-height: 50px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 18px; padding: 0 15px; }

/*
**********************************************
Carrusel
**********************************************
*/

#myCarousel  h1, h2, p {
  color: var(--blanco);
}
   
.colorbnt{
  background: var(--secundario);
  margin-top: 1rem;
}



footer{

 background-color: var(--secundario)!important;
 color: var(--blanco);
 font-family: var(--font-family);
 margin-top: 15px;
 padding: 20px;
 height: 350px;
 width: 100%;
}

footer h5, li {
    color: var(--blanco);
    font-family: var(--font-family);
    /* font-size: 1.6rem; */

}
footer a{
  color: var(--tercercolor);
  font-size: 22px;
}


@media only screen and (max-width: 480px) {
  footer {
    height: 600px;
  }
}
/*
**********************************************
06 Contact
**********************************************
*/
/* #home { font-family: var(--font-family2), sans-serif; background: url("../img/banner1.jpg") var(--blanco) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 340px; padding: 0px 0 0 0; color: #ffffff !important; margin: 0px; } */ */
/* #contact-section { padding: 90px 5px 0 5px; color: #ffffff; font-family: 'PT Sans', sans-serif; background: url("../img/banners/contacto.jpg") var(--secundario) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-top: 35px;  } */
/* #contacto { padding: 90px 5px 0 5px; color: #ffffff; font-family: 'PT Sans', sans-serif; margin-top: 35px;  height: 20%;  } */
#contact-section img { margin-top: 50%; }

.fondoContacto{

  background-image: url("../img/banners/edificio3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 450px;
    position: relative;
}
/*
**********************************************
 newsletter
**********************************************
*/
#newsletter { padding: 90px 5px 0 5px; color: #ffffff; font-family: 'PT Sans', sans-serif; background: url("../img/banners/banner3.jpg") var(--secundario) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  height: 350px; }
#newsletter h3 { padding-bottom: 50px; }
.contact-form-box { width: 70%; margin: 0 auto; padding: 30px 10px 10px 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
#newsletter .form-control { height: 44px; background-color: #ffffff; border: 1px solid #cccccc; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
#newsletter .form-control:focus { background-color: #ffffff; border: 1px solid #cccccc; box-shadow: 0 0 5px 0 #e8e8e8 inset; }
#newsletter textarea { resize: none; padding: 12px; height: 130px !important; }
#newsletter .btn { margin-top: 20px; }



.fondo2{

  background: url(../img/banners/banner3.jpg);
  background-size: cover;
  height: 100vh;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100% );


}