/* =========================
   TOKENS DE TEMA (ajusta aqui)
   ========================= */
:root {
    --brand-900: #0b2f4a; /* azul mais escuro (barra) */
    --brand-800: #0f3d62;
    --brand-700: #124a78;
    --brand-500: #1f6aa5; /* hover/realces */
    --ink-900: #0f172a; /* texto principal */
    --ink-600: #475569; /* texto secundário */
    --bg-page: #f7f8f9; /* fundo geral (cinza muito leve) */
    --card-bg: #ffffff;
    --pill-fg: #ffffff; /* texto nas “pílulas” */
    --pill-bg: var(--brand-800);
    --pill-bg-h: var(--brand-700);
    --accent: #0d6efd; /* pode alinhar com Bootstrap primary */
}

/* Página */
body.bg-body {
    background: var(--bg-page);
    color: var(--ink-900);
}

/* =========================
   BARRA SUPERIOR (brandbar)
   ========================= */
.brandbar {
    background: var(--brand-800);
}

    .brandbar .navbar {
        background: transparent;
    }

    .brandbar .navbar-toggler {
        border-color: rgba(255,255,255,.4);
    }

    .brandbar .navbar-toggler-icon {
        filter: invert(1) brightness(2);
    }

.brand-logo {
    height: 40px;
}

.brandmenu .nav-link {
    opacity: .9;
}

    .brandmenu .nav-link:hover {
        opacity: 1;
        text-decoration: underline;
    }

.brand-search input {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-radius: .25rem;
    padding-inline: .5rem;
}

    .brand-search input::placeholder {
        color: rgba(255,255,255,.8);
    }

    .brand-search input:focus {
        outline: 2px solid rgba(255,255,255,.4);
    }

/* =========================
   TÍTULOS DE SECÇÃO
   ========================= */
.section-title {
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--brand-800);
    font-weight: 800;
    margin-bottom: .5rem;
}

/* =========================
   BOTÕES “PÍLULA” (painel esquerdo)
   ========================= */
.btn-pill {
    color: var(--pill-fg);
    background: var(--pill-bg);
    border: 0;
    border-radius: .5rem;
    padding: .6rem .9rem;
    text-align: left;
    font-weight: 600;
    letter-spacing: .02em;
}

    .btn-pill:hover, .btn-pill:focus {
        background: var(--pill-bg-h);
        color: #fff;
    }

/* =========================
   NOTÍCIAS (cartões)
   ========================= */
.card-news .card-title {
    color: var(--ink-900);
}

.card-news .card-text {
    color: var(--ink-600);
}

/* =========================
   AZULEJO DE DATA (Agenda)
   ========================= */
.date-tile {
    width: 56px;
    border-radius: .5rem;
    text-align: center;
    background: var(--brand-800);
    color: #fff;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: .35rem 0;
}

    .date-tile .day {
        font-size: 1.35rem;
        font-weight: 800;
    }

    .date-tile .mon {
        font-size: .8rem;
        letter-spacing: .1em;
        opacity: .9;
    }

span.bg-tile {
    background: var(--brand-800);
    color: #fff;
}

/* =========================
   CARDS / IMAGENS
   ========================= */
.object-fit-cover {
    object-fit: cover;
}

/* Pequenos ajustes responsivos conforme o mockup */
@media (max-width: 991.98px) {
    .brand-title {
        display: none;
    }
}





/* Landing */
.thumb64 {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    /*
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
    */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .thumb64 img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* nunca distorce */
    }

/* ===== Slider horizontal via overflow ===== */
.mm-slider {
    display: flex;
    gap: .75rem; /* espaço entre cards */
    overflow-x: auto; /* scroll horizontal */
    padding: .25rem .25rem .5rem;
    scroll-snap-type: x proximity; /* snap mais suave */
    -webkit-overflow-scrolling: touch; /* inércia no iOS */
    scroll-behavior: smooth; /* (novo) rolagem suave quando usado com botões/teclas */
    overscroll-behavior-x: contain; /* (novo) evita "puxar" a página ao fim do slider */

    min-width: 0;
}

    /* Barra de scroll (opcional) */
    .mm-slider::-webkit-scrollbar {
        height: 8px;
    }

    .mm-slider::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 4px;
    }

/* Cada item do slider */
.mm-slide {
    flex: 0 0 auto; /* não crescer/encolher */
    max-width: 400px;
    scroll-snap-align: start;
}


