@charset "UTF-8";
:root {
    --color-brand-primary: #9F2141;
    --color-brand-primary-h: 251;
    --color-brand-primary-s: 43%;
    --color-brand-primary-l: 43%;
    --color-brand-accent: hsl(var(--color-brand-accent-h), 96%, 61%);
    --color-brand-accent-h: 16;
    --color-brand-accent-s: 96%;
    --color-brand-accent-l: 61%;
    --color-brand-accent-bg: hsl( calc(var(--color-brand-accent-h) + 17), 100%, 96%);
    --ratio: 1.4;
    --s-6: calc(var(--s-5) / var(--ratio));
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: calc(.9.00rem + 0.333vw);
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s6: calc(var(--s5) * var(--ratio));
    line-height: 1.6;
    box-sizing: border-box;
}

footer svg {
    display: none!important
}

html {
    font-size: 16px;
}

@media (min-width: 40.625em) {
     :root {
        --s0: calc(.7rem + 0.333vw);
    }
}

@media (min-width: 48em) {
     :root {
        --s0: calc(.8rem + 0.333vw);
    }
}

@media (min-width: 62em) {
     :root {
        --s0: calc(1rem + 0.333vw);
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    background-color: white;
    min-height: 100vh;
}

@media (min-width: 48em) {}

h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
}

ul li {
    /* Remove li Bullets with zero-width space for accessability */
    list-style-type: none;
}

ul li:before {
    content: "​";
    /* add zero-width space */
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    position: absolute;
}

.c-section {
    padding: 0 var(--s3);
}

.c-section__title {
    padding: var(--s2) var(--s3) calc(var(--s6) * 1.8);
    margin: 0 calc(var(--s3) * -1);
    color: #fff;
    font-size: var(--s4);
    font-weight: 900;
    text-align: center;
    line-height: 1;
}

@media (min-width: 40.625em) {
    .c-section__title {
        padding: var(--s2) var(--s3) var(--s4);
    }
}

@media (min-width: 40.625em) {
    .c-section__title {
        display: flex;
        align-items: self-start;
        justify-content: flex-end;
        position: relative;
        text-align: unset;
    }
}

.c-section__title:after {
    content: "";
    display: block;
    background-size: calc(var(--s5) * 3) calc(var(--s5) * 3);
    width: calc(var(--s5) * 3);
    height: calc(var(--s5) * 3);
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(11rem);
    z-index: 1;
    background-image: url("https://tizayuca.gob.mx/img/tramites.svg");
}

@media (min-width: 40.625em) {
    .c-section__title:after {
        margin-left: auto;
        margin-right: 0;
        transform: translateY(2rem);
    }
}

.c-section span:before {
    content: "";
    display: block;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: -1;
    background: var(--color-brand-primary);
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-size: 105%;
    background-image: url("https://tizayuca.gob.mx/img/pattern.jpg");
}

.c-section span:after {
    content: "MUNICIPIO DE TIZAYUCA";
    display: block;
    font-size: 1.4rem;
    position: absolute;
    font-weight: 350;
    padding: 0 var(--s3);
    color: rgba(255, 255, 255, 0.85);
    left: 9px;
}

@media (min-width: 40.625em) {
    .c-section span:after {
        font-size: 23%;
    }
}

@media (min-width: 40.625em) {
    .c-section span:after {
        width: 47ch;
    }
}

@media (min-width: 48em) {
    .c-section span:after {
        width: 57ch;
    }
}

@media (min-width: 62em) {
    .c-section span:after {
        width: 67ch;
    }
}

.c-services {
    display: grid;
    grid-gap: var(--s2);
    margin: 0 calc(var(--s3) * -1);
    padding: var(--s6) var(--s3);
    position: relative;
    z-index: 1;
}

@media (min-width: 40.625em) {
    .c-services {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: minmax(100px, 1fr);
    }
}

@media (min-width: 40.625em) {
    .c-services {
        padding: 0 var(--s3);
    }
}

