/* --------------------------------------------------------------------------- */
/*  */
/* --------------------------------------------------------------------------- */

/* flex  */
.flex{display: flex;}
.justify-end{ justify-content: flex-end; }
.justify-start{ justify-content: flex-start; }
.justify-center{ justify-content: center }

.gap-20{ gap: 20px; }

.align-center{ align-self: center; }
.align-start{ align-self: flex-start; }
.align-end{ align-self: flex-end; }

.itens-center{ align-items: center; }

.grow-0{ flex-grow: 0; }
.grow-1{ flex-grow: 1; }
.grow-2{ flex-grow: 2; }

.shrink-0{ flex-shrink: 0; }
.shrink-1{ flex-shrink: 1; }

@media (min-width: 768px){
    .md\:flex{display: flex;}
    .md\:justify-start{ justify-content: flex-start; }
    .md\:justify-end{ justify-content: flex-end; }
    .md\:justify-center{ justify-content: center }
    .md\:align-center{ align-self: center; }
    .md\:align-start{ align-self: flex-start; }
}

/* spacing  */
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }
.mb-40{ margin-bottom: 40px; }
.mb-50{ margin-bottom: 50px; }
.mb-60{ margin-bottom: 60px; }
.mb-100{ margin-bottom: 100px; }

.mr-10{ margin-right: 10px; }
.mr-20{ margin-right: 20px; }
.mr-30{ margin-right: 30px; }
.mr-40{ margin-right: 40px; }
.mr-50{ margin-right: 50px; }
.mr-60{ margin-right: 60px; }
.mr-100{ margin-right: 100px; }

.ml-10{ margin-left: 10px; }
.ml-20{ margin-left: 20px; }
.ml-30{ margin-left: 30px; }
.ml-40{ margin-left: 40px; }
.ml-50{ margin-left: 50px; }
.ml-60{ margin-left: 60px; }
.ml-100{ margin-left: 100px; }

.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }
.mt-60{ margin-top: 60px; }
.mt-100{ margin-top: 100px; }

.pt-50{ padding-top: 50px; }
.pt-40{ padding-top: 40px; }
.pt-20{ padding-top: 20px; }
.pt-30{ padding-top: 30px; }
.pt-20{ padding-top: 20px; }
.pt-12{ padding-top: 12px; }
.pt-10{ padding-top: 10px; }

.pb-50{ padding-bottom: 50px; }
.pb-40{ padding-bottom: 40px; }
.pb-20{ padding-bottom: 20px; }
.pb-23{ padding-bottom: 30px; }
.pb-20{ padding-bottom: 20px; }
.pb-12{ padding-bottom: 12px; }
.pb-10{ padding-bottom: 10px; }

.pr-50{ padding-right: 50px; }
.pr-40{ padding-right: 40px; }
.pr-20{ padding-right: 20px; }
.pr-30{ padding-right: 30px; }
.pr-20{ padding-right: 20px; }
.pr-12{ padding-right: 12px; }
.pr-10{ padding-right: 10px; }

.pl-50{ padding-left: 50px; }
.pl-40{ padding-left: 40px; }
.pl-20{ padding-left: 20px; }
.pl-30{ padding-left: 30px; }
.pl-20{ padding-left: 20px; }
.pl-12{ padding-left: 12px; }
.pl-10{ padding-left: 10px; }


