@import url("main.inc.css");

/*
This stylesheet handles styles specific for services.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

.services h2 {
    font-size: 240%;
    margin: 26px 0;
    word-break: break-word;
}

.services > ul > li > a {
    color: var(--color1);
    font-size: 125%;
}

.service .list li::before {
    top: -7px;
}

.services span {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.services span, .services span::after {
    content: '';
    width: 17px;
    height: 2px;
    background-color: var(--color1);
    transition: transform 500ms ease-in-out;
}

.services span::after {
    position: absolute;
    transform: rotate(90deg);
}

.services span, .services span::after {
    background-color: var(--color1);
}

.services a.active, .active span, .active span::after {
    color: var(--color3);
}

.active span, .active span::after {
    background-color: var(--color3);
}

.active span::after {
    transform: rotate(0deg);
}

.pricing li {
    margin: 0 0 10px 0;
}

.services .cta {
    min-width: 175px;
    margin-top: 27px;
    margin-bottom: 17px;
}

.services .cta + a {
    display: inline-block;
    color: var(--color1);
    margin-bottom: 27px;
    min-width: 142px;
}

.services .cta, .services .cta + a {
    margin-left: 50%;
    transform: translateX(-50%);
}

.service > img {
    border: solid 1px var(--color3);
}

.services > .notice {
    margin-bottom: 43px;
}

@media screen and (min-width: 1200px) {

    .services > ul > li {
        display: inline-block;
        padding: 15px;
        margin-bottom: 0;
    }

    .dktp-heading {
        text-decoration: none;
    }

    .service {
        border-top: solid 1px var(--color1);
    }

    .service h2 {
        width: 100%;
        margin: 0;
    }

    .service > div {
        padding-right: 11px;
    }

    .service h3 + ul li {
        margin-bottom: 11px;
    }

    .service .cta, .service .cta + a {
        transform: none;
    }

    .service .cta {
        margin: 27px 0 0 0;
    }

    .service .cta + a {
        margin-left: 27px;
    }

    .service > img, .about img {
        display: block;
        max-width: 550px;
        height: auto;
        max-height: 550px;
    }

    .service > img {
        width: 50%;
        margin-top: 50px;
    }

    .services > .notice {
        margin-left: auto;
        margin-right: auto;
    }

}  /*  End of 1200px  */