/*
Folha de Estilos para Ferramentas Tudo é acessibilidade e Tudo Talentos
Autor: Marcelo Sales
*/

/* CONFIG */
:root {
   --cor-execucao: #7c2480;
   --cor-influencia: #ea7406;
   --cor-relacionamento: #346db4;
   --cor-pensamento: #13945d;

   --cor-primaria: #240E20;
   --cor-secundaria: #fffef8;

   --medida-padrao: 1rem;
   --medida-1: .25rem;
   --medida-2: .5rem;
   --medida-3: 1rem;
   --medida-4: 1.5rem;
   --medida-5: 3rem;
   --medida-6: 4.5rem;
   --medida-7: 6rem;
   --medida-8: 7.5rem;
   --medida-9: 9rem;
   
   --fonte-peso-light: 300;
   --fonte-peso-regular: 400;
   --fonte-peso-medium: 500;
   --fonte-peso-semibold: 600;
   --fonte-peso-bold: 700;
   --fonte-peso-extrabold: 800;
 }

 /* ==========================================================================
   Helpers
   ========================================================================== */

.hidden { display: none !important; }
.visuallyhidden, .a11y { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus,
.a11y.focusable:active,
.a11y.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }

.clearfix::after { display: block; clear: both; content: ""; }
.img-fluid { max-width: 100%!important; height: auto!important; }

.txt-left { text-align: left!important; }
.txt-right { text-align: right!important; }
.txt-center { text-align: center!important; }
.txt-v-align-top { vertical-align: top!important; }
.txt-v-align-middle { vertical-align: middle!important; }
.txt-v-align-bottom { vertical-align: bottom!important; }
.txt-uppercase { text-transform: uppercase!important; }
.txt-lowercase { text-transform: lowercase!important; }
.txt-capitalize { text-transform: capitalize!important; }
.txt-no-transform { text-transform: none!important; }
.txt-no-bold { font-weight: normal!important; }
.txt-bold { font-weight: bold!important; }

.float-start { float: left!important; }
.float-end { float: right!important; }
.float-none { float: none!important; }
.hide { display: none; }
.block { display: block; }
.blind { height: 0; left: -999em; position: absolute; top: -999em; width: 0; }

.cursor-default { cursor: default!important; }
.cursor-pointer { cursor: pointer!important; }
.cursor-help { cursor: help!important; }
.cursor-progress { cursor: progress!important; }
.cursor-wait { cursor: wait!important; }
.cursor-move { cursor: move!important; }

.h-100 { height: 100%!important; }
.w-100 { width: 100%!important; }

/* margem */
.m-0 { margin: 0!important; }
.m-1 { margin: var(--medida-1)!important; }
.m-2 { margin: var(--medida-2)!important; }
.m-3 { margin: var(--medida-3)!important; }
.m-4 { margin: var(--medida-4)!important; }
.m-5 { margin: var(--medida-5)!important; }

.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: var(--medida-1)!important; }
.mt-2 { margin-top: var(--medida-2)!important; }
.mt-3 { margin-top: var(--medida-3)!important; }
.mt-4 { margin-top: var(--medida-4)!important; }
.mt-5 { margin-top: var(--medida-5)!important; }
.mt-6 { margin-top: var(--medida-6)!important; }
.mt-7 { margin-top: var(--medida-7)!important; }
.mt-8 { margin-top: var(--medida-8)!important; }
.mt-9 { margin-top: var(--medida-9)!important; }

.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: var(--medida-1)!important; }
.mb-2 { margin-bottom: var(--medida-2)!important; }
.mb-3 { margin-bottom: var(--medida-3)!important; }
.mb-4 { margin-bottom: var(--medida-4)!important; }
.mb-5 { margin-bottom: var(--medida-5)!important; }

.mx-auto { margin-right: auto!important; margin-left: auto!important; }
.mx-0 { margin-right: 0!important; margin-left: 0!important; }
.mx-1 { margin-right: var(--medida-1)!important; margin-left: var(--medida-1)!important; }
.mx-2 { margin-right: var(--medida-2)!important; margin-left: var(--medida-2)!important; }
.mx-3 { margin-right: var(--medida-3)!important; margin-left: var(--medida-3)!important; }
.mx-4 { margin-right: var(--medida-4)!important; margin-left: var(--medida-4)!important; }
.mx-5 { margin-right: var(--medida-5)!important; margin-left: var(--medida-5)!important; }

