/*---------------------estilos de color tema---------------------------*/
:root{
/*----------agrege el color primario-------------*/
    --primary:#0039cb;
    --primary-light:#00b0ff;
    --primary-dark:#002171;
    /*----------agrege el color secundario-------------*/
    --second:#d50000;
    --second-light:#ff5131;
    --second-dark:#9b0000;
    /*----------agrege el color terciario-------------*/
    --third:#ffea00;
    --third-light:#ffff56;
    --third-dark:#ffd600;
    /*----------agrege el color terciario-------------*/
    --fourth:#212121;
    --fourth-light:#484848;
    --fourth-dark:#000000;      
}
/*---------------------reset estilos-----------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
}
.rounded{
    border-radius: 5px;
}
.mx-auto{
    margin: 0 auto;
}   
.w-100{
    width: 100%;
}
.scrollY{
    overflow-y: scroll;
}
.scrollX{
    overflow-x: scroll;
}
.p10{
    padding: 10px;
}

/*---------------color clases----------------------*/
.cPrimary{
    color: var(--primary);
}
.cPrimaryLight{
    color: var(--primary-light);
}
.cPrimaryDark{
    color: var(--primary-dark);
}
.cSecond{
    color: var(--second);
}
.cSecondLight{
    color: var(--second-light);
}
.cSecondDark{
    color: var(--second-dark);
}
.cThird{
    color: var(--third);
}
.cThirdLight{
    color: var(--third-light);
}
.cThirdDark{
    color: var(--third-dark);
}
.cFourth{
    color: var(--fourth);
}
.cFourthLight{
    color: var(--fourth-light);
}
.cFourthDark{
    color: var(--fourth-dark);
}

/*---------------color de fondo----------------------*/
.bgPrimary{
    background-color: var(--primary);
}
.bgPrimaryLight{
    background-color: var(--primary-light);
}
.bgPrimaryDark{
    background-color: var(--primary-dark);
}
.bgSecond{
    background-color: var(--second);
}
.bgSecondLight{
    background-color: var(--second-light);
}
.bgSecondDark{
    background-color: var(--second-dark);
}
.bgThird{
    background-color: var(--third);
}
.bgThirdLight{
    background-color: var(--third-light);
}
.bgThirdDark{
    background-color: var(--third-dark);
}
.bgFourth{
    background-color: var(--fourth);
}
.bgFourthLight{
    background-color: var(--fourth-light);
}
.bgFourthDark{
    background-color: var(--fourth-dark);
}
/*----------agrege furntes-------------*/       
.sanSerif {
    font-family: sans-serif;
}
.serif {
    font-family:serif; 
}
.titlePlane{
    font-size:23px;
    line-height: 1em;
    padding-bottom: 0px;
    padding: 5px;
    box-sizing: border-box;
    font-weight: normal;
}
.textPlane{
    font-size: 18px;
    line-height: 1.5em;
    padding: 0px 5px;
    box-sizing: border-box;
}
.textRigth{
    text-align:right;
}
.textCenter{
    text-align:center;
}
.textLeft{
    text-align:left;
}
.textuJstify{
    text-align:justify;
}
q, blockquote, cite{
    padding: 5px;
}
.cite{
    line-height: 1.5em;
}
.strong{
    font-weight: bold;
}
/*---------------------clases en imagenes-----------------*/
.imgResponsive{
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/*---------------------botton-----------------*/        
.planeLink{
    font-size: 18px;
    color: var(--second);
    line-height: 1.5em;
}
.planeLink:hover{
    font-size: 18px;
    color: var(--second-dark);
    line-height: 1.5em;
}
.btnSecond{
    font-size:19px;
    color:var(--third);
    background-color: var(--second);
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
    display:inline-block;
    margin-bottom: 5px;
}
.btnSecond:hover{
    color:var(--second-light);
    background-color: var(--second-dark);
    padding: 10px;
    box-sizing: border-box;
} 
.btnPrimary{
    font-size:19px;
    color:var(--third-dark);
    background-color: var(--primary-light);
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
    display:inline-block;
    margin-bottom: 5px;
}
.btnPrimary:hover{
    color:var(--third-dark);
    background-color: var(--primary);
    padding: 10px;
    box-sizing: border-box;
}
/*----------retucula general-------------*/ 
.container-fluid{
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin:0;
    padding:0;
} 
.container{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding:0px;
    box-sizing: border-box;
}    
.row{
    width: 100%;
    box-sizing: border-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
    /*display:flex;*/
    overflow: auto;
}
@media only screen and (max-width: 1200px) {
.container-fluid{
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin:0;
    padding:0;
}
.container{
    width: 100%;
}
}
@media screen and (max-width: 576px) {
    
.row{
    width: 100%;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
    /*display:table;*/
    clear: both;
    box-sizing: border-box;
    align-items: stretch;
}
}