/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2/12/2016, 10:56:22 AM
    Author     : Adrian Lona
*/

.cssProductosBanner
{
    background:transparent url("img/productos.png")scroll no-repeat center / cover;
    width:100%;
    height:527px;
}
.productosTitulo
{
    color: white;
    font-family: Calibri;
    font-size: 100px;
    font-style: italic;
    font-weight: bold;
    margin-left: 80px;
    margin-top: 340px;
    position: absolute;
}
.subTituloProductos
{
    color: white;
    font-family: Century Gothic;
    font-size: 25px;
    margin-left: 80px;
    margin-top: 445px;
    position: absolute;
}
.cssProdRow
{
    background-color: white;
    float: left;
    position: relative;
    width: 100%;
}
.cssProdProduct
{
    box-sizing: border-box;
    float: left;
    padding: 30px 7% 0 7%;
    position: relative;
    width: 50%;
    text-align: center;
    margin-bottom: 15px;

}
.cssProdProduct1
{
    box-sizing: border-box;
    float: left;
    padding: 0 5%;
    position: relative;
    width: 50%;
    text-align: center;

}
.cssAvlScreen
{
    background: transparent url("img/avlscreen.png") no-repeat scroll center center/100%;
    height: 290px;
    margin: auto;
    position: relative;
    width: 95%;
}
.cssAvlLogo
{
    margin: auto;
    position: relative;
    width: 100%;
    height: 100px;
    background: transparent url("img/avllogolargo.png")scroll no-repeat 0px 15px/100%;
}
.cssCentinelaScreen
{
    background: transparent url("img/centinelascreen.png") no-repeat scroll center center/90%;
    height: 290px;
    margin: auto;
    position: relative;
    width: 100%;
}
.cssCentinelaLogo
{
    margin: auto;
    position: relative;
    width: 100%;
    height: 100px;
    background: transparent url("img/centinelaLogo.png")scroll no-repeat 0px 0px/100% 100%;
}

.cssFinderScreen
{
    background: transparent url("img/finderscreen.png") no-repeat scroll center center;
    height: 290px;
    margin: auto;
    position: relative;
    width: 378px;
}
.cssFinderLogo
{
    background: transparent url("img/finderlogolargo.png") no-repeat scroll center center;
    height: 64px;
    margin: auto;
    position: relative;
    width: 374px;
}

.cssAlertasScreen
{
    background: transparent url("img/alertasscreen.png") no-repeat scroll center center;
    height: 290px;
    margin: auto;
    position: relative;
    width: 378px;
}
.cssAlertasLogo
{
    background: transparent url("img/alertas.png") no-repeat scroll center center;
    height: 64px;
    margin: auto;
    position: relative;
    width: 374px;
}
/*RESPONSIVE DESIGN*/

@media only screen and (min-width: 1201px) {
    .cssAvlScreen
    {
        width: 400px;
    }
    .cssCentinelaScreen
    {
        width: 400px;
    }
    .cssAvlLogo
    {
        width: 400px;
    }
    .cssCentinelaLogo
    {
        width: 400px;
    }
}

@media only screen and (min-width: 1380px) {


}
@media only screen and (max-width: 768px) {
    .cssProdProduct
    {
        padding: 30px 10% 0 10%;
    }
    .cssAvlLogo
    {
        width: 80%;
    }
    .cssAvlScreen
    {
        width: 80%;
    }
    .cssCentinelaLogo
    {
        width: 80%;
    }
    .cssCentinelaScreen
    {
        width: 80%;
    }
    .cssProductosBanner {
    
    height: 250px;
    }

    .productosTitulo {
   
    font-size: 70px;
      margin-left: 70px;
    margin-top: 100px;
    position: absolute;
    
}

.subTituloProductos {
   
        font-size: 20px;
    margin-left: 70px;
    margin-top: 152px;
}
    
.cssProdProduct {
   width: 100%;
    
}

}

@media only screen and (max-width: 480px) {
    .cssAvlScreen
    {
        width:326px;
        height:232px;
    }
    .cssAvlLogo
    {
        width: 80%;
    }
    .cssCentinelaScreen
    {
        width:326px;
        height:232px; 
    }
    .cssCentinelaLogo
    {
        width: 80%;
    }
    .cssProdProduct
    {
       width:100%; 
    }
    .subTituloProductos
    {
    font-size: 18px;
    margin-left: 50px;
    margin-top: 160px;
    }
    .productosTitulo
    {
    font-size: 60px;
    margin-left: 50px;
    margin-top: 120px;
    }
}

@media only screen and (max-width: 380px) {
    .subTituloProductos
    {
        margin-left: 35px;
        font-size: 16px;
    }
    .productosTitulo
    {
        margin-top: 140px;
        margin-left: 35px;
        font-size: 40px;
    }
    .cssAvlScreen
    {
        width: 75%;
        height: 160px;
    }
    .cssAvlLogo
    {
        width: 75%;
        height: 50px;
    }
    .cssCentinelaScreen
    {
        width: 75%;
        height: 160px;
    }
    .cssCentinelaLogo
    {
        width: 75%;
        height: 55px;
    }
    .cssTexto380
    {
        font-size: 15px;
    }
    
}