.site_dante { width: 100%; height: 100%; background-color: #000000; }
  #menu_dante { position: absolute; height: 20px; left: 162px; padding:6px 0px;}
  .view_dante { z-index: 0; width: 50%; height: 100%; float: right; background-color: #000000;}
  #interfejs { z-index: 0; width: 50%; height: 100%; float: left; background-color: #000000; border-right:5px solid rgba(90,90,90,0.3);}
  #produkt { margin: auto; position: absolute; top:110px; left:735px; }
  .ramka { position: absolute; z-index: 1; top: 90px; width: 320px; height: 320px; border:1px solid rgba(90,90,90,0.3);   
          box-shadow: 0px 0px 0px #000; }
  #cropContaineroutput { position: absolute; z-index: 1; top: 134px; width: 320px; height: 320px; border:1px solid rgba(90,90,90,0.3);   
          box-shadow: 0px 0px 0px #000; }
  #szklo { position: absolute; z-index: 1; top: 90px; width: 320px; height: 320px;  
          background-image: url("../../../index-2.html"); background-size: 320px 320px; }
  #redukcja { position: absolute; z-index: 2; left: 45px; top: 134px;  }
  #klawisz { position: absolute; z-index: 2; left: 62px; top: 154px; }
  #smietnik { position: absolute; z-index: 3; left: 10px; top: 70px; width: 24px; height: 24px; background-image: url(../images/smietnik.png); }
  //#m_opis { text-align: center; width: 80px; height: 180px; margin:0px 0px 0 0; padding:0px 0px; }
  #m_opis { float: left; text-align: center; width: 90px; height: 110px; margin:0px 0px 0 0; padding:0px 0px; }
  #m_opis_creative { float: left; text-align: center; width: 90px; height: 110px; margin-top: -20; padding:0px 0px; }
  #m_opis_wzorniki { float: left; text-align: center; width: 50px; height: 62px; margin:0px 0px 0 0; padding:0px 0px; }
  #m_opis_asa { float: left; text-align: center; width: 90px; height: 110px; margin:0px 0px 0 0; padding:0px 0px; }
  #m_opis_p { height: 20px; text-align: left; font-size: 10px; padding-top: 5px; padding-left: 6px; height: 30px;}
  #m_opis_wzorniki { text-align: center; font-size: 10px; padding-top: 3px; padding-left: 0px; height: 63px; width: 81px; }
  #m_opis_p_asa { height: 20px; text-align: left; font-size: 10px; padding-top: -3px; padding-left: 12px; height: 150px;}
  #m_tytul { height: 0px; text-align: center; font-size: 12px; font-weight:900; margin:4px 0px 0 0; 
            font-family: "Roboto", Gadget, sans-serif; font-weight: 400; font-size: 12px; color: #ffffff; }
  #m_foto_p { height: 0px; text-align: center; }
  #left_redukcje { position: absolute; left:0px; margin:0px 0px 0 0; padding:0px 13px;  top: 100px; width: 76px; height: 100%; 
                  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; color: #ffffff; border-right:3px solid rgba(90,90,90,0.3);}
  #menu_redukcje { width: 50px; }
  #left_klawisze { position: absolute; left:65px; margin:0px 0px 0 0; padding:0px 20px;  top: 100px; width: 82px; height: 100%; 
                  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; color: #ffffff; 
                  border-right:3px solid rgba(90,90,90,0.3); }
  #menu_klawisze { width: 50px; }
  #left_ramki { position: absolute; left:150px; margin:0px 0px 0 0; padding:0px 20px; top: 110px; width: 40%; 
              font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; color: #ffffff;}
  .m_redukcje { text-align: center; width: 40px; height: 0px; margin:0px 0px 0 0; padding:0px 0px; }
  .m_opis_r { height: 30px; text-align: center; font-size: 10px; padding-top: 20px;}
  #m_foto_r { height: 0px; text-align: center; }
  .m_klawisze { text-align: center; width: 40px; height: 0px; margin:0px 0px 0 0; padding:0px 0px; }
  .menu_item { text-align: center;
    width: 50px;
    height: 20px;
    margin: 0px 1px 0 0;
    font-family: "Roboto", Gadget, sans-serif;
    font-weight: lighter;
    font-size: 11px;
    color: #ffffff;
    border: 1px solid #adadad;
    border-radius: 7px;
    padding: 3px;}
  #menu_redukcje_naglowek { position: absolute; left: 8px; top: 68px; text-align: center; width: 50px; height: 20px; margin:0px 2px 0 0;
              font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; color: #ffffff; opacity: 0.7;}
  #menu_klawisze_naglowek { position: absolute; left: 80px; top: 68px; text-align: center; width: 50px; height: 20px; margin:0px 2px 0 0;
              font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; color: #ffffff; opacity: 0.7;}
  #menu_wzornik_podkladow { width: 96%; float: left; margin-top: 40px; border-top:1px solid rgba(90,90,90,0.3);}
  #menu_wzornik_zlocen { width: 93%; float: left; margin-top: 40px; border-top:1px solid rgba(90,90,90,0.3);}
  #menu_wzornik_mrozenia { width: 93%; float: left; margin-top: 40px; border-top:1px solid rgba(90,90,90,0.3);}
  #menu_wzornik_krysztalki { width: 93%; float: left; margin-top: 40px; border-top:1px solid rgba(90,90,90,0.3);}
  #cena { position: absolute; left: 80%;z-index: 10;margin: 5px 10px 10px 10px; text-align: right; width: 200px; color: #ffffff; 
        font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 14px; opacity: 0.7;}
  #cena_brutto { position: absolute; left: 80%;z-index: 10; margin: 25px 10px 10px 10px; text-align: right; width: 200px; color: #ffffff;
                font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 14px; opacity: 0.7;}
  #wartosc {  }
  #wartosc_brutto { font-size: 18px; }
  
  #kolor_redukcji { position: absolute; top:400px; width: 320px; z-index: 10; text-align: left; 
  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 10px; color: #ffffff; opacity: 0.7; }
  #kolor_klawisza { position: absolute; top:400px; width: 320px; z-index: 10; text-align: right; 
  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 10px; color: #ffffff; opacity: 0.7; }
  
  #nazwa_ramki { 
    position: absolute; 
    top:505px; 
    width: 320px; 
    z-index: 10; 
    text-align: center; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 24px; 
    color: #ffffff; 
    //margin-left: -40;
  }
  #tekst_pic { cursor: pointer; margin: 5px 10px 10px 10px; color: #ffffff; font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; opacity: 0.7;}
  #tekst_swarovski { cursor: pointer; margin: 5px 10px 10px 10px; color: #ffffff; font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; opacity: 0.7;}
  #m_opis_krysztal { text-align: left; font-size: 10px; padding-top: 5px; padding-left: 6px; height: 15px;}
  #opis_ramki { position: absolute; top:540px; width: 320px; z-index: 10; text-align: center; 
                font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; color: #ffffff; }
  #wymiary_ramki { position: absolute; top:105px; width: 320px; z-index: 10; text-align: right; z-index: 0; 
                  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 10px; color: #ffffff; opacity: 0.7; }

  .color-box {
  position: absolute;
    left: 50%;
    width: 142px;
    height: 35px;
    margin: 5px;
    z-index: 8;
    float: right;
    cursor: pointer;
    border: 1px solid #adadad;
    border-radius: 7px;
    padding-left: 4px;
    padding-top: 4px;
  }
  #swarovski {
      position: absolute;
    left: 50%;
    top: 100px;
    width: 162px;
    height: 36px;
    margin: 5px;
    z-index: 8;
    float: right;
    cursor: pointer;
    border: 1px solid #adadad;
    border-radius: 7px;
    padding-left: 4px;
    padding-top: 4px;
  }
  #opis_serii { width: 92%; float: left; margin-top: 90px; border-top:1px solid rgba(90,90,90,0.3); text-align: justify;  
              font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; font-size: 12px; color: #ffffff; opacity: 0.7; 
              }
  .krysztal_small { position: absolute; z-index: 11000; background-image: url("../../../index-2.html"); 
                    height: 6px; width: 6px; }
  .krysztal_big { position: absolute; z-index: 11100; background-image: url("../../../index-2.html"); 
                  height: 9px; width: 9px; }
  .addkrysztal_small { position: relative; background-image: url("../images/add_krysztal_small.png"); height: 32px; width: 64px; }
  .addkrysztal_big { position: relative; background-image: url("../images/add_krysztal_big.png"); height: 32px; width: 64px; }
  #left_redukcje { position: absolute; left:0px; margin:0px 0px 0 0; padding:0px 13px;  top: 100px; width: 76px; height: 100%; 
                  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; color: #ffffff; border-right:1px solid rgba(90,90,90,0.3);}
  #menu_swarovski { position: absolute; left:50%; top:150px; margin:0px 0px 0 0; padding:5px 13px;  width: 120px; height: 150px; 
                  font-family: "Roboto", Gadget, sans-serif; font-weight: lighter; color: #ffffff; border:0px solid rgba(90,90,90,0.3);
                  cursor: pointer; }
  
  #preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgb(0,0,0);
	//background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNjOWM5YzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzU3NTc1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	//background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(201,201,201,1) 44%, rgba(117,117,117,1) 100%);
	//background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(44%,rgba(201,201,201,1)), color-stop(100%,rgba(117,117,117,1)));
	//background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#757575',GradientType=1 );
    z-index:20000; /* makes sure it stays on top */
    text-align: center; 
    color: #ffffff; 
    font-family: "Roboto", Gadget, sans-serif; 
    font-weight: lighter; 
    font-size: 14px; 

}