@media (min-width: 768px){
    /* spacing  */
    .md\:mb-10{ margin-bottom: 10px; }
    .md\:mb-20{ margin-bottom: 20px; }
    .md\:mb-30{ margin-bottom: 30px; }
    .md\:mb-40{ margin-bottom: 40px; }
    .md\:mb-50{ margin-bottom: 50px; }
    .md\:mb-60{ margin-bottom: 60px; }
    .md\:mb-100{ margin-bottom: 100px; }

    .md\:mr-10{ margin-right: 10px; }
    .md\:mr-20{ margin-right: 20px; }
    .md\:mr-30{ margin-right: 30px; }
    .md\:mr-40{ margin-right: 40px; }
    .md\:mr-50{ margin-right: 50px; }
    .md\:mr-60{ margin-right: 60px; }
    .md\:mr-100{ margin-right: 100px; }

    .md\:ml-10{ margin-left: 10px; }
    .md\:ml-20{ margin-left: 20px; }
    .md\:ml-30{ margin-left: 30px; }
    .md\:ml-40{ margin-left: 40px; }
    .md\:ml-50{ margin-left: 50px; }
    .md\:ml-60{ margin-left: 60px; }
    .md\:ml-100{ margin-left: 100px; }

    .md\:mt-10{ margin-top: 10px; }
    .md\:mt-20{ margin-top: 20px; }
    .md\:mt-30{ margin-top: 30px; }
    .md\:mt-40{ margin-top: 40px; }
    .md\:mt-50{ margin-top: 50px; }
    .md\:mt-60{ margin-top: 60px; }
    .md\:mt-100{ margin-top: 100px; }

    .md\:pt-50{ padding-top: 50px; }
    .md\:pt-40{ padding-top: 40px; }
    .md\:pt-20{ padding-top: 20px; }
    .md\:pt-30{ padding-top: 30px; }
    .md\:pt-20{ padding-top: 20px; }
    .md\:pt-12{ padding-top: 12px; }
    .md\:pt-10{ padding-top: 10px; }

    .md\:pb-50{ padding-bottom: 50px; }
    .md\:pb-40{ padding-bottom: 40px; }
    .md\:pb-20{ padding-bottom: 20px; }
    .md\:pb-23{ padding-bottom: 30px; }
    .md\:pb-20{ padding-bottom: 20px; }
    .md\:pb-12{ padding-bottom: 12px; }
    .md\:pb-10{ padding-bottom: 10px; }

    .md\:pr-50{ padding-right: 50px; }
    .md\:pr-40{ padding-right: 40px; }
    .md\:pr-20{ padding-right: 20px; }
    .md\:pr-30{ padding-right: 30px; }
    .md\:pr-20{ padding-right: 20px; }
    .md\:pr-12{ padding-right: 12px; }
    .md\:pr-10{ padding-right: 10px; }

    .md\:pl-50{ padding-left: 50px; }
    .md\:pl-40{ padding-left: 40px; }
    .md\:pl-20{ padding-left: 20px; }
    .md\:pl-30{ padding-left: 30px; }
    .md\:pl-20{ padding-left: 20px; }
    .md\:pl-12{ padding-left: 12px; }
    .md\:pl-10{ padding-left: 10px; }
}


