html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	max-width: 1905px;
	margin: 0 auto;
	font-family: 'Chakra Petch', sans-serif;
	overflow-x: hidden;
  color:#0C306D;
}

img {
	max-width: 100%;
}

.btn-primary {
	background: #fff;
	color: #000;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 0;
	border-radius: 0;
	font: normal normal bold 20px/20px Rajdhani;
	text-align: center;
}
.btn-primary:hover {
	background: #ddd;
	color: #000;
}

.btn-secondary {
	background: #0C306D;
	color: #fff;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 0;
	border-radius: 0;
	font: normal normal bold 20px/20px Rajdhani;
	text-align: center;
}

.navbar {
  z-index:1000;
}
.navbar .nav-item a.nav-link{
  font: normal normal bold 16px/21px Chakra Petch;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
padding:20px;
}
.navbar .nav-item a.nav-link:hover {
  background: #F6A340 0% 0% no-repeat padding-box;
}
.navbar-toggler {
  border-color:#fff;
  border-radius:0;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}


#top {
  background:#0C306D url('../img/top-stavby.jpg') no-repeat center center;
  height:921px;
  position:relative;
  text-align:center;
}

#top .maska1 {
background: transparent linear-gradient(180deg, #0C306D 0%, #0C306D00 100%) 0% 0% no-repeat padding-box;
display: block;
width: 100%;
height: 30%;
left: 0;
position: absolute;
top: 0px;
z-index: 100;
}
#top .maska2 {
  background: transparent linear-gradient(0deg, #0C306D 0%, #0C306D00 100%) 0% 0% no-repeat padding-box;
  display: block;
  width: 100%;
  height: 70%;
  left: 0;
  position: absolute;
  bottom: 0px;
  z-index: 100;
}

#top .top-text .container2 {
position: absolute;
bottom: 4em;
left: 50%;
right: 50%;
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
}

#top .top-text .container2 .box {
display: table;
max-width: 720px;
}

#top .top-text  h1 {
	font: normal normal bold 75px/78px Chakra Petch;
	letter-spacing: 0px;
	color: #fff;
	margin-top: 1em;
	margin-bottom: 0.5em;
  z-index:1000;
  bottom:0;
  width:680px;

}

#top .top-text  h1 span {
  color: #F6A340;
}

#top .top-text p {
  font: normal normal normal 20px/26px Chakra Petch;
letter-spacing: 0px;
color: #FFFFFF;
}

#onas {
  background: #0C306D 0% 0% no-repeat padding-box;
  color:#fff;
  font: normal normal normal 18px/30px Chakra Petch;
  letter-spacing: 0px;
}
#onas h2 {
  font: normal normal bold 60px/78px Chakra Petch;
letter-spacing: 0px;
color: #FFFFFF;
}

#codelame h2 {
font: normal normal bold 60px/78px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;  
}
#codelame h3 {
font: normal normal bold 30px/36px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;
margin-bottom:0.75em;
}

#codelame h3 span.ico1 {
  background:url('../img/ico1.png') no-repeat center center;
  width:50px;
  height:54px;
  float:right;
  margin-left:40px;
  margin-bottom:40px;
}
#codelame h3 span.ico2 {
  background:url('../img/ico2.png') no-repeat;
  width:50px;
  height:54px;
  float:right;
  margin-left:40px;
  margin-bottom:40px;
}
#codelame h3 span.ico3 {
  background:url('../img/ico3.png') no-repeat center center;
  width:50px;
  height:54px;
  float:right;
  margin-left:40px;
  margin-bottom:40px;
}
#codelame h3 span.ico4 {
  background:url('../img/ico4.png') no-repeat center center;
  width:50px;
  height:54px;
  float:right;
  margin-left:40px;
  margin-bottom:40px;
}
#codelame h3 span.ico5 {
  background:url('../img/ico5.png') no-repeat center center;
  width:50px;
  height:54px;
  float:right;
  margin-left:40px;
  margin-bottom:40px;
}


#codelame .box {
border: 2px solid #EFF0F2;
padding:20px;
min-height:200px;
}

#reference h2 {
font: normal normal bold 60px/78px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;
}
#reference .box {
  min-height:400px;     
  position:relative;
}
#reference .box a.main {
  height:100%;
  display:block;
  width:100%;
  text-decoration:none;
}

#reference .box a {
  text-decoration:none;
}

#reference .box .textbox {
 position:absolute;
 bottom:0;
 padding:25px;
  background: transparent linear-gradient(0deg, #0C306D 0%, #0C306D00 100%) 0% 0% no-repeat padding-box;
  width:100%;
  height:90%;
 
}

#reference .box .textbox .textbox2 {
  position:Absolute;
  bottom:20px;
}
#reference .box .textbox h3 {
font: normal normal normal 18px/20px Chakra Petch;
letter-spacing: 0px;
color: #F6A340;
}
#reference .box .textbox h4 {
font: normal normal bold 30px/32px Chakra Petch;
letter-spacing: 0px;
color: #FFFFFF;
}
            
#kontakt h2 {
font: normal normal bold 60px/78px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;
}            

#kontakt form {
  background: #EFF0F2 0% 0% no-repeat padding-box;
  padding:40px;
  text-align:left;
  color: #0C306D;
}

#kontakt .mailbox {
  padding-left:4em;
  padding-top:4em;
}

#kontakt .mailbox .mail a {
  font: normal normal normal 24px/24px Chakra Petch;
  letter-spacing: 0px;
  color: #F6A340;
}

#kontakt .mailbox .mail img {
  vertical-align:text-bottom;
  margin-right:15px;
}

#kontakt .mailbox .person img {
  float:left;
  margin-right:20px;
}

#kontakt .mailbox .person {
font: normal normal normal 18px/24px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;
}


#kontakt .mailbox .person span {
font: normal normal normal 16px/24px Chakra Petch;
letter-spacing: 0px;
color: #A4B0C5;
margin-bottom:10px;
display:inline-block;
}

#kontakt .mailbox .person a {
  font: normal normal 600 18px/24px Chakra Petch;
  letter-spacing: 0px;
  color: #0C306D;
}

#kontakt .mailbox .pin img {
  margin-right:10px;
}

#kontakt .mailbox .pin a {
   font: normal normal normal 16px/24px Chakra Petch;
letter-spacing: 0px;
color: #F6A340;
}


::placeholder { 
  color: #0C306D;
  opacity: 1;
}

:-ms-input-placeholder { 
  color: #0C306D;
}

::-ms-input-placeholder { 
  color: #0C306D;
}

#kontakt form input, #kontakt form textarea {
  border:0;
  border-radius:0;
  margin-bottom:1em;
}

#kontakt form .submit {
  background: #F6A340 0% 0% no-repeat padding-box;
  color:#fff;
  padding:10px;
  border:0;
  text-transform:uppercase;
}
#kontakt form .odeslani {

font: normal normal normal 14px/24px Chakra Petch;
letter-spacing: 0px;
color: #0C306D;
}

#kontakt form .odeslani span {
  margin-left:30px;
}
#kontakt form .odeslani a {
color: #F6A340;
text-decoration:underline;
}


@media  (max-width : 991px) {
.navbar-nav {
  background:rgba(0,0,0,0.7);
}
}
@media  (max-width : 700px) {
#top .top-text  h1 {
  width:100%;
}
}

@media  (max-width : 425px) {
#top .top-text  h1 {
  font: normal normal bold 55px/58px Chakra Petch;
}
}

#scroll-container {
  height: 250px;
  overflow: hidden;
  width:85%;
  margin:0 auto;
}

#scroll-text {
  height: 100%;
  text-align: left;
  
  /* animation properties */
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateY(100%); }
  to { -moz-transform: translateY(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}