#fullscrean_background {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgb(0,0,0);
	//background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNjOWM5YzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzU3NTc1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	//background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(201,201,201,1) 44%, rgba(117,117,117,1) 100%);
	//background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(44%,rgba(201,201,201,1)), color-stop(100%,rgba(117,117,117,1)));
	//background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	//background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#757575',GradientType=1 );
    z-index:20000; /* makes sure it stays on top */
    text-align: center; 
    color: #ffffff; 
    font-family: "Roboto", Gadget, sans-serif; 
    font-weight: lighter; 
    font-size: 14px; 
}
 
#status {
    width:128px;
    height:128px;
    position:absolute;
    left:50%; /* wyśrodkowujemy w poziomie */
    top:50%; /* wyśrodkowujemy w pionie */
    background-image:url(../images/preloader1.gif); /* tutaj podaj ścieżkę do pliku z animacją */
    background-repeat:no-repeat;
    background-position:center;
    margin:-64px 0 0 -64px; /* no bo chcemy idealnie wycentrować, nie? */
}

.menu_bottom {
    position: absolute; 
    bottom: 10px;
    right: 10px;
    z-index: 10; 
    text-align: right; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 10px; 
    color: #9a9a9a; 
    cursor: pointer;
}

.cena_row { 
  display: flex;
  }
  
