@charset "utf-8";

/* common */

html,
body {
    height: 100%;
}

html,
html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

a {
    color: #353535;
    transition: all 0.5s;
}

a:hover {
    color: #3dc9b3;
}

p {
    color: #8c9398;
    word-spacing: 1px;
    line-height: 25px;
    font-size: 14px;
}

h3 {
    font-size: 15px;
    color: #353535;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

h3::after {
    content: " ";
    border: solid 2px #3dc9b3;
    display: block;
    width: 35px;
    margin: 25px auto;
}

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

.to-animate,
.to-animate-2 {
    opacity: 0;
}

.a-tit {
    color: #353535;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url(../img/tit-bg.png) no-repeat center bottom;
    padding-bottom: 30px;
    margin: 10px 0;
}

.a-btn {
    color: #fff;
    font-size: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(61, 201, 179, 0.5);
    display: inline-block;
    margin: 10px auto 20px;
    line-height: 40px;
    text-align: center;
}

.a-btn:hover,
.a-btn:focus {
    background-color: rgba(61, 201, 179, 0.8);
}


/* home */

.home {
    height: 100%;
    position: relative;
}

.home .over-lay {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.home nav {
    color: #666;
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: fixed;
    z-index: 3;
    transition: all 0.3s;
}

.home nav .inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.home nav h1 {
    float: left;
    font-size: 24px;
    padding-left: 20px;
}

.home nav h1 a::before {
    content: " ";
    background-image: url(../img/logo.png);
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin: 0 10px 0 0;
    filter: grayscale(100%);
    opacity: .8;
    transition: all 0.5s;
}

.home nav h1 a:hover::before {
    opacity: 1;
    filter: grayscale(0);
}

.home nav.fixed {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.home nav .menu {
    display: inline-block;
    font-size: 0;
}

.home nav .menu li {
    font-size: 16px;
    display: inline-block;
    padding: 0 20px;
}

.home nav .menu li a {
    display: block;
    position: relative;
}

.home nav .menu li a::before {
    content: ' ';
    display: block;
    background: #3dc9b3;
    width: 30px;
    height: 2px;
    position: absolute;
    left: calc(50% - 15px);
    bottom: 15px;
    transform: scaleX(0);
    visibility: hidden;
    transition: all .3s ease-in-out 0s;
}

.home nav .menu li.active a {
    color: #2ea392;
}

.home nav .menu li.active a::before,
.home nav .menu li a:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

.home nav .link {
    color: #bbb;
    font-size: 12px;
    float: right;
    padding-right: 20px;
}

.home section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: 0 0 300px 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.home section .text {
    color: #333;
    text-align: center;
}

.home section .text h2 {
    font-size: 44px;
    letter-spacing: 10px;
    line-height: 120%;
    margin: 10px;
}

.home section .text h2 span {
    color: rgba(0, 0, 0, 0.36);
}

.home section .text p {
    font-size: 12px;
    color: #8c9398;
    letter-spacing: 1px;
    line-height: 25px;
    margin: 1em 0;
}

.home section .text .a-btn {
    color: #fff;
    font-size: 300;
    background-color: rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.home section .text .a-btn:hover,
.home section .text .a-btn:focus {
    background-color: rgba(0, 0, 0, 0.4);
}


/* intro */

.intro {
    background-color: #f3f5f8;
    text-align: center;
    padding: 90px 0 100px;
}

.intro p {
    width: 830px;
    margin: 50px auto 0;
    padding: 0 10%;
}


/* features */

.features {
    padding: 90px 0 100px;
}

.features ul {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 70px;
}

.features ul li {
    float: left;
    width: calc(100% / 3);
    text-align: center;
}

.features ul li .icon {
    height: 175px;
    width: 175px;
    line-height: 175px;
    max-width: 100%;
    background-color: #3dc9b3;
    border-radius: 50%;
    color: #fff;
    font-size: 55px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 0 auto 50px;
}

.features ul li .icon i {
    text-shadow: rgb(51, 165, 146) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px;
}


/* portfolio */

.portfolio {
    margin: 50px 0 0 0;
}

.portfolio .tit {
    text-align: center;
    background: url(../img/portfolio-bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 80px 0;
}

.portfolio .tit h2 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 30px 0;
}

.portfolio ul {
    padding: 120px 40px 60px 40px;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
}

.portfolio ul li {
    float: left;
    width: calc(100% / 4);
    text-align: center;
    margin: 0 0 40px 0;
}

.portfolio ul li a {
    display: block;
    margin: 0 40px;
    position: relative;
}

.portfolio ul li a:hover {
    transform: translateY(-10px);
}

.portfolio ul li a .img {
    margin: 0 0 10px 0;
    position: relative;
}

.portfolio ul li a .img img {
    width: 80%;
    margin: 0 auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.portfolio ul li a h3 {
    margin: 20px 0 0 0;
}

.portfolio ul li a p {
    height: 80px;
}


/* team */

.team h2 {
    font-size: 2em;
    color: #fff;
    background-color: #242830;
    padding: 90px 0;
    margin: 0 0 90px 0;
    text-align: center;
}

.team ul {
    padding: 40px;
    margin: 0 auto;
    max-width: 900px;
    overflow: hidden;
}

.team ul li {
    float: left;
    text-align: center;
    width: calc(100% / 3);
}

.team ul li img {
    height: 200px;
    width: 200px;
    margin: 0 0 20px 0;
    border-radius: 20px;
}

.team ul li p {
    margin: 0 0 60px 0;
    height: 50px;
}


/* contact */

.contact {
    background-color: #f3f5f8;
    padding: 90px 0 100px;
    position: relative;
}

.contact .go {
    color: #fff;
    font-size: 18px;
    line-height: 46px;
    background-color: rgba(61, 201, 179, 0.5);
    width: 50px;
    height: 50px;
    position: absolute;
    top: -26px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.contact .go:hover,
.contact .go:focus {
    background-color: rgba(61, 201, 179, 1);
}

.contact ul {
    padding: 40px;
    margin: 0 auto;
}

.contact ul li {
    float: left;
    text-align: center;
    width: calc(100% / 3);
}

.contact ul li .inner {
    background-color: #fff;
    display: block;
    padding: 40px 0;
    margin: 20px;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
}

.contact ul li .inner:hover {
    box-shadow: 0px 3px 0px 0px #3dc9b3;
    transform: translate(0, -15px);
}

.contact ul li .inner h3 i {
    color: #AAA;
    display: block;
}

.contact ul li .inner h3 span {
    display: block;
    color: #3dc9b3;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    margin-top: 15px;
    font-weight: bold;
}

.contact ul li .inner p {
    color: #353535;
    transition: all 0.5s;
}

.contact ul li .inner:hover p {
    color: #3dc9b3;
}


/* footer */

footer {
    color: #fff;
    background-color: #242830;
    padding: 40px 0 30px;
}

footer p {
    color: #fff;
    text-align: center;
    line-height: 2em;
}

footer p a {
    color: #fff;
}


/* forms */

.forms {
    font-size: 14px;
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

.forms p {
    color: #666;
    display: block;
    position: relative;
    margin: 0 0 1rem 0;
}

.forms p label {
    font-weight: bolder;
    display: block;
    margin-bottom: 0.1rem;
}

.forms p .inpt {
    font-size: 16px;
    display: block;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.5rem;
    border: solid 1px #ddd;
    border-radius: 0.2rem;
    box-sizing: border-box;
}

.forms p span {
    margin-top: 0.5rem;
    display: block;
}

.forms .submit {
    text-align: center;
    padding-top: 1rem;
}

.forms .submit button {
    color: #fff;
    font-size: 16px;
    font-weight: bolder;
    background-color: #3dc9b3;
    padding: 10px;
    margin: 0 auto;
    width: 100%;
    border-radius: 0.5rem;
    max-width: 100rem;
    border: 0;
    cursor: pointer;
}

.forms .submit span {
    display: block;
    margin-top: 1rem;
}

dl.tips {
    font-size: 14px;
}

dl.tips dt {
    font-weight: bolder;
    padding: 10px 5px;
}

dl.tips dd {
    padding: 5px;
    line-height: 140%;
}


/* h5 */

@media screen and (max-width:1000px) and (min-width:300px) {
    .home section .text h2 span {
        display: block;
    }
    #Nav .menu {
        display: none;
    }
    .intro p {
        max-width: 80%;
    }
    .features ul,
    .contact ul {
        width: auto;
        margin-bottom: 0;
    }
    .features ul li,
    .contact ul li {
        float: none;
        width: auto;
        margin-bottom: 10%;
    }
    .portfolio ul {
        padding: 40px 20px 20px 20px;
    }
    .portfolio ul li {
        float: left;
        width: calc(100% / 2);
        margin: 0 0 20px 0;
    }
    .portfolio ul li a {
        margin: 0 20px;
    }
    .portfolio ul li a .img img {
        width: 100%;
    }
    .team ul li {
        width: calc(100% / 3);
    }
    .team ul li img {
        width: 80%;
        height: 80%;
    }
    .team ul li p {
        margin: 0 0 20px 0;
    }
}