/*******************************************************************************
  fonts
*******************************************************************************/

@font-face {
  font-family: 'Bebas Neue';
  src: url('../../fonts/BebasNeue.otf');
  src: url('../../fonts/BebasNeue.otf?#iefix') format('opentype');
}

/*******************************************************************************
  common
*******************************************************************************/

    body,
    div,
    h1, h2, h3, h4, h5, h6,
    ul, ol, li,
    a,
    p { margin: 0px; padding: 0px; }

    body,
    html { height: 100%; font-size: 13px; line-height: 16px; }

    .container { width: 100%; padding: 0px; }

    .nowrap { white-space: nowrap; }

    input,
    .btn,
    .modal-content,
    .panel-heading,
    .alert { border-width: 0px; border-radius: 0; }

    .table,
    .panel { border-radius: 0; }

    select.form-control,
    input[type="text"].form-control { line-height: 16px; font-size: 13px; height: 20px; border-radius: 0px; }

    select.form-control { padding: 0px 2px; }

    input[type="text"].form-control { padding: 2px 4px; }

    a[data-sort].asc:after, a.desc:after { font-family: 'Glyphicons Halflings'; position: relative; top: 1px; display: inline-block; font-style: normal; font-weight: normal; line-height: 1; padding-left: 5px; }

    a.asc:after { content: "\e252"; }
    a.desc:after { content: "\e253"; }

    .table-header > div.pull-right { height: 32px; line-height: 22px; display: inline-block; font-size: 13px; }

    .table-header > div.item-per-page .on-one-page { height: 22px; line-height: 22px; display: inline-block; }

    .table-header > div.item-per-page select.form-control { display: inline-block; width: auto; line-height: 16px; height: 22px; }

    .table thead { font-size: 11px; }
    .table thead tr th { text-transform: uppercase; }

    .table tbody { font-size: 13px; }

    .table-header > div,
    .table thead tr th,
    .table thead tr td { margin: 0px; padding: 5px 5px; }
    .table tbody tr td { margin: 0px; padding: 4px 5px; }

    .table-header,
    .table thead tr th,
    .table tbody tr td { line-height: 20px; border: 0px; border-bottom: 1px solid; }

    .table thead tr th { white-space: nowrap; vertical-align: middle; }

    .table thead tr td .btn { margin: -5px; padding: 5px 6px; border-left: 1px solid; width: 29px; height: 30px; }

    .table thead tr td .btn .glyphicon { font-size: 16px; line-height: 20px; }

    .table tbody tr td .action-column { margin: 0 -4px; width: 26px; }

    .table tbody tr td .action-column a { display: block; width: 26px; }

    .table tbody tr td .action-column a .glyphicon { font-size: 26px; line-height: 28px; }

    .pagination { margin: 14px 0; }

    .pagination > li > span,
    .pagination > li.disabled > span,
    .pagination > li > a { border: 0px; height: 21px; padding: 2px 6px; font-size: 16px; line-height: 16px; margin: 0 2px 0 2px; }

    .pagination > li.prev > span,
    .pagination > li.prev > a { margin-left: 0px; }

    .pagination > li.prev > next,
    .pagination > li.next > a { margin-right: 0px; }

/*******************************************************************************
  main
*******************************************************************************/

    #page-header,
    .page-center,
    #page-footer,
    #page-reminder { width: 100%; display: block; }

    #page-header > .wrap,
    .page-center .wrap,
    #page-footer > .wrap,
    #page-reminder > .wrap { width: 1024px; padding: 0px 0px 0px 30px; margin: 0 auto; }

    #page-header { position: fixed; top: 0px; height: 126px; border-top: 5px solid; border-bottom: 1px solid; }
    .page-center { padding: 126px 0 /*104px*/0 0; /*min-height: 100%;*/ }
    #page-footer { /* position: fixed; bottom: 0px; height: 103px; */ padding: 32px 0px 32px 0px; border-bottom: 5px solid; }

    #page-reminder { z-index:999; position: fixed; bottom: 0px; background: transparent; }

/**** Header *******************************************************************/

    #page-header .logo { float: left; }
    #page-header .navbar { float: right; }

    .tricsok #page-header .logo a { display: block; height: 120px; width: 310px; }
    .brennus #page-header .logo a { display: block; height: 120px; width: 210px; }

    #main-menu.navbar { margin: 0; width: auto; }

    #main-menu-collapse { padding: 0px; margin-right: -14px; }

    #main-menu .navbar-nav > li { padding: 65px 14px 0px 14px; }
    #main-menu .navbar-nav > li > a { padding: 0px 0px 33px 0px; line-height: 20px; border-bottom: 2px solid; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }

/**** Center ***************************************************************/

    #page-content  .site-content { padding: 40px 0; border-top: 1px solid; border-bottom: 1px solid; }

    .site-content p { padding-bottom: 1em; }

    #page-content h1 { font-family: 'Bebas Neue', 'Open Sans Condensed'; text-transform: uppercase; font-size: 46px; line-height: 50px; padding-bottom: 14px; }

    #page-content h2 { font-family: 'Bebas Neue', 'Open Sans Condensed'; text-transform: uppercase; font-size: 22px; }

    #page-content h3 { font-family: 'Bebas Neue', 'Open Sans Condensed'; text-transform: uppercase; font-size: 20px; }

    .form-group > label { display: inline-block; width: 23%; text-align: right; margin-left: 0%; margin-right: 2%; padding-top: 7px; }

    .form-group > .file-input,
    .form-group > textarea,
    .form-group > input { vertical-align: middle; width: 74%; display: inline-block; }

    form#adatbekeres label { width: auto; text-align: left; }

    .form-group  div.help-block { float: none; display: block; padding-left: 0px; }

    .download-log-form .captcha > input.form-control,
    .download-log-form .help-block { margin-left: 25%; }

    .brennus #nyitooldal h1 { font-size: 36px; }

    .brennus #nyitooldal .site-content { padding-top: 200px; min-height: 640px; }
    .brennus #nyitooldal .bolcsesseg { display: inline-block; width: 30%; }

    .brennus #nyitooldal .site-content { padding-top: 100px; }

    .brennus #tevekenysegunk .left-paragraph { float: left; width: 482px; /* 1024 / 2 - 30 = 482 */ }
    .brennus #tevekenysegunk .right-paragraph { float: left; width: 512px; /* 1024 / 2 = 512 */ padding-left: 30px; }

    .tricsok #nyitooldal .left-paragraph { float: left; width: 482px; /* 1024 / 2 - 30 = 482 */ }
    .tricsok #nyitooldal .right-paragraph { float: left; width: 512px; /* 1024 / 2 = 512 */ padding-left: 30px; }

    #letoltes .modal-dialog { width: 90%; }

    #letoltes .modal-dialog pre.reszletek { width: 100%; border: 0; padding: 0; background-color: transparent; height: 100%; word-wrap: break-word; white-space: pre-wrap; font-size: 12px; line-height: 16px; }


/**** Footer ***************************************************************/

    #page-footer { font-size: 11px; }

    #page-footer .left-content { width: 140px; float: left; display: block; }
    #page-footer .right-content { width: 390px; float: right; display: block; }

    #page-footer .pf-company,
    #page-footer .pf-address,
    #page-footer .pf-contact { vertical-align: top; line-height: 20px; float: left; display: block; }

    #page-footer .pf-company { width: 140px; }
    #page-footer .pf-address { width: 180px; }
    #page-footer .pf-contact { width: 210px; }

    #page-footer .pf-address,
    #page-footer .pf-contact { padding-left: 30px; border-left: 1px solid; }

    #page-footer .label { width: 69px; /* (200-31)169 % 72 = 42.6% */ padding: 0px; font-weight: normal; font-size: 10px; float: left; line-height: 16px; display: inline-block; text-align: left; }
    #page-footer .data { width: 110px; padding: 0px; float: left; }

/**** Reminder ***************************************************************/
    #page-reminder > .wrap > .alert-reminder { font-size: 13px; line-height: 18px; border: 1px solid; border-radius: 4px; }
    #page-reminder > .wrap > div:last-child { margin-bottom: 2px; }