#zapisz { 

  }
  
#info_link { 

  }

#info { 
    position: absolute; 
    bottom: 15px;
    left: 50%;
    width: 125px; 
    //height: 200px;
    //z-index: 10; 
    text-align: left; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 12px; 
    //background-color: #000000;
    //box-shadow: -5px 10px 28px rgb(0, 0, 0);
    //border:8px solid rgba(255,255,255,0.6);
    border-top:1px solid rgba(90,90,90,0.3);
    color: #ffffff; 
    cursor: pointer;
  }
    
#help_link { 
 
  }
  
#help { 
    position: absolute; 
    overflow: scroll;
    top: 65px;
    left: 5px;
    width: 90%; 
    height: 90%;
    z-index: 10; 
    text-align: left; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 12px; 
    background-color: #000000;
    box-shadow: -5px 10px 28px rgb(0, 0, 0);
    border:8px solid rgba(255,255,255,0.6);
    color: #ffffff; 
    cursor: pointer;
  }
  
#lista { 
    position: absolute; 
    overflow: scroll;
    top: 65px;
    left: 5px;
    width: 90%; 
    height: 90%;
    z-index: 10; 
    text-align: left; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 12px; 
    background-color: #000000;
    box-shadow: -5px 10px 28px rgb(0, 0, 0);
    border:8px solid rgba(255,255,255,0.6);
    color: #ffffff; 
    cursor: pointer;
    padding: 10px;
}

#alert { 
    position: absolute; 
    bottom: 10px;
    right: 10px;
    width: 400px; 
    height: 250px;
    z-index: 10; 
    text-align: center; 
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 16px; 
    background-color: #000000;
    box-shadow: -5px 10px 28px rgb(0, 0, 0);
    border:4px solid rgba(255,255,255,0.6);
    color: #ffffff; 
    padding: 10px;
}
  
#info_tresc {
    margin: 10px;
}
  
#znakwodny { 
    position: absolute; 
    top: 60px;
    left: 600px;
    z-index: 12010; 

  }

#big_img {
    position: absolute;
    z-index: 13000;
    width: 200px;
    height: 200px;
    top: 260px;
    left: 200px;
    background-color: #000000;
    box-shadow: -5px 10px 28px rgb(0, 0, 0);
    border:8px solid rgba(255,255,255,1);
    background-repeat: no-repeat;
    background-size: cover;
}

#tytul_zdobienia {
    margin-top: 2;
    font-family: "Roboto", Gadget, sans-serif; font-weight: lighter;
    font-size: 10px; 
    color: #ffffff; 
}

#dodajdolisty{
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
}
#lista_link{
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
}
#zapisz{
    margin-bottom: 5px;
}
#info_link{
    margin-bottom: 5px;
}
#help_link{
    margin-bottom: 5px;
}

.menu-serie{ position: relative; width: 100%; height: 60px; background-color: #fff; color: #000; }
.wybrales { float: left; padding-left: 10px; padding-right: 72px; margin-top: 4px; background-color: black; color: white; 
border-top-left-radius: 10px; border-top-right-radius: 10px; }
.sklad { float: left; padding-top: 5px; padding-left: 10px; padding-right: 20px; } 
.serie { width: 131px; height: 52px; padding-top: 17px; text-align: center; float: left; border-radius: 10px; margin: 3px; background-color: black; color: white; }