@media (max-width:1024px){
    @media screen and (orientation: landscape) {
        #popUp {
            display: grid;
            grid-template-rows: 10% 90%;
            z-index: 99;
            position: relative;
            top: 10%;
            background: white;
            padding-top : 0px;
            padding-bottom: 0px;
            margin : auto;
            max-width: 800px;
            max-height: 80%;


        }
        #TitlePopUp>h3{
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            margin-top: 1%;
            font-size: x-large;
        }
        #popUpImageContainer{
            overflow: hidden;
            width: 100%;
        }
        .popUpP{
            position: absolute;
            top: 15px;
            left: 47%;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5);
            color: black;
            font-size: larger;
            font-weight: bolder;
        }
        .popUpImg{
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        #TitlePopUp{
            display: grid;
            grid-template-columns: 90% 10%;
            grid-template-rows: 100%;
        }
        #PopUpButton{
            margin: 0%;
            color: gray;
            border: 0px;
            font-size: inherit;
            background-color: white;
    
        }
        .popUpText{
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
        }
        #PopUpButton:hover{
            background-color: red;
        }
        #videoPopUp{
            height: 100%;
            width: inherit;
        }
    }
    @media screen and (orientation: portrait) {
        #popUp {
            display: grid;
            grid-template-rows: 10% 90%;
            z-index: 99;
            position: relative;
            top: 10%;
            background: white;
            padding-top : 0px;
            padding-bottom: 0px;
            margin : auto;
            max-width: 500px;
        }
        #TitlePopUp>h3{
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            margin-top: 1%;
            font-size: x-large;
        }
        #popUpImageContainer{
            overflow: hidden;
            width: 100%;
        }
        .popUpP{
            position: absolute;
            top: 15px;
            left: 47%;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5);
            color: black;
            font-size: larger;
            font-weight: bolder;
        }
        .popUpText{
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
        }
        .popUpImg{
            width: 100%;
            object-fit: fill;
        }
        #TitlePopUp{
            display: grid;
            grid-template-columns: 90% 10%;
            grid-template-rows: 100%;
        }
        #PopUpButton{
            margin: 1%;
            color: gray;
            border: 0px;
            font-size: 5cqw;
            background-color: white;
    
        }
        #PopUpButton:hover{
            background-color: red;
        }
    }

}


@media (max-width:800px) {
    @media screen and (orientation: landscape) {
        #popUp {
            display: grid;
            grid-template-rows: 10% 90%;
            z-index: 99;
            position: relative;
            top: 3%;
            background: white;
            padding-top : 0px;
            padding-bottom: 0px;
            margin : auto;
            max-width: 400px;
            max-height: 300px;

        }
        #TitlePopUp>h3{
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            margin-top: 1%;
            font-size: 100%;
        }
        #popUpImageContainer{
            overflow: hidden;
            width: 100%;
        }
        .popUpP{
            position: absolute;
            top: 15px;
            left: 47%;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5);
            color: black;
            font-size: larger;
            font-weight: bolder;
        }
        .popUpImg{
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        #TitlePopUp{
            display: grid;
            grid-template-columns: 90% 10%;
            grid-template-rows: 100%;
        }
        #PopUpButton{
            margin: 0%;
            color: gray;
            border: 0px;
            font-size: inherit;
            background-color: white;
    
        }
        .popUpText{
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
        }
        #PopUpButton:hover{
            background-color: red;
        }
        #videoPopUp{
            height: 100%;
            width: inherit;
        }
    }
}



@media(min-width:1024px) {
    #popUp {
        display: grid;
        grid-template-rows: 10% 90%;
        z-index: 99;
        position: relative;
        top: 5%;
        background: white;
        padding-top : 0px;
        padding-bottom: 0px;
        margin : auto;
        max-width: 800px;
        max-height: 600px;

    }
    #TitlePopUp>h3{
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        margin-top: 1%;
        font-size: x-large;
    }
    #popUpImageContainer{
        overflow: hidden;
        width: 100%;
    }
    .popUpText{
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
    }
    .popUpP{
        position: absolute;
        top: 15px;
        left: 47%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);
        color: black;
        font-size: larger;
        font-weight: bolder;
    }
    .popUpImg{
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    #TitlePopUp{
        display: grid;
        grid-template-columns: 90% 10%;
        grid-template-rows: 100%;
    }
    #PopUpButton{
        margin: 0%;
        color: gray;
        border: 0px;
        font-size: inherit;
        background-color: white;

    }
    #PopUpButton:hover{
        background-color: red;
    }
    #videoPopUp{
        height: 100%;
        width: inherit;
    }
}

#BlackScreen{
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}