@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
    font-family: 'At Gambit';
    src: url('~@fonts/atgambit-light-webfont.woff2') format('woff2'),
         url('~@fonts/atgambit-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'At Gambit';
    src: url('~@fonts/atgambit-lightitalic-webfont.woff2') format('woff2'),
         url('~@fonts/atgambit-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'At Gambit';
    src: url('~@fonts/atgambit-regular-webfont.woff2') format('woff2'),
         url('~@fonts/atgambit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
    Fonts Informa
*/
@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-LightItalic.woff2') format('woff2'),
        url('~@fonts/Infoma-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-DemiItalic.woff2') format('woff2'),
        url('~@fonts/Infoma-DemiItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Medium.woff2') format('woff2'),
        url('~@fonts/Infoma-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Light.woff2') format('woff2'),
        url('~@fonts/Infoma-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Ultra.woff2') format('woff2'),
        url('~@fonts/Infoma-Ultra.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-MediumItalic.woff2') format('woff2'),
        url('~@fonts/Infoma-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Regular.woff2') format('woff2'),
        url('~@fonts/Infoma-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Heavy.woff2') format('woff2'),
        url('~@fonts/Infoma-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Bold.woff2') format('woff2'),
        url('~@fonts/Infoma-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Italic.woff2') format('woff2'),
        url('~@fonts/Infoma-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Infoma';
    src: url('~@fonts/Infoma-Demi.woff2') format('woff2'),
        url('~@fonts/Infoma-Demi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}




.dbg{
    @apply outline outline-dotted outline-red-600;
}

.menu-main-menu-container{
    .nav{
        @apply flex;
    }
    li{
        @apply mx-5 uppercase text-sm;
    }
}

.work-item{
    @apply transition-all duration-500;
}
.work-item.open{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important;
}


/*
    Fusion Fuel
*/
.fusion-header{
    background-image: url('~@images/rise-hero-extended.jpg');
    background-position: center top;
    background-size:cover;
    background-repeat: no-repeat;
}

/*
    Banco Montepio
*/
.montepio-header{
    background-image: url('~@images/montepio.jpg');
    background-position: center top;
    background-size:cover;
    background-repeat: no-repeat;
}

/*

*/
.animated-icon{
    @apply cursor-pointer;

    svg{
        @apply h-[8vh] transition-opacity duration-300; /* h-20 */

    }

    .ico-hover{
        @apply absolute left-0 top-0 opacity-0 transition-opacity duration-300;

        &::after{
            content: '';
            display: block;
            width: 100%;
            height: 1.6vh;
            position: absolute;
            left: 0;
            bottom: -3vh;
            background: red;
        }
    }

    &:hover, &.active{
        .ico-base{
            opacity: 0;
        }
        .ico-hover{
            opacity: 1;
            color: red;
        }
    }

    &.lightblue{
        &:hover, &.active{
            .ico-hover{
                color: #bccde9;
            }
        }

        .ico-hover{
            &::after{
                background: #bccde9;
            }
        }
    }
}


.anim-char{
    @apply relative;
}

.anim-char .char{

}

.anim-char:hover .char{
    opacity: 0;
}

.anim-char-hover{
    @apply absolute left-0 top-0 w-full h-full flex items-center justify-center opacity-0 transition-opacity duration-300;
}

.anim-char-hover:hover{
    @apply opacity-100;
}