/*!

Operátor ICT a.s. 2018

 */

/* COLORS 

(RGB)
(HSL)

Tyrkysová
#20BDBE
180, 71 ,44

Modrá
#2C77BC
209, 62, 45

Fialová
#583E7A
266, 33, 36

Růžová
#D14B8A
332, 59, 56

Hrášková
#00B31F
130, 100, 35

Zelená
#02640D
127, 96, 20

*/

/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    text-rendering: optimizeLegibility;
  }
  
  /* Webfont: Lato-BlackItalic */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 900;
    text-rendering: optimizeLegibility;
  }
  
  /* Webfont: Lato-Bold */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
  }
  
  /* Webfont: Lato-BoldItalic */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    text-rendering: optimizeLegibility;
  }
  /* Webfont: Lato-Italic */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
  }
  /* Webfont: Lato-Regular */@font-face {
    font-family: 'LatoWeb';
    src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
  }
  
  
  body {
    font-family: 'LatoWeb', 'Times New Roman', serif;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    width: 100%;
    margin-top: 0px;

  }
  
  
   a, body {
    color: #333
  }
  
  .navbar-custom .nav li a, .navbar-custom .navbar-brand, h1, h2, h3, h4,
  h5, h6 {
    font-weight: 900;
  }
  
  .caption, footer .copyright {
    text-align: center
  }
  
  
  .affix-top {
    position: relative;
  }
  
  .affix {
    top: 0px;
  }
  
  .affix-bottom {
    position: absolute;
  }
  
  .intro-header .page-heading .subheading, .intro-header .post-heading .subheading,
  .intro-header .site-heading .subheading, .navbar-custom, h1, h2, h3,
  h4, h5, h6 {
    font-family: 'LatoWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
  }
  
  p {
    line-height: 1.2;
    margin: 30px 0
  }
  
  p a {
    text-decoration: underline
  }
  
  a:focus, a:hover {
    color: hsl(209, 62%, 45%);
  }
  
  section#home a:focus,
  section#home a:hover,
  section#data a:focus,
  section#data a:hover {
    color: hsl(209, 62%, 45%);
  }
  section#community a:focus,
  section#community a:hover {
    color: hsl(180, 71%, 44%);
  }
  section#apps a:focus,
  section#apps a:hover {
    color: hsl(332, 59%, 56%);
  }
  section#smartprague a:focus,
  section#smartprague a:hover {
    color: hsl(266, 33%, 36%);
  }
  section#news a:focus,
  section#news a:hover {
    color: hsl(266, 33%, 36%);
  }
  section#api a:focus,
  section#api a:hover {
    color: hsl(266, 33%, 36%);
  }
  section#user a:focus,
  section#user a:hover {
    color: hsl(130, 100%, 35%);
  }
  
  
 
  
  blockquote {
    color: #777;
    font-style: italic
  }
  
  hr.small {
    max-width: 100px;
    margin: 15px 0px;
    border-width: 4px;
    border-color: #fff
  }
  
  .navbar-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3
  }
  
  .navbar-custom .navbar-brand {
    color: #fff;
    padding: 10px 20px;
  }
  
  .navbar-custom .navbar-brand img {
    height: 50px ;
    width: auto;
  }
  
  .navbar-custom .navbar-brand img.onwhite-background {
    display: block;
  }
  .navbar-custom .navbar-brand img.onblack-background {
    display: none;
  }
  
  .navbar-custom .navbar-header .navbar-toggle {
    color: #777;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 21px;
    margin-bottom: 17px;
  }
  
  .navbar-custom .nav li a {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px
  }
  
  @media only screen and (min-width:768px) {
    .navbar-custom {
        background: 0 0;
        border-bottom: 1px solid transparent
    }
  
    .navbar-custom .navbar-brand {
        color: #fff;
        padding: 10px 20px;
    }
  
    .navbar-custom .navbar-brand:focus, .navbar-custom .navbar-brand:hover {
        color: rgba(255, 255, 255, 1)
    }
  
    .navbar-custom .navbar-brand img.onwhite-background {
      display: none;
    }
    .navbar-custom .navbar-brand img.onblack-background {
      display: block;
    }
  
    .navbar-custom .nav li a {
        color: #fff;
        padding: 4px 15px;
       /* padding: 10px;
        padding-top: 30px;
        padding-bottom: 25px;
  */
    }
  
    .navbar-custom .nav-link-background {
      background: rgba(255,255,255,0.15);
      padding: 7px 12px;
      margin: 0px -7px;
      border-radius: 20px;
    }
  
    .navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover {
        color: rgba(255, 255, 255, .8)
    }
  }
  @media only screen and (min-width:991px) {
    .navbar-custom .nav li a {
      padding: 4px 15px;
     /* padding: 20px;
      padding-top: 30px;
      padding-bottom: 25px;*/
    }
  
    .navbar-custom {
        -webkit-transition: background-color .3s;
        -moz-transition: background-color .3s;
        transition: background-color .3s;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
  
    .navbar-custom.is-fixed {
        position: fixed;
        top: -76px;
        background-color: rgba(255, 255, 255, .9);
        border-bottom: 1px solid #f2f2f2;
        -webkit-transition: -webkit-transform .3s;
        -moz-transition: -moz-transform .3s;
        transition: transform .3s
    }
  
    .navbar-custom.is-fixed .nav-link-background {
      background: none;
      padding: 7px 12px;
      margin: 0px -7px;
      border-radius: 20px;
    }
  
    .navbar-custom.is-fixed .navbar-brand {
        color: #555
    }
  
    .navbar-custom.is-fixed .navbar-brand:focus, .navbar-custom.is-fixed .navbar-brand:hover {
        color: #000;
    }
  
    .navbar-custom.is-fixed .nav li a {
        color: #555
    }
  
    .navbar-custom.is-fixed .nav li a:focus, .navbar-custom.is-fixed .nav li a:hover {
        color: #000;
    }
  
  
    .navbar-custom.is-visible {
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
  
    .navbar-custom .navbar-brand img.onwhite-background {
      display: none;
    }
    .navbar-custom .navbar-brand img.onblack-background {
      display: block;
    }
    
    .navbar-custom.is-fixed .navbar-brand img.onwhite-background {
      display: block;
    }
    .navbar-custom.is-fixed .navbar-brand img.onblack-background {
      display: none;
    }
  
  }
  
  /* NAVBAR-SIDE CUSTOM */
  
  
  .navbar-side {
    margin: 30px 0px;
    font-size: 18px;
  }
  .navbar-side.affix, .navbar-side.affix-bottom {
    padding-top: 100px;
  }
  .navbar-side h1 {
    margin-top: 0px;
  }
  .navbar-side.nav a {
    background: 0 0;
    padding: 15px 0px;
    font-variant-caps: all-small-caps;
    background: none;
  }
  
  .navbar-side.nav li a:hover,
  .navbar-side.nav li a:focus {
    background: none;
  }
  
  .navbar-side.nav .active {
    font-weight: bold;
  }
  
  .navbar-side.nav .nav {
    display: none;
  }
  
  .navbar-side.nav .active .nav {
    display: block;
  }
  
  .navbar-side.nav .nav a {
    font-weight: normal;
    font-size: .85em;
    padding: 5px 0px 5px 20px;
    border-left: 2px solid rgb(201, 201, 201);
    background: none;    
    display: block;
  }




  
  .navbar-side.nav .nav .active a,
  .navbar-side.nav .nav .active:hover a,
  .navbar-side.nav .nav .active:focus a {
    font-weight: bold;
    border-left: 2px solid black;
    background: none;
  }
  
  /* CUSTOM HEADINGS */
  
  h1, h2, h3 {
    margin-top: 50px;
    margin-bottom: 20px;
  }
  
  /* INTRO HEADER */
  
  .intro-header {
    background: hsl(209, 62%, 35%);
    background: linear-gradient(to top right, hsl(209, 62%, 35%), hsl(209, 62%, 55%));
    margin-bottom: 0px;
    min-height: 75px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
  }
  
  .intro-header .row div:first-child {
    z-index: 2;
  }
  
  .intro-header .page-heading, .intro-header .post-heading, .intro-header .site-heading {
    padding: 100px 0 50px;
    color: #fff
  }
  
  .intro-header .page-heading h1, .intro-header .site-heading h1 {
    margin-top: 0;
    font-size: 50px
  }
  
  .intro-header .page-heading .subheading, .intro-header .site-heading .subheading {
    font-size: 24px;
    line-height: 1.1;
    display: block;
    font-weight: 900;
    margin: 10px 0 0
  }
  
  @media only screen and (min-width:768px) {
    .intro-header .page-heading, .intro-header .post-heading, .intro-header .site-heading {
        padding: 150px 0;
    }
  
    .intro-header .page-heading h1, .intro-header .site-heading h1 {
        font-size: 80px
    }
  }
  
  .intro-header .post-heading h1 {
    font-size: 35px
  }
  
  .intro-header .post-heading .meta, .intro-header .post-heading .subheading {
    line-height: 1.1;
    display: block
  }
  
  .intro-header .post-heading .subheading {
    font-size: 24px;
    margin: 10px 0 30px;
    font-weight: 600
  }
  
  .intro-header .post-heading .meta a {
    color: #fff
  }
  
  @media only screen and (min-width:768px) {
    .intro-header .post-heading h1 {
        font-size: 55px
    }
  
    .intro-header .post-heading .subheading {
        font-size: 30px
    }
  }
  
  /* ARTICLE */
  
  article {
    padding: 50px 0px;
  }
  article .panel.panel-data { 
    padding: 50px 30px;
  }
  
  /* CUSTOM ARTICLE ELEMENTS */
  section#news article h1 {
    margin-top: 10px;  
  }
  
  h1.section-heading  {
    margin-top: 10px;
  }
  
  .dataset-box {
    margin: 30px -30px;
    padding: 30px;
    background: #f8f8f8;
  }
  .dataset-box table thead tr th {
    border-bottom: 1px solid #adadad;
    color: #adadad;
    font-weight: 900;
    font-variant-caps: all-small-caps;
  }
  
  /* CUSTOM POPOVER */
  
  .popover {
    border: none;
    border-radius: 20px;
    -webkit-box-shadow: 0 2px 30px rgba(0,0,0,0.1);
    box-shadow: 0 2px 30px rgba(0,0,0,0.1);
  }
  .popover.top>.arrow {
    border-color: rgba(0,0,0,0);
  }
  
  
  /* POST */
  
  .post-preview > a {
    color: #333
  }
  
  .post-preview > a:focus, .post-preview > a:hover {
    text-decoration: none;
    color: #0085A1
  }
  
  .post-preview > a > .post-title {
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 10px
  }
  
  .post-preview > a > .post-subtitle {
    margin: 0 0 10px;
    font-weight: 300
  }
  
  .post-preview > .post-meta {
    color: #777;
    font-size: 18px;
    font-style: italic;
    margin-top: 0
  }
  
  .post-preview > .post-meta > a {
    text-decoration: none;
    color: #333
  }
  
  .post-preview > .post-meta > a:focus, .post-preview > .post-meta > a:hover {
    color: #0085A1;
    text-decoration: underline
  }
  
  @media only screen and (min-width:768px) {
    .post-preview > a > .post-title {
        font-size: 36px
    }
  }
  
  .btn, .pager li > a, .pager li > span {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px
  }
  
  .caption {
    font-size: 14px;
    padding: 10px;
    font-style: italic;
    margin: 0;
    display: block;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
  }
  
  footer {
    font-size: inherit;
  }
  
  footer a:focus, footer a:hover {
    color: #333;
  }
  
  footer .list-inline {
    margin: 0;
    padding: 0
  }
  footer h4 {
    font-variant-caps: all-small-caps;
  }
  footer .copyright {
    font-size: 14px;
    margin-bottom: 0
  }
  .footer-brands {
    background-color: #f8f8f8;
  }
  .footer-brands img {
    margin: 1em 2em;
  }
  @media only screen and (max-width:768px) {
    .footer-brands img {
      margin: 0.5em 1.5em;
    }
  }
  
  
  .floating-label-form-group {
    font-size: 14px;
    position: relative;
    margin-bottom: 0;
    padding-bottom: .5em;
    border-bottom: 1px solid #eee
  }
  
  .floating-label-form-group input, .floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 1.5em;
    background: 0 0;
    box-shadow: none !important;
    resize: none
  }
  
  .floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease
  }
  
  .floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee
  }
  
  .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1
  }
  
  .floating-label-form-group-with-focus label {
    color: #0085A1
  }
  
  form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee
  }
  
  .btn {
    font-size: 14px;
    border-radius: 0;
    padding: 15px 25px
  }
  
  .btn-lg {
    font-size: 16px;
    padding: 25px 35px
  }
  
  .btn-default:focus, .btn-default:hover {
    background-color: #0085A1;
    border: 1px solid #0085A1;
    color: #fff
  }
  
  .pager {
    margin: 20px 0 0
  }
  
  .pager li > a, .pager li > span {
    font-size: 14px;
    padding: 15px 25px;
    background-color: #fff;
    border-radius: 0
  }
  
  .pager li > a:focus, .pager li > a:hover {
    color: #fff;
    background-color: #0085A1;
    border: 1px solid #0085A1
  }
  
  .pager .disabled > a, .pager .disabled > a:focus, .pager .disabled > a:hover,
  .pager .disabled > span {
    color: #777;
    background-color: #333;
    cursor: not-allowed
  }
  
  ::-moz-selection {
    color: #fff;
    text-shadow: none;
    background: #333
  }
  
  ::selection {
    color: #fff;
    text-shadow: none;
    background: #333
  }
  
  img::selection {
    color: #fff;
    background: 0 0
  }
  
  img::-moz-selection {
    color: #fff;
    background: 0 0
  }
  
  /* CUSTOM ELEMENTS */
  
  .panel {
    margin-bottom: 30px;
    background-color: #fff;
    border: 0px solid transparent;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 30px rgba(0,0,0,0.1);
    box-shadow: 0 2px 30px rgba(0,0,0,0.1);
  }
  
  .panel.panel-topic {
  
  }
  .panel.panel-topic .panel-heading {
    padding: 0;
    max-height: 120px;
    overflow: hidden;
  }
  .panel.panel-topic .panel-body h3 {
    margin: 5px 0px 5px;
  }
  
  .panel.panel-post {
  
  }
  .panel.panel-post .panel-heading {
    padding: 0;
    max-height: 120px;
    overflow: hidden;
  }
  .panel.panel-post .panel-body a {
    text-decoration: none;
  }
  
  
  /* CUSTOM FORMS */
  
  .form-group input, .form-group textarea {
    padding: 10px 25px;
    border-radius: 20px;
    border: none;
    background: rgb(248, 248, 248);
    color: #333;
    font-weight: bold;
    height: auto;
    transition-duration: .2s;
  }
  .form-group input:focus, .form-group textarea:focus {
    border-color: none;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: rgb(228, 228, 228);
  }
  .form-group input::placeholder, .form-group textarea::placeholder { 
    color: rgb(155, 155, 155);
  }
  
  section#contact-us {
    padding: 20px 0px;
    color: white;
  }
  section#contact-us hr {
    margin: 15px auto;
  }
  section#form {
    margin-top: 30px;
  }
  section#contact-us .form-group input, section#contact-us .form-group textarea {
    padding: 10px 25px;
    border-radius: 20px;
    border: none;
    background: rgba(255,255,255,0.25);
    color: white;
    font-weight: bold;
    height: auto;
    transition-duration: .2s;
  }
  section#contact-us .form-group input:focus, section#contact-us .form-group textarea:focus {
    border-color: none;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: rgba(255,255,255,0.5);
  }
  section#contact-us .form-group input::placeholder, section#contact-us .form-group textarea::placeholder { 
    color: rgba(255,255,255,1);
  }
  section#contact-us .form-group textarea { 
    height: 95px;
  }
  
  
  /* CUSTOM BUTTONS */
  .btn {    
    font-size: 14px;
    color: white;
    background: hsl(209, 62%, 45%);
    border-radius: 14px;
    line-height: 14px;
    padding: 5px 25px 3px;
    border: 2px solid hsl(209, 62%, 45%);
  }
  .btn:hover {
    color: white;
  }
  .btn-xs {
    font-size: 10px;
    border-radius: 17px;
    padding: 2px 5px;
  }
  .btn-md {
    font-size: 12px;
    border-radius: 17px;
    padding: 5px 10px;
  }
  .btn-lg {
    font-size: 16px;
    border-radius: 20px;
    padding: 10px 25px 9px;
    line-height: 16px;
  }
  .btn.btn-outline {
    color: hsl(209, 62%, 45%);
    background: white;
    border: 2px solid hsl(209, 62%, 45%);
    transition-duration: .2s;
  }
  .btn.btn-outline:hover {
    color: white!important;
    background: hsl(209, 62%, 35%);
    border: 2px solid hsl(209, 62%, 35%);
  }
  .btn.btn-white {
    color: hsl(209, 62%, 45%);
    background: white;
    border: 2px solid white;
  }
  .btn.btn-white:hover {
    color: hsl(209, 62%, 35%);
    background: white;
    border: 2px solid white
  }
  
  section#home .btn,
  section#data .btn {
    background-color: hsl(209, 62%, 45%);
    border-color: hsl(209, 62%, 45%);
  }
  section#home .btn.btn-outline,
  section#data .btn.btn-outline {
    background-color: white;
    color: hsl(209, 62%, 45%);
    border-color: hsl(209, 62%, 45%);
  }
  section#home .btn.btn-outline:hover,
  section#data .btn.btn-outline:hover {
    background: hsl(209, 62%, 35%);
    border-color: hsl(209, 62%, 35%);
  }
  section#home .btn-white,
  section#data .btn.btn-white {
    background: white;
    color: hsl(209, 62%, 45%);
  }
  section#home .btn.btn-white:hover,
  section#data .btn.btn-white:hover {
    color: hsl(209, 62%, 35%);
    border-color: hsl(209, 62%, 35%);
  }
  
  section#community .btn {
    background-color: hsl(180, 71%, 44%);
    border-color: hsl(180, 71%, 44%);
  }
  section#community .btn.btn-outline {
    background-color: white;
    color: hsl(180, 71%, 44%);
    border-color: hsl(180, 71%, 44%);
  }
  section#community .btn.btn-outline:hover {
    background: hsl(180, 71%, 34%);
    border-color: hsl(180, 71%, 34%);
  }
  section#community .btn.btn-white {
    background: white;
    color: hsl(180, 71%, 44%);
  }
  section#community .btn.btn-white:hover {
    color: hsl(180, 71%, 34%);
    border-color: hsl(180, 71%, 34%);
  }
  
  
  section#apps .btn {
    background-color: hsl(332, 59%, 56%);
    border-color: hsl(332, 59%, 56%);
  }
  section#apps .btn.btn-outline {
    background-color: white;
    color: hsl(332, 59%, 56%);
    border-color: hsl(332, 59%, 56%);
  }
  section#apps .btn.btn-outline:hover {
    background: hsl(332, 59%, 46%);
    border-color: hsl(332, 59%, 46%);
  }
  section#apps .btn.btn-white {
    background: white;
    color: hsl(332, 59%, 56%);
  }
  section#apps .btn.btn-white:hover {
    border-color: hsl(332, 59%, 46%);
    color: hsl(332, 59%, 46%);
  }
  
  section#api .btn {
    background-color: hsl(266, 33%, 36%);
    border-color: hsl(266, 33%, 36%);
  }
  section#api .btn.btn-outline {
    background-color: white;
    color: hsl(266, 33%, 36%);
    border-color: hsl(266, 33%, 36%);
  }
  section#api .btn.btn-outline:hover {
    background: hsl(266, 33%, 0%);
    border-color: hsl(266, 33%, 0%);
  }
  section#api .btn.btn-white {
    background: white;
    color: hsl(266, 33%, 36%);
  }
  section#api .btn.btn-white:hover {
    border-color: hsl(266, 33%, 0%);
    color: hsl(266, 33%, 0%);
  }
  
  
  section#user .btn {
    background-color: hsl(130, 100%, 35%);
    border-color: hsl(130, 100%, 35%);
  }
  section#user .btn.btn-outline {
    background-color: white;
    color: hsl(130, 100%, 35%);
    border-color: hsl(130, 100%, 35%);
  }
  section#user .btn.btn-outline:hover {
    background: hsl(130, 100%, 25%);
    border-color: hsl(130, 100%, 25%);
  }
  section#user .btn.btn-white {
    background: white;
    color: hsl(130, 100%, 35%);
  }
  section#user .btn.btn-white:hover {
    border-color: hsl(130, 100%, 25%);
    color: hsl(130, 100%, 25%);
  }
  
  /* GRADIENTS CUSTOM */
  .background-gradient {
    background: linear-gradient(to top right, hsl(209, 62%, 35%), hsl(209, 62%, 55%));
  }
  section#home header,
  section#home .background-gradient,
  section#data header,
  section#data .background-gradient {
    background: linear-gradient(to top right,hsl(209, 62%, 35%), hsl(209, 62%, 55%));
    
    background: url(../assets/graphics/golemio_slider_top_home.png) top center;
 
    background-size: cover;
  }
  section#community header, 
  section#community .background-gradient {
    background: linear-gradient(to top right, hsl(180, 71%, 34%), hsl(180, 71%, 54%));
  }
  section#news header,
  section#news .background-gradient {
    background: linear-gradient(to top right, hsl(266, 33%, 26%), hsl(266, 33%, 46%));
  }
  section#apps header,
  section#apps .background-gradient {
    background: linear-gradient(to top right, hsl(332, 59%, 46%), hsl(332, 59%, 66%));
  }
  section#api header,
  section#api .background-gradient {
    background: linear-gradient(to top right, hsl(266, 33%, 0%), hsl(266, 33%, 36%));
  }
  section#user header,
  section#user .background-gradient {
    background: linear-gradient(to top right, hsl(130, 100%, 25%), hsl(130, 100%, 45%));
  }
  
  /* HEADERS CUSTOM */
  .intro-header > .container > .row {
    position: relative;
  }
  .picture-header {
    background-image: url('../assets/images/ipad.png');
    width: 500px;
    height: 300px;
    background-size:  cover;
    background-repeat:  no-repeat;
    background-position: 0px 0;
    position:  absolute;
    bottom: 0;
    right: 0px;
    z-index: 1;
    overflow:  visible;
  }
  section#home .picture-header {
    background-image: url('../assets/graphics/PragueData.svg');
    width: 508px;
    height: 299px;
    bottom: 24px;
    right: 6%;
  }
  section#data .picture-header {
    background-image: url('../assets/graphics/DataGear.svg');
    width: 507px;
    height: 323px;
    background-size: cover;
    bottom: 0px;
    right: 2%;
  }
  section#news .picture-header {
    background-image: url('../assets/graphics/Megaphone.svg');
    width: 508px;
    height: 342px;
    bottom: 24px;
    right: 10%;
  }
  section#community .picture-header {
    background-image: url('../assets/graphics/Community.svg');
    width: 439px;
    height: 288px;
    bottom: 40px;
    right: 5%;
  }
  section#smartprague .picture-header {
    background-image: url('../assets/graphics/SmartPrague.png');
    width: 361px;
    height: 329px;
    bottom: 20px;
    right: 30px;
  }
  section#apps .picture-header {
    background-image: url('../assets/images/iphone_mojepraha.png');
    width: 315px;
    height: 397px;
    bottom: 0;
    right: 90px;
  }
  
  
  /* ARTICLE CUSTOM */
  
  
  
  /* GRAPHICS ANIMATION */
  
  
  .background-video {
      position: absolute;
      left: 0;
      bottom: 0;
      min-width: 100%; 
      min-height: 100%;
  }
  
  /* IFRAME POWERBI */
  .powerbi-iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 50%;
  }
  .powerbi-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .powerbi-iframe-wrapper.powerbi-iframe-wrapper-1-1 {
    padding-top: calc(100% + 56px);
  }
  .powerbi-iframe-wrapper.powerbi-iframe-wrapper-2-1 {
    padding-top: calc(50% + 56px);
  }
  .powerbi-iframe-wrapper.powerbi-iframe-wrapper-letter {
    padding-top: calc(129.4117647058824% + 56px);
  }
  
  
  /* APP CUSTOM */
  .panel.panel-app .panel-heading img {
    max-width: 180px;
    max-height: 180px;
  }
  .panel.panel-app .panel-body h2 {
    margin: 0 0 10px 0;
  }
  .panel.panel-app .panel-body img.google-badge {
    max-width: 136px;
  }
  
  /* API CUSTOM */
  
  #api .panel.panel-data ul p {
    margin: 5px 0px;
  }
  #api .panel.panel-data .permalink {
    display: none;
  }
  pre {
    color: #ea7291;
    background-color: #333;
    border: none; 
    border-radius: 10px;
  }
  
  
  /* BOOTSTRAP CUSTOM PADDING AND MARGIN CLASSES */
  .padding-xs { padding: .25em; }
  .padding-sm { padding: .5em; }
  .padding-md { padding: 1em; }
  .padding-lg { padding: 1.5em; }
  .padding-xl { padding: 3em; }
  
  .padding-x-xs { padding: .25em 0; }
  .padding-x-sm { padding: .5em 0; }
  .padding-x-md { padding: 1em 0; }
  .padding-x-lg { padding: 1.5em 0; }
  .padding-x-xl { padding: 3em 0; }
  
  .padding-y-xs { padding: 0 .25em; }
  .padding-y-sm { padding: 0 .5em; }
  .padding-y-md { padding: 0 1em; }
  .padding-y-lg { padding: 0 1.5em; }
  .padding-y-xl { padding: 0 3em; }
  
  .padding-top-xs { padding-top: .25em; }
  .padding-top-sm { padding-top: .5em; }
  .padding-top-md { padding-top: 1em; }
  .padding-top-lg { padding-top: 1.5em; }
  .padding-top-xl { padding-top: 3em; }
  
  .padding-right-xs { padding-right: .25em; }
  .padding-right-sm { padding-right: .5em; }
  .padding-right-md { padding-right: 1em; }
  .padding-right-lg { padding-right: 1.5em; }
  .padding-right-xl { padding-right: 3em; }
  
  .padding-bottom-xs { padding-bottom: .25em; }
  .padding-bottom-sm { padding-bottom: .5em; }
  .padding-bottom-md { padding-bottom: 1em; }
  .padding-bottom-lg { padding-bottom: 1.5em; }
  .padding-bottom-xl { padding-bottom: 3em; }
  
  .padding-left-xs { padding-left: .25em; }
  .padding-left-sm { padding-left: .5em; }
  .padding-left-md { padding-left: 1em; }
  .padding-left-lg { padding-left: 1.5em; }
  .padding-left-xl { padding-left: 3em; }
  
  .margin-xs { margin: .25em; }
  .margin-sm { margin: .5em; }
  .margin-md { margin: 1em; }
  .margin-lg { margin: 1.5em; }
  .margin-xl { margin: 3em; }
  
  .margin-x-xs { margin: .25em 0; }
  .margin-x-sm { margin: .5em 0; }
  .margin-x-md { margin: 1em 0; }
  .margin-x-lg { margin: 1.5em 0; }
  .margin-x-xl { margin: 3em 0; }
  
  .margin-y-xs { margin: 0 .25em; }
  .margin-y-sm { margin: 0 .5em; }
  .margin-y-md { margin: 0 1em; }
  .margin-y-lg { margin: 0 1.5em; }
  .margin-y-xl { margin: 0 3em; }
  
  .margin-top-xs { margin-top: .25em; }
  .margin-top-sm { margin-top: .5em; }
  .margin-top-md { margin-top: 1em; }
  .margin-top-lg { margin-top: 1.5em; }
  .margin-top-xl { margin-top: 3em; }
  
  .margin-right-xs { margin-right: .25em; }
  .margin-right-sm { margin-right: .5em; }
  .margin-right-md { margin-right: 1em; }
  .margin-right-lg { margin-right: 1.5em; }
  .margin-right-xl { margin-right: 3em; }
  
  .margin-bottom-xs { margin-bottom: .25em; }
  .margin-bottom-sm { margin-bottom: .5em; }
  .margin-bottom-md { margin-bottom: 1em; }
  .margin-bottom-lg { margin-bottom: 1.5em; }
  .margin-bottom-xl { margin-bottom: 3em; }
  
  .margin-left-xs { margin-left: .25em; }
  .margin-left-sm { margin-left: .5em; }
  .margin-left-md { margin-left: 1em; }
  .margin-left-lg { margin-left: 1.5em; }
  .margin-left-xl { margin-left: 3em; }

