body{
    background-color: black;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
.contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    line-height: 2.4em;
    background-color: black;
    font-family: "Roboto Mono", monospace;
    font-weight: 100;
    font-style:normal;
}
header{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
h1{
    pointer-events:stroke;
    color: rgb(128, 121, 73);
    margin: .5em .5em .5em .7em;
    font-family: "Orbitron", sans-serif;
    font-weight: 300;
    font-style: normal; 
    font-size: 2.4em;
    letter-spacing: .1em; 
}
.logo{
    width: 6%;
    height: 6%;
    margin: .5em;
}
h2{
    text-align: center;
    padding: 1em;
    
}

.cuerpo{
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

a{
    text-decoration: none;
    color: #04AA6D;
}
a:hover{
    color: #36c490;
}
a:active{
    color: yellowgreen;
}
nav{
    width: 100%;
    font-family: "Orbitron", sans-serif;
    font-size: 1.1em;
    font-weight: 50;
    font-style: normal;
    letter-spacing: .1em; 
}
div .desktop-menu{
    width: 20%;
    align-self:baseline;
    margin: .5em;
    border: .1em dashed rgb(129, 129, 44);
}
#menuInicio{
    width: 95%;
}
ul{
    display: flex;
    flex-direction: column;
}
ul li a, .nav-link, .dropdown-item{
    color: bisque;
    text-decoration: none;
    
}
.nav-link{
    padding: 0;
    margin: .6em;
}

.dropdown-item{
    font-size: .9em;
}
.nav-link:hover{
    color: rgb(175, 175, 101);
}
.nav-link:active{
    color: rgb(122, 214, 103);
}
ul li a:hover{
    color: rgb(175, 175, 101);
}
ul li a:active{
    color: rgb(122, 214, 103);
}
ul .dropdown-menu{
    background-color: rgb(13, 22, 12);
}


.texto{
    width: 80%;
    align-self: flex-start;
    border: .1em dashed rgb(129, 129, 44);
    margin: .5em;
    padding: 1em;
    color: rgb(240, 204, 160);
    text-indent: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;

}
.textoCentrado{
    text-align: center;
}
.parrafoConImagenes{
    width:90%;
    align-self: center;
    padding: .1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.imgCuerpo1{
    width: 30%;
    height: 25%;
}
.imgCuerpo2{
    width: 25%;
    height: 20%;
}
.imgCuerpo{
    margin: .5em;
    padding: .5em;
}
.swiffy-slider, .pMobile{
    display: none;
}

.topnav{
    display: none;
}

/*Estilos de Instalaciones*/
.indiceInterno{
    align-self: flex-start;
}
.imgFloat1, .imgFloat2{
    max-width: 35%;
    margin: 1em;
}
.imgFloat1{
    float:right
}
.imgFloat2{
    float: left;
}
.FloarVertical{
    max-width: 15%;
}
.verInstalaciones, .verVj, .verColaboradores{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    margin: .5em;
    flex-wrap: wrap;
}
.verInstalaciones a,.verVj a, .verColaboradores a{
    background-color: #096946;
    border: .5em solid #096946;
    -webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
 	border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .7em;
    margin: .5em;
    width: 30%;
    text-decoration: none;
} 
.verInstalaciones a:nth-child(2n){
    background-color: #045b69;
    border: .5em solid #045b69;
}

.verInstalaciones a:hover{
    background-color: #04AA6D;
    border: .5em solid #04AA6D;
    padding: 1.2em;
	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px;
 	border-radius: 15px;
}
.verInstalaciones a:nth-child(2n):hover{
    background-color:#045faa;
    border: .5em solid #045faa;
}


.imgVerInstalaciones{
    max-width: 100%;
    margin: .2em;

}
.strongInstalaciones{
    color: #04AA6D;
}
.textoVerInstalaciones, .textoVerVj, .verColaboradores{
    color: #022719;
    font-weight: 500;
    text-align: center;
    margin: .2em;
}
#labe2{
    display: none;
}
.elementosInstalacion{
    list-style-type: none;
}

.elementosInstalacion li{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
.elementosInstalacion li div{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.elementosInstalacion li p{
    align-self: center;
}
.imgElementosInstalacion, .imgBocetos, .videoManuFresh{
    max-width: 35%;
    margin: 1em;
    padding: .3em;
    border: .1em solid white;
}
.divBocetos{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.imgBocetos{
    max-width: 50%;
}

/*Estilos Vj*/
.verVj a{
    background-color: rgb(97, 13, 97);
    border: .5em solid rgb(97, 13, 97);
} 
.verVj a:nth-child(2n){
    background-color: rgb(129, 143, 1);
    border: .5em solid rgb(129, 143, 1);
}

.verVj a:hover{
    background-color: rgb(165, 45, 165);
    border: .5em solid rgb(165, 45, 165);
    padding: 1.2em;
	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px;
 	border-radius: 15px;
}
.verVj a:nth-child(2n):hover{
    background-color:rgb(170, 184, 52);
    border: .5em solid rgb(170, 184, 52);
}

.textoVerVj{
    color: #1d0101;
}
.videoManuFresh{
    max-width: 70%;
}
.imgBilletes{
    align-self: center;
}

/*Estilos de colaboradores*/
.verColaboradores a{
    background-color: rgb(102, 51, 168);
    border: .5em solid rgb(102, 51, 168);
} 
.verColaboradores a:nth-child(2n){
    background-color: rgb(134, 31, 36);
    border: .5em solid rgb(134, 31, 36);
}
.verColaboradores a:nth-child(3n){
    background-color: #045faa;
    border: .5em solid #045faa;
}

.verColaboradores a:hover{
    background-color:rgb(143, 90, 212);
    border: .5em solid rgb(143, 90, 212);
    padding: 1.2em;
	-webkit-border-radius: 15px;
  	-moz-border-radius: 15px;
 	border-radius: 15px;
}
.verColaboradores a:nth-child(2n):hover{
    background-color: rgb(184, 60, 66);
    border: .5em solid rgb(184, 60, 66);
}
.verColaboradores a:nth-child(3n):hover{
    background-color:#3c99e6;
    border: .5em solid #3c99e6;
}

.linkPedro{
    color: #3c99e6;
    font-weight: 400;
}
.linkPedro:hover{
    color: #045faa;
}
.linkPedro:active{
    color:#04AA6D;
}
.linkLuciano{
    color: rgb(143, 90, 212);
    font-weight: 400;
}
.linkLuciano:hover{
    color: rgb(102, 51, 168);
}
.linkLuciano:active{
    color:#04AA6D;
}
.linkLuciana{
    color: rgb(184, 60, 66);
    font-weight: 400;
}
.linkLuciana:hover{
    color: rgb(134, 31, 36);
}
.linkLuciana:active{
    color:#04AA6D;
}


.cartaPokemon{
    display: flex;
    flex-direction: row;
    background-color: #000000e8;
    width: 100%;
    padding: 1em;
    border: .5em solid #000000e8;
    -webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
 	border-radius: 10px;
}

.cartaPokemon img{
    width: 100%;
    margin: .2em;
    display: block;
}


.imgFotosArte{
    max-width: 30%;
}
.arteMobile{
    display: none;
}
/*Estilos AUDIOVISUAL*/
.verBurkina{
    background-color: rgb(22, 99, 12);
}

/*Estilos Contacto*/
.card{ /*estilo de carta en inicio*/
    background-color: #03291b;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:2.5em 1em 1em 1em;
}
.btn{
    width: 100%;
}
.linkTitulo{
    color: #fff;
}
.linkTitulo:hover{
    color: #fde57a;
}
.divFormulario{
    width: 100%;
    display: flex;
    justify-content: center;
}
#formulario{
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
}
#textoFormulario{
    justify-content: center;
}
.btnContacto{
    width: 40%;
}
label {
    width: 90%;
}

h3{
    display: block;
}
h4{
    font-size: 1.2em;
    text-decoration: underline;
}
#detalleseleccion {
    height: 5em;
    line-height: 1em;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid;
  }

/*Noticias*/
.linkNoticias{
    color: rgb(255, 176, 189);
    
}
.linkNoticias:hover{
    color: rgb(253, 214, 221);
    text-decoration:underline;
}
.linkNoticias:active{
    color: yellowgreen;
    text-decoration:underline;
}
h5{
    text-align: center;
}
.divIframe{
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin: 1em
}
iframe{
    width: 60%;
    align-self: center;
}
.logos{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    padding: 1em;
}
.imgLogos{
    width: 30px;
}
.imgLogos:hover{
    width: 40px;
    
}
.publicacionIg{
    color: black;
    font-weight: 400;
    padding: .2em .5em;
    text-align: center;
    animation-name: color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes color{
    0% {background-color: rgb(255, 0, 0);} 
    15% {background-color: rgb(255, 174, 0);} 
    30% {background-color: #ff0;} 
    45% {background-color: rgb(60, 255, 0);} 
    60% {background-color: rgb(0, 247, 255);} 
    75% {background-color: rgb(0, 17, 255);} 
    90% {background-color: rgb(247, 0, 255);} 
    100% {background-color: rgb(255, 0, 0);} /*Genero la animación para el background del botón*/
    
}
.publicacionIg:hover{
    padding: .3em .6em;
}
.publicacionIg:active{
    padding: .1em .4em;
}

/*Estilos Info Pag*/
.developer{
    background-image: url(../img/developer-background.gif);
    background-repeat: no-repeat;
    background-size: cover;
}
.logos2{
    display: flex;
    flex-direction: column;
    justify-content:center;
}
.imgLogos2{
    width: 45%;
    margin: .1em;
}
.imgLogos2:hover{
    width: 50%;
    
}
.developerCard{
    background-color: black;
    width: 55%;
    display: flex;
    flex-direction: column;
    align-self: center;
    box-shadow: 0 0 20px rgb(55, 190, 28);
    border-radius: 2em;
}
.imgDeveloper{
    width: 40%;
    box-shadow: 0 0 20px  rgb(38, 131, 19);
    border-radius: 20em;
    margin-top: 4em;
}
.divDescripcionDeveloper{
    margin: 1em;
}
.divDescripcionDeveloper h3, .divDescripcionDeveloper h4{
    text-align: center;
    line-height: 2em;
}

.divImgDeveloper{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.boton{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*Footer*/
footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90%;
    background-color: #03291b;
    margin: 2em;
}
.footerLogo, .footerLinks, .ulContacto{
    width: 30%;
    margin: 1em;
}
.footerLogo img{
    width: 70%;
}
footer ul{
    list-style-type: none;
}
.footerLinks a:hover{
    text-decoration: underline;
}
footer h3{
    color: #ddd;
}
.ulContacto img{
    width: 3em;
    margin: 1em;
}
.ulContacto img:hover{
    width: 3.5em;
}
@media (max-width:1024px){
    nav{
        font-size: .8em;
        margin: 1em;
    }
    .cuerpo{
        display: flex;
        flex-direction: column;
        width: 100%;
    } 
    .desktop-menu{
        display: none;
    }
    /*Agregar diferencias en el despliegue del menu*/
    .mobile-menu{
        width: 80%;
        align-self: center;   
    }
    /* Estilos del menu de navegación */
    .topnav {
        display: block;
        overflow: hidden;
        background-color: #33333300;
        position: relative;
    }
  
    /* Escondo los links dentro del menu de navegación (excepto por el logo/home) */
    .topnav #myLinks {
        display: none;
    }
  
  /* Estilos de los links del menu */
    .topnav a {
        color: white;
        padding: 1em 2em;
        text-decoration: none;
        font-size: 17px;
        display: flex;
    }
  
    /* Estilos del menu de hamburguesa */
    .topnav a.icon {
        background: black;
        display: block;
        position:absolute;
        right: 0;
        top: 0;
    }
  
    /* Agregar background-color en el mouseover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
  
    /* Estilos de activación de link (o home/logo) */
    .active {
        background-color: #ffffff00;
        color: white;
    }
    .elementosInstalacion li div{
        flex-direction: column;
    }
    .texto{
        align-self: center;
    }
    .cardInicio{
        display: none;
    }
    .developerCard{
        width: 70%;
    }
    .imgDeveloper{
        width: 60%;
    }
    
}

@media (max-width:768px){
    
    .parrafoConImagenes{
        display: none;
    }
    .swiffy-slider, .pMobile{
        display: block;
    }
    .pMobile{
        font-size: 12.5px;
        letter-spacing: .05em;
    }
    .logo{
        width:10%
    }

    .texto{
        width: 95%;
    }
    .slider-container li img{
        width: 100%;
    }
    
  
    .imgFloat1, .imgFloat2{
    /*Estilos Instalaciones*/
        float: none;
        max-width: 90%;
    }
    .verInstalaciones .verVj, .verColaboradores{
        flex-direction: column;
        max-width: 90%;
    }
    .verInstalaciones a, .verVj a, .verColaboradores a{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: .7em;
        margin: 1em;
        width: 100%;
    }
    .imgVerInstalaciones{
        max-width: 70%;
    }
    #labe1{
        display: none;
    }
    #labe2{
        display: block;
    }
    .elementosInstalacion li{
        flex-direction: column;
    }
    .imgElementosInstalacion,.imgBocetos{
        max-width: 100%;
       
    }
    .videoManuFresh{
        max-width: 100%;
    }
    .divIframe{
        margin: 0;
    }
    iframe{
        width: 100%;
    }
    .indiceInterno{
        display: none;
    }
    /*Estilos COLABORADORES*/
    .cartaPokemon{
        flex-direction: column;
    }
    .arteDesktop{
        display: none;
    }
    .arteMobile{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin:1em;
    }
    .imgColaboradores, .imgFotosArte{
        max-width: 100%;
    }
    .carousel-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .developerCard{
        width: 85%;
    }
    #detalleseleccion{
        width: 100%;
    }

    footer{
        width: 100%;
        flex-direction: column;
        margin: 0;
        margin-top: 1em;
    }
    .footerLogo, .footerLinks, .ulContacto{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footerLogo, .ulContacto{
        flex-direction: row;
    }
    footer div{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    footer h3{
        text-align: center;
    }
    .footerLinks{
        flex-direction: column;
    }
    .footerLogo img{
        width: 60%;
    }
}