/* ===== Card 200x200, altura uniforme ===== */
.mm-card {
    width: 200px; /* largura fixa */
    height: 200px; /* altura fixa */
    display: flex;
    flex-direction: column;
    border-radius: .5rem; /* opcional para combinar com Bootstrap */
    overflow: hidden; /* recorta a imagem */
    background-color: var(--bs-card-bg, #fff); /* (novo) garante bg em dark/light */
}

/* Thumbnail ocupa parte superior; 110–120px funciona bem */
.mm-thumb {
    width: 100%;
    height: 110px; /* controla quanto da altura total ocupa a imagem */
    object-fit: cover; /* “crop” elegante mantendo proporção */
    display: block;
    background: #f2f2f2; /* fallback enquanto carrega */
}

/* Título ocupa o restante espaço, com clamp a 2 linhas */
.mm-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* número de linhas visíveis */
    overflow: hidden;
    line-height: 1.2;
}

/* Ajustes finos para tema Bootstrap */
.mm-card .card-body {
    flex: 1 1 auto;
}
/* enche o espaço até perfazer 200px */



/* ===== HERO DO PLAYER ===== */
.media-hero {
    /* usa 16:9 por defeito; JS ajusta ao aspeto real (ex.: 4:3, 21:9, vertical, etc.) */
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08);
}

    /* Garantir que o vídeo (e o wrapper do Plyr) ocupam o container a 100% */
    .media-hero video,
    .plyr--video .plyr__video-wrapper {
        width: 100% !important;
        height: 100% !important;
    }

    /* Enchimento sem barras: “cover” (ou troca para 'contain' se preferires letterbox) */
    .media-hero video {
        object-fit: cover;
    }

/* Cor principal do Plyr alinhada com o tema (Bootstrap primary) */
.plyr--full-ui.plyr--video {
    --plyr-color-main: var(--bs-primary, #0d6efd);
}


/* --- Quick Links (Acessos rápidos) --- */
.quick-link {
    display: block;
    padding: .65rem .9rem;
    border-radius: .75rem;
    background: #123e66; /* azul GUARDATV */
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .05s ease;
}

    .quick-link:hover {
        background: #0d3354;
        color: #fff;
    }

    .quick-link:active {
        transform: scale(.98);
    }

/* --- Roll-up (mobile) --- */
.quick-rollup {
    border-radius: .75rem;
    overflow: hidden;
}

    .quick-rollup > summary {
        cursor: pointer;
        list-style: none;
    }

        .quick-rollup > summary::-webkit-details-marker {
            display: none;
        }

/* Ícone seta */
.roll-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    opacity: .6;
    transition: transform .2s ease, opacity .2s ease;
}

.quick-rollup[open] .roll-icon {
    transform: rotate(180deg);
    opacity: .9;
}

/* Melhor tap target */
@media (max-width: 991.98px) {
    .quick-rollup > summary {
        padding: .75rem 1rem !important;
    }
}

/* Sidebar sticky (desktop) */
@media (min-width: 992px) {
    .sticky-lg-top {
        position: sticky;
    }
}

@media (max-width: 320px) {
    .mm-slide {
        max-width: 80vw; /* largura fixa pedida */
    }
}





/* -------- CARD EVENT landing page -------- */
.event-card {
    /*
    border-radius: 14px;
    */
    overflow: hidden;
    background: #ebebeb;
    /*
    background: #fff;
    border: 1px solid #e5e7eb;
    */
    transition: all .2s ease;
}

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 32px rgba(0,0,0,0.15);
    }

/* imagem */
.event-img {
    position: relative;
}

    .event-img img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

/* DATA overlay */
.event-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(30, 50, 90, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* body */
.event-body {
    padding: 0.9rem;
}

/* título */
.event-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .4rem;
    color: #1f2937;
}

/* descrição */
.event-desc {
    font-size: 0.80rem;
    color: #6b7280;
    margin-bottom: .4rem;
}

/* meta linha */
.event-meta {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* categorias estilo chips */
.event-chip {
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 500;
}

/* localização */
.event-location {
    color: #374151;
}





/* =====================================
   GRID SLIDER (novo sistema)
   ===================================== */

.gx-slider {
    display: grid;
    grid-auto-flow: column;
    /* 👇 MUITO IMPORTANTE */
    grid-auto-columns: calc(100% - 3.5rem);
    gap: .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .25rem;
    scroll-snap-type: x mandatory;
    /* 👇 EDGE + MOBILE FIX */
    -webkit-overflow-scrolling: touch;
    /* 👇 garante que não quebra */
    width: 100%;
}

@media (min-width: 768px) {
    .gx-slider {
        grid-auto-columns: calc(50% - 1rem);
    }
}

@media (min-width: 1200px) {
    .gx-slider {
        grid-auto-columns: 320px;
    }
}
/* slide */
.gx-slide {
    scroll-snap-align: start;
}

.gx-slider {
    cursor: grab;
}

    .gx-slider.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

.gx-slider {
    overflow-x: auto;
    scrollbar-width: thin;
}

    .gx-slider::-webkit-scrollbar {
        height: 8px;
    }

    .gx-slider::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 4px;
    }



