.white { color: #FFF !important; }
.white-gray { color: #F8F7F6 !important; }

iframe { border: none; }

.dialogo { background: #5E686F; color: #FFF; position: relative; padding: 30px 0; }
.dialogo h1 { font-size: 60px; border-bottom: 15px solid #FFF; font-weight: bold; width: fit-content; padding-bottom: 15px; margin: 0 0 20px; }
.dialogo p { font-size: 27px; font-weight: 600; line-height: 35px; }
.dialogo img { width: 100%; position: absolute; bottom: -30px; }

.porque-dialogo { background: #00B7A3; height: 340px; color: #FFF; padding: 80px 0; }
.porque-dialogo h3 { font-size: 30px; font-weight: bold; }
.porque-dialogo p { font-size: 18px; margin-top: 55px; }

.frase-dialogo { font-size: 40px; color: #5e696f; font-weight: bold; padding: 90px 0; }

.box-dialogo { border-bottom: 1px solid #bcbcbc; padding-bottom: 40px; margin-bottom: 60px; }
.box-dialogo:last-of-type { border-bottom: none; }
.herra-title-gen { font-size: 28px; font-weight: bold; width: 100%; color: #4A4C4C; }
.herra-descr { font-size: 18px; color: #444444; width: 55%; margin: 80px auto 100px; }
.herra-img { height: 250px; background: #2BB5A1; margin: 0 auto; text-align: center; }
.herra-title { font-size: 24px; font-weight: bold; margin: 30px 0 15px; color: #444444; }
.herra-text { font-size: 18px; color: #444444; }
.buzon-dial { width: 55%; margin-top: 18px; }
.encuesta-dial { width: 42%; margin-top: 30px; }
.boleta-dial { width: 50%; margin: 55px 0 0; }
.urna-dial { width: 40%; margin-top: 50px; }

.herra-responde { background: #5E686F; color: #FFF; margin: 90px 0; padding: 50px 0; position: relative; }
.herra-responde .herra-descr, .herra-boleta .herra-descr { margin: 20px 0; width: 100%; font-size: 20px; }

.herra-boleta { margin-bottom: 90px; position: relative; }

.herra-urna { background: url("../../images-source/imgs/bg_contacto_EAR_dialogemos_Mesa_de_trabajo_1.jpg") center bottom no-repeat; background-size: cover; padding: 40px 0; position: relative; }
.herra-urna .herra-title-gen { font-size: 45px; }
.herra-urna .herra-descr { margin: 20px 0 80px; width: 100%; font-size: 20px; }

.herra-urna input, .herra-urna textarea { width: 100%; padding: 15px; border: none; margin-bottom: 43px; }
.herra-urna .webform-component { width: 47%; float: left; }
.herra-urna .webform-component-email { float: none }
.herra-urna .webform-component-textarea { position: absolute; right: 0; top: 5px; }
.herra-urna .form-actions, .herra-urna .form-submit { background: #2BB5A1; width: 180px; margin: 0 auto; color: #FFF; font-size: 26px; font-weight: bold; cursor: pointer; padding: 5px 15px; }
.herra-urna .form-actions { background: transparent; }

.icon-herra-buzon, .icon-herra-boleta, .icon-herra-urna { width: 80px; height: 80px; border-radius: 100px; background: #2BB5A1; position: absolute; right: 0; top: 50px; }
.icon-herra-boleta { top: 115px; }
.icon-herra-boleta .encuesta-dial { width: 47%; margin-top: 15px; }
.icon-herra-boleta .boleta-dial { margin: 18px 0 0; }
.icon-herra-urna { top: 0; }
.icon-herra-urna .urna-dial { margin-top: 15px; width: 65%; }


.dialoguemos { height: auto; padding: 40px 0 0; }
.bubble {
    position: relative;
    width: 195px;
    height: 125px;
    padding: 25px;
    background: #2BB5A1;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 20px;
    border: #2BB5A1 solid 4px;
    color: #FFF;
    font-size: 12px;
    text-align: center;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 32px 11px 0;
    border-color: #2BB5A1 transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -32px;
    left: 131px;
}

.bubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 35px 14px 0;
    border-color: #2BB5A1 transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -39px;
    left: 128px;
}
.chica-uno { background: url("../../images-source/imgs/Personaje_1.png") center bottom no-repeat; background-size: contain; height: 450px; }
.chico { background: url("../../images-source/imgs/im_mono2_EAR_dialogemos.png") center bottom no-repeat; background-size: contain; height: 450px; }
.chico .bubble { background: #C9801E; border: #C9801E solid 4px; }
.chico .bubble:before, .chico .bubble:after { border-color: #C9801E transparent; }
.chica-dos { background: url("../../images-source/imgs/Personaje_2.png") center bottom no-repeat; background-size: contain; height: 450px; }

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .dialogo { height: 730px; }
    .dialogo img { bottom: -374px; left: 0; }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .dialogo h1 { font-size: 31px; }
    .dialogo p { font-size: 19px; line-height: 25px; }
    .dialogo { height: 545px; }
    .dialogo img { bottom: -274px; left: 0; }

    .porque-dialogo { height: auto; }

    .herra-descr { width: 80%; margin: 40px auto 50px; }

    .herra-title-gen { font-size: 22px; }
    .herra-urna .herra-title-gen { font-size: 30px; }
    .dialoguemos { padding: 40px 0 0; height: auto; }
    .chica-uno, .chico, .chica-dos { margin-bottom: 60px; }
    .herra-urna {  }
    .herra-urna .webform-component { width: 100%; }
    .herra-urna .webform-component-textarea { position: initial; }
    .herra-urna .herra-descr { margin: 20px 0 30px; }
    .herra-urna .form-actions, .herra-urna .form-submit { width: 80%; }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .dialogo { height: 515px; }
    .dialogo img { bottom: -219px; left: 0; }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    .dialogo { height: 627px; }
    .dialogo img { bottom: -194px; left: 0; }
}