.c-services:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-brand-accent-bg);
    width: 100%;
    height: 100%;
    background-size: 104%;
    background-image: url("https://tizayuca.gob.mx/img/pattern.jpg");
}

.c-services__item {
    background: #fff;
    padding: calc(var(--s2) - 0.6rem) var(--s1);
    border-radius: 25px;
    box-shadow: 0 7px 20px rgba(100, 28, 2, 0.135);
    transition: all 300ms ease, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

@media (min-width: 40.625em) {
    .c-services__item {
        transform: translateY(-85px);
    }
}

@media (min-width: 48em) {
    .c-services__item {
        transform: translateY(-130px);
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(1) {
        grid-column: 1/-1;
        grid-row: 4;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(1) {
        grid-column: 1/span 3;
        grid-row: 1;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(2) {
        grid-column: 1/span 3;
        grid-row: 1;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(2) {
        grid-column: 4/span 2;
        grid-row: 1;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(3) {
        grid-column: 4/-1;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(3) {
        grid-column: 1/span 4;
        grid-row: 2;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(4) {
        grid-column: 1/span 4;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(4) {
        grid-column: 5/-1;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(5) {
        grid-column: 5/-1;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(5) {
        grid-column: 1/span 3;
        grid-row: 3;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(6) {
        grid-column: 1/span 4;
        grid-row: 1;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(6) {
        grid-column: 4/-1;
        grid-row: 3;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(7) {
        grid-column: 1/span 3;
        grid-row: 4;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(7) {
        grid-column: 1/span 2;
        grid-row: 4;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(8) {
        grid-column: 1/-1;
        grid-row: 4;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(8) {
        grid-column: 3/span 3;
        grid-row: 4;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(9) {
        grid-column: 1/span 2;
        grid-row: 4;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(9) {
        grid-column: 6/-1;
        grid-row: 4;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(10) {
        grid-column: 1/span 2;
        grid-row: 5;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(10) {
        grid-column: 1/span 3;
        grid-row: 5;
    }
}

@media (min-width: 40.625em) {
    .c-services__item:nth-of-type(11) {
        grid-column: 1/span 2;
        grid-row: 5;
    }
}

@media (min-width: 62em) {
    .c-services__item:nth-of-type(11) {
        grid-column: 4/-2;
        grid-row: 5;
    }
}

.c-services__item h3 {
    color: var(--color-brand-primary);
    font-size: var(--s1);
    line-height: 1.2;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

.c-services__item:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 25px 0;
    cursor: pointer;
    transition: inherit;
    background-color: var(--color-brand-accent);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.c-services__item:after {
    background-blend-mode: difference!important;
}

.c-services__item:nth-of-type(1):after {
    background-image: url("https://tizayuca.gob.mx/img/tys/sg.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(2):after {
    background-image: url("https://tizayuca.gob.mx/img/tys/reg.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(3):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/obras.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(4):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/finanzas.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(5):hover:after {
    background-blend-mode: difference;
    background-image: url("https://tizayuca.gob.mx/img/tys/imduyv.svg");
}

.c-services__item:nth-of-type(6):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/contra.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(7):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/ssp.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(8):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/sedeco.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(9):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/bienestar.svg");
    background-blend-mode: difference;
}

.c-services__item:nth-of-type(10):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/dif.svg");
}

.c-services__item:nth-of-type(11):hover:after {
    background-image: url("https://tizayuca.gob.mx/img/tys/pc.svg");
    background-blend-mode: difference;
}

.c-services__item p {
    margin-top: var(--s-1);
    font-weight: 400;
    color: #706d7e;
}

.c-services__item:hover {
    background-color: var(--color-brand-accent);
}

@media (min-width: 40.625em) {
    .c-services__item:hover {
        transform: translateY(-93px);
    }
}

@media (min-width: 48em) {
    .c-services__item:hover {
        transform: translateY(-138px);
    }
}

.c-services__item:hover h3 {
    color: #fff;
}

.c-services__item:hover p {
    color: rgba(255, 255, 255, 0.8);
}

.c-services__item:hover:after {
    background-color: #fff;
    background-blend-mode: normal!important;
}