/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: 'poppinsregular';
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}


@font-face {
    font-family: 'poppinsblack';
    src: url('../fonts/poppins-black-webfont.woff2') format('woff2'),
         url('../fonts/poppins-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinslight';
    src: url('../fonts/poppins-light-webfont.woff2') format('woff2'),
         url('../fonts/poppins-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ==========================================================================
   Inicio Quiz
   ========================================================================== */
#bg-quiz{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; overflow: hidden;}
#bg-quiz-textura {
  width: 10000px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide-bg 40s linear infinite alternate;
}

@keyframes slide-bg {
  from {
    left: 0;
  }
  to {
    left: -2000px; /* ajuste o valor até onde quer que o fundo vá */
  }
}


.bg-1{background: url('../img/bg-quiz-1.jpg'); background-repeat: repeat;}

#conteudo-quiz{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 999;}
#view-conteudo-quiz{width: 900px; height: 100%; position: relative; margin: auto;}

/*Box conteúdo quiz*/
#box-conteudo-quiz { width: 100%; height: 75%; position: relative; float: left; margin-top: 15%; background-color: #fff; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* sombra suave */ }
#logo-bg-topo { width: 350px; height: 400px; position: absolute; left: 50%; margin-left: -175px; top: -70px; background-color: #fff; border-radius: 50%; }
#logo-int-topo { width: 150px; height: 138px; position: absolute; left: 50%; top: 50%; margin-left: -75px; margin-top: -169px; background: url('../img/bsb-logo.png'); background-size: 150px; }

#toolbar-quiz{width: 100%; height: 60px; position: absolute; background-color: #fff; z-index: 990; border-radius: 30px 30px 0px 0px;}
#logo-bg-topo-pgs { width: 130px; height: 130px; position: absolute; left: 0px; top: -44px; background-color: #fff; border-radius: 50%; }
#logo-int-topo-pgs { width: 75px; height: 69px; position: absolute; left: 50%; top: 50%; margin-left: -39px; margin-top: -48px; background: url('../img/bsb-logo.png'); background-size: 75px; }
#n-pagina{width: 60px; height: 60px; position: absolute; right: 10px; top: 10px; background-color: #DD0613; border-radius: 50%;}
#txt-n-pagina{width: 100%; height: 20px; position: absolute; top: 50%; margin-top: -10px; text-align: center; color: #fff; font-size: 20px;}

/*paginas quiz*/
#navegacao-quiz { width: 350px; height: auto; position: absolute; left: 50%; margin-left: -175px; bottom: 30px; z-index: 99999; }
.item-cta-nav-quiz { width: 150px; height: auto; position: relative; float: left; padding: 12px 0px; font-size: 16px; color: red; text-align: center; background-color: #fff; border-radius: 40px; border: 1px solid red; cursor: pointer; margin-left: 10px; margin-right: 10px; }
.item-cta-nav-quiz:hover{color: #fff; background-color: red;}

/*.hide-btn{display: none;}*/

#pg-1{display: block;}
#pg-2{display: none;}
#pg-3{display: none;}
#pg-4{display: none;}
#pg-5{display: none;}
#pg-6{display: none;}
#navegacao-quiz {display: none;}
#toolbar-quiz{display: none;}

.pagina-quiz { width: 90%; height: 90%; position: absolute; left: 5%; top: 5%; overflow: scroll; padding-bottom: 100px; }
.rodape-pagina{width: 100%; height: 100px; position: relative; float: left;}

.box-chamada-quiz-pg-1{width: 100%; height: 300px; position: relative; float: left; top:50%; margin-top: -150px;  }
.box-chamada-quiz-pg-1 h1{width: 100%; height: auto; position: relative; float: left; font-size:38px; text-align: center; color: #000; font-weight: 600;}
.box-chamada-quiz-pg-1  p {width: 100%; height: auto; position: relative; float: left; font-size: 25px; text-align: center; color: #000; margin-top: -10px;}

#faixa-cta-inicio{width: 100%; height: auto; position: relative; float: left; margin-top: 5px;}
#cta-1{width: 300px; height: auto; position: relative; margin: auto; padding: 17px 20px 15px 20px; background-color:#E50D33; font-size:22px; color: #fff; border-radius: 50px; font-style: 16px; text-align: center; cursor: pointer;}
#cta-1:hover{background-color: #BD0B2A;}

#chamada-dados-seguros{width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 18px; color: #000; text-align: center; padding: 0px 250px;}

/*item quiz com fotos*/
.item-quiz-imagem{width: 100%; height: auto; position: relative; float: left; margin-top: 60px;}
.pergunta-quiz-imagem{width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; font-weight: 600;}

.item-resposta-quiz-imagem{width: 100%; height: auto; position: relative; float: left; margin-top: 30px;}

.sobre-resposta-quiz-imagem{width: 100%; height: auto; position: relative; float: left;}
.letra-r-quiz-imagem{width:40px; height:40px; position: relative; float: left; border-radius: 50%; background-color:#DD0613;}
.letra-int-quiz-imagem{width: 100%; height: 15px; position:absolute; top:50%; margin-top:-7.5px; font-size: 15px; color: #fff; text-align: center;}
.txt-resposta-int-quiz{width: 90%; height: auto; position: relative; float: left; margin-top: 10px; margin-left: 20px; font-size: 19px; color: #000;}

.blocos-imagens-respostas-quiz{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 100px;}
.item-imagem-quiz{width: 48%; height: 450px; position: relative; float: left; margin-left: 1%; margin-right: 1%; background-color: #dadada; border-radius: 20px; overflow: hidden;}
.item-img-int-r{width: 320px; height: 480px; position: absolute; left: 50%; top: 50%; margin-left:-160px; margin-top: -240px;}

.faixa-selecionar-resposta{width: 100%; height: auto; position: relative; float: left; margin-top: 30px;}
.cta-seleciona-resposta-int { width: 260px; height: auto; position: relative; margin: auto; padding: 15px 0px 10px 0px; text-align: center; color: #000; font-size: 18px; border-radius: 40px; cursor: pointer; border: 1px solid #000; }
.cta-seleciona-resposta-int:hover{background-color:#BE0510; color: #fff; border: 1px solid #BE0510;}

.cta-selecionado{background-color:#BE0510; color: #fff; border: 1px solid #BE0510;}


#box-frases-escolha{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}

.item-frase-escolha{width:100%; height: auto; position: relative; float: left; margin-bottom: 20px; padding: 10px 20px; background-color: #fff; border: 1px solid #dadada; border-radius: 50px; cursor: pointer;}
.letra-item-frase-escolha{width:45px; height:45px;  position: relative; float: left; margin-top: 5px; border: 1px solid #dadada; border-radius: 50%; }
.letra-int-item-frase-escolha{width: 100%; height: 20px; position: absolute; top: 50%; margin-top: -10px; text-align: center; font-size: 18px; color: #000;}
.frase-item-escolha-int{width: 90%; height: auto; position: relative; float: left; margin-left: 20px; font-size: 16px; color: #000;}

.item-frase-escolha:hover {background-color: #E50D33; color: #fff; border: 1px solid #E50D33;}
.item-frase-escolha:hover .letra-item-frase-escolha { border: 1px solid #fff;}
.item-frase-escolha:hover .letra-int-item-frase-escolha {color:#fff;}
.item-frase-escolha:hover .frase-item-escolha-int { color: #fff;}

.r-frase  {background-color: #E50D33; color: #fff; border: 1px solid #E50D33;}
.r-frase .letra-item-frase-escolha { border: 1px solid #fff;}
.r-frase .letra-int-item-frase-escolha {color:#fff;}
.r-frase .frase-item-escolha-int { color: #fff;}


#faixa-fotos-pre-respostas{width: 100%; height: 320px; position: relative; float: left; margin-top: 50px; overflow: hidden;}
.bloco-fotos-pre-resposta { width: 5500px; height: 100%; position: absolute; left: 0; animation: mover-bloco 80s linear infinite alternate; }
@keyframes mover-bloco {
  from { transform: translateX(0); }
  to { transform: translateX(-2000px); }
}
.item-foto-pre-resposta{width:150px; height: 200px; position: relative; float: left; margin-right: 10px; background-color: #dadada; border-radius: 20px; overflow: hidden;}
.item-foto-pre-resposta-int{width: 160px; height:210px; position: absolute; left: 50%; top: 50%; margin-left: -80px; margin-top: -105px;}

/*bloco formulário*/
#bloco-formulario-quiz{width: 100%; height: auto; position: relative; float: left; margin-top: -60px; padding: 0px 0px 70px 0px;}
#chamada-formulario-quiz{width: 100%; height: auto; position: relative; float: left; font-size: 28px; color: #000; text-align: center; padding: 0px 40px;}
#faixa-formulario{width: 100%; height: auto; position: relative; float: left; margin-top: 30px;}
#faixa-formulario input{width: 300px; height: auto; position: absolute; !important; text-align: center; left: 50%; margin-left: -150px; padding: 15px 20px; border: dotted 1px #000; border-radius: 50px; box-sizing: border-box;}

#faixa-resultado-cta{width: 100%; height: auto; position: relative; float: left; margin-top: 95px;}
#cta-int-formulario { width: 300px; height: auto; position: relative; margin: auto; padding: 16px 0px 14px; background-color: #DD0613; color: #fff; font-size: 22px; cursor: pointer; border-radius: 40px; text-align: center; }
#cta-int-formulario:hover{background-color:#9F040E;}
#faixa-tipografia-pre-resposta{width: 100%; height: auto; position: relative; float: left; overflow: hidden;}
.faixa-tipografia-1 { width: 6000px; height: 50px; position: relative; float: left; margin-left: 0px; font-size: 40px; color: #000; margin-bottom: -10px; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-1 90s linear infinite alternate; }
.faixa-tipografia-2 { width: 6000px; height: 50px; position: relative; float: left; margin-left: -2000px; font-size: 40px; color: #000; margin-bottom: -10px; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-2 90s linear infinite alternate; }
.faixa-tipografia-3 { width: 6000px; height: 50px; position: relative; float: left; margin-left: 0px; font-size: 40px; color: #000; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-3 90s linear infinite alternate; }

/* ANIMAÇÕES */
@keyframes anima-faixa-1 {
  from { margin-left: 0px; }
  to { margin-left: -1500px; }
}
@keyframes anima-faixa-2 {
  from { margin-left: -1500px; }
  to { margin-left: 0px; }
}
@keyframes anima-faixa-3 {
  from { margin-left: 0px; }
  to { margin-left: -1500px; }
}

#bloco-resultado{width: 100%; height: auto; position: relative; float: left; margin-top: -70px; padding-bottom: 70px; display: none;}
#chamada-resultado{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
#nome-resultado{width: 100%; height: 0px; position: relative; float: left; text-align: center; font-size: 60px; font-weight: 600; color: #DD0613;}
#titulo-resultado{width: 100%; height: auto; position: relative; float: left; margin-top: 70px; color: #DD0613; font-size: 30px; text-align: center;}
#sobre-resultado{width: 100%; height: auto; position: relative; float: left; margin-top: 30px; color: #000; font-size: 20px; text-align: center;}



@media only screen  
and (min-width:750px) 
and (max-width:1000px) {


#view-conteudo-quiz { width: 90%; height: 100%; position: relative; margin: auto; }
.frase-item-escolha-int { width: 85%; height: auto; position: relative; float: left; margin-left: 18px; margin-top: 16px; font-size: 16px; color: #000; }
.blocos-imagens-respostas-quiz { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 10px; }
#chamada-dados-seguros { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 18px; color: #000; text-align: center; padding: 0px 20px; }


}


@media only screen  
and (min-width:300px) 
and (max-width:750px) {

.item-cta-nav-quiz { width: 150px; height: auto; position: relative; float: left; padding: 12px 0px; font-size: 16px; color: red; text-align: center; background-color: #fff; border-radius: 40px; border: 1px solid red; cursor: pointer; margin-left: 20px; margin-right: -13px; }

.sobre-resposta-quiz-imagem { width: 100%; height: auto; position: relative; float: left; margin-bottom: 20px; }
#bloco-formulario-quiz { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px 70px 0px; }

#chamada-formulario-quiz { width: 100%; height: auto; position: relative; float: left; font-size: 22px; color: #000; text-align: center; padding: 0px 40px; }

#view-conteudo-quiz { width: 90%; height: 100%; position: relative; margin: auto; }
.frase-item-escolha-int { width: 85%; height: auto; position: relative; float: left; margin-left: 18px; margin-top: 16px; font-size: 16px; color: #000; }
.blocos-imagens-respostas-quiz { width: 100%; height: auto; position: relative; float: unset; margin: auto; margin-top: 20px; padding: 0px 10px; max-width: 340px; }
#chamada-dados-seguros { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 18px; color: #000; text-align: center; padding: 0px 20px; }

#box-conteudo-quiz { width: 100%; height: 85%; position: relative; float: left; margin-top: 15%; background-color: #fff; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }
.pagina-quiz { width: 90%; height: 90%; position: absolute; left: 5%; top: 5%; overflow: scroll; padding-bottom: 100px; z-index: 999; }
#faixa-fotos-pre-respostas { width: 100%; height: 120px; position: relative; float: left; margin-top: 5px; overflow: hidden; }
.item-foto-pre-resposta { width: 80px; height: 120px; position: relative; float: left; margin-right: 10px; background-color: #dadada; border-radius: 20px; overflow: hidden; }
#bloco-resultado { width: 100%; height: auto; position: relative; float: left; margin-top: -70px; padding-bottom: 11px; }
#chamada-resultado { width: 100%; height: auto; position: relative; float: left; margin-top: 93px; }
#nome-resultado { width: 100%; height: 0px; position: relative; float: left; text-align: center; font-size: 29px; font-weight: 600; color: #DD0613; }
#titulo-resultado { width: 100%; height: auto; position: relative; float: left; margin-top: 32px; color: #DD0613; font-size: 20px; text-align: center; }
#sobre-resultado { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; color: #000; font-size: 12px; text-align: center; }
.faixa-tipografia-1 { width: 6000px; height: 50px; position: relative; float: left; margin-left: 0px; font-size: 20px; color: #000; margin-bottom: -30px; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-1 90s linear infinite alternate; }
.faixa-tipografia-2 { width: 6000px; height: 50px; position: relative; float: left; margin-left: -2000px; font-size: 20px; color: #000; margin-bottom: -30px; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-2 90s linear infinite alternate; }
.faixa-tipografia-3 { width: 6000px; height: 50px; position: relative; float: left; margin-left: 0px; font-size: 20px; color: #000; text-transform: uppercase; font-family: 'poppinsblack'; animation: anima-faixa-3 90s linear infinite alternate; }

#n-pagina { width: 40px; height: 40px; position: absolute; right: 10px; top: 10px; background-color: #DD0613; border-radius: 50%; }
#txt-n-pagina { width: 100%; height: 20px; position: absolute; top: 50%; margin-top: -7px; text-align: center; color: #fff; font-size: 13px; }

.pergunta-quiz-imagem { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; font-weight: 600; }
.item-frase-escolha { width: 100%; height: auto; position: relative; float: left; margin-bottom: 11px; padding: 10px 20px 10px 20px; background-color: #fff; border: 1px solid #dadada; border-radius: 50px; cursor: pointer; }
.letra-item-frase-escolha { width: 35px; height: 35px; position: relative; float: left; margin-top: 5px; border: 1px solid #dadada; border-radius: 50%; }
.letra-int-item-frase-escolha { width: 100%; height: 20px; position: absolute; top: 50%; margin-top: -9px; text-align: center; font-size: 15px; color: #000; }
.frase-item-escolha-int { width: 77%; height: auto; position: relative; float: left; margin-left: 13px; margin-top: 6px; font-size: 13px; color: #000; }

.item-quiz-imagem { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }

.pagina-quiz { width: 90%; height: 82%; left: 5%; top: 11%; }
.item-resposta-quiz-imagem { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; margin-bottom: 20px; }
.txt-resposta-int-quiz { width: 77%; height: auto; position: relative; float: left; margin-top: 0px; margin-left: 10px; font-size: 16px; color: #000; }
.item-imagem-quiz { width: 100%; height: 450px; position: relative; float: left; margin-left: 1%; margin-right: 1%; margin-bottom: 20px; background-color: #dadada; border-radius: 20px; overflow: hidden; }
.faixa-selecionar-resposta { width: 100%; height: auto; position: relative; float: left; margin-top: 0px; }

.box-chamada-quiz-pg-1 { width: 100%; height: 300px; position: relative; float: left; top: 50%; margin-top: -90px; }
.box-chamada-quiz-pg-1 h1 { width: 100%; height: auto; position: relative; float: left; font-size: 23px; text-align: center; color: #000; font-weight: 600; }
.box-chamada-quiz-pg-1 p { width: 100%; height: auto; position: relative; float: left; font-size: 18px; text-align: center; color: #000; margin-top: -10px; }
#cta-1 { width: 240px; height: auto; position: relative; margin: auto; padding: 19px 20px 12px 20px; background-color: #E50D33; font-size: 16px; color: #fff; border-radius: 50px; text-align: center; cursor: pointer; }
#chamada-dados-seguros { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; font-size: 15px; color: #000; text-align: center; padding: 0px 20px; }

#logo-bg-topo { width: 350px; height: 400px; position: absolute; left: 50%; margin-left: -175px; top: -110px; background-color: #fff; border-radius: 50%; scale: 0.6; -ms-scale: 0.6; -o-scale: 0.6; -moz-scale: 0.6; -web-kit-scale: 0.6; }

#bloco-formulario-quiz { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; padding: 0px 0px 70px 0px; }
#chamada-formulario-quiz { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; text-align: center; padding: 0px 40px; }
#faixa-formulario { width: 100%; height: auto; position: relative; float: left; margin-top: 23px; }
#faixa-resultado-cta { width: 100%; height: auto; position: relative; float: left; margin-top: 89px; }
#cta-int-formulario { width: 250px; height: auto; position: relative; margin: auto; padding: 12px 0px 10px; background-color: #DD0613; color: #fff; font-size: 19px; cursor: pointer; border-radius: 40px; text-align: center; }

}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}