/* Hoja de estilos para la creacion de la barra de menu de opciones */
/********************************************************************/

@import url(https://fonts.googlepis.com/css?family=Open+Sans);

*{
    box-sizing: border-box;
}

/* ESTILOS DE USO COMUN páginas index.php, nosotros.html, windowsapp.html  */

.video{
    position: absolute;
    top: 0px;
	bottom: 00px; 
	right: 0px; 
	min-width: 100%; 
	min-height: 100%; 
	width: 100%; 
	height: 100%; 
	z-index: -1000; 
    overflow: hidden; 
}

footer{
    position: fixed;
    padding: 10px 0 0;
    width: 100%;
    background: #081323;
    height: 100px;
    /*max-height: 125px;*/
    bottom: 10px;
    left: 0%;
    opacity: 0.75;
}

/* ESTILOS PARA INDEX.PHP */

.login{
    /*position: absolute;*/
    padding: 10px;
    width: 25%;
    height: 250px;
    max-height: 250px;
    margin-top: 140px;
    margin-right: 80px;
    /*right: 65px;
    background: #081323;*/
    border: darkcyan solid 2px ;
    z-index: -500;
    float: right;
    overflow: auto;
}

/* FIN DE ESTILOS index.php*/

/* ESTILOS PARA nosotros.html */

.nosotros{
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    top: 10%;
    width: 100%;
    height: 75%;
    overflow: auto;
    z-index: -50;
}
.cuerpoizquierdo{
    flex-grow: 1;
    flex-basis: 33%;
    padding: 10px;
    height: auto;
    top: 12%;
    font: 85%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
}
.cuerpomedio{
    flex-grow: 1;
    flex-basis: 33%;
    padding: 10px;
    height: auto;
    width: 25%;
    top: 12%;
    font: 85%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
}
.mapa{
    flex-grow: 1;
    flex-basis: 33%;
    padding: 10px;
    height: auto;
    top: 28%;
}

.titulo{
    color: cyan;
    margin-top: auto;
    text-align: center;
}
.parrafo1{
    background-color: #081323;
    padding: 10px;
    text-align: justify;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 0.90;
}
/* FIN DE ESTILOS PARA nosotros.html */

/* INICION DE ESTILOS PARA LA PAGINA DE windowsapp.html */

.detalleproduct{
    position: fixed;
    padding: 20px;
    height: 75%;
    width: 46%;
    top: 12%;
    left: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    font: 80%/1.5  Verdana, 'Trebuchet MS', arial, sans-serif;
    color: white;
    background: #081323;
    z-index: -100;
    opacity: 0.85;
}

.parrafoproduct{
    font-size: 100%;
    color: white;
    margin-left: 30px; 
    text-align: justify; 
    font-family: loranormal;
    font-size: 14px;
}

/* FIN DE ESTILOS PARA windowsapp.html */

.fondoheader{
    position: fixed;
    width: 100%;
    height: 10%;
    z-index: -1;
    float: left;
    margin-left: 0px;
}

.principal{
    position: fixed;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 50%;
    background-color: #B4C1C7;
}

.contiene-video{
    position: absolute;
    padding: 0 10px;
    border: #fff 2px solid;
    margin: 0 auto;
    top: 70px;
    left: 20px;
    height: 50%;
    width: 50%;
    z-index: -1000; 
    overflow: hidden; 
    box-sizing: border-box;
}

.videosistcol{
    position: relative;
	width: 100%; 
    height: 110%;
}

.productos{
    position: absolute;
    width: 96%;
    height: 50%;
    padding: 2px;
    box-sizing: border-box;
    top: 110%;
    left: 2%;
    /*border: 3px solid gray;*/
    background-color: #B4C1C7;
    z-index: -100;
}

.proyectos_mp4{
    position: absolute;
    max-width: 100%;
    min-width: 30%;
    max-height: 100%;
    min-height: 30%;
    left:-32%;
    top: 0%;
}

.webdesign_mp4{
    position: absolute;
    max-width: 100%;
    min-width: 30%;
    max-height: 100%;
    min-height: 30%;
    left:25%;
    top: 0%;

}

.devsoft_mp4{
    position: absolute;
    max-width: 100%;
    min-width: 30%;
    max-height: 100%;
    min-height: 30%;
    left:45%;
    top: 0%;
}

.webapp_mp4{
    position: absolute;
    max-width: 100%;
    min-width: 30%;
    max-height: 100%;
    min-height: 30%;
    left:65%;
    top: 0%;
}

.tablog{
    width: 80%;
}

/* ESTILOS PARA accesosistcol.php */

.identifica{
    position: fixed;
    padding-bottom: 25px;
    margin-left:15px;
    margin-top: 100px;
    width: 35%;
    border: black 2px solid;
    /*background-color:#2F657A;
        height: 60%;
    */
    background-color:white;
    box-sizing: border-box;
    opacity: 0.9;
}

.accessbtn{
    background-color: #BEC1C9;
    width:50%;
    height:35px;
    color:black;
    top:15px;
    font-size:20px;
    font-weight:bold;
}

.accessbtn:hover{
    cursor: pointer;
    color:red;
    background-color: slategrey;
}

/* FIN DE ESTILOS PARA accesosistcol.php */

@media screen and (max-width:800px){
    .login{
        top: 70px;
        left: 50%;
        width: 95%;
        margin-left: -48%;
    }
    body{
        padding: 10px;
    }
    footer{
        bottom: 0px;
        height: 200px;
        overflow: auto;
    }

    .nosotros{
        flex-direction: column;
        width: 96%;
        height: 70%;
        overflow: auto;
    }
    .cuerpoizquierdo{
        order: 1;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .cuerpomedio{
        order: 2;
        width: 100%;
        height: auto;
        overflow: auto;
    }
    .mapa{
        order: 3;
        width: 100%;
        overflow: auto;
    }
    iframe{
        width: 100%;
        overflow: auto;
    }
    .detalleproduct{
        width: 90%;
        left: 20px;
        top: 80px;
        padding: 10px;
        height: 60%;
    }
}