/*#region Logo Banner */
#logoBanner {
    width: 100%;
    display: flex;
    justify-content: center;
}

    #logoBanner img {
        max-width: 80%;
        align-self: center; /*Avoid flex to stretch the image*/
    }

@media (min-width: 576px) and (max-width: 767px) {
    #logoBanner img {
        max-width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #logoBanner img {
        max-width: 80%;
    }
}

@media (min-width: 992px) {
    #logoBanner img {
        max-width: 80%;
    }
}
/*#endregion*/

/*#region Logo Pertec*/
img#LogoPertec {
    max-width: 40%;
    margin-top: 1rem;
}

@media (min-width: 576px) and (max-width: 767px) {
    img#LogoPertec {
        max-width: 35%;
        margin-right: 1rem;
    }
}

@media (min-width: 768px) {
    img#LogoPertec {
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    img#LogoPertec {
        max-width: 30%;
        margin-right: 3rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    img#LogoPertec {
        max-width: 20%;
        margin-right: 3rem;
    }
}

@media (min-width: 1200px) {
    img#LogoPertec {
        max-width: 13%;
        margin-right: 6rem;
    }
}
/*#endregion*/

/*#region Very small devices*/
@media only screen and (max-width: 375px) {
    #logoBanner img {
        max-width: 100% !important;
    }
}
/*#endregion*/

/*#region Logo Banner for iPhone 6, 6S, 7 and 8*/

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    #logoBanner img {
        max-width: 100%;
    }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    #logoBanner img {
        max-width: 75% !important;
    }
}
/*#endregion*/

/*#region iPhone X*/

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    #logoBanner img {
        max-width: 100%;
    }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    #logoBanner img {
        max-width: 55% !important;
    }
}
/*#endregion*/

/*#region iPad 1, 2, Mini and Air*/

/*Portrait*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    #logoBanner img {
        max-width: 55%;
    }
}

/*Landscape*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    #logoBanner img {
        max-width: 40%;
    }
}
/*#endregion*/

/*#region iPad Pro 10.5"*/

/* Portrait */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #logoBanner img {
        max-width: 40% !important;
    }
}

/* Landscape */
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    #logoBanner img {
        max-width: 40% !important;
    }
}
/*#endregion*/

/*#region Overrride Main Containers Styles to adapt anonymous views*/
.full-screen-container > .main-container > .right-main-container {
    background-color: inherit;
}

    .full-screen-container > .main-container > .right-main-container > .page-container > .page-content {
        display: flex;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

        .full-screen-container > .main-container > .right-main-container > .page-container > .page-content main {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

.container-anonymous-main {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    flex-grow: 1
}
/*#endregion*/