/* Kislábos CSS
CSS for "KisLábos" webpage (kislabs.hu) based on Bootstrap
and Business Casual (landing page sample)
Made by Giczoe

Abreviations:
    BS = BootStrap
    BC = Business Casual

A nontrivial selector in CSS :
     p.a.b    =   p[class~="a"][class~="b"]   :   <p  class="a b">
      .a.b    =    [class~="a"][class~="b"]   :   <.. class="a b">
   (nonspace)               (AND)   
*/

/* ----------------  COMMON SETTINGS   -------------------------------------- */

/* ........   BACKGROUND IMAGE and BODY visibility  ............. */

/* Business Casual:
body {
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
} */
/*
    The height & min-height settings of html and body is a
    bugfixing for the Amdroid-Chrome. Without it the bacground
    image does not appear well in mobile.
*/
html {
    height: 100%;
    min-height: 100%;
}
body {
    height: 100%;
    min-height: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

    /*
    background-image: url(../img/NIZA_Kislabos_Suti_01_01.jpg) ;
    background-image: url(../img/MALNA_Oszi_Taj_v01.jpg) ;
    */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    
}

/* ........   FONT-FAMILY   ..................................... */

/* Business Casual:
body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
} 
@media screen and (min-width:768px) {
    .brand {
        font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    }
}
*/
body {
    /* My special fonts:*/
    /*
    font-family: "Margot", "Octin-Vintage", "District-Regular", "Helvetica Neue",Helvetica,Arial,sans-serif;
    */
    font-family: Arial,sans-serif;
}
h1 {
    /* My special fonts (1st = handwriting-like font):*/ 
    font-family: "Stalemate-Regular", "Margot-Bold", "Octin-Vintage",
    "District-Regular", "Helvetica Neue",Helvetica,Arial,sans-serif;
    /*
    font-family: Arial,sans-serif;
    */
    
}
h2, h3, h4, h5, h6 {
    /* My special fonts:*/
    /*
    font-family: "Margot-Bold", "Octin-Vintage", "District-Regular",
    "Helvetica Neue",Helvetica,Arial,sans-serif;
    */
    font-family: Arial,sans-serif;
}
@media screen and (min-width:768px) {
    .brand { 
    /* My special fonts (1st = handwriting-like font):*/  
        font-family: "Stalemate-Regular", "Margot-Small-Capitals",
        "Octin-Vintage", "District-Regular", "Helvetica Neue",
        Helvetica,Arial,sans-serif;
    }   
    /*
    font-family: Arial,sans-serif;
    */
}   
    
/* ........   PARAGRAPHS ( p h1-h6 hr )   ....................... */

/* Bootstrap:
body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
*/
/* Business Casual:
h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
p {
    font-size: 1.25em;
    line-height: 1.6;
    color: #000;
}
hr {
    max-width: 400px;
    border-color: #999999;
}
*/
h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #52322e;
}
p, li {
    font-size: 1.25em;
    line-height: 1.6;
    color: #52322e;
}
hr {
    max-width: 400px;
    border-color: #999999;
}

/* ........   TOOLTIP   ......................................... */

/* Bootstrap:
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
*/
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #556B2F; /* DarkOliveGreen */
  border-radius: 6px;
}

/* ........   CONTAINER  CONTAINER-FLUID  ROW    ................ */

/* Business Casual:
  Containers maybe class="container" or class="container-fluid"
  Places of containers: 
  - Navigation  <nav ... > <div class="container"> ... </div> </nav>
  - Content     <div class="container"> ... </div>
  - Footer      <footer> <div class="container"> ... </div> </footer>
  Rows in the main independent sections within the Content
*/
/* Bootstrap:
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
*/
.container {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 8px;
    border: 0px solid red;
}
@media (min-width: 768px) {
    .container {
        width: 740px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* Bootstrap:
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
*/
.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 8px;
    border: 0px solid pink;
}

/* Bootstrap:
.row {
  margin-right: -15px;
  margin-left: -15px;
}
*/
.row {
    margin-right: 0;         /* BC: -    BS: -15 */
    margin-left: 0;          /* BC: -    BS: -15 */
}

/* ........   IMAGE  ............................................ */

/* Bootstrap:

img {
  border: 0;
}

img {
    page-break-inside: avoid;
}
img {
    max-width: 100% !important;
}

img {
    vertical-align: middle;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-rounded {
    border-radius: 6px;
}
.img-thumbnail {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.img-circle {
    border-radius: 50%;
}
*/

/* Business Casual:
.img-full {
    min-width: 100%;
}
.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}
@media screen and (min-width:768px) {
    .img-left {
        float: left;
        margin-right: 25px;
    }    
}
*/

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}
.img-right {
    float: none;
    margin: 0 auto 0;
}

.book-img {
    float: none;
    display: block;
    /*margin: auto;*/
}

@media screen and (min-width:768px) {
    .img-left {
        float: left;
        margin-right: 25px;
    }    
    .img-right {
        float: right;
        margin-left: 25px;
    }
    .book-img {
        width: 100%;
        float: left;
    }
    
    .book-img-left-page {
        width: 50%;
        float: left;
        margin: 0;
    }
    .book-img-right-page {
        width: 50%;
        float: left;
        margin: 0;
    }

    .img-left-page {
        float: right;
        margin: 0;
    }
    .img-right-page {
        float: left;
        margin: 0;
    }
}
  

/* ........   THE CLEARFIX HACK  ................................ */

/* Bootstrap:
 If an element is taller than the element containing it, and it is floated,
 it will overflow outside of its container. The new, modern clearfix hack
 works well as long as you are able to keep control of your margins and
 padding (else you might see scrollbars).
 
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after {
  display: table;
  content: " ";
}
.container:after,
.container-fluid:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after {
  clear: both;
}
*/
/* Business Casual:
@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}
*/
.box:before,
.box:after {
  display: table;
  content: " ";
}
.box:after {
  clear: both;
}

/* -------------------------  INTRO HEADER  --------------------------------- */

/* BC:
.brand,
.address-bar {
    display: none;
}
*/
.brand,
.address-bar {
    display: none;
}

/* ........   BRAND  ............................................ */

/* BC:
@media screen and (min-width:768px) {
    .brand {
        display: inherit;
        margin: 0;
        padding: 30px 0 10px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        font-size: 5em;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }
}
*/
@media screen and (min-width:768px) {
    .brand { 
        display: inherit;
        margin: 0;
        padding: 20px 0 10px;
        text-align: center;
        text-shadow: 4px 4px 2px rgba(0,0,0,0.9);
        text-transform: none;
        font-size: 5em;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        letter-spacing: 2px;
    }   
}   
#kislabos-brand-logo {
    margin-bottom: 0px;
    border: 0px;
}


/* ........   ADDRESS BAR   ..................................... */

/* BC:
@media screen and (min-width:768px) {
    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #fff;
    }
}   
*/
@media screen and (min-width:768px) {
    .address-bar {
        display: block;
        width: 400px;
        margin: 0 auto;
        margin-bottom: 10px;
        padding: 0;

        text-align: center;
        text-shadow: 3px 3px 2px rgba(0,0,0,0.9);
        text-transform: none;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 2px;
        color: #f0e6d1;
        
        background-color: #141612;
        background-clip: content-box;
        
        border-radius: 5px;
        border-color: #52322e;
        border: 1px dashed;
    }
}

/* -------------------------  NAVBAR  --------------------------------------- */

/* BC:
@media (min-width: 768px) {
    .navbar {
        border-radius: 0;
    }
    .navbar-header {
        display: none;
    }
    .navbar {
        min-height: 0;
    }
    .navbar-default {
        border: none;
        background: #fff;
        background: rgba(255,255,255,0.9);
    }

}
*/

/* -- nav .navbar .navbar-default  ------ */ 

nav {
    display: block;                 /* BC: -    BS: block */
}
.navbar {
    position: relative;             /* BC: -    BS: relative */
    min-height: 50px;               /* BC: -    BS: 50px */
    margin-bottom: 20px;            /* BC: -    BS: 20px */
    border: 1px solid transparent;  /* BC: -    BS: 1px solid transparent */
    border-radius: 8px;             /* BC: -    BS: - */
}
@media (min-width: 768px) {
    .navbar {
        margin-right: auto;         /* BC: -    BS: - */
        margin-left: auto;          /* BC: -    BS: - */
        min-height: 0;              /* BC: 0    BS: - */
        border-radius: 8px;         /* BC: 0    BS: 4px */
    }
}
.navbar-default {
    background-color: #f8f8f8;              /* BC: -    BS: #f8f8f8 */
    border-color: #e7e7e7;                  /* BC: -    BS: #e7e7e7 */
}
@media screen and (min-width:768px) {
    .navbar-default {
        border: none;                       /* BC: none                  BS: - */
        background: #fff;                   /* BC: #fff                  BS: - */
        background: rgba(255,255,255,0.9);  /* BC: rgba(255,255,255,0.9) BS: - */
    }
}

/* -- .navbar-header  --------------------*/