/*************************************************************MMMM */
  .navbar {
    /* border: none; */
     -webkit-box-shadow:none;
     box-shadow: none;
  }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  
color: #fff;
background-color: transparent;
  }
/*
  .navbar-custom .navbar-right li   {

  }*/
  .navbar-custom .navbar-right li a  {
    background: rgba(255,255,255,0.15);

    border-radius: 20px;
  }


@media (min-width: 768px){
  .navbar-nav > li {
      float: left;
      padding: 10px;
      padding-top: 24px;
      padding-bottom: 23px;
  }
  .navbar-nav {
    float: right;
    margin: 0;
  }
}

.navbar-side{

  max-width: 240px;
}


.panel-data p{
  text-align: justify;
}





.path-community a:focus,
.path-community a:hover {
  color: hsl(180, 71%, 44%);
}



.path-community .btn {
  background-color: hsl(180, 71%, 44%);
  border-color: hsl(180, 71%, 44%);
}
.path-community .btn.btn-outline {
  background-color: white;
  color: hsl(180, 71%, 44%);
  border-color: hsl(180, 71%, 44%);
}
.path-community .btn.btn-outline:hover {
  background: hsl(180, 71%, 34%);
  border-color: hsl(180, 71%, 34%);
}

.path-community header, 
.path-community .background-gradient {
  background: linear-gradient(to top right, hsl(180, 71%, 34%), hsl(180, 71%, 54%));
}


.page-node-type-oblast h1 {
  margin-top: 0px;
  font-size: 48px;
}

.page-node-type-blog h1 {
  margin-top: 0px;
  font-size: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #ddd;
}

.article .page-node-type-oblast h2 {
  border-top: 1px solid #DDD;
  padding-top: 30px;
  margin-top: 40px;
  font-size: 36px;
}

.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f8f8f8;
  border: 1px solid #e3e3e3;
  border-left: none;
  border-right: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.blog-detail H1 {
  margin-top:  0px;
  font-size:  48px;
  padding-bottom:  40px;
  border-bottom: 1px solid #ddd;

}
.blog-detail p {

  text-align: justify;


}
.footer-col h2, .footer-col h4 {
font-variant-caps: all-small-caps;
font-size: 18px;
}
.footer-col .nav>li>a{
  padding: 0px;
  color: #777;
  }
  .footer-col .nav>li>a:hover{
    padding: 0px;
    color: rgb(0, 0, 0);
    }

.footer-col .nav > li > a:focus, .footer-col .nav > li > a:hover{
  background-color: transparent;
}

@media (max-width: 991px) {
  .navbar-nav > li {
    padding-left: 5px;
    padding-right: 5px;
     
  }
  .navbar-custom .nav li a {
    padding: 4px 8px;
  }
}
article h1 {
  margin-top: 0px;
  font-size: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
article ol, article ul {
  margin-top: 0;
  margin-bottom: 2em;
}
.blog-detail .field--name-field-obrazek img{ border-radius: 6px;}



.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

.navbar-side {
max-width: 220px;
}

.btn {
font-size: 14px;
color: white;
background: hsl(209, 62%, 45%);
border-radius: 14px;
line-height: 14px;
padding: 5px 25px 3px;
border: 2px solid hsl(209, 62%, 45%);
text-decoration: none;
}

.blog-detail p.text-center {
text-align: center;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #000;
  background-color: transparent;
}
  
  @media (min-width: 768px) {
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: transparent;
}
  }
