.header__Open, .acc .header__Open{
	display: none;
}
.headerAccount ul li a i.down{
  display: none;
}

@media only screen and (max-width: 1280px) {

.center{
  max-width: 920px;
}
.block{
  height: 200px;
}
body{
  font-size: 14px;
}
.search{
  width: 150px;
}
.search input{
  font-size: 13px;
  width: 75%;
}
.search button{
  font-size: 13px;
  width: 25%;
}
.contractNew select, .contractNew input, .formForm input{
  font-size: 14px;
}
.contractNew .rowButton button, .contractsList button{
  font-size: 14px;
}
.headline textarea, .article textarea{
  font-size: 14px;
}
.article button, .checkbox span, .formForm h6, .formBlock p, .notification ul, .profile .formForm a{
  font-size: 13px;
}
.contractButtons button, .formForm button, .block h2{
  font-size: 18px;
}
.headerAcc ul li a span, .headerAcc ul li .js-Modal span{
  font-size: 18px;
}
.introContent h1, .registrationContent h1, .formBox i{
  font-size: 36px;
}
.watermark{
  height: 36px;
}
.introContent h3, .registrationContent h3{
  font-size: 18px;
}
.headerLogo a img{
  max-height: 36px;
}
.headerAcc ul li::before{
  height: 36px;
}
.contractEditor select, .contractEditor input, .price span {
  font-size: 14px;
}
.contractEditor .rowButton button{
  font-size: 14px;
}
.headerAccount ul li a{
  padding: 0 15px;
}
.headerAcc ul li .js-Modal span{
  margin: 0 15px 0 0;
}
.headerAcc ul li a span{
  margin: 0 0 0 15px;
}
.notification{
  padding: 70px 50px;
}
.notification li{
  padding: 40px 10px;
}
.notification li i{
  font-size: 45px;
}
.notification h4, .notification h5, .notification li span{
  font-size: 18px;
}
.notification p{
  font-size: 14px;
}
.headerAccount ul li:last-child a{
  padding: 0 15px;
}
#tablicaIzvrsitelja th:first-of-type, #tablicaIzvrsitelja td:first-of-type{
	max-width: 72px;
}
#tablicaNarucitelji th:first-of-type, #tablicaNarucitelji td:first-of-type{
  max-width: 78px;
}

}


