/*
009F4C - zelena - logo
FB8B24 - oranzova - logo
EAEFBD - bezova
545F66 - tmave seda - menu BG
829399 - svetle seda

D7A500
000305
393E41
D3D0CB
99621E
*/

/* HEADERS */
    h1,
    .h1 {
      font-family: 'Exo 2', sans-serif;
      font-size: 3.9rem;
      line-height: 4rem;
      font-weight: 900;
      color: #99621e;
    }

    h2,
    .h2 {
      font-family: 'Exo 2', sans-serif;
      font-size: 2.25rem;
      margin: 2.25rem 0;
      font-weight: 900;
      color: #d7a500;
    }

    h3,
    .h3 {
      font-family: 'Exo 2', sans-serif;
      font-size: 1.375rem;
      font-weight: 700;
      margin: calc(1.3*1.375rem) 0 calc(.5*1.375rem);
      color: #393e41;
    }

    h4,
    .h4 {
      font-family: 'Exo 2', sans-serif;
      font-size: 1.125rem;
      text-transform: uppercase;
      font-weight: 900;
      margin: calc(1.3*1.125rem) 0 1.125rem;
      color: #393e41;
    }

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

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

    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;
    }

    /* 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;
    }

    /*LINKS*/

    a.nav-link {
      color: #fff;
      webkit-transition: color .3s;
      transition: color .3s;
    }

    a.nav-link:hover {
      color: #eee;
      webkit-transition: color .3s;
      transition: color .3s;
    }

    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 {
      color: #99621e;
    }

    .light-blue, a:not(.nav-link):not(.btn):not(p) {
      color: #d7a500;
    }

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

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

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

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

    body {
      font-size: 18px;
      font-family: 'Roboto', sans-serif;
      color: #4C4C4C;
      font-weight: 300;
    }

    img {
      max-width: 100%;
    }

/*-------------------------------------------*\
    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: #000305;
    }

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

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

    header.homepage .container {
      /*padding-bottom: 10vw;*/
      padding-bottom: 0;
      padding-top: 3vw;
    }

    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;
}


    .sticky.is-sticky {
      position: fixed;
      left: 0;
      right: 0;
      top: 75px;
      z-index: 1000;
      width: 100%;
    }

    .scroll-nav.is-sticky a {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .scroll-nav {
      white-space: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      background: rgb(237, 34, 35);
      background: -moz-linear-gradient(45deg, rgba(237, 34, 35, 1) 0%, rgba(163, 20, 21, 1) 100%);
      background: -webkit-linear-gradient(45deg, rgba(237, 34, 35, 1) 0%, rgba(163, 20, 21, 1) 100%);
      background: linear-gradient(45deg, rgba(237, 34, 35, 1) 0%, rgba(163, 20, 21, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed2223', endColorstr='#a31415', GradientType=1);
      text-transform: uppercase;
      font-size: 1rem;
      font-weight: 700;
    }

    .scroll-nav::-webkit-scrollbar {
      display: none;
    }

    .scroll-nav a {
      display: inline-block;
      margin-right: 40px;
      color: #fff !important;
      padding-top: 20px;
      padding-bottom: 20px;
    }


/*-------------------------------------------*\
    FOOTER
    \*-------------------------------------------*/

    footer {
      background: rgb(0, 3, 5);
      background: -moz-linear-gradient(45deg, rgba(0, 3, 5, 1) 0%, rgba(36, 38, 39, 1) 100%);
      background: -webkit-linear-gradient(45deg, rgba(0, 3, 5, 1) 0%, rgba(36, 38, 39, 1) 100%);
      background: linear-gradient(45deg, rgba(0, 3, 5, 1) 0%, rgba(36, 38, 39, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000305', endColorstr='#242627', GradientType=1);
      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;
      text-transform: uppercase;
    }

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

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

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

    /* 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
    \*-------------------------------------------*/

    /* Light gray backgroudnD color used for sections */
    .bg-gray {
      background-color: #F9F9F9;
    }
    /* used for footer and main navigation - ideally use with class .invert */
    .bg-dark {
      background: rgb(84, 95, 102);
      background: -moz-linear-gradient(45deg, rgba((84, 95, 102) 0%, rgba(60, 70, 78, 1) 100%);
      background: -webkit-linear-gradient(45deg, rgba((84, 95, 102, 1) 0%, rgba(60, 70, 78, 1) 100%);
      background: linear-gradient(45deg, rgba((84, 95, 102, 1) 0%, rgba(60, 70, 78, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#545F66', endColorstr='#3c464e', GradientType=1);
    }
    .bg-black {
      background: rgb(0, 3, 5);
      background: -moz-linear-gradient(45deg, rgba(0, 3, 5) 0%, rgba(36, 38, 39, 1) 100%);
      background: -webkit-linear-gradient(45deg, rgba(0, 3, 5, 1) 0%, rgba(36, 38, 39, 1) 100%);
      background: linear-gradient(45deg, rgba(0, 3, 5, 1) 0%, rgba(36, 38, 39, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000305', endColorstr='#242627', GradientType=1);
    }

    .bg-black .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");
    }

.navbar { /*border-bottom: solid 1px #d7a500;*/}

/*-------------------------------------------*\
    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;
      }

      .navbar-expand-lg .navbar-nav .nav-link { padding-right: 2rem;padding-left: 2rem;}

    }

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

    /* SMALLER THAN x */



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

      .shadow-box {
        padding: 20px;
      }

    }


    /* 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;
      }

      .homepage div.container:first-child {padding-top: 60px;}

    }

    
   
    /* 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;
      }
    }