/* ======================================================
   Conteudo Responsivo
====================================================== */

body{

    margin:0;
    padding:0;
    background:#f8f9fa;

}


/* Alinhamentos vindos do TinyMCE */

.ql-align-center{
    text-align:center;
}

.ql-align-right{
    text-align:right;
}

.ql-align-justify{
    text-align:justify;
}

.ql-indent-1{
    padding-left:3em;
}

.ql-indent-2{
    padding-left:6em;
}

/* ======================================================
   area do conteudo
====================================================== */

.landing-conteudo{

    width:100%;
    overflow-wrap:break-word;
    word-break:break-word;
    margin:0;
    padding:0;
}

/* ======================================================
   Imagens
====================================================== */

.landing-conteudo img{

    max-width:100%;
    height:auto;

}

/* ======================================================
   Videos
====================================================== */

.landing-conteudo video{

    max-width:100%;
    height:auto;

}

/* ======================================================
   Iframes
====================================================== */

.landing-conteudo iframe{

    max-width:100%;
 /*   width:100%; */
    aspect-ratio:16/9;

}

/* ======================================================
   Tabelas
====================================================== */

.landing-conteudo table{

    width:100%;
    border-collapse:collapse;

}

/*
Nao usar display:block.
O TinyMCE utiliza tabelas como estrutura de layout.
*/

.landing-conteudo td,
.landing-conteudo th{

    vertical-align:top;

}

/* ======================================================
   Codigo
====================================================== */

.landing-conteudo pre{

    overflow:auto;

}

.landing-conteudo code{

    white-space:pre-wrap;

}

/* ======================================================
   SVG / Canvas
====================================================== */

.landing-conteudo svg,
.landing-conteudo canvas{

    max-width:100%;
    height:auto;

}

/* ======================================================
   Object / Embed
====================================================== */

.landing-conteudo object,
.landing-conteudo embed{

    max-width:100%;

}

/* ======================================================
   Links longos
====================================================== */

.landing-conteudo a{

    overflow-wrap:anywhere;

}


/* ======================================================
   STUDIO VIDEO
====================================================== */
.studio-video{

    margin:40px auto;

}

.studio-video-wrap{

    position:relative;

    width:100%;

    padding-top:56.25%;

}

.studio-video-wrap iframe{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    border:0;

    border-radius:10px;

}

.studio-video-placeholder{

    border:2px dashed #cfcfcf;
    background:#fafafa;

    padding:40px;

    text-align:center;

    border-radius:10px;

    cursor:pointer;

}

.studio-video-icon{

    font-size:40px;

    color:#d60000;

}

.studio-video-title{

    font-size:18px;

    font-weight:bold;

    margin-top:10px;

}

.studio-video-id{

    margin-top:8px;

    color:#777;

    font-size:12px;

    font-family:monospace;

}
/* ======================================================
   toolbar VIDEO
====================================================== */
#studio-toolbar{

    position:fixed;

    top:20px;

    right:20px;

    z-index:999999;

    background:#FFF;

    border:1px solid #CCC;

    border-radius:8px;

    padding:10px;

    display:none;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

}

#studio-toolbar button{

    margin:2px;

    padding:6px 10px;

    cursor:pointer;

}



/* ======================================================
   ESPACO LATERIAS DA TABELA
====================================================== */
@media (min-width:768px){
table tr td {padding: 0 30px;}

}
/* =======================================================
   Celulares
======================================================= */

@media (max-width:768px){

    .landing-conteudo{

        font-size:18px;
        line-height:1.7;

    }

    .landing-conteudo h1{

        font-size:36px;

    }

    .landing-conteudo h2{

        font-size:32px;

    }

    .landing-conteudo h3{

        font-size:28px;

    }

    .landing-conteudo h4{

        font-size:24px;

    }


table tr td {
    padding: 0 5%;
}



}