* {
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Segoe UI", MYRIADPRO, Arial, Helvetica, Verdana, sans-serif;
}

    *:focus {
        outline: none;
    }

p {
    font-family: "Segoe UI", MYRIADPRO, Arial, Helvetica, Verdana, sans-serif;
}

span {
    font-family: "Segoe UI", MYRIADPRO, Arial, Helvetica, Verdana, sans-serif;
}

a {
    font-family: "Segoe UI", MYRIADPRO, Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

    a:link {
        text-decoration: none
    }

    a:hover {
        text-decoration: none
    }

    a:visited {
        text-decoration: none
    }

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", MYRIADPRO, Arial, Helvetica, Verdana, sans-serif;
}

body {
    font-family: Arial;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
}
/************************************************************* INICIO ctroCABECERA Grid**********************************************************************/
.ctroCabecera {
    max-width: 1250px;
    height: 100px;
    margin: 0px auto;
    display: grid;
    grid-template-columns:1fr;
    align-items: center;
}

/************************************************************* INICIO ctroCUERPO Grid**********************************************************************/
.ctroCuerpo {
    max-width: 1250px;
    margin: 0px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    align-items: center;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}
    .ctroCuerpo_ContForm {
        grid-column: span 4;
        height: auto;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,auto);
        place-items: start;
        grid-template-areas:
            "txtNombre       txtNombre       txtApellido    txtApellido"
            "txtEMail        txtEMail        txtWhatApp     txtWhatApp"
            "txtRegionPais   txtRegionPais   txtEmpresa     txtEmpresa"
            "txtAsunto       txtAsunto       txtAsunto      txtAsunto"
            "txtMensaje      txtMensaje      txtMensaje     txtMensaje";
    }
        .ctroCuerpo_ContForm .txtNombre {
            grid-area: txtNombre;
        }
        .ctroCuerpo_ContForm .txtApellido {
            grid-area: txtApellido;
        }
        .ctroCuerpo_ContForm .txtEMail {
            grid-area: txtEMail;
        }
        .ctroCuerpo_ContForm .txtWhatApp {
            grid-area: txtWhatApp;
        }
        .ctroCuerpo_ContForm .txtRegionPais {
            grid-area: txtRegionPais;
        }
        .ctroCuerpo_ContForm .txtEmpresa {
            grid-area: txtEmpresa;
        }
        .ctroCuerpo_ContForm .txtAsunto {
            grid-area: txtAsunto;
        }
        .ctroCuerpo_ContForm .txtMensaje {
            grid-area: txtMensaje;
        }
    .txtNombre, .txtApellido,
    .txtEMail, .txtWhatApp,
    .txtRegionPais, .txtEmpresa,
    .txtAsunto, .txtMensaje, .textMensaje {
        width: 100%;
        padding: 8px;
        font-size: 15px;
        font-weight: 400;
        border: none;
        /*background: #3e3e3e;*/
        /*background: none;*/
        outline: 0;
        color: #000000;
        border: 1px solid rgba(125,125,125,0.6);
    }

/************************************************************* FIN ctroCUERPO Grid**********************************************************************/
/************************************************************* INICIO ctroPIE Grid**********************************************************************/
.ctroPie {
    max-width: 1250px;
    margin: 0px auto;
    padding: 40px 5px 100px 5px;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;
    align-items: start;
    -webkit-transition: all 0.5s 0s ease;
    -moz-transition: all 0.5s 0s ease;
    -o-transition: all 0.5s 0s ease;
    transition: all 0.5s 0s ease;
}

