@import url('https://fonts.googleapis.com/css?family=Livvic:400,600,900&display=swap');
@font-face {
    font-family: 'Helvetica';
    src: url("/fonts/Helvetica/Helvetica.ttc");
}


/* Inicio */

@keyframes body {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes body {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes body {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes body {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes body {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes gallery {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes gallery {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes gallery {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes gallery {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes gallery {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/*#gallery:hover > button {
    animation:gallery 1s ease;
    -webkit-animation:gallery 1s ease;
    -moz-animation:gallery 1s ease;
    -ms-animation:gallery 1s ease;
    -o-animation:gallery 1s ease;
}*/

@keyframes galleryOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes galleryOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes galleryOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes galleryOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes galleryOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#gallery>button {
    animation: galleryOut 1s ease;
    -webkit-animation: galleryOut 1s ease;
    -moz-animation: galleryOut 1s ease;
    -ms-animation: galleryOut 1s ease;
    -o-animation: galleryOut 1s ease;
}


/* Highlights */

#gallery {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 50vw;
}

.pageTitle {
    color: black;
    font-family: 'Montserrat';
    font-size: 30px;
    line-height: 100px;
    margin-left: 50px;
    font-weight: 900;
    display: flex;
    position: relative;
    text-align: center;
    vertical-align: middle;
}


/*#gallery:hover > button {
    opacity: 1;
}*/

#gallery button {
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 10%;
    border: none;
    opacity: 1;
}

#gallery button i {
    font-size: 5vw;
}

#gallery #backward {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
}

#gallery #forward {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
}

#imgFoward {
    width: 3vw;
    height: 3vw;
    margin-right: 2vw;
}

#imgBackward {
    width: 3vw;
    height: 3vw;
    margin-left: 2vw;
    /* margin-top: 1vw; */
}

.imgs {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}

#img2 {
    opacity: 0;
}

#img3 {
    opacity: 0;
}

#highlightTitle {
    position: absolute;
    width: 100%;
    font-weight: bold;
    font-size: 4.5vw;
    text-align: center;
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(0.1vw 0.1vw 0.1vw #666);
    top: 1.5vw;
}

#highlightSubtitle {
    position: absolute;
    width: 100%;
    font-weight: bold;
    font-size: 3vw;
    text-align: center;
    text-transform: uppercase;
    color: white;
    filter: drop-shadow(0.1vw 0.1vw 0.1vw #666);
    top: 7vw;
}


/* Index */

#disclaimer {
    width: 80%;
    color: white;
    font-family: 'Livvic', sans-serif;
    font-size: 15px;
    float: left;
}

#disclaimerContainer {
    width: 100%;
    float: left;
}

#disclaimerCheckbox {
    -webkit-appearance: checkbox;
}

#contentForm #formTitle,
#contentFormWithMap #formTitle,
#indexTitle h1,
#indexTitle h2,
#divDate,
.titleSection,
#divLocationTop {
    font-weight: bold;
    letter-spacing: 0.1vw;
    text-align: center;
    font-size: 1.5vw;
}

#barTimeLimit {
    width: 100%;
    padding: 0 38.5vw;
    height: 5vw;
    margin: 0 auto;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 2vw;
    position: relative;
}

#barTimeLimit p {
    position: relative;
    float: left;
    margin-top: 2vw;
    font-size: 1.5vw;
}

#bloqueDia {
    position: relative;
    float: left;
    width: 3vw;
    height: 3vw;
    border-radius: 0.5vw;
    background-color: white;
    margin: 2vw 1vw;
    color: black;
    margin-top: 1vw;
}

#bloqueDia p2 {
    line-height: 1.9;
    text-align: center;
    font-weight: bold;
    font-size: 1.7vw;
}

#indexTitle {
    width: 100%;
    margin-top: 5vw;
    font-weight: bold;
    text-align: center;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.5);
    /*border-bottom: thin solid black;*/
    z-index: 999;
}

#indexTitle h1 {
    text-transform: uppercase;
    width: 64%;
    margin-top: 3vw;
    font-size: 2.5vw;
    text-align: center;
    margin-left: 17vw;
}

#indexTitle h2 {
    font-size: 1.5vw;
    letter-spacing: 0.5px;
}

