@font-face {
    font-family: "MuseoSans 100";
    src: url("../fonts/MuseoSans_100.otf");
}
@font-face {
    font-family: "MuseoSans 300";
    src: url("../fonts/MuseoSans_300.otf");
}
@font-face {
    font-family: "MuseoSans 500";
    src: url("../fonts/MuseoSans_500.otf");
}
@font-face {
    font-family: "MuseoSans 700";
    src: url("../fonts/MuseoSans_700.otf");
}
@font-face {
    font-family: "MuseoSans 900";
    src: url("../fonts/MuseoSans_900.otf");
}
a {
    color: #e79741 !important;
}
body {
    font-family: "MuseoSans 500";
    font-size: 16px;
}
h2 {
    color: #243b44;
    font-size: 2.5em !important;
    font-family: "MuseoSans 900" !important;
}
h5 {
    font-family: "MuseoSans 700" !important;
}
footer {
    background-color: #094681;
    color: #fff;
}
footer p {
    margin: 1rem auto;
    font-size: 18px;
    text-align: center;
}
footer p a {
    color: #fff;
    text-decoration: none;
}
.box-line {
    background-image: url("../images/ondas.png");
    height: 80px;
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: center;
    margin: 0 auto;
    width: 60%;
}
.bg-bar-blue {
    background-color: #094681;
    height: 20px;
    width: 100%;
}

.box-login {
    height: 500px;
    left: 12px;
    right: 0;
    margin: 0 auto;
    position: absolute;
    top: 0%;
    transform: translateY(50%);
    width: 100%;
}
.box-login .card .card-header{
    background-color: transparent !important;
    text-align: center;
}
.box-login .card .card-footer{
    background-color: transparent !important;
    border-top: none;
}
.box-login form button {
    background-color: #3a6070;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    width: 100%;
}
.box-left,
.box-right {
    height: 392px;
}
.box-ad .indicador,
.box-bc .indicador{
    font-size: 34px;
    text-align: center;
}
.ca100-logo {
    background-color: #3a6070;
    height: 532px;
}

.dashboard .card {
    margin: 1em auto;
    width: 80%;
}

.dashboard .card .card-body .icon{
    color:white;
    height: auto;
    padding: 10px;
    margin: 35px auto;
    width: 50px;
}
.dashboard .card .card-body .icon.icon-shape{
    background-color: #3a6070;
}
.dashboard .card .card-body .icon.icon-au{
    background-color: #e79741;
}

header h1 {
    font-size: 2.5em !important;
    font-weight: 800;
}
nav {
    padding: 0;
    margin: 0;
    width: 100%;
}
form label,
form .form-group h4 {
    color: #b57532;
    font-family: "MuseoSans 700";
    font-size: 18px;
}
form .form-group p b {
    font-family: "MuseoSans 500";
    font-size: 18px;
}
.font-weight-bolder {
    font-family: "MuseoSans 700";
}

.bg-audiencia-form label,
.bg-audiencia-form form .form-group h4 {
    color: #243b44;;
    font-family: "MuseoSans 700";
    font-size: 18px;
}
.bg-audiencia-form form .form-group p b {
    font-family: "MuseoSans 500";
    font-size: 18px;
}

.bg-audiencia-form form .btn-form button {
    color: #b57532;
    padding: 20px 50px;
    text-decoration: none;
    font-size: 26px;
    font-family: "MuseoSans 700";
    border: 2px solid #b57532;
    background-color: transparent;
}

label.form-check-label {
    color:black;
    font-family: "MuseoSans 300";
    font-size: 16px;
}

form .btn-form {
    height: 210px;
}
form .btn-form button {
    color: #345866;
    padding: 20px 50px;
    text-decoration: none;
    font-size: 26px;
    font-family: "MuseoSans 700";
    border: 2px solid #345866;
    background-color: transparent;
}
.main-logo .box-main {
    height: auto;
}
.main-logo .box-main p {
    color: #345866;
    font-size: 20px;
    font-family: "MuseoSans 300";
    margin: 0 auto;
    padding-top:20px;
    text-align: justify;
    width: 80%;
}
.main-logo .box-main p span { 
    color: #e79741 !important;
    font-family: "MuseoSans 700";
}
.main-logo .title {
    margin: 2em auto 0 auto;
    width: 90%;
}
.main-logo .comilla {
    margin: 0 2em 3em auto;
    width: 13%;
}
.main-logo .bg-autoridades {
    background-image: url("../images/image_01.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}
.objetivo {
    background-color: #ffffff;
    color: #243b44;
}
.objetivo h2 {
    width: 80%;
}
.objetivo .box-objetivo {
    margin: 0 auto;
    padding: 80px 80px 0 80px;
    border-radius: 4px;
}
.objetivo .box-objetivo p {
    color: #243b44;
    font-size: 22px;
    font-family: "MuseoSans 300";
    margin-top:2em;
    width: 80%;
}
.objetivo .box-objetivo .ondita {
    width: 60px;
}

.bg-ok {
    background-image: url("../images/circulo_ok.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top;
    height: 600px;
}
.bg-thanks {
    height: 565px;
}
.bg-thanks h3{
    font-size: 2.3em;
    padding-top: 80px;
    text-transform: uppercase;
    width: 78%;
    color: #344bc4;
    font-family: "MuseoSans 900" !important;
}
.bg-thanks h3.cpp{
    padding-top: 5px;
    text-transform: uppercase;
    width: 90%;
}

.bg-thanks h3 span{
    font-family: "MuseoSans 300";
}

.bg-thanks .dots{
    margin: 2em 0;
    width: 68%;
}

.bg-thanks .logos-segpres-cpp{
    width: 90%;
}

.bg-en-preparacion {
    font-size: 38px;
    padding: 80px;
}

.bg-cpp-old .cpp-old .box-cpp-old{
    border-radius:8px;
    width: 65%;
}
.box-flower-mb figure {
    width: 80px;
}

.bg-audiencia-form {
    background-color: #e79741;
}

.bg-audiencia-form {
    background-color: #e79741;
}

footer {
    background-color: #243b44 !important;
}
.bg-light-blue {
    background-color: #d2dcef !important;
}
.bg-blue {
    background-color: #094681;
}
.bg-blue2 {
    background-color: #344bc4 !important;
}
.bg-blue h2 {
    color: #fff !important;
}
.bg-formulario{
    background-image: url("../images//cpp-hands2.png");
    height: 430px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.bg-cpp-form,
.bg-cpp-form .accordion-button {
    background-color:#243b44;
}
.bg-audiencia-form img {
    margin: 0 auto;
    width: 50px;
}
.bg-audiencia-form .form-check-input {
    margin-top: 20px;
}
.bg-cpp-form img {
    display: block;
    margin: 0 auto;
    width: 50px;
}

.bg-audiencia-form .infraestructura,
.bg-audiencia-form .desarrollo,
.bg-audiencia-form .sentido,
.bg-audiencia-form .relaciones,
.bg-cpp-form .infraestructura,
.bg-cpp-form .desarrollo,
.bg-cpp-form .sentido,
.bg-cpp-form .relaciones {
    padding:30px;
    border: 2px solid #e79741;
    border-radius:14px;
    height: 162px;
    text-align: center;
}

.bg-audiencia-form .infraestructura,
.bg-audiencia-form .desarrollo,
.bg-audiencia-form .sentido,
.bg-audiencia-form .relaciones,
.bg-cpp-form .ejes-infra,
.bg-cpp-form .ejes-desarrollo,
.bg-cpp-form .ejes-sentido,
.bg-cpp-form .ejes-relaciones {
    padding:15px;
    animation: 3s ease-in 1s 2 reverse both paused slide-in;
}

.bg-cpp-form .ejes-infra h4,
.bg-cpp-form .ejes-desarrollo h4,
.bg-cpp-form .ejes-sentido h4,
.bg-cpp-form .ejes-relaciones h4,
.bg-cpp-form .ejes-infra label,
.bg-cpp-form .ejes-desarrollo label,
.bg-cpp-form .ejes-sentido label,
.bg-cpp-form .ejes-relaciones label {
    font-family: "MuseoSans 300" !important;
    font-size: 16px;
}

.bg-cpp-form .invalid,
.bg-audiencia-form .invalid {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    padding-left: 10px;
    padding-right: 10px;
}


.bg-audiencia-form .accordion,
.bg-cpp-form .accordion {
    padding: 20px;
}

.bg-audiencia-form .box-bottom,
.bg-cpp-form .box-bottom {
    font-family: "MuseoSans 300";
    color: #FFFFFF;
    font-size: 2.3em;
    padding:1em;
}
.bg-cpp-form .box-bottom span{
    font-family: "MuseoSans 500";
}

.accordion-button .bg-cpp-form {
    background-color: #bcdff4 !important;
}
.bg-cpp-form .accordion .accordion-button{
    background-color: #243b44 !important;
}
.bg-audiencia-form .accordion .accordion-button{
    background-color: #e79741 !important;
}

.bg-cpp-form .accordion-body{ 
    background-color: #ffffff;
}
.bg-audiencia-form .box-formulario,
.bg-cpp-form .box-formulario{
    height: auto;
    padding:80px;
}
.bg-audiencia-form .box-formulario form,
.bg-cpp-form .box-formulario form{
    background-color: white;
    padding:80px;
}

.bg-formulario .box-formulario {
    padding: 80px;
}
.bg-formulario .box-formulario p {
    font-family: "MuseoSans 500";
    font-size: 22px;
    width: 80%;
}
.bg-formulario .box-formulario .ondita {
    width: 60px;
}
.bg-download-cpp {
    background-color: #d8f0fc;
    position: relative;
    bottom:76px;
}
.bg-download-cpp .box-download {
    padding: 80px;
}
.bg-download-cpp .box-download .box-flower{
    height: 607px;
}
.bg-download-cpp .box-download .ondita {
    width: 60px;
}
.bg-download-cpp .btn-download {
    height: 208px;
}
.bg-download-cpp .btn-download a {
    color: #094681;
    padding: 20px 50px;
    text-decoration: none;
    font-size: 26px;
    font-family: "MuseoSans 700";
    border: 2px solid #094681;
    border-radius:4px;
}

.bg-cpp-old {
    background-image: url("../images/circulo_manos.png");
    height: 750px;
    background-repeat: no-repeat;
    background-size: initial;
    background-position: 87% 67%;
    padding:80px;
}

.bg-cpp-old h2 {
    text-transform: uppercase;
} 

.bg-circulos-footer {
    background-image: url("../images/circulos_footer.png");
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 100%;
}
.bg-calipso {
    background-color: #0363ab;
}
.box-header-nav {
    width: 100%;
}
.bg-documents {
    background-image: url("../img/circulos.png");
    height: 447px;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-participate {
    background-color: #ecedec;
    height: 340px;
    padding:4em;
}
.bg-participate h2{
    font-size: 3em;
    text-transform: uppercase;
    font-family: "MuseoSans 700";
    color: #345866 !important;
    margin-bottom: 1em;
}
.bg-participate p{
    color: #345866 !important;
    font-size: 2em;
    font-family: "MuseoSans 300";
    line-height: 36px;
    width: 80%;
}
.bg-participate .box-objetivo p span {
    color: #e79741 !important;
    font-family: "MuseoSans 500";
}
.btn-primary {
    border-color: #c893cc;
    background-color: #c893cc;
}
.cpp-portada figure {
    width: 80%;
}
.cpp-logo figure {
    height: 400px;
    width: 250px;
}
.cpp-globo figure {
    height: 400px;
    width: 330px;
}
.btn-cpp-old a {
    color: #094681;
    padding: 20px 25px;
    text-decoration: none;
    font-size: 26px;
    font-family: "MuseoSans 700";
    border: 2px solid #094681;
    border-radius:8px;
}
.cpp-oldies .box-oldies {
    text-align: center;
    width: 100%;
}
.cpp-oldies .box-oldies a {
    background-color: #bc86c0;
    padding: 0.5em 2em;
    border-radius: 3px;
    text-align: center;
}
.cpp-video {
    position: absolute;
}
.cpp-video figure {
    position: relative;
    width: 610px;
    margin: 0 auto;
    bottom: 6em;
    border: 5px solid #fff;
}
.form {
    margin: 0 auto;
    width: 80%;
}
.hashtag p {
    color: #fff;
    font-size: 1.2em;
    height: 50px;
    margin: 0;
    width: 100%;
}
.hashtag p span {
    color: #0185bc;
    font-weight: 800;
}
.header-back {
    background-image: url("../images/banner-arica100.png");
    height: 350px;
    background-repeat: no-repeat;
    background-size: contain;
}
.img-cpp {
    width: 30%;
}
.lead {
    font-size: 1.4em;
    font-weight: 500;
}
.navbar {
    padding: 0;
}
.participate {
    background-image: url("../images/bg-documents.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top;
    background-attachment: fixed;
    height: auto;
}
.bg-ty {
    background-image: url("../images/flower.png");
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    height: 80px;
}
.participate .btn {
    background-color: #345866;
    padding:20px
}
.participate .btn a {
    color:white;
    font-size:24px;
    text-decoration: none;
}
.text-blue {
    color: #3a6070 !important;
}
.text-calipso {
    color: #0185bc !important;
}
.text-required {
    color:#ff7455;
}
.text-orange {
    color: #e79741 !important;
}
.title-section {
    font-weight: 500;
    font-size: 2em;
    width: 100%;
}
.title-site {
    position: relative;
    top: 42%;
}
.whats-is {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.whats-is .description {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.whats-is .description-text {
    font-size: 1.1em;
    font-weight: 500;
    margin: 0 auto;
    width: 70%;
    text-align: center;
}
.whats-is h2 {
    bottom: 14%;
    color: #fff;
    position: relative;
    text-align: center;
}
.whats-is h2 span {
    font-weight: 800;
}
.whats-is h2 span.purple {
    color: #bc86c0;
}

.video h2{
    font-size: 3em;
    text-transform: uppercase;
    font-family: "MuseoSans 700";
    width: 76%;
    margin: 0 auto;
}


.wpcf7-validation-errors,
.screen-reader-response {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: none;
}
.wpcf7-not-valid-tip {
    color: #f00;
}
.wpcf7-list-item.last label {
    margin-right: 1.5em;
}
.wpcf7-list-item.last label span {
    margin-right: 0.5em;
}
.wpcf7-list-item.first label span {
    margin-right: 0.5em;
}

@media (min-width: 1442px) {
    .header-back {
        height: 350px;
    }
}

@media (max-width: 575.98px) {
    h2 {
        font-size: 2em !important;
    }
    .title-site {
        top: 10%;
    }
    .whats-is h2 {
        bottom: 11%;
        font-size: 1.65em;
    }
    .whats-is .description-text {
        width: 95%;
    }
    .cpp-oldies .box-oldies a {
        padding: 0.5em 1em;
    }
    .form {
        width: 95%;
    }
    .header-back {
        background-image: url("../images/banner-arica100.png");
        height: 150px;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .main-logo .box-main {
        height: auto;
        padding: 30px;
    }
    .main-logo .box-main p {
        font-size: 20px;
        width: 100%;
    }
    .main-logo .comilla {
        margin: 0 2em 2em auto;
    }
    .objetivo {
        background-image: none;
        height: 570px;
    }
    .objetivo h2 {
        width: 100%;
    }

    .objetivo .box-objetivo {
        padding: 30px;
    }
    .objetivo .box-objetivo p {
        font-size: 20px;
        width: 100%;
    }
    .objetivo .box-objetivo figure {
        text-align: center;
    }
    .bg-cpp2-2025,
    .bg-cpp-2025 {
        background-size: contain;
        height: 200px;
    }
    .bg-participate h2 {
        font-size: 2em !important;
    }
    .bg-participate {
        background-image: none;
        height: auto;
        padding:2em;
    }
    .bg-participate p{
        font-size: 20px;
        line-height: 26px;
        width: 100%;
    }
    .bg-circulos-footer {
        background-size: cover;
    }
    .bg-download-cpp .box-download {
        padding: 30px;
    }
    .bg-download-cpp .box-download a {
        font-size: 22px;
        padding: 20px 40px;
    }
    .bg-download-cpp .btn-download {
        height: 135px;
    }
    .bg-postit {
        height: 200px;
    }
    .bg-formulario .box-formulario {
        padding: 30px;
    }
    form .btn-form {
        height: 105px;
    }
    .bg-postit-two {
        height: 130px;
    }
    .bg-thanks {
        height: auto;
    }
    .bg-thanks h3 {
        font-size: 1.9em;
        padding-top: 20px;;
    }
    .btn-cpp-old a {
        font-size: 20px;
        padding: 20px;
    }
    footer p {
        font-size: 16px;
    }
    .bg-download-cpp .box-download .box-flower{
        height: 100px;
    }
    .bg-download-cpp .box-download .box-flower figure{
        width: 100px;
    }
    .bg-formulario .box-formulario p {
        width: 100%;
    }
    .bg-formulario {
        background-image: none;
        height: 525px;
    }
    .bg-cpp-form .box-formulario {
        padding:0 30px;
    }
    .bg-cpp-old {
        background-image: none;
        padding: 20px 30px;
        height: 100%;
    }
    .bg-cpp-old .cpp-old .box-cpp-old {
        width: 100%;
    }
    .video h2 {
        font-size: 2em !important;
        margin: 0 auto 1em;
        width: 100%;
    }

    .bg-audiencia-form .box-formulario, 
    .bg-cpp-form .box-formulario {
        padding: 10px;
    }

    .bg-audiencia-form .box-formulario form, 
    .bg-cpp-form .box-formulario form {
        padding: 10px;
    }

    .bg-audiencia-form .infraestructura, 
    .bg-audiencia-form .desarrollo, 
    .bg-audiencia-form .sentido, 
    .bg-audiencia-form .relaciones, 
    .bg-cpp-form .infraestructura, 
    .bg-cpp-form .desarrollo, 
    .bg-cpp-form .sentido, 
    .bg-cpp-form .relaciones {
        height: 120px;
    }
}

@media (max-width: 399.98px) {
    
    .objetivo {
        height: 630px;
    }

    .bg-formulario {
        background-image: none;
        height: 595px;
    }

    form .btn-form button {
        padding:20px 40px;
    }

    .bg-audiencia-form .box-formulario, 
    .bg-cpp-form .box-formulario {
        padding: 10px;
    }

    .bg-audiencia-form .box-formulario form, 
    .bg-cpp-form .box-formulario form {
        padding: 10px;
    }

    .bg-audiencia-form .infraestructura, 
    .bg-audiencia-form .desarrollo, 
    .bg-audiencia-form .sentido, 
    .bg-audiencia-form .relaciones, 
    .bg-cpp-form .infraestructura, 
    .bg-cpp-form .desarrollo, 
    .bg-cpp-form .sentido, 
    .bg-cpp-form .relaciones {
        height: 120px;
    }
    
}