/* 
 * BASE CSS FOR WEB (PUBLIC)
 */

/*
 * CSS guidelines
 *
 * 100    Extra Light or Ultra Light
 * 200    Light or Thin
 * 300    Book or Demi
 * 400    Normal or Regular
 * 500    Medium
 * 600    Semibold, Demibold
 * 700    Bold
 * 800    Black, Extra Bold or Heavy
 * 900    Extra Black, Fat, Poster or Ultra Black
 *
 * #elementIdLikeThis
 * .element-class-like-this
 * 
 */

/* BODY, HTML */
body {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    line-height: 35px;
    font-weight: 400;
    color: rgb(110,110,110);
	overflow-x:hidden;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
html {
    /*    scroll-behavior: smooth;*/
}
.overflow-block {
    width: 100vw;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    padding-left:15px;
    padding-right:15px;
}

/* HEADER*/
#headerHolder {
    width: 100%;
    z-index: 100;
    transition: 500ms ease-in-out;
    transition-property: background-color, padding, box-shadow;
    padding-top: 20px;
    padding-bottom: 20px;
    animation-duration: 600ms;
	position: fixed;
	transition: .4s;
}
BODY.page-scrolled #headerHolder {
	background:#fefefe;
	opacity:.95;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-box-shadow: 0px 3px 3px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 3px -4px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 3px -4px rgba(0,0,0,0.75);
}
@media (max-width: 991px) {
    #headerHolder {
        transition: all 500ms ease;
    }
}
#headerHolder #navbarHeader li a {
    padding: 15px;
    transition: all 350ms ease;
}

#headerHolder.hide-menu {
	margin-top:-100px;
	transition: .4s;
}

#logoLink SPAN {
	width:390px;
	height:50px;
	position: relative;
}
@media (max-width:1199px) {
	#logoLink SPAN {
		width:190px;
		height:62px;
		transition: 200ms;
	}
	BODY.page-scrolled #logoLink SPAN {
		width:153px;
		height:50px;
		transition: 200ms;
	}
}
.logo,
.logo-inv {
	position: absolute;
}
BODY:not(.page-scrolled) .logo,
BODY.page-scrolled .logo-inv {
	opacity:0;
	transition: 200ms all;
}
BODY:not(.page-scrolled) .logo-inv,
BODY.page-scrolled .logo {
	opacity:1;
	transition: 200ms all;
}

/* MAIN MENU */
#mainMenu {
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    #mainMenu {
        display: none;
    }
}
#mainMenu>#navbarHeader>li>a {
    color: #fefefe;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    background: none;
    padding: 15px 25px;
    transition: none;
}
BODY.page-scrolled #mainMenu>#navbarHeader>li:not(.lang)>a {
	color: rgb(33,33,33);
}
#mainMenu>#navbarHeader>li:first-of-type>a {
	padding-left:0;
}
#mainMenu>#navbarHeader>li:last-of-type>a {
	padding-right:0;
}
#mainMenu>#navbarHeader>li:hover a,
#mainMenu>#navbarHeader>li:focus a,
#mainMenu>#navbarHeader>li:active a,
#mainMenu>#navbarHeader>li.active a {
    color: rgb(136, 209, 238);
}
#mainMenu>#navbarHeader>.lang a {
    color: rgb(153,153,153);
}
#mainMenu>#navbarHeader>.lang:hover a,
#mainMenu>#navbarHeader>.lang:focus a,
#mainMenu>#navbarHeader>.lang:active a {
    color: #f60;
}
#mainMenu>#navbarHeader>li>a span {
    transition: all 500ms ease;
	background-position: 0% 100%;
	background-image: linear-gradient(rgba(136,209,238), rgba(136,209,238));
    background-repeat: no-repeat;   
    background-size: 0% 1px;
    padding-bottom: 3px;
}
#mainMenu>#navbarHeader>li>a:hover span,
#mainMenu>#navbarHeader>li>a:active span,
#mainMenu>#navbarHeader>li>a:focus span {
	transition: all 120ms ease;
    background-size: 100% 1px;
}
BODY:not(.page-scrolled) #mainMenu>#navbarHeader>li>a:hover span,
BODY:not(.page-scrolled) #mainMenu>#navbarHeader>li>a:active span,
BODY:not(.page-scrolled) #mainMenu>#navbarHeader>li>a:focus span {
	background-image: linear-gradient(rgba(136,209,238), rgba(136,209,238));
}