#linea1 {
    margin: 0 auto;
    margin-top: 2vw;
    width: 15vw;
    height: 1vw;
    background-image: url(/files/images/Linea_1.png);
    background-size: 100%;
}

#linea2 {
    margin-left: 0.1vw;
    width: 8vw;
    height: 0.5vw;
    background-image: url('/files/images/Linea_2.png');
    background-size: 100%;
}

#lineaBlanca {
    margin-left: 35.5vw;
    width: 6vw;
    height: 1vw;
    background-image: url(/files/images/LineaBlanca.png);
    margin-top: -2vw;
    background-size: 100%;
}

#divIndexInformation {
    margin-top: 2.5vw;
    font-size: 1.5vw;
    line-height: 2vw;
    text-align: center;
}

#textInfo {
    width: 65%;
    margin: 0 auto;
    margin-top: 2.5vw;
    font-size: 1.35vw;
    font-weight: 200;
}


/* Sections View */

.divSection {
    padding: 2.5%;
    height: auto;
    margin-left: 15vw;
    margin-top: 2.5vw;
    /*    border-bottom: solid thin black;
    background-color: #f9f9ef;*/
    overflow: hidden;
    width: 80%;
}

.imageSection {
    float: left;
    width: 23vw;
    ;
    height: 25vw;
    ;
    background-size: cover;
}

.divSection:nth-child(even) .imageSection {
    float: right;
    margin-right: 15vw;
}

.titleSection {
    font-size: 1.5vw;
    text-align: left;
    width: 13vw;
}

.textSection {
    position: relative;
    margin-left: 5%;
    float: left;
}

.divSection:nth-child(even) .textSection {
    float: left;
    margin-right: 5%;
    margin-right: 5vw;
    text-align: right;
    width: 36%;
}

.divSection:nth-child(even) .titleSection {
    float: right;
    text-align: right;
}

.divSection:nth-child(even) #linea2 {
    float: right;
}

.divSection:nth-child(odd) .titleSection {
    margin-right: 15vw;
}

.divSection:nth-child(even) .infoSection {
    float: right;
    text-align: right;
}

.infoSection {
    position: relative;
    margin-top: 5%;
    font-size: 1.35vw;
    width: 28vw;
    text-align: left;
    line-height: 2vw;
    font-weight: 200;
}


/* Form View sin Mapa */

#contentForm {
    margin-top: 15vw;
    position: relative;
    /*    margin-left:25vw;*/
    background-image: url("/files/images/Foto_2.jpg");
    background-size: 102%;
    /*    width:50vw;*/
    /*    border-radius: 4vw;
        padding-right: 10px;
        padding-left: 10px;*/
    height: 48vw;
}

#contentForm #formTitle {
    text-transform: uppercase;
    position: relative;
    color: white;
    font-size: 5vw;
    padding-top: 2.5vw;
    text-align: center;
    margin-left: 5vw;
}

#contentForm .rowForm {
    position: relative;
    height: 40px;
    margin-left: 10vw;
    margin-top: 4vw;
    width: 33%;
    float: left;
}

#contentForm .subscriberInput {
    background-color: transparent;
    color: white;
    width: 23vw;
}

::placeholder {
    /*    text-transform: uppercase;*/
    font-style: italic;
    color: white;
    opacity: 1;
}

#contentForm .rowFormName {
    position: relative;
    float: left;
    width: 10%;
}

#contentForm .rowFormInput {
    position: relative;
    width: 17vw;
    padding: 1vw;
    border-width: 1px;
    margin-left: 6.5vw;
    border-color: transparent;
    border-bottom: #fdfafa solid thin;
}

#contentForm .rowFormName {
    color: white;
    font-size: 2vw;
}


/*#contentForm .rowForm:nth-child(even) .rowFormName{
    margin-left: 50vw;
    float:right;
}
#contentForm .rowForm:nth-child(even) .rowFormInput{
    margin-left: 50vw;
    float:right;
}*/


/*#contentForm .rowForm:nth-child(even){
    margin-left: 50vw;
    top:0vw;
        
    float:right;
}*/