@media (min-width: 992px){
    /* spacing  */
    .lg\:mb-10{ margin-bottom: 10px; }
    .lg\:mb-20{ margin-bottom: 20px; }
    .lg\:mb-30{ margin-bottom: 30px; }
    .lg\:mb-40{ margin-bottom: 40px; }
    .lg\:mb-50{ margin-bottom: 50px; }
    .lg\:mb-60{ margin-bottom: 60px; }
    .lg\:mb-100{ margin-bottom: 100px; }

    .lg\:mr-10{ margin-right: 10px; }
    .lg\:mr-20{ margin-right: 20px; }
    .lg\:mr-30{ margin-right: 30px; }
    .lg\:mr-40{ margin-right: 40px; }
    .lg\:mr-50{ margin-right: 50px; }
    .lg\:mr-60{ margin-right: 60px; }
    .lg\:mr-100{ margin-right: 100px; }

    .lg\:ml-10{ margin-left: 10px; }
    .lg\:ml-20{ margin-left: 20px; }
    .lg\:ml-30{ margin-left: 30px; }
    .lg\:ml-40{ margin-left: 40px; }
    .lg\:ml-50{ margin-left: 50px; }
    .lg\:ml-60{ margin-left: 60px; }
    .lg\:ml-100{ margin-left: 100px; }

    .lg\:mt-10{ margin-top: 10px; }
    .lg\:mt-20{ margin-top: 20px; }
    .lg\:mt-30{ margin-top: 30px; }
    .lg\:mt-40{ margin-top: 40px; }
    .lg\:mt-50{ margin-top: 50px; }
    .lg\:mt-60{ margin-top: 60px; }
    .lg\:mt-100{ margin-top: 100px; }

    .lg\:pt-50{ padding-top: 50px; }
    .lg\:pt-40{ padding-top: 40px; }
    .lg\:pt-20{ padding-top: 20px; }
    .lg\:pt-30{ padding-top: 30px; }
    .lg\:pt-20{ padding-top: 20px; }
    .lg\:pt-12{ padding-top: 12px; }
    .lg\:pt-10{ padding-top: 10px; }

    .lg\:pb-50{ padding-bottom: 50px; }
    .lg\:pb-40{ padding-bottom: 40px; }
    .lg\:pb-20{ padding-bottom: 20px; }
    .lg\:pb-23{ padding-bottom: 30px; }
    .lg\:pb-20{ padding-bottom: 20px; }
    .lg\:pb-12{ padding-bottom: 12px; }
    .lg\:pb-10{ padding-bottom: 10px; }

    .lg\:pr-50{ padding-right: 50px; }
    .lg\:pr-40{ padding-right: 40px; }
    .lg\:pr-20{ padding-right: 20px; }
    .lg\:pr-30{ padding-right: 30px; }
    .lg\:pr-20{ padding-right: 20px; }
    .lg\:pr-12{ padding-right: 12px; }
    .lg\:pr-10{ padding-right: 10px; }

    .lg\:pl-50{ padding-left: 50px; }
    .lg\:pl-40{ padding-left: 40px; }
    .lg\:pl-20{ padding-left: 20px; }
    .lg\:pl-30{ padding-left: 30px; }
    .lg\:pl-20{ padding-left: 20px; }
    .lg\:pl-12{ padding-left: 12px; }
    .lg\:pl-10{ padding-left: 10px; }
}

