/* HEADERS */

header { margin-top: 2rem; }

    h1,
    .h1 {
      font-size: 3.0rem;
      line-height: 1.5rem;
      font-weight: 600;
      color: #000;
    }

    h2,
    .h2 {
      font-size: 2.25rem;
      margin: 2.25rem 0;
      font-weight: 900;
      color: #000;
    }

    h3,
    .h3 {
      font-size: 1.375rem;
      font-weight: 700;
      margin: calc(1.3*1.375rem) 0 calc(.5*1.375rem);
      color: #000;
    }

    h4,
    .h4 {
      font-size: 1.125rem;
      font-weight: 900;
      margin: calc(1.3*1.125rem) 0 1.125rem;
      color: #000;
    }

    h5 {
      font-size: 1.125rem;
      color: #000;
      font-weight: 700;
    }

    h6 {
      font-size: 1.125rem;
      color: #000;
    }

    h1:first-child,
    .h1:first-child,
    h3:first-child,
    .h3:first-child,
    h2:first-child,
    .h2:first-child,
    h4:first-child,
    .h4:first-child,
    h5:first-child,
    .h5:first-child,
    h6:first-child,
    .h6:first-child{
      margin-top: 0;
    }

    .fs-1 {
      font-size: 3rem !important;
    }

    .fs-serif {
      font-family: serif;
    }

  .text-xl,   .text-xl p {          font-size: 1.25rem !important;
        line-height: 1.75rem !important;}

    /* paragraph settings */

    p {
      font-size: 1.125rem;
    }

    p>a:not(.btn) {
      text-decoration: underline;
    }

    strong {
      font-weight: bolder;
    }

    /* highlight is for text that needs to be larger and more visible */
    .highlight, blockquote {
      font-size: 2.25rem;
      font-weight: 700;
      line-height: 3rem;
      color: #4BC5E8;
    }

/* navbar */
.navbar {margin-top: 1.2rem;}

    /*LINKS*/

    a.nav-link {
      color: #000;
      webkit-transition: color .3s;
      transition: color .3s;
      text-transform: uppercase;
    }

    a.nav-link:hover {
      color: #000;
      webkit-transition: color .3s;
      transition: color .3s;
      text-decoration: underline;
    }

    a.nav-link.active {
      font-weight: 700;
    }

    /* lists */

    dl,
    ol,
    ul {
      padding-left: 20px;
    }

    ul.arrow-list {padding-left: 0;}

    ul.arrow-list li {
      list-style-type: none;
      background-image: url('/img/bullet-list-arrow.svg');
      background-position: left calc(0% + 4px);
      background-repeat: no-repeat;
      padding-left: 25px;
      margin-bottom: 8px;
    }

    /*other color options*/

    .red {
      color: #F01F1F;
    }

    .blue, a:not(.nav-link):not(.btn):not(p):not(.nav-item > a) {
      color: #056093;
    }

    .light-blue, footer a {
      color: #4BC5E8;
    }

    .gray {
      color: #95B0C6;
    }
    /* .invert - use this class when is used dark background */

    .invert *, .invert > .red, .invert > h2, .invert > .h2, .invert p {
      color: #fff;
    }

    .invert > .gray {
      color: #CFDAE6;
    }

/*-------------------------------------------*\
    BASIC STYLES
    \*-------------------------------------------*/

    body {
      font-size: 1.125rem;
      line-height: 1.75rem;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
      color: #000000;
      background-color: #f9f9ff;
    }

    img {
      max-width: 100%;
    }

/* Sekce služeb */
.services-section {
  padding-top: 6rem;
}

.services-section h1 {
  letter-spacing: 0.02em;
}