#contentForm #subscribe {
    margin-left: 42vw;
    margin-bottom: 10vw;
    width: 11vw;
    height: 3.5vw;
    line-height: 2.5vw;
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    border-radius: 1vw;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    display: block;
    font-size: 1.9vw;
    margin-top: 30px;
    margin-bottom: 30px;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    text-transform: uppercase;
    font-weight: normal;
    background-color: white;
    color: black;
    border: solid;
    border-color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#contentForm #subscribe:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 0.8;
}

#contentForm #formTitle h1 {
    font-size: 3vw;
    width: 90%;
    height: 5.0vw;
    /*background-color: #def7de;*/
}

#contentForm .rowFormName p {
    font-size: 1.5vw;
    width: 100%;
    height: 3.0vw;
}

#contentForm #botonSubscribe {
    width: 60vw;
    margin-right: 5vw;
    /* margin-bottom: 15px; */
    /* margin-top: 348px; */
    overflow: hidden;
}


/* Form View con Mapa */

#map {
    height: 35vw;
    width: 80%;
    margin-left: 9vw;
    margin-top: 2vw;
    position: relative;
}

#mapContainer {
    height: 40vw;
    width: 50%;
    position: relative;
    float: left;
}

#contentFormWithMap {
    margin-top: 5vw;
    padding-bottom: 2.5vw;
    position: relative;
    float: left;
    background-color: black;
    width: 100%;
    /*    width:50vw;*/
    /*    border-radius: 4vw;
        padding-right: 10px;
        padding-left: 10px;*/
}

#contentFormRight {
    position: relative;
    float: left;
    width: 50%;
}

#contentFormWithMap #formTitle {
    text-transform: uppercase;
    position: relative;
    color: white;
    font-size: 5vw;
    margin-top: 3.5vw;
}

#contentFormWithMap .rowForm {
    position: relative;
    height: 47px;
    margin-left: 10vw;
    margin-top: 2vw;
    width: 40vw;
}

#contentFormWithMap .subscriberInput {
    background-color: transparent;
    color: white;
    width: 23vw;
}

#contentFormWithMap .rowFormName {
    position: relative;
    float: left;
    width: 10%;
}

#contentFormWithMap .rowFormInput {
    position: relative;
    width: 23vw;
    ;
    border-width: 1px;
    margin-left: 1.5vw;
    padding: 1vw;
    border-color: transparent;
    border-bottom: #635e5e solid thin;
}

#contentFormWithMap .rowFormName {
    color: white;
    font-size: 2vw;
}

#contentFormWithMap #subscribe {
    margin-bottom: 10vw;
    width: 11vw;
    height: 2.5vw;
    line-height: 2.3vw;
    text-align: center;
    font-weight: bold;
    font-size: 4vw;
    border-radius: 1vw;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    display: block;
    font-size: 0.9vw;
    margin-top: 30px;
    margin-bottom: 30px;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    font-weight: normal;
    background-color: white;
    color: black;
    border: solid;
    border-color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 19vw;
    font-weight: bold;
}

#contentFormWithMap #subscribe:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 0.8;
}

#contentFormWithMap #formTitle h1 {
    font-size: 3vw;
    width: 90%;
    height: 5.0vw;
    /*background-color: #def7de;*/
}

#contentFormWithMap .rowFormName p {
    font-size: 1.5vw;
    width: 100%;
    height: 3.0vw;
}

#contentFormWithMap #botonSubscribe {
    width: fit-content;
    margin-right: 5vw;
}

#topBar {
    position: absolute;
    width: 100%;
    height: 70px;
    left: 0px;
    top: 0px;
    background-color: white;
    -webkit-box-shadow: -8px 8px 15px -10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: -8px 8px 15px -10px rgba(0, 0, 0, 0.7);
    box-shadow: -8px 8px 15px -10px rgba(0, 0, 0, 0.5);
}

#topBarLogoContainer {
    position: relative;
    float: left;
    height: 50px;
    margin-top: 0px;
}

#topBarLogo {
    position: relative;
    height: 115%;
    display: block;
    margin-left: 10px;
    margin-top: 11px;
}


/*#topBarLogo:hover{
    height: 115%;
}*/

.header-nav-button-container {
    position: relative;
    width: 245px;
    display: inline-block;
    height: 100%;
    height: 50px;
    margin-top: 21px;
    overflow: hidden;
}

