/*==========  Desktop First Method  ========== */
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1500px) {

}
@media only screen and (max-width: 1270px) {
    .container, header .container, .top-banner .container {
        width: 100%;
        padding: 0 12px;
    }
    section.top-banner .arrow-down {
        bottom: 10px;
    }
    section.services .item h3 {
        font-size: 40px;
    }
    section.services .item-text{
        width: 270px;
    }
    section.services .item p{
        font-size: 14px;
        line-height: 22px;
    }
    section.services .item{
        padding-top: 80px;

    }
    section.portfolio .container-fluid .inner .item {
        width: 50%;
    }
    section.services, section.portfolio, section.testimonials {
        margin-bottom: 100px;
    }
    section.portfolio .container-fluid .inner{
        margin-bottom: 50px;
    }
    footer .inner .item{
        width:33.33333%;
    }
    footer .inner .item:first-child{
        display: none;
    }
    div.to-top button{
        width: 50px;
        height: 50px;
    }
}

@media only screen and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
    header .menu, header .discuss-btn{
        display: none;
    }
    header .mobile_menu_btn{
        display: flex;
    }
    header .menu ul li a, header .language a, header .mobile_menu_btn button{
        line-height: 70px;
    }

    section.top-banner .banner h1 {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 20px;
    }

    section.top-banner .banner h2{
        font-size: 16px;
        line-height: 32px;
        margin-bottom: 30px;
    }
    section.top-banner .arrow-down p.mouse:after{
        background: url(../img/design/finger.svg) no-repeat;
        background-size: 100% 100%;
    }
    section.top-banner .arrow-down {
        bottom: 0;
    }

    section.services .item{
        width: 50%;
        padding-top: 50px;
    }
    section.services .item p{
        font-size: 15px;
        line-height: 25px;
    }
    section.services .item-text{
        width: 315px;
    }
    section.services .item h3 {
        font-size: 30px;
    }
    section.portfolio .text h3{
        font-size: 30px;
    }
    div.to-top button{
        width: 40px;
        height: 40px;
        background-size: 7px 11px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    section.top-banner{
        height: calc(100vh - 100px);
    }

    section .top-banner-bg, .top-banner .banner, .top-banner .arrow-down{
        position: relative;
    }
    section.top-banner #particles-js{
        top: 0;
    }

    section.services .item h3 {
        font-size: 25px;
    }
    section.services .item p{
        font-size: 14px;
        line-height: 20px;
    }
    section.services .item-text {
        width: 240px;
    }
    section.portfolio .container-fluid .inner .item {
        width: 100%;
    }
    section.services {
        margin-bottom: 70px;
    }
    section.portfolio .container-fluid .inner{
        margin-bottom: 40px;
    }

    section.discuss{
        padding: 45px 0;
    }
    section.discuss .container{
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    section.discuss .inner h2{
        font-size: 20px;
        margin-bottom: 50px;
    }
    footer .inner .item{
        width: 100%;
        display: none;
    }
    footer .inner .item:last-child{
        display: block;
    }

    footer .inner .item .contacts{
        width: 220px;
        max-width: 100%;
        margin: 0 auto;
    }
    div.mobile-menu .links ul li a{
        font-size: 22px;
        margin-bottom: 30px;
    }
    div.mobile-menu .container .close{
        top: 15px;
        right: 15px;
    }
    div.mobile-menu .header a{
        padding-top: 20px;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 576px) {
    section.services .item{
        width: 100%;
    }
    section.services .item-text {
        margin: 0;
    }
    section.services .item-text {
        width: 100%;
    }
    section.services .item h3{
        border: none;
    }
    section.portfolio .inner h2, section.testimonials .inner h2, section.team .inner h2{
        font-size: 35px;
    }
    section.testimonials .inner .name{
        font-size: 14px;
        margin-bottom: 45px;
    }
    section.testimonials .inner h4{
        font-size: 20px;
    }
    section.testimonials .inner .right-lines, section.testimonials .inner .left-lines{
        display: none;
    }
    .owl-carousel .owl-nav{
        display: none;
    }
    section.discuss form .form-item .label-title{
        width:60px;
    }

    .form-textarea .label-title{
        width: auto !important;
    }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    header .contacts, header .language {
        display: none;
    }

    header .menu ul li a, header .language a, header .mobile_menu_btn button {
        line-height: 55px;
    }

    .container {
        padding: 0 10px;
    }

    header {
        border-bottom: none;
    }


    section.top-banner .banner button {
        width: 150px;
    }


    div.contacts-window .inner h2 {
        font-size: 35px;
        margin-bottom: 30px;
    }


    div.contacts-window .inner .contacts .phone a, div.contacts-window .inner .contacts a{
        font-size: 15px;
    }
    div.contacts-window .inner{
        width: 100%;
    }
    div.contacts-window .inner .contacts{
        width: 195px;
        margin: 0 auto;
    }
    div.contacts-window .inner .contacts a:before {
        width: 18px;
        height: 18px;
    }
    div.contacts-window .inner .contacts{
        margin-bottom: 30px;
    }
    div.contacts-window .container .callback input, div.contacts-window .container .callback input::placeholder{
        font-size: 14px;
    }
    div.contacts-window .container .callback input{
        padding-left: 54px;
    }
    div.contacts-window .container .close{
        top: 15px;
        right: 15px;
    }
    div.contacts-window .container .close button {
        height: 15px;
        width: 15px;
    }
    div.contacts-window .inner {
        padding: 70px 0;
    }
    div.contacts-window .social img {
        height: 20px;
    }
    }

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {

}

/*==========  Mobile First Method  ========== */
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
    /* */
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
    /* */
}


/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
    /* */
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
    /* */
}



@keyframes e {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes c {
    0%, 100% {
        -webkit-transform: translate3d(0, -3px, 0);
        -moz-transform: translate3d(0, -3px, 0);
        transform: translate3d(0, -3px, 0);
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        -o-animation-timing-function: linear;
        animation-timing-function: linear;
    }
    50% {
        -webkit-transform: translate3d(0, 3px, 0);
        -moz-transform: translate3d(0, 3px, 0);
        transform: translate3d(0, 3px, 0);
    }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }