/*############################*/
/*        LANDSCAPE mode      */
/*############################*/
@media (orientation: landscape) {
    main
    {
        min-height: 100vh;
        background-position: center 70vh;
        background-size: 70vw auto;
        background-repeat: no-repeat;
        background-attachment: fixed;        
    }
    .mainLogo
    {
        height: 5vh;
        width: auto;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .footer
    {
        min-height: 5vh;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .hero
    {
        width: 100%;
        height: 20vh;
        background-color: black;
        background-position: center;
        background-size: cover;
    }
    .mainTitle
    {
        width: 100%;
        height: 9vh;
        background-position: center bottom;
        background-size: 50% auto;
    }    
    .mainTitle h1{
        font-size: 1.5vh;
        margin-bottom: 0;
    }    
    .mainTitle .icon
    {
       height: 4.5vh;
       width: auto;
       display: inline-block;
       margin-right: 1vw;
    }
    .cardCategoria
    {
        margin-bottom: 1vh;
    }
    .cardCategoria h4
    {
        font-size: 1.3vh;
        color: black;
        
    }    
    .cardCategoria h4 br
    {
        display: none;
    }
    .cardCategoria .card-header
    {
        background-color: #CFCFCF;
    }
    .cardCategoria img
    {
        height: 7vh;
        width: auto;
        margin: auto;
        display: inline-block;
    }   
    .containerItemProducts
    {
        max-width: 1240px;
        margin: auto;
        margin-top: 4vh;
        margin-bottom: 6vh;       
    }
    .itemProduct
    {
        margin-bottom: 4vh;
    }
    .itemProduct h2
    {
        font-size: 2vh;
    }

    .headerProduct
    {
        width: 100%;
        height: 10vh;
        background-color: #CFCFCF;
    }
    .headerProduct h1
    {
        font-size: 2vh;
        color: black;
        margin: 0;
        display: inline-block;
    }
    .headerProduct img
    {
        height: 4vh;
        width: auto;
        display: inline-block;
    }
    .tituloProducto
    {
        width: 100%;
        height: 7vh;
    }
    .tituloProducto h2
    {
        font-size: 2vh;
        margin: 0;
        display: inline-block;
    }
    .imagesProduct
    {
        height:  36vh;
        margin: auto;
    }
    .imagesProduct .imageContainer img
    {
        height:  36vh;
        width: auto;
    }
    .imagesProduct .sliderContainer
    {
        height:  36vh;
        overflow: auto;
    }
    .imagesProduct .sliderContainer img
    {
        margin-bottom: 0.5vh;
    }
    .detalleContainer
    {
        margin-top: 3vh;
        margin-bottom: 3vh;
        position: relative;
    }
    .detalleContainerScroll
    {
        max-height: 20vh;
        overflow: auto;
    }
    .detalleContainerScroll p
    {
        font-size: 1vh;
    }
    .containerProductosRelacionados
    {
        height: 15vh;
    }
    .itemRelacionados h3
    {
        margin: 0;
        font-size: 1.1vh;
        margin-top: 0.5vh;
        text-align: center;
    }
    
}
/*############################*/
/*        LANDSCAPE mode      */
/*############################*/


/*############################*/
/*        PORTRAIT mode      */
/*############################*/
@media (orientation: portrait) {
    main {
        min-height: 100vh;
        background-position: center 80vh;
        background-size: 150% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .mainLogo {
        height: 3.5vh;
        width: auto;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .footer {
        min-height: 5vh;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        padding-top: 1vh;
        padding-bottom: 1vh;
        z-index: 20;
    }
    .imgFooter{
        width: 100%;
        height: auto;
    }
    .hero {
        width: 100%;
        height: 12vh;
        background-color: black;
        background-position: center;
        background-size: cover;
    }
    .btnBack
    {
        width: 5vw;
        height: 100%;
        background-color: #CFCFCF;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .btnBack img
    {
        position: absolute;
        width: 25%;
        height: 30%;
        left: 37.5%;
        top: 35%;
    }
    .headerProduct .btnBack img
    {
        width: 25% !important;
        height: 30% !important;
        left: 37.5% !important;
        top: 35% !important;
    }

    .mainTitle {
        width: 100%;
        height: 10vh;
        background-position: center bottom;
        background-size: cover;
    }
    .mainTitle h1 {
        font-size: 1.5vh;
        margin-bottom: 0;
    }
    .mainTitle .icon {
        height: 4vh;
        width: auto;
        display: inline-block;
        margin-right: 1.25vw;
    }
    .cardCategoria
    {
        margin-bottom: 1vh;
    }
    .cardCategoria h4 {
        font-size: 1vh;
        color: black;
        margin: 0;
        text-decoration: none;
    }
    .cardCategoria .card-header {
        background-color: #CFCFCF;
        min-height: 5vh;
    }
    .cardCategoria img {
        height: 7vh;
        width: auto;
        margin: auto;
        display: inline-block;
    }
    .containerItemProducts
    {
       margin-bottom: 5vh;
        margin-top: 4vh;        
    }
    .titulo-productoCategoria
    {
        height: 8vh;
        width: 100%;
        background-color: #CFCFCF;
        position: relative;
    }
    .titulo-productoCategoria h2
    {
        width: 60%;
        height: 100%;
        padding: 0;
        margin: 0;
        color: black;
        font-size: 1.25vh;
        padding-left: 3%;
        padding-right: 3%;
    }
    .titulo-productoCategoria .containerImg
    {
        width: 40%;
        height: 100%;
        background-color: white;
        position: relative;
        padding-top: .9vh;
        padding-bottom: .9vh;
        padding-left: 2.5%;
    }
    .titulo-productoCategoria .containerImg img
    {
        height: 100%;
        width: auto;
        
    }
    .itemProduct
    {
        margin-bottom: 4vh;
    }
    .itemProduct h2
    {
        font-size: 1.2vh;
    }
    .itemProduct img
    {
        width: 100%;

    }
    .imageContainerItem
    {
        position: relative;
    }
    .imageContainerItem img
    {
        width: 100%;
        height: auto;
    }
    .descriptionContainerItem
    {
        position: relative;
        z-index: 15;
    }
    .headerProduct
    {
        width: 100%;
        height: 7vh;
        background-color: #CFCFCF;
        position: relative;
    }
    .headerProduct h1
    {
        font-size: 1.25vh;
        color: black;
        margin: 0;
        display: inline-block;
        width: 50%;
    }
    .headerProduct img
    {
        height: 2.5vh;
        width: auto;
        display: inline-block;
    }
    .tituloProducto
    {
        width: 100%;
        height: 7vh;
    }
    .tituloProducto h2
    {
        font-size: 2vh;
        margin: 0;
        display: inline-block;
        
    }
    .imagesProduct
    {
        height:  36vh;
        margin: auto;
    }
    .imagesProduct .imageContainer img
    {
        height:  36vh;
        width: auto;
    }
    .imagesProduct .sliderContainer
    {
        height:  36vh;
        overflow: auto;
    }
    .imagesProduct .sliderContainer img
    {
        margin-bottom: 0.5vh;
    }
    .detalleContainer
    {
        margin-top: 3vh;
        margin-bottom: 3vh;
        position: relative;
    }
    .detalleContainerScroll
    {
        max-height: 18vh;
        overflow: auto;
    }
    .detalleContainerScroll p
    {
        font-size: 1.05vh;
    }
    .detalleContainerScroll b{
        font-size: 1.5vh;
    }
    .detalleContainerScroll ul li
    {
        font-size: 1.05vh;
    }
    .containerProductosRelacionados
    {
        height: 19vh;
        background-color: #E8E8E8;
    }
    .containerProductosRelacionados h2
    {
        color: black;
        margin-bottom: 1vh;
    }
    .itemRelacionados h3
    {
        margin: 0;
        font-size: .8vh;
        margin-top: 0.5vh;
        text-align: center;
    }

    .modalQR .qr
    {
        width: auto;
        height: 25vh;
    }
    .modalQR
    {
        font-size: 2vh;
    }
    .modalQR h3
    {
        font-size: 1.5vh;
        color: black;
        margin-top: 2vh;
    }
    .modalQR h2
    {
        font-size: 2vh;
    }
    .modalQR .logo
    {
        width: auto;
        height: 1.5vh;
        margin-bottom: 2vh;
    }
    .sliderContainer img.selected
    {
        border-color: coral;
        border-width: 4px;
    }
}
/*############################*/
/*        PORTRAIT mode      */
/*############################*/

.iframeContainer iframe
{
    height: calc(100vh - 148px);
}
.footer
{
 height: 77px !important;
}