/*
	Author: Vlad Karpov
	Template: Woodworks (Landing Page)
	Version: 1.0.0
	FileName: media.css
	URL: http://themeforest.net/user/Vladuha/portfolio
	Support: http://themeforest.net/user/Vladuha#contact
*/

/*
====================================
		  TABLE OF CONTENT
	delete comments when unneeded
====================================

---  33 Best featurelist: adapt section to screen
---  47 Best featurelist: make sections fluid height not fixed, hide sliding phone show static images
---  78 iPad orientation landscape
  |--- 122 for ipad landscape
--- 136 Less than iPad orientation landscape
--- 163 Reset menu centering style
--- 171 Reset and Set header to fluid heigth
--- 193 Less than iPad portrait orientation
	|--- 213 Greeting section
	|--- 223 Important features
	|--- 229 Video Secton
	|--- 242 Testimonials section
	|--- 249 All features
	|--- 263 Screenshots
	|--- 282 Subscribe form
	|--- 308 Contact form
	|--- Footer
--- 337 Small Devices
--- 383 Retina devices

*/

/* Media Queries
=================================== */

/* Device size - header*/

@media screen and (max-height: 1240px) {
  #device img {
    width: 42%;
  }
}

@media screen and (max-height: 1160px) {
  #device img {
    width: 36%;
  }
  #descr {
    bottom: 2%;
  }
}

/*Best featurelist: adapt section to screen*/

@media screen and (max-width: 1350px) {
  .Center-Block .col-md-6 {
    width: 80%;
  }

  #phone {
    left: 25%;
    margin-top: -265px;
  }
}

/*Best featurelist: make sections fluid height not fixed, hide sliding phone show static images */

/*@media screen and (max-width: 991px) {*/
@media screen and (max-width: 1024px) {
  .col-md-offset-6 {
    margin-left: auto;
  }
  .Center-Block .col-md-6 {
    width: 100%;
  }

  .Center-Block .col-md-6 > img:first-child {
    display: block;
    text-align: center;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 20%;
    margin-top: 40px;
  }

  section[id^='page'] {
    height: auto;
  }

  section[id^='page'] + div.screen-height-adapt {
    height: auto;
  }
}

/* iPad orientation landscape*/

@media screen and (max-width: 1024px), screen and (max-height: 980px) {
  .logo {
    width: 124px;
    height: 124px;
    margin-bottom: 15px;
  }

  #device {
    width: 38.770833%;
  }

  #device img {
    width: 28%;
  }

  #descr {
    width: 61.229167%;
    bottom: 0;
    padding: 6% 7% 2% 12%;
  }

  h2 {
    font-size: 42px;
  }

  #main-header h2 {
    margin-bottom: 30px;
  }

  p {
    font-size: 16px;
    text-shadow: 0 1px black;
  }

  .btn-stroke {
    font-size: 18px;
  }

  .btn-fill {
    font-size: 22px;
  }

  #navigation {
    z-index: 9999;
  }

  .navbar {
    background: rgba(255, 255, 255, 0.8);
  }

  /* for ipad landscape */

  #phone img {
    max-width: 100%;
  }

  #phone {
    top: 57%;
    max-width: 23%;
    margin-left: -115px;
  }
}

/* Less than iPad orientation landscape */

@media screen and (max-width: 1023px), screen and (max-height: 600px) {
  #device {
    display: none;
  }

  #descr {
    bottom: auto;
    width: 100%;
    padding: 20% 10% 2%;
  }
  #navigation {
    position: absolute;
    top: 0;
    height: auto;
    z-index: 2000;
  }
  #main-header {
    height: 100%;
  }

  .section-grey,
  .section-white {
    padding: 60px 0 100px 0;
  }

  /*reset menu centering style*/

  .nav-vertical-center {
    position: static;
    top: auto;
    margin-top: auto;
  }

  /* Reset and Set header to fluid heigth */

  .header-wrapper {
    height: auto;
  }
  #main-header {
    height: auto;
  }
  #main-header {
    min-height: auto;
    height: auto;
  }

  #descr {
    float: none;
    position: static;
    padding: 25% 15% 10%;
  }

  .dl-btn-group {
    margin-top: 30px;
  }
}

/* Less than iPad portrait orientation */

@media screen and (max-width: 767px) {
  /*Common styles*/

  h1 {
    font-size: 28px;
  }
  p {
    font-size: 16px;
  }
  #descr {
    padding-top: 25%;
  }

  .dl-btn-group {
    margin-top: 30px;
  }

  .screen-height-adapt {
    height: auto;
  }

  /*Greeting section*/

  #greeting h1 {
    padding: 0 10%;
  }

  #greeting p {
    padding: 0px 10%;
  }

  /*Important features*/

  .is-Table .Center-Block {
    width: 70%;
  }

  /*Video Secton*/

  .video-container {
    border: 10px solid #fff;
    margin-left: 5%;
    margin-right: 5%;
  }

  #video p {
    margin-top: 28px;
    padding: 0px 5%;
  }

  /*Testimonials section*/

  #testimonials .item p {
    font-size: 22px;
    padding: 0 5%;
  }

  /*All features*/
  #allfeatures hr {
    display: none;
  }

  #allfeatures .col-md-4 {
    margin: 0 5% 0;
  }

  #allfeatures .section-grey {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  /*Screenshots*/

  #screenshots {
    margin: 50px 0 0;
  }
  #screenshots p {
    padding: 0 5%;
  }
  #screenshots .owl-theme .owl-controls .owl-page span {
    width: 12px;
    height: 12px;
    margin: 5px 7px;
  }

  #screenshots-carousel .owl-controls {
    margin-top: 20px;
  }

  /*Subscribe form*/

  #get-app-now {
    padding: 0 0 70px;
  }

  #get-app-now p {
    padding: 0;
  }

  #get-app-now .btn-stroke-inverse {
    font-size: 16px;
  }

  #subscribe-now {
    width: 100%;
  }

  #subscribe-now input[type='text'] {
    padding-left: 25px;
    width: 73.6%;
  }
  #subscribe-now input[type='submit'] {
    width: 26%;
  }

  /*Contact Form*/
  #contact p {
    padding: 0 5%;
  }

  #contact li:nth-child(1),
  #contact li:nth-child(2),
  #contact li:nth-child(3) {
    width: 100%;
    display: block;
    margin-right: 0;
  }

  /*Footer*/

  #footer .logo-footer + span {
    padding: 0 5%;
  }

  .navbar-nav {
    margin: 0 -15px;
  }

  #footer .nav > li > a {
    font-size: 18px;
  }
}

@media screen and (max-width: 450px) {
  #descr {
    float: none;
    position: static;
    padding: 25% 10% 10%;
  }

  #device img {
    width: 20%;
  }

  #main-header .logo {
    width: 90px;
    height: 90px;
    margin-bottom: 0;
  }

  #main-header h2 {
    font-size: 26px;
    font-weight: 300;
    color: white;
    margin-bottom: 20px;
  }
  #main-header p.description {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  #main-header p.description + p {
    margin-bottom: 0;
  }

  #main-header .dl-btn {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #main-header .btn-fill {
    font-size: 18px;
  }
  #main-header .btn-stroke {
    font-size: 16px;
  }
}
/* Retina devices*/

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi) {
  .logo {
    background: url(../img/logo@2x.png) no-repeat center;
    background-size: cover;
  }

  .logo-footer {
    background: url(../img/logo-footer@2x.png) no-repeat center;
    background-size: cover;
    width: 120px;
    height: 120px;
  }
}