*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html{
    scroll-behavior: auto;
    
}

body{
    font-family: 'Raleway', sans-serif;
}

:root{
    --color1:#183051;
}
:root{
    --color2:rgb(247, 197, 6, 1);
}
:root{
    --color3: rgb(0, 113, 188);
}

/* GENERALES */
.texto-centrado{
    display: block;
    text-align: center;
}

/* menu */

div{
    overflow: hidden;
}

strong {
    font-weight: 600;
  }
  

  header {  
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
    z-index: 100;
    display: flex;
    position: fixed;
    width: 100%;
    height: 100px;
    background: var(--color1);
    color: #fff;
    justify-items: center;
    justify-content: center; 
    align-items: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

header img{
        position: absolute;
    }

header i{
    color: var(--color2);
    display: inline;
    font-size: 35px;
    margin: 0 10px;
}

    .iconos-redes{
        margin-left: 70%;
    }
       
  #nav-container {
    border: none;
    z-index: 1000;
    position: fixed;
    height: 100vh;
    width: 100%;
    pointer-events: none;
  }

  #nav-container .bg {
    
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    background: #000;
  }
  #nav-container:focus-within .bg {
    visibility: visible;
    opacity: .6;
  }
  #nav-container * {
    visibility: visible;
  }
  
  .button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    -webkit-appearance: none;
    background: transparent;
    border-radius: 0;
    height: 100px;
    width: 30px;
    cursor: pointer;
    pointer-events: auto;
    margin-left: 25px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color2);
    transition: .3s;
  }
  .icon-bar + .icon-bar {
    margin-top: 5px;
  }
  
  #nav-container:focus-within .button {
    pointer-events: none;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(1) {
    transform: translate3d(0,8px,0) rotate(45deg);
  }
  #nav-container:focus-within .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(3) {
    transform: translate3d(0,-8px,0) rotate(-45deg);
  }
  
  #nav-content {
    margin-top: 100px;
    padding: 20px;
    width: 90%;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    background: var(--color2);
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(-100%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
  }

  #nav-content a{
    font-size: 20px;
  }
  
  #nav-content ul {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #nav-content li{
      list-style: none;
  
  }
  
  #nav-content li a {
    color: black;
    padding: 10px 5px;
    display: block;
    text-transform: capitalize;
    transition: 0.1s;
  }

  #nav-content li a:hover {
      background-color: var(--color1);
      border-radius: 20px;
      padding: 10px;
      color: var(--color2);
      transition-duration: 0.5s;
  }
  
  #nav-content li:not(.small) + .small {
    margin-top: auto;
  }
  
  .small {
    margin: 25px;
    display: flex;
    align-self: center;
  }
  
  .small a {
    font-size: 20px;
    font-weight: 400;
    color: #888;
  }
  .small a + a {
    
    margin-left: 12px;
  }
  
  #nav-container:focus-within #nav-content {
    transform: none;
  }
  
  

 .page a,
  a:visited,
  a:focus,
  a:active,
  a:link {
    text-decoration: none;
    outline: 0;
  }
  
  .page a {
    color: currentColor;
    transition: .2s ease-in-out;
  }
  
 .page h1, h2, h3, h4 {
    margin: 0;
  }
  
  .page ul {
    padding: 0;
    list-style: none;
  }
  
  .page img {
    vertical-align: middle;
    height: auto;
    width: 100%;
  }


/* titulo principla */

