@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: local('Lato Light'), local('Lato-Light'),
        url('./assets/fonts/lato-v16-latin-300.eot'),
        url('./assets/fonts/lato-v16-latin-300.woff') format('woff'),
        url('./assets/fonts/lato-v16-latin-300.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
        url('./assets/fonts/lato-v16-latin-regular.eot'),
        url('./assets/fonts/lato-v16-latin-regular.woff') format('woff'),
        url('./assets/fonts/lato-v16-latin-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'),
        url('./assets/fonts/lato-v16-latin-700.eot'),
        url('./assets/fonts/lato-v16-latin-700.woff') format('woff'),
        url('./assets/fonts/lato-v16-latin-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black'),
        url('./assets/fonts/lato-v16-latin-900.eot'),
        url('./assets/fonts/lato-v16-latin-900.woff') format('woff'),
        url('./assets/fonts/lato-v16-latin-900.ttf') format('truetype');
}

*{
    margin: 0;
    padding:0;
    font-family: 'Lato', sans-serif;
}

.wrapper {
    max-width: 1020px;
    margin:0 auto;
    padding: 0 40px;
    box-sizing: border-box;

}

.header {
    background-color: #2d303a;
    border-bottom: 6px solid #323746;
    position: sticky;
    top:0;
    z-index: 10;
}

.header__block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 89px;
}

.logo__text{
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.26px;
}
.logo__text-star {
    color:#f06c64;
}

.hamburger {
    display: none;
}

.nav__item {
    display: flex;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    padding-top: 10px;
}
.nav__item__link a {
    margin-right: 30px;
    text-decoration: none;
    color: #ffffff;
    transition: color .2s linear;
    cursor: pointer;
    position: relative;
}
.nav__item__link:not(:last-child) a::after {
    content: "";
    width: 3px;
    height: 3px;
    background-color: #494e62;
    border-radius: 50%;
    position: absolute;
    top: 46%;
    right: -17px;
}
.nav__item__link--active a {
    color: #f06c64;
}
.nav__item__link:last-child a {
    margin-right: 0;
}

/* section slider */

.slider{
    height: 600px;
    background-color: #f06c64;
    scroll-margin-top: 95px;
    box-sizing: border-box; /* add for media 768 - 1019 */
    border-bottom: 6px solid #ea676b;

}

.slider__content{
    position: relative;
    width: 100%;
    height: inherit;
}

.phones{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 53px;
}
.slide{
    width: 100%;
    height: inherit;
}
.slide__one{
    position: absolute;
}
.slide__two{
    background-color: #648BF0;
    position: absolute;
    border-bottom: 6px solid  rgb(106, 146, 248);
    box-sizing: border-box;
}

.phone__vertikal, .phone__horizontal{
    margin: 0px 34px 0px 35px;
    padding: 0px 2px 0px 2px;
}

.phone__vertikal, .phone__horizontal{
    position: relative;
    cursor: pointer;
}

.phone__vertical--screen::before{
    content:'';
    position: absolute;
    display: block;
    height: 68.4%;
    width: 78.5%;
    top: 13.4%;
    left: 6%;
    background: black;
    cursor: pointer;
}

.phone__horizontal--screen::before{
    content:'';
    position: absolute;
    display: block;
    height: 77.6%;
    width: 68.8%;
    top: 5.8%;
    left: 12.4%;
    background: black;
    cursor: pointer;
}

.arrows{
    position: relative;
    top: -50%;
    width: 1020px;
    margin: 0 auto;
}

.slider__arrow{
    background-image: url(./assets/images/arrow-left.svg);
    background-color: transparent;
    width: 14px;
    height: 6px;
    border: none;
    cursor: pointer;
    transition: filter .3s ease-in;
    z-index: 5;
    position: absolute;
    opacity: 0.5;
}

.slider__arrow--left{
    left: 42px;
}
.slider__arrow--right{
    transform: rotate(180deg);
    right: 40px;
}

/* animation */

