/*  TYPOGRAFY */


/* vietnamese */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Multicolore';
    src="fonts/Multicolore.otf";
}


/* 
  DEFINITION FOR TYPOGRAPHY FLUID VW.
--------------------------------------- */

html {
    font-size: 16px;
    font-size: calc(16px + (24 - 16) * ((100vw - 356px) / (2560 - 356)));
}

@media Screen and (max-width: 356px) {
    .fluid {
        font-size: 16px
    }
}

@media Screen and (min-width: 992px) {
    .fluid {
        font-size: 24px
    }
}


/*
  CAROUSEL
----------------------------------------------- */

.background_header {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 60vh;
}

.carousel {
    z-index: 1;
}

.carousel-item,
.d-block {
    height: 60vh;
    /* Era 650px */
}

.img_carousel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: inline-flex;
}


/* Estilos para mensajes de error */

.msg_ok {
    color: green;
}

.msg_fail {
    color: red;
}


/* Esto es modificación del estilo de Bootstrap*/

.carousel-item:after {
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.logo_float_center {
    content: "";
    display: block;
    position: absolute;
    z-index: 5;
    height: 60vh;
    width: 100%;
}

.img_logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15vh;
    margin-bottom: auto;
    width: 200px;
}

@media screen and (min-width: 320px) and (min-width: 575px) {
    .img_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: auto;
        z-index: 6;
        width: 25vh;
    }
}

@media screen and (min-width: 320px) and (min-width: 575px) and (orientation: landscape) {
    .img_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: auto;
        z-index: 6;
        width: 40vh;
    }
}

@media screen and (min-width: 576px) and (min-width: 991px) {
    .img_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: auto;
        z-index: 6;
        width: 30vh;
    }
}

@media screen and (min-width: 992px) {
    .img_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: auto;
        z-index: 6;
        width: 35vh;
    }
}


/* SELECTION
------------------------------------------------- */

::-moz-selection {
    color: white;
    background: rgba(123, 83, 181, 0.8);
}

::selection {
    color: white;
    background: rgba(123, 83, 181, 0.8);
}


/* NAVBAR 
  ----------------------------------------------- */

#navbar {
    overflow: hidden;
    background-color: #374355;
    height: 65px;
    z-index: 12;

}


/* Navbar links */

#navbar a {
    float: left;
    color: #9FADC1;
    /* color texto navbar */
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    font-family: 'Anton', sans-serif;
    display: block;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 3.3vh;
    margin-bottom: auto;
   
}

#navbar a:hover {
    background-color: #374355;
    color: #D73F8F;
    /* color hover texto navbar */
}


.container_home {
    padding: 0px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky+.container_home {
    padding-top: 60vh;
}

.navbar-right {
    float: right;
    margin-right: 20px;
}


/* 
  CONTAINER  HOME - GRID 01
----------------------------------- */

body {
    font-family: 'Roboto', sans-serif;
    color: #374355;
    font-size: 1rem;
}

.container-fluid_01 {
    padding-top: 100px;
    /*15vh; 60px navbar + 40px espaciado*/
    background-color: #f2f2f2;
}

.title_24h {
    margin-left: 15px;
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    color: #D73F8F;
}

.subtitle_left_col-lg_md-6 {
    margin-left: 15px;
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #374355;
    margin-bottom: 3vh;
}


/* LINKS 
----------------------------------- */

a.whatsapp,
a.whatsapp:link {
    color: #374355;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    @include hover {
        color: #374355;
        text-decoration: #7B53B5;
    }
}


/* 
  TITLES 
----------------------------------- */

#nosotros {
    padding-top: 50px;
}

.quienes_somos,
.title_que_hacemos,
.title_contact_left {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    color: #D73F8F;
}


/*@media only screen and*/

@media screen and (max-width: 768px) {
    .title_que_hacemos {
        margin-top: 50px;
    }
}

.compartir {
    margin-top: 20px;
    margin-bottom: -20px;
    margin-right: 10px;
}


/* DESCARGA LA APP
----------------------------------- */

#down_app {
    /*background-image: linear-gradient(45deg, #D73F8F, #7B53B5);*/
    background-color: #f2f2f2;
    margin-top: 50px;
    margin-bottom: 50px;
    height: auto;
}

.col2_app {
    position: relative;
    text-align: center;
    vertical-align: middle;
    line-height: 150px;
    display: block;
    padding: 50px;
}

.title_app {
    font-family: 'Anton', sans-serif;
    color: #D73F8F;
    font-size: 2.5rem;
    width: 500;
    text-transform: uppercase;
    text-align: center;
}

.text_app {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    color: #374355;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
}


/* 
  PLAYER 
----------------------------------- */

div.player-header {
    background-color: #141920;
    padding: 15px;
    text-align: center;
    height: 55px;
    position: relative;
    margin-top: 40px;
    cursor: pointer;
    color: white;
    font-family: "Lato", sans-serif;
}

div.player-header img#down {
    position: absolute;
    top: 23px;
    left: 15px;
    cursor: pointer;
}

div#player-top {
    position: relative;
}

div#player-top img[amplitude-main-song-info=true] {
    width: 100%;
    height: 370px;
}

div#player-progress-bar-container {
    width: 100%;
    height: 0px;
    background-color: #000;
    position: relative;
}

div#player-progress-bar-container progress#song-played-progress {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
    border: none;
    cursor: pointer;
    background: transparent;
}

div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-bar {
    background: none;
}

div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-value {
    background: white;
}

div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {
    background: white;
}

div#player-progress-bar-container progress#song-buffered-progress {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    border: none;
    background: transparent;
}

div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-bar {
    background: none;
}

div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-value {
    background-color: rgba(255, 255, 255, 0.5);
    transition: width 0.1s ease;
}

div#player-progress-bar-container progress#song-buffered-progress[value]::-moz-progress-bar {
    background: rgba(255, 255, 255, 0.5);
}


/* 
  PLAYER MIDLE CONTAINER 
----------------------------------- */

