/* -------------------------------------- Hlavní nastavení -------------------------------------- */
html                   { height: 100%; }
body                   { height: 100%; font: 14px 'Raleway', arial, sans-serif; font-weight: 300; color: #444444; background-color: #F5F5F5; margin: 0 auto; line-height: 1.7em; }
img                    { border: 0px; }
form                   { margin: 0px; padding: 0px; display: inline; }
table                  { width: 100%; }
a                      { color: #00589E; text-decoration: none; }
p                      { margin: 0 0 25px 0; text-align: justify; }
td                     { word-break: break-word; }
label                  { display: block; float: left; width: 20%; margin: 0; padding: 0; vertical-align: middle; line-height: 26px; }
input                  { vertical-align: middle; color: #444444; font: 14px 'Raleway', arial, sans-serif; max-width: 100%; }
select                 { margin: 0px 0px 5px 0px; padding: 2px 0px; color: #444444; border: 1px solid #DDDDDD; vertical-align: middle; min-width: 208px; font: 14px 'Raleway', arial, sans-serif; max-width: 100%; }
textarea               { margin: 0px 0px 0px 0px; padding: 2px 3px; color: #444444; border: 1px solid #DDDDDD; vertical-align: middle; min-width: 200px; font: 14px 'Raleway', arial, sans-serif; max-width: 100%; overflow: auto; }
iframe                 { width: 100%; height: 500px; border: 1px solid #DDDDDD; }
strong                 { font-weight: 400; }

ul                     { margin: 0; padding: 0; }
li                     { padding-left: 5px; margin-left: 15px; padding-bottom: 5px; line-height: 1.7em; }

h1                     { margin: 0px; padding: 0 0 20px 0; font-size: 40px; font-weight: 300; line-height: 1.2em; color: #272727; clear: both; }
h2                     { margin: 0px; padding: 0 0 20px 0; font-size: 40px; font-weight: 300; line-height: 1.2em; color: #272727; clear: both; }
h2 span                { font-weight: 500; }
h3                     { margin: 0px; padding: 0 0 20px 0; font-size: 20px; font-weight: 300; line-height: 1.2em; color: #272727; clear: both; }
h4                     { margin: 0px; padding: 0 0 20px 0; font-size: 18px; font-weight: 300; line-height: 1.2em; color: #272727; clear: both; }
h5                     { margin: 0px; padding: 0 0 20px 0; font-size: 14px; font-weight: 300; line-height: 1.2em; color: #272727; clear: both; }

.subheader             { font-size: 18px; font-weight: 200; color: #444444; text-align: center; }
.subheader_mini        { font-size: 13px; font-weight: 300; color: #444444; text-align: center; }

@media screen and (max-width: 800px)
{
  .container img, .banner_container img
                       { width: 100% !important; height: auto !important; }

  label                { width: 100%; }
  h1                   { font-size: 30px; }
  h2                   { font-size: 30px; }
  h3                   { font-size: 16px; }
  h4                   { font-size: 16px; }
  h5                   { font-size: 12px; }
  
  .subheader           { font-size: 16px; }
}


/* -------------------------------------- Formulářové prvky ------------------------------------- */
.oh                    { overflow: hidden; }

.input                 { margin: 0px 0px 5px 0px; padding: 3px 6px; border: 1px solid #DDDDDD; min-width: 210px; }
.input_label           { margin: 0px 0px 5px 0px; padding: 3px 6px; border: 1px solid #DDDDDD; min-width: 210px;              -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.input_full_label      { margin: 0px 0px 5px 0px; padding: 3px 6px; border: 1px solid #DDDDDD; min-width: 210px; width: 80%;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.input_full            { margin: 0px 0px 5px 0px; padding: 3px 6px; border: 1px solid #DDDDDD; min-width: 210px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.input_nfull           { margin: 0px 0px 5px 0px; padding: 3px 6px; border: 1px solid #DDDDDD; min-width: 210px; width: 300px; }

.select                { margin: 0px 0px 5px 0px; padding: 2px; min-width: 255px; }
.select_full           { margin: 0px 0px 5px 0px; padding: 2px; width: 100%; }

.textarea_full_label   { width: 80%;  margin: 0px 0px 5px 0px; height: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.textarea_full         { width: 100%; margin: 0px 0px 5px 0px; height: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.span                  { margin: 0px 0px  0px 0px;  padding: 0px; vertical-align: -1px; }
.lspan                 { margin: 0px 0px  0px 10px; padding: 0px; vertical-align: -1px; }
.rspan                 { margin: 0px 10px 0px 0px;  padding: 0px; vertical-align: -1px; }
.lrspan                { margin: 0px 10px 0px 10px; padding: 0px; vertical-align: -1px; }

.checkbox              { margin: 8px 0px  10px  0px; padding: 0px; }
.lcheckbox             { margin: 8px 0px  10px 10px; padding: 0px; }
.rcheckbox             { margin: 8px 10px 10px  0px; padding: 0px; }
.lrcheckbox            { margin: 8px 10px 10px 10px; padding: 0px; }
                  
.radio                 { margin: 8px 0px  10px  0px; padding: 0px; }
.lradio                { margin: 8px 0px  10px 10px; padding: 0px; }
.rradio                { margin: 8px 10px 10px  0px; padding: 0px; }
.lrradio               { margin: 8px 10px 10px 10px; padding: 0px; }

.button_blue           { display: inline-block; line-height: 36px; height: 35px; padding: 0px 30px; font-weight: 500; color: #FFFFFF; text-decoration: none; cursor: pointer; border: none; background: linear-gradient(to bottom, rgb(7, 118, 184) 0%, rgb(31, 138, 202) 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

/* ------------------------------------------- Obecné ------------------------------------------- */
.whitebg               { background-color: #FFFFFF !important; }
.blackbg               { background-color: #262626 !important; }
.greywallbg            { background: url('../_img/greywall.png'); }
.deplbg                { background: url('../_img/deployment_bg.jpg') no-repeat; }
.worldbg               { background: url('../_img/world_bg.jpg') no-repeat; }

.nrp                   { padding-right: 0px !important; } /* No right padding - pro více boxů vedle sebe s vlastním right padding */
.rp                    { padding-right: 20px; }
.rm                    { margin-right: 20px; }
.mb                    { margin-bottom: 20px; }
.fr                    { float: right !important; }
.fl                    { float: left !important; }
.clear                 { clear: both; height: 1px; }
.pointer               { cursor: pointer; }
.red                   { color: #ED1F29; }
.green                 { color: #88C43E; }
.blue                  { color: #00589E; }
.orange                { color: #F9A23A; }
.none                  { display: none; }
.center                { text-align: center; }
.inline                { display: inline !important; }
.relative              { position: relative; }
.w100                  { width: 100% !important; height: auto !important; }
.no100                 { width: auto !important; }

/* ------------------------------------- Hlavička a patička ------------------------------------- */
.body                        { min-height: 100%; position: relative; padding-bottom: 250px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.wrapper                     { } 
.container                   { margin: 0 auto; padding: 30px 20px 10px 20px; overflow: hidden; width: 1160px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.header                      { height: 75px; position: relative; z-index: 1; background-color: rgba(38, 38, 38, 0.9); -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); }
.header .container           { padding: 7px 20px; }
.header_top                  { position: fixed; top: -30px; left: 0; width: 100%; }
.header_top .logo img        { width: 60% !important; height: 60% !important; margin-top: 22px; }

.logo                        { float: left; margin: 11px 0 0 0; }

.menu_icon                   { display: none; float: right; cursor: pointer; padding-top: 17px; padding-right: 10px; color: #C4C4C4; }
.menu_icon_top               { padding-top: 32px; }

.menu                        { float: right; position: relative; padding-top: 33px; font-size: 14px; font-weight: 400; color: #EEEEEE; }
.menu ul                     { padding: 0; margin: 0; }
.menu li                     { float: left; padding: 0; margin: 0; padding-left: 30px; list-style-type: none; }
.menu a                      { color: #EEEEEE; text-decoration: none; }
                                                                                                                                                                                                                                                  
.menu_button                 { position: absolute; z-index: 2; top: 2px; right: 0px; }
.menu_button a               { padding: 5px 10px !important; line-height: 1em; height: auto; color: #FFFFFF; font-size: 12px; }
.menu_button i               { vertical-align: -1px; padding-right: 10px; }

.footer                      { font-size: 13px; width: 100%; height: 250px; position: absolute; bottom: 0; left: 0; overflow: hidden; }
.footer a                    { color: #FFFFFF; }
.footer div                  { color: #FFFFFF; }
.footer .block4              { min-height: 147px; }
.footer h3                   { color: #FFFFFF; font-size: 16px; }
.footer li                   { color: #FFFFFF; padding: 0; margin: 0; list-style: none; }
.footer_line                 { border-bottom: 1px solid #333333; margin-bottom: 15px; clear: both; height: 1px; }

.social_icons i              { color: #777777; padding: 10px 10px 0 0; }

@media screen and (max-width: 1159px)
{
  .container                 { width: 100%; }
}

@media screen and (max-width: 1099px)
{
  .body                      { padding-bottom: 0px; }
  .footer                    { height: auto; position: static; }
}

@media screen and (max-width: 749px)
{
  .menu                      { display: none; position: absolute; width: 100%; left: 0px; top: 75px; padding-top: 0px; background-color: #3A3A3A; }
  .menu li                   { width: 100%; border-top: 1px solid #9D9D9D; padding: 0; }
  .menu li a                 { display: block; width: 100%; padding: 10px 20px; }
  .menu_button               { position: static; }
  .menu_button a             { background: none; font-weight: 300; padding: 15px 20px !important; font-size: 14px; }
  .menu_button i             { display: none; }
  .menu_icon                 { display: block; }
}

/* --------------------------------------- Design obchodu --------------------------------------- */
.block2                      { float: left; margin-bottom: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media screen and (min-width: 800px) and (max-width: 5000px) { .block2:nth-child(odd)  { width: 50%; padding-right: 20px; }
                                                               .block2:nth-child(even) { width: 50%; padding-left: 20px; } }
@media screen and (min-width: 0px) and (max-width: 799px)    { .block2 { width: 100%; } }

.block4                      { float: left; margin-bottom: 20px; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media screen and (min-width: 1100px) and (max-width: 5000px) { .block4 { width: 25%;  } }
@media screen and (min-width: 600px) and (max-width: 1099px)  { .block4 { width: 50%;  } }
@media screen and (min-width: 0px) and (max-width: 599px)     { .block4 { width: 100%; } }


/* --------------------------------------- Úvodní stránka --------------------------------------- */
/* Banner */
.banner_wrapper              { background-color: #F5F5F5; overflow: hidden; }
.banner_container            { margin: 0 auto; padding: 20px 20px; width: 1160px; overflow: hidden; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.banner_text                 { float: left; }
/*.banner_text ul              { background-color: #EFEFEF; max-width: 400px; padding: 10px 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }*/
.banner_text ul              { max-width: 410px; }
.banner_text li              { line-height: 1.5em; }

.banner_image                { float: right; width: 59%; height: auto; }
.banner_wrapper h2           { text-align: left; margin-top: 10px; }
.banner_wrapper .subheader   { text-align: left; }

@media screen and (min-width: 0px) and (max-width: 1159px)    { .banner_container { width: 100%; } }
@media screen and (min-width: 1020px) and (max-width: 1140px) { .banner_image     { width: 54%;  } }
@media screen and (min-width: 921px) and (max-width: 1019px)  { .banner_image     { width: 49%;  } }
@media screen and (min-width: 845px) and (max-width: 920px)   { .banner_image     { width: 44%;  } }
@media screen and (min-width: 0px) and (max-width: 844px)     { .banner_image     { width: 39%;  } }

/* Citace */
.citation                    { width: 100%; background-color: #F8F8F8; padding: 15px 15px 15px 25px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: table; }
.citation .fa-quote-left     { color: #127FC0; float: left; margin-top: -25px; margin-left: -35px; }
.citation .fa-quote-right    { display: none; color: #127FC0; float: right; margin-top: 13px; margin-left: 15px; }
.citation .cit_customer      { padding-top: 10px; font-size: 13px; float: right; }

/* Loga e-shopů */
.reference_logos                          { margin-bottom: 30px; overflow: hidden; }
.reference_logos div                      { float: left; width: 20%; line-height: 100px; text-align: center; border-bottom: 1px solid #EBE8E5; border-right: 1px solid #EBE8E5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.reference_logos img                      { vertical-align: middle; width: auto !important; }
.reference_logos div:nth-child(5n+0)      { border-right: none; }
.reference_logos div:nth-last-child(-n+5) { border-bottom: none; }

@media screen and (min-width: 660px) and (max-width: 900px)
{
  .reference_logos div                      { width: 25%; }
  .reference_logos div:nth-child(5n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+5) { border-bottom: 1px solid #EBE8E5; }  

  .reference_logos div:nth-child(4n+0)      { border-right: none; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: none; }
  .reference_logos div:nth-last-child(-n+2) { display: none; }
}

@media screen and (min-width: 580px) and (max-width: 659px)
{
  .reference_logos div                      { width: 33.3%; }
  .reference_logos div:nth-child(5n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+5) { border-bottom: 1px solid #EBE8E5; } 
  .reference_logos div:nth-child(4n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+2) { display: block; }

  .reference_logos div:nth-child(3n+0)      { border-right: none; }
  .reference_logos div:nth-last-child(-n+4) { border-bottom: none; }
  .reference_logos div:nth-last-child(-n+1) { display: none; }
}

@media screen and (min-width: 410px) and (max-width: 579px)
{
  .reference_logos div                      { width: 50%; }
  .reference_logos div:nth-child(5n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+5) { border-bottom: 1px solid #EBE8E5; } 
  .reference_logos div:nth-child(4n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+2) { display: block; }
  .reference_logos div:nth-child(3n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+4) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+1) { display: block; }

  .reference_logos div:nth-child(2n+0)      { border-right: none; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: none; }
  .reference_logos div:nth-last-child(-n+4) { display: none; }
}

@media screen and (min-width: 0px) and (max-width: 409px)
{
  .reference_logos div                      { width: 100%; }
  .reference_logos div:nth-child(5n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+5) { border-bottom: 1px solid #EBE8E5; } 
  .reference_logos div:nth-child(4n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+2) { display: block; }
  .reference_logos div:nth-child(3n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+4) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+1) { display: block; }
  .reference_logos div:nth-child(2n+0)      { border-right: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: 1px solid #EBE8E5; }
  .reference_logos div:nth-last-child(-n+4) { display: block; }

  .reference_logos div:nth-child(n+0)       { border-right: none; }
  .reference_logos div:nth-last-child(-n+6) { border-bottom: none; }
  .reference_logos div:nth-last-child(-n+5) { display: none; }
}


/* ------------------------------------------- Kontakt ------------------------------------------ */
.address1                    { float: left; width: 197px; }
.address2                    { float: left; width: 197px; }


/* ------------------------------------------ Nápověda ------------------------------------------ */
.example               { border: 1px solid blue; padding: 5px; }
.note                  { border: 1px solid black; padding: 5px; }
.important             { border: 1px solid red; padding: 5px; }


/* ----------------------------------------- Vlastnosti ----------------------------------------- */ 
.propl                 { float: left; width: 90px; clear: both; color: #127FC0; text-align: center; }
.propr                 { overflow: hidden; }
.proph                 { margin: 0; padding: 0 0 5px 0; line-height: 1em; font-size: 18px; clear: both; }
.proptext              { padding-bottom: 40px; }