/* ==================================================
   ACTION GRAFFIX - CASSIOPEIA BASE
   ================================================== */

:root{
    --ag-blue:#1028c8;
    --ag-dark:#111318;
    --ag-black:#08090b;
    --ag-red:#ef1c24;
    --ag-light:#f5f6f8;
    --ag-text:#25272b;
}

/* GLOBAL */
body{
    color:var(--ag-text);
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.65;
}

.container-header{
    background:#fff;
    color:#111;
    box-shadow:0 3px 18px rgba(0,0,0,.08);
}

.container-header .grid-child{
    max-width:1440px;
}

.container-header .navbar-brand{
    padding:18px 0;
}

.container-header .navbar-brand img{
    max-height:90px;
    width:auto;
}


/* NAVIGATION */
.container-header .container-nav{
    background:var(--ag-black);
    max-width:none;
}

.container-header .container-nav .grid-child{
    max-width:1440px;
    margin:auto;
}

.container-header .mod-menu{
    color:#fff;
}

.container-header .mod-menu > li > a{
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:18px 16px;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a{
    color:#fff;
    background:var(--ag-blue);
}

.metismenu.mod-menu .metismenu-item > ul{
    background:#111318;
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.metismenu.mod-menu .metismenu-item > ul a{
    color:#fff;
}


/* MAIN SITE WIDTH */
.site-grid{
    max-width:none;
}

main{
    min-width:0;
}

.com-content-article{
    max-width:1400px;
    margin:0 auto;
}


/* HEADINGS */
h1,h2,h3{
    font-weight:800;
    line-height:1.15;
}

h1{
    font-size:clamp(34px,4vw,58px);
}

h2{
    font-size:clamp(28px,3vw,42px);
}


/* LINKS */
a{
    color:var(--ag-blue);
}

a:hover{
    color:#081983;
}


/* BUTTONS */
.ag-btn{
    display:inline-block;
    padding:14px 24px;
    border-radius:5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-decoration:none !important;
    transition:.25s ease;
}

.ag-btn-primary{
    background:var(--ag-blue);
    color:#fff !important;
}

.ag-btn-primary:hover{
    background:#081983;
    transform:translateY(-2px);
}

.ag-btn-red{
    background:var(--ag-red);
    color:#fff !important;
}

.ag-btn-red:hover{
    background:#c91219;
    transform:translateY(-2px);
}


/* FOOTER */
.container-footer{
    background:var(--ag-black);
    color:#ddd;
}

.container-footer a{
    color:#fff;
}


/* MOBILE */
@media(max-width:768px){

    .container-header .navbar-brand img{
        max-height:62px;
    }

    .container-header .mod-menu > li > a{
        padding:11px 14px;
    }

}