div#player-middle {
    /* topo del player*/
    background-image: linear-gradient(45deg, #D73F8F, #7B53B5);
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    position: relative;
}

div#player-middle div#time-container {
    color: white;
    width: 100%;
    background-color: #000;
    font-size: 14px;
    font-weight: bold;
}

div#player-middle div#time-container span.amplitude-duration-time {
    position: absolute;
    top: 5px;
    right: 5px;
}

div#player-middle div#time-container span.amplitude-current-time {
    position: absolute;
    top: 8px;
    left: 20px;
}

div#player-middle span.song-name {
    font-family: Lato, sans-serif;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 24px;
    display: block;
}

div#player-middle div.song-artist-album {
    opacity: 0.5;
    font-family: Lato, sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 16px;
}

div#player-bottom {
    background-color: #374355;
    /* corpo del player */
    padding-left: 25px;
    padding-right: 25px;
}

div#player-bottom div#control-container {
    height: 140px;
    padding-top: 40px;
    padding-bottom: 40px;
}

div#player-bottom div#control-container div#prev-container {
    width: 20%;
    float: left;
    height: 60px;
    padding-top: 18px;
}

div#player-bottom div#control-container div#play-pause-container {
    width: 20%;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
}

div#player-bottom div#control-container div#play-pause-container div#play-pause {
    width: 60px;
    height: 60px;
    cursor: pointer;
    margin: auto;
}

div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-playing {
    background: url("../img/pause.svg");
}

div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-paused {
    background: url("../img/play.svg");
}

div#player-bottom div#control-container::after {
    content: "";
    display: table;
    clear: both;
}

div#player-bottom div#volume-container {
    padding-bottom: 20px;
    text-align: center;
}

div#player-bottom div#volume-container img {
    display: block;
    float: left;
    margin-top: -9px;
}


/* Control de Volumen */

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
    width: calc(100% - 30px);
    -webkit-appearance: none;
    display: block;
    margin-left: 10px;
    float: right;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus {
    outline: none;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
    width: 75%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: #cfd8dc;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    background-color: #cfd8dc;
    cursor: pointer;
    margin-top: -8px;
    -webkit-appearance: none;
    border-radius: 20px;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
    background: #cfd8dc;
}


/* MOZ ____________________________ */

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: #cfd8dc;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    cursor: pointer;
    margin-top: -8px;
    -webkit-appearance: none;
    border-radius: 20px;
}


/* for moz add styles */

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-thumb {
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    cursor: pointer;
    /*margin-top: -8px;*/
    -webkit-appearance: none;
    border-radius: 20px;
}


/* Applying base CSS styles 
   https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/

input[type=range] {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #cfd8dc;
}

input[type=range]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}


/* Styling the Thumb  */


/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #343a40;
    height: 18px;
    width: 118px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    /*margin-top: -14px; 
  You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
    /* Add cool effects to your sliders! */
}


/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
    border: 1px solid #343a40;
    height: 18px;
    width: 18px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
}


/* All the same stuff for IE */

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
    border: 1px solid #343a40;
    height: 18px;
    width: 18px;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
}


/*  end MOZ ________________________________ */

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: #cfd8dc;
    border-width: 15px 0;
    color: transparent;
    border-color: #192029;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-lower {
    background: transparent;
    border-radius: 2.6px;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-upper {
    background: transparent;
    border-radius: 2.6px;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-thumb {
    height: 18px;
    width: 18px;
    background-color: white;
    cursor: pointer;
    margin-top: 0px;
    border: 20px;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
    background: #cfd8dc;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-upper {
    background: #cfd8dc;
}

div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-tooltip {
    display: none;
}

div#player-bottom div#volume-container:after {
    content: "";
    display: table;
    clear: both;
}

@-moz-document url-prefix() {
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
        margin-top: -10px;
    }
}

@supports (-ms-ime-align: auto) {
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
        margin-top: -4px;
        height: 30px;
        background-color: #192029 !important;
    }
}

@media all and (-ms-high-contrast: none) {
    div#player-bottom div#volume-container *::-ms-backdrop,
    div#radiophonic-player-container div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
        margin-top: -8px;
        background-color: white !important;
        background: white !important;
    }
}


/*
  END PLAYER MIDLE
  ---------------------------------------- */

div#radiophonic-player-container {
    position: relative;
    width: 100%;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.sharethis-inline-share-buttons {
    margin-top: 20px;
    float: left;
}

.shareText {
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    color: #6D7582;
    margin-top: 30px;
    float: left;
}

.shareText,
.sharebuttons {
    display: inline-block;
    margin-right: 10px;
}


/* / END PLAYER */


/* 
  SOCIAL MEDIA
---------------------------------------- */

.social-links {
    margin-left: 15px;
    margin-bottom: 50px;
}

.follow_we {
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    color: #D73F8F;
    margin-top: 30px;
}

.social-links a {
    margin-top: 60px;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 10px;
    /* distancia entre iconos */
}

.social-links a:hover {
    color: #fff;
}

.text_que_hacemos {
    font-family: 'Roboto', sans-serif;
    color: #374355;
    font-size: 1rem;
    padding-top: 5vh;
}


/* 
  CONTAINER  HOME - FEEDS
  ---------------------------------------- */

.container-fluid_feeds {
    background-color: #f2f2f2;
    padding-bottom: 50px;
}

.feeds {
    padding-left: 15px;
    padding-right: 15px;
}

.title_feeds_news {
    padding-top: 50px;
    padding-bottom: 50px;
    background: linear-gradient(45deg, #D73F8F, #7B53B5);
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #eee;
    /* PURPLE: */
}


/* 2020/08/08 */

.title_programacion {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #D73F8F;
}

.fotoFeed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    margin-bottom: 25px;
}

.title_feeds {
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    color: #7B53B5;
    padding-bottom: 2vh;
    text-align: left;
}