@keyframes left {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

@keyframes right {
    from {
        left: 100%;
    }
    to {
        left: 0;
    }
}

.item {
    display: none;
    margin: 0 auto;
    animation: 0.5s ease-out;
}

.item.active {
    display: block;
}

.active,
.next {
    display: block;
}

.next {
    position: absolute;
    top: 0;
    width: 100%;
}

.to-left {
    animation-name: left;
}

.to-right {
    animation-name: right;
    animation-direction: reverse;
}

.from-left {
    animation-name: left;
    animation-direction: reverse;
}

.from-right {
    animation-name: right;
}

/* section services */

.services{
    background-color: #f2f2f2;
    border-bottom: 6px solid #ffffff;
    padding-bottom: 29px;
    scroll-margin-top: 95px;
}
.services__title{
    font-weight: 900;
    font-size: 30px;
    color: #666d89;
    letter-spacing: -0.2px;
    padding-top: 59px;
    padding-bottom: 18px;
}
.services__text{
    font-weight: 300;
    font-size: 18px;
    color: #aeb2c2;
    line-height: 30px;
    text-align: justify;
}


.layout{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 46px;
}
.service{
    display: flex;
    width: 298px;
    height: 84px;
    margin-bottom: 39px;
}
.service__icon{
    margin-right: 20px;
}

.service__content{
    display: flex;
    flex-direction: column;
}
.service__title{
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    color: #666d89;
    display: flex;
    flex-direction: column;
    padding-bottom: 11px;
}

.service__text{
    font-size: 12px;
    color: #aeb2c2;
    line-height: 20.5px;
    text-align: justify;
}

/* section portfolio */

.portfolio{
    background-color: #2d303a;
    border-bottom: 6px solid #323746;
    padding-bottom: 55px;
    scroll-margin-top: 95px;
}
.portfolio__title{
    font-size: 30px;
    font-weight: 900;
    color: #666d89;
    padding-top: 60px;
}
.portfolio__text{
    font-size: 18px;
    font-weight: 300;
    color: #767e9e;
    padding-top: 22px;
    padding-bottom: 14px;
}

.portfolio__topic{
    display: inline;
}

.portfolio__topic__btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 21.56px;
    color: #6e7593;
    border: 1px solid #666d89;
    border-radius: 5px;
    padding: 0 6px;
    cursor: pointer;
    background-color: transparent;
    margin-right: 10px;
    transition: .3s ease-in;
    outline: none;
}
.portfolio__topic__btn--active{
    color: #dedede;
    border-color: #c5c5c5;
}
.portfolio__topic__btn:hover{
    background-color: #f2f2f2;
    color:#6e7593;
    border-color: #c5c5c5;
}
.portfolio__topic__btn:last-child{
    margin-right: 0px;
}
.portfolio__block{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 19px;
    align-items: center;
}
.portfolio__image{
    margin-bottom: 17px;
}

.portfolio__image:nth-child(n+13) {
    display: none;
}

.portfolio__image--active {
    outline: 5px solid #F06C64;
    outline-offset: -5px;
}

/* section About-us */

.about-us{
    background-color: #f2f2f2;
    border-bottom: 6px solid #ffffff;
    padding-bottom: 67px;
    scroll-margin-top: 95px;
}

.about-us__title{
    font-size: 30px;
    font-weight: 900;
    color: #666d89;
    padding-top: 59px;
    padding-bottom: 18px;
}

.about-us__text{
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    color: #8a91ab;
    text-align: justify;
    margin-bottom: 45px;
}

.about-us__column{
    display: flex;
    justify-content: space-between;
}
.about-us__person{
    max-width: 300px;
    overflow: hidden;
}
.about-us__name{
    font-size: 18px;
    font-weight: 900;
    color: #666d89;
    line-height: 18px;
    letter-spacing: -0.14px;
    padding-top: 14px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
}
.about-us__description{
    font-size: 12px;
    font-weight: 400;
    color: #767e9e;
    line-height: 21.56px;
    text-align: justify;
    padding-bottom: 24px;
}

.social{
    display: flex;
    list-style: none;
}
.social__right{
    margin-right: 8px;
}
.social__right:last-child{
    margin-right: 0;
}
.social__icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #767e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s linear;
}
.social__icon:hover {
    background-color: #f0d8d9;
}

.icon{
    height: 14px;
    width: 14px;
    display: inline-block;
    background-size: cover;
}

.icon:hover{
    filter: invert(50%) sepia(50%) saturate(2500%) hue-rotate(525deg) brightness(100%) contrast(100%);
}

.icon__facebook{
    background-image: url(./assets/images/social/facebook.svg);
}
.icon__google-plus{
    background-image: url(./assets/images/social/google-plus.svg);
}
.icon__twitter{
    background-image: url(./assets/images/social/twitter.svg);
}
.icon__linkedin{
    background-image: url(./assets/images/social/linkedin.svg);
}

/* section form */

.quote {
    background-color: #f06c64;
    border-bottom: 6px solid #ea676b;
    scroll-margin-top: 95px;
}
.quote__title {
    font-size: 30px;
    font-weight: 900;
    color: #f0d8d9;
    padding-top: 59px;
    padding-bottom: 18px;
}
.quote__text {
    font-size: 18px;
    font-weight: 300;
    color: #f0adaa;
    line-height: 30px;
    text-align: justify;
    padding-bottom: 44px;
}
.quote__content {
    display: flex;
    justify-content: space-between;
}

