@media (min-width: 1025px) {
  .lg-outer .lg-thumb-item {
    -webkit-transition: border-color 0.25s ease;
    -o-transition: border-color 0.25s ease;
    transition: border-color 0.25s ease;
  }
}
/* -------------------------------------------------------------------
 * small screens - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .row .row {
    margin-left: -18px;
    margin-right: -18px;
  }

  [class*="col-"] {
    padding: 0 18px;
  }
}
/* -------------------------------------------------------------------
 * tablets - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .row {
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
  }

  .row .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: -15px;
    margin-right: -15px;
  }

  [class*="col-"] {
    padding: 0 15px;
  }

  .tab-1-4 {
    width: 25%;
  }

  .tab-1-3 {
    width: 33.33333%;
  }

  .tab-1-2 {
    width: 50%;
  }

  .tab-2-3 {
    width: 66.66667%;
  }

  .tab-3-4 {
    width: 75%;
  }

  .tab-full {
    width: 100%;
  }
}
/* -------------------------------------------------------------------
 * large mobile devices - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .row {
    padding-left: 25px;
    padding-right: 25px;
  }

  .row .row {
    margin-left: -10px;
    margin-right: -10px;
  }

  [class*="col-"] {
    padding: 0 10px;
  }

  .mob-1-4 {
    width: 25%;
  }

  .mob-1-2 {
    width: 50%;
  }

  .mob-3-4 {
    width: 75%;
  }

  .mob-full {
    width: 100%;
  }
}
/* -------------------------------------------------------------------
 * small mobile devices - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
  .row .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  [class*="col-"] {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  [class*="col-"] + [class*="col-"].end {
    float: none;
  }
  #contact {
      margin-top:0px;
  }

  #home .header-logo a {
    background-image: url("../images/just_logo.svg");
    padding-top:0;
}
#home .header-logo {
    top:35px;
    left:-110px;

}
}


/* -------------------------------------------------------------------
 * small screens - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .block-s-1-6 .bgrid {
    width: 16.66667%;
  }

  .block-s-1-4 .bgrid {
    width: 25%;
  }

  .block-s-1-3 .bgrid {
    width: 33.33333%;
  }

  .block-s-1-2 .bgrid {
    width: 50%;
  }

  .block-s-full .bgrid {
    width: 100%;
    clear: both;
  }

  [class*="block-s-"] .bgrid:nth-child(n) {
    clear: none;
  }

  .block-s-1-6 .bgrid:nth-child(6n+1),
  .block-s-1-4 .bgrid:nth-child(4n+1),
  .block-s-1-3 .bgrid:nth-child(3n+1),
  .block-s-1-2 .bgrid:nth-child(2n+1) {
    clear: both;
  }
}
/* -------------------------------------------------------------------
 * tablets - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .block-tab-1-6 .bgrid {
    width: 16.66667%;
  }

  .block-tab-1-4 .bgrid {
    width: 25%;
  }

  .block-tab-1-3 .bgrid {
    width: 33.33333%;
  }

  .block-tab-1-2 .bgrid {
    width: 50%;
  }

  .block-tab-full .bgrid {
    width: 100%;
    clear: both;
  }

  [class*="block-tab-"] .bgrid:nth-child(n) {
    clear: none;
  }

  .block-tab-1-6 .bgrid:nth-child(6n+1),
  .block-tab-1-4 .bgrid:nth-child(4n+1),
  .block-tab-1-3 .bgrid:nth-child(3n+1),
  .block-tab-1-2 .bgrid:nth-child(2n+1) {
    clear: both;
  }
}
/* -------------------------------------------------------------------
 * large mobile devices - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .block-mob-1-6 .bgrid {
    width: 16.66667%;
  }

  .block-mob-1-4 .bgrid {
    width: 25%;
  }

  .block-mob-1-3 .bgrid {
    width: 33.33333%;
  }

  .block-mob-1-2 .bgrid {
    width: 50%;
  }

  .block-mob-full .bgrid {
    width: 100%;
    clear: both;
  }

  [class*="block-mob-"] .bgrid:nth-child(n) {
    clear: none;
  }

  .block-mob-1-6 .bgrid:nth-child(6n+1),
  .block-mob-1-4 .bgrid:nth-child(4n+1),
  .block-mob-1-3 .bgrid:nth-child(3n+1),
  .block-mob-1-2 .bgrid:nth-child(2n+1) {
    clear: both;
  }
}
/* -------------------------------------------------------------------
 * stack on small mobile devices - (_grid.scss)
 * ------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
  .stack .bgrid {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0;
    margin-right: 0;
  }
  #services .feature-box ul {
    list-style: none;
    font-size: 1.7rem;
    line-height: 1.2;
    padding-bottom: 1rem;
}
#services .feature-box li {

    padding-bottom: 1rem;
}
}
@media only screen and (max-width: 400px) {
    .box-words-wrapper b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: -4rem;
        top: -5rem;
    }
}
@media only screen and (max-width: 670px) {
    .box-headline {
        font-size: 100px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .box-primary-nav a {
        padding: 5px 1em;
        font-size: 14px;
    }
    .box-primary-nav {
        padding: 80px 0 0;
    }
    .box-primary-nav .box-social a {
        font-size: 23px;
    }
    .top-bar h1 {
        font-size: 40px;
        line-height: 30px;
    }
    .portfolio .categories-grid .categories ul li {
        float: none;
    }
}

@media only screen and (max-width: 520px) {
    .box-headline {
        font-size: 80px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .main-container {
        padding: 50px 0;
    }
}

@media only screen and (max-width: 420px) {
    .box-headline {
        font-size: 50px;
    }
    .box-intro h5 {
        font-size: 12px;
    }
    .top-bar h1 {
        font-size: 30px;
        line-height: 30px;
    }
}
/* Responsive media queries
==================================================*/

 @media (max-width: 991px) {
    .portfolio .categories-grid span {
        margin-bottom: 0;
        text-align: center;
        width: 100%;
    }
    .portfolio .categories-grid .categories ul li {
        text-align: center;
    }
    .portfolio .categories-grid .categories ul li a {
        margin-left: 0;
    }
    .col-md-6 h3 {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 1024px) {
    html {
        font-size: 9.375px;
    }
    .table-cell h5 {
      margin-left: 0;
    }
}
@media only screen and (max-width: 768px) {
    html {
        font-size: 10px;
        width:830px;
    }
    .table-cell h5 {
      margin-left: 0;
      font-size: 2.2rem;
    }
}

@media only screen and (max-width: 400px) {
    html {
        font-size: 9.375px;

    }
  .box-words-wrapper  em, i, strong, b {
      font-size: 4rem;
      margin-top: -2rem;
    }
    .table-cell h5 {
      font-size: 1.8rem;
    }
}
@media only screen and (max-width: 600px) {
    h1,
    .h01 {
        font-size: 2.6rem;
        letter-spacing: -.07rem;
    }
}
@media only screen and (max-width: 768px) {
    p.lead {
        font-size: 1.8rem;
    }
}
@media only screen and (max-width: 1024px) {
    .bgrid {
        padding: 0 18px;
    }
}

@media only screen and (max-width: 768px) {
    .bgrid {
        padding: 0 15px;
    }
}

@media only screen and (max-width: 600px) {
    .bgrid {
        padding: 0 10px;
    }
}

@media only screen and (max-width: 400px) {
    .bgrid {
        padding: 0;
    }

}
/* -------------------------------------------------------------------
 * responsive:
 * section-intro
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    .section-intro h1 {
        font-size: 4.4rem;
    }
    .section-intro .lead {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 768px) {
    .section-intro h1 {
        font-size: 4rem;
    }
    .section-intro h3 {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 600px) {
    .section-intro h1 {
        font-size: 3.4rem;
    }
    .section-intro h3 {
        font-size: 1.7rem;
    }
}


@media only screen and (max-width: 400px) {
    .section-intro h1 {
        font-size: 3.1rem;
    }
}
@media only screen and (max-width: 56.25em) {
    .navigation__button {
        top: 4rem;
        right: 3rem
    }
}

@media only screen and (max-width: 37.5em) {
    .navigation__button {
        top: 3rem;
        right: 2rem
    }
}
@media only screen and (max-width: 56.25em) {
    .navigation__background {
        top: 4.5rem;
        right: 4.5rem
    }
    .navigation__list {
        position: absolute;
        top: 50%;
        right: 0;
    }
}

@media only screen and (max-width: 37.5em) {
    .navigation__background {
        top: 3.5rem;
        right: 3.5rem
    }
    .navigation__list {
        position: absolute;
        top: 50%;
        right: -4rem;
    }
}
/* -------------------------------------------------------------------
 * responsive:
 * header section
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
    header .header-logo a {
        display: block;
    }
}



/* -------------------------------------------------------------------
 * responsive:
 * home section
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1200px) {
    #services .row .col-1-of-4 {
        width: 33% !important;
        padding:1rem;
    }
    .home-content-tablecell h3 {
        font-size: 2.1rem;
    }
    .home-content-tablecell h1 {
        font-size: 7rem;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 1.7rem;
        line-height: 1.2;
    }
    #services .heading-tertiary {
        font-size: 2.3rem;
        text-align: center;
    }
}

@media only screen and (max-width: 1024px) {
    #services .row .col-1-of-4 {
        width: 50% !important;
        padding:2rem;
    }
    .home-content-tablecell h3 {
        font-size: 2rem;
    }

    .feature-box {
        width: 100%;
    }
    .feature-box ul li {
        padding-bottom: 1rem;
    }
    #contact{
        margin-top: 0;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 1.7rem;
        line-height: 1.2;
    }
    #services .heading-tertiary {
        font-size: 2.3rem;
        text-align: center;
    }
    .home-content-tablecell .row {
        max-width: 600px;
        padding-top: 37rem;
    }
}

@media only screen and (max-width: 768px) {
    #services .row .col-1-of-4 {
        width: 100% !important;
    }
    html, body {
        width:100%;
        box-sizing: border-box;
    }
    .home-content-tablecell .row {
        max-width: 600px;
        padding-top: 37rem;
    }
    .home-content-tablecell h3 {
        font-size: 1.8rem;
    }
    .home-content-tablecell h1 {
        font-size: 5.2rem;
    }
    .home-content-tablecell h1 br {
        display: none;
    }
    .home-social-list {
        left: 36px;
        bottom: 30px;
        font-size: 2.1rem;
    }
    .home-social-list::before {
        height: 30px;
    }
    .scrolldown .scroll-icon {
        font-size: 1.2rem;
        top: 24px;
        right: 10px;
    }
    .feature-box {
        width: 100%;
    }
    .feature-box ul li {
        padding-bottom: 1rem;
    }
    #contact{
        margin-top: 0;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 2.1rem;
        line-height: 1.2;
    }
    #services .heading-tertiary {
        font-size: 2.3rem;
        text-align: center;
    }
}

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

    html, body {
        width:100%;
        box-sizing: border-box;
    }
    .box-words-wrapper {

        width: 479px;
        margin-left:0;
    }
    #home {
        min-height: 702px;
    }
    .home-content-tablecell .row {
        max-width: 480px;
        padding-top: 50rem;
        padding-bottom: 0rem;
    }
    .home-content-tablecell h3 {
        font-size: 1.7rem;
    }
    .home-content-tablecell h1 {
        font-size: 4.8rem;
        margin-left: -6rem;
    }
    .feature-box {
        width: 100%;
    }
    .feature-box ul li {
        padding-bottom: 1rem;
    }
    #contact{
        margin-top: 0;
    }
    #services .row .col-1-of-4 {
        width: 100% !important;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 1.6rem;
        line-height: 1.2;
    }
}

@media only screen and (max-width: 500px) {
    #services .row .col-1-of-4 {
        width: 100% !important;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 1.6rem;
        line-height: 1.2;
    }
    html {
        width:100%;
        box-sizing: border-box;
    }
    /*moving heading alignment*/
    .box-words-wrapper b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        right: -18rem;
        top: -229px;
    }
    .box-words-wrapper {
        width:unset;
        margin-left:-28rem;
    }
    /* moving heading font size */
    em, i, strong, b {
        font-size: 80px;
        line-height: 3rem;
        font-style: normal;
        font-weight: normal;
    }

    header .header-logo{
        position: absolute;
        top: 50px;
        left:0;
    }
    .home-content-tablecell .row {
        /* max-width: 420px; */
        margin-top: 5rem;
    }
    .home-content-tablecell h3 {
        font-size: 1.5rem;
    }
    .home-content-tablecell h1 {
        font-size: 4.2rem;
        margin-left:0;
    }
    .home-social-list {
        left: 30px;
        bottom: 30px;
        font-size: 1.8rem;
    }
    .home-social-list::before {
        height: 24px;
    }
    .feature-box ul li {
        padding-bottom: 1rem;
    }
    #contact{
        margin-top: 0;
    }
}