.my-auto { margin-top: auto!important; margin-bottom: auto!important; }
.my-0 { margin-top: 0!important; margin-bottom: 0!important; }
.my-1 { margin-top: var(--medida-1)!important; margin-bottom: var(--medida-1)!important; }
.my-2 { margin-top: var(--medida-2)!important; margin-bottom: var(--medida-2)!important; }
.my-3 { margin-top: var(--medida-3)!important; margin-bottom: var(--medida-3)!important; }
.my-4 { margin-top: var(--medida-4)!important; margin-bottom: var(--medida-4)!important; }
.my-5 { margin-top: var(--medida-5)!important; margin-bottom: var(--medida-5)!important; }

/* espaçamento */
.p-0 { padding: 0!important; }
.p-1 { padding: var(--medida-1)!important; }
.p-2 { padding: var(--medida-2)!important; }
.p-3 { padding: var(--medida-3)!important; }
.p-4 { padding: var(--medida-4)!important; }
.p-5 { padding: var(--medida-5)!important; }

.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: var(--medida-1)!important; }
.pt-2 { padding-top: var(--medida-2)!important; }
.pt-3 { padding-top: var(--medida-3)!important; }
.pt-4 { padding-top: var(--medida-4)!important; }
.pt-5 { padding-top: var(--medida-5)!important; }

.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: var(--medida-1)!important; }
.pb-2 { padding-bottom: var(--medida-2)!important; }
.pb-3 { padding-bottom: var(--medida-3)!important; }
.pb-4 { padding-bottom: var(--medida-4)!important; }
.pb-5 { padding-bottom: var(--medida-5)!important; }

.px-auto { padding-right: auto!important; padding-left: auto!important; }
.px-0 { padding-right: 0!important; padding-left: 0!important; }
.px-1 { padding-right: var(--medida-1)!important; padding-left: var(--medida-1)!important; }
.px-2 { padding-right: var(--medida-2)!important; padding-left: var(--medida-2)!important; }
.px-3 { padding-right: var(--medida-3)!important; padding-left: var(--medida-3)!important; }
.px-4 { padding-right: var(--medida-4)!important; padding-left: var(--medida-4)!important; }
.px-5 { padding-right: var(--medida-5)!important; padding-left: var(--medida-5)!important; }

.py-auto { padding-top: auto!important; padding-bottom: auto!important; }
.py-0 { padding-top: 0!important; padding-bottom: 0!important; }
.py-1 { padding-top: var(--medida-1)!important; padding-bottom: var(--medida-1)!important; }
.py-2 { padding-top: var(--medida-2)!important; padding-bottom: var(--medida-2)!important; }
.py-3 { padding-top: var(--medida-3)!important; padding-bottom: var(--medida-3)!important; }
.py-4 { padding-top: var(--medida-4)!important; padding-bottom: var(--medida-4)!important; }
.py-5 { padding-top: var(--medida-5)!important; padding-bottom: var(--medida-5)!important; }

 /* Clearfix */
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* Box Sizing */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    *behavior: url("../css/boxsizing.htc");
}