.hero{
    z-index: 10;
    background-image: linear-gradient(45deg, rgba(1, 6, 31, 0.2) 0%, rgba(113, 210, 255,0.2) 25%,rgba(113, 210, 255,0.2) 75%, rgba(4, 35, 75,0.5) 100%), url("/img/fondo-luces-header.jpg");
    width: 100%;
    height: 1000px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.textos-hero{
    height: 1000px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.textos-hero h1{
    font-size: 34px;
}

.textos-hero p{
    font-size: 21px;
    margin-bottom: 20px;
}

.textos-hero a{
    display: inline-block;
    text-decoration: none;
    padding: 12px 15px;
    background:var(--color2);
    border-radius: 8px;
    color: #fff;
}

.textos-hero .slogan{
    text-shadow: 1px 1px 10px #000000;
    margin-top: -100px;
    font-size: 25px;
}

.textos-hero img{
    margin-top: -100px;
}

.svg-hero{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Estilos generales */

#nav-content ul{
    height: 590px;
    margin-left: 0px;
}




.contenedor,
.wave-contenedor{
    position: relative;
    width: 90%;
    height: auto;
    max-width: 1500px;
    overflow: hidden;
    margin: auto;
    padding: 0 0 80px 0;
}
.contenedor{
    padding: 80px 0;
}

.titulo{
    font-weight: 300;
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
}

.titulo.left{
    font-size: 34px;
    text-align: left;
}
.titulo.center{
    font-size: 34px;
    text-align: center;
}

.titulo.right{
    font-size: 34px;
    text-align: right;
}

.certificado{
    margin: 5%;
    width: 100%;
}

.certificado p{
    font-size: 19px;
}





/* Section */

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

.website .contenedor-textos-main{
    width: 100%;
    margin: 0 50px;
}

.parrafo{
    text-align: justify;
    margin-bottom: 20px;
    font-size: 21px;
}



.cta{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 21px;
    display: inline-block;
    text-decoration: none;
    background-color:var(--color2);
    padding: 12px 15px;
    border-radius: 8px;
    color: #0C1620;
}

.saber-button{
    display: block;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

/* article */


.article-nosotros{
    overflow: scroll;
    text-decoration: none;
    background-image: linear-gradient(120deg, rgba(36, 57, 78, 0.699) 0%, rgba(36, 57, 78, 0.699) 100%), url("../img/equipo.jpeg");
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    transform: scale(0);
    position: fixed;
    top: 0;
    left: 0;
    transition: transform .3s ease-in-out;
    height: 100vh;
    z-index: 1000;
    flex-direction: row;
    flex-wrap: wrap;
}

.article-nosotros h1{
    text-align: center;
    margin: 1px;
}

.article-nosotros h2{
    font-size: 34px;
    margin: 0;
    text-align: center;
}

.article-nosotros ul>li{
    list-style: none;
}

.article-nosotros .contenido{
    width: 100%;
    align-items: center;
    padding-top: 100px;
}

.contenido p{
    padding: 0 200px;
    margin:  30px ;
}

.contenido ul{
    margin:  30px ;
}



.centrado-parrafos{
    margin-top: 15%;
    width: 50%;
    align-items: center;
}

.article-nosotros:target{
        transform: scale(1);
     }

.close{
    display: block;
    position: absolute;
    top: 40px;
    right: 40px;
    background:var(--color3);
    color: white;
    text-decoration: none;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
}

.close:target{
    transform: scale(0);
}


/* Info */

.info{
    height: auto;
    width: 100%;
    position: relative;
    background: var(--color1);
    color: #fff;
}

/* CARDS */


    
.contenedor-cartas{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.carta-box {
    margin: 2%;
    text-align: center;
    position: sticky;
    width: 30%;
    text-align: center;
    height: 400px;
    transform: scale(1);
    perspective: 1000px;
  }
  
  .carta-box:hover .carta {
    overflow: visible;
      transform: rotateY(180deg);
  }
  
  .carta {
      
    overflow: visible;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
  }
  
  .cara {
    position: absolute;
    backface-visibility: hidden;
  }

.tira-2{
    position: absolute;
    margin-top: 400px;
    width: 100%;
    height: 55px;
    background-color: rgba(4, 35, 75,0.8);
}  
.tira-2 h2{
    text-align: center;
    line-height: 55px;
}  

  .tira{
      position: absolute;
      margin-top: 180px;
      width: 100%;
      height: 55px;
      background-color: rgba(4, 35, 75,0.8);
  }
  
  .tira h2{
      line-height: 55px;
    color: white;
    font-size: 26px;
  
  }



  

  .cara.detras {
    padding: 50px;
    font-size: 21px;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
    height:400px;
    background-color:var(--color1);
    transform: rotateY(180deg);
  }


/* PROYECTOS */
.galeria-button{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hover-galeria{
    padding: 2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: scale(0);
    background: var(--color3);
    transition: transform .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.hover-galeria>img{
    text-align: center;
    width: 100%;
}

.hover-galeria p{
    color: white;
}

.card:hover .hover-galeria{
    transform: scale(1);
}

/* galeria */
.contenedor-imagen{
    position: relative;
    display: inline-block;
    text-align: center;
}
 
.centrado{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.invisible{
    transform: scale(0);
    position: fixed;
}

.galeria{
    background: #f2f2f2;
}

.galeria-cont{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: hidden;
}

.galeria-cont>img{
    width: 25%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
    display: block;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .5);
    cursor: pointer;
    overflow: hidden;
}



/* info2 */
.info-last{
    width: 100%;
}

.last-section{
    width: 100%;
    justify-content: center;
    padding-bottom: 40px;
}

.last-section img{
    width: 48%;
}

.last-section .contenedor-textos-main{
    padding: 2rem;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 40%;
}


/* footer */


footer{
    font-family: 'Roboto', sans-serif;
    height: 1260px;
    background:var(--color1);
    color: #fff;
}

.contenedor-footer{
    padding: 80px 0;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;

}

.content-contacto{
    top: -10%

}

.icono{
    width: 18px;
    align-items: center;
}

/* formulario */
.form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.input{
    background: transparent;
    border: 0;
    color: #fff;
    outline: none;
    border: 1px  solid #fff;
    padding: 20px 10px;
}

.input::placeholder{
    color: #fff;
    font-family: 'raleway', 'sans-serif';
}

input[type="text"], 
input[type="email"]{
    display: inline-block;
    width: 49%;
    margin-bottom: 30px;
}

.form textarea{
    width: 100%;
    margin-bottom: 15px;
}

input[type="submit"]{
    width: 120px;
    text-align: center;
    padding: 14px 0;
}

input[type="submit"]:hover{
    cursor: pointer;
    color: tomato;
    background: #fff;
}

.textos-footer{
    text-align: center;
    margin: 5%;
}
.textos-footer li{
    font-size: 21spx;
    list-style: none;
    margin: 10px;
    
}

.creado-por {
	margin: 20px;
	text-align: center;
	font-size: 19px;
	color: #c13584;
}

.creado-por a {color: #000;}
.creado-por a:hover {text-decoration: underline;}

@media screen and (max-width:1500px){

    .certificado{
        width: 80%;
        margin: 15px;
    }

    .website{
        width: 60%;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .textos-hero img{
        width: 60%;
    }

    
    header img{
        width: 5%;
    }

    .article-nosotros h1,p,ul {
        padding: 0 10PX;
        margin:  30px ;
    }

    .article-nosotros .contenido{
        width: 100%;
        align-items: center;
        padding-top: 300px;
    }

    .article-nosotros h1,p,ul {
        padding: 0 10PX;
        margin:  30px ;
    }

    .article-nosotros h2{
        margin: 0;
    }
    
    .article-nosotros p{
        margin: 50px 30px;
    }

    .contenido p{
        padding: 0 10px;
        margin:  30px ;
    }

    .article-nosotros .contenido{
        padding-top: 100px;
    }
  

    .cara.detras{
        font-size: 15px;
    }


@media screen and (max-width:800px){
    
    header i{
        font-size: 25px;
        margin: 5px;
    }

    .website{
        width: 80%;
    }

    .textos-hero img{
        width: 90%;
    }

    .textos-hero h1{
        text-align: center;
        font-size: 31px;
    }
    /* estilos generales */
    .titulo{
        font-size: 31px;
    }

    .titulo.left{
        text-align: center;
    }

    .info p{
        text-align: center;
    }

    /* SOBRE NOSOTROS */

    .article-nosotros h1,p,ul {
        padding: 0 10PX;
        margin:  30px ;
    }

    .article-nosotros h2{
        margin: 0;
    }
    
    .article-nosotros p{
        margin: 50px 30px;
    }

    .contenido p{
        padding: 0 10px;
        margin:  30px ;
    }

    .article-nosotros .contenido{
        padding-top: 100px;
    }

    .texto-centrado img{
    width: 40%;
}
    

    /* section */
    .website{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .website img{
        width: 100%;
    }

    .website .contenedor-textos-main{
        width: 100%;
    }

    header img{
        width: 7%;
    }

    .textos-hero .slogan{
        margin-top: -60px;
        font-size: 20px;
    }

    /* Cards */

    z

    .cara.detras {
        padding: 5px;
        font-size: 10px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height:300px;
        transform: rotateY(180deg);
      }

   .cara.detras{  
    margin-top: -50px;
   }

    .carta-box {
        height: 300px;
        width: 80%;
        }

    .tira{
        height: 50px;
        top: -50px;
        align-items: center;
    }

    .tira h2{
        line-height: 50px;
    }

    /* galeria */

    .galeria-cont>img{
        width: 48%;
    }

    /* last */

    .last-section img{
        width: 98%;
    }

    .last-section .contenedor-textos-main{
        width: 98%;
        margin-bottom: 20px;
    }


}

@media screen and (max-width:400px){


    .mapa{
        width: 400px;
        height: 200px;
    }

/* MENU */
    .menu{
        transform: scale(0);
    }

    #nav-content {
        padding: 0;
        margin-left: 0;
        width: 250px;
    }

    

    #nav-content a{
        font-size: 17px;
    }

    .menu:target{
        transform: scale(1);
    }

    .contenedor-textos-main p{
        margin: 0;

    }

    .certificado p{
        margin: 0;
        padding:0;
    }

/* HEADER Y HERO*/
header i{
    font-size: 25px;
    margin: 5px;
}

    header img{
        width: 13%;
    }

    .hero{
        width: 100%;
        height: 500px;
    }
    .titulo,
    .textos-hero h1{
        font-size: 30px;
    }


    .hero img{
        margin-top: -150%;

    }
    .textos-hero p{
        font-size: 20px;
        text-align: center;
    }

.texto-centrado img{
    width: 40%;
}

/*  */
.textos-hero .slogan{
    margin-top: -60px;
    font-size: 15px;
}

    /* SECCION 1 */
    .contenedor-textos-main {
    padding: 7%;
    }

    /* SERVICIOS */
    .card>h2{
        line-height: 300px;
    }


    /* article */
    .article-nosotros h2{
        margin: 0;
    }
    
    .article-nosotros p{
        margin: 50px 30px;
    }

    .contenido p{
        padding: 0 10px;
        margin:  30px ;
    }

    .article-nosotros .contenido{
        padding-top: 100px;
    }
    /* cards */

    .carta-box {

    width: 80%;
    }

    .cara h2{
        font-size: 20px;
    }

    .website .contenedor-textos-main{
        margin-bottom: 30px;
    }

    .tira{
        position: absolute;
        width: 100%;
        height: 55px;
        background-color: rgba(4, 35, 75,0.8);
    }
    
    .tira h2{
        line-height: 55px;
      color: white;
      font-size: 19px;
    
    }

    .tira-2{
        height: 30px;
        margin-top: -300px;
    }

    .tira-2 h2{
        line-height: 30px;
        font-size: 15px;
        font-weight: lighter;
    }
    
    .cara.detras{
        padding: 5px;
        font-size: 15px;
    }

/* PROYECTOS */

    .galeria-cont>img{
        width: 97%;
    }

    

    .gleria{
        display: none;
        position: relative;
    }

  
.close2{
    z-index: 1000;
    position: fixed;
    top: 40px;
    right: 40px;
    background: rgb(247, 197, 6);
    color: white;
    text-decoration: none;
    width: 60px;
    height: 60px;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
}

.formulario{
    width: 95%;
}

footer{
    height: 1100px;
}

/* Diseñado por */