BODY.page-scrolled #mainMenu>#navbarHeader>li:hover>a,
BODY.page-scrolled #mainMenu>#navbarHeader>li:focus>a,
BODY.page-scrolled #mainMenu>#navbarHeader>li:active>a,
BODY.page-scrolled #mainMenu>#navbarHeader>li.active>a {
    color: rgb(43,131,165);
}
BODY.page-scrolled #mainMenu>#navbarHeader>li>a:hover span,
BODY.page-scrolled #mainMenu>#navbarHeader>li>a:active span,
BODY.page-scrolled #mainMenu>#navbarHeader>li>a:focus span {
	background-image: linear-gradient(rgba(43,131,165), rgba(43,131,165));
}


/* MAIN MENU DROPDOWN */
#mainMenu .dropdown-menu {
    display: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
}
#mainMenu>#navbarHeader .dropdown-menu>li a {
    font-size: 18px;
    color: rgb(33,33,33);
    background: none;
    padding: 10px 25px;
    transition: all 350ms ease;
}
#headerHolder.slide #mainMenu>#navbarHeader .dropdown-menu>li a {
    /*    font-size: 16px;*/
}
#mainMenu>#navbarHeader .dropdown-menu>li:first-of-type a {
    padding-top: 20px;
}
#mainMenu>#navbarHeader .dropdown-menu>li:last-of-type a {
    padding-bottom: 20px;
}
#mainMenu>#navbarHeader .dropdown-menu>li a:hover,
#mainMenu>#navbarHeader .dropdown-menu>li a:focus,
#mainMenu>#navbarHeader .dropdown-menu>li a:active {
    color: #f60;
	transition: all 120ms ease;
}   

.strike {
    height: 2px;
    background-color: rgb(17,68,136);
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.strike:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 50%,rgba(255,255,255,0) 100%);
/*    background: linear-gradient(to right, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.75) 100%);*/
}
#header .navbar-toggle {
    position: relative;
    float: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0px;
}
/* BURGER MENU */
#burgerMenu {
	opacity:0;
	margin-top:-100vh;
	transition: 150ms;
}
BODY.menu-opened #burgerMenu {
	opacity:1;
	margin-top:0;
	transition: 150ms;
}
#burgerMenu {
    position: fixed;
    z-index: 150;
	width: 100vw;
	background-color: rgb(17,68,136);
}
BODY:not(.menu-opened) #burgerMenu .burgerBars {
	opacity:0;
	transition: 100ms;
}
#burgerMenu .burgerBars {
	display: inline-block;
	position: relative;
	top: 23px;
	padding-right:30px;
	opacity:1;
	transition: 100ms;
}
#navbarBurger {
    display: flex;
    flex-direction: column;
    padding: 35px 30px 35px 15px;
}
#navbarBurger li a {
    display: block;
    color: rgb(255,255,255);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    background: none;
    padding: 10px 0px;
}
#navbarBurger.nav-pills>li+li {
    margin-left: 0px!important;
}
#header .navbar-toggle {
    position: relative;
    float: none;
    padding-left: 25px;
    padding-right: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0px;
}
#navbarBurger .nav-dropdown li a {
    padding: 8px 20px 8px 40px;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
	text-align: left;
	line-height: 20px;
}
#navbarBurger .nav-dropdown li:first-of-type a {
/*    padding: 0px 0px 5px 0;*/
}
#navbarBurger .nav-dropdown li:last-of-type a {
    padding-bottom: 15px;
}