::-moz-selection { background: #333; color: #fff; text-shadow: none; }
::selection { background: #333; color: #fff; text-shadow: none; }

/* ------------- CONTAINERS ------------- */

/* grid */
.d-grid { display: grid!important; }
.container-fluid { width: 100%; margin: 0 auto; padding: 0.5rem; }
.container { max-width: calc(1440px - 3rem*2); margin: 0 auto; padding: 0.5rem 1rem; }
.row { width: 100%; margin: 2rem 0 .5rem 0; }

.grid-container {
    display: grid; grid-column-gap: 24px; grid-row-gap: 8px;
    grid-template-columns: repeat(12,minmax(0,1fr));
    padding: 0.25rem 1.5rem; margin: 0 auto;
    max-width: calc(1440px - 1.5rem*2);
}
.grid-item { padding: 1.5rem; }

.grid-container.justify-content-start { justify-content: start!important; }
.grid-container.justify-content-end { justify-content: end!important; }
.grid-container.justify-content-center { justify-content: center!important; }
.grid-container.justify-content-stretch { justify-content: stretch!important; }
.grid-container.justify-content-between { justify-content: space-between!important; }
.grid-container.justify-content-around { justify-content: space-around!important; }
.grid-container.justify-content-evenly { justify-content: space-evenly!important; }
.grid-container.align-items-start { align-items: start!important; }
.grid-container.align-items-end { align-items: end!important; }
.grid-container.align-items-center { align-items: center!important; }
.grid-container.align-items-stretch { align-items: stretch!important; }
.grid-container.align-content-start { align-content: start!important; }
.grid-container.align-content-end { align-content: end!important; }
.grid-container.align-content-center { align-content: center!important; }
.grid-container.align-content-stretch { align-content: stretch!important; }
.grid-container.align-content-between { align-content: space-between!important; }
.grid-container.align-content-around { align-content: space-around!important; }
.grid-container.align-content-stretch { align-content: stretch!important; }
.grid-container.align-self-start { align-self: start!important; }
.grid-container.align-self-end { align-self: end!important; }
.grid-container.align-self-center { align-self: center!important; }
.grid-container.align-self-stretch { align-self: stretch!important; }

.large-span-0 { grid-column:span 0; }
.large-span-1 { grid-column:span 1; }
.large-span-2 { grid-column:span 2; }
.large-span-3 { grid-column:span 3; }
.large-span-4 { grid-column:span 4; }
.large-span-5 { grid-column:span 5; }
.large-span-6 { grid-column:span 6; }
.large-span-7 { grid-column:span 7; }
.large-span-8 { grid-column:span 8; }
.large-span-9 { grid-column:span 9; }
.large-span-10 { grid-column:span 10; }
.large-span-11 { grid-column:span 11; }
.large-span-12 { grid-column:span 12; }
/* medium-span e small-span localizados em Media Queries */

/* flex  */
.d-flex { display: flex!important; }
.d-inline-flex { display: inline-flex!important; }
.flex-row { flex-direction: row!important; }
.flex-row-reverse { flex-direction: row-reverse!important; }
.flex-column { flex-direction: column!important; }
.flex-column-reverse { flex-direction: column-reverse!important; }
.flex-fill { flex: 1 1 auto!important; }
.flex-nowrap { flex-wrap: nowrap!important; }
.flex-wrap { flex-wrap: wrap!important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse!important; }
.justify-content-start { justify-content: flex-start!important; }
.justify-content-end { justify-content: flex-end!important; }
.justify-content-center { justify-content: center!important; }
.justify-content-between { justify-content: space-between!important; }
.justify-content-around { justify-content: space-around!important; }
.justify-content-evenly { justify-content: space-evenly!important; }
.align-items-start { align-items: flex-start!important; }
.align-items-end { align-items: flex-end!important; }
.align-items-center { align-items: center!important; }
.align-items-baseline { align-items: baseline!important; }
.align-items-stretch { align-items: stretch!important; }
.align-content-start { align-content: flex-start!important; }
.align-content-end { align-content: flex-end!important; }
.align-content-center { align-content: center!important; }
.align-content-between { align-content: space-between!important; }
.align-content-around { align-content: space-around!important; }
.align-content-stretch { align-content: stretch!important; }
.align-self-start { align-self: flex-start!important; }
.align-self-end { align-self: flex-end!important; }
.align-self-center { align-self: center!important; }
.align-self-baseline { align-self: baseline!important; }
.align-self-stretch { align-self: stretch!important; }

/* ==========================================================================
   Base
   ========================================================================== */

html { color: #464646; font-size: .900rem; line-height: 1.4; }
body { font-family: Open Sans, Arial, sans-serif; color: #464646; background: #fffef8; background: linear-gradient(180deg, rgba(255,254,248,1) 0%, rgba(255,242,233,1) 100%); margin: 0; }
.font-rennie-beanie { font-family: "Reenie Beanie", cursive; }

h1 { font-size: 3em; margin: .3em 0 0 0; }
h2 { font-size: 2.2em; margin: .5em 0; }
h3 { font-size: 1.5em; margin: 1.5em 0 0 0; }
h4 { font-size: 1.2em; margin: 1em 0 0 0; }

p { margin: 0 0 .1em 0; font-size: 1.3rem; }
.mini { font-size: .9em; }

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

audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }

a { color: #cc3568; text-decoration: underline; outline: 2px solid transparent; outline-offset: .5rem; transition: outline-offset .2s linear; }
a:hover { color: #333; text-decoration: none!important; outline: .125rem solid #cc3568; outline-offset: .250rem; }
a:focus { color: #333; text-decoration: underline!important; outline: .250rem dashed #346db4; outline-offset: .250rem; }

a.btn { border: 1px solid #cc3568; background-color: #ffe6ec; border-radius: 6px; color: #cc3568; text-decoration: none; padding: 8px; transition: all 200ms linear; }
a.btn:hover { background-color: #cc3568; color: #fff; }

a.btn-download, .btn-download {
   text-align: center; font-weight: 700; font-size: 1.6rem; text-decoration: none;
   padding: .75rem 2.5rem; border: 4px solid var(--cor-primaria); border-radius: 50px; cursor: default;
   color: var(--cor-secundaria); background: linear-gradient(-90deg, #F37055 0%, #eb6789 25%, #A166AB 45%, #5073B8 75%, #399ad5 100%);
   background-size: 600% 600%; animation: btn-gradient 4s ease infinite;
   outline: .1rem dashed var(--cor-primaria); outline-offset: .25rem; box-shadow: none;
}
a.btn-download:hover, .btn-download:hover, a.btn-download:focus, .btn-download:focus {
   color: var(--cor-secundaria); text-decoration: underline!important; background: var(--cor-primaria); outline: 2px dashed var(--cor-primaria); outline-offset: .5rem; transition: outline-offset .2s linear;
}
@keyframes btn-gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }

ul { margin: 0; }
strong { font-weight: 700; }

code { font-family: monospace; font-size: 1rem; padding: .2rem .5rem; margin: 0 0.3rem; white-space: nowrap; color: #ffe6ec; background-color: #333; border-radius: 6px; }

.importante { margin: 20px 0 10px 0; font-size: 1.2rem; }
ul.instrucoes li { margin: 0 0 5px 0; }

/* HEADER */
.bg-topo { height: 110px; width: 100%; background-color: #240E20; padding: 10px 0 0 0; }
.bg { height: 55px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23240E20"><path d="M0 0v100S0 4 500 4s500 96 500 96V0H0Z"></path></svg>'); background-size: cover; }

.tit-tool { color: #ffe6ec; font-size: 2rem; margin: 35px 0 0 0; text-shadow: 1px 1px 1px #240E20; }

/* FOOTER */
footer { padding: 2rem 3rem!important; }
footer p { color: #333; margin-bottom: 0; font-size: 1.1rem!important; line-height: 1.4rem!important; margin-bottom: 1.2rem!important; }

footer a,
footer a:hover, footer a:focus { color: #333; }
footer a.logo { color: var(--cor-link-primaria); text-decoration: none; border-bottom: none; padding: 0; outline: 2px solid transparent; outline-offset: .5rem; transition: outline-offset .2s linear; }
footer a.logo:hover { color: transparent; background-color: transparent; padding: 0; cursor: pointer; }
footer a.logo:focus { color: transparent; background-color: transparent; padding: 0; outline: .125rem dashed #333; outline-offset: .450rem; }

.bg-rodape, .bg-degrade { background-color: #240E20; }
.bg-degrade { background: linear-gradient(90deg, rgb(255, 213, 77) 0%, rgb(255, 173, 89) 100%); }

footer.fixo { margin-top: 3rem; position: fixed; bottom: 0; width: 100%; }

/* Orientações */
ol.orientacao { margin-bottom: 0; }
ol.orientacao li { font-size: 1.2rem; }

/* Instruções */
summary { display: list-item; cursor: pointer; }
.detalhe-oculto { text-decoration: underline; padding: 1.2rem; }
.detalhe-oculto:hover,
.detalhe-oculto:focus { color: #240E20; }
.detalhe-oculto[open] { text-decoration: none; border: none; }
.detalhe-oculto[open]:hover,
.detalhe-oculto[open]:focus { background-color: transparent; }
.detalhe-oculto > summary { font-weight: 700; font-size: 1.2rem; }
.detalhe-oculto > summary::marker { font-size: 1.4rem; }

.nota-destaque { background: rgba(254, 239, 240, .7); border-radius: 1rem; margin: .5rem -2rem 1rem -2rem!important; padding: 1rem 2rem!important; font-size: 1.2rem; line-height: 1.7rem; }
.nota-destaque ul li, .nota-destaque ol li { margin-bottom: 0.6rem!important; }

/* Imagens Ferramentas */
.borda-img-ferramenta { border: 1rem solid #fff; border-radius: .3rem; }
.img-rotate { transform: rotateZ(3deg); }
.img-rotate-inverse { transform: rotateZ(-3deg); }
.img-sombra { box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.2) }

/* Ajustes para conteúdo GERAL */
#geral p { font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 1rem; }
#geral .destaque-lista { font-size: 1.8rem; line-height: 2.2rem; }
#geral .destaque-lista li { margin-bottom: .8rem; }

#geral h2, #geral h3, #geral h4 { color: var(--cor-primaria); }

#geral .download { margin: 1rem; padding: 3rem 1rem; border-left: 15px solid var(--cor-primaria); background-color: rgba(37, 14, 33, 0.1); color: var(--cor-texto-destaque); }


/* ==========================================================================
   Cards
   ========================================================================== */

/* Card Animation */
.cards-all { padding-left: 0!important; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;  align-items: center; }
.cards-all li { list-style: none; margin: 20px auto; }
.card { width: 320px; float: left; margin: 10px 6px 10px 0; font-family: Arial, sans-serif; color: #464646; background: #fff; }

.flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000; transition: outline-offset .2s linear; }
.flip-container:hover .flipper,  
.flip-container.hover .flipper,
.flip-container:focus .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }

.flip-container:focus { z-index:1100; outline: .250rem dashed #346db4; outline-offset: .200rem; }

.flip-container,
.front,
.back { width: 320px; height: 427px; margin: 0 auto; }
.flipper { -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; }

.front,
.back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; }
.front { z-index: 2; }

/* Card Config */
.card-background { background: url(../img/bg-cartas.svg) 0 0 no-repeat; background-size: cover; }
.front .tag { font-size: 1.5em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 40px; left: 12%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333;
  -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); }
.back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); border: 1px dashed #464646; border-radius: 35px; font-size: .8em; background-color: #fff; }
.back .card-grupo { text-align: center; font-size: 1rem; background: #ececec; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; margin: 0 40px 10px 40px; padding: .2rem; }

.back h2 { background-color: #464646; color: #fff; border-radius: 30px; margin: 0 20px; font-weight: bold; text-align: center; font-size: 1.6em; margin: 7px 20px 0 20px; }
.back h3 { background-color: #464646; color: #fff; padding: 2px 20px; margin: 0; text-align: center; font-weight: bold; font-size: 1.3em; }

.card-relacionamento .back h2 { background-color: var(--cor-relacionamento); }
.card-relacionamento .back h3 { background-color: var(--cor-relacionamento); }
.card-pensamento .back h2 { background-color: var(--cor-pensamento); }
.card-pensamento .back h3 { background-color: var(--cor-pensamento); }
.card-influencia .back h2 { background-color: var(--cor-influencia); }
.card-influencia .back h3 { background-color: var(--cor-influencia); }
.card-execucao .back h2 { background-color: var(--cor-execucao); }
.card-execucao .back h3 { background-color: var(--cor-execucao); }

.back p { font-size: .9rem; padding: 10px 20px }
.back ul.card-content { margin: 10px 10px; padding: 0 0 0 20px; }
.back ul.card-content li { list-style: disc; margin: 0; font-size: .9rem; }

a.btn { padding: 8px 8px 8px 2px; }
a.btn.on { background-color: #cc3568; color: #fff; text-decoration: none; }

.btn-fix { text-align: center; margin-top: 20px; }
.btn-fix .link i.fa-li { cursor: pointer; position: inherit!important; }
.btn-fix .link i.fa-li:before { content:"\f096"; }
.btn-fix .link.on i.fa-li:before { content:"\f046"; }

.flip-container:hover .flipper,
.flip-container.hover .flipper,
.flip-container.flip .flipper { transform: rotateY(180deg); }

/* ==========================================================================
   Grid
   ========================================================================== */

div.container,
section.container { width: 1370px; margin: 0px auto; }

/* ==========================================================================
   Media Queries
   ========================================================================== */


@media (min-width: 1099px) and (max-width: 1369px) {

   div.container,
   section.container { width: 90%; margin: 0px auto; }

   .container { max-width: calc(1160px - 1.5rem*2); }

   .grid-container { grid-column-gap: 16px; }

   .container-closed .medium-span-0 { grid-column:span 0; }
   .container-closed .medium-span-1 { grid-column:span 1; }
   .container-closed .medium-span-2 { grid-column:span 2; }
   .container-closed .medium-span-3 { grid-column:span 3; }
   .container-closed .medium-span-4 { grid-column:span 4; }
   .container-closed .medium-span-5 { grid-column:span 5; }
   .container-closed .medium-span-6 { grid-column:span 6; }
   .container-closed .medium-span-7 { grid-column:span 7; }
   .container-closed .medium-span-8 { grid-column:span 8; }
   .container-closed .medium-span-9 { grid-column:span 9; }
   .container-closed .medium-span-10 { grid-column:span 10; }
   .container-closed .medium-span-11 { grid-column:span 11; }
   .container-closed .medium-span-12 { grid-column:span 12; }

   .cards-all li { list-style: none; width: 30%; }
   .back ul.card-content li { width: 100%; }

   .btn-fix { text-align: center; width: 320px; margin: 20px auto 0 auto; }
}


@media (min-width: 750px) and (max-width: 1098px) {

   .no-mobile { display: none!important; }

   div.container,
   section.container { width: 95%; margin: 0px auto; }

   .container { max-width: calc(962px - 1.5rem*2); }
   .grid-container { grid-column-gap: 16px; padding: 0.5rem 1.5rem; margin: 0 auto; }

   .medium-span-0 { grid-column:span 0; }
   .medium-span-1 { grid-column:span 1; }
   .medium-span-2 { grid-column:span 2; }
   .medium-span-3 { grid-column:span 3; }
   .medium-span-4 { grid-column:span 4; }
   .medium-span-5 { grid-column:span 5; }
   .medium-span-6 { grid-column:span 6; }
   .medium-span-7 { grid-column:span 7; }
   .medium-span-8 { grid-column:span 8; }
   .medium-span-9 { grid-column:span 9; }
   .medium-span-10 { grid-column:span 10; }
   .medium-span-11 { grid-column:span 11; }
   .medium-span-12 { grid-column:span 12; }

   .cards-all li { list-style: none; width: 50%; }
   .back ul.card-content li { width: 100%; }

   a.btn-download, .btn-download {
      font-size: 1.3rem; 
   }
}

@media (max-width: 749px) {

   .no-mobile { display: none!important; }

   div.container,
   section.container { width: 97%; margin: 0px auto; }

   .container { max-width: calc(542px - 1rem*2); }
    .grid-container { padding: 0.5rem 1rem; margin: 0 auto; }
    .grid-item { padding: .5rem; }
    .grid-item p { font-size: 1.2rem; margin-bottom: 1.2rem; }

    .small-span-0 { grid-column:span 0; }
    .small-span-1 { grid-column:span 1; }
    .small-span-2 { grid-column:span 2; }
    .small-span-3 { grid-column:span 3; }
    .small-span-4 { grid-column:span 4; }
    .small-span-5 { grid-column:span 5; }
    .small-span-6 { grid-column:span 6; }
    .small-span-7 { grid-column:span 7; }
    .small-span-8 { grid-column:span 8; }
    .small-span-9 { grid-column:span 9; }
    .small-span-10 { grid-column:span 10; }
    .small-span-11 { grid-column:span 11; }
    .small-span-12 { grid-column:span 12; }
   
   .cards-all li { list-style: none; width: 80%; }
   .back ul.card-content li { width: 100%; }

   a.btn-download, .btn-download {
      font-size: 1.1rem; 
   }

   .logo { width: 120px; }
   .tit-tool { font-size: 1.5rem; }
   }

/*
@media only screen and (min-width: 1310px) {
    div.container,
    section.container { width: 1310px; margin: 0px auto; }
}

@media only screen and (max-width: 990px) {
   div.container,
   section.container { width: 80%; margin: 0px auto; }
}

@media only screen and (max-width: 576px) {
   div.container,
   section.container { width: 400px; margin: 0px auto; }
}
   */

/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; 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) ")"; }
    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }

    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }

    .flipper {
      -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s;
      -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
      position: relative; transform: rotateY(180deg); }
    .btn-fix { display: none; }
}