@charset "UTF-8";
/*============================
#top
============================*/
#top #main {}
#top .container {}
#top .inner {
}
#top h2.heading {
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4em;
    background: #FFF;
    margin-bottom: 2em;
}
#top .inner p {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}
#top .inner p a {}
@media screen and (max-width:768px) {
    #top #main {}
    #top .container {}
    #top .inner {}
    #top h2.heading {
    font-size: 7vw;
    margin-bottom: 1em;
}
    #top .inner p {
    font-size: 1rem;
}
    #top .inner p a {}
}
/*============================
#hero
============================*/
#hero {
    background: rgb(245,250,255);
    background: linear-gradient(0deg, rgba(245,250,255,1) 0%, rgba(255,255,255,1) 100%);
    /* padding: 100px 0 50px; */
}
#hero .inner {
    max-width: 1400px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 40px 0 0 0;
}
#hero .inner .hero-text {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
#hero .inner .hero-text h2 {font-size: 3rem;line-height: 1.4;letter-spacing: 0.1em;margin: 0 0 0.25em;}
#hero .inner .hero-text h3 {
    margin-bottom: 1em;
    letter-spacing: 0.1em;
    font-size: 1.25rem;
}
#hero .inner .hero-text .action {}
#hero .inner .hero-text .action a.button {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}
#hero .inner .hero-text .action a.button {
    width: 100%;
    max-width: 450px;
    padding: 1em 0.5em;
}
#hero .inner .hero-text .action a.button.dignosis {
    padding: 1em 1em;
}

#hero .inner .hero-text .action a.button.registration {
    background: rgb(255,165,2);
    background: linear-gradient(0deg, rgba(255,165,2,1) 0%, rgba(255,200,55,1) 100%);
    color: #333;
    margin-bottom: 20px;
}

#hero .inner .hero-text .action a.button.login {}
#hero .inner .hero-text .action a.button span {}
#hero .inner .hero-text .action a.button span i {
    margin-right: 0.5em;
}
#hero .inner .hero-text .action a.button span i img {}
#hero .inner .hero-image {
    width: 40%;
    text-align: right;
    padding-left: 20px;
}
#hero .inner .hero-image img {}
@media screen and (max-width:768px) {
    #hero {}
    #hero .inner {
    display: block;
    padding: 80px 0 0 0;
}
    #hero .inner .hero-text {
    width: 100%;
    padding: 0 1em;
}
    #hero .inner .hero-text h2 {
    font-size: 6.8vw;
    padding: 2em 0 1em;
}
    #hero .inner .hero-text h3 {
    font-size: 4vw;
}
    #hero .inner .hero-text .action {}
    #hero .inner .hero-text .action a.button {
}
    #hero .inner .hero-text .action a.button span {}
    #hero .inner .hero-text .action a.button span i {}
    #hero .inner .hero-text .action a.button span i img {}
    #hero .inner .hero-image {
    width: 100%;
    overflow: hidden;
}
    #hero .inner .hero-image img {
    width: 100%;
    margin-top: -10%;
    margin-right: -10%;
}
}
/*============================
#service
============================*/
#service {
    background: url(../img/bg-about.jpg) no-repeat center center;
    background-size: cover;
    padding: 0 0 100px;
}
#service h2.heading {
}
#service .inner {
}
#service .inner p {
}
#service .inner ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 60px 0;}
#service .inner ul li {width: 25%;}
#service .inner ul li span {aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(245,250,255,1) 100%);border-radius: 50%;box-shadow: 0px 3px 6px rgba(0,0,0,0.15);font-weight: 600;text-align: center;line-height: 2.5;letter-spacing: 0;}
#service .inner picture {display: block;width: 100%;}
#service .inner picture source {
}
#service .inner picture img {width: 100%;}


@media screen and (max-width:768px) {
#service {padding: 0 0 50px;}
#service h2.heading {
}
#service .inner {
}
#service .inner p {
}
#service .inner ul {margin: 2em 0;}
#service .inner ul li {
    width: 100%;
    margin: 0 0 20px;
    font-size: 1.1rem;
}
#service .inner ul li span {aspect-ratio: auto;border-radius: 4px;line-height: 1.8;padding: 0.5em 1em;word-break: keep-all;}