.feed_desc01,
.feed_desc01,
.feed_desc01 {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

.bloque_feeds {
    margin-top: 5vh;
    box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
    border-style: none;
    border-radius: 5px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 35px;
    background-color: #ffffff;
}

.link_feeds a {
    text-align: right;
    float: right;
    font-size: 1rem;
    color: #D73F8F;
    text-decoration: none;
}

.link_feeds a:hover {
    color: #7B53B5;
}


/* 
 CONTACT FORM CSS 
--------------------------------------------- */

.title_contact_left {
    margin-bottom: 5vh;
}

.contact-info {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #374355;
    margin-bottom: 10vh;
    margin-top: 5vh;
    line-height: 1.6;
}

.contact-info a:hover {
    color: #D73F8F;
}

#form01 {
    width: 100%;
    display: block;
}

#contact_form {
    margin-top: 10vh;
}

#contact {
    /* css para todo el bloque form */
    font-size: 0.8rem;
}

.text_contacto {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

#sent_mail,
.sent_mail_msg {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    color: #374355;
    padding-top: 2vh;
}

#fname,
#lname,
#email,
input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    background: #f2f2f2;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    border: none;
    /* Comportamiento espacio en blanco: 
     No agregar texto de sangría 
     https://css-tricks.com/almanac/properties/w/whitespace/ */
    white-space: nowrap;
    box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
    border-radius: 5px;
}

textarea {
    width: 100%;
    padding: 12px;
    background: #f2f2f2;
    margin-top: 6px;
    margin-bottom: 25px;
    resize: vertical;
    border: none;
    /* Comportamiento espacio en blanco: 
     No agregar texto de sangría 
     https://css-tricks.com/almanac/properties/w/whitespace/ */
    white-space: normal;
    box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
    border-radius: 5px;
    font-size: 16px;
}

input[type=submit] {
    background-color: #D73F8F;
    color: white;
    border: none;
    cursor: pointer;
    float: right;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-top: 10px;
    box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
    border-radius: 5px;
}

input[type=submit]:hover {
    background-color: #7B53B5;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

:-ms-input-placeholder {
    /* IE 10+ */
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

#subject {
    height: 200px;
}

.btn-form {
    text-align: center;
    float: right;
    padding: 15px;
}


/*
  CONTAINER  HOME - FOOTER 
  ---------------------------------------- */

#footer {
    background-color: #374355;
}

.footer_bloque {
    margin-top: 10vh;
    height: 15vh;
}

.text_copyright {
    font-family: Roboto;
    font-style: normal;
    padding-top: 7vh;
    font-size: 0.8rem;
    text-align: center;
    color: #eee;
    text-decoration: none;
}

#copy_link {
    font-family: Roboto;
    font-style: normal;
    font-size: 0.8rem;
}

.text_copyright a:link {
    color: #eee;
}

.text_copyright a:visited {
    color: #eee;
}

.text_copyright a:hover {
    color: #fff;
    text-decoration: none;
}

.text_copyright a:active {
    color: #eee;
}


/* Reproductor: mostrar correctamente información de título y artista */

.ellipsis {
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}


/*
   CSS ADMINISTRAR PAGES
------------------------------------------------- */


/* USER LOGIN 
------------------------------------------------- */


/* The Modal (background) */

.modal {
    display: none;
    position: fixed;
    z-index: 11;
    top: 0;
    width: 310px;
    height: auto;
    overflow: auto;
    /*background-color: rgba(0, 0, 0, 0.4); */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}

#xclose {
    font-size: 80px;
    font-weight: 100;
}


/* Modal Content Box: evitar conflicto con SCSS de bootstrap */

