/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (max-width: 800px){
    .mediumLargeDevice {
        display: none;
    }

    /* new position for the navbar*/
    .magazineIndex {
        justify-content: flex-end;
    }

    /* TRIGRAM FOR HEAVEN */
    #openNavResponsive {
        display: block;
        cursor: pointer;
        font-size: 1.2rem;
        color: #f1f1e6;
        background-color: transparent;
        border: 4px groove #bba57c;
        padding: 0 0 5px 0;
    }

    /* dialog */
    .overlayModal {
        display: block;
        height: 0%; /* 100% with javascript */
        width: 100%; 
        position: fixed;
        z-index: 30;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0, 0.9);
        overflow-x: hidden;
        transition-duration: 0.6s;
        -webkit-transition-duration: 0.6s;
        -moz-transition-duration: 0.6s;
    }

    /* TODO an unordered list with a list items for navigation */
    .modal-content { /* flex box */
        justify-content: flex-start;
        row-gap: 3rem;
        position: relative;
        top: 20%;
        width: 100%;
        text-align: center;
        list-style: none;
    }

    .overlayModal li {
        display: block;
    }
    /* Add animation */
    .dropdown-animation { 
        -webkit-animation-name: zoom;
        animation-name: zoom;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
    }

    /* The scale() Method to create the zoom effect.*/
    @-webkit-keyframes zoom {
        from {-webkit-transform:scale(0)} 
        to {-webkit-transform:scale(1)} /* defined size */
    }

    @keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)} /* defined size */
    }

    /* The Close Button */
    #closeDialog {
        position: absolute;
        top: 2rem;
        right: 2rem;
        cursor: pointer;
    }

    .btnStyling {
        color: #fff;
        background-color: transparent;
        font-size: 2.5rem;
        font-weight: bold;
    }

    #closeDialog:hover,
    #closeDialog:focus {
        color: #bba57c; /* colorBoscPear */
        text-decoration: none;
        cursor: pointer;
        outline: none;
    }
}