/* BURGER COLLAPSE */
.burgerBars {
    display: block;
    padding: 15px;
	cursor:pointer;
}
BODY.menu-opened .burgerBars {
	padding-right:0; 
	opacity:0;
	transition: 100ms;
}
.burgerBars .icon-bar {
    background-color: #4899b9;
    height: 3px;
    width: 35px;
    transition: all 500ms ease;
    display: block;
}
.burgerBars .icon-bar:not(:first-of-type) {
    margin-top: 7px;
}
.menu-opened .burgerBars .bar-1 {
    background-color: #f60;
    transform: rotate(45deg) translate(7px, 7px);
    -webkit-transform: rotate(45deg) translate(7px, 7px);
}
.menu-opened .burgerBars .bar-2 {
    opacity: 0;
}
.menu-opened .burgerBars .bar-3 {
    background-color: #f60;
    transform: rotate(-45deg) translate(7.2px, -7px);
    -webkit-transform: rotate(-45deg) translate(7.2px, -7px);
}

/* BURGER +/- */
#navbarBurger .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#navbarBurger .closed .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
}
#navbarBurger .closed .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
    opacity: 1;
}
#navbarBurger .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
    opacity: 1;
}
#navbarBurger .opened .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
    opacity: 0;
}
#navbarBurger .circle-plus {
/*    opacity: 0.75;*/
}
#navbarBurger .circle-plus .circle {
    position: relative;
    width: 30px;
    height: 30px;
}
#navbarBurger .circle-plus .circle .horizontal {
    position: absolute;
    background-color: rgb(255,255,255);
    width: 25px;
    height: 3px;
    left: 50%;
    margin-left: -15px;
    top: 50%;
    margin-top: -4px;
}
#navbarBurger .circle-plus .circle .vertical {
    position: absolute;
    background-color: rgb(255,255,255);
    width: 3px;
    height: 25px;
    left: 50%;
    margin-left: -4px;
    top: 50%;
    margin-top: -15px;
}

.burger-lang A {
	display: inline-block!important;
	margin-top:15px;
	padding:3px 8px!important;
	color:#ff8838!important;
	border:solid 1px #f60;
	border-radius: 20px;
}



/* BANNER */
#banner {
    background-color: grey;
    height: 650px;  
    background: rgb(26,76,135);
    background: radial-gradient(circle, rgba(26,76,135,1) 0%, rgba(3,19,41,1) 91%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
}
#bannerPages {
    background-color: grey; 
    min-height: 230px; 
	padding: 100px 15px 25px 15px;
    background: rgb(26,76,135);
    background: radial-gradient(circle, rgba(26,76,135,1) 0%, rgba(3,19,41,1) 91%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
}
#bannerPages H1 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 35px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
}

/* CAROUSEL */
#carousel {
    z-index: 1;  
    color: rgb(255,255,255);
}
#carousel .carousel-title {
	font-size: 40px;
    font-weight: 700;
    animation-delay: 0ms;
    margin-bottom: 20px;
}
#carousel .carousel-title .nadpis {
    line-height: 48px;
}
@media (max-width:450px) {
	.carousel-title {
		font-size: 30px!important;
	}
	#carousel .carousel-title .nadpis {
		line-height: 38px;
	}
}

#carousel .carousel-description {
    font-size: 20px;
    line-height: 30px;
    animation-delay: 500ms;
    margin-bottom: 30px;
	max-width: 575px;
	margin-left:auto;
	margin-right:auto;
	padding: 0px 30px 15px 30px;
}
#carousel .carousel-button {
    animation-delay: 1000ms;
}
@media (max-width:450px) {
	.carousel-button .btn-orange {
		width:auto;
	}
}

/* carousel smooth transition */
/*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}    
.carousel-fade .carousel-inner .active {
    opacity: 1;
}    
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}    
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}    
.carousel-fade .carousel-control {
    z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* BREADCRUMBS */