.rp_modal-content {
    background: linear-gradient(211.56deg, #D73F8F -8.24%, #7D33D5 148.02%);
    box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
    margin: 4% auto 15% auto;
    border: none;
    width: 310px;
    height: auto;
    overflow-y: visible;
}


/* The Close Button (x) */

.close {
    position: absolute;
    right: 25px;
    top: 15px;
    float: right;
    font-size: 50px;
    font-weight: 200;
    line-height: 1;
    color: #374355;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.close:hover,
.close:focus {
    color: #7B53B5;
    cursor: pointer;
}


/* Center the image and position the close button */

.imgcontainer {
    text-align: center;
    position: relative;
}

.avatar {
    width: 90px;
    height: 90px;
    margin-top: 70px;
    margin-bottom: 45px;
}

.admin_site {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    opacity: 0.5;
}

.container_user {
    text-align: center;
    padding-bottom: 10px;
}

.msg_error {
    background-color: #7B53B5;
    width: 85%;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
    font-family: Roboto;
    font-size: 0.6rem;
    font-style: normal;
    text-align: center;
    color: #f2f2f2;
    margin-left: auto;
    margin-right: auto;
}


/* Full-width input fields */

.logintext,
.loginpassword,
input[type=text],
input[type=password] {
    width: 85%;
    height: 50px;
    padding: 12px 12px 12px;
    margin-bottom: 16px;
    display: inline-block;
    /*box-sizing: none;*/
    font-size: 16px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
    border-style: none;
    border-radius: 5px;
}


/* Set a style for all buttons */

button.btnLogin {
    width: 85%;
    height: 45px;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    background: #D73F8F;
    box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
    border-radius: 5px;
}

button.btn-login:hover {
    opacity: 0.8;
}


/* Acceso privado tex */

.private {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 16px;
    text-align: center;
    color: #FCFCFC;
    opacity: 0.5;
    margin-top: 30px;
    margin-bottom: 20px;
}


/* Add Zoom Animation */

.animate {
    animation: zoom 0.6s
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}


/*
  MENU HAMBURGUER.
---------------------------------------------------- */


/* POSITION START MENU */


/* Debera estar al height: 60vh; fijo abajo del header */

#hmb_menu,
li {
    text-align: left;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Anton', sans-serif;
}

.bg-cover {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 0;
    transition: all 350ms ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.prompt {
    position: fixed;
    width: 100%;
    text-align: center;
    line-height: 114px;
    font-family: Georgia;
    color: #666;
}

.reveal {
    opacity: .85;
    display: block;
    pointer-events: auto;
    visibility: visible;
}

.hamburger-shell {
    margin: 0;
    position: fixed;
    overflow: hidden;
    width: 70px;
    height: 100px;
    left: calc(100% - 80px);
    top: 5px;
    z-index: 5;
}

.top,
.middle {
    position: absolute;
    width: 50px;
    height: 10px;
    background-color: #9FADC1;
    opacity: 0.8;
    transition: all 350ms ease-in-out;
    top: 20px;
}

.middle {
    top: 40px;
}

#admin_item {
    display: none;
}

#close_session_item {
    display: none;
}

#menu {
    position: fixed;
    left: calc(100% - 292px);
    top: 10px;
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    display: none;
    margin: 120px 30px;
    text-decoration: none;
    text-transform: uppercase;
    color: #9FADC1;
    padding: 24px;
    width: 200px;
    text-align: right;
    background-color: #374355;
    opacity: 0.9;
    z-index: 5;
    /*  TYPOGRAFY */
    /* vietnamese */
    @font-face {
        font-family: 'Anton';
        font-style: normal;
        font-weight: 400;
        src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Anton';
        font-style: normal;
        font-weight: 400;
        src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Anton';
        font-style: normal;
        font-weight: 400;
        src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 300;
        src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: italic;
        font-weight: 400;
        src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 300;
        src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
        unicode-range: U+0370-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: 'Multicolore';
        src="fonts/Multicolore.otf";
    }
    /* 
  DEFINITION FOR TYPOGRAPHY FLUID VW.
--------------------------------------- */
    html {
        font-size: 16px;
        font-size: calc(16px + (24 - 16) * ((100vw - 356px) / (2560 - 356)));
    }
    @media Screen and (max-width: 356px) {
        .fluid {
            font-size: 16px
        }
    }
    @media Screen and (min-width: 992px) {
        .fluid {
            font-size: 24px
        }
    }
    /*
  CAROUSEL
----------------------------------------------- */
    .background_header {
        position: relative;
        z-index: 3;
        width: 100%;
        height: 60vh;
    }
    .carousel {
        z-index: 1;
    }
    .carousel-item,
    .d-block {
        height: 60vh;
        /* Era 650px */
    }
    .img_carousel {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: inline-flex;
    }
    /* Estilos para mensajes de error */
    .msg_ok {
        color: green;
    }
    .msg_fail {
        color: red;
    }
    /* Esto es modificación del estilo de Bootstrap*/
    .carousel-item:after {
        content: "";
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .logo_float_center {
        content: "";
        display: block;
        position: absolute;
        z-index: 5;
        height: 60vh;
        width: 100%;
    }
    .img_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: auto;
        width: 200px;
    }
    @media screen and (min-width: 320px) and (min-width: 575px) {
        .img_logo {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15vh;
            margin-bottom: auto;
            z-index: 6;
            width: 25vh;
        }
    }
    @media screen and (min-width: 320px) and (min-width: 575px) and (orientation: landscape) {
        .img_logo {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15vh;
            margin-bottom: auto;
            z-index: 6;
            width: 40vh;
        }
    }
    @media screen and (min-width: 576px) and (min-width: 991px) {
        .img_logo {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15vh;
            margin-bottom: auto;
            z-index: 6;
            width: 30vh;
        }
    }
    @media screen and (min-width: 992px) {
        .img_logo {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15vh;
            margin-bottom: auto;
            z-index: 6;
            width: 35vh;
        }
    }
    /* SELECTION
------------------------------------------------- */
     ::-moz-selection {
        color: white;
        background: rgba(123, 83, 181, 0.8);
    }
     ::selection {
        color: white;
        background: rgba(123, 83, 181, 0.8);
    }
    /* NAVBAR 
  ----------------------------------------------- */
    #navbar {
        overflow: hidden;
        background-color: #374355;
        height: 60px;
        z-index: 12;
    }
    /* Navbar links */
    #navbar a {
        float: left;
        color: #9FADC1;
        /* color texto navbar */
        text-align: center;
        text-decoration: none;
        font-size: 1rem;
        font-family: 'Anton', sans-serif;
        display: block;
        margin-left: 20px;
        margin-right: auto;
        margin-top: 3.3vh;
        margin-bottom: auto;
    }
    #navbar a:hover {
        background-color: #374355;
        color: #D73F8F;
        /* color hover texto navbar */
    }
    .container_home {
        padding: 0px;
    }
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }
    .sticky+.container_home {
        padding-top: 60vh;
    }
    .navbar-right {
        float: right;
        margin-right: 20px;
    }
    /* 
  CONTAINER  HOME - GRID 01
----------------------------------- */
    body {
        font-family: 'Roboto', sans-serif;
        color: #374355;
        font-size: 1rem;
    }
    .container-fluid_01 {
        padding-top: 100px;
        /*15vh; 60px navbar + 40px espaciado*/
        background-color: #f2f2f2;
    }
    .title_24h {
        margin-left: 15px;
        font-family: 'Anton', sans-serif;
        font-size: 2rem;
        color: #D73F8F;
    }
    .subtitle_left_col-lg_md-6 {
        margin-left: 15px;
        font-family: 'Anton', sans-serif;
        font-size: 1.5rem;
        line-height: 1.5;
        color: #374355;
        margin-bottom: 3vh;
    }
    /* LINKS 
----------------------------------- */
    a.whatsapp:link {
        color: #374355;
        text-decoration: none;
        background-color: transparent;
        -webkit-text-decoration-skip: objects;
        @include hover {
            color: #374355;
            text-decoration: #7B53B5;
        }
    }
    /* 
  TITLES 
----------------------------------- */
    #nosotros {
        padding-top: 50px;
    }
    .quienes_somos,
    .title_que_hacemos,
    .title_contact_left {
        font-family: 'Anton', sans-serif;
        font-size: 1.5rem;
        color: #D73F8F;
    }
    /*@media only screen and*/
    @media screen and (max-width: 768px) {
        .title_que_hacemos {
            margin-top: 50px;
        }
    }
    .compartir {
        margin-top: 20px;
        margin-bottom: -20px;
        margin-right: 10px;
    }
    /* DESCARGA LA APP
----------------------------------- */
    #down_app {
        /*background-image: linear-gradient(45deg, #D73F8F, #7B53B5);*/
        background-color: #f2f2f2;
        margin-top: 50px;
        margin-bottom: 50px;
        height: auto;
    }
    .col2_app {
        position: relative;
        text-align: center;
        vertical-align: middle;
        line-height: 150px;
        display: block;
        padding: 50px;
    }
    .title_app {
        font-family: 'Anton', sans-serif;
        color: #D73F8F;
        font-size: 2.5rem;
        width: 500;
        text-transform: uppercase;
        text-align: center;
    }
    .text_app {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        color: #374355;
        font-size: 1.2rem;
        text-align: center;
        vertical-align: middle;
    }
    /* 
  PLAYER 
----------------------------------- */
    div.player-header {
        background-color: #141920;
        padding: 15px;
        text-align: center;
        height: 55px;
        position: relative;
        margin-top: 40px;
        cursor: pointer;
        color: white;
        font-family: "Lato", sans-serif;
    }
    div.player-header img#down {
        position: absolute;
        top: 23px;
        left: 15px;
        cursor: pointer;
    }
    div#player-top {
        position: relative;
    }
    div#player-top img[amplitude-main-song-info=true] {
        width: 100%;
        height: 370px;
    }
    div#player-progress-bar-container {
        width: 100%;
        height: 0px;
        background-color: #000;
        position: relative;
    }
    div#player-progress-bar-container progress#song-played-progress {
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 4px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 9;
        border: none;
        cursor: pointer;
        background: transparent;
    }
    div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-bar {
        background: none;
    }
    div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-value {
        background: white;
    }
    div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {
        background: white;
    }
    div#player-progress-bar-container progress#song-buffered-progress {
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 4px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
        border: none;
        background: transparent;
    }
    div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-bar {
        background: none;
    }
    div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-value {
        background-color: rgba(255, 255, 255, 0.5);
        transition: width 0.1s ease;
    }
    div#player-progress-bar-container progress#song-buffered-progress[value]::-moz-progress-bar {
        background: rgba(255, 255, 255, 0.5);
    }
    /* 
  PLAYER MIDLE CONTAINER 
----------------------------------- */
    div#player-middle {
        /* topo del player*/
        background-image: linear-gradient(45deg, #D73F8F, #7B53B5);
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        position: relative;
    }
    div#player-middle div#time-container {
        color: white;
        width: 100%;
        background-color: #000;
        font-size: 14px;
        font-weight: bold;
    }
    div#player-middle div#time-container span.amplitude-duration-time {
        position: absolute;
        top: 5px;
        right: 5px;
    }
    div#player-middle div#time-container span.amplitude-current-time {
        position: absolute;
        top: 8px;
        left: 20px;
    }
    div#player-middle span.song-name {
        font-family: Lato, sans-serif;
        font-size: 16px;
        color: #fff;
        letter-spacing: 0.5px;
        line-height: 24px;
        display: block;
    }
    div#player-middle div.song-artist-album {
        opacity: 0.5;
        font-family: Lato, sans-serif;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.5px;
        line-height: 16px;
    }
    div#player-bottom {
        background-color: #374355;
        /* corpo del player */
        padding-left: 25px;
        padding-right: 25px;
    }
    div#player-bottom div#control-container {
        height: 140px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    div#player-bottom div#control-container div#prev-container {
        width: 20%;
        float: left;
        height: 60px;
        padding-top: 18px;
    }
    div#player-bottom div#control-container div#play-pause-container {
        width: 20%;
        height: 60px;
        margin-left: auto;
        margin-right: auto;
    }
    div#player-bottom div#control-container div#play-pause-container div#play-pause {
        width: 60px;
        height: 60px;
        cursor: pointer;
        margin: auto;
    }
    div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-playing {
        background: url("../img/pause.svg");
    }
    div#player-bottom div#control-container div#play-pause-container div#play-pause.amplitude-paused {
        background: url("../img/play.svg");
    }
    div#player-bottom div#control-container::after {
        content: "";
        display: table;
        clear: both;
    }
    div#player-bottom div#volume-container {
        padding-bottom: 20px;
        text-align: center;
    }
    div#player-bottom div#volume-container img {
        display: block;
        float: left;
        margin-top: -9px;
    }
    /* Control de Volumen */
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
        width: calc(100% - 30px);
        -webkit-appearance: none;
        display: block;
        margin-left: 10px;
        float: right;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus {
        outline: none;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
        width: 75%;
        height: 2px;
        cursor: pointer;
        animate: 0.2s;
        background: #cfd8dc;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
        height: 18px;
        width: 18px;
        background-color: #cfd8dc;
        cursor: pointer;
        margin-top: -8px;
        -webkit-appearance: none;
        border-radius: 20px;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
        background: #cfd8dc;
    }
    /* MOZ ____________________________ */
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        animate: 0.2s;
        background: #cfd8dc;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-thumb {
        height: 18px;
        width: 18px;
        background-color: #ffffff;
        cursor: pointer;
        margin-top: -8px;
        -webkit-appearance: none;
        border-radius: 20px;
    }
    /* for moz add styles */
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-moz-range-thumb {
        height: 18px;
        width: 18px;
        background-color: #ffffff;
        cursor: pointer;
        /*margin-top: -8px;*/
        -webkit-appearance: none;
        border-radius: 20px;
    }
    /* Applying base CSS styles 
   https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/
    input[type=range] {
        -webkit-appearance: none;
        /* Hides the slider so that custom slider can be made */
        width: 100%;
        /* Specific width is required for Firefox. */
        background: transparent;
        /* Otherwise white in Chrome */
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #cfd8dc;
    }
    input[type=range]:focus {
        outline: none;
        /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }
    input[type=range]::-ms-track {
        width: 100%;
        cursor: pointer;
        /* Hides the slider so custom styles can be added */
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    /* Styling the Thumb  */
    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid #343a40;
        height: 18px;
        width: 118px;
        border-radius: 20px;
        background: #ffffff;
        cursor: pointer;
        /*margin-top: -14px; 
  You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
        box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
        /* Add cool effects to your sliders! */
    }
    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
        border: 1px solid #343a40;
        height: 18px;
        width: 18px;
        border-radius: 20px;
        background: #ffffff;
        cursor: pointer;
    }
    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
        box-shadow: 1px 1px 1px #343a40, 0px 0px 1px #282828;
        border: 1px solid #343a40;
        height: 18px;
        width: 18px;
        border-radius: 20px;
        background: #ffffff;
        cursor: pointer;
    }
    /*  end MOZ ________________________________ */
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        animate: 0.2s;
        background: #cfd8dc;
        border-width: 15px 0;
        color: transparent;
        border-color: #192029;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-lower {
        background: transparent;
        border-radius: 2.6px;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-upper {
        background: transparent;
        border-radius: 2.6px;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-thumb {
        height: 18px;
        width: 18px;
        background-color: white;
        cursor: pointer;
        margin-top: 0px;
        border: 20px;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
        background: #cfd8dc;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-fill-upper {
        background: #cfd8dc;
    }
    div#player-bottom div#volume-container input[type=range].amplitude-volume-slider::-ms-tooltip {
        display: none;
    }
    div#player-bottom div#volume-container:after {
        content: "";
        display: table;
        clear: both;
    }
    @-moz-document url-prefix() {
        div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
            margin-top: -10px;
        }
    }
    @supports (-ms-ime-align: auto) {
        div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
            margin-top: -4px;
            height: 30px;
            background-color: #192029 !important;
        }
    }
    @media all and (-ms-high-contrast: none) {
        div#player-bottom div#volume-container *::-ms-backdrop,
        div#radiophonic-player-container div#player-bottom div#volume-container input[type=range].amplitude-volume-slider {
            margin-top: -8px;
            background-color: white !important;
            background: white !important;
        }
    }
    /*
  END PLAYER MIDLE
  ---------------------------------------- */
    div#radiophonic-player-container {
        position: relative;
        width: 100%;
        margin: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .sharethis-inline-share-buttons {
        margin-top: 20px;
        float: left;
    }
    .shareText {
        font-family: 'Anton', sans-serif;
        font-size: 1rem;
        color: #6D7582;
        margin-top: 30px;
        float: left;
    }
    .shareText,
    .sharebuttons {
        display: inline-block;
        margin-right: 10px;
    }
    /* / END PLAYER */
    /* 
  SOCIAL MEDIA
---------------------------------------- */
    .social-links {
        margin-left: 15px;
        margin-bottom: 50px;
    }
    .follow_we {
        font-family: 'Anton', sans-serif;
        font-size: 1.2rem;
        color: #D73F8F;
        margin-top: 30px;
    }
    .social-links a {
        margin-top: 60px;
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 10px;
        /* distancia entre iconos */
    }
    .social-links a:hover {
        color: #fff;
    }
    .text_que_hacemos {
        font-family: 'Roboto', sans-serif;
        color: #374355;
        font-size: 1rem;
        padding-top: 5vh;
    }
    /* 
  CONTAINER  HOME - FEEDS
  ---------------------------------------- */
    .container-fluid_feeds {
        background-color: #f2f2f2;
        padding-bottom: 50px;
    }
    .feeds {
        padding-left: 15px;
        padding-right: 15px;
    }
    .title_feeds_news {
        padding-top: 50px;
        padding-bottom: 50px;
        background: linear-gradient(45deg, #D73F8F, #7B53B5);
        font-family: 'Anton', sans-serif;
        font-size: 2rem;
        text-align: center;
        color: #eee;
        /* PURPLE: */
    }
    .fotoFeed {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        margin-bottom: 25px;
    }
    .title_feeds {
        font-family: 'Anton', sans-serif;
        font-size: 1.2rem;
        color: #7B53B5;
        padding-bottom: 2vh;
        text-align: left;
    }
    .feed_desc01,
    .feed_desc01,
    .feed_desc01 {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
    }
    .bloque_feeds {
        margin-top: 5vh;
        box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
        border-style: none;
        border-radius: 5px;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 35px;
        background-color: #ffffff;
    }
    .link_feeds a {
        text-align: right;
        float: right;
        font-size: 1rem;
        color: #D73F8F;
        text-decoration: none;
    }
    .link_feeds a:hover {
        color: #7B53B5;
    }
    /* 
 CONTACT FORM CSS 
--------------------------------------------- */
    .title_contact_left {
        margin-bottom: 5vh;
    }
    .contact-info {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        color: #374355;
        margin-bottom: 10vh;
        margin-top: 5vh;
        line-height: 1.6;
    }
    .contact-info a:hover {
        color: #D73F8F;
    }
    #form01 {
        width: 100%;
        display: block;
    }
    #contact_form {
        margin-top: 10vh;
    }
    #contact {
        /* css para todo el bloque form */
        font-size: 0.8rem;
    }
    .text_contacto {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
    }
    #sent_mail,
    .sent_mail_msg {
        font-family: 'Roboto', sans-serif;
        font-size: 0.8rem;
        color: #374355;
        padding-top: 2vh;
    }
    #fname,
    #lname,
    #email,
    input[type=text],
    select,
    textarea {
        width: 100%;
        padding: 12px;
        background: #f2f2f2;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
        border: none;
        /* Comportamiento espacio en blanco: 
     No agregar texto de sangría 
     https://css-tricks.com/almanac/properties/w/whitespace/ */
        white-space: nowrap;
        box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
        border-radius: 5px;
    }
    textarea {
        width: 100%;
        padding: 12px;
        background: #f2f2f2;
        margin-top: 6px;
        margin-bottom: 25px;
        resize: vertical;
        border: none;
        /* Comportamiento espacio en blanco: 
     No agregar texto de sangría 
     https://css-tricks.com/almanac/properties/w/whitespace/ */
        white-space: normal;
        box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
        border-radius: 5px;
        font-size: 16px;
    }
    input[type=submit] {
        background-color: #D73F8F;
        color: white;
        border: none;
        cursor: pointer;
        float: right;
        padding-left: 5vw;
        padding-right: 5vw;
        margin-top: 10px;
        box-shadow: 0px 2px 2px rgba(153, 153, 153, 0.35);
        border-radius: 5px;
    }
    input[type=submit]:hover {
        background-color: #7B53B5;
    }
     ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
    }
     ::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
    }
     :-ms-input-placeholder {
        /* IE 10+ */
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
    }
     :-moz-placeholder {
        /* Firefox 18- */
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
    }
    #subject {
        height: 200px;
    }
    .btn-form {
        text-align: center;
        float: right;
        padding: 15px;
    }
    /*
  CONTAINER  HOME - FOOTER 
  ---------------------------------------- */
    #footer {
        background-color: #374355;
    }
    .footer_bloque {
        margin-top: 10vh;
        height: 15vh;
    }
    .text_copyright {
        font-family: Roboto;
        font-style: normal;
        padding-top: 7vh;
        font-size: 0.8rem;
        text-align: center;
        color: #eee;
        text-decoration: none;
    }
    #copy_link {
        font-family: Roboto;
        font-style: normal;
        font-size: 0.8rem;
    }
    .text_copyright a:link {
        color: #eee;
    }
    .text_copyright a:visited {
        color: #eee;
    }
    .text_copyright a:hover {
        color: #fff;
        text-decoration: none;
    }
    .text_copyright a:active {
        color: #eee;
    }
    /* Reproductor: mostrar correctamente información de título y artista */
    .ellipsis {
        text-overflow: ellipsis;
        /* Required for text-overflow to do anything */
        white-space: nowrap;
        overflow: hidden;
    }
    /*
   CSS ADMINISTRAR PAGES
------------------------------------------------- */
    /* USER LOGIN 
------------------------------------------------- */
    /* The Modal (background) */
    .modal {
        display: none;
        position: fixed;
        z-index: 11;
        top: 0;
        width: 310px;
        height: auto;
        overflow: auto;
        /*background-color: rgba(0, 0, 0, 0.4); */
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 50px;
    }
    #xclose {
        font-size: 80px;
        font-weight: 100;
    }
    /* Modal Content Box: evitar conflicto con SCSS de bootstrap */
    .rp_modal-content {
        background: linear-gradient(211.56deg, #D73F8F -8.24%, #7D33D5 148.02%);
        box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
        margin: 4% auto 15% auto;
        border: none;
        width: 310px;
        height: auto;
        overflow-y: visible;
    }
    /* The Close Button (x) */
    .close {
        position: absolute;
        right: 25px;
        top: 15px;
        float: right;
        font-size: 50px;
        font-weight: 200;
        line-height: 1;
        color: #374355;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
    }
    .close:hover,
    .close:focus {
        color: #7B53B5;
        cursor: pointer;
    }
    /* Center the image and position the close button */
    .imgcontainer {
        text-align: center;
        position: relative;
    }
    .avatar {
        width: 90px;
        height: 90px;
        margin-top: 70px;
        margin-bottom: 45px;
    }
    .admin_site {
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 18px;
        text-align: center;
        text-transform: uppercase;
        color: #FCFCFC;
        opacity: 0.5;
    }
    .container_user {
        text-align: center;
        padding-bottom: 10px;
    }
    .msg_error {
        background-color: #7B53B5;
        width: 85%;
        padding: 8px;
        border-radius: 5px;
        box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
        font-family: Roboto;
        font-size: 0.6rem;
        font-style: normal;
        text-align: center;
        color: #f2f2f2;
        margin-left: auto;
        margin-right: auto;
    }
    /* Full-width input fields */
    .logintext,
    .loginpassword,
    input[type=text],
    input[type=password] {
        width: 85%;
        height: 50px;
        padding: 12px 12px 12px;
        margin-bottom: 16px;
        display: inline-block;
        /*box-sizing: none;*/
        font-size: 16px;
        background: #FFFFFF;
        box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
        border-style: none;
        border-radius: 5px;
    }
    /* Set a style for all buttons */
    button.btnLogin {
        width: 85%;
        height: 45px;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
        text-transform: uppercase;
        background: #D73F8F;
        box-shadow: 0px 2px 2px rgba(81, 19, 79, 0.25);
        border-radius: 5px;
    }
    button.btn-login:hover {
        opacity: 0.8;
    }
    /* Acceso privado tex */
    .private {
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        line-height: normal;
        font-size: 16px;
        text-align: center;
        color: #FCFCFC;
        opacity: 0.5;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    /* Add Zoom Animation */
    .animate {
        animation: zoom 0.6s
    }
    @keyframes zoom {
        from {
            transform: scale(0)
        }
        to {
            transform: scale(1)
        }
    }
    /*
  MENU HAMBURGUER.
---------------------------------------------------- */
    /* POSITION START MENU */
    /* Debera estar al height: 60vh; fijo abajo del header */
    #hmb_menu,
    li {
        text-align: left;
        text-decoration: none;
        font-size: 1rem;
        font-family: 'Anton', sans-serif;
    }
    .bg-cover {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 0;
        transition: all 350ms ease;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .prompt {
        position: fixed;
        width: 100%;
        text-align: center;
        line-height: 114px;
        font-family: Georgia;
        color: #666;
    }
    .reveal {
        opacity: .85;
        display: block;
        pointer-events: auto;
        visibility: visible;
    }
    .hamburger-shell {
        margin: 0;
        position: fixed;
        overflow: hidden;
        width: 70px;
        height: 100px;
        left: calc(100% - 80px);
        top: 5px;
        z-index: 5;
    }
    .top,
    .middle {
        position: absolute;
        width: 50px;
        height: 10px;
        background-color: #9FADC1;
        opacity: 0.8;
        transition: all 350ms ease-in-out;
        top: 20px;
    }
    .middle {
        top: 40px;
    }
    #admin_item {
        display: none;
    }
    #close_session_item {
        display: none;
    }
    #menu {
        position: fixed;
        left: calc(100% - 292px);
        top: 10px;
        font-family: 'Anton', sans-serif;
        font-size: 20px;
        display: none;
        margin: 120px 30px;
        text-decoration: none;
        text-transform: uppercase;
        color: #9FADC1;
        padding: 24px;
        width: 200px;
        text-align: right;
        background-color: #374355;
        opacity: 0.9;
        z-index: 5;
    }
    #menu a li {
        text-decoration: none !important;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid #9FADC1;
        list-style: none;
        color: #9FADC1;
        transition: all 150ms ease;
    }
    #menu a li:hover {
        color: #D73F8F;
        padding-right: 3px;
    }
    #menu a li:hover:after {}
    #menu a {
        text-decoration: none;
    }
    .rotate {
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        top: 30px;
        background-color: #D73F8F;
        height: 2px;
    }
    .rotate-back {
        transform: rotate(-225deg);
        -webkit-transform: rotate(-225deg);
        top: 30px;
        background-color: #D73F8F;
        height: 2px;
    }
    .top {
        -webkit-animation-delay: 100ms;
    }
    .middle {
        -webkit-animation-delay: 250ms;
    }
    .bottom {
        -webkit-animation-delay: 400ms;
    }
    .menu-name {
        font-size: 23px;
        font-family: 'Anton', sans-serif;
        color: #9FADC1;
        text-decoration: none;
        position: absolute;
        top: 56px;
        left: -1px;
        transition: all 350ms;
        opacity: 0.8;
    }
    .reveal {
        opacity: .85;
        display: block;
        pointer-events: auto;
        visibility: visible;
    }
    .bump {
        top: 64px;
        color: #D73F8F;
    }
    /* captcha */
    label#gw_captcha_text {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.8rem;
        margin-top: 25px;
        color: #374355;
    }
    /* input*/
    #captcha {
        width: 100px;
        height: 30px;
        opacity: 1.0;
        border-radius: 0px;
        background-color: #F2F2F2;
    }
    /*cores 
font-family: 'Anton', sans-serif;
font-family: 'Roboto', sans-serif;

COLOR PINK: #D73F8F;
COLOR PURPLE: #7B53B5; triade: #2F8242 rgb (47, 130, 66 )
COLOR TEXT TITLE AND TEXT DARK: #374355;
COLOR LIGHT BOX: #9FADC1;
*/
}