@media only screen and (max-width: 1024px) {

.center{
  max-width: 700px;
}
.introContent {
  padding: 70px 0;
}
.introContent h3{
  max-width: 640px;
}
.formForm{
  float: none;
  width: 100%;
}
.formInfo{
  float: none;
  width: 100%;
  padding-bottom: 0 !important
}
.formBlock {
  text-align: left;
}
.watermark{
  position: relative;
  left: 50px;
  bottom: 0;
  max-width: calc(100% - 40px);
  margin-bottom: 50px;
  height: auto;
  max-height: 36px;
}
.registrationContent {
  padding: 70px 0;
}
.registrationContent h3{
  max-width: 640px;
}
.contractsList ul li.head{
  display: none;
}
.contractsList li{
  display: inline-block;
  width: 100%;
  padding: 10px;
  line-height: initial;
}
.contractsList ul .number{
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.contractsList ul .name{
  display: block;
  width: 100%;
  line-height: 30px;
  margin-bottom: 10px
}
.contractsList ul .authorName{
  display: inline-block;
  width: 48%;
  padding-left: 0;
  line-height: 30px;
}
.contractsList ul .actions{
  float: right;
  width: 50%;
  padding: 0;
}
ul.actions li a{
  display: inline-block;
  margin: 0;
}
.headline textarea{
  width: 70%;
}
ul.actions li a::before {
  opacity: 0.1;
}
.contractNew__Row:nth-of-type(3n) input {
  line-height: 50px;
}
.profileContent {
  padding: 70px 0;
}
.contractNew__Block{
  width: 48%;
}
.header .center{
  position: relative;
  height: 100%;
}
.header__Open {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 20px;
  width: 32px;
  text-indent: -99999px;
  border-top: 4px solid #da251c;
  z-index: 10;
  transition:300ms;
}
.header__Open::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0px;
  right: 0px;
  background: #da251c;
  height: 4px;
  transition: 500ms;
}
.header__Open::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #da251c;
  height: 4px;
  transition: 300ms;
}
.header__Open--close::before {
  opacity: 0;
  width: 0;
}
.header__Open--close {
  transform: translateY(-25%) rotate(-45deg);
}
.header__Open--close::after {
  transform:rotate(-90deg);
  bottom: 15px;
}
.header{
  height: 70px;
}
.headerLogo a{
  height: 70px;
  /*max-width: 70%;*/
}
.headerLogo a img{
  max-height: 30px;
  max-width: 100%;
}
.headerAcc ul li::before{
  height: 30px;
}
.headerAcc ul li a, .headerAcc ul li .js-Modal{
  height: 70px;
}
.headerAcc ul li a span, .headerAcc ul li .js-Modal span{
  font-size: 16px;
}
.headerAcc ul li .modal{
  display: none !important;
}
.headerAccount{
  position: fixed;
  transform: translateX(100%);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,1);
  z-index: 4;
  height: 100vh;
  opacity: 0;
  transition: 300ms;
}
.header--active .headerAccount{
  transform: translateX(0);
  opacity: 1;
}
.headerAccount ul{
  float: none;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 50px 0 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.headerAccount ul li{
  float: none;
  height: auto;
  line-height: 10vh;
}
.headerAccount ul li::before{
  width: 100%;
  height: 1px !important;
  top: 0;
  transform: translateY(0);
}
.headerAccount ul li a, .headerAccount ul li:last-child a{
  display: block;
  padding: 0;
  position: relative;
  padding-left: 30px;
}
.headerAccount ul li a i{
  margin: 0;
  position: absolute;
  left: 0;
  max-width: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.notification ul{
  max-width: none;
}
.headerAccount ul li ul{
  visibility: visible;
  opacity: 1;
  display: block;
  position: relative;
  top: initial;
  transform: translateY(0);
  min-width: initial;
  box-shadow: none;
  padding: 0;
  max-width: none !important;
  margin-top: -2vh;
}
.headerAccount ul li ul:after{
  display: none;
}
.headerAccount ul li ul li{
  line-height: 7vh;
  padding: 0;
}
.headerAccount ul li ul li a, .headerAccount ul li ul li a:last-child{
  padding-left: 40px;
}
.contractsList ul .name:nth-of-type(2n){
  display: inline-block;
  width: 50%;
  margin: 0;
}
.contractsList ul .contractType{
  width: 180px;
}
.modal{
  max-width: 250px;
  top: 50%;
  transform: translate(-50%,-50%);
}
.headerAccount ul li a i.down{
  display: inline;
  position: relative;
  margin-left: 7px;
}
.headerAccount ul li a.has-subMenu{
  color: #6c6c6c !important;
  display: inline !important;
}
#naslovni{
  display: none;
}
table.dataTable tr {
  display: block;
  padding: 10px !important;
}
table.dataTable tr td {
  width: 100% !important;
  min-width: initial !important;
  max-width: 300px !important;
  margin: 0 auto;
  position: relative;
  display: block;
  text-align: center;
}
table.dataTable tr td::before {
  position: relative;
  margin-right: 10px;
  color: #6c6c6c;
  display: block;
}
table.dataTable tr td:nth-child(1)::before {
  display: inline;
}
table.dataTable tr td:first-child {
  max-width: none !important;
  text-align: left;
}
table.dataTable tr td:last-child {
  display: flex;
  max-width: 120px !important;
}
table.dataTable tr td a::before {
  opacity: 0.1;
}
#tablicaUgovora td:nth-child(1)::before {
  content: 'ID ugovora:';
}
#tablicaUgovora td:nth-child(2)::before {
  content: 'Tip ugovora:';
}
#tablicaUgovora td:nth-child(3)::before {
  content: 'Izvrsitelj:';
}
#tablicaUgovora td:nth-child(4)::before {
  content: 'Narucitelj:';
}
#tablicaUgovora td:nth-child(5)::before {
  content: 'Datum ugovora:';
}
#tablicaUgovora td:nth-child(6)::before {
  content: 'Događaj:';
}
#tablicaUgovora td:nth-child(7)::before {
  content: 'Iznos:';
}
#tablicaTipaUgovora td:nth-child(1)::before {
  content: 'ID tipa ugovora:';
}
#tablicaTipaUgovora td:nth-child(2)::before {
  content: 'Naslov tipa ugovora:';
}
#tablicaTipaUgovora td:nth-child(3)::before {
  content: 'Kategorija tipa ugovora:';
}
#tablicaNarucitelji td:nth-child(1)::before {
  content: 'ID naručitelja:';
}
#tablicaNarucitelji td:nth-child(2)::before, #tablicaIzvrsitelja td:nth-child(2)::before {
  content: 'Naziv/Ime i prezime:';
}
#tablicaNarucitelji td:nth-child(3)::before, #tablicaIzvrsitelja td:nth-child(3)::before {
  content: 'OIB:';
}
#tablicaNarucitelji td:nth-child(4)::before, #tablicaIzvrsitelja td:nth-child(4)::before {
  content: 'IBAN:';
}
#tablicaNarucitelji td:nth-child(5)::before, #tablicaIzvrsitelja td:nth-child(5)::before {
  content: 'Grad:';
}
#tablicaNarucitelji td:nth-child(6)::before, #tablicaIzvrsitelja td:nth-child(6)::before {
  content: 'Mirovinski stup:';
}
#tablicaIzvrsitelja td:nth-child(1)::before {
  content: 'ID izvršitelja:';
}

}


