::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}
        img {
            width: 100%;
        }

        .titulo {
            font-size: 50px;
        }

        .tituloP {
            font-size: 22px;
            top: 0px;
            hyphens: auto;

        }

        .descricaoP {
            font-size: 14px;
            hyphens: auto;
        }

        #cabecalho {
            margin-left: 0px;
            width: 50%;
        }

        
        
        @media screen and (max-width: 700px) {
            .card {
                width: 100%;
                display: grid;
                grid-template-rows: repeat(2, auto);
                grid-template-areas:
                    "imagem"
                    "info";
            }

            .imagem {
                width: 100%;
                grid-area: imagem;
            }

            #cabecalho {
                margin-left: 30px;
                display: grid;
                position: relative;
                top: -100px;
                grid-area: info;
                width:80%;
            }
            #cabecalhoP {
                margin-left: 10px
            }
            .cardP {
                width: 100%;
                display: grid;
                grid-template-rows: 50% 50%;
                grid-template-areas:
                    "imagem"
                    "info";
            }
            .cardI {
                width: 100%;
                display: grid;
                grid-column: 1/3;
                grid-template-columns: 50% 50%;
                grid-template-areas:
                    "imagem"
                    "info";
            }
            .imagemP {
                display:grid;
                grid-area: imagem;
            }
            .outros{
                display:grid;
                grid-template-columns: 47.5% 47.5%;
                grid-gap:1.5% 5%;
                width:100%;
            }
        }

        @media screen and (min-width: 700px) {
            .logo{
                z-index:2;
            }
            #cabecalhoP {
                display: grid;
                grid-area: info;
                margin-left: 15px;
                width: 100%;
            }

            .imagem {
                display: grid;
            }

            .imagemP {
                display:grid;
                grid-area: imagem;
                width: 150%;
                z-index: -1;
            }

        .cardP, .cardI {
            width: 80%;
            display: grid;
            grid-template-rows: repeat(2, auto);
            grid-template-areas:
                    "imagem"
                    "info";
        }

        #corpo {
            display: grid;
            grid-area: corpo;
            grid-template-rows: repeat(3, auto);
            grid-template-areas:
                "destaque"
                "ad"
                "outros";
        }

        .ad {
            position:relative;
            display: grid;
            grid-area: ad;
            transform: translate(-50%, -50%);
            top:50%;
            left:50%;
            width: 80%;
            height: 80px;
            margin-top:30px;
            margin-left:-100px;
            border-style: solid;
            border-width: 3px 0px 4px 0px;
        }

        .outros{
            margin-top:30px;
            /*margin-left:-100px;*/
            display:grid;
            grid-area: outros;
            grid-template-columns: 33.3% 33.3% 33.3%;
            width:100%;
        }
            #corpo{
                margin-left:200px;
            }
            .card {
                width: 100%;
                display: grid;
                grid-template-columns: 30% 70%;
            }

            .imagem {
                width: 100%;
            }

            .imagemP {
                width: 100%;
                z-index: -1;
            }

            #cabecalho {
                position: relative;
                width transform: translate(-50%, -50%);
                top: 10%;
                z-index: 1;
                width: 100%;
            }

            .titulo {
                position: relative;
                font-size: 70px;
                line-height: 100%;
                margin-left: 40%;
                width: 80%;
                animation-name:moveEsquerda;
                animation-duration:1s;
            }
            
            .descricao{
                position:relative;
                right:0px;
                width:90%;
                margin-left:20px;
                text-align:right;
                animation-name:moveCima;
                animation-duration:1s;
            }
            
            #imaPri {
                position:relative;
                width: 90%;
                height: 600px;
                object-fit: cover;
                animation-name:moveDireita;
                animation-duration:1s;
                /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
            }
        }

     @keyframes moveEsquerda {
         0%{
             opacity:0;
             transform:translateX(-100px);
         }
         80%{
             transform:translateX(10px);
         }
         100%{
             opacity:1;
             transform:translate(0);
         }
     }
     @keyframes moveCima{
         0%{
             opacity:0;
             transform:translateY(100px);
         }
         80%{
             transform:translateY(-10px);
         }
         100%{
             opacity:1;
             transform:translate(0);
         }
     }
     @keyframes moveDireita{
         0%{
             opacity:0;
             transform:translateX(100px);
         }
         80%{
             transform:translateX(-10px);
         }
         100%{
             opacity:1;
             transform:translate(0);
         }
     }