#menu a li {
    text-decoration: none !important;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #9FADC1;
    list-style: none;
    color: #9FADC1;
    transition: all 150ms ease;
}

#menu a li:hover {
    color: #D73F8F;
    padding-right: 3px;
}

#menu a li:hover:after {}

#menu a {
    text-decoration: none;
}

.rotate {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    top: 30px;
    background-color: #D73F8F;
    height: 2px;
}

.rotate-back {
    transform: rotate(-225deg);
    -webkit-transform: rotate(-225deg);
    top: 30px;
    background-color: #D73F8F;
    height: 2px;
}

.top {
    -webkit-animation-delay: 100ms;
}

.middle {
    -webkit-animation-delay: 250ms;
}

.bottom {
    -webkit-animation-delay: 400ms;
}

.menu-name {
    font-size: 23px;
    font-family: 'Anton', sans-serif;
    color: #9FADC1;
    text-decoration: none;
    position: absolute;
    top: 56px;
    left: -1px;
    transition: all 350ms;
    opacity: 0.8;
    dia_da_semana
}

.reveal {
    opacity: .85;
    display: block;
    pointer-events: auto;
    visibility: visible;
}

.bump {
    top: 64px;
    color: #D73F8F;
}


/* captcha */

label#gw_captcha_text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    margin-top: 25px;
    color: #374355;
}