.skyBlueLineHeader {
    height: 9px;
    width: 90%;
    position: absolute;
    background-color: #6cd2e8;
    bottom: 0px;
    left: 5%;
    opacity: 0;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.selected .skyBlueLineHeader,
.skyBlueLineHeader.shown {
    opacity: 1;
    bottom: 20px;
}

.header-nav-button {
    display: block;
    text-align: center;
    -webkit-transition: all 0.3s ease-out;
    overflow: hidden;
    font-size: 16px;
    height: 22px;
    height: auto;
    color: black;
    font-family: 'Livvic', sans-serif;
    font-weight: 900 !important;
    max-width: 346px;
    width: 100%;
}


/*.header-nav-button:hover {
color: #6cd2e8;
}*/

.header-indicator-team {
    background-color: white;
    height: 1px;
    margin-top: 4px;
    width: 0px;
    display: inline-block;
    -webkit-transition: width 0.2s;
    /* For Safari 3.1 to 6.0 */
    transition: width 0.2s;
    display: inline-block;
}

.header-team:hover+.header-indicator-team {
    width: 50px;
}

.header {
    position: fixed;
    width: 96%;
    height: 88px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 11;
    color: white;
    padding-left: 0%;
    padding-right: 0%;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    z-index: 49;
    text-align: center;
    padding-left: 1%;
    padding-right: 3%;
    background-color: white;
    -webkit-box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 25%);
}

#headerBotonsContainer {
    width: 100%;
    margin-top: 17px;
}

.main-logo-container {
    background-size: contain;
    overflow: hidden;
    background-repeat: no-repeat;
    position: absolute;
    background-color: transparent;
    background-position: center center;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

#headerDummy {
    position: relative;
    width: 100%;
    height: 86px;
    overflow: hidden;
    display: block;
}

#footerDummy {
    position: relative;
    width: 100%;
    height: 47px;
    /* background-color: gray; */
}

.adminSaveButton {
    margin: 0px auto;
    padding: 0px;
    height: 34px;
    width: 95px;
    line-height: 31px;
    text-align: center;
    border-radius: 47px;
    position: relative;
    display: block;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Livvic', sans-serif;
    font-weight: bolder;
    background-color: #f79324;
    color: white;
    border: none;
    font-size: 14px;
}

.adminSaveButton:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*    opacity:0.8;*/
}

#imageIndexSite {
    width: 100%;
    height: fit-content;
    position: relative;
}

#skyblueImageBar {
    width: 100%;
    height: 92px;
    background-color: #6cd2e8;
    position: relative;
    color: white;
    text-align: center;
    font-size: 33px;
    font-family: 'Livvic', sans-serif;
    line-height: 95px;
    font-weight: bolder;
    top: -5px;
}

#highlightImage {
    width: 100%;
}

#explicationIconsContainer {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.iconIndex {
    width: 253px;
    float: left;
    margin-left: 15px;
}

#expIcons {
    height: 368px;
    width: fit-content;
    margin: 0px auto;
    margin-top: 11vw;
    overflow: hidden;
    margin-bottom: 5vw;
    position: relative;
}

#helpBotonsDiv {
    background-image: url('/files/backgroundOrangeIndex.svg');
    width: 106%;
    background-repeat: no-repeat;
    height: 581px;
    background-size: cover;
    overflow: hidden;
    margin-left: -17px;
}

#helpTitle {
    width: auto;
    color: #ffecec;
    text-align: center;
    font-size: 58px;
    font-family: 'Livvic', sans-serif;
    line-height: 70px;
    font-weight: 700;
    margin-top: 94px;
}

.helpTitleLine {
    height: auto;
}

.explanationText {
    font-family: 'Livvic', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    margin-top: 13px;
}

.helpBoton {
    margin: 0px auto;
    padding: 0px;
    height: 113px;
    width: 372px;
    line-height: 31px;
    text-align: center;
    border-radius: 73px;
    position: relative;
    display: block;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Livvic', sans-serif;
    font-weight: bolder;
    background-color: #faaf3b;
    color: white;
    border: none;
    font-size: 14px;
    float: left;
    /*margin-left: 67px;*/
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.helpBoton:hover {
    cursor: pointer;
    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
}

#helpBotons {
    margin-top: 11vw;
    height: 114px;
    width: fit-content;
    position: relative;
    margin: 0px auto;
    /* overflow: hidden; */
    margin-top: 96px;
}