/* colors  */
.color-azul-medio{ color: #505C7C; }
.color-azul-escuro{ color: #1F2447; }
.color-rosa{ color: #E32456; }
.color-branco{ color: #FFFFFF; }
.color-cinza{ color: #E5E5E5 }
.color-cinza-300{ color: #A9A9A9; }
.color-cinza-600{ color: #5b5b5b; }

.bg-azul-medio{ background-color: #505C7C; }
.bg-azul-escuro{ background-color: #1F2447; }
.bg-rosa{ background-color: #E32456; }
.bg-branco{ background-color: #FFFFFF; }
.bg-cinza{ background-color: #E5E5E5 }
.bg-cinza-300{ background-color: #A9A9A9; }
.bg-cinza-600{ background-color: #5b5b5b; }

/* WORPRESS COLOR PALLETE  */
.has-azul-medio-color{ color: #505C7C !important ; }
.has-azul-escuro-color{ color: #1F2447 !important ; }
.has-rosa-color{ color: #E32456 !important ; }
.has-branco-color{ color: #FFFFFF !important ; }
.has-cinza-color{ color: var(--cinza) !important ; }
.has-cinza-300-color{ color: #A9A9A9 !important ; }
.has-cinza-600-color{ color: #5b5b5b !important ; }

.has-azul-medio-background-color{ background-color: #505C7C !important; }
.has-azul-escuro-background-color{ background-color: #1F2447 !important; }
.has-rosa-background-color{ background-color: #E32456 !important; }
.has-branco-background-color{ background-color: #FFFFFF !important; }
.has-cinza-background-color{ background-color: var(--cinza) !important; }
.has-cinza-300-background-color{ background-color: #A9A9A9 !important; }
.has-cinza-600-background-color{ background-color: #5b5b5b !important; }

/* -----------------------------------------  */

.fw-700{ font-weight: 700; }  
.fw-600{ font-weight: 600; }  
.fw-500{ font-weight: 500; }

.fs-16{ font-size: 16px !important; }  
.fs-20{ font-size: 20px !important; }
.fs-22{ font-size: 22px !important; }  
.fs-24{ font-size: 24px !important; }  
.fs-28{ font-size: 28px !important; }    
.fs-32{ font-size: 32px !important; } 
.fs-40{ font-size: 40px !important; }

lh-1{line-height: 1.1;}
lh-12{line-height: 1.2;}
lh-13{line-height: 1.3;}
lh-14{line-height: 1.4;}
lh-15{line-height: 1.5;}
lh-16{line-height: 1.6;}

@media (min-width: 576px){
    .sm\:fw-700{ font-weight: 700; }  
    .sm\:fw-600{ font-weight: 600; }  
    .sm\:fw-500{ font-weight: 500; }
    .sm\:fs-16{ font-size: 16px !important; }  
    .sm\:fs-20{ font-size: 20px !important; }
    .sm\:fs-22{ font-size: 22px !important; }  
    .sm\:fs-24{ font-size: 24px !important; }  
    .sm\:fs-28{ font-size: 28px !important; }    
    .sm\:fs-32{ font-size: 32px !important; } 
    .sm\:fs-40{ font-size: 40px !important; } 
}

@media (min-width: 768px){
    .md\:fw-700{ font-weight: 700; }  
    .md\:fw-600{ font-weight: 600; }  
    .md\:fw-500{ font-weight: 500; }
    .md\:fs-16{ font-size: 16px !important; }  
    .md\:fs-20{ font-size: 20px !important; }
    .md\:fs-22{ font-size: 22px !important; }  
    .md\:fs-24{ font-size: 24px !important; }  
    .md\:fs-28{ font-size: 28px !important; }    
    .md\:fs-32{ font-size: 32px !important; } 
    .md\:fs-40{ font-size: 40px !important; } 
}

@media (min-width: 992px){
    .md\:fw-700{ font-weight: 700; }  
    .md\:fw-600{ font-weight: 600; }  
    .md\:fw-500{ font-weight: 500; }
    .md\:fs-16{ font-size: 16px !important; }  
    .md\:fs-20{ font-size: 20px !important; }
    .md\:fs-22{ font-size: 22px !important; }  
    .md\:fs-24{ font-size: 24px !important; }  
    .md\:fs-28{ font-size: 28px !important; }    
    .md\:fs-32{ font-size: 32px !important; } 
    .md\:fs-40{ font-size: 40px !important; } 
}

@media (min-width: 1200px){
    .xl\:fw-700{ font-weight: 700; }  
    .xl\:fw-600{ font-weight: 600; }  
    .xl\:fw-500{ font-weight: 500; }
    .xl\:fs-16{ font-size: 16px; }  
    .xl\:fs-20{ font-size: 20px !important; }
    .xl\:fs-22{ font-size: 22px !important; }  
    .xl\:fs-24{ font-size: 24px !important; }  
    .xl\:fs-28{ font-size: 28px !important; }    
    .xl\:fs-32{ font-size: 32px !important; } 
    .xl\:fs-40{ font-size: 40px !important; } 
}

@media (min-width: 1400px){
    .xxl\:fw-700{ font-weight: 700; }  
    .xxl\:fw-600{ font-weight: 600; }  
    .xxl\:fw-500{ font-weight: 500; }
    .xxl\:fs-16{ font-size: 16px !important; }  
    .xxl\:fs-20{ font-size: 20px !important; }
    .xxl\:fs-22{ font-size: 22px !important; }  
    .xxl\:fs-24{ font-size: 24px !important; }  
    .xxl\:fs-28{ font-size: 28px !important; }    
    .xxl\:fs-32{ font-size: 32px !important; } 
    .xxl\:fs-40{ font-size: 40px !important; } 
}


/* helpers */
.img-fluid{
    max-width: 100%;
    display: block;
}

.img-fluid-full{
    width: 100%;
    display: block;
}

/* --- */

.radius-10{
    border-radius: 10px;
}

/* -  */
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

@media (min-width: 768px){
    .md\:text-center{ text-align: center; }
    .md\:text-left{ text-align: left; }
    .md\:text-right{ text-align: right; }
}

@media (min-width: 992px){
    .lg\:text-center{ text-align: center; }
    .lg\:text-left{ text-align: left; }
    .lg\:text-right{ text-align: right; }
}

.full-block{
    width: 100%;
    display: block;
}
.center-block{
    margin-left: auto;
    margin-right: auto;
}