/* ===========================================================
 * Filename: custom.css
 * Version: 2.0
 * Author: web360
 * =========================================================== */
.bg-primary { background-color: #45b7d2 !important; color: #fff; }
.bg-secondary { background-color: #45b7d2 !important; color: #fff; }
.bg-third { background-color: #fff !important; color: #fff; }
.bg-fourth { background-color: #2a5297 !important; color: #fff; }
.bg-light-green { background-color: #CFD1A2 !important; color: #fff; }
.bg-black { background-color: #b03a50 !important; color: #fff; }
.bg-footer { background-color: #282E3C !important; color: #7bc8ff; }
.bg-dark-opacity { background-color: rgba(0, 0, 0, 0.1); }
.bg-pink { background-color: #e24e68; color: #fff; }
.bg-arba { background-color: #fff; color: #ec1d3d; }

.container100 { width: 100% !important; max-width: 100% !important; margin: 0 auto; }
.container90 { width: 90% !important; max-width: 90% !important; margin: 0 auto; }
.container85 { width: 85% !important; max-width: 85% !important; margin: 0 auto; }
.container80 { width: 80% !important; max-width: 80% !important; margin: 0 auto; }

.text-primary { color: #282E3C !important; }
.text-secondary { color: #90783C !important; }
.text-white { color: #fff !important; }
.text-black { color: #000000 !important; }

.btn-primary { background-color: #b03a50 !important; border-color: #b03a50 !important; }
.btn-primary:hover { background-color: #e24e68 !important; border-color: #e24e68 !important; }

.container-bg1 {background: url(../images/elements/lijevo.jpg) no-repeat;}
.container-bg2 {background: url(../images/elements/desno.jpg) no-repeat;}
.bg-white { background-color: white; }
.height {height: 800px;}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #e12c3d;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #bf2635;
}

header {padding-bottom: 75px;}

.logo{position: absolute; top: 0px; left: 50px; z-index: 995;}

.carousel-inner{ width:100%;}


.clear {clear: both;}

.nav-item {padding-left: 10px; padding-right: 10px;}

h1 {padding-bottom: 50px; padding-top: 20px;}

h2 {font-weight: bold; text-align: center; padding-top: 30px;}

h3 {font-size: 22px; padding-bottom: 10px; padding-top: 50px;}

.img-size {width: 100%; max-height: 280px !important; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); transition: .5s all ease-in-out;}

footer {padding-top: 50px;}

.signature {padding-left: 150px; padding-top: 35px; padding-bottom: 35px; color: #bdbdbd;}

.box{
    text-align: center;
    overflow: hidden;
    position: relative;
}
.box:before{
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease 0s;
}
.box:hover:before{ opacity: 1; }
.box img{
    width: 100%;
    height: auto;
}
.box .box-content{
    width: 100%;
    padding: 0 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scale(0.5) rotateX(360deg);
    transition: all 0.3s ease 0s;
}
.box:hover .box-content{
    opacity: 1;
    transform: scale(1) rotateX(0deg);
}
.box .title{
    font-size: 22px;
    font-weight: 700;
    color: #0afbc7;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-top: 15px;
}
.box .post{
    display: block;
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
.box .icon{
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: scale(0.5) rotateX(360deg);
    transition: all 0.3s ease 0.3s;
}
.box:hover .icon{
    opacity: 1;
    transform: scale(1) rotateX(0deg);
}
.box .icon li{ display: inline-block; }
.box .icon li a{
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    color: #000;
    margin-right: 10px;
    transition: all 0.3s ease 0.3s;
}
.box .icon li a:hover{
    background: #0afbc7;
    color: #fff;
    transition-delay: 0s;
}
@media only screen and (max-width:990px){
    .box{ margin-bottom: 30px; }
}

.div-border{
  box-shadow: 1px 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: .5s all ease-in-out;
}

.category-header {margin-bottom: 200px;}

.img-100 {width: 100%; max-height: 700px;}

.lines {position: absolute; top: 150px; right: 0px;}

.img-100 {width: 100%; height: 700px;}

.crop {
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.crop img {
    width: 100%;
  height: 700px;
}

.more {font-size: 32px; font-weight: bold;}

.about-us {font-size: 18px;}

.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

#content #map {margin-top: 60px;}

#about-us {margin-top: 100px;}

#map {margin-top: 5px;}

.map-top100 {padding-top: 100px;}

#contact {margin-top: 100px;}

.lines {position: absolute; top: 150px; right: 0px; z-index: -1;}

a.nav-link {color:#000;}

a.nav-link.active {color:#fff; background-color: #000 !important;}

.overlay { background-color: #fff; width: 100%; height: 100%; position: fixed; z-index: 999999;}
.overlay .centerContainer { position: absolute; top: 40%; width: 100%; text-align: center; margin: 0 auto; }
.overlay .centerContainer img { display: block; margin-top: 30px; text-align: center; margin: 0 auto; }
.overlay .centerContainer i { display: block; margin-top: 30px; color: #000; }

.fa-facebook-official { color: #2a5297; }

.navbar {background-color: #fff !important; padding-top: 50px; padding-right: 50px;}

.more-img {color: #000;}

.more-img:hover {color: #000;}

.awesome {color: #2e42ba; font-size: 22px !important;}

.signature a {color: #000 !important; font-style: bold !important;}

.signature p {color: #000 !important;}

#about-us a {color: #000 !important; font-size: 40px !important;}

.web360 a {color: #000 !important; font-size: 12px;}
.web360 p {color: #000 !important; font-size: 12px;}

.aboutus h1 {font-size: 20px;}

.aboutus p {font-size: 14px; font-style: italic;}

.fa-facebook-official {color: #808080;}

.fa-facebook {color: #808080;}

#content h3 {color: #fff;}

.line {font-size: 22px; color: red;}

.project-title a {font-size: 22px; color: #000 !important;}

.project-title a:hover {text-decoration: none;}

.icon a:hover {background-color: red !important;}

.moto p {font-size: 24px !important;}

.carousel-inner {
  width: 100%;
  height: 100%;
}

.project-padding {padding-top: 100px;}

.desc-project-padding {padding-top: 7px;}