.service-card {
  /*background-color: #ffffff;*/
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.service-card h3 {
          font-size: 1.875rem;
        line-height: 2.25rem; font-weight: 500; color: #000; padding-top: 1rem;
}

.service-card p {
  font-size: 1.125rem;
        line-height: 1.75rem; font-weight: 300; color: #000;
}

.service-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

/* Listy uvnitř karet – decentní odrážky */
.service-list { font-size: 0.95rem;
  /*padding-left: 1.1rem;*/
}

.service-list li {
  margin-bottom: 0.25rem;
}

.service-card dl {
  padding-left: 0px;
}

.service-card-border-1 { 
  border-color: #002c9e !important; 
  background-image: url(/imgs//icons/file-text.svg);
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 7%;
  background-size: 3rem;
}
.service-card-border-2 { border-color: #4fb477 !important;
  background-image: url(/imgs//icons/scroll-text.svg);
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 7%;
  background-size: 3rem;
 }
.service-card-border-3 { border-color: #ffd04b !important;
  background-image: url(/imgs//icons/coins.svg);
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 7%;
  background-size: 3rem;
 }
.service-card-border-4 { border-color: #bd3939 !important;
  background-image: url(/imgs//icons/book-x.svg);
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 7%;
  background-size: 3rem;
 }
.service-card-border-5 { border-color: #000 !important;
  background-image: url(/imgs//icons/building-2.svg);
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 7%;
  background-size: 3rem;
 }
.service-card-border-6 { border-color: #e5e7eb !important; }

/*-------------------------------------------*\
    SECTIONS

    *just spacing
    \*-------------------------------------------*/

    section {
      /*padding-top: 6vh;*/
      padding-bottom: 6vh;
    }

    /*section:first-of-type {
      padding-top: 12vh;
    }

    section:last-of-type {
      padding-bottom: 12vh;
    }*/

    /* this doesn't affect link color in footer and header */
    section.invert p>a {
      color: #4BC5E8;
    }

/*-------------------------------------------*\
    SINGLE SECTIONS
    \*-------------------------------------------*/

    #tiskove-zpravy a>h3 {
      color: #056093;
    }

    #tiskove-zpravy a>p {
      color: #4c4c4c;
      margin-bottom: 30px;
    }

    #tiskove-zpravy a:hover {
      text-decoration: none;
      color: #4BC5E8;
    }

/*-------------------------------------------*\
    HEADER
    \*-------------------------------------------*/

    header {
      /*background-color: #fff;*/
    }

    header p {
      color: #000;
      margin-top: 40px;
    }

    header .container {
      padding-top: 2vw;
      padding-bottom: 2vw;
    }

    header.homepage .container {
      padding-bottom: 10vw;
    }

    header.homepage h1 {
      font-weight: 500;
    }

    header.invert p>a {
      color: #fff !important;
    }
/*-------------------------------------------*\
    NAVIGATION

    *override bootstrap .sticky-top
\*-------------------------------------------*/

.sticky-top {
    position: -webkit-sticky;
    position: fixed;
    min-width: 100%;
    top: 0;
    z-index: 1020;
}


/* blog posts */
.blog-post-box {
    margin-bottom: 2rem;
}

.blog-post-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;color: #000 !important;text-decoration: none; margin-bottom: 0.5rem;
}

.blog-post-title a {
    text-decoration: none !important;
    color: #000 !important;
}
.blog-post-title a:hover {
    text-decoration: underline !important;
}

.blog-post-text {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #71717a;
}

.blog-post-text a {
    text-decoration: none; color: #71717a;
}

.single-blog-post .blog-post-title {    font-size: 2.25rem;
    line-height: 2.5rem;color: #374151 !important;}

.single-blog-post .blog-post-date {    font-size: 1rem;
    line-height: 1.5rem;color: #71717a !important; font-weight: 300;}    

.single-blog-post .blog-post-content {    font-size: 1.125rem;
    line-height: 1.77777rem;color: #374151 !important; font-weight: 400;}    

/*-------------------------------------------*\
    FOOTER
    \*-------------------------------------------*/
.call-to-action {
    border-top: 1px solid #e5e7eb; 
    border-bottom: 1px solid #e5e7eb; 
  }



    footer {
      background: #fff;
      padding: 80px 0;
    }

/*-------------------------------------------*\
    BUTTONS

    *overwrites the default bootstrap classes
    \*-------------------------------------------*/

    /*primary*/
    .btn {
      font-weight: 700;
      font-size: 1.125rem;
      padding: .6rem 1.5rem;
      line-height: 1.125rem;
      white-space: unset;
    }

    .btn-primary {
      background-color: #056093;
      border: none;
    }

    .btn-primary:hover {
      background-color: #4BC5E8;
    }

    /*primary outline*/
    .btn-outline-primary {
      border: 2px solid #E4F1FD;
      color: #056093;
    }

    .btn-outline-primary:hover {
      background: #E4F1FD;
      border: 2px solid #E4F1FD;
      color: #056093;
    }

    .btn-outline-dark {background-color: #fff;}

    /*secondary*/
    .btn-secondary {
      background-color: #A6383A;
      border: none;
    }

    .btn-secondary:hover {
      background-color: #F05D5B;
    }

    /* carets in buttons */
    a.btn-primary:after,
    a.btn-secondary:after,
    a.btn-primary:hover:after,
    a.btn-secondary:hover:after {
      content: '';
      padding-right: 20px;
      background-repeat: no-repeat;
      background-position: right calc(100% - 5px);
    }

    a.btn-primary:after {
      background-image: url('/img/caret-lb.svg');
    }

    a.btn-secondary:after {
      background-image: url('/img/caret-dr.svg');
    }

    a.btn-primary:hover:after {
      background-image: url('/img/caret-db.svg');
    }

    a.btn-secondary:hover:after {
      background-image: url('/img/caret-lr.svg');
    }

    /* invert colors */
    .invert .btn-outline-primary {
      border: 2px solid #E4F1FD;
      color: #4BC5E8;
    }

    .invert .btn-outline-primary:hover {
      background: #E4F1FD;
      border: 2px solid #E4F1FD;
      color: #056093;
    }

/*-------------------------------------------*\
    SPACERS

    * use them when you need more space between divs
    * <div class="spacer-50"></div>
    \*-------------------------------------------*/


    .spacer-50 {
      margin: 25px 0;
    }

    .spacer-100 {
      margin: 50px 0;
    }

/*-------------------------------------------*\
    BOXES
    * .minus-box - container on homepage with minus margin
    * .shadow-box - every container with shadow
    * .minus-icon - used on homepage three icon box
    
    \*-------------------------------------------*/

    .minus-box {
      margin-top: -110px;
      background-color: #fff;
      padding: 60px 60px 0;
      border-radius: 5px;
    }

    .shadow-box {
      background-color: white;
      border-radius: 5px;
      padding: 20px 30px;
      -webkit-box-shadow: 0px 0px 50px 0px rgba(17, 62, 127, 0.1);
      -moz-box-shadow: 0px 0px 50px 0px rgba(17, 62, 127, 0.1);
      box-shadow: 0px 0px 50px 0px rgba(17, 62, 127, 0.1);
      border: none;
      width: 100%;
    }

    .minus-icon {
      margin-top: -50px;
    }

/*-------------------------------------------*\
    SPECIAL BACKGROUNDS
    \*-------------------------------------------*/

.bg-action {
      background-color: #002c9e;
    }

.bg-action2 {
      background-color: #4fb477;
    }

    /* Light gray backgroudnD color used for sections */
    .bg-gray {
      background-color: #F9F9F9 !important;
    }
    /* used for footer and main navigation - ideally use with class .invert */
    .bg-blue {
      background: rgb(5, 96, 147);
      background: -moz-linear-gradient(45deg, rgba(5, 96, 147, 1) 0%, rgba(4, 78, 124, 1) 100%);
      background: -webkit-linear-gradient(45deg, rgba(5, 96, 147, 1) 0%, rgba(4, 78, 124, 1) 100%);
      background: linear-gradient(45deg, rgba(5, 96, 147, 1) 0%, rgba(4, 78, 124, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#056093', endColorstr='#044e7c', GradientType=1);
    }

    .bg-blue .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    /* images on page: Služby */
    #infra {
      background-image: url('/img/infra.svg');
    }

    #kyber {
      background-image: url('/img/kyber.svg');
    }

    #ict {
      background-image: url('/img/ict.svg');
      background-position: center left;
      min-height: 450px;
    }

    #app {
      background-image: url('/img/app.svg');
      background-position: center left;
      height: 670px;
    }

    #infra,
    #kyber {
      background-position: center right;
      height: 670px;
    }

/*-------------------------------------------*\
    MEDIA QUERIES
    
    *bootsrap queries
    \*-------------------------------------------*/

    /* LARGER THAN x */

    /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
    @media (min-width: 768px) {
      .card-columns {
        column-count: 2;
      }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
      .card-columns {
        column-count: 3;
      }
      .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
      }
      /*czech map on page: O nás */
      .bg-cze:before {
        background-image: url('/img/cze.png');
        background-repeat: no-repeat;
        content: '';
        position: absolute;
        left: 55%;
        top: 580px;
        height: 710px;
        width: 45%;
        z-index: -1;
        background-size: cover;
      }
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      .card-columns {
        column-count: 3;
      }
    }

    /* SMALLER THAN x */

 /* Large devices (desktops, less than 1200px)*/
    @media (max-width: 1199.98px) {
      #infra {
        background-image: url('/img/infra-930.svg') !important;
      }

      #kyber {
        background-image: url('/img/kyber-930.svg') !important;
      }

      #app {
        background-image: url('/img/app-930.svg') !important;
      }

      #ict {
        background-image: url('/img/ict-930.svg') !important;
      }
    }

    /* Medium devices (tablets, less than 992px)*/
    @media (max-width: 991.98px) {

      .shadow-box {
        padding: 20px;
      }

      #infra {
        background-image: url('/img/infra-690.svg') !important;
      }

      #kyber {
        background-image: url('/img/kyber-690.svg') !important;
        height: 700px;
      }

      #app {
        background-image: url('/img/app-690.svg') !important;
      }

      #ict {
        background-image: url('/img/ict-690.svg') !important;
      }
    }


    /* Small devices (landscape phones, less than 768px)*/
    @media (max-width: 767.98px) {
      .shadow-box {
        padding: 10px;
      }

      .minus-icon {
        margin-top: 0px;
      }

      .nav-link {
        padding: 1rem 2rem;
        font-size: 1.5rem;
      }

      .nav-item:first-child {
        margin-top: 1rem;
      }

      .nav-item:last-child {
        margin-bottom: 1rem;
      }

      #infra,
      #kyber,
      #app,
      #ict {
        background-image: none !important;
        height: auto !important;
      }
    }

    
   
    /* Extra small devices (portrait phones, less than 576px)*/
    @media (max-width: 575.98px) {
      h1 {
        font-size: 2.2rem !important;
        line-height: 2.5rem !important;
      }

      .minus-box {
        padding: initial !important;
        margin-top: 50px !important;
        border-radius: 0;
        background-color: transparent;
      }

      section {
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .highlight {
        font-size: 1.8rem !important;
        line-height: 2.5rem !important;
      }
    }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
      .card-columns .card {
          margin-top: 20px;
          margin-bottom: 20px;
      }
  }