.helpBotonText {
    font-size: 30px;
    color: #ffecec;
}

.botonHelpUpText {
    letter-spacing: 7px;
    font-size: 19px;
    font-weight: 500;
    color: #c88c2f;
}

.PageTitle {
    font-family: 'Livvic', sans-serif;
    font-weight: bolder;
    color: #6cd2e8;
    font-size: 40px;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 95px;
    width: fit-content;
    height: 48px;
    margin-bottom: 12px;
}

.pageSubtitle {
    width: 100%;
    text-align: center;
    font-family: 'Livvic', sans-serif;
    color: #b2b2b2;
    font-size: 24px;
}

#recibirAlimentosDiv {
    width: 102%;
    margin-left: -16px;
    height: 1000px;
    background-image: url(/files/fondoNaranja.svg);
    background-repeat: no-repeat;
    margin-top: 40px;
    background-size: cover;
    background-position: bottom;
    position: relative;
    overflow: hidden;
}

.hacemosIzq {
    float: left;
    width: 90%;
    background-color: #6cd2e8;
    height: 300px;
    border-radius: 0px 35px 35px 0px;
    margin-bottom: 40px
}

.hacemosDer {
    float: right;
    width: 90%;
    background-color: #ff8e00;
    height: 300px;
    border-radius: 35px 0px 0px 35px;
    margin-bottom: 40px;
}

#queHacemosContent {
    width: 100%;
    height: auto;
}

.imageLeft {
    float: left;
    height: 100%;
    width: 40%;
    background-size: cover;
}

.imageRight {
    float: right;
    height: 100%;
    width: 40%;
    background-size: cover;
}

.hacemosTextoLeft {
    float: left;
    font-family: 'Livvic', sans-serif;
    color: white;
    width: 50%;
    height: 80%;
    margin-top: 62px;
    margin-left: 62px;
}

.hacemosTextoRight {
    float: right;
    font-family: 'Livvic', sans-serif;
    color: white;
    width: 50%;
    height: 80%;
    margin-top: 62px;
    margin-right: 25px;
}

.titleHacemos {
    font-size: 32px;
    text-transform: uppercase;
}

.textoHacemos {
    font-size: 21px;
    margin-top: 21px;
}

#donaBotonHeader {
    margin-top: -18px;
    margin-left: 9px;
    height: 125%;
    width: 10%;
    float: right;
    background-repeat: no-repeat;
    background-image: url('/files/Asset 6.svg');
}

#transparenciaOptionsContainer {
    float: left;
    width: 10%;
    margin-left: 93px;
}

.optionTransparencia {
    width: 100%;
    font-family: 'Livvic', sans-serif;
    color: #767676;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: bold;
}

#transparenciaMensaje {
    width: auto;
    font-family: 'Livvic', sans-serif;
    color: #767676;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: bold;
    text-align: center;
}

.tableTransparencia {
    float: left;
    width: 70%;
    margin-left: 20px;
    height: 100%;
}

.tableTransparenciaHeader {
    background-color: #ff8e00;
    border-radius: 8px 8px 0px 0px;
}

.tableBodyTransparencia {
    background-color: #dcf6ff;
}

.transparenciaTable tr {
    font-size: 25px;
    height: 40px;
    line-height: 53px;
}

.transparenciaTable td {
    border-right: 3px solid #c3e2ed;
    color: #a0acb0;
    text-align: center;
}

.tansparenciaTableContainer {
    width: 100%;
    height: 600px;
    margin-bottom: 50px;
}

.reciveForm {
    background-color: #6cd2e8;
    border-radius: 17px;
    width: 74%;
    height: 600px;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 109px;
}

.contactForm {
    background-color: #faaf3b;
    border-radius: 17px;
    width: 70%;
    height: 510px;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 101px;
}

.formTitle {
    font-family: 'Livvic', sans-serif;
    width: 62%;
    margin: 0px auto;
    margin-top: 39px;
    color: white;
    font-size: 29px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
}

.contactFormTitle {
    font-family: 'Livvic', sans-serif;
    width: 67%;
    float: left;
    margin-top: 39px;
    color: white;
    font-size: 27px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
}