/* input*/

#captcha {
    width: 100px;
    height: 30px;
    opacity: 1.0;
    border-radius: 0px;
    background-color: #F2F2F2;
}


/* 
  CONTAINER PROGRAMACIÓN
  ---------------------------------------- */

#programacion {
    margin-top: 8vh;
}

.container-fluid_programacion {
    background-color: #f2f2f2;
    padding-bottom: 0px;
}


/* .title_programacion {
    padding-top: 50px;
    padding-bottom: 50px;
    background: linear-gradient(45deg, #D73F8F, #7B53B5);
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    text-align: center;
    color: #eee; 
} */

.bloque_programacion {
    margin-left: 5vw;
    margin-right: 5vw;
}

.dia_da_semana {
    font-family: 'Anton', sans-serif;
    font-size: 1.3rem;
    color: #D73F8F;
    margin-top: 30px;
}

.card_programa {
    margin-top: 2vh;
    box-shadow: 0px 2px 2px rgba(153, 15#D73F8F3, 153, 0.35);
    border-style: none;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding-bottom: 25px;
    overflow: hidden;
}

.foto_card_programa {
   /* 
    height: 80%; */
    width: 100%;
    height: 224px;
    object-fit: cover;
    object-position: center center;
    margin-bottom: 15px;
}

.nombre_programa {
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    color: #7B53B5;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 15px;
	padding-top:20px;
}

.conductor {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    color: #374355;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 10px;
}

.horario {
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    color: #374355;
    padding-left: 20px;
    padding-right: 20px;
}

.caption {
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    color: #374355;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 15px;
}

.hide-radio-grid {
    display: none !important;
}

.show-radio-grid {
    /* display: block; */
}


/*cores 
font-family: 'Anton', sans-serif;
font-family: 'Roboto', sans-serif;

COLOR PINK: #D73F8F;
COLOR PURPLE: #7B53B5; triade: #2F8242 rgb (47, 130, 66 )
COLOR TEXT TITLE AND TEXT DARK: #374355;
COLOR LIGHT BOX: #9FADC1;
*/