/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Super Large Desktops / HD Screens */
@media only screen and (min-width: 2000px) and (max-width: 6000px){

    .works-masonry-container .works-item-one-third {
      margin: 0 !important;
      padding: 0 !important;
      width: 33% !important;
    }
    .works-masonry-container .works-item-two-third {
      margin: 0 !important;
      padding: 0 !important;
      width: 33% !important;
    }
    .works-masonry-container .works-item-one-half {
      margin: 0 !important;
      padding: 0 !important;
      width: 33% !important;
    }
    .works-masonry-container .works-item-one-fourth {
      margin: 0 !important;
      padding: 0 !important;
      width: 33% !important;
    }
    .works-masonry-container .works-item-full-width {
      margin: 0 !important;
      padding: 0 !important;
      width: 33% !important;
    }
    .works-masonry-container .works-item-one-third-spaced{
      margin: 1% !important;
      padding: 0 !important;
      width: 31% !important;
    }
    .works-masonry-container .works-item-one-half-spaced{
      margin: 1% !important;
      padding: 0 !important;
      width: 31% !important;
    }
    .works-masonry-container .works-item-two-third-spaced{
      margin: 1% !important;
      padding: 0 !important;
      width: 31% !important;
    }
    .works-masonry-container .works-item-one-fourth-spaced{
      margin: 1% !important;
      padding: 0 !important;
      width: 31% !important;
    }


}

/* Larger than Desktop HD */
@media (max-width: 1200px) {
    .container {
        width: 1000px;
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* Larger than desktop */
@media (max-width: 992px) {

  h6.promo-text{
      padding-top: 0px;
  }

  div#mobile-menu.collapse-button{
    display: block;
    position: absolute;
    z-index: 999999;
    /* right: -5px; */
  }


  .collapse-button {
      top: 70px;
      margin-right:8%;
  }

  div#status {
    left: 55%;
    top: 48%;
    }

  nav.mastnav {
      position: fixed !important;
      background-color: white;
      width: 100vw;
      left: 29px;
      top: -150px;
      }

  nav.mastnav ul {
      float: none;
    }

   ul.works-filter.text-left.clearfix.font1{
     padding-top: 40px;
   }

    div.wpb_wrapper:first-child {
      margin-top: 0;
    }

    ul#nav.main-menu.font3.white {
      position: relative;
      background-color: white;
      margin-top: -12.5%;
      padding: 55px;
      padding-top: 135px;
      padding-bottom: 60px;
    }

    .main-logo {
      max-width: 20%;
    }

    .container {
        width: 85%;
        padding-left: 0px;
        padding-right: 0px;
    }

    /* .text-left, .text-right {
        text-align: center;
    } */

    .img-responsive {
        display: inline-block;
    }

    /* .mobile-nav {
        display: block;
        padding-left: 2%;
        padding-right: 3%;
    }
    .masthead{
        display: none;
    } */
    section.mastwrap {
        margin-top: 50px;
    }
    .works-masonry-container .works-item-one-third,
    .works-masonry-container .works-item-two-third,
    .works-masonry-container .works-item-one-half,
    .works-masonry-container .works-item-one-fourth,
    .works-masonry-container .works-item-one-fifth,
    .works-masonry-container .works-item-one-sixth,
    .works-masonry-container .works-item-full-width{
          margin: 0 !important;
          padding: 0 !important;
          width: 50% !important;
    }
    .works-masonry-container .works-item-one-third-spaced,
    .works-masonry-container .works-item-one-half-spaced,
    .works-masonry-container .works-item-two-third-spaced,
    .works-masonry-container .works-item-one-fourth-spaced,
    .works-masonry-container .works-item-one-fifth-spaced,
    .works-masonry-container .works-item-one-sixth-spaced{
          margin: 1% !important;
          padding: 0 !important;
          width: 48% !important;
    }
    .tiny-caps::before{
      display: none;
    }
    .super-heading{
      font-size: 72px;
      line-height: 79px;
    }
    .counter-region .elements-counter .number{
      font-size: 48px;
      line-height: 55px;
    }
}

@media (max-width: 892px) {
  .works-thumbnails-view .works-item-inner p > span {
    font-size: 12px;
    line-height: 25px;
    border-bottom: solid 1px;
    display: none;
  }

  .pad-top-quarter {
    padding-top: 0;
  }

  .mastwrap {
    margin-top: 0;
  }

  .page-id-342 div.wpb_text_column.wpb_content_element{
     float: none;
     padding-top: 80px;
  }

  .wpb_wrapper p {
    padding-top: 0;
  }

  .valign {
    top: 30%;
  }

  #status {
    background-size: 90px;
    margin: -25px 0 0 -50px;
  }

  ul#nav.main-menu.font3.white {
    position: relative;
    background-color: white;
    margin-top: -12.5%;
    padding: 40px;
    padding-top: 111px;
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 800px) {
    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 40px;
        padding-top: 108px;
        padding-bottom: 60px;
      }
}


