/*
  Tamaño de Dispositivos.

- CELULARES-
• iPhone 4 y 4S: 320 x 480
• iPhone 5 y 5S: 320 x 568
• iPhone 6: 375 x 667
• iPhone 6 + : 414 x 736
• Nexus 4: 384 x 598
• Nexus 5: 360 x 598
• Galaxy S3, S4, S5: 360 x 640
• HTC One: 360 x 640

- TABLETS
• iPad (*) 1024 x 768 
• Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024 
• Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280 
• Nexus 7: 603 x 966 
• Nexus 10: 800 x 1280 

- COMPUTADORAS
•	Pantallas pequeñas: 1024x600 
•	Pantallas medianas: 1280 x 720 / 1280x800 
•	Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280 
•	Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400x900 o 1600 x 1200. 


- margin: top, right, bottom, left;
- Text-Shadow: derecha, abajo, foco, color

- linear-gradient(Color1, color2,....,colorn)
- box-shadow:Derecha,abajo,Foco,Tamaño, color

*/

body {
    background-color: whitesmoke;
    color:black;
}

h1 {
    padding-left: 10px;
    color: silver;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
    text-shadow: 2px 2px 2px #808080;
}

h2 {
    margin-left: 2%;
    color: silver;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    font-weight: bold;
   /* font-style: italic;*/
    text-shadow: 0px 0px 0px white;
}

h3 {
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
/*    text-shadow: 1px 2px 2px #808080;*/
    /*background-color: #b0c5cb;*/
    background-color: #3489c7;
    border-radius: 1px;
    box-shadow: 0px 0px 5px #b0c5cb;
}

h4 {
    margin-left: 10px;
    /*    color: #343DA9;*/
    color: #3489c7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
}

h5 {
    padding-left: 10px;
    color: #343DA9;
    font-family: Calibri;
    font-size: x-large;
    font-weight: bold;
    text-shadow: 1px 1px 2px #545bb6;
    border-radius: 10px;
}

p {
    /*color: black;*/
    display: inline;
    font-family: Calibri;
    font-size: medium;
    text-align: justify;
    text-indent: 5%;
    padding-left:1%;
    padding-right:1%;
}

address {
    color: silver;
    display: inline;
    font-family: Calibri;
    font-size: medium;
    text-align: justify;
    font-weight: bold;
}

.Contenido {
    background-color: whitesmoke;
    color: black;
    margin-top: 30px;
}

.imgTitulo {
    Width: 40px;
    Height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
    margin-left: 1px;
    margin-right: 10px;
}

.imgLogo {
    Width: 60%;
    Height: 150px;
    margin-left: 1%;
    border-radius: 10px;
}

.textoLogo h1 {
    margin-left: 1.5%;
    color: black;
    font-size: x-large;
}

.Inicio {
    width: 80%;
    height: 30%;
    margin-top: 2%;
    margin-left: 9%;
    padding: 2%;
    text-align: justify;
    display: inline-block;
    border: 1px;
    border-style: none;
    border-color: #b0c5cb;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #b0c5cb;
}

.Demo {
    width: 80%;
    height: 30%;
    margin-top: 2%;
    margin-left: 9%;
    padding: 2%;
    text-align: justify;
    display: inline-block;
    border: 1px;
    border-style: none;
    border-color: #b0c5cb;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #b0c5cb;
}
.btnE {
    margin-left: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-family: Calibri;
    font-size: medium;
    display: inline-block;
    border-color: #3489c7;
/*    border: 1px solid #3489c7;*/
    color: #343DA9;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 6px inset #343DA9;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /*!      -o-user-select: none; */
    user-select: none;
}

.btnE:hover,
.btnE:focus {
    color: #343DA9;
    background-color: #b0c5cb;
    text-decoration: none;
}


.btnC {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-left: 35%;
    font-family: Calibri;
    font-size: medium;
    border-color: #3489c7;
    color: #343DA9;
    background-color: whitesmoke;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0px 0px 6px inset #343DA9;
}

    .btnC:hover,
    .btnC:focus {
        color: #343DA9;
        background-color: #b0c5cb;
        text-decoration: none;
    }

.btn {
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 2%;
    font-family: Calibri;
    font-size: medium;
    border-color: #3489c7;
    color: #343DA9;
    background-color: whitesmoke;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0px 0px 6px inset #343DA9;
}

.btn:hover,
.btn:focus {
    color: #343DA9;
    background-color: #b0c5cb;
    text-decoration: none;
}

article[class^='Prd'] {
    width: 30%;
    height: 30%;
    display: inline-block;
    /*margin: 30px, 20px, 30px, 60px;*/
    margin-left: 2%;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 10px;
    /*background-color: silver;*/
    border: 1px;
    border-style: none;
    border-color: #343DA9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #b0c5cb;
    /*     background: linear-gradient(#FFFFFF,#c2d7dd);*/
    text-align: justify;
}

article[class^='Item'] {
    width: 100%;
    height: 60%;
    display: inline-block;
    margin-top: 2%;
    padding: 1%;
    /*background-color: silver;*/
    border: 1px;
    border-style: none;
    border-color: #343DA9;
    border-radius: 10px;
    box-shadow: -2px -2px 10px #b0c5cb;
    text-align: justify;
}

.Descripcion {
    width: 60%;
    height: 70%;
    margin-left: 1%;
    padding: 1%;
    text-align: justify;
    /*border: 2px solid blue;*/
    display: inline-block;
}

.Imagen {
    Width: 20%;
    Height: 25%;
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 1%;
    position: absolute;
    /*border: 2px solid blue;*/
    display: inline-block;
    box-shadow: 0px 0px 10px whitesmoke;
}

.imgProd {
    Width: 100%;
    Height: 100%;
    display: block;
}

/*----- PANTALLAS PC -----*/
@media screen and (min-width:740px) {
    .btnE {
        margin-left: 19%;
    }
}

/*----- PANTALLAS MOVIL -----*/
@media screen and (max-width:480px) {

    .jumbotron {
        width: 97%;
        margin-left: 1%;
        padding-bottom:1%
    }

    p {
        width: 80%;
    }

    h2 {
        width: 85%;
        margin-left: 5%;
        font-size: medium;
        text-align: center;
    }
   
    h3 {
        font-size: medium;
        margin-left: 1px;
    }

    h4 {
        margin-left: 1px;
    }

    h5 {
        font-size: 20px;
        margin-left: 1px;
    }

    .imgLogo {
        Width: 95%;
        Height: 30%;
        margin-left: 1%;
        border-radius: 10px;
    }

    .textoLogo h1 {
        margin-left: 18%;
        color: black;
        font-size: medium;
    }

    .Demo {
        width: 95%;
        height: 30%;
        margin-left: 1%;
    }

    .imgTitulo {
        Width: 10%;
        Height: 10%;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .btnE {
        width: 93%;
        margin-top: 2%;
        font-size: small;
        border: none;
    }

    .btnC {
        margin-left: 20%;
        font-size: small;
    }

    .btn {
        margin-left: 3%;
        margin-right: 4%;
        font-size: small;
    }

    article[class^='Prd'] {
        width: 90%;
        height: 30%;
        margin-left: 1.5%;
    }

    article[class^='Item'] {
        width: 96%;
        height: 30%;
        margin-left: 1%;
    }

    .Descripcion {
        width: 90%;
        height: 30%;
        margin-left: 1%;
    }

    .Imagen {
        Width: 90%;
        Height: 100%;
        margin-left: 4%;
        margin-right: 1%;
        position: relative;
    }

    .imgProd {
        Width: 100%;
        Height: 100%;
    }
}

/*----- PANTALLAS TABLET -----*/
@media screen and (min-width:481px) and (max-width:740px) {

    .jumbotron {
        width: 94%;
        margin-left: 1%;
        padding-bottom: 1%
    }

    p {
        width: 80%;
    }

    h2 {
        width: 85%;
        margin-left: 2.5%;
        font-size: medium;
    }

    h3 {
        font-size: medium;
        margin-left: 1px;
    }

    h4 {
        margin-left: 1px;
    }

    h5 {
        font-size: 22px;
        margin-left: 1px;
    }

    .imgLogo {
        margin-left: 1%;
        Width: 70%;
        Height: 100px;
        border-radius: 10px;
    }

    .textoLogo h1 {
        margin-left: 1%;
        color: black;
        font-size: medium;
    }

    .Demo {
        width: 93%;
        height: 30%;
        margin-left: 1%;
    }

    .imgTitulo {
        Width: 10%;
        Height: 10%;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .btnE {
        width: 90%;
        margin-top: 2%;
        margin-left: 1%;
        font-size: small;
        border: none;
    }
    
    .btnC {
        margin-left: 30%;
        font-size: small;
    }

    .btn {
        margin-left: 8%;
        margin-right: 20%;
        font-size: 16px;
        text-decoration: none;
    }

    article[class^='Prd'] {
        width: 90%;
        height: 30%;
        margin-left: 1%;
    }

    article[class^='Item'] {
        width: 95%;
        height: 30%;
        margin-left: 1%;
    }

    .Descripcion {
        width: 90%;
        height: 30%;
        margin-left: 1%;
    }

    .Imagen {
        Width: 90%;
        Height: 100%;
        margin-left: 4%;
        margin-right: 1%;
        position: relative;
    }

    .imgProd {
        Width: 100%;
        Height: 100%;
    }
}