:root{
    --paso1:#991717;
    --paso2:#BF7200;
    --paso3:#A69B00;
    --paso4:#004680;
    --paso5:#4784B5;
    --modo-covid:#001C41;
    --paso1-bg: #F75C5C;
    --paso2-bg: #FFBF00;
    --paso3-bg: #FFF200 ;
    --paso4-bg: #338AD1 ;
    --paso5-bg: #A7D1F2;
    --modo-covid-bg: #092C5A;
    --degradado1:#FFE2E2;
    --degradado2:#FFE9A8;
    --degradado3:#FFFAA0;
    --degradado4:#99CEF8;
    --degradado5:#D8EEFF;
    --degradadocomun:#C7EDA780;
    --degradadocomunFont:#4A9B07;
}
@font-face{
    font-family:'BreeBold';
    src: url('https://cdn.digital.gob.cl/public_files/fonts/Bree/Bree-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
.container-fluid{
    max-width: 1400px;
}
a.navbar-brand-menu{
    display:none;
}
div.panel p {
    line-height: 24px;
    font-size: 16px;
}
.bgimg-pasoapaso{
    background: url(https://cdn.digital.gob.cl/public_files/Campa%C3%B1as/Corona-Virus/Iconos/Plan-de-Desconfinamiento/banner-hero.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}
.bg-pasoapaso{
    background-color: #0c3966;
}
.tdescarga{
    border: 2px solid #006cff;
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.tdescarga:before {
    font-family: fontawesome;
    content: '\f56d';
    color: #ffffff;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    background-color: #006cff;
    width: 60px;
    margin-right: 10px;
    padding: 5px 10px;
}
.tdescarga a {
    color: #006cff;
}
.tdescarga a:hover {
    color: #070e37;
}
img.icn-planaccion {
    width: 40px;
    vertical-align: middle;
    margin: 0 10px 0 0;
    position: absolute;
    left: 20px;
}
.text-lightblue{
    color: #128ec5;
}
.nav-pills .nav-link {
    border-radius: 0;
    font-size: 20px;
    padding: 15px 10px 15px 70px;
}
.nav-pills a {
    color: #0f1955;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #0f1955;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(239,245,253,1) 100%);
    border-left: 5px solid #0e1855;
}
.nav-pills .nav-link:hover{
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(239,245,253,1) 100%);
}
.jumbotron{
    margin-bottom:0;
}
div.panel{
    padding:0;
    margin: .5rem 0;
}
.panel-child {
    padding: 20px;    
    width: 100%;
}
.card{
    background-color: white;
}
.card-link {
    background-color: #007bff;
    display: block;
    padding: 10px;
    color: white;
    text-align: center;
}
a.card-link:hover{
    color: #fbf7f7;
    background-color: #2987ec;
}
iframe {
    border: 3px solid white;
}
.btn-etapa1 {
    color:#0e1759;
    background-color: #f75b5b;
    border-color: #f75b5b;
}
.btn-etapa2 {
    color:#0e1759;
    background-color: #ffc000;
    border-color: #ffc000;
}
.btn-etapa3 {
    color:#0e1759;
    background-color: #fef301;
    border-color: #fef301;
}
.btn-etapa4 {
    color:#0e1759;
    background-color: #338ad1;
    border-color: #338ad1;
}
.btn-etapa5 {
    color:#0e1759;
    background-color: #a7d1f2;
    border-color: #a7d1f2;
}
span.h4{
    font-family: 'BreeBold';
    font-size: 26px;
}
.h2{
    font-family: 'BreeBold';
}
/* Estilo de los acordiones */
button.accordion {
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 1s;
    position: relative;
    margin-bottom: 5px;
    padding: 0;
}
.children {
    display: grid !important;
    grid-template-columns: 10% 90%;
    justify-content: flex-start;
    align-items: center;
    min-height: 80px;
}
.paso {
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
}
span.numero {
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: -15px;
}   
/* Accordion tittle  */
h3.accordion-title{
    font-size: 1.75rem;
    font-weight: 700;
    padding-left: 20px;
}
.title-paso2 {
    color: var(--paso2);
}
.title-paso3 {
    color: var(--paso3);
}
.title-paso4 {
    color: var(--paso4);
}
.title-paso5 {
    color: var(--paso5);
}
.paso1 {
    background-color: var(--paso1);
}
/* Accordion backgroundColor  */
button.accordion.paso1-bg {
    background-color: var(--paso1-bg);
    color: white;
}
.paso2 {
    background-color: var(--paso2);
}
button.accordion.paso2-bg {
    background-color: var(--paso2-bg);
    color: white;
}
.paso3 {
    background-color: var(--paso3);
}
button.accordion.paso3-bg {
    background-color: var(--paso3-bg);
    color: white;
}
.paso4 {
    background-color: var(--paso4);
}
button.accordion.paso4-bg {
    background-color: var(--paso4-bg);
    color: white;
}
.paso5 {
    background-color: var(--paso5);
}
button.accordion.paso5-bg {
    background-color: var(--paso5-bg);
    color: white;
}
.modo-covid {
    background-color: var(--modo-covid);
    font-size: 3.5rem;
}
.modo-covid2 {
    background-color:rgb(112, 25, 25);
    font-size: 3.5rem;
}
.modo-covid-bg {
    background-color: var(--modo-covid-bg);
    color: white;
}
.modo-covid-bg2 {
    background-color: rgb(158, 37, 37);
    color: white;
}
/* Panel backgroundColor */
.bg-gradient-1{
    color: var(--paso1);
    background: rgba(255,226,226,1);
    background: -moz-linear-gradient(top, rgba(255,226,226,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,226,226,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,226,226,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,226,226,1) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,226,226,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,226,226,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2e2', endColorstr='#ffffff', GradientType=0 );
    padding: 20px 0;
}
.bg-gradient-2{
    color: var(--paso2);
    background: rgba(255,233,168,1);
    background: -moz-linear-gradient(top, rgba(255,233,168,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,233,168,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,233,168,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,233,168,1) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,233,168,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,233,168,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe9a8', endColorstr='#ffffff', GradientType=0 );
    padding: 20px 0;
}
.bg-gradient-3{
    color: var(--paso3);
    background: rgba(255,250,160,1);
    background: -moz-linear-gradient(top, rgba(255,250,160,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,250,160,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,250,160,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,250,160,1) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,250,160,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,250,160,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffaa0', endColorstr='#ffffff', GradientType=0 );
    padding: 20px 0;
}
.bg-gradient-4{
    color: var(--paso4);
    background: rgba(153,206,248,1);
    background: -moz-linear-gradient(top, rgba(153,206,248,1) 0%, rgba(184,224,255,1) 42%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(153,206,248,1)), color-stop(42%, rgba(184,224,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(153,206,248,1) 0%, rgba(184,224,255,1) 42%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(153,206,248,1) 0%, rgba(184,224,255,1) 42%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(153,206,248,1) 0%, rgba(184,224,255,1) 42%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(153,206,248,1) 0%, rgba(184,224,255,1) 42%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cef8', endColorstr='#ffffff', GradientType=0 );
    padding: 20px 0;
}
.bg-gradient-5{
    color: var(--paso5);
    background: rgba(216,238,255,1);
    background: -moz-linear-gradient(top, rgba(216,238,255,1) 0%, rgba(250,250,250,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(216,238,255,1)), color-stop(100%, rgba(250,250,250,1)));
    background: -webkit-linear-gradient(top, rgba(216,238,255,1) 0%, rgba(250,250,250,1) 100%);
    background: -o-linear-gradient(top, rgba(216,238,255,1) 0%, rgba(250,250,250,1) 100%);
    background: -ms-linear-gradient(top, rgba(216,238,255,1) 0%, rgba(250,250,250,1) 100%);
    background: linear-gradient(to bottom, rgba(216,238,255,1) 0%, rgba(250,250,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8eeff', endColorstr='#fafafa', GradientType=0 );
    padding: 20px 0;
}
.degradado-comun{
    color: var(--paso5);
    background: rgba(227,246,212,1);
    background: -moz-linear-gradient(top, rgba(227,246,212,1) 0%, rgba(250,250,250,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,246,212,1)), color-stop(100%, rgba(250,250,250,1)));
    background: -webkit-linear-gradient(top, rgba(227,246,212,1) 0%, rgba(250,250,250,1) 100%);
    background: -o-linear-gradient(top, rgba(227,246,212,1) 0%, rgba(250,250,250,1) 100%);
    background: -ms-linear-gradient(top, rgba(227,246,212,1) 0%, rgba(250,250,250,1) 100%);
    background: linear-gradient(to bottom, rgba(227,246,212,1) 0%, rgba(250,250,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3f6d4', endColorstr='#fafafa', GradientType=0 );
    padding: 20px 0;
}

h4.title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px 10px;
}
/* Color Font Paragraph */
.bg-gradient-1 > .row p {
    color: var(--paso1);
}
.bg-gradient-2 > .row p {
    color: var(--paso2);
}
.bg-gradient-3 > .row p {
    color: var(--paso3);
}
.bg-gradient-4 > .row p {
    color: var(--paso4);
}
.bg-gradient-5 > .row p {
    color: var(--paso5);
}
.degradado-comun > h4.title {
    color: var(--degradadocomunFont);
}

.card1{
    background-color: inherit;
    padding: 10px;
}
ul li{
    font-size: 16px;
}

@media (min-width: 1200px){
    .modal-xl {
        max-width: 1140px;
    }
}
@media (max-width: 992px) {
    .submenu {
        display: grid !important;
        grid-template-columns: auto auto auto;
        transition: 1s all ease-in-out;
    }
    .nav-pills .nav-link{
        font-size:16px;
        padding: 15px 15px 15px 44px;
    }
    img.icn-planaccion {
        width: 30px;
        margin: 0 10px 0 0;
        left: 10px;
    }
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
        border-left:0;
        border-bottom: 5px solid #0e1855;
    }
    .nav.submenu {
        background: white !important;
        width: 100%;
    }
    .secondary-nav > .navbar-toggler{
        font-size: 2rem;
    }
    .secondary-nav{
        z-index:1;
    }
    a.navbar-brand-menu{
        font-size: 20px;
        font-weight: bold;
        background-color: #f2f6fd;
        display: block;
        padding: 10px 20px;
        border-radius: 0 0 10px 10px;
        margin-bottom: 5px;
    }
    .first-column:before{
    font-size:2rem;
    }
    .bgimg-pasoapaso{
        background: none;
    }
}
@media (max-width: 500px) {
    .logo-img {
        width: 140px;
    }
    .submenu {
        display: grid;
        grid-template-columns: 50% 50%;
        transition: 1s all ease-in-out;
    }
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
        border-left:0;
        border-bottom: 3px solid #0e1855;
    }
    .nav-pills .nav-link {
        font-size: 14px;
        transition: 1s all ease; 
    }
    .logo-covid {
        width: 100px;
    }
    .children {
    grid-template-columns: 20% 80% !important;
    }
    h3.accordion-title {
    font-size: 1.5rem;
    }
    h3{
        font-size:1rem;
    }
    .modo-covid {
        font-size: 2.5rem;
    }
}