.form {
    display: flex;
    flex-direction: column;
    width: 66%;
}
.input {
    background-color: #d6564f;
    color: #f48c8f;
    height: 38px;
    padding-left: 15px;
    border-radius: 4px;
    border:none;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    box-sizing: border-box;
    transition: box-shadow .3s ease-in-out;
    outline: none;
    margin-bottom: 16px;
}
.input:hover, .submit:hover{
    background-color: #dd453d;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.input--textarea{
    height: 159px;
    padding-top:12px;
    resize: none;
}
.input::placeholder{
    color: #f48c8f;
}
.submit{
    height: 38px;
    width: 150px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    background-color: #d6564f;
    color: #f0d8d9;
    cursor:pointer;
    border-radius: 4px;
    border:none;
    outline:none;
    margin-bottom: 13px;
    transition: box-shadow .3s ease-in-out;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(80, 80, 80, 0.4);
}

.hidden{
    display: none;
}

.message{
    position: absolute;
    top: 25%;
    left: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 4px;
    width: 300px;
    max-width: 50%;
    max-height: 80%;
    word-break: break-all;
}
.message__title, .message__subject, .message__description{
    padding-bottom: 10px;
}
.message__close{
    height: 30px;
    width: 40px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #d6564f;
    color: #f0d8d9;
    cursor:pointer;
    border-radius: 4px;
    border:none;
    outline:none;
    transition: box-shadow .3s ease-in;
}

.contacts{
    width: 30%;
}
.contacts__title{
    font-size: 18px;
    font-weight: 900;
    color: #f0d8d9;
    letter-spacing: -.1px;
    margin-bottom: 7px;
    margin-top: -1px;
}
.contacts__text{
    font-size: 12px;
    font-weight: 400;
    line-height: 21.56px;
    color: #f0d8d9;
    text-align: justify;
    letter-spacing: -.14px;
    margin-bottom: 22px;
}
.contacts__item{
    margin-bottom: 2px;
    list-style: none;
}
.contacts__link{
    text-decoration: none;
}
.location{
    width: 14px;
    height: 12px;
    display: inline-block;
    background-size: cover;
    margin-right: 10px;
}
.phone{
    width: 13px;
    height: 12px;
    display: inline-block;
    background-size: cover;
    margin-right: 10px;
}

.email {
    width: 17px;
    height: 9px;
    display: inline-block;
    background-size: cover;
    margin-right: 6px;
}

.ikon__location {
    background-image: url(./assets/images/icon/location.svg);
}

.ikon__phone {
    background-image: url(./assets/images/icon/phone.svg);
}

.ikon__email {
    background-image: url(./assets/images/icon/email.svg);
}

.contacts__description{
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: #f0d8d9
}

/* footer */

.footer{
    background-color: #2d303a;
}
.footer__social{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76px;
}
.footer__copyright{
    font-size: 12px;
    line-height: 12px;
    color: #666d89;
}

.social{
    display: flex;
    list-style: none;
}
.social__right{
    margin-right: 8px;
}
.social__right:last-child{
    margin-right: 0;
}
.social__icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #767e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s linear;
}
.social__icon:hover {
    background-color: #f0d8d9;
}
.icon{
    height: 14px;
    width: 14px;
    display: inline-block;
    background-size: cover;
}
.icon:hover{
    filter: invert(50%) sepia(50%) saturate(2500%) hue-rotate(525deg) brightness(100%) contrast(100%);
}
.icon__facebook{
    background-image: url(./assets/images/social/facebook.svg);
}
.icon__google-plus{
    background-image: url(./assets/images/social/google-plus.svg);
}
.icon__twitter{
    background-image: url(./assets/images/social/twitter.svg);
}
.icon__linkedin{
    background-image: url(./assets/images/social/linkedin.svg);
}

/* responsive */

@media (hover:hover){
    .nav__item__link:hover{
        color: #f06c64;
    }
}

