img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: center; background-color: #f4f4f4; margin: 0 auto; padding: 0; }#assessmentReport { max-width: 1200px; display: block; margin: 0 auto; background-color: none;}body, .cover h1 em { color: #403d39; }body > div { width: 100%; min-height: 790px; margin: 0; position: relative; overflow: hidden; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote, .cover .grid > div:nth-of-type(3) { text-align: left; }a { text-decoration: none; color: #428fcc; }a:hover { text-decoration: underline; }.mid { align-items: center; align-self: center; }.grid { display: grid; }.grid.half { grid-template-columns: repeat(2,1fr); }.grid.third { grid-template-columns: repeat(3,1fr); }.grid.fourth { grid-template-columns: repeat(4,1fr); }.cover, .about, .start { height: 790px; }.cover, .cover h2, .start .grid, .action h4, .summary .pie, .summary h4, .graph { position: relative; }.cover { background-size: cover; background-position: center; }.cover { background-image: url(/assessment/images/bg-main.jpg); }.cover .grid { padding-top: 40px; }.cover .grid > div:nth-of-type(1), .cover h2, .start .grid.third p, .summary h2, .score h3, .summary h4, .action h2, .action h4, .graph li { color: #fff; }.cover .grid > div:nth-of-type(1) { background-color: rgba(42,113,175,.9); padding-left: 40px; }.cover .grid > div:nth-of-type(3) img { max-width: 300px; }.cover h1, .cover h2 span, .start .grid.third h2, .start .grid.third h3, .summary h2, .score h3, .summary h4, .action h2, .action h4, .action h3 { text-transform: uppercase; }.cover h1, .cover h2 span, .start .grid.third h3 { font-weight: 600; }.cover h1 { font-size: 36px; line-height: 1.2; letter-spacing: 1px; }.cover h1 em, .cover h2 span, .start .grid.third h2 span, .action h4 span { display: block; }.cover h1 em { font-style: normal; letter-spacing: 10px; }.cover h1 span { letter-spacing: 4px; }.cover h2 { font-size: 16px; font-weight: 400; text-align: right; top: 40%; transform: translateY(-40%); right: 150px; }.cover h2 span { font-size: 18px; }.about .grid > div:last-of-type, .start .grid:last-of-type > div:last-of-type { padding: 20px 40px; }.about img, .start .bg { display: block; object-fit: cover; width: 100%; height: 350px; }.about img { height: 790px; }.start .grid { top: -48px; }.start .grid.third { padding: 0 150px 20px; background-image: linear-gradient(transparent 20%,#434748 20%); }.start .grid.third h2, .start .grid.third h3, .start .grid.third p, .score h3, .summary h2, .action h2, .action h4 { text-align: center; margin: 0; }.start .grid.third h2 { display: inline-block; width: 72px; line-height: 1; background-color: #fff; color: #434748; padding: 20px; border: 8px solid #428fcc; border-radius: 100%; }.start .grid.third h2 span { font-size: 50px; }.start .grid.third h3 { font-size: 18px; color: #428fcc; padding-top: 0px; }.start .grid:last-of-type { grid-template-columns: 300px 1fr; }.start .grid:last-of-type img { display: block; object-fit: cover; object-position: top; width: 100%; height: 290px; }.summary h2, .action h2, .score h3, .summary h4 { line-height: 1.3; background-color: #434748; }.summary h2, .action h2, .score h3 { padding: 10px; }.summary h2, .action h2 { font-size: 28px; padding: 15px; }.summary .grid, .action .grid { grid-gap: 5px; padding: 10px 10px 20px; }.action .grid > div, .score { border: 3px solid #434748; }.summary .grid > div p, .action .grid > div p { padding: 0 10px; }.summary .grid > div:first-of-type, .action .grid > div:first-of-type { padding-right: 40px; }.summary .grid > div:first-of-type p, .action .grid > div:first-of-type p { padding: 0 20px 0 0; margin-bottom: 40px; }.summary .grid > div:nth-of-type(1) { grid-row: span 4; border: none; }.action .grid > div:nth-of-type(1) { grid-row: span 10; border: none; }.action .grid > div:nth-of-type(2) { grid-column: span 2; border: none; }.action h3 { font-size: 24px; margin: 0; padding: 10px 0 5px; }.action h4 { font-size: 18px; line-height: 1.2; background-color: #fcc343; margin: 0; padding: 10px 10px 10px 50px; }.action h4 svg, .logo { position: absolute; }.action h4 svg { top: 0; left: 0; }.action h4 span { font-size: 16px; font-weight: 400; }.important h4 { background-color: #ec9241; }.critical h4 { background-color: #d2403f; }.action:last-of-type .grid { margin-bottom: 50px; }.logo { max-width: 75px; left: 10px; bottom: 10px; z-index: 1000; display: none; }.score { margin: 20px 0 40px; }.score svg, .summary .pie { display: flex; flex-flow: row nowrap; justify-content: space-around; }.score svg { width: 50%; margin: 40px auto; }.summary .pie { width: 25%; margin-top: 20px; z-index: 888; }.summary .pie, .summary h4 { display: inline-block; vertical-align: middle; }.summary h4 { width: 60%; padding: 5px 0 5px 20px; top: 10px; left: -10px; z-index: 777; }.circle-bg { fill: none; stroke: #eee; stroke-width: 4; }.circle { fill: none; stroke: #d2403f; stroke-width: 4; stroke-linecap: butt; animation: progress 1s ease-out forwards; }.percentage { fill: #403d39; font-size: 0.5em; font-weight: 600; text-anchor: middle; }.score h3 { font-size: 20px; }.graph { width: 350px; margin: 5px; padding: 10px 0 0 0; border-left: 3px solid #434748; border-bottom: 3px solid #434748; }.graph li { max-width: calc(100% - 40px); list-style-type: none; margin: 5px; }.graph li span { color: #434748; }.graph:after { content: "▶"; font-size: 18px; color: #434748; position: absolute; right: -5px; bottom: -14px; }.cover, .about, .start, .summary, .action { page-break-after: always; page-break-inside: avoid; margin: 50px auto; box-shadow: #403d39 0 0 5px; background-color: #fff; border: 1px solid #eee; position: relative; z-index: -1; }.area { display: none; page-break-inside: avoid;}@page { size: A4 landscape; margin: 0;}@media print { .cover, .about, .start, .summary, .action { page-break-after: always; page-break-inside: avoid; margin: 0; box-shadow: none; border: none; } body { background-color: #fff; }}