/*===============================
					FOOTER 	
=================================*/
footer {
    font-size: 14px;
}

    footer .footer-logo img,
    footer .footer-logo-item {
        height: 50px;
        text-align: left;
        max-width: 100%;
        width: auto;
    }

    footer .newsletter-icon {
        position: absolute;
        bottom: 0px;
        right: 5px;
        font-size: 80px;
        color: rgba(0, 0, 0, 0.1) !important;
    }

    footer .widget {
        position: relative;
    }

.footer-dark {
    background: #343a40;
}

    .footer-dark *,
    .footer-dark .widget a {
        color: #d5d5d5;
    }

        .footer-dark .widget a:hover {
            color: #4cbd89;
        }

footer a,
footer a:visited,
footer a:hover {
    color: inherit;
    text-decoration: none;
}


/*===============================
		SOCIAL ICONS 	
=================================*/
.social-icons {
    padding: 0;
    line-height: 0;
}

.text-center.social-icons {
    display: inline-block;
}

.social-icons .social-icons-item {
    display: inline-block;
    list-style: none;
    line-height: 10px;
    margin: 0 5px 5px 0;
}

.social-icons-link {
    display: inline-block;
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    border-radius: 3px;
    border: 0;
    background: transparent;
    color: #343a40;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*dark*/
.social-icons.dark .social-icons-link {
    background: #343a40;
    color: #ffffff;
}

/*light*/
.social-icons.light .social-icons-link {
    background: #f0f1f3;
    color: #343a40;
}

/*round*/
.social-icons.round .social-icons-link {
    border-radius: 50%;
}

/*square*/
.social-icons.square .social-icons-link {
    border-radius: 0;
}

/*border*/
.social-icons.si-border .social-icons-link {
    border: 1px solid #8f9397;
}

/*large*/
.social-icons.si-large .social-icons-link {
    height: 50px;
    width: 50px;
    line-height: 50px;
    font-size: 20px;
}

/*medium*/
.social-icons.si-medium .social-icons-link {
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 18px;
}

/*colored*/
.social-icons.si-colored-bg .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-icons-link:hover {
    color: #ffffff;
    border: 0;
}

.social-icons.si-colored-bg .social-facebook .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-facebook .social-icons-link:hover {
    background-color: #5d82d1;
}

.social-icons.si-colored-bg .social-instagram .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-instagram .social-icons-link:hover {
    background-color: #548bb6;
}

.social-icons.si-colored-bg .social-twitter .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-twitter .social-icons-link:hover {
    background-color: #40bff5;
}

.social-icons.si-colored-bg .social-youtube .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-youtube .social-icons-link:hover {
    background-color: #ef4e41;
}

.social-icons.si-colored-bg .social-gplus .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-gplus .social-icons-link:hover {
    background-color: #dd5044;
}

.social-icons.si-colored-bg .social-rss .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-rss .social-icons-link:hover {
    background-color: #faa33d;
}

.social-icons.si-colored-bg .social-vimeo .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-vimeo .social-icons-link:hover {
    background-color: #35c6ea;
}

.social-icons.si-colored-bg .social-myspace .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-myspace .social-icons-link:hover {
    background-color: #008dde;
}

.social-icons.si-colored-bg .social-stumbleupon .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-stumbleupon .social-icons-link:hover {
    background-color: #ff5c30;
}

.social-icons.si-colored-bg .social-lastfm .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-lastfm .social-icons-link:hover {
    background-color: #f34320;
}

.social-icons.si-colored-bg .social-pinterest .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-pinterest .social-icons-link:hover {
    background-color: #e13138;
}

.social-icons.si-colored-bg .social-google .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-google .social-icons-link:hover {
    background-color: #eb5e4c;
}

.social-icons.si-colored-bg .social-evernote .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-evernote .social-icons-link:hover {
    background-color: #9acf4f;
}

.social-icons.si-colored-bg .social-dribbble .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-dribbble .social-icons-link:hover {
    background-color: #f7659c;
}

.social-icons.si-colored-bg .social-skype .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-skype .social-icons-link:hover {
    background-color: #13c1f3;
}

.social-icons.si-colored-bg .social-forrst .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-forrst .social-icons-link:hover {
    background-color: #45ad76;
}

.social-icons.si-colored-bg .social-linkedin .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-linkedin .social-icons-link:hover {
    background-color: #238cc8;
}

.social-icons.si-colored-bg .social-wordpress .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-wordpress .social-icons-link:hover {
    background-color: #2592c3;
}

.social-icons.si-colored-bg .social-grooveshark .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-grooveshark .social-icons-link:hover {
    background-color: #ffb21d;
}

.social-icons.si-colored-bg .social-delicious .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-delicious .social-icons-link:hover {
    background-color: #377bda;
}

.social-icons.si-colored-bg .social-behance .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-behance .social-icons-link:hover {
    background-color: #1879fd;
}

.social-icons.si-colored-bg .social-dropbox .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-dropbox .social-icons-link:hover {
    background-color: #17a3eb;
}

.social-icons.si-colored-bg .social-soundcloud .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-soundcloud .social-icons-link:hover {
    background-color: #ff7e30;
}

.social-icons.si-colored-bg .social-deviantart .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-deviantart .social-icons-link:hover {
    background-color: #6a8a7b;
}

.social-icons.si-colored-bg .social-yahoo .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-yahoo .social-icons-link:hover {
    background-color: #ab47ac;
}

.social-icons.si-colored-bg .social-flickr .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-flickr .social-icons-link:hover {
    background-color: #ff48a3;
}

.social-icons.si-colored-bg .social-digg .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-digg .social-icons-link:hover {
    background-color: #75788d;
}

.social-icons.si-colored-bg .social-blogger .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-blogger .social-icons-link:hover {
    background-color: #ff9233;
}

.social-icons.si-colored-bg .social-tumblr .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-tumblr .social-icons-link:hover {
    background-color: #426d9b;
}

.social-icons.si-colored-bg .social-quora .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-quora .social-icons-link:hover {
    background-color: #ea3d23;
}

.social-icons.si-colored-bg .social-github .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-github .social-icons-link:hover {
    background-color: #3f91cb;
}

.social-icons.si-colored-bg .social-wikipedia .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-wikipedia .social-icons-link:hover {
    background-color: #b3b5b8;
}

.social-icons.si-colored-bg .social-amazon .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-amazon .social-icons-link:hover {
    background-color: #ff8e2e;
}

.social-icons.si-colored-bg .social-xing .social-icons-link,
.social-icons.si-colored-bg-on-hover .social-xing .social-icons-link:hover {
    background-color: #1a8e8c;
}

.social-icons.si-colored li .social-icons-link,
.social-icons.si-colored-on-hover li .social-icons-link:hover {
    color: #ffffff;
    border: 0;
}

.social-icons.si-colored .social-facebook .social-icons-link,
.social-icons.si-colored-on-hover .social-facebook .social-icons-link:hover {
    color: #5d82d1;
}

.social-icons.si-colored .social-instagram .social-icons-link,
.social-icons.si-colored-on-hover .social-instagram .social-icons-link:hover {
    color: #548bb6;
}

.social-icons.si-colored .social-twitter .social-icons-link,
.social-icons.si-colored-on-hover .social-twitter .social-icons-link:hover {
    color: #40bff5;
}

.social-icons.si-colored .social-youtube .social-icons-link,
.social-icons.si-colored-on-hover .social-youtube .social-icons-link:hover {
    color: #ef4e41;
}

.social-icons.si-colored .social-gplus .social-icons-link,
.social-icons.si-colored-on-hover .social-gplus .social-icons-link:hover {
    color: #dd5044;
}

.social-icons.si-colored .social-rss .social-icons-link,
.social-icons.si-colored-on-hover .social-rss .social-icons-link:hover {
    color: #faa33d;
}

.social-icons.si-colored .social-vimeo .social-icons-link,
.social-icons.si-colored-on-hover .social-vimeo .social-icons-link:hover {
    color: #35c6ea;
}

.social-icons.si-colored .social-myspace .social-icons-link,
.social-icons.si-colored-on-hover .social-myspace .social-icons-link:hover {
    color: #008dde;
}

.social-icons.si-colored .social-stumbleupon .social-icons-link,
.social-icons.si-colored-on-hover .social-stumbleupon .social-icons-link:hover {
    color: #ff5c30;
}

.social-icons.si-colored .social-lastfm .social-icons-link,
.social-icons.si-colored-on-hover .social-lastfm .social-icons-link:hover {
    color: #f34320;
}

.social-icons.si-colored .social-pinterest .social-icons-link,
.social-icons.si-colored-on-hover .social-pinterest .social-icons-link:hover {
    color: #e13138;
}

.social-icons.si-colored .social-google .social-icons-link,
.social-icons.si-colored-on-hover .social-google .social-icons-link:hover {
    color: #eb5e4c;
}

.social-icons.si-colored .social-evernote .social-icons-link,
.social-icons.si-colored-on-hover .social-evernote .social-icons-link:hover {
    color: #9acf4f;
}

.social-icons.si-colored .social-dribbble .social-icons-link,
.social-icons.si-colored-on-hover .social-dribbble .social-icons-link:hover {
    color: #f7659c;
}

.social-icons.si-colored .social-skype .social-icons-link,
.social-icons.si-colored-on-hover .social-skype .social-icons-link:hover {
    color: #13c1f3;
}

.social-icons.si-colored .social-forrst .social-icons-link,
.social-icons.si-colored-on-hover .social-forrst .social-icons-link:hover {
    color: #45ad76;
}

.social-icons.si-colored .social-linkedin .social-icons-link,
.social-icons.si-colored-on-hover .social-linkedin .social-icons-link:hover {
    color: #238cc8;
}

.social-icons.si-colored .social-wordpress .social-icons-link,
.social-icons.si-colored-on-hover .social-wordpress .social-icons-link:hover {
    color: #2592c3;
}

.social-icons.si-colored .social-grooveshark .social-icons-link,
.social-icons.si-colored-on-hover .social-grooveshark .social-icons-link:hover {
    color: #ffb21d;
}

.social-icons.si-colored .social-delicious .social-icons-link,
.social-icons.si-colored-on-hover .social-delicious .social-icons-link:hover {
    color: #377bda;
}

.social-icons.si-colored .social-behance .social-icons-link,
.social-icons.si-colored-on-hover .social-behance .social-icons-link:hover {
    color: #1879fd;
}

.social-icons.si-colored .social-dropbox .social-icons-link,
.social-icons.si-colored-on-hover .social-dropbox .social-icons-link:hover {
    color: #17a3eb;
}

.social-icons.si-colored .social-soundcloud .social-icons-link,
.social-icons.si-colored-on-hover .social-soundcloud .social-icons-link:hover {
    color: #ff7e30;
}

.social-icons.si-colored .social-deviantart .social-icons-link,
.social-icons.si-colored-on-hover .social-deviantart .social-icons-link:hover {
    color: #6a8a7b;
}

.social-icons.si-colored .social-yahoo .social-icons-link,
.social-icons.si-colored-on-hover .social-yahoo .social-icons-link:hover {
    color: #ab47ac;
}

.social-icons.si-colored .social-flickr .social-icons-link,
.social-icons.si-colored-on-hover .social-flickr .social-icons-link:hover {
    color: #ff48a3;
}

.social-icons.si-colored .social-digg .social-icons-link,
.social-icons.si-colored-on-hover .social-digg .social-icons-link:hover {
    color: #75788d;
}

.social-icons.si-colored .social-blogger .social-icons-link,
.social-icons.si-colored-on-hover .social-blogger .social-icons-link:hover {
    color: #ff9233;
}

.social-icons.si-colored .social-tumblr .social-icons-link,
.social-icons.si-colored-on-hover .social-tumblr .social-icons-link:hover {
    color: #426d9b;
}

.social-icons.si-colored .social-quora .social-icons-link,
.social-icons.si-colored-on-hover .social-quora .social-icons-link:hover {
    color: #ea3d23;
}

.social-icons.si-colored .social-github .social-icons-link,
.social-icons.si-colored-on-hover .social-github .social-icons-link:hover {
    color: #3f91cb;
}

.social-icons.si-colored .social-wikipedia .social-icons-link,
.social-icons.si-colored-on-hover .social-wikipedia .social-icons-link:hover {
    color: #b3b5b8;
}

.social-icons.si-colored .social-amazon .social-icons-link,
.social-icons.si-colored-on-hover .social-amazon .social-icons-link:hover {
    color: #ff8e2e;
}

.social-icons.si-colored .social-xing .social-icons-link,
.social-icons.si-colored-on-hover .social-xing .social-icons-link:hover {
    color: #1a8e8c;
}

/*hover effect*/
.social-icons .social-icons-link:hover i {
    -webkit-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}



.FC-Logo {
    max-height: 100px !important;
}