@media only screen and (max-width: 768px) {

.center{
  max-width: 580px;
}
.footer ul li{
  margin-left: 15px;
}
.footer ul:first-of-type{
  margin-left: 15px;
}
.block{
  height: 150px;
}
.block h2{
  padding: 20px;
}
.contractsList li{
  padding: 20px;
}
.contractsList ul .name{
  display: block;
  width: 100%;
  padding-right: 0;
  margin: 20px 0;
}
.contractsList ul .authorName{
  display: block;
  width: 100%;
  margin: 20px 0;
}
.contractsList ul .actions{
  float: none;
  width: 100%;
}
.contractNew__Row{
  display: inline-block;
  width: 100%;
}
.contractNew select, .contractNew input{
  display: block;
  width: 100%;
  margin: 0 auto 20px;
  /*max-width: 250px;
  text-align-last:center;*/
}
/*.contractNew h5 {
  text-align: center;
}*/
.contractNew .rowButton {
  width: 48%;
  margin: 0 4% 0 0;
  float: left;
}
.contractNew .rowButton:last-of-type {
  float: right;
  margin-right: 0;
}
.contractNew__Row:nth-of-type(3n){
  display: flex;
}
.contractNew__Row:nth-of-type(3n) input, .contractNew__Row:nth-of-type(3n) select{
  width: 48%;
  margin: 0;
}
.headline textarea{
  width: 100%;
}
.contractEditor__Row{
  display: inline-block;
  width: 100%;
}
.contractEditor select, .contractEditor input{
  display: block;
  width: 100%;
  margin: 0 auto 20px;
}
.contractEditor .rowButton {
  width: 48%;
  margin: 0 4% 0 0;
  float: left;
}
.contractEditor .rowButton:last-of-type {
  float: right;
  margin-right: 0;
}
/*.contractEditor__Row:nth-of-type(3n){
  display: flex;
}
.contractEditor__Row:nth-of-type(3n) input, .contractEditor__Row:nth-of-type(3n) select{
  width: 30%;
  margin: 0;
}*/
.price input{
  width: 100% !important;
}
.headerAccount ul{
  max-width: 580px;
}
.notification ul{
  flex-wrap: wrap;
  margin-bottom: -20px;
}
.notification ul li{
  width: calc(50% - 10px);
  margin-bottom: 20px;
}
.contractsList ul .contractType{
  float: right;
  width: 180px;
}
.contractDetails, .contractDates{
  display: flex;
}
.contractDetails input, .contractDetails select, .price{
  width: 48%;
  margin: 0 0 20px;
}
.contractDates__Wrap{
  width: 48%;
}
.contractDates__Wrap:first-of-type{
  width: 100%;
}
.dataTables_wrapper .dataTables_info {
  float: left !important;
  text-align: left !important;
}
.dataTables_wrapper .dataTables_paginate {
  float: right !important;
  text-align: right !important;
  margin: 0 !important;
}

}


