@media only screen and (min-width: 300px) {

  html, body {
      background-image: url(images/Fon.jpg);
      background-attachment: fixed;
      width: 100%;
      height: 100%;

      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
  }

  main div {
      background: white;
      color: white;
      width: 15%;
      height: 80%;
      margin-left: 2%;
      margin-right: 2%;
      margin-top: 3%;
      background: no-repeat;
      -moz-background-size: 100%; /* Firefox 3.6+ */
      -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
      -o-background-size: 100%; /* Opera 9.6+ */
      background-size: 100%; /* Современные браузеры */

  }

  header {
    width: 100%;
    height: 10%;
    min-height: 10%;
    background-color: #2599c3;
    margin: 0 auto;
  }

  header div{
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px;
  }
  .logo{
    height: 80%;
  }
  .button_div{
    width: 13%;
  }

  .button_img{
    width: 100%;
  }
  .slider {
    height: 30%;
    width: 100%;
    min-height: 150px;
    margin: 0 auto;
  }
  #img_slider {
    height: 100%;
    width: 100%;
    margin: 0 auto;
  }
  .img_leftbutton {
    height: 20%;
    margin: 0 auto;
    padding-top: -100px;
  }
  .img_rightbutton {
    height: 20%;
    margin: 0 auto;
  }
  .trademarks{
      height: 15%;
      margin: 0 auto;

      text-align: center;

      background-color: white;
      font-size: 20px;
      font-family: Prosto; /* Гарнитура шрифта */
     src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */

  }
  .inline-block-center {
      margin: 0 auto;
      text-align: center;
  }
  .inline-block-center div {
      display: inline-block;
      text-align: left;
  }
  .bottom_panel{
      margin: 0 auto;
      height: 30%;
      width: 100%;
      background-color: #2599c3;
      margin-bottom: 150px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
  }
  .bottom_panel div {
      display: inline-block;
      text-align: left;
      line-height: 1.5;
      text-align: justify;
      font-family: Prosto; /* Гарнитура шрифта */
      src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
      color: white;
      margin-left: 3%;
      margin-right: 3%;
      margin-top: 2%;
      font-size: 100%;
  }
  #footer {
      position:fixed;
      height: 20px;
      width: 4000px;

      margin-left: -10px;
      margin-bottom: -10px;

      border: 4px groove #2599c3;
      background-color: white;
  }

  /*Contacts CSS*/

  .body_contacts{
      margin: 0 auto;
      height: 60%;
      width: 100%;
  }
  .bottom_panel_contacts{
      margin: 0 auto;
      height: 15%;
      width: 100%;
      margin-bottom: 50px;

      background-color: #2599c3;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;

      text-align: center;
      line-height: 1.5;
      color: white;
      font-family: Prosto; /* Гарнитура шрифта */
      src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */

  }
  .placeholder_contacts {
      position:absolute;
      margin-top: 0px;
      margin-bottom: 0px;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 100%;
      height: 60%;
      border: none;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      color: rgba(255,255,255,1);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: -webkit-linear-gradient(60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(-60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(-60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(30deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), -webkit-linear-gradient(30deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background: -moz-linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(60deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), -moz-linear-gradient(60deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background: linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(60deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), linear-gradient(60deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      -webkit-background-size: 80px 140px;
      background-size: 80px 140px;
  }

  /*Catalog CSS*/
  .body_catalog{
      margin: 0 auto;
      width: 100%;
      height: auto;
      margin-top: -20px;
      margin-bottom: 100px;

      background-color: white;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
  }
  .logo_catalog{
      display: block;
      width: 20%;
      height: auto;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  .td_pic{
    width: 40%;
    height: 40%;
    margin: 0 auto;
  }
  .td_text{
    width: 60%;
    height: 40%;
    margin: 0 auto;
    font-size: 90%;
    font-family: Prosto; /* Гарнитура шрифта */
    src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
  }
  #pic {
    width: 40%;
    margin: 0 auto;
  }

  #main_title {
    width: 100%;
    margin: 0 auto;

    color:#2b63ad;
    font-size: 40px;
    font-family: Prosto; /* Гарнитура шрифта */
    src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
    text-align: center;

  }
  #sub_title {
    width: 100%;
    margin: 0 auto;

    color:#2b63ad;
    font-size: 30px;
    font-family: Prosto; /* Гарнитура шрифта */
    src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
    text-align: center;
  }
}
/*----------------------------------------------------------------
------------------------------------------------------------------
------------------------------------------------------------------
-------------------------END OF PHONE CSS-------------------------
------------------------------------------------------------------
------------------------------------------------------------------
--------------------------------------------------------------- */

@media only screen and (min-width: 1020px) {

  html, body {
      background-image: url(images/Fon.jpg);
      background-attachment: fixed;
      width: 100%;
      height: 100%;

      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
  }

  main div {
      background: white;
      color: white;
      width: 15%;
      margin-left: 2%;
      margin-right: 2%;
      background: no-repeat;
      -moz-background-size: 100%; /* Firefox 3.6+ */
      -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
      -o-background-size: 100%; /* Opera 9.6+ */
      background-size: 100%; /* Современные браузеры */

  }

  header {
    width: 68%;
    height: 10%;
    background-color: #2599c3;
    margin: 0px auto;
    padding: 0px;
  }

  header div{
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px;
    min-width: 10%;
  }

  .logo{
    height: 80%;
  }
  .button_div{
    width: 11%;
  }

  .button_img{
    width: 100%;
    margin-bottom: 5%;
  }

  .slider {
    height: 40%;
    width: 68%;
    min-height: 150px;
    margin: 0 auto;
  }
  .img_slider {
    height: 100%;
    width: 100%;
    margin: 0 auto;
  }

  .trademarks{
      width: 68%;
      height: 25%;
      margin: 0 auto;

      text-align: center;

      background-color: white;
      font-size: 20px;
      font-family: Prosto; /* Гарнитура шрифта */
     src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */

  }
  .inline-block-center {
      margin: 0 auto;
      text-align: center;
  }
  .inline-block-center div {
      display: inline-block;
      text-align: left;
      height: 70%;
  }
  .bottom_panel{
      margin: 0 auto;
      height: 400px;
      width: 68%;
      background-color: #2599c3;
      margin-bottom: 150px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
  }
  .bottom_panel div {
      display: inline-block;
      text-align: left;
      line-height: 1.5;
      text-align: justify;
      color: white;
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 20px;
      font-size: 100%;
  }
  #footer {
      position:fixed;
      height: 20px;
      width: 4000px;

      margin-left: -10px;
      margin-bottom: -10px;

      border: 4px groove #2599c3;
      background-color: white;
  }

  /*Contacts CSS*/

  .body_contacts{
      margin: 0 auto;
      height: 60%;
      width: 68%;
  }
  .bottom_panel_contacts{
      margin: 0 auto;
      height: 20%;
      width: 68%;
      margin-bottom: 50px;

      background-color: #2599c3;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;

      text-align: center;
      line-height: 1.5;
      color: white;


  }
  .placeholder_contacts {
      position:absolute;
      margin-top: 0px;
      margin-bottom: 0px;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      width: 68%;
      height: 60%;
      border: none;
      font: normal 100%/normal Arial, Helvetica, sans-serif;
      color: rgba(255,255,255,1);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: -webkit-linear-gradient(60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(-60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(-60deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -webkit-linear-gradient(30deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), -webkit-linear-gradient(30deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background: -moz-linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), -moz-linear-gradient(60deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), -moz-linear-gradient(60deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background: linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(30deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(150deg, rgb(153,153,153) 12%, rgba(0,0,0,0) 12.5%, rgba(0,0,0,0) 87%, rgb(153,153,153) 87.5%, rgb(153,153,153) 0), linear-gradient(60deg, rgb(187,187,187) 25%, rgba(0,0,0,0) 25.5%, rgba(0,0,0,0) 75%, rgb(187,187,187) 75%, rgb(187,187,187) 0), linear-gradient(60deg, rgba(229,229,229,1) 0, rgba(191,189,189,1) 23%, rgb(187,187,187) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 56%, rgba(0,0,0,0) 75%, rgba(191,189,189,1) 75%, rgb(187,187,187) 100%), rgba(242,242,242,1);
      background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      -webkit-background-size: 80px 140px;
      background-size: 80px 140px;
  }

  /*Catalog CSS*/
  .body_catalog{
      margin: 0 auto;
      width: 68%;
      height: auto;
      margin-bottom: 100px;

      background-color: white;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
  }
  .logo_catalog{
      display: block;
      width: 15%;
      height: auto;
      margin: 0 auto;

  }
  .td_pic{
    width: 30%;
    height: 30%;
    margin: 0 auto;
  }
  .td_text{
    width: 60%;
    height: 60%;
    margin: 0 auto;
    font-size: 100%;
  }
  #pic {
    width: 40%;
    margin: 0 auto;
  }

  #main_title {
    width: 100%;
    margin: 0 auto;

    color:#2b63ad;
    font-size: 40px;
    font-family: Prosto; /* Гарнитура шрифта */
    src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
    text-align: center;

  }
  #sub_title {
    width: 100%;
    margin: 0 auto;

    color:#2b63ad;
    font-size: 30px;
    font-family: Prosto; /* Гарнитура шрифта */
    src: url(fonts/Prosto.ttf); /* Путь к файлу со шрифтом */
    text-align: center;
  }
}