/* BS:
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
.container > .navbar-header,
.container-fluid > .navbar-header {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header {
    margin-right: 0;
    margin-left: 0;
  }
}
/* BC:
@media screen and (min-width:768px) {
    .navbar-header {
        display: none;
    }
}
*/

@media screen and (min-width:768px) {
    .navbar-header {
        display: none;
    }
}
.container>.navbar-header {
    margin-right: 0;             /* BC: -    BS: -15 */
    margin-left: 0;              /* BC: -    BS: -15 */
    border: 0px solid yellow;    /* just for understanding */
}

/* -- .navbar-brand  ---------------------*/

/* BC:
.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}
*/
.extra-button {
    height: 100%;              
    padding: 0px 15px;        
    margin-top: 9px;          
    font-size: 26px;         
    line-height: 20px;       
    text-transform: none;    
    font-weight: 600;       
    letter-spacing: 0px;      
}

.navbar-brand {
    float: left;                /* BC: -            BS: left */
    height: 100%;               /* BC: -            BS: 50px */
    padding: 0px 15px;          /* BC: -            Bs: 15px 15px */
    margin-top: 9px;            /* BC: -            Bs: - */
    font-size: 20px;            /* BC: -            BS: 18px */
    line-height: 32px;          /* BC: -            BS: 20px */
    text-transform: none;       /* BC: uppercase    BS: - */
    font-weight: 600;           /* BC: 900          BS: - */
    letter-spacing: 0px;        /* BC: 2px          BS: - */
    border: 0px solid red;      /* just for understanding */
}

.navbar-brand > div {
    display: table;
    border: 0px solid black;    /* just for understanding */
}

.navbar-brand img {
    float: left;
    position: relative;
    top: 0px;
    opacity: 0.4;
    border: 0px solid violet;   /* just for understanding */
}

.navbar-brand span {
    float: left;
    position: relative;
    top: 2px;
    padding-left: 7px;
    border: 0px solid blue;     /* just for understanding */
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;                    /* BC: -            BS: none */
}
.navbar-default .navbar-brand {
  color: #999;                              /* BC: -            BS: #777 */
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #333;                              /* BC: -            BS: #5e5e5e */
  background-color: transparent;            /* BC: -            BS: transparent */
}
.navbar-default .navbar-brand:hover img,
.navbar-default .navbar-brand:focus img{
    opacity: 0.8;
}

/* -- button .navbar-toggle  --------------*/
/* BS:
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
*/

/* -- .collapse .navbar-collapse -------- */

/* BS:
.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
*/

/* -- .nav .navbar-nav -------- */

/* BS:
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav {
  margin: 7.5px -15px;
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
*/
/* BC:
.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 3px;
}
@media screen and (min-width:768px) {
    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.25em;
    }
}
*/
.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0px;
}
@media screen and (min-width:768px) {
    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.25em;
    }
}

/* -- .nav>li .nav>li>a .navbar-nav>li .navbar-nav>li>a -------- */

/* Bootstrap:
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
*/
/* BC:
@media screen and (min-width:768px) {
    .nav>li>a {
        padding: 35px;
    }
    .navbar-nav>li>a {
        line-height: normal;
    }
}
*/

.nav > li.invisible-in-small {
    position: relative;
    display: none;
}
@media screen and (min-width:768px) {
    .nav > li.invisible-in-small {
        position: relative;
        display: block;
    }    
}    
.navbar-nav > li > a {
    height: 100%;                   /* BC: -            BS: - */                
    padding-top: 0px;               /* BC: -            BS: 10px */
    padding-bottom: 0px;            /* BC: -            BS: 10px */
    padding-left: 34px;             /* BC: -            BS: 15px */
    padding-right: 0px;             /* BC: -            BS: 15px */
    margin-top: 8px;                /* BC: -            BS: - */            
    margin-bottom: 8px;             /* BC: -            BS: - */        
    margin-left: auto;              /* BC: -            BS: - */            
    margin-right: auto;             /* BC: -            BS: - */        
    font-size: 16px;                /* BC: -            BS: - */        
    line-height: 26px;              /* BC: -            BS: 20px */         
    text-transform: none;           /* BC: -            BS: - */    
    font-weight: 600;               /* BC: -            BS: - */
    letter-spacing: 0px;            /* BC: -            BS: - */    
    border: 0px solid orange;       /* just for understanding */
}

.navbar-nav > li > a > div {
    display: table;
    border: 0px solid lightblue;    /* just for understanding */  
}

.navbar-nav > li > a > div > img {
    float: left;
    position: relative;
    top: 0px;
    opacity: 0.4;
    border: 0px solid black;        /* just for understanding */   
}