@media only screen and (max-width: 640px) {

.center{
  max-width: 90%;
}
.site{
  min-height: initial;
  padding-bottom: 0;
}
.footer{
  position: relative;
  line-height: initial;
}
.footer .center{
  height: 100%;
}
.footer ul{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  width: 48%;
}
.footer ul li{
  margin: 12px !important;
}
.footer ul:first-of-type{
  text-align: right;
  margin: 0;
  margin-right: -12px;
}
.footer ul:first-of-type li{
  display: block;
}
.footer ul:last-of-type{
  margin-left: -12px;
}
.footer ul:last-of-type li:first-child{
  display: block;
}
.blocks{
  display: block;
}
.block{
  display: block;
  width: 100%;
  height: 35vw;
  min-height: 150px;
  margin-bottom: 70px;
}
.contractNew__Row, .contractNew__Row:nth-of-type(3n){
  display: block;
}
.contractNew__Row:nth-of-type(3n) input, .contractNew__Row:nth-of-type(3n) select{
  width: 100%;
  margin: 0 auto 20px;
}
.contractNew .rowButton{
  float: none;
  display: block;
  width: 100%;
  margin: 20px 0;
}
.contractNew .rowButton:last-of-type{
  float: none;
}
.contractEditor__Row, .contractEditor__Row:nth-of-type(3n){
  display: block;
}
.contractEditor__Row:nth-of-type(3n) input, .contractEditor__Row:nth-of-type(3n) select{
  width: 100%;
  margin: 0 auto 20px;
}
.price{
  display: block;
  width: 100%;
}
.contractEditor .rowButton{
  float: none;
  display: block;
  width: 100%;
  margin: 20px 0;
}
.contractEditor .rowButton:last-of-type{
  float: none;
}
.contractNew__Block{
  width: 100%;
}
.headerAccount ul{
  max-width: 90%;
}
.contractsList ul .name:nth-of-type(2n){
  display: block;
  width: 100%;
  margin: 20px 0;
}
.contractDates__Wrap{
  width: 100%;
}
.headline{
  width: 100%;
}
.dataTables_wrapper .dataTables_info {
  float: none !important;
  text-align: center !important;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
  text-align: center !important;
  margin-top: 10px !important;
}

}