/***** Under 1023px - mobile design *****/
@media only screen and (max-width: 1023px) {

    #page-header > .wrap,
    .page-center .wrap,
    #page-footer > .wrap { width: 100%; padding: 0 15px; margin: 0; }
    #page-reminder > .wrap { width: 100%; padding: 0; margin: 0; }

    #page-header { height: 54px; border-top: 3px solid; }
    .page-center { padding: 44px 0 0 0; }
    #page-footer { height: auto; padding: 15px 0px 15px 0px; border-bottom: 3px solid; }

    /***** header *****/

    #main-menu-collapse { margin: 0px; }

    #main-menu .navbar-nav > li > a { letter-spacing: 1.5px; }

    .tricsok #page-header .logo,
    .brennus #page-header .logo { height: 47px; padding-top: 2px; }

    .tricsok #page-header .logo a,
    .brennus #page-header .logo a { width: 45px; height: 45px; background-position: center center; background-repeat: no-repeat; background-size: cover; }

    #main-menu .navbar-nav { margin: 0; }
    #main-menu .navbar-nav > li { padding: 2px 0 2px 0; }
    #main-menu .navbar-nav > li > a { padding: 12px 12px 12px 12px; line-height: 20px; letter-spacing: 1.5px; }

    /***** center *****/

    .table thead { font-size: 10px; }
    .table tbody { font-size: 11px; }
    .table-header > div,
    .table thead tr th,
    .table thead tr td,
    .table tbody tr th,
    .table tbody tr td { margin: 0px; padding: 4px 4px; }

    .table-header,
    .table thead tr th,
    .table tbody tr td { line-height: 16px; }

    .table thead tr th { white-space: normal; }

    .table thead tr td .btn { margin: -4px; padding: 4px 5px; border-left: 1px solid; width: 27px; height: 28px; }

    .table thead tr td .btn .glyphicon { font-size: 14px; line-height: 20px; }

    .table tbody tr td .action-column { margin: 0 -2px; width: 22px; }

    .table tbody tr td .action-column a { display: block; width: 22px; }

    .table tbody tr td .action-column a .glyphicon { font-size: 22px; line-height: 24px; }

    #page-content { min-height: 480px; }

    #page-content .site-content { padding: 5% 0; }

    .brennus #nyitooldal h1 { font-size: 24px; line-height: 28px; }

    .brennus #nyitooldal .site-content { padding-top: 140px; min-height: 480px; }
    .brennus #nyitooldal .bolcsesseg { width: 100%; }

    .brennus #tevekenysegunk .left-paragraph { float: none; width: 100%; /* 1024 / 2 - 30 = 482 */ }
    .brennus #tevekenysegunk .right-paragraph { float: none; width: 100%; /* 1024 / 2 = 512 */ padding-left: 0; }

    .tricsok #nyitooldal .left-paragraph { float: none; width: 100%; /* 1024 / 2 - 30 = 482 */ }
    .tricsok #nyitooldal .right-paragraph { float: none; width: 100%; /* 1024 / 2 = 512 */ padding-left: 0; }

    /**** Reminder ***************************************************************/
        #page-reminder > .wrap > .alert-reminder { border-radius: 0px; }
        #page-reminder > .wrap > div:last-child { margin-bottom: 0px; }

}

/***** Under 768px - mobile design *****/
@media only screen and (max-width: 768px) {

    /***** header *****/
    #main-menu .navbar-toggle { border: 0px; }

    #main-menu .navbar-nav > li { border-bottom: 1px solid; }
    #main-menu .navbar-nav > li > a { border-bottom: 0px; }

    /***** center *****/
    #page-content { min-height: 320px; }

    #page-content h1 { font-size: 28px; line-height: 32px; }

    #page-content h2 { font-size: 18px; }

    #page-content h3 { font-size: 16px; }

    .table-header > div.pull-right { height: 28px; line-height: 20px; display: inline-block; font-size: 11px; }

    .table-header > div.item-per-page .on-one-page { height: 20px; line-height: 20px; display: inline-block; }

    .table-header > div.item-per-page select.form-control { display: inline-block; width: auto; line-height: 14px; height: 20px; font-size: 11px; }

    .brennus #nyitooldal .site-content { padding-top: 100px; min-height: 320px; }

    .tricsok #nyitooldal .site-content { padding-bottom: 10px; }

    #letoltes .modal-dialog { width: 98%; margin: 1%; }

    #letoltes .modal-dialog .modal-body,
    #letoltes .modal-dialog .modal-header,
    #letoltes .modal-dialog .modal-footer { padding: 5px 10px; }

    #letoltes .modal-dialog pre.reszletek { font-size: 10px; line-height: 15px; }

}

/***** Under 480px - mobile design *****/
@media only screen and (max-width: 480px) {

    #page-header > .wrap,
    .page-center .wrap,
    #page-footer > .wrap { width: 100%; padding: 0 8px; margin: 0; }

    /***** header *****/

    /***** center *****/


    /***** footer  *****/

    #page-footer { height: auto; padding: 15px 0px 10px 0px; border-bottom: 5px solid; }

    #page-footer .left-content { padding-bottom: 5px; }
    #page-footer .right-content { padding-bottom: 5px; width: 100%; }

    #page-footer .pf-address,
    #page-footer .pf-contact { padding-left: 5px; border-left: 1px solid; width: 49%; }

    #page-footer .label { width: 54px; font-size: 9px; }
    #page-footer .data { width: 100px; }

    /***** reminder *****/
    #page-reminder > .wrap > .alert-reminder { font-size: 11px; line-height: 13px; padding: 8px; margin-bottom: 1px; }

}