#breadCrumbs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f60;
    font-size: 14px;
    text-transform: uppercase;
	position: relative;
	z-index: 1;
}
@media (max-width: 767px) {
    #breadCrumbs {
        flex-direction: column;
		align-items: flex-start;
    }
}
#breadCrumbs>li+li:before {
    content: ">";
    padding: 0 10px 4px 10px;
	color:#ffffff;
}
#breadCrumbs a {
    color: rgb(0,38,94);
    transition: all 350ms ease;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,38,94,0);
	color:#ffffff;
}
#breadCrumbs a:hover {
    color: #f60;
}

/* CHILDPANELS */



#backToTop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: rgb(153,153,153); 
    color: rgb(255,255,255);
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 500ms ease;
    text-decoration: none;
}
#backToTop .back-to-top-inner {
    font-size: 18px;
    width: 45px;
    height: 45px;
    transition: all 500ms ease;
    border-top: 5px solid #f60;
}
#backToTop .back-to-top-inner span {
    transition: all 350ms ease;
    padding-bottom: 5px;
}

/* DETAIL BUTTON */
.detailButtons {
    display: none;
}

/* FOOTER */
#logoLinkFooter {
	width:180px;
}
#footerMenu .navbar-bottom .footer-column-title {
	display: block;
    margin-bottom: 10px;
}
#footerMenu .navbar-bottom .footer-column-title span {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
#footerMenu .navbar-bottom a  {
    color: rgb(255,255,255);
    text-decoration: none;
}
#footerMenu .navbar-bottom a span {
    transition: all 500ms ease;
    background-image: linear-gradient(rgb(220,220,220), rgb(220,220,220));
    background-position: 0% 100%;
    background-repeat: no-repeat;   
    background-size: 0% 1px;
    padding-bottom: 3px;
    transition-property: background-size;
}
#footerMenu .navbar-bottom a:hover span,
#footerMenu .navbar-bottom a:active span,
#footerMenu .navbar-bottom a:hover span {
    background-size: 100% 1px;
    background-image: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,1));
}



/* BUTTONS */
.btn {
	border-radius: 50px;
	background-color: rgba(255,255,255,0);
	color: rgb(255,255,255);
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
	min-width: 200px;
	padding: 12px 30px 10px 30px;
}
.btn span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 500ms ease;
}
.btn span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: -16px;
    right: -20px;
    transition: all 500ms ease;
    font-size: 32px;
}
.btn:hover span {
	padding-right: 25px;
}
.btn:hover span:after {
    opacity: 1;
    right: 0;
}

.btn-orange {
    border: 2px solid rgb(255,255,255);
    text-transform: uppercase;
    width: 350px;
    transition: all 500ms ease;
}
.btn-orange:hover {
    background-color: #f60;
    border: 2px solid #f60;
}

.btn-orange span:after {
    color: rgb(255,255,255);
}
.btn-orange:hover span {
    color: rgb(255,255,255);
}

.btn-grey {
    color: #021743;
    border: 2px solid rgb(110,110,110);
    transition: 500ms ease;
    transition-property: background-color, border;
}
.btn-grey:hover {
    background-color: #f60;
    border: 2px solid #f60;
}
.btn-grey span:after {
    color: rgb(110,110,110);
}
.btn-grey:hover span { 
    color: rgb(255,255,255);
}
.btn-grey:hover span:after {
    color: rgb(255,255,255);
}

.on-page-navigation-buttons {
	width: 100vw;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    padding: 40px 15px 40px 15px;
	background: #f6f6f6; 
	overflow:hidden;
} 
@media(max-width:767px) {
	BODY:not(.ready) .on-page-navigation-buttons:not(.no-hide)  {
		max-height: 80px;
	}
	BODY.ready .on-page-navigation-buttons:not(.no-hide)  {
		max-height: 9999px;
	}
}
	
