/* Medium devices (landscape tablets, desktops 768px and up) */
@media screen and (min-width: 768px) and (max-width: 1919px) {
    .birthday {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .birthday h1 {
      font-family: 'Lucida Console';
      font-size: 35px;
    }
    .birthday .form-group {
      display: inline-block;
      line-height: 1;
      font-family: 'Lucida Console';
    }
    .birthday .form-group label {
      padding: 5px;
      margin: 45px 5px 0 0;
      float: left;
      font-size: 30px;
      font-weight: 900;
    }
    .birthday .form-group input {
      width: 90px;
      text-align: center;
      font-size: 55px;
      font-weight: 500;
    }
    .birthday .form-group input[id=byear] {
      width: 150px;
    }

    body {
      background-color: #000!important;
      background-image: url('img/space_bg_1.jpg');
      background-repeat: no-repeat;
      background-position: center top;
    }
    body h2 {
      padding: 20px 0;
      text-align: center;
      font-size: 40px;
      color: #fff;
      text-shadow: 0 2px 8px #eee;
    }
    h2.matrix {
      color: #333;
      font-size: 20px;
      text-align: center;
      padding: 2px 0;
      margin: 0;
    }
    .flex-grow-1 {
      background-color: #fff!important;
      border-radius: 5px;
      flex-grow: 0!important;
    }
    .mess {
      background-color: transparent;
      border-radius: 0;
      padding: 20px 0 0 0;
    }
    p.matrix {
      margin: -3px 0 0 0;
      padding: 0;
      font-size: 10px;
      color: #777;
      text-align: center;
    }
    .top-block {
      background: #eee;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }
    .table {
      background-color: #fff;
    }
    td.digit {
      background: #eee;
      width: 260px;
    }
    td.td-empty {
      width: 20px;
      min-width: 20px;
      border-left-style: hidden;
      border-top-style: hidden;
    }
    td.td-photo {
      width: 220px;
      min-width: 220px;
      text-align: center;
      padding: 10px;
    }
    td.td-info {
      font-size: 22px;
      text-align: left;
      padding-left: 5px;
    }
    td.td-info a {
      padding: 4px 8px;
      background-color: #ddd;
      border-radius: 5px;
    }
    .table td {
      padding: 5px;
      min-width: 20px;
      height: 60px;
      vertical-align: middle;
    }
    td.photo {
      width: 216px;
      padding: 7px;
      border-right-style: hidden;
      vertical-align: bottom;
    }
    .warn-popup {
      display: block;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid #f8f8f8;
      border-radius: 10px;
      z-index: 9;
      background-color: #fff;
    }
    .warn-container {
      max-width: 500px;
      padding: 20px;
      margin: 50px;
      background-color: #eee;
      border: 3px solid #e8e8e8;
      border-radius: 10px;
    }
    .form-container input[type=text] {
      width: 100%;
      padding: 15px;
      margin: 5px 0 22px 0;
      border: none;
      background: #fff;
    }
    .warn-container .btn {
      background-color: #04AA6D;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.75;
    }
    .form-container .cancel {
      background-color: red;
      padding: 10px 20px;
    }
    .warn-container h3 {
      text-align: center;
    }
    .compare p {
      margin: 0;
      padding: 0 7px;
    }
    .compare h4 {
      margin: 5px 0 0 0;
    }
    .compare, .description {
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      background: #eee;
      padding: 20px;
      margin: -15px 0 15px 0;
    }
    .description h5, .compare h5 {
      padding-top: 10px;
      color: #333;
      font-family: Georgia, serif;
      text-align: center;
      text-shadow: 0 2px 6px #999;
    }
    .description p, .compare p {
      text-align: justify;
      text-indent: 20px;
      font-family: Verdana, sans-serif;
      font-size: 0.875em;
      line-height: 1.25;
      margin-bottom: 0.5em;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    .partner-warning {
      float:right;
      text-align: right;
      width: 470px;
      background-color: red;
      padding: 5px;
      border-radius: 5px;
    }
    .landing li {
      color: #ddd;
    }
    .bg-dark {
      background-color: #343a40!important;
      background-image: url('img/landing_big.jpg');
      background-repeat: no-repeat;
      background-position: right;
      border-radius: 3px;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    .bg-dark h4 {
      text-align: center;
      color: #eee;
      text-shadow: 0 3px 8px #999;
    }
    .order p.price {
      margin: 0 0 20px 0;
    }
    .order p {
      margin: 0;
    }

    .matrix table {
      padding: 20px 5px;
      width: 460px;
      margin: auto;
    }
    .matrix table td {
      text-align: center;
      width: 90px;
      padding: 0;
      height: 60px;
    }
    .matrix a {
      margin: 16px 0;
    }
    .matrix h3 {
      font-family: 'Lucida Console';
      font-weight: 200;
      font-size: 30px;
    }
    .botrght {
      border-bottom: 2px solid #666;
      border-right: 2px solid #666;
    }
    .bot {
      border-bottom: 2px solid #666;
    }
    .rght {
      border-right: 2px solid #666;
    }
    .bdtext {
      font-family: 'Arial Narrow';
      font-size: 20px;
      font-weight: 600;
      color: blue;
      padding: 0;
      margin: 0;
    }
    .cellname {
      font-size: 8px;
      float: right;
      color: #666;
      margin: 0 0 -10px 0;
      padding: 0 2px;
    }
    .cellvalue {
      font-family: 'Lucida Console';
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin: 0;
      padding: 0 2px;
    }
    .footer {
      margin: auto;
      width: 100%;
      text-align: center;
    }
    .linkblock {
      text-align: center;
      margin-top: 20px;
    }
    .social {
      padding: 0 15px;
    }
    .social img {
      opacity: 0.5;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    .social img:hover {
      opacity: 1.0;
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
    }
    .taplink {
      border: 2px solid #999;
      border-radius: 10px;
    }
    .taplink:hover {
      background-color: #ccc;
      color: #333;
    }
    .infinite-container img {
      width: 200px;
      height: 200px;
      padding: 5px 0;
    }
    .vk-photo {
      width: 218px;
      text-align: center;
    }
}

/* Extra small devices (phones, 414px and down) */
@media screen and (max-width: 414px) {
    .min-vh-100 {
      width: 350px;
      margin: auto;
    }
    .my-4 {
      font-size: 24px;
    }
    body {
      background-color: #fff!important;
      background-image: none;
    }
    .container {
      padding: 0 2px;
    }
    .birthday {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .birthday h1 {
      font-family: 'Lucida Console';
      font-size: 34px;
    }
    .birthday .form-group {
      display: inline-block;
      line-height: 1;
      font-family: 'Lucida Console';
    }
    .birthday .form-group label {
      padding: 5px;
      margin: 35px 5px 0 0;
      float: left;
      font-size: 30px;
      font-weight: 900;
    }
    .birthday .form-group input {
      width: 65px;
      text-align: center;
      font-size: 40px;
      font-weight: 500;
    }
    .birthday .form-group input[id=byear] {
      width: 110px;
    }
    .matrix table {
      padding: 20px 1px;
      width: 340px;
      margin: auto;
    }
    .matrix table td {
      text-align: center;
      width: 80px;
      padding: 0;
      height: 60px;
    }
    .matrix a {
      margin: 16px 0;
    }
    .matrix h3 {
      font-family: 'Lucida Console';
      font-weight: 200;
      font-size: 22px;
    }
    .botrght {
      border-bottom: 2px solid #666;
      border-right: 2px solid #666;
    }
    .bot {
      border-bottom: 2px solid #666;
    }
    .rght {
      border-right: 2px solid #666;
    }
    .bdtext {
      font-family: 'Arial Narrow';
      font-size: 16px;
      font-weight: 600;
      color: blue;
      padding: 0;
      margin: 0;
    }
    .cellname {
      font-size: 8px;
      float: right;
      color: #666;
      margin: 0 0 -10px 0;
      padding: 0 2px;
    }
    .cellvalue {
      font-family: 'Lucida Console';
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin: 0;
      padding: 0;
    }
    .flex-grow-1 {
      flex-grow: 0!important;
    }
    .linkblock {
      text-align: center;
      margin-top: 20px;
    }
    .social {
      padding: 0 15px;
    }
    .social img {
      opacity: 0.5;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    .social img:hover {
      opacity: 1.0;
      -webkit-filter: grayscale(0%);
      filter: grayscale(0%);
    }


    .top-block {
      background: #eee;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .table {
      background-color: #fff;
      width: 346px;
    }
    td.digit {
      background: #eee;
      width: 85px;
    }
    .table td {
      vertical-align: middle;
      padding: 0;
      height: 45px;
    }
    td.td-empty {
      width: 5px;
      min-width: 5px;
      border-left-style: hidden;
      border-top-style: hidden;
    }
    td.td-photo {
      width: 120px;
      min-width: 120px;
      text-align: center;
      padding: 5px;
    }
    td.td-info {
      text-align: left;
      padding-left: 0;
    }
    td.td-info p {
      font-size: 11px;
    }
    td.td-info a {
      padding: 2px 4px;
      background-color: #ddd;
      border-radius: 3px;
    }
    .table td h2 {
      font-family: 'Lucida Console';
      font-size: 14px;
      font-weight: bold;
      color: #333;
      margin: 0;
      padding: 2px 0 1px 0;
      margin-top: 10px;
    }
    .table td abbr, p.matrix {
      font-size: 7px;
      float: right;
      color: #666;
      margin: 0;
      padding-right: 1px;
    }
    td img {
      width: 100px;
    }
    td.photo {
      width: 102px;
      padding: 44px 1px 0 1px;
      border-right-style: hidden;
      vertical-align: top;
    }
    td.empty {
      width: 5px;
      padding: 0;
      border-left-style: hidden;
    }
    .compare p {
      margin: 0;
      padding: 0;
    }
    .compare h4 {
      margin: 5px 0 0 0;
    }
    .compare, .description {
      padding: 0;
      margin: -10px 0 15px 0;
    }
    .description h5, .compare h5 {
      padding-top: 10px;
      color: #333;
      font-family: Georgia, serif;
      font-size: 1.125em;
      text-align: center;
      text-shadow: 0 2px 6px #999;
    }
    .description p, .compare p {
      text-align: justify;
      text-indent: 10px;
      font-family: Verdana, sans-serif;
      font-size: 0.75em;
      line-height: 1.25;
      margin-bottom: 0.5em;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    .compare p {
      margin: 0 -12px;
    }
    .landing li {
      color: #ddd;
    }
    .bg-dark {
      background-color: #343a40!important;
      background-image: none;
      border-radius: 3px;
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    .bg-dark h4 {
      text-align: center;
      color: #eee;
      text-shadow: 0 3px 8px #999;
    }
    .card-body.p-3 table {
      margin-left: -17px;
    }
    .partner-warning {
      float:right;
      text-align: right;
      font-size: 12px;
      background-color: red;
      color: #fff;
      opacity: 0.5;
      padding: 3px 10px;
      border-radius: 5px;
      margin: -10px -13px 5px 0;
    }
    .order h4 {
      font-size: 20px;
    }
    p, li {
      font-size: 14px;
    }
    ul {
      padding-inline-start: 20px;
    }
    .infinite-container img {
      width: 140px;
      height: 140px;
      padding: 3px 0;
    }
    .vk-photo {
      width: 150px;
      text-align: center;
    }
    .current {
      display: block;
      padding: 10px 0;
    }
}