/* Larger than tablet */
@media (max-width: 768px) {


    /* .container {
        width: 568px;
        padding-left: 100px;
        padding-right: 100px;
    } */

    /* .text-left, .text-right, .mastfoot, .credits, .services-item {
        text-align: center;
    } */


  .main-logo {
    max-width: 35%;
  }

    .img-responsive {
        display: inline-block;
    }

    .works-masonry-container .works-item-one-third,
    .works-masonry-container .works-item-two-third,
    .works-masonry-container .works-item-one-half,
    .works-masonry-container .works-item-one-fourth,
    .works-masonry-container .works-item-one-fifth,
    .works-masonry-container .works-item-one-sixth,
    .works-masonry-container .works-item-full-width{
          margin: 0 !important;
          padding: 0 !important;
          width: 50% !important;
    }
    .works-masonry-container .works-item-one-third-spaced,
    .works-masonry-container .works-item-one-half-spaced,
    .works-masonry-container .works-item-two-third-spaced,
    .works-masonry-container .works-item-one-fourth-spaced,
    .works-masonry-container .works-item-one-fifth-spaced,
    .works-masonry-container .works-item-one-sixth-spaced{
          margin: 1% !important;
          padding: 0 !important;
          width: 48% !important;
    }
    .about h4{
      margin-top: 20px;
      margin-bottom: 40px;
    }
    .service-block{
      margin-bottom: 30px;
    }
    .news-block{
      margin-bottom: 80px;
    }
    footer.mastfoot h6{
      margin-bottom: 20px;
    }
    .about .btn-{
      margin-bottom: 30px;
    }
    .add-top {
        margin-top: 60px;
    }
    .add-top-half {
        margin-top: 30px;
    }
    .pad-top {
        padding-top: 60px;
    }
    .pad-top-half {
        padding-top: 30px;
    }
    .add-bottom {
        margin-bottom: 60px;
    }
    .add-bottom-half {
        margin-bottom: 30px;
    }
    .pad-bottom {
        padding-bottom: 60px;
    }
    .pad-bottom-half {
        padding-bottom: 30px;
    }
    .promo-text{
      font-size: 24px;
      line-height: 31px;
    }

    .collapse-button{
      top: 70px;
    }
}

/*iPhone 6Plus Landscape Mode*/
@media screen and (max-width: 737px) {

    /* .container {
        width: 636px;
        padding-left: 50px;
        padding-right: 50px;
    } */

    .menu_collapser {
      margin-left: -6%;
    }

    div.wpb_column.vc_column_container.vc_col-sm-3 {
      display: none;
    }

    section.mastwrap {
      margin-top: 0;
    }

    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 35px;
        padding-top: 104px;
        padding-bottom: 60px;
      }


}


@media screen and (max-width: 700px) {
    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 30px;
        padding-top: 97px;
        padding-bottom: 60px;
      }
}


/*iPhone 6 Landscape Mode*/
@media screen and (max-width: 667px) {
    /* .container {
        width: 567px;
        padding-left: 20px;
        padding-right: 20px;
    } */
        ul#nav.main-menu.font3.white{
            position: relative;
            background-color: white;
            margin-top: -12.5%;
            padding: 30px;
            padding-top: 97px;
            padding-bottom: 60px;
          }
}


/*Google Nexus and Other Large Smart Phones v1*/
@media screen and (max-width: 600px) {
    /* .container {
        width: 500px;
        padding-left: 50px;
        padding-right: 50px;
    } */
}

@media screen and (max-width: 510px) {
    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 18px;
        padding-top: 75px;
        padding-bottom: 60px;
      }

    div#status {
          left: 62%;
          top: 47%;
        }
}

/*iPhone Landscape Mode and Mediium Smart Phones*/
@media screen and (max-width: 480px) {

    .btn-krome-dark {
      margin-left: 0px;
    }


    .container {
        width: 400px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .works-masonry-container .works-item-one-third,
    .works-masonry-container .works-item-two-third,
    .works-masonry-container .works-item-one-half,
    .works-masonry-container .works-item-one-fourth,
    .works-masonry-container .works-item-one-fifth,
    .works-masonry-container .works-item-one-sixth,
    .works-masonry-container .works-item-full-width{
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
    }
    .works-masonry-container .works-item-one-third-spaced,
    .works-masonry-container .works-item-one-half-spaced,
    .works-masonry-container .works-item-two-third-spaced,
    .works-masonry-container .works-item-one-fourth-spaced,
    .works-masonry-container .works-item-one-fifth-spaced,
    .works-masonry-container .works-item-one-sixth-spaced{
          margin: 1% !important;
          padding: 0 !important;
          width: 98% !important;
          margin-bottom: 10px !important;
    }
    .promo-text, .news-post h4{
      font-size: 24px;
      line-height: 31px;
    }
    .main-heading, .news-post h3{
      font-size: 16px;
      line-height: 23px;
    }
    .super-heading {
      font-size: 32px;
      line-height: 39px;
    }
    .counter-region .elements-counter .number{
      font-size: 16px;
      line-height: 23px;
    }
    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 60px;
        padding-top: 65px;
        padding-bottom: 60px;
      }
}


@media screen and (max-width: 440px) {
      ul#nav.main-menu.font3.white{
          position: relative;
          background-color: white;
          margin-top: -12.5%;
          padding: 40px;
          padding-top: 65px;
          padding-bottom: 60px;
        }
}

/*iPhone 6Plus Portrait Mode*/
@media screen and (max-width: 414px) {
    .container {
        width: 374px;
        padding-left: 20px;
        padding-right: 20px;
    }

    ul#nav.main-menu.font3.white{
        position: relative;
        background-color: white;
        margin-top: -12.5%;
        padding: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
      }
}

/*iPhone 6 Portrait Mode*/
@media screen and (max-width: 375px) {
    .container {
        width: 335px;
        padding-left: 20px;
        padding-right: 20px;
    }

    div#status {
          left: 64%;
          top: 45%;
        }


}

/*iPhone 5S, 5, 4S & 4 Portrait Mode and Very Small Mobile Phones*/
@media screen and (max-width: 320px) {
    .container {
        width: 300px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .collapse-button{
      margin-right:7%;
    }

    ul#nav.main-menu.font3.white{
      position: relative;
      background-color: white;
      margin-top: -12.5%;
      padding: 0px;
      padding-top: 50px;
      padding-bottom: 60px;
    }
}