/**
 * @file
 * Bartik layout styling.
 */

/**
 * Container
    min-width: 1200
    min-width: 992
    min-width: 768
    max-width: 1200
    min-width: 992 
    max-width: 991
    min-width: 768 
    max-width: 767
    max-width: 639
    max-width: 479
 */

 
   
@media (max-width: 325px) {
  .layout-container {
    max-width: 320px;
  }
}


@media only screen and (min-width: 346px) and (max-width: 359px) {
  .layout-container {
    max-width: 340px;
  }
}

@media only screen and (min-width: 360px) and (max-width: 374px) {
  .layout-container {
    max-width: 360px;
  }
}

@media only screen and  (min-width: 375px) and (max-width: 375px) {
  .layout-container {
    max-width: 375px;
  }
}

@media only screen and  (min-width: 384px) and (max-width: 384px) {
  .layout-container {
    max-width: 384px;
  }
}

@media only screen and (min-width: 400px) and (max-width: 400px) {
  .layout-container {
    max-width: 400px;
  }
}

@media only screen and (min-width: 412px) and (max-width: 414px) {
  .layout-container {
    max-width: 412px;
  }
}


/** CURRENTLY there should have no devices screen width falling in this section **/

@media only screen and (min-width: 433px) and (max-width: 479px) {
  .layout-container {
    max-width: 430px;
  }
}

/** CURRENTLY there should have no devices screen width falling in this section **/



/* could be blackberry passport(504) or Amazon Kindle Fire HD 7(480) */
@media only screen and (min-width: 480px) and (max-width: 480px) {
  .layout-container {
    max-width: 480px;
  }
}  

@media only screen and (min-width: 533px) and (max-width: 533px) {
  .layout-container {
    max-width: 533px;
  }
} 

@media only screen and (min-width: 568px) and (max-width: 568px) {
  .layout-container {
    max-width: 568px;
  }
}

@media only screen and (min-width: 598px) and (max-width: 604px) {
  .layout-container {
    max-width: 600px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 640px) {
  .layout-container {
    max-width: 640px;
  }
}

@media only screen and (min-width: 667px) and (max-width: 667px) {
  .layout-container {
    max-width: 667px;
  }
}

@media only screen and (min-width: 684px) and (max-width: 684px) {
  .layout-container {
    max-width: 684px;
  }
}

@media only screen and (min-width: 690px) and (max-width: 690px) {
  .layout-container {
    max-width: 690px;
  }
}

@media only screen and (min-width: 720px) and (max-width: 720px) {
  .layout-container {
    max-width: 720px;
  }
}

@media only screen and (min-width: 736px) and (max-width: 736px) {
  .layout-container {
    max-width: 736px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 768px) {
  .layout-container {
    max-width: 768px;
  }
}

@media only screen and (min-width: 800px) and (max-width: 800px) {
  .layout-container {
    max-width: 800px;
  }
}

@media only screen and (min-width: 960px) and (max-width: 966px) {
  .layout-container {
    max-width: 960px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
  .layout-container {
    max-width: 1024px;
  }
}

/* Ipad landscape modle + Ipad Pro + popular monitor requiring minimum 1200px width*/
@media (min-width: 1200px) {
  .layout-container {
    width: 1200px;
  }
}

.layout-container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/**
 * Main
 */
.layout-main-wrapper {
  min-height: 300px;
}

.layout-main {
  margin-top: 20px;
  margin-bottom: 40px;
}