#service .inner ul li span br {
    display: none;
}
#service .inner picture {
}
#service .inner picture source {
}
#service .inner picture img {
}}

/*============================
#flow
============================*/
#flow {background: url(../img/bg-flow.jpg) no-repeat center center;background-size: cover;padding: 0 0 100px;}
#flow h2.heading {
}
#flow .inner {
}
#flow .inner .flow-slider {
}
#flow .inner .flow-slider .flow-item {padding: 0 40px;}
#flow .inner .flow-slider .flow-item h3 {text-align: center;margin: 0 0 1em;font-weight: 600;}
#flow .inner .flow-slider .flow-item figure {
}
#flow .inner .flow-slider .flow-item figure img {margin: 0 auto 20px;width: 60%;}
#flow .inner .flow-slider .flow-item figure figcaption {font-size: 1rem;line-height: 1.6;}

@media screen and (max-width:768px) {
#flow {padding: 0 0 50px;}
#flow h2.heading {
}
#flow .inner {
}
#flow .inner .flow-slider {
}
#flow .inner .flow-slider .flow-item {padding: 0 1em;}
#flow .inner .flow-slider .flow-item h3 {
}
#flow .inner .flow-slider .flow-item figure {
}
#flow .inner .flow-slider .flow-item figure img {width: 80%;}
#flow .inner .flow-slider .flow-item figure figcaption {
}

}


/*============================
#features
============================*/
#features {background: url(../img/bg-flow.jpg) no-repeat center center;background-size: cover;padding: 0 0 100px;}
#features h2.heading {
}
#features .inner {
}
#features .inner p {
}
#features .inner .features-slider {
}
#features .inner .features-slider .features-item {padding: 0 40px;}
#features .inner .features-slider .features-item figure {
}
#features .inner .features-slider .features-item figure img {margin: 0 auto;width: 80%;}
#features .inner .features-slider .features-item figure figcaption {font-size: 1rem;line-height: 1.6;text-align: center;margin-top: -1em;}

@media screen and (max-width:768px) {
#features {padding: 0 0 50px;}
#features h2.heading {
}
#features .inner {
}
#features .inner p {
}
#features .inner .features-slider {
}
#features .inner .features-slider .features-item {padding: 0 1em;}
#features .inner .features-slider .features-item figure {
}
#features .inner .features-slider .features-item figure img {width: 100%;}
#features .inner .features-slider .features-item figure figcaption {
}
}


/*============================
#dignosis
============================*/
#dignosis {
}
#dignosis h2 {
    background: rgb(255, 116, 140);
    background: linear-gradient(180deg, rgba(255, 116, 140, 1) 0%, rgba(255, 154, 162, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4em;
    color: #FFF;
    margin-bottom: 2em;
}
#dignosis h2 span {
}
#dignosis .inner {
}
#dignosis .inner p {margin-bottom: 2em;}
#dignosis .inner .action {
    text-align: center;
    margin-bottom: 5em;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
#dignosis .inner .action a.button {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
    width: calc(50% - 1em);
    margin: 0 auto;
    font-weight: 400;
}
#dignosis .inner .action a.button.registration {
    background: rgb(255, 165, 2);
    background: linear-gradient(0deg, rgba(255, 165, 2, 1) 0%, rgba(255, 200, 55, 1) 100%);
    color: #333;
}

#dignosis .inner .action a.button span {
}
#dignosis .inner .action a.button span i {margin-right: 0.5em;}
#dignosis .inner .action a.button span i img {
}
#dignosis .inner .action a.button span small {
    font-size: 80%;
}

@media screen and (max-width:768px) {
#dignosis {padding: 0 0 50px;}
#dignosis h2 {font-size: 6vw;margin-bottom: 1em;}
#dignosis h2 span {
}
#dignosis .inner {
}
#dignosis .inner p {
}
#dignosis .inner .action {display: block;margin-bottom: 0;}
#dignosis .inner .action a.button {width: 100%;margin: 0 0 20px;}
#dignosis .inner .action a.button span {
}
#dignosis .inner .action a.button span i {
}
#dignosis .inner .action a.button span i img {
}
#dignosis .inner .action a.button span small {
}

}