.navbar-nav > li > a > div > span {
    float: left;
    padding-left: 11px;
    border: 0px solid red;          /* just for understanding */   
}

.navbar-default .navbar-nav > li > a {
  color: #999;                       /* BC: -            BS: #777 */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;                       /* BC: -            BS: #333 */
  background-color: transparent;       /* BC: -            BS: transparent */
}

.navbar-default .navbar-nav > li > a:hover img,
.navbar-default .navbar-nav > li > a:focus img{
    opacity: 0.8;
}

@media screen and (min-width:768px) {
    .nav > li > a {
        padding: 15px 15px;         /* BC: 35px         BS: 15px 0 */
    }
    .nav > li:first-child > a {
        padding: 15px 15px 15px 0px;
    }
    .nav > li:last-child > a {
        padding: 15px 0px 15px 15px;
    }
    .navbar-nav > li > a {
        font-size: 20px;            /* BC: -            BS: - */            
        line-height: 26px;          /* BC: normal       BS: - */
    }
    .navbar-nav > li > a > div > img {
        width: 32px;
        height: 32px;
    }
    .navbar-nav > li > a > div > span {
        height: 32px;
        position: relative;
        top: 5px;
    }
}

@media screen and (min-width:992px) {
    .nav > li > a {
        padding: 15px 30px;         /* BC: 35px         BS: 15px 0 */
    }
    .navbar-nav > li > a {
        font-size: 20px;            /* BC: -            BS: - */            
        line-height: 26px;          /* BC: normal       BS: - */
    }
    .navbar-nav > li > a > div > img {
        width: 32px;
        height: 32px;
    }
    .navbar-nav > li > a > div > span {
        height: 32px;
        position: relative;
        top: 5px;
    }
}

@media screen and (min-width:1200px) {
    .nav > li > a {
        padding: 15px 45px;              /* BC: 35px         BS: 15px 0 */
    }
}

/* ---  My back-to-top button-------- ---------------------------*/

.back-to-top {
    position: fixed;
    top: 4px;
    left: 6px;

    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    text-align: center;
    
    opacity: 0;
    color: rgba(159, 0, 0, 0.2);
    background-color: rgb(175, 175, 175, 0.2);
    background-clip: padding-box;
    
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 5px;
    padding: 1px 5px;
    margin: 5px;
    z-index: 100;
}
@media screen and (min-width:768px) {
    .back-to-top {
        opacity: 1;
    }    
}    
.back-to-top:hover,
.back-to-top:focus {
    text-decoration: none;
    opacity: 0.8;
    color: rgba(159, 0, 0, 0.8);
    background-color: rgba(175, 175, 175, 0.5);
    border: 0px solid rgba(100, 100, 100, 1);
}
.back-to-top .icon-container {
    display: block;
    margin: auto;
    width: 32px;
    height: 38px;
}
.back-to-top .up-arrow {
    position: relative;
    left: 1px;
    top: -7px;
}
.back-to-top img {
    display: block;
    margin: auto;
    width: 32px;
    height: 32px;
    opacity: 0.2;
}
.back-to-top:hover img,
.back-to-top:focus img{
    opacity: 0.8;
}


/* --------------- Contact Info Box   ------------------------------------*/

#contact-info-box {
    position: relative;
    top: 0px;
    left: 0px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    background: rgba(255,255,255,0.1);
    border: 0px solid red;     
}
#contact-info-box td {
    padding: 10px;
    border: 0px solid blue;   
}
#contact-info-box .info-category {
    vertical-align: top;
    padding-left: 0px;
    border: 0px solid green;     
}
#contact-info-box .info {
    vertical-align: bottom;
    padding-left: 0px;
    padding-right: 0px;
    border: 0px solid pink;     
}
#contact-info-box .no-br {
    white-space: nowrap;
}

/* ---------------  Maps  ------------------------------------------------*/

#kislabos-map {
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    

    height: 100%;
    width: 100%;

    background: #fff;
    background: rgba(255,255,255,0.1);

    border: 0px solid green;     
}
.kislabos-map {
    display: block;

    position: absolute;
    top: 0px;
    left: 0px;
    
    margin: 0px;

    height: 100%;
    width: 100%;
    
    border: 2px solid #ccc;     
}

#kislabos-map, .kislabos-map {
    height: 300px;
}
@media screen and (min-width:768px) {
    #kislabos-map, .kislabos-map {
        height: 400px;
    }
}

/* ---------------  Map buttons  -----------------------------------------*/