@media only screen and (max-width: 400px) {
    html, body {
        width:100%;
        box-sizing: border-box;
    }
    .box-words-wrapper {
        width:unset;
    }
    #home {
        min-height: 654px;
        min-width:100%;

    }
    header .header-logo a {
        padding-top:73rem;
    }
    .home-content-tablecell .row {
        padding-top: 30rem;
        position: fixed;
    }
    .home-content-tablecell h3 {
        font-size: 1.4rem;
    }
    .home-content-tablecell h1 {
        font-size: 3.6rem;
        margin-left: 5rem;
    }
    .table-cell .box-words-wrapper {
      display: inherit;
      top:16rem;
      margin-left: 7rem;
      line-height: 2rem;
    }
    .home-content-table {
        text-align:left;
    }
    #services .row .col-1-of-4 {
        width: 100% !important;
    }
    #services .feature-box ul {
        list-style: none;
        font-size: 1.4rem;
        line-height: 1.2;
    }
}

/* -------------------------------------------------------------------
 * responsive:
 * about
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #about {
        min-height: 636px;
    }
    #about .about-wrap {
        max-width: 800px;
    }
    #about .lead {
        font-size: 3.8rem;
    }
}

@media only screen and (max-width: 900px) {
    #about .about-wrap {
        max-width: 720px;
    }
    #about .lead {
        font-size: 3.6rem;
    }
}

@media only screen and (max-width: 768px) {
    #about h3 {
        font-size: 1.7rem;
    }
    #about .about-wrap {
        max-width: 600px;
    }
    #about .lead {
        font-size: 3.1rem;
    }
}

@media only screen and (max-width: 600px) {
    #about {
        min-height: auto;
    }
    #about .about-wrap {
        max-width: 500px;
    }
    #about .lead {
        margin-top: 4.8rem;
        font-size: 2.8rem;
    }
}

@media only screen and (max-width: 500px) {
    #about h3 {
        font-size: 1.5rem;
    }
    #about .lead {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 400px) {
    #about {
        padding: 4.2rem 0 9.6rem;
    }
    #about .about-wrap {
        max-width: 380px;
    }
    #about .lead {
        font-size: 2.3rem;
    }
}
/* -------------------------------------------------------------------
 * responsive:
 * services
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #services .services-list .service-item {
        padding: 0 40px;
    }
}

@media only screen and (max-width: 900px) {
    #services .services-list .service-item {
        padding: 0 30px;
    }
}

@media only screen and (max-width: 768px) {
    #services {
        padding: 12rem 0 12rem;
    }
    #services .services-content {
        max-width: 550px;
    }
    #services .services-list .service-item {
        padding: 0 15px;
    }
    #services .services-list .icon i {
        font-size: 5.1rem;
    }
}

@media only screen and (max-width: 600px) {
    #services .services-list .service-item {
        padding: 0 10px;
    }
    #services .services-list .icon i {
        font-size: 5rem;
    }
}

@media only screen and (max-width: 400px) {
    #services .services-list .service-item {
        padding: 0;
    }
}
@media only screen and (max-width: 1024px) {
    .lg-sub-html {
        padding: 12px 15% 15px;
    }
}

@media only screen and (max-width: 768px) {
    .lg-sub-html {
        padding: 12px 40px 15px;
    }
}
/* -------------------------------------------------------------------
 * responsive:
 * portfolio
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
    #portfolio .intro-wrap {
        padding: 12rem 0 21rem;
    }
}

@media only screen and (max-width: 600px) {
    #portfolio .bricks-wrapper .brick {
        float: none;
        width: 100%;
    }
    .bricks-wrapper .item-wrap .item-text .folio-title {
        font-size: 2rem;
        line-height: 1.5;
    }
}
/* -------------------------------------------------------------------
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    #testimonial-slider p {
        font-size: 2.8rem;
    }
}

@media only screen and (max-width: 768px) {
    #testimonials h2 {
        font-size: 1.7rem;
    }
    #testimonial-slider p {
        font-size: 2.5rem;
    }
    #testimonial-slider .testimonial-author img {
        width: 6.6rem;
        height: 6.6rem;
    }
    #testimonial-slider .testimonial-author .author-info {
        font-size: 1.8rem;
    }
    #testimonial-slider .testimonial-author .author-info span {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 600px) {
    #testimonials .flex-container {
        width: 90%;
    }
    #testimonial-slider p {
        font-size: 2.2rem;
    }
}

@media only screen and (max-width: 500px) {
    #testimonials h2 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 400px) {
    #testimonials .flex-container {
        width: 100%;
    }
    #testimonial-slider p {
        font-size: 2rem;
    }
}

/* -------------------------------------------------------------------
 * responsive:
 * contact
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 900px) {
    .contact-info {
        width: 38%;
    }
}

@media only screen and (max-width: 768px) {
    .contact-content {
        max-width: 600px;
        text-align: center;
    }
    .contact-info {
        width: 100%;
        margin-top: 3.6rem;
    }
}

@media only screen and (max-width: 600px) {
    .contact-content {
        max-width: 480px;
    }
    @media only screen and (max-width: 500px) {
        .section-intro h3 {
            font-size: 1.5rem;
        }
    }
}

@media only screen and (max-width: 400px) {
    .contact-info {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    #home .box-words-wrapper {
        width:unset;
    }
}
/* -------------------------------------------------------------------
 * responsive:
 * footer
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
    #go-top {
        bottom: 0;
        right: 0;
    }
    .footer-main {
        text-align: center;
    }
    .footer-main .row {
        max-width: 480px;
    }
    .footer-main [class*="col-"] {
        margin-bottom: 3.6rem;
    }
    footer h4.h05 {
        padding-bottom: 3rem;
        margin-bottom: 3rem;
    }
    footer h4.h05::after {
        left: 50%;
        margin-left: -50px;
    }
}

@media only screen and (max-width: 600px) {
    .footer-bottom {
        padding-bottom: .6rem;
    }
    .footer-bottom .copyright span {
        display: block;
    }
    .footer-bottom .copyright span::after {
        display: none;
    }
}
@media only screen and (max-width: 300px){

    html, body {
        width: 106%;
        box-sizing: border-box;
        margin:0;
        padding:0;
    }

    .table-cell .box-words-wrapper {
        margin-left: 2.1rem;        
    }
    #home .row h5{
        font-size: 1.4rem;
    }
    #home .row .box-words-wrapper {
        width:fit-content;
        margin:0;
        padding:0;
    }
    .row [class^="col-"] {
        width: 100% !important;
        text-align: center;
    }
    .home-content-tablecell h1 {
        margin-left: 0;
    } 
}
@media only screen and (max-width: 200px)
{
    html, body {
        width: 110%;
        box-sizing: border-box;
        margin:0;
        padding:0;
    }

    }