#messageTextArea {
    width: 77%;
    height: 100px;
    resize: none;
}

.formButton {
    background-color: #ffffff;
    text-align: center;
    font-family: 'Livvic', sans-serif;
    color: #6cd2e8;
    width: 170px;
    height: 50px;
    border: none;
    border-radius: 12px;
    font-size: 28px;
    font-weight: 700;
}

.formButton:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.divformButton {
    float: right;
    width: fit-content;
    margin-top: 25px;
    margin-right: 16vw;
}

#divDonarSubscripcion {
    width: 103%;
    height: 567px;
    background-image: url(/files/backgroundOrangeIndex.svg);
    margin-left: -14px;
    background-size: cover;
    margin-top: 70px;
    position: relative;
    overflow: hidden;
}

#divDonarProductos {
    width: 100%;
    height: 600px;
    background-image: url(/files/fondoceleste.svg);
    position: relative;
    overflow: hidden;
}

#subsrcipcionForm {
    background-color: #6cd2e8;
    border-radius: 17px;
    width: 70%;
    height: 312px;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 125px;
}

.subheadingDonate {
    font-family: 'Livvic', sans-serif;
    letter-spacing: 7px;
    font-size: 21px;
    font-weight: 500;
    color: #56a8b9;
    float: left;
    line-height: 31px;
}

.donateTitleForm {
    font-family: 'Livvic', sans-serif;
    width: 62%;
    margin: 0px auto;
    color: white;
    font-size: 29px;
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
    float: left;
}

.titleContainerForm {
    width: 100%;
    height: auto;
    margin-top: 32px;
    margin-left: 28px;
}

.inputFormSkyBlue {
    border-radius: 10px;
    background-color: #eef9fc;
    font-family: 'Livvic', sans-serif;
    width: 50%;
    margin-right: 18%;
    height: 33px;
    /*    margin-top: 8%;*/
    text-indent: 12px;
    float: left;
    margin-left: 12px;
}

.formInputsContainer {
    width: 80%;
    height: auto;
    margin-left: 17%;
    margin-top: 100px;
}

.inputName {
    color: white;
    font-family: 'Livvic', sans-serif;
    font-size: 24px;
    float: left;
    width: 150px;
}

.proximamenteMessage {
    color: white;
    font-family: 'Livvic', sans-serif;
    font-size: 24px;
    float: left;
    width: 300px;
}

.inputNameDownload {
    color: white;
    font-family: 'Livvic', sans-serif;
    font-size: 24px;
    float: left;
    width: 400px;
}

.inputContainer {
    width: 73%;
    margin-top: 8px;
    height: 40px;
}

.FMFileUploadFrame {
    background-image: url(/files/uploadFile.svg);
    width: 26px;
    height: 35px;
    background-repeat: no-repeat;
}

#fileName {
    width: auto;
    float: left;
    margin-left: -150px;
    color: white;
    font-family: 'Livvic', sans-serif;
    line-height: 28px;
}


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

body {
    position: absolute;
    min-height: 100%;
}

#content {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #ffffff;
}

button {
    width: 30%;
    height: 3vw;
    color: white;
}

button:hover {
    cursor: pointer;
}

button:active {
    background-color: #707070;
}

.widthContainer {
    position: relative;
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    text-align: left;
}

#alertMessageLogo {
    width: 55%;
}

.mobileElement {
    display: none;
}

.centerWrapper {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
}

@media screen and (max-width:768px) {
    html {
        width: 100%;
        height: auto;
        min-height: 100%;
        position: relative;
    }
    .centeredContent,
    .widthContainer {
        width: 90% !important;
    }
    .mobileElement {
        display: block;
    }
    .desktopElement {
        display: none !important;
    }
    #content {
        min-width: 0px;
    }
    .responsiveElement {
        min-width: 0px !important;
    }
    #loaderDiv {
        position: relative;
        margin: 0px auto;
        top: calc(50% - 20px);
        width: 40px;
    }
}

#registerContent {
    margin: 0 auto;
    width: 230px;
    margin-top: 30px;
    border: solid thin lightgrey;
    font-family: sans-serif;
}

#registerTitulo {
    margin: 0 auto;
    width: 80%;
    height: 30px;
    margin-top: 5%;
}

.registerdivDatos {
    margin: 0 auto;
    width: 80%;
    height: 60px;
}

#botonRegistro:active {
    background-color: darkgreen;
}

#botonRegistro {
    background-color: #313131;
    border: solid thin darkgrey;
    color: white;
    margin: 0 auto;
    width: 50%;
    float: right;
    margin-top: 5%;
}

#eventLocation {
    color: white;
    font-family: Helvetica;
    margin-top: 1.5vw;
    margin-right: 2vw;
    font-size: 1.2vw;
    font-weight: lighter;
    float: right;
}

@media screen and (max-width: 768px) {
    #gallery {
        height: 70vw;
    }
    #mapContainer {
        height: 54vw;
        width: 102%;
    }
    #contentFormRight {
        width: 100%;
        margin-top: 21vw;
    }
    #contentFormWithMap .rowFormInput {
        width: 64vw;
    }
    #contentFormWithMap #subscribe {
        width: 36vw;
        height: 13.5vw;
        margin-left: 30vw;
        font-size: 5vw;
    }
    .imageSection {
        float: left;
        width: 80vw;
        height: 44vw;
    }
    .divSection:nth-child(even) .imageSection {
        float: left;
    }
    .divSection:nth-child(even) .textSection {
        float: left;
    }
    .textSection {
        margin-top: 4vw;
    }
    .infoSection {
        font-size: 3.5vw;
        width: 62vw;
        position: relative;
        line-height: 4.5vw;
    }
    .titleSection {
        font-size: 5vw;
        position: relative;
        text-align: left;
    }
    #textInfo {
        font-size: 4vw;
        width: 80%;
        line-height: 6.4vw;
        margin-top: 6.5vw;
    }
    .divSection {
        margin-left: 8vw;
    }
    #indexTitle h2 {
        font-size: 4vw;
    }
    #indexTitle h1 {
        font-size: 6vw;
        line-height: 10vw;
        margin-top: 7vw;
    }
    #divDate,
    #divLocationTop {
        font-size: 4vw;
        margin-top: 5vw;
    }
    #contentFormWithMap .subscriberInput {
        width: 38vw;
    }
    #map {
        height: 69vw;
    }
    #contentFormWithMap #formTitle h1 {
        font-size: 7vw;
    }
    #contentFormWithMap #formTitle {
        margin-top: 7.5vw;
    }
    #eventLocation {
        font-size: 4vw;
    }
    #contentForm #botonSubscribe {
        margin-top: 124px;
    }
    #contentForm {
        /*            background-size: 136%;
                        height: 63vw;*/
        background-size: 396%;
        height: fit-content;
    }
    #contentForm #subscribe {
        width: 36vw;
        height: 13.5vw;
        margin-left: 25vw;
        font-size: 6vw;
        margin-top: 4vw;
    }
    #contentForm .subscriberInput {
        width: 34vw;
    }
    #imgBackward {
        margin-left: -1vw;
        margin-bottom: 1.5px;
        width: 8vw;
        height: 8vw;
    }
    #imgFoward {
        width: 8vw;
        height: 8vw;
        margin-right: 22px;
    }
    #gallery button {
        width: 14%;
    }
    #barTimeLimit {
        padding-left: 23vw;
        height: 8vw;
    }
    #barTimeLimit p {
        font-size: 4vw;
    }
    #bloqueDia {
        margin: 3vw 1vw;
        height: 4vw;
        margin-top: 1.9vw;
        line-height: 3vw;
        font-size: 3vw;
    }
    #contentForm #formTitle h1 {
        font-size: 8vw;
    }
    #lineaBlanca {
        margin-left: 19.5vw;
        width: 16vw;
        height: 2.5vw;
        margin-top: 5vw;
    }
    #contentForm .rowForm {
        margin-top: 10vw;
        width: 41vw;
    }
    #contentForm .rowFormInput {
        width: 62vw;
    }
    #bloqueDia p2 {
        font-size: 2vw;
    }
    .titleSection h1 {
        width: 45vw;
    }
    .divSection:nth-child(even) .titleSection {
        margin-left: 0vw;
    }
    #indexTitle {
        margin-top: 13vw;
    }
    #map {
        width: 100%;
        margin-left: 0vw;
        margin-top: 0vw;
    }
    .divSection:nth-child(even) .textSection {
        float: left;
        text-align: left;
        width: 75%;
    }
    .divSection:nth-child(even) .titleSection {
        float: left;
        text-align: left;
    }
    .divSection:nth-child(even) #linea2 {
        float: right;
    }
    .divSection:nth-child(odd) .titleSection {
        margin-right: 15vw;
    }
    .divSection:nth-child(even) .infoSection {
        float: right;
        text-align: left;
        right: 0;
        width: 100%;
    }
    #headerBotonsContainer {
        display: none;
    }
    #topBarLogoContainer {
        height: 73px;
        margin-top: -12px;
        margin-right: 72px;
    }
    #topBarLogo {
        height: 105%;
        margin-top: 16px;
    }
    #expIcons {
        height: 1090px;
    }
    .iconIndex {
        margin-left: 11%;
        margin-bottom: 28px;
    }
    #recibeIcon {
        margin-left: 15%;
    }
    #skyblueImageBar {
        font-size: 14px;
        height: 50px;
        line-height: 50px;
    }
    #helpBotonsDiv {
        height: 1001px;
        margin-bottom: -15px;
    }
    .helpBoton {
        height: 91px;
        width: 290px;
        margin-top: 20px;
        margin-left: 85px;
        margin-bottom: 70px;
    }
    .botonHelpUpText {
        font-size: 17px;
    }
    .helpBotonText {
        font-size: 21px;
    }
    #helpBotons {
        margin-left: -25px;
    }
    .contactForm {
        width: 92%;
        height: auto;
    }
    .contactFormTitle {
        width: 95%;
    }
    .donateTitleForm {
        height: auto;
        margin-bottom: 20px;
    }
    #recibirAlimentosDiv {
        width: 108%;
        height: 1300px;
    }
    .reciveForm {
        width: 82%;
        height: auto;
    }
    #divDonarProductos {
        height: 728px;
        margin-top: -7px;
        background-position: center;
        background-size: cover;
    }
    #divDonarSubscripcion {
        height: 608px;
        margin-left: -9px;
    }
    #subsrcipcionForm {
        width: 83%;
    }
    .hacemosIzq {
        width: 100%;
        border-radius: 0px;
        height: auto;
        margin-bottom: 0px;
    }
    .hacemosDer {
        width: 100%;
        border-radius: 0px;
        height: auto;
        margin-bottom: 0px;
    }
    .imageLeft {
        height: 193px;
        width: 100%;
    }
    .hacemosTextoLeft {
        width: 80%;
        height: 80%;
        margin-top: 0px;
        margin-left: 33px;
        margin-bottom: 20px;
    }
    .imageRight {
        height: 193px;
        width: 100%;
    }
    .hacemosTextoRight {
        width: 80%;
        height: 80%;
        margin-top: 0px;
        margin-left: 33px;
        margin-bottom: 20px;
    }
    #transparenciaMensaje {
        height: 410px;
    }
    #queHacemosContent {
        height: 2300px;
    }
    #videoContainer {
        height: 304px;
    }
    .formTitle {
        width: 100%;
    }
    .inputNameDownload {
        width: 85%;
    }
    .inputFormSkyBlue {
        width: 100%;
        margin: 0px auto;
    }
    .inputContainer {
        height: 40px;
        margin: 0px auto;
        margin-bottom: 40px;
    }
    #disclaimerContainer {
        width: 138%;
        margin-bottom: 25px;
    }
    #messageTextArea {
        width: 100%;
    }
    .formButton {
        margin-bottom: 15px;
        margin-top: 20px;
    }
    .formInputsContainer {
        width: 100%;
        margin: 0px auto;
        margin-top: 143px;
    }
    .inputName {
        margin-left: 6%;
    }
    .proximamenteMessage {
        margin-left: 26px;
    }
    .desktopElement {
        display: none;
    }
    .divformButton {
        width: fit-content;
        margin-top: 25px;
        margin: 0px auto;
        float: none;
    }
    #disclaimer {
        margin-top: 23px;
    }
    .main-logo-container {
        background-position: left;
        height: 100%;
    }
    #imageIndexSite {
        height: 250px;
    }
}