html {
  scroll-behavior: smooth;
}

.fondo{
    height: 100vh;
    background-color: transparent;
    background: url('../imagenes/fondo.jpg') fixed no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .mv {
    font-size: 10vh;
  }

  /* Efecto de imagenes */
  .imagenes:hover{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  /* Efecto de menu con scroll */
  .gris{
    background: rgba(0, 33, 99, 0.201);

  }

  .imagen {
    margin: 100px;
  }

  .top-nav-collapse{
    background: rgba(0, 33, 99) !important;
  }

  .fuentes {
    font-weight:100;
    letter-spacing: 3px;
  }

  p{
    font-size: 10px;
  }

  .titulo{
    font-size: 50px;
    font-style: italic;
    font-family: Arial;
  }

  .subtitulo{
    font-size: 30px;
    font-style: italic;
    text-align: center;
    font-family: Arial; 
  }

  .gris li:nth-child(1){
    color: blue;
  }

  .icono{
    color: black;
  }

  .icono_azul {
    color: rgb(0, 193, 220);
  }

  .icono_blanco {
    color: white;
    padding-top: 8px;
    padding-left: 1px;
  }

  .icono_blanco:hover {
    color: blue;
    transition: 0.5s;
    cursor: pointer;
   }

   .icono_gmail {
    padding-top: 8px;
    padding-left: 4px;
   }

   .icono_gmail:hover {
    color: blue;
    transition: 0.5s;
    cursor: pointer;
   }

  .icono_whatsapp {
    color: green;
  }

  .icono_facebook {
    color: blue;
  }

  .icono_twitter {
    color: lightblue;
  }

  .iconocontacto {
    color: lightgray;
  }
  .iconosubir {
    color: gray;
    opacity: 0.6;
  }

  .iconosubir:hover {
    color: white;
    transition: 0.5s;
  }

  .fondo_negro{
    background-color: black;
    text-decoration-color: blue;
  }

  .fondo_azulado {
    background-color: rgb(244, 245, 260);
  }

  .fondo_anuncios{
    background-color: white;
    color: white;
  }

  .fondo_azul_marino {
    background-color: rgb(0, 10, 17);
  }

  .fondo_azul_marino2 {
    background-color: rgb(0, 10, 21);
    opacity: 0.999;
  }


  /* Efecto Parrallax */
  .parrallax2{
    background: url('../imagenes/Fondo1.jpg') fixed no-repeat;
    background-size: cover;
    height: 40vh;
  }
  
  .parrallax {
      background-size: cover;
  }

  .parrallax3{
    background: url('../imagenes/Fondo5.png') fixed no-repeat;
    background-size: cover;
    height: 40vh;
  }

  .parrallax4{
    background: url('../imagenes/Fondo6.jpg') fixed no-repeat;
    background-size: cover;
    height: 40vh;
  }

  .fuente {
    font-family: monospace;
    font-size: 60%;
      color: white;
  }


  .subt {
    color: #f000;
    padding-right: 15%;
  }

  /* Efecto typeWriter */
  .contenedor {
    margin: auto;
    display: table;
    flex-direction: column;
    justify-content: center;
    height: 100%; 
  }

  .maquina {
    color: #fff;
    border-right: 1px solid #fff;

    overflow: hidden;
    white-space: nowrap;
    animation: typing 12s steps(37) forwards, blink-caret .8s step-end infinite;
    animation-iteration-count: infinite;
  }

  @keyframes blink-caret {
    from,to {border-color: transparent;}
    50% {border-color: #fff;}
  }

  @keyframes typing {
    0% {width: 0%;}
    30% {width: 100%;}
    70% {width: 100%;}
    90% {width: 0%;}
    100% {width: 0%;}
  }

  .boton {
  border: solid 1px;
  width: 8vw;
    height: 2vw;
    transition: 0.5s;
    font-size: 80vw;
  }

  .boton2 {
    width: 170px;
  }

  .boton:hover {
  background: white;
  color: black;
  border: solid 1px;
  border-color: transparent;
  }

  /* Menu */
  ul#menu li a{
        position: relative;
        font-weight:bold;
        margin: 0px 15px;
    }

    div#menu a:hover{
      color: white;
      transition: 0.7s;
    }

    ul#menu li a:hover, a:visite {
      color: blue;
    }

    
    ul#menu li a:hover:after{
        opacity:1;
        transform: translateY(15px)
    }

    /* Slider Swaper */
    .swiper-container {
      width: 150vh;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide:hover{
      cursor: pointer;
    }

    #divredondo {
   height:35px;
   width:35px;
   border-radius:200px; 
   background-color: black;
   opacity: 0.3 ;
   }

   .copyright {
    font-family: Century Gothic;
    font-size: 10px;
    color: gray;
    letter-spacing: 2px;
   }

   .titulos{
    letter-spacing: 3px;
   }

   .copyright:hover {
    color: darkblue;
    transition: 0.8s;
   }


   /* Contacto */
   .formulario {
    width: 100%;
    max-width: 100%;
    margin: auto;
    position: relative;
   }

   .formulario_input, .formulario_label {
    display: block;
    width: 100%;
    height: 10px;
    font-size: 15px;
   }

   .formulario_input {
    padding: 20px;
    background: transparent;
    margin-bottom: 40px;
    border: 0px;
    border-bottom: 1px solid gray;
   }

   .formulario_textarea {
    width: 100%;
    height: 200px;
    border: 1px solid gray;
    background: transparent;
   }

   .formulario_label {
    padding-left: 15px;
    position: relative;
    margin-top: -72px;
    color: rgba(0,0,0,0.5);
    transition: all 0.2s;
    color: black;
   }

   .formulario_submit {
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 20px;
    cursor: pointer;
   }

   .formulario_input, .formulario_textarea:focus {

   }

   .formulario_input:focus {
    border: 1px solid black;
   }

   .formulario_input:focus + .formulario_label{
    margin-top: -110px;
   }

   .fijar {
    margin-top: -110px;
   }

   p {
    font-size: 14px;
   }

   #mision {
    font-size: 14px;
   }

   #vision {
    font-size: 14px;
   }

   #valores {
    font-size: 14px;
   }

   /*Portafolio*/
   .img-portafolio {
    width: 35vh;
    height: 35vh;
   }

   .portafolio {
    width: 90%;
    max-width: 1400px;
    margin: auto;
   }

   .portafolio h1 {
    text-align: center;
    font-size: 38px;
    margin: 15px 0px 40px;
   }

   .portafolio-container {
    display: flex;
    justify-content: space-between;
   }

   .portafolio-item {
    position: relative;
    overflow: hidden;
   }

   .portafolio-text {
    position: absolute;
    bottom: 0;
    padding: 20px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    transform: translateY(100%);
    transition: all 0.5s ease-out;

   }

   .portafolio-text p {
    text-align: justify;
   }

   .portafolio-item:hover .portafolio-text{
    transform: translateY(40%);
   }

   .portafolio-item:hover {
    cursor: pointer;
    overflow:hidden;
    transition: 1s;
   }

   .portafolio-item:hover img {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transition: 2s;
   }

   .mapa {
    width: 100%;
    height: 100%;
    }

    .servicios {
      color: blue;
    }



    /*Portafolio*/