/* CSS to edit the site on mobile platforms */

@media only screen and (max-width: 800px), (max-device-width: 480px)  {
  html,body {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
  }
  * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-right: 0em;
  }
  #page {
    max-width: 100% !important;
    padding: 0;
    margin: 0;
  }

  .asideblocks {
    width: 3%;
  }
  #main {
    display:block;
    height: auto;
  }

  .xButton {
    color: #aaaaaa;
  }

  #header {
    margin-left: 15px;
  }

  #titleBox {
    margin-top: 15px;
  }

  #aside {
    position: relative;
    float: none;
    width: 100vw;

    clear: both;
    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 30px;
  }

  #colorsContainer {
    max-width: 49vw;
    right: 0;
    float: right !important;
    width: auto !important;
  }

  #cartDisplay {
    text-align: center;
    position: relative;

    width: 49vw;
    height: 500px;
    display: inline-block;
    width: 50%;


    margin-bottom: 25px;

    border-bottom: 0;
    border-right: 2px solid #dfdfdf;
  }

  .cartItem {
    width: 240px;
  }

  #checkoutButton {
    width: auto;
    display: inline-block;
  }

  #asideFooter {
    position: absolute;
  }


  #ductTapeDisplay {
    display: inline-block;
    border-right: none;
    height: auto;

    clear: both;
  }

  #frontWallet, #backWallet {
    margin: 0 auto;
    max-width: 644px;
  }

  #frontWallet {
    margin-top: 15px;
  }

  #backWallet {
    margin-bottom: 15px;
  }

  .color {
    padding: 35px;
    margin: 2px;
  }

  #buyButton {
    margin-right: 15px;
  }

  #close {
    font-size: 25px;
  }

  .button {
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
  }

  #title {
    font-size: 50px;
  }

  #subtitle {
    font-size: 22px;
  }

  #links {
    font-size: 25px;
  }

  #walletsCartDisplay {
    padding-left: 15px;
    position: static;
    text-align: left;
    display: block;
    min-width: 40vw;
    height: 425px;
    overflow: scroll;

    text-align: center;
  }

  .cartItem {
    display: inline-block;
    width: auto;
    margin-bottom: -10px;
  }

  .cartItem p {
    font-size: 20px;
  }

  #currentCart {
    margin-top: 0;
    font-size: 25px;
    width: 100%;
  }

  #content {
    font-size: 18px;
  }

  #mainRight {
    margin-right: 0px !important;
  }

  #aside-right {
    height: 3vw;
    margin-right: -2px;
  }

  #helpButton {
    width: 40px;
  }

  #helpContent {
    font-size: 20px;
    height: auto;
    border: 2px solid #D2B9AB;
  }

  #email {
    font-size: 20px;
  }

  .socialMediaLink {
    width: 40px;
  }

  #footer {
    padding: 30px;
  }

  #colorsContainer {
    max-width: 390px;
    width: 50%;
  }
  .color {
    padding: 33px;
  }
}