body {
    max-width: 1700px;
    margin: 0 auto;
}
.inner {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 93px;
}
.nav-large {
    max-width: 800px;
    display: flex;
    justify-content: space-between;
}
.nav-small {
    display: none;
}
header a, #contact nav a {
    color: #394b50;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 21px;
    white-space: nowrap;
    transition: .3s;
}
header a:hover, #contact nav a:hover {
    background: #ffbb42;
    color: #fff;
    border-radius: 2px;
}
#home {
    background: #709dca;
    height: 589px;
}
h2, h6 {
    text-align: center;
}
h1 {
    font-family: "Gotham-Black", sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    padding-top: 110px;
}
h6 {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    padding-bottom: 33px;
}
#home h6, #about h2, #clients h2 {
    color: #ffffff;
}
#home input, #contact input {
    width: 240px;
    color: #a9a9a9;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    border: none;
    background-repeat: no-repeat;
    background-position: 17px;
    margin: 4px;
    padding: 14px 0 14px 46px;
    border-radius: 2px;
}
#full-name {
    background-image: url(/icons/man.png);
}
#contact #full-name {
    width: 308px;
    border: 1px solid #cbcbcb;
}
#email {
    background-image: url(/icons/email.png);
}
#contact #email {
    width: 388px;
    border: 1px solid #cbcbcb;
}
#phone {
    background-image: url(/icons/phone.png);
}
#home button, #contact button {
    width: 211px;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    background: #ffbb42;
    border: none;
    margin: 4px;
    padding: 14px;
    border-radius: 2px;
}
#home button:hover, #contact button:hover {
    cursor: pointer;
}
.macbook {
    margin-top: 85px;
}
.slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 1%);
}
.slider:hover {
    cursor: grab;
}
.slider img {
    width: 445px;
    height: 248px;
}
.dots_wrapper {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.dot {
    margin: 0 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #dedfe0;
}
.dot_active {
    border: 2px solid #1ca8dd;
}
.transparent-block {
    height: 210px;
    width: 1700px;
}
h2 {
    font-family: "Gotham-Black", sans-serif;
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
}
#service .inner {
    padding-top: 140px;
    display: flex;
    flex-flow: column wrap;
}
.wrapper-service-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.service-block {
    min-width: 320px;
    max-width: 500px;
    display: flex;
    margin: 40px;
}
.service-img {
    width: 70px;
}
.service-content {
    max-width: 400px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    margin-left: 20px;
}
h5 {
    color: #394b50;
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.service-text {
    text-align: left;
    color: #7b7b7b;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
}
#about {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 150px 0 0;
}
#about img {
    width: 850px;
    height: 623px;
}
.wrapper-about-content {
    width: 850px;
    height: 623px;
    background: #ffc155;
    display: flex;
}
#about h2 {
    text-align: left;
    margin-bottom: 15px;
}
.about-content {
    max-width: 505px;
    display: block;
    margin: auto 32% auto 10%;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.about-text {
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 25px;
}
#about a {
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 21px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid #fff;
}
#about a:hover {
    background: rgba(255, 187, 66, 0.8);
    color: #fff;
    border-radius: 2px;
}
#about a:active {
    background: #ffbb42;
    color: #fff;
    border-radius: 2px;
}
#pricing {
    background: #e7edf3;
    padding: 160px 0;
}
#pricing h6 {
    margin-bottom: 49px;
}
.pricing-blocks {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 501px;
}
.plan {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 388px;
    height: 441px;
    border: 1px solid #ccd5df;
    background-color: #ffffff;
    border-radius: 5px;
}
.plan:nth-child(2) {
    width: 390px;
    height: 503px;
    background-color: #709dca;
    border-radius: 5px;
}
.plan:nth-child(2) h3, .plan:nth-child(2) .price-string, 
.plan:nth-child(2) .count-account, .plan:nth-child(2) .extra, 
.plan:nth-child(2) .customs {
    color: #fff;
}
h3 {
    color: #818b95;
    font-family: Lato;
    font-size: 25px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.price {
    margin-bottom: 30px;
}
.price-number {
    color: #ffbb42;
    font-family: "Lato";
    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
}
.price-string {
    color: #818b95;
    font-family: "Lato";
    font-size: 20px;
    font-weight: 300;
    font-variant: small-caps;
    font-weight: 300;
}
.count-account, .extra, .customs {
    color: #b5bbc1;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
}
.count-account::before, .extra::before, .customs::before {
    display: block;
    content: '';
    width: 80%;
    height: 1px;
    margin: 2px auto 2px;
    background: #e2e9f0;
}
.customs {
    margin-bottom: 40px;
}
#pricing a, #works a {
    background: #ffbb42;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 21px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid #ffbb42;
}
#pricing a:hover, #works a:hover {
    background: #fff;
    color: #ffbb42;
    border-radius: 2px;
    border: 1px solid #ffbb42;
}
#works {
    padding: 160px 0;
}
.works-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 90px 0;
}
.works-content {
    width: 213px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}
#works img {
    margin: 70px 0;
}
.works-text {
    text-align: center;
    color: #7b7b7b;
    font-family: "Open Sans";
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
}
h4 {
    color: #394b50;
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
    margin: 20px 0;
}
#clients {
    background: #ffc155;
    padding: 150px 0;
}
.clients-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.clients-content {
    width: 460px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 40px 30px;
    background: #fff;
    margin: 10px 20px;
}
#clients img {
    margin-right: 30px;
}
blockquote {
    color: #7b7b7b;
    font-family: "Open Sans";
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 20px;
}
#clients p {
    color: #99a9ae;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
}
#clients span {
    color: #f6772c;
}
#contact {
    padding-top: 50px;
}
#contact form {
    margin-bottom: 53px;
}
#contact nav {
    padding: 50px 0 29px;
    line-height: 20px;
}
#contact .phone {
    font-family: Lato;
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 24px;
}
#contact .phone a {
    color: #394b50;
    text-decoration: none;
}
#contact img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    transition: .3s;
}
#contact .socials img:hover {
    transform: scale(1.5);
}
#contact .socials {
    width: 150px;
    letter-spacing: 10px;
    margin: 0 auto;
}
footer {
    height: 49px;
    background-color: #709dca;
    margin-top: 52px;
    color: #ffffff;
    font-family: "Open Sans";
    font-size: 13px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media all and (max-width: 1720px) {
    body {
        margin: 0 10px;
        overflow-x: hidden;
    }
    #about img, .wrapper-about-content {
        width: 75%;
        height: 75%;
    }
}
@media all and (max-width: 1149px) {
    .slider {
        transform: translate(-50%, 12%);
    }
}
@media all and (max-width: 900px) {
    .nav-large {
        display: none;
    }
    .nav-small {
        display: block;
    }
}
@media all and (max-width: 759px) {
    #home form {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        }
    .slider {
        transform: translate(-50%, 34%);
        width: 70%;
    }
    .macbook img {
        width: 80%;
    }
    .service-block {
        margin: 10px 0 5px;
    }
    .service-content {
        width: auto;
    }
    .service-img {
        width: 40px;
    }
    .service-block img {
        width: 30px;
    }
    .service-block:nth-child(2) img {
        width: 40px;
        height: auto;
    }
    .service-block:last-child img {
        width: auto;
        height: 30px;
    }
    h5, .service-text {
        font-size: .8em;
    }
}

.mdl-button--icon {
    height: 45px;
    width: 45px;
}