/* CONTENTS

~1. SPECIFIC RULES
~2. LARGE SCREENS (1400px +)
~3. SMALLER SCREENS (1000px - 1199px)
~4. SMALLEST SCREENS (769px - 999px)
~5. IPAD
~6. MOBILE (767px and below)

 END CONTENTS */

 /*
~1. SPECIFIC RULES
These rules are specific for particular divs.
*/
.mob_hide {
    display: block
}

.mob_show {
    display: none
}

/* lightbox */
@media only screen and (max-width: 1024px) {
    .featherlight .featherlight-content {
        margin-left: 10px;
        margin-right: 10px;
        max-height: 98%;
        padding: 10px 10px 0;
        border-bottom: 10px solid transparent
    }
}
/* end lightbox */

/* END ~1. SPECIFIC RULES

/*
~2. LARGE SCREENS
This rule effects screens larger than 1400px
*/

@media only screen and (min-width: 1400px) {
    .container {
        width: 1200px;
    }
}

/* END ~2. ADD LARGE SCREENS */



/*
~3. SMALLER SCREENS
This rule effects screens between 1000px and 1199px
*/

@media only screen and (max-width: 1200px) {
    .container {
        width: 100%;
    }

    .banner_overlay .button:first-of-type:hover {
      background-color: transparent;
    }

    header {
      background-position: right !important;
    }

    .home-template header {
      background-position: center !important;
    }

    nav li {
      padding: 10px 0 0 25px;
    }

    .blog_post_short img {
    position: relative;
    left: auto;
    top: 120px;
    margin-top: -150px;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
}

header .col10-12 {
  width: 70%;
}

header .col10-12 p:last-of-type {
  margin-bottom: 0;
}

header h1 {
  font-size: 36px !important;
}

.blog_post_short img {
    width: 100%;
    left: 0;
  }


}


@media only screen and (device-width: 768px) {

  .blog_post_short {
    width: 25%;
    float: left;
  }

  .blog_post_short img {
    left: 0 !important;
  }


  .container {
    width: 100%;
  }


    nav li ul li a{
        color: #333 !important;
    }


}

/* END ~3. SMALLER SCREENS */



/*
~4. SMALLEST SCREENS
This rule effects screens between 769px and 999px
*/

/* END ~4. SMALLEST SCREENS */



/*
~5. IPADS
this rule effects iPads
*/

@media only screen and (device-width: 768px) {

    body {
        width: 1050px;
    }

    nav li ul li a{
        color: #333 !important;
    }


    input {
        -webkit-appearance: none;
        border-radius: 0;
    }

    #logo img {
      width: 300px;

    }

    .banner_overlay .col {
      width: 80%;
    }

    header {
      background-position: right !important;
    }

nav .active:after {
  top: 20px;
}

    .blog_post_short img {
      width: 250px;
      left: calc(50% - 125px);
      top: 125px;
      margin-top: -125px;
    }

    h2 {
      font-size: 20px;
    }

    .home-template h1 {
      font-size: 40px;
    }

    .first p {
      font-size: 14px;
    }
    .banner_overlay2 p {
      width: 90%;
    }

    .last {
      padding-top: 1px;
    }

    .button {
      width: 100%;
    }

    .blog_post_short_box {
      padding: 30px;
    }

    #pre_header .col {
      padding-bottom: 3px;
    }

}

/* END ~5. IPADS */



/*
~6. MOBILES
This rule effects mobile devices smaller than iPads
*/

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

    html{
        overflow-x:hidden;
    }

    input {
        -webkit-appearance: none;
    }

    nav li ul li a{
        color: #333 !important;
    }


    article, aside, .container, .col {
        width: 100% !important;
        min-width: 0;
        float: left;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .mob_hide {
        display: none !important;
    }

    .container {
        padding: 0 10px;
    }

    .col_cont {
        margin-bottom: 20px;
    }

    #logo img {
              margin-top: 20px;
        width: 80%;
    }

    .mob_show {
        display: block
    }

    .mobile_toggle {
        float: right;
        font-size: 32px;
        margin-top: 15px;
        cursor: pointer
    }

    nav {
        width: 100%;
    }

    .sidr ul li {
        text-align: left;
    }

    nav li {
        padding: 0 !important
    }

    nav li > ul li {
        padding: 0 !important
    }

    .sidr ul li ul {
        width: 100%;
    }

    .sidr ul li ul li a {
        padding-left: 10px;
    }

    nav li ul, nav li > ul > li > ul {
        background: none;
        position: relative;
        left: 0;
    }

    #pre_header .col:first-of-type {
      display: none;
    }

    #pre_header {
      padding: 5px 0;
    }

    .sm {
      padding-bottom: 3px;
    }

    .fa-bars {
      color: #6f2a6d;
    }

    .banner_overlay h1 {
      font-size: 31px;
    }

    .banner_overlay .button {
      width: 100%;
      font-size: 15px;
      padding: 7px 0;
      margin-bottom: 5px;
    }

    .banner_overlay .button:first-of-type {
      width: 100%;
    }

    .intro p {
      font-size: 15px;
      margin-bottom: 0;

    }

    .intro2 {
      background-color: transparent;
    }

    .intro2 p {
            display: block;
    }

    .home-template header {
          background-position: center !important;
    }

    .blog_post_short img {
      width: 250px;
      left: calc(50% - 125px);
      top: 125px;
      margin-top: -125px;
    }

    .blog_post_short_box {
      padding: 20px;
    }

    .blog_post_short {
      margin-bottom: 30px;
    }

    .blog_post_short_box p {
      font-size: 15px;
    }

     .col .blog_post_short:last-of-type {
       margin-bottom: 0;
     }

     .form {
       padding: 20px;
     }

     .button {
       width: 100%;
     }

     .twitter {
       padding: 20px !important;
       min-height: 344px;
     }

     h2 {
       font-size: 21px;
     }

     .twitter p {
       font-size: 16px;
     }

     footer .button {
       margin-top: 30px;
       margin-bottom: 40px;
       width: 100%;
       font-size: 15px;
       padding: 7px;
     }

     footer p {
       line-height: 1.7;
     }

     #footer_links {
       padding: 0;
       margin-bottom: 30px;
     }

     .testimonial p {
       margin-bottom: 2px;
       font-size: 16px;
     }

     #sidr {
       text-transform: capitalize;
     }

     .banner_overlay2 p {
       width: 100%;
     }

     .first {
       display: block !important;
     }

    #post_header .first{
        padding-bottom:10px;
    }

     #post_header {
       padding: 7px 0 20px 0;
     }

     aside {
       padding-right: 0px !important;
     }

     nav .active:after {
       content: none;
     }

     .banner_overlay2 {
       margin-top: 0;
     }

    .col3-12 .blog_post_short_box{
        min-height:0;
    }

     .contact-template form {
       padding-top: 20px;
     }

     #post_header {
       margin-bottom: 20px;
     }

     footer {
       margin-top: 20px;
     }

     footer .button {
       margin-bottom: 5px;
     }

     footer .copyright {
       margin-top: 10px;
       margin-bottom: 20px;
     }

     .contact-template .col7-12 {
       padding-right: 0;
     }

     .testimonial {
       margin: 20 0;
     }

     .contact-home {
       margin: 20 0;
     }

     .contact-home p {
       margin-bottom: 5px;
     }

     .contact-home .button {
       width: 100%;
     }

     .testimonial {
       margin-bottom: 0;
     }

}

/* END ~6.MOBILES */