/* #Media Queries
================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .parallax {
    background-position: 0 50% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    -webkit-background-size: 1024px auto!important;
  }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .parallax {
    background-position: 0 50% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    -webkit-background-size: 959px auto!important;
  }
  .white-overlay,
  .testimonials-overlay {
    padding: 60px 0 30px;
    width: 556px;
  }
  .white-overlay h4 {
    font-size: 31px;
  }
  .white-overlay p {
    font-size: 14px;
  }
  .promo img {
    width: 90%;
  }
  .promo h3 {
    margin-top: 40px;
  }
  .promo p {
    margin-right: 20px;
  }
  #about h5 {
    margin-bottom: 30px;
  }
  #about article {
    padding: 35px 0;
  }
  .picture {
    padding: 0 6px;
  }
  .picture span {
    margin-left: 2px;
    font-weight: 700;
    font-size: 13px;
  }
  .picture ul {
    margin-right: 0px;
  }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
  .parallax {
    background-position: 0 50% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    -webkit-background-size: 767px auto!important;
  }
  .white-overlay,
  .testimonials-overlay {
    margin: 100px auto;
    padding: 40px 0 20px;
    width: 420px;
  }
  .white-overlay h4 {
    font-size: 24px;
  }
  .white-overlay p {
    font-size: 14px;
  }
  .button {
    font-size: 13px;
    padding: 6px 25px;
  }
  .buy {
    background: url(../images/b2.jpg) no-repeat;
  }
  .menu-trigger {
    display: block;
  }
  .logo {
    float: none;
    margin-top: 7px;
    width: 85px;
    margin: 0 auto;
    display: block;
  }
  nav.menu ul {
    display: none;
  }
  .title h2 {
    padding: 0;
    margin: 40px 0 5px;
    border: 0;
    text-align: center;
  }
  .title p {
    line-height: 23px;
    font-size: 18px;
    text-align: center;
  }
  .service {
    margin: 25px 0;
  }
  #about article {
    padding: 20px 0;
  }
  .title p.three-lines,
  .title p.two-lines,
  .title p.one-line {
    margin: 0 0 40px;
  }
  .promo h3,
  .promo p {
    text-align: center;
    margin-right: 0;
  }
  .promo a {
    margin: 0 auto;
    width: 120px;
    display: block;
  }
  .skill-title {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 3px;
  }
  .skill-bar {
    width: 100%;
  }
  .picture {
    padding: 0 6px;
    margin-bottom: 20px;
  }
  .newsletter h4 {
    font-size: 22px;
  }
  .newsletter-form .sub_email {
    width: 160px;
    padding: 9px 0px 9px 35px;
  }
  .contact-details p {
    width: 60%;
    margin: 0 auto 40px;
  }
  .work p {
    font-size: 14px;
  }
  .plan {
    margin-bottom: 0;
  }
  article.post span.meta,
  article.post span.tags {
    display: none;
  }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  .white-overlay,
  .testimonials-overlay {
    margin: 100px auto;
    padding: 40px 0 20px;
    width: 300px;
  }
}
/* #Retina Graphics
================================================== */
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .hex {
    background: url('../images/hex@2x.png') center no-repeat;
    background-size: 113px 125px;
  }
  .hex:hover {
    background: url('../images/hex-green@2x.png') center no-repeat;
    background-size: 113px 125px;
  }
  .picture ul li a {
    background: url('../images/smallhex@2x.png') center 66% no-repeat;
    background-size: 25px auto;
  }
  .picture ul li a:hover {
    background: url('../images/smallhex@2x.png') center bottom no-repeat;
    background-size: 25px auto;
  }
  .socials li a {
    background: url('../images/smallhex_w@2x.png') no-repeat;
    background-size: 31px auto;
  }
  .socials li a:hover {
    background: url('../images/smallhex_w@2x.png') bottom no-repeat;
    background-size: 31px auto;
  }
}