@media (min-width: 768px) and (max-width: 1019px){

    body {
        width: 100%;
    }
    /* slider */

    .slider{
        height: 446px;
    }
    .phones{
        padding-top: 47px;
    }
    .phone__vertikal--size{
        width: 180px;
        height: auto;
    }
    .phone__horizontal--size{
        width: 364px;
        height: auto;
    }
    .slide__two--size{
        width: 364px;
    }
    .arrows{
        width: 100%;
    }
    .slider__arrow--left{
        left: 30px;
    }
    .slider__arrow--right{
        transform: rotate(180deg);
        right: 27px;
    }

    /* services */

    .services__title{
        padding-top: 40px;
    }
    .layout{
        padding-top: 28px;
        width: 95%;
    }

    /* portfolio */

    .portfolio__text{
        padding-top: 14px;
        padding-bottom: 12px;
    }
    .portfolio__block{
        margin-top: 28px;
    }

    .portfolio__image{
        min-width: 216px;
        width:30%;
    }

    /* about */

    .about-us__title{
        padding-top: 52px;
        padding-bottom: 14px;
    }
    .about-us__text{
        margin-bottom: 28px;
    }

    .about-us__person{
        margin-right: 15px;
    }

    .about-us__person--photo{
        min-width:219px;
        width: 100%;
    }

    /* form */

    .quote__title{
        padding-top: 53px;
    }
    .quote__text{
        padding-bottom: 19px;
    }
    .input{
        margin-bottom: 12px;
    }
    .submit{
        margin-bottom: 39px;
    }
}

@media only screen and (max-width: 767px){

    .header__block{
        justify-content: center;
        min-height: 65px;
    }
    .logo{
        z-index: 5;
    }
    .nav__item{
        display: none;
    }
    .nav__item__link{
        font-size: 24px;
        padding-bottom: 20px;
        padding-left: 20%;
    }
    .nav__item__link:not(:last-child) a::after {
        content: '';
        width: 0;
    }

    .hamburger{
        position: absolute;
        width: 25px;
        height: 20px;
        left: 20px;
        display: inline-block;
        z-index: 6;
    }

    .hamburger__line, .hamburger::before, .hamburger::after  {
        content: '';
        position: absolute;
        display: inline-block;
        height: 2.4px;
        width: 100%;
        left: 0;
        top: 9px;
        border-radius: 5px;
        background: #FFFFFF;
    }

    .hamburger::before{
        top: 2px;
    }

    .hamburger::after{
        top: 16px;
    }

    .hamburger__rotate--active{
        transform: rotate(90deg);
        transition: all 0.5s
    }

    .hamburger--active{
        position: fixed;
        left: 0;
        top: 0;
        display: block;
        width: 55%;
        height: 100vh;
        background: #2D303A;
        padding-top: 20%;
    }

    /* slider */

    .slider{
        height: 221px;
    }
    .phones{
        padding-top: 20px;
    }
    .phone__vertikal, .phone__horizontal{
        margin: 0px 10px 0px 16px;
        padding: 0px 2px 0px 2px;
    }
    .phone__vertikal--size{
        width: 88px;
        height: auto;
    }
    .phone__horizontal--size{
        width: 176px;
        height: auto;
    }
    .slide__two--size{
        width: 176px;
    }
    .arrows{
        width: 100%;
        top: -57%;
    }
    .slider__arrow--left{
        left:10px;
        margin-right: 16px;
    }
    .slider__arrow--right{
        right:10px;
    }

    /* services */

    .services{
        padding-bottom: 15px;
    }
    .services__title{
        padding-top: 25px;
    }
    .layout{
        justify-content: center;
        padding-top: 25px;
    }
    .service{
        width: 100%;
        margin-bottom: 20px;
    }
    .service:last-child{
        margin-bottom: 0px;
    }

    /* portfolio */

    .wrapper{
        padding: 0 30px;
    }
    .portfolio{
        padding-bottom: 42px;
    }
    .portfolio__title{
        padding-top: 42px;
    }
    .portfolio__text{
        padding-top: 14px;
    }
    .portfolio__topic__btn{
        padding: 0 0.4%;
    }
    .portfolio__image{
        width:48%;
        margin-bottom: 14px;
    }
    .portfolio__image:nth-child(n + 9){
        display: none;
    }

    /* about */

    .about-us{
        padding-bottom: 20px;
    }
    .about-us__title{
        padding-top: 33px;
    }
    .about-us__text{
        margin-bottom: 20px;
    }
    .about-us__person{
        max-width: 100%;
        padding-bottom: 34px;
    }
    .about-us__person--photo{
        width: 100%;
    }
    .about-us__column{
        flex-wrap: wrap;
        justify-content: center;
    }
    .about-us__description{
        padding-bottom: 10px;
    }

    /* form */

    .quote{
        padding-bottom: 42px;
    }
    .quote__title{
        padding-top: 44px;
    }
    .quote__text{
        padding-bottom: 20px;
    }
    .quote__content{
        flex-wrap: wrap;
    }
    .form{
        width: 100%;
    }
    .input{
        margin-bottom: 12px;
    }
    .submit{
        width: 100%;
        margin-bottom: 32px;
    }
    .contacts{
        width: 100%;
    }
    .contacts__text{
        margin-bottom: 10px;
    }

    /* footer */

    .footer__copyright{
        display: none;
    }
    .footer__social{
        justify-content: center;
    }
}