@media only screen and (max-width: 510px) {

.contractButtons button{
  min-width: 165px;
  font-size: 17px;
}

}


  @media only screen and (max-width: 480px) {

.gallerySlide img{
  max-width: 80%;
}
.flickity-prev-next-button{
  width: 35px !important;
  height: 35px !important;
}
.footer{
  height: auto;
  padding: 30px 0;
}
.footer ul{
  display: block;
  width: 100%;
  float: none !important;
  text-align: center !important;
  top: initial;
  transform: translateY(0);
  margin: 0 !important;
}
.footer ul li{
  margin: 10px !important;
}
.footer ul:last-of-type li:first-child{
  display: block;
  margin-top: 24px !important;
}
.form{
  text-align: center;
}
.formForm{
  padding: 50px 20px;
}
.formInfo{
  padding: 50px 20px;
  text-align: center
}
.formBlock{
  text-align: center;
}
.form .half{
  display: block;
}
.form input{
  max-width: none;
}
.watermark{
  left: initial;
}
.formBox {
  flex-wrap: wrap;
  justify-content: center;
}
.formBox i{
  margin: 0;
}
.formBox span{
  width: 100%;
  text-align: center;
  margin-top: 15px;
}
.contractsList{
  padding: 50px 20px;
}
.contractsList ul{
  text-align: center;
}
.contractsList ul .name {
  white-space: initial;
  line-height: 1.5;
  padding: 5px 0;
}
.contractsList ul .authorName {
  white-space: initial;
  line-height: 1.5;
  padding: 5px 0;
}
ul.actions{
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
ul.actions li{
  margin: 20px 10px 0;
}
.contractInner{
  padding: 50px 20px;
}
.acc .header__Open{
  display: block;
}
.headerAcc{
  position: fixed;
  transform: translateX(100%);
  top: 0;
  right: 0;
  left: 0;
  /*bottom:0;
  height: 100vh;*/
  background: rgba(255,255,255,1);
  z-index: 4;
  opacity: 0;
  transition: 300ms;
}
.header--active .headerAcc{
  transform: translateX(0);
  opacity: 1;
}
.headerAcc ul{
  float: none;
  width: 90%;
  margin: 0 5%;
  padding: 50px 50px 50px 0;
}
.headerAcc ul li{
  float: none;
}
.headerAcc ul li::before {
  left: 0;
  width: 100%;
  height: 1px !important;
  top: initial;
  transform: translateY(0);
  right: initial;
  bottom: 0;
}
.headerAcc ul li a, .headerAcc ul li .js-Modal{
  display: block;
  height: auto !important;
}
.headerAcc ul li a span, .headerAcc ul li .js-Modal span{
  margin: 0;
  top: initial;
  transform: translateY(0);
  padding: 20px 0;
  line-height: 1.3;
}
.notification{
  padding: 70px 20px;
}
.contractsList ul .contractType{
  float: none;
  width: 100%;
}

}


@media only screen and (max-width: 420px) {

.article .buttons{
  display: block;
  margin-top: 0;
}
.article button{
  width: 100%;
  margin: 10px auto 0;
}
.contractNotification{
  padding: 10px;
}
.contractButtons{
  display: block;
}
.contractButtons button{
  width: 100%;
  display: block;
  margin: 0 auto;
  min-width: initial;
  font-size: 18px;
}
.contractButtons button.save{
  margin-top: 20px;
}
.notification ul li{
  width: 100%;
  max-width: 200px;
  margin: 0 auto 20px;
}

}


@media only screen and (max-width: 360px) {

.contractsList h4{
  text-align: center;
  line-height: 1.3;
}
.contractsList h4 a{
  position: relative;
  display: block;
  margin-top: 20px;
}


}


@media only screen and (max-width: 320px) {

.contractButtons{
  margin-top: 50px;
}

}


@media only screen and (max-width: 300px) {

.modal{
  width: 100%;
}
.formForm, .formInfo{
  padding: 50px 20px;
}
.form .js-Modal{
  display: inline-block;
}
.block::before {
  opacity: 0.85;
}
.block h2{
  top: 50%;
  transform: translateY(-50%);
  line-height: 1.5;
  padding: 0;
  background-color: transparent;
}
.checkbox{
  height: auto;
  flex-wrap: wrap;
  justify-content: center
}
.checkbox input{
  margin: 0;
}
.checkbox span{
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.headerLogo{
  width: 100%;
}
.headerLogo a{
  max-width: 70%;
}
table.dataTable tr td:first-child {
  text-align: center;
}
table.dataTable tr td:nth-child(1)::before {
  display: block;
}
.dataTables_filter input{
  max-width: calc(100% - 10px);
  margin: 5px 5px 0 !important;
}

}


@media only screen and (max-width: 240px) {

table.dataTable tr td a{
  margin: 2% auto;
}
.dataTables_filter input{
  max-width: calc(100%);
  margin: 5px 0 0 !important;
}

}