#kislabos-map-buttons {
	/* In Safari the next line is the only effective */
    display: -webkit-box;
	display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* In Safari the next two line is ineffective */
    -webkit-justify-content: space-between;
    justify-content: space-between;

    margin: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 0px;

    background: #fff;
    background: rgba(255,255,255,0.1);

    border: 0px solid red;     
}
#kislabos-map-buttons > button {
/*
    align-items: flex-start;
    -webkit-align-items: center;
    -webkit-box-pack: end;
    -webkit-box-align: start;
    -webkit-box-align: strech;
*/    
    
    display: block;
    height: 48px;
    width: 78px;
    padding: 0px; 
    border: 0px solid black;
}
@media screen and (min-width:500px) {
    #kislabos-map-buttons > button {
        height: 64px;
        width: 104px;
    }
}
#kislabos-map-buttons > button:hover,
#kislabos-map-buttons > button:focus {
    opacity: 1;
    padding: 0px; 
    border: 2px solid rgba(159, 0, 0, 1);
}    
#kislabos-map-buttons > button:active {
    opacity: 1;
    padding: 0px; 
    border: 2px solid rgba(159, 0, 0, 1);
}    
#kislabos-map-buttons > button:visited {
    opacity: 0,5;
    padding: 0px; 
    border: 2px solid rgba(159, 0, 0, 0.7);
}    
.map-button-img {
    height: 44px;
    width:  74px;
    opacity: 0.5;
    border: 2px solid rgba(100, 100, 100, 0.5);
}
@media screen and (min-width:500px) {
    .map-button-img {
        height: 60px;
        width: 100px;
    }
}
.map-button-img:hover, 
.map-button-img:focus {
    opacity: 0.7;
    border: 2px solid rgba(159, 0, 0, 0.7);
}
.map-button-img:active {
    opacity: 1;
    border: 2px solid rgba(159, 0, 0, 1);
}

/* --------------- Welcome Row  ------------------------------------------*/

#welcome-logo {
    margin-bottom: 10px;
}

/* --------------- Cake Row  ------------------------------------------*/

#cake-menu-left-image {
    margin-bottom: 10px;
}
#cake-menu-right-image {
    margin-bottom: 10px;
}

#cake-row {
    /* display: none */
} 
/* --------------- Order Row  ------------------------------------------*/

#registration-tile {
    margin-bottom: 10px; 
}
#lunch-order-tile {
    margin-bottom: 10px; 
}
#order-image {
    margin-bottom: 10px; 
}

/* --------------- Carousel   --------------------------------------*/

.carousel {
    margin-top: 15px;    
}

/* --------------- Below Carousel   --------------------------------------*/

/* Bootstrap
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
*/
/* Business Casual
.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}
*/

.this-week-button {
    /* display: none; */
    width: 150px;
    margin: 10px; 
    font-size: 1.3em;
}
.next-week-button {
    /* display: none; */
    width: 150px;
    margin: 10px; 
    font-size: 1.3em;
}

.brand-before{
    margin: 15px 0;
    text-transform: none;
}
.brand-name {
    margin: 0;
    font-size: 4em;
    text-transform: none;
}
.tagline-divider {
    display: none;
    margin: 3px auto 3px;
    max-width: 250px;
    border-color: #999999;
}
.brand-after {
    text-transform: none;
}
.brand-after {
    text-transform: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* -------?------- Business Casual maradék --------------?----------------*/

.box {

    margin-bottom: 20px;
    padding: 0px;
    background: #fff;
    background: rgba(255,255,255,0.9);
    border: 0px solid green;        /* BC: -    BS: - */
    border-radius: 8px;             /* BC: -    BS: - */
}

@media screen and (min-width:500px) {
    .box {
        padding: 15px;
    }
}

.intro-text h2 {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
    color: #52322e;
}

footer {
    background: #fff;
    background: rgba(218,165,32 ,0.9);
    border: 0px solid blue;         /* BC: -    BS: - */
    border-radius: 8px;             /* BC: -    BS: - */
    margin-right: auto;             /* BC: -    BS: - */
    margin-left: auto;              /* BC: -    BS: - */

}

footer p {
    margin: 0;
    padding: 10px 0;
}

@media screen and (min-width:768px) {
    .top-divider {
        margin-top: 0;
    }

}
/*
@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }
}
*/    

/* --------------- My System Information Panel ---------------------------*/

#sysInfoPanel {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 50%;
    position: fixed;
    bottom: 0;
    right: 0;
    color: #FF8C00;
    background-color: #8B0000;
    background-clip: padding-box;
    border-radius: 5px;
    opacity : 0.5;
    padding: 1px 5px;
    margin: 5px;
}

/* --------------- Not used class  ---------------------------------------*/

/*
.nav-favicon-small {}
.nav-favicon-big {}
.sysInfoPanel {}
*/