.ctroPieContIzq {
    grid-column: span 1;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

    .ctroPieContIzq > h3 {
        width: 100%;
        font-weight: 600;
        color: #f6f6f6;
        text-transform: uppercase;
        margin-top: 0px;
    }

    .ctroPieContIzq > p {
        width: 100%;
        font-weight: 400;
        color: #f6f6f6;
    }

    .ctroPieContIzq > ul > li {
        list-style: none;
        margin: 10px 0px;
    }

        .ctroPieContIzq > ul > li > a {
            color: #ffffff;
            font-size: 16px;
        }

        .ctroPieContIzq > ul > li img {
            height: 14px;
            margin: 0px 10px 0px 0px;
        }

.ctroPieContDer {
    grid-column: span 2;
    height: auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(4,auto);
    place-items: start;
    grid-template-areas: "txtTitulo          txtTitulo"
                         "textNombre         textE-Mail"
                         "textAsunto         textPais"
                         "textMensaje        textMensaje"
                         "btnEnviar          btnEnviar";
}

    .ctroPieContDer .txtTitulo {
        grid-column-start: txtTitulo;
        grid-column-end: txtTitulo;
    }
    .ctroPieContDer .textNombre {
        grid-area: textNombre;
    }

    .ctroPieContDer .textE-mail {
        grid-area: textE-mail;
    }

    .ctroPieContDer .textAsunto {
        grid-area: textAsunto;
    }

    .ctroPieContDer .textPais {
        grid-area: textPais;
    }

    .ctroPieContDer .textMensaje {
        grid-column-start: textMensaje;
        grid-column-end: textMensaje;
    }

    .ctroPieContDer .btnEnviar {
        grid-column-start: btnEnviar;
        grid-column-end: btnEnviar;
    }

.txtTitulo {
    font-size: 20px;
    font-weight: 600;
    color: #f6f6f6;
    text-transform: uppercase;
}

.animacion-1:hover,
.animacion-1:focus {
    opacity: 1;
}

.textNombre, .textE-Mail,
.textAsunto, .textPais, .textMensaje {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    font-weight: 400;
    border: none;
    background: #3e3e3e;
    /*background: none;*/
    outline: 0;
    color: #fff;
    border-bottom: 1px solid #17a086;
}

.btnEnviar {
    width: 100%;
    background: #17a086;
    color: #ffffff;
    border: 0;
    text-transform: uppercase;
    padding: 20px;
    cursor: pointer;
}

    .btnEnviar:hover,
    .btnEnviar:focus {
        background: #e1aa12;
        color: #fff;
        transition: background-color 1s ease-out;
        outline: 0;
    }
/************************************************************* FIN ctroPIE Grid**********************************************************************/
@media (max-width:1200px){
    .ctroCuerpo_ContForm {
        grid-column: span 5;
        height: auto;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,auto);
        place-items: start;
        grid-template-areas:
            "txtNombre       txtNombre         txtApellido    txtApellido"
            "txtEMail        txtEMail          txtWhatApp     txtWhatApp"
            "txtRegionPais   txtRegionPais     txtEmpresa     txtEmpresa"
            "txtAsunto       txtAsunto         txtAsunto      txtAsunto"
            "txtMensaje      txtMensaje        txtMensaje     txtMensaje";
    }
}
@media (max-width:1024px) {
    .ctroCuerpo_ContForm {
        grid-column: span 6;
        height: auto;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,auto);
        place-items: start;
        grid-template-areas:
            "txtNombre       txtNombre         txtApellido    txtApellido"
            "txtEMail        txtEMail          txtWhatApp     txtWhatApp"
            "txtRegionPais   txtRegionPais     txtEmpresa     txtEmpresa"
            "txtAsunto       txtAsunto         txtAsunto      txtAsunto"
            "txtMensaje      txtMensaje        txtMensaje     txtMensaje";
    }
}
@media ( max-width:960px) {
    /************************************************************* INICIO ctroCUERPO Grid**********************************************************************/
    .ctroCuerpo {
        margin: 10px auto;
        -webkit-transition: all 0.5s 0s ease;
        -moz-transition: all 0.5s 0s ease;
        -o-transition: all 0.5s 0s ease;
        transition: all 0.5s 0s ease;
    }
    /************************************************************* FIN ctroCUERPO Grid**********************************************************************/


    /************************************************************* INICIO ctroCUERPO Grid**********************************************************************/



    /************************************************************* FIN ctroCUERPO Grid**********************************************************************/
    /************************************************************* INICIO ctroPIE Grid**********************************************************************/
    .ctroPieContIzq {
        grid-column: span 3;
        grid-row: 2/3; /*Cambiando de lugar arriba ----> abajo*/
    }

    .ctroPieContDer {
        grid-column: span 3;
        grid-row: 1/2; /*Cambiando de lugar abajo ----> arriba*/
    }
    /************************************************************* INICIO ctroPIE Grid**********************************************************************/
}

@media ( max-width:640px) {
    .ctroPieContDer {
        grid-template-areas: "txtTitulo          txtTitulo"
            "textNombre         textNombre"
            "textAsunto         textAsunto"
            "textE-Mail         textPais"
            "textMensaje        textMensaje"
            "btnEnviar          btnEnviar";
    }
    .ctroCuerpo_ContForm {
        grid-column: span 6;
        height: auto;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,auto);
        place-items: start;
        grid-template-areas:
            "txtNombre       txtNombre         txtApellido    txtApellido"
            "txtRegionPais   txtRegionPais     txtWhatApp     txtWhatApp"
            "txtEMail        txtEMail          txtEMail       txtEMail"
            "txtEmpresa      txtEmpresa        txtEmpresa     txtEmpresa"
            "txtAsunto       txtAsunto         txtAsunto      txtAsunto"
            "txtMensaje      txtMensaje        txtMensaje     txtMensaje";
    }
}
@media ( max-width:440px){
    .ctroCuerpo_ContForm {
        grid-column: span 6;
        height: auto;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,auto);
        place-items: start;
        grid-template-areas:
            "txtNombre       txtNombre         txtNombre      txtNombre"
            "txtApellido     txtApellido       txtApellido    txtApellido"
            "txtEMail        txtEMail          txtEMail       txtEMail"
            "txtWhatApp      txtWhatApp        txtWhatApp     txtWhatApp"
            "txtRegionPais   txtRegionPais     txtRegionPais  txtRegionPais"
            "txtEmpresa      txtEmpresa        txtEmpresa     txtEmpresa"
            "txtAsunto       txtAsunto         txtAsunto      txtAsunto"
            "txtMensaje      txtMensaje        txtMensaje     txtMensaje";
    }
}