.container.box{position: relative;}
#grayBox {
            height: inherit;
            width: 80%;
            margin-top: -18%;
            margin-left: 4%;
            display: none;
            z-index: 8;
        }

        #txtContent {
            z-index: 9;
            position: absolute;
            margin-top: -100%;
            margin-left: 5%;
            font-size: 24px;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
            opacity: 0;
        }

        @media only screen and (min-width: 940px) {
            #grayBox {
            }

            #txtContent {
                font-size: 24px;
            }
        }


        @media only screen and (min-width: 780px) and (max-width: 939px) {
            #grayBox {
            }

            #txtContent {
                font-size: 20px;
            }
        }


        @media only screen and (min-width: 510px) and (max-width: 779px) {
            #grayBox {
            }

            #txtContent {
                font-size: 18px;
            }
        }


        @media only screen and (min-width: 321px) and (max-width: 509px) {
            #grayBox {
            }

            #txtContent {
                font-size: 14px;
            }
        }

        @media only screen and (min-width: 0px) and (max-width: 320px) {
            #grayBox {
            }

            #txtContent {
                font-size: 12px;
            }
        }