.on-page-navigation-buttons-holder  {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	height:auto;
	transition: .2s;
}
@media(max-width:767px) {
	.on-page-navigation-buttons-holder:not(.no-hide)  {
		max-height: 80px;
	}
}
.on-page-navigation-buttons:not(.no-hide):hover .on-page-navigation-buttons-holder,
.on-page-navigation-buttons:not(.no-hide):active .on-page-navigation-buttons-holder,
.on-page-navigation-buttons:not(.no-hide):focus .on-page-navigation-buttons-holder {
	max-height: 9999px;
	transition: 1s;
}
@media(max-width:767px) {
	.on-page-navigation-buttons:not(.no-hide) .on-page-navigation-buttons-holder::after {
		cursor:pointer;
		display: flex;
		align-items:flex-end;
		justify-content: center;
		padding-top:10px;
		padding-bottom:20px;
		content: '● ● ●';
		color: rgb(0,38,94);
		position: absolute;
		bottom: -40px;
		height: 100px;
		width: calc(100% + 13px);
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
		transition: 1.5s;
	}
	.on-page-navigation-buttons:not(.no-hide):hover .on-page-navigation-buttons-holder::after,
	.on-page-navigation-buttons:not(.no-hide):active .on-page-navigation-buttons-holder::after,
	.on-page-navigation-buttons:not(.no-hide):focus .on-page-navigation-buttons-holder::after {
		opacity:0;
		transition: .1s;
	}
}

.on-page-navigation-buttons .btn,
.btn-back.btn {
	border: solid 1px #114488;
	color:#114488;
	/*font-size: 14px;*/
	margin: 14px 7px 0 7px;
	min-width: 160px;
	/*padding: 5px 25px 3px 25px;*/
	background-color:white;
	transition: .7s;
}
.on-page-navigation-buttons .btn:hover,
.on-page-navigation-buttons .btn:focus,
.on-page-navigation-buttons .btn:active,
.btn-back.btn:hover,
.btn-back.btn:focus,
.btn-back.btn:active {
	border: solid 1px #114488;
	color:#ffffff;
	background-color:#114488;
	transition: .1s;
}

/* PARTICLES */
#particles-js {
    position: relative;
}
.particles-js-canvas-el {
    /*    height: auto!important;*/
    position: absolute;
    top: 0;
    left: 0;
}

.header-shadow {
	position: relative;
    z-index: 1;
    box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
    height: 15px;
    margin-top: -15px;
	/* pokud bude problém s horním pruhem s nadpisem, bude to dělat toto */
}

/* FOOTER */
#footer {
    color: rgb(255,255,255);
    overflow: hidden;
}
#footerCopyright {
    color: rgb(204,204,204);
    background-color: rgb(68,68,68);
}
#footerCopyright a {
    color: rgb(204,204,204);
    text-decoration: none;
    border-bottom: 1px solid rgb(204,204,204);
    transition: all 350ms ease;
}
#footerCopyright a:hover {
    color: rgb(255,255,255);
    border-bottom: 1px solid rgba(255,255,255,0);
}
#footerMenu {
    color: rgb(255,255,255);
    background-color: rgb(102,102,102);
}
.footer-gradient {
    background-image: linear-gradient(to right, rgba(68,68,68,0.50), rgba(68,68,68,0));
}

/* FOOTER SOCIAL ICONS */
#footerMenu #socialIcons .icon {
    transition: all 700ms ease-out;
    display: inline-block;
    border-radius: 50px;
    box-shadow: 0px 0px 3px #fff;
    padding: 10px;
    font-size: 18px;
    color: rgb(255,255,255);
}
#footerMenu #socialIcons a:hover .icon {
/*    color: rgb(2,23,67);*/
    color: rgb(68,68,68);
    background-color: rgb(255,255,255);
    box-shadow: 0px 0px 5px rgb(255,255,255);
}
#footerMenu #socialIcons a {
    text-decoration: none;
    border-bottom: 0;
}

/*** IE ***/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    #backToTop {
        right: 30px;
    }
	#footerMenu #socialIcons .icon {
        transition: none;
    }
}