*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}


.wrap{
  max-width: 100%;
  left: 0px;
  right: 0px;;
}
.subgallery-row{
  float:left;
  width:100%;
  display:block;
  margin-top:15px;
  margin-bottom:15px;
  padding-top:20px;
  padding-bottom:20px;
}

/*-------------------------Tear Drops on My Guitar---------------------*/
.teardrop{
  height:350px;
  width:350px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 5%;
  box-shadow:0px 3px 8px rgba(0,0,0,0.3);
  float:left;
  margin-right:10px;
  position:relative;
  transition:all .5s ease;
  -webkit-filter:grayscale(1);
}
.hover_span{
  display:block;
  text-align:center;
  position:absolute;
  top:100%;
  width:100%;
  color:#fff;
  opacity:0;
  font-size:36px;
  transition:all .3s linear;
}
.hover_span span{
  display:block;
}
.hover_span i{
  font-size:65px;
}
@keyframes wiggle {
    0%,100% {
      -webkit-transform:rotate(4deg);
    transfrom:rotate(4deg);
    }
      50% {
      -webkit-transform:rotate(-4deg);
    transform:rotate(-4deg);
    }

}
.teardrop:hover, .teardrop.hover_effect{
  -webkit-filter:grayscale(0);
  filter:grayscale(0);
}
.teardrop:hover .hover_span, .teardrop.hover_effect{
  top:38%;
  opacity:1;
}
.teardrop:hover .hover_span i, .teardrop.hover_effect{
  animation-name: wiggle;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: .3s;
}
.tear1{
 background:url('images/reference/maling_galerija_reference_1.jpg')repeat scroll 100% 0% / cover;
 background-size:cover;
}
.tear2{
  background:url('images/reference/maling_galerija_reference_2.jpg');
  background-size:cover;
}
.tear3{
  background:url('images/reference/maling_galerija_reference_3.jpg');
  background-size:cover;
}
.tear4{
  background:url('images/reference/maling_galerija_reference_4.jpg');
  background-size:cover;
}
.tear5{
  background:url('images/reference/maling_galerija_reference_5.jpg');
  background-size:cover;
}
.tear6{
  background:url('images/reference/maling_galerija_reference_6.jpg');
  background-size:cover;
}
.tear7{
  background:url('images/reference/maling_galerija_reference_7.jpg');
  background-size:cover;
}
.tear8{
  background:url('images/reference/maling_galerija_reference_8.jpg');
  background-size:cover;
}

/*--------------------End Tear Drops on my Guitar--------------------*/
.rounded_square{
  height:auto;
  display:block;
  float:left;
  height:350px;
  width:350px;
  margin-right:10px;
  border-radius:5px;
  box-shadow:0px 2px 5px rgba(0,0,0,0.5);
  position:relative;
  overflow-x:hidden;
}
.rounded_square .hover_span{
  display:block;
  opacity:1;
  top:40%;
  position:absolute;
  width:90%;
  text-align:left;
  background:#262626;
  padding:5px 10px;
  font-size:26px;
  border-radius:3px;
  left:-5px;
  transition:all .3s linear;
}
.rounded_square .slide_in{
  position:absolute;
  top:60%;
  background:#f1f2f3;
  right:-100%;
  font-size:25px;
  padding:5px 10px;
  border-radius:3px;
  transition:all .3s linear;
  opacity:0;
}
.rounded_square:hover, .slide_in{
  right:-2%;
  opacity:1;
}
.rounded_square:hover .tear1{
  background-size:100%;
  background-cover:100%;
}
.rounded_square:hover .hover_span{
  transition: all .3s cubic-bezier(0.330, 0.975, 0.245, 0.910);
  -webkit-transition: all .3s cubic-bezier(0.330, 0.975, 0.245, 0.910); background:#da281d;
}

/*---------------------------Rounded Square------------------------*/



.bordered_square{
  height:350px;
  width:350px;
  float:left;
  margin-right:10px;
  border: 2px solid rgb(0, 160, 227);
  position:relative;
  overflow:hidden;
  margin: 0px 10px 20px;
}
.bordered_square .mask,
.bordered_square .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.bordered_square .mask-1, 
.bordered_square .mask-2 {
    background-color: rgba(52, 152, 219,0.5);
    height: 475px;
    width: 475px;
    background: rgba(52, 152, 219,0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
.bordered_square .mask-1 {
    left: auto;
    right: 0;
    -webkit-transform: rotate(56.5deg) translateX(-180px);
    -moz-transform: rotate(56.5deg) translateX(-180px);
    -o-transform: rotate(56.5deg) translateX(-180px);
    -ms-transform: rotate(56.5deg) translateX(-180px);
    transform: rotate(56.5deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.bordered_square .mask-2 {
    top: auto;
    bottom: 0;
    -webkit-transform: rotate(56.5deg) translateX(180px);
    -moz-transform: rotate(56.5deg) translateX(180px);
    -o-transform: rotate(56.5deg) translateX(180px);
    -ms-transform: rotate(56.5deg) translateX(180px);
    transform: rotate(56.5deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.bordered_square .content {
        background: rgb(0, 160, 227,0.9);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    overflow: hidden;
    -webkit-transform: rotate(0deg) translate(-134px, 178px);
    -moz-transform: rotate(0deg) translate(-134px, 178px);
    -o-transform: rotate(0deg) translate(-134px, 178px);
    -ms-transform: rotate(0deg) translate(-134px, 178px);
    transform: rotate(0deg) translate(-134px, 178px);
    -webkit-transform-origin: 20% 145%;
    -moz-transform-origin: 20% 145%;
    -o-transform-origin: 20% 145%;
    -ms-transform-origin: 20% 145%;
    transform-origin: 20% 145%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.bordered_square h2 {
    background-color: rgba(52, 152, 219,0.5);
    margin-top: 5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 10px;
   padding-top:10px;
   padding-bottom:10px;
   background: rgba(52, 152, 219,1);
   margin-top:35%;
}
.bordered_square p {
   font-size: 13px;
   color: #fff;
   padding: 0px;
   text-align: center;
   width:85%;
   display:block;
   margin:5px auto;
   text-transform:lowercase;
   font-weight:300;
}

.bordered_square a.info {
   display:block;
   background-color:transparent;
   text-decoration: none;
   padding: 7px 14px;
   color: #FFF;
   border-radius:3px;
   width:60%;
   margin:0 auto;
   text-align: center;
   text-transform: uppercase;
   transition:all .4s ease-in-out;
   font-weight:600;
   font-size: 16px;
   border:1px solid #FFF;
}
.bordered_square a.info:hover{
  background:#FFF;
  color:rgba(0,0,0,0.9);
}
.bordered_square:hover .content {
    height: 100%;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 0px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.bordered_square:hover .mask-1, .bordered_square:hover .mask-2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.bordered_square:hover .mask-1 {
    -webkit-transform: rotate(45deg) translateX(1px);
    -moz-transform: rotate(56.5deg) translateX(1px);
    -o-transform: rotate(56.5deg) translateX(1px);
    -ms-transform: rotate(56.5deg) translateX(1px);
    transform: rotate(56.5deg) translateX(1px);
}
.bordered_square:hover .mask-2 {
    -webkit-transform: rotate(45deg) translateX(0px);
    -moz-transform: rotate(56.5deg) translateX(0px);
    -o-transform: rotate(56.5deg) translateX(-1px);
    -ms-transform: rotate(56.5deg) translateX(-1px);
    transform: rotate(56.5deg) translateX(-1px);
}


/*------------------End Bordered_square-------------------*/


.rectangle{
   width: 350px;
   height: 200px;
   margin-right: 10px;
   float: left;
   border: 10px solid #292929;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff ;
}

.rectangle .mask,
.rectangle .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.rectangle img {
   display: block;
   position: relative;
   max-width:100%;
}
.rectangle h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.rectangle a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   border-radius:5px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.rectangle a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
.rectangle img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.rectangle .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.rectangle h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background: transparent;
   margin: 20px 40px 10px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

.rectangle a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.rectangle:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.rectangle:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.rectangle:hover h2,
.rectangle:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

/*---------------------Flip Hover--------------------------*/


.flip {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
    perspective: 1000;
}
  /* flip the pane when hovered */
  .flip:hover .flipper, .flip.hover .flipper {
      -webkit-transform: rotateY(180deg);
  -moz-transform: rotatetY(180deg);
  transform: rotateY(180deg);
  }

.flip, .front, .back {
    width: 350px;
    height: 350px;
    margin-right:10px;
    float:left;
}
.flipper {
    transition: 0.55s;
  -webkit-transfrom-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
  border-radius:3px;
  box-shadow:5px 1px 10px rgba(0,0,0,0.3);
}
.back{
  background:#ecf0f1;
  padding:10px 5px;
}
.front {
    z-index: 2;
  overflow:hidden;
}
.front img{
  max-width:100%;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  transition-delay:.2s;
}
.flip:hover .front{
  z-index:1;
}
.flip:hover .back{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  z-index:2;
}
.flip .mask {
   background-color: rgba(255, 255, 255, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   transition-delay: 0.5s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   width:100%;
   height:100%;
}
.flip:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.flip .mask h2{
  text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 20px 20px 20px;
}
.flip .mask p{
  font-style: italic;
  font-size: 12px;
  color: #292929;
  padding: 5px;
  text-align: center;
  width:85%;
  display:block;
  margin:5px auto;
}
.flip .mask a.info {
   display:block;
   margin:10px auto;
   text-decoration: none;
   padding: 7px 14px;
   background: transparent;
   color: #292929;
   width:80%;
   border:3px solid;
   border-radius:5px;
   text-align: center;
}
.flip .mask a.info i{
  float:left;
  margin-left:5px;
  font-size:20px;
}
/*-------------------------------------Slide Hover ----------------------------*/



.slide_hover .gallery_item{
  width:350px;
  float:left;
  margin-right:10px;
  height:300px;
  position:relative;
  overflow:hidden;
  border:4px solid #292929;
}
.slide_hover .gal_image{
  height:175px;
  background: url('http://www.gratisography.com/pictures/86.jpg') center;
  background-size:cover;
  overflow:hidden;
  transition: all 0.55s linear;
}
.slide_hover .gal-content{
  width:100%;
  height:75px;
  background:#F1F2F3;
  padding-top:20px;
  transition: all 0.55s;
  -webkit-transfrom-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  backface-visibility: hidden;
}
.slide_hover .gallery_item:hover .gal-content{
   -webkit-transform: rotateX(90deg);
  transform:rotateX(90deg);
}
.slide_hover .gallery_item:hover .gal_image{
  height:100%;
}
.slide_hover .gallery_item:hover .gal-show{
  top:0;
  opacity:1;
  background:rgba(0,0,0,0.3)
}
.slide_hover .gal-content .icon{
  position:absolute;
  width:50px;
  height:50px;
  display:block;
  background:#f1f2f3;
  border-radius:50%;
  top:-25px;
  left:40%;
  font-size:26px;
  padding-top:10px;
  text-align:center;
  z-index:100;
  box-shadow: 0 0px 0px 1px #ccc;
}
.slide_hover .gal-show{
  position:absolute;
  width:100%;
  height:100%;
  top:100%;
  padding:15px;
  opacity:0;
  transition: all 1s ease;
  -webkit-transition-delay: background .3s;
  color:#FFF;
}
.slide_hover .gal-show p{
  text-align: center;
}
.slide_hover .gal-show a.button{
  display: block;
  vertical-align: top;
  padding: 8px 14px 10px;
  margin: 5px auto 15px auto;
  max-width:80%;
  border: 2px solid;
  color: white;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 300;
  text-align:center;
  text-decoration: none;
}
.slide_hover .gal-show h2{
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.slide_hover .gal-content .headline{
  display:block;
  font-size:24px;
  text-align:center;
  padding-top:7px;
}

/*-----------------------top hover-----------------------*/
.top_drop .gallery_item{
  width:350px;
  height:300px;
  border:1px solid #ccc;
  overflow:hidden;
  position:relative;
  float:left;
  margin-right:10px;
}
.top_drop .gal_image{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.top_drop .gal_content{
  padding:12px 5px;
  background:#ecf0f1;
  position:relative;
  transition: all 0.55s;
  -webkit-transfrom-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 3;
   -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.top_drop .gal_content span{
  display:block;
  text-align: center;
}
.top_drop .gal_content .headline{
  font-size:24px;
  padding-bottom:7px;
  text-align: center;
}
.top_drop .gal_show{
  position:absolute;
  background-color: rgba(236, 240, 241, 0.6);
  top: -200px;
  width:100%;
  height:100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0.5s;
  -moz-transition: all 0.3s ease-out 0.5s;
  -o-transition: all 0.3s ease-out 0.5s;
  -ms-transition: all 0.3s ease-out 0.5s;
  transition: all 0.3s ease-out 0.5s;
}
.gal_show h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.gal_show p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
   font-style: italic;
   font-size: 12px;
   position: relative;
   padding: 10px 20px 20px;
   text-align: center;
}
.gal_show a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
   display: block;
   margin:0 auto;
   text-decoration: none;
   padding: 7px 14px;
   border:2px solid;
   border-radius: 3px;
   color: #000;
   text-align: center;
   width:80%;
   text-transform: uppercase;
}

.top_drop .gallery_item:hover .gal_content{
   -webkit-transform: rotateX(-90deg);
  transform:rotateX(-90deg);
}
.top_drop .gallery_item:hover .gal_show{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}
.top_drop .gallery_item:hover .gal_show h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.top_drop .gallery_item:hover .gal_show p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.top_drop .gallery_item:hover .gal_show a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}

/*-----------------------Icon gallery---------------------*/

.icon_gallery{
  width:350px;
  height:100px;
  border:4px solid;
  margin-right:10px;
  float:left;
  position:relative;
  overflow:hidden;
  transition: all 0.55s;
  }
.icon_gallery .content{
  float: left;
  background:rgba(255,255,255,0.8);
  transition: all 0.55s;
  -webkit-transfrom-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  backface-visibility: hidden;
}
.icon_gallery .icon{
  font-size:40px;
  width:19%;
  text-align: center;
  padding-top:25px;
}
.icon_gallery .headline{
  float:left;
  padding-left:10px;
  width:80%;
  font-size:14px;
  padding-top:7px;
}
.icon_gallery.left .icon{
  float:left;
  margin-left:1%;
}
.icon_gallery.right .icon{
  float:right;
  margin-right:1%;
}
.icon_gallery .mask{
  width:100%;
  height:0px;
  opacity:0;
  position:absolute;
  bottom:0;
  left:0;
  transition: all 0.55s;
}
.icon_gallery:hover .content{
  -webkit-transform-origin:0% 0%;
  -moz-transform-origin:0% 0%;
  transform-origin:0% 0%;
  -moz-transform:rotateX(-90deg);
  -webkit-transform:rotateX(-90deg);
  transform:rotateX(-90deg);
}
.icon_gallery:hover .mask{
  height:100%;
  opacity:1;
}
.icon_gallery .mask a.info{
  display: block;
  margin:25px auto;
  text-decoration: none;
  padding: 7px 14px;
  border:2px solid;
  border-radius: 3px;
  color: #FFF;
  text-align: center;
  width:80%;
  transition: all 0.55s;
  text-transform: uppercase;
}
.icon_gallery .mask a.info:hover{
  background:#000;
  color:#FFF;
  border:2px solid transparent;
}
/*----------------------------------Simple----------------------------------------*/

.simple{
  width:350px;
  height:350px;
  background:transparent;
  float:left;
  margin-right:10px;
}
.simple h1{
  font-size:30px;
  line-height:1.3;
  margin:0;
  margin-bottom:10px;
  border-bottom:2px solid rgba(0,0,0,0.2);
}
.simple .image_cont{
  width:100%;
  height:200px;
  background-size:cover;
  border:3px solid #FFF;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0, 0.2);
  overflow:hidden;
  transition:all .3s ease;
  cursor:pointer;
}
.simple .image_cont:hover{
  -webkit-transform:scale(.9);
     -moz-transform:scale(.9);
          transform:scale(.9);
}
.simple p{
  font-size: 11px;
  line-height: 1.3;
  margin:10px 0px;
  padding-bottom: 15px;
  border-bottom:2px solid rgba(0,0,0,0.2);
  font-style: italic;
}
.simple a{
  float:left;
  color:#cd2803;
  text-decoration: underline;
  width:50%;
  transition:all .4s ease;
}
.simple ul.social{
  float:right;
  width:50%;
  list-style: none;
  margin:0;
}
.simple .social li{
  width:30%;
  margin-right:1%;
  float:left;
  display:inline-block;
  color:rgba(0,0,0,0.5);
  text-align: center;
}
.simple a:hover{
  color:#424448;
}
/*---------------------------------------------Icon Top---------------------------------*/
.icon_top{
  width:100%;
  height:320px;
  float:left;
  margin-right:10px;
  cursor:pointer;
  margin-bottom:20px;
  /*background: #bdc3c7;
  border:1px solid #2980b9;
  box-shadow:0px 2px 3px rgba(0,0,0,0.3);
  border-radius:3px;
  padding:15px;*/
}
.icon_top .icon{
  width:75px;
  height:75px;
  overflow: hidden;
  color:#2980b9;
  font-size:36px;
  padding-top:5px;
  text-align: center;
  border-radius:50%;
  margin:10px auto 0px;
  transition: all .2s linear;
  position:relative;
}
.icon_top .icon i.fa{
  position:absolute;
  height:36px;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.icon_top:hover .icon{
  -webkit-transform:translateY(-10px);
  -moz-transform:translateY(-10px);
  transform:translateY(-10px);
}
.icon_top h1{
  font-size:24px;
  display:block;
  text-align:center;
  color:#2980b9;
}
.icon_top p{
  font-size:20px;
  text-align: center;
  line-height:1.3;
  color:#2980b9;
  padding: 0px 10px 0px 10px;
}
.icon_top a{
  display:block;
  width:80%;
  text-align:center;
  margin:5px auto;
  font-weight:bold;
  color:#2980b9;
  position:relative;
  font-size:14px;
  transition: all .3s ease;
}
.icon_top a:after{
  content:'\f061';
  position:absolute;
  right:35px;
  font-family:'FontAwesome';
  color:#2980b9;
  font-size:12px;
  top:3px;
}
.icon_top a:hover{
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
}

/*--------------------------------------Image-n-text-------------------------------------*/

.image_w_text{
  width:350px;
  height:350px;
  background:transparent;
  float:left;
  margin-right:10px;
}  
.image_w_text .image_cont{
  width:100%;
  height:200px;
  transition:all .3s ease-in-out;
  box-shadow:0px 2px 3px rgba(0,0,0,0.3);
}
.image_w_text h1{
  font-size:24px;
  color:#424448;
  font-weight:300;
}
.image_w_text p{
  font-size:14px;
  line-height:1.3;
  border-top:1px solid rgba(0,0,0,0.2);
  padding:10px 5px;
}
.image_w_text:hover .image_cont{
  -webkit-transform:translateY(-10px);
  -moz-transform:translateY(-10px);
  transform:translateY(-10px);
}

/*------------------------------icon left-------------------------------*/

.icon_left{
  width:350px;
  height:200px;
  float:left;
  margin-right:10px;
}

.icon_left .icon{
  float:left;
  width:15%;
  padding-top:12px;
  font-size:35px;
  color:#2980b9;
  text-align: center;
}
.icon_left .text{
  width:85%;
  float:left;
  padding:10px;
}
.icon_left .text h1{
  font-size:18px;
  font-weight:bold;
  margin:0;
  color:#2980b9;
  margin-bottom:10px;
}
.icon_left .text p{
  font-size:12px;
  font-style: italic;
  line-height: 1.3;
}
.icon_left .text a{
  display: block;
  margin:10px auto;
  color:#2980b9;
  transition:all .3s ease;
  font-size:12px;
  font-weight:bold;
  position:relative;
}
.icon_left a:hover:after{
  content:'\f061';
  position:absolute;
  left:70px;
  font-family:'FontAwesome';
  color:#2980b9;
  font-size:12px;
  top:3px;
}
.icon_left a:hover{
  -webkit-transform:translateX(10px);
  -moz-transform:translateX(10px);
  transform:translateX(10px);
}


/*----------------------------Image/video-----------------*/

.sub_nav{
  width:350px;
  height:520px;
  border-radius:3px;
  background:#FFF;
  float:left;
  margin-right:10px;
  overflow:hidden;
  border-bottom:2px solid #d1d1d2;
  transition:all .3s ease;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
.sub_nav:last-child{
  margin:0;
}
.sub_nav:hover{
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
          transform:translateY(-10px);
}
.sub_nav .image_cont{
  width:100%;
  height:220px;
  overflow:hidden;
  float:left; 
  position:relative;
}
.sub_nav .image_cont .image img{
  max-height: 240px;
  display:block;
  margin:0 auto;
}
.sub_nav .image_cont iframe{
  width:100%;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  border:0;
}
.sub_nav .text_cont{
  position:relative;
  width:100%;
  height:300px;
  padding:20px 10px;
  float:left;
}
.sub_nav .text_cont .icon{
  font-size: 30px;
  text-align: center;
  padding-top:12px;
  background: #fb3c2d;  
  color: #fff;  
  width:55px;
  height:55px;
  border-radius: 50%;
  position: absolute;
  left: 45%;
  top: -20px;
  z-index: 10;
}
.sub_nav .text_cont h1{
  display:block;
  text-align: center;
  font-size:24px;
  margin-top:30px;
  color:#FFF;
  font-weight:300;
  background:rgba(251,60,45,1.0);
  padding-top:5px;
  padding-bottom: 5px;
}
.sub_nav .text_cont p{
  font-size:16px;
  position:relative;
  color:#424448;
  text-align: center;
  height:100px;
  overflow:hidden;
}
.sub_nav .text_cont a.btn{
  background:#fb3c2d;
  padding:10px;
  display:block;
  width:60%;
  color:#FFF;
  text-align: center;
  border-radius:5px;
  letter-spacing: 1px;
  text-decoration: none;
  margin:5px auto;
  border-radius: 1px solid transparent;
  transition:all .5s linear;
}
.sub_nav .text_cont a.btn:hover{
  background:transparent;
  color:#fb3c2d;
  border:1px solid #fb3c2d;
}



.maling-logo{
width:400px;
height:125px;
text-align:center;
position: relative;
}
.maling-logo-white {
width: 200px;
height: 45px;
text-align: center;
position: relative;
margin: -28px;
}


@media (max-width: 1280px) {

.bordered_square {
    height: 250px;
    width: 100%;
    margin:10px auto;
    border: 2px solid rgb(0, 160, 227);
    overflow: hidden;
}

.home-reference{
height: 100px;
width: 100%;
margin-left: 0px;
margin-right: 0px;
}

.container-pad{
padding-top:620%;
}
.maling-logo{
width:300px;
height:130px;
text-align:center;
position: relative;
}


}




.kategorije{
font-family:'Source Sans Pro', sans-serif;
text-transform:uppercase;
letter-spacing:1px;
color:#FFF;
padding:15px 0px 0px 15px;
font-size:20px;
font-weight:300;
z-index:1;
}




.bordered_square:hover .kategorije{color:transparent;}

@media (min-device-width:768px) and (max-device-width:1024px){

.box1{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_1.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}


.box1_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box1_over:hover, .box1_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}


.box2{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_2.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}



.box2_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box2_over:hover, .box2_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.box3{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_3.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}



.box3_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box3_over:hover, .box3_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.box4{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_4.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}



.box4_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box4_over:hover, .box4_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.box5{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_5.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}


.box5_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box5_over:hover, .box5_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}


.box6{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_6.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}



.box6_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box6_over:hover, .box6_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.box7{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_7.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;
}



.box7_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box7_over:hover, .box7_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.box8{
width:100%;
height:500px !important;
background-repeat:no-repeat;
background:url(images/projekti/maling_projekti_naslovna_8.jpg);
background-size: contain;
background-size: cover !important;
background-position:center center;

}



.box8_over{
width:100%;
height:500px !important;
background:rgba(1,160,226,0.9);
}

.box8_over:hover, .box8_over.hover_effect{
width:100%;
height:500px !important;
background:rgba(1,160,226,0);
rule:properties;
}

.text-center-title {
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-family: 'Russo One', sans-serif;
    padding: 30% 50px 0px;
}
}

@media(min-device-width:200px) and (max-device-width:500px){

.container-pad {
    padding-top: 645%;
}
.kategorije{
font-family:'Source Sans Pro', sans-serif;
text-transform:uppercase;
letter-spacing:1px;
color:#FFF;
padding:15px 0px 0px 15px;
font-size:35px;
font-weight:300;
z-index:1;
}
h1.title1 {
    color: #FFF;
    padding: 0px 14px 8px;
    font-family: "Russo One",sans-serif;
    font-size: 3em;
    font-weight: 900 !important;
}
h1.title2 {
    color: #000;
    padding: 0px 14px 8px;
    font-family: "Russo One",sans-serif;
    font-size: 2.5em;
    font-weight: 900 !important;
    letter-spacing: 0px;
}
p.excerpt {
	font-size: 1rem;
	line-height: 20px;
	font-family: "Source Sans Pro",sans-serif;
	position: absolute;
	left: 15px;
	right: 15px;
}
footer.major {
    padding-left: 0em;
    padding-right: 0em;
    width: 100% !important;
    margin-top: 15px;
}


.text-center-title {
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-family: 'Russo One', sans-serif;
    padding: 35% 50px 0px;
}
* {
    box-sizing: inherit;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease;
}
.navbar-nav {
    margin: 25.5px -15px;
}


.btn {
    padding: -1px 0px 0px;
    margin-left: 0%;
}
.btn-5 {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, .5);
    outline-offset: 0px;
    text-shadow: none;
    /* transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); */
}
.btn {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 45px;
    margin: 0px 3px 10px;
    max-width: 40%;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100%;
}
.bordered_square h2 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    position: relative;
    font-size: 12px;
    padding-top: 0px;
    padding-bottom: 10px;
    background: #3498DB none repeat scroll 0% 0%;
    margin-top: 0%;
}
.bordered_square p {
    font-size: 15px;
    color: #fff;
    padding: 5px;
    text-align: center;
    width: 85%;
    display: block;
    margin: 5px auto;
    text-transform: lowercase;
}
.bordered_square a.info {
    display: block;
    background-color: transparent;
    text-decoration: none;
    padding: 1px 13px;
    color: #FFF;
    border-radius: 0px;
    width: 50%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    transition: all .4s ease-in-out;
    font-weight: 600;
    border: 1px solid #FFF;
    font-size: 22px;
}
}


@media(max-width:500px){
.bordered_square h2 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding-top: 0px;
    padding-bottom: 10px;
    background: #3498DB none repeat scroll 0% 0%;
    margin-top: 20%;
}
}

@media(max-width:900px){
.bordered_square h2 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    position: relative;
    font-size: 12px;
    padding-top: 0px;
    padding-bottom: 10px;
    background: #3498DB none repeat scroll 0% 0%;
    margin-top: 0%;
}

}


@media (min-device-width:900px) and (max-device-width:1280px){

.bordered_square h2 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding-top: 0px;
    padding-bottom: 10px;
    background: #3498DB none repeat scroll 0% 0%;
    margin-top: 12%;
}

.bordered_square {
    height: 250px;
    width: 50%;
    margin: 10px auto;
    border: 3px solid #00A0E3;
    border-radius: 0px;
    overflow: hidden;
}

.container-pad {
    padding-top: 120% !important;
}

}

@media(min-device-width:420px) and (max-device-width:500px){
.container-pad {
    padding-top: 500% !important;
}
}

@media(min-device-width:900px) and (max-width:1280px){
.container-pad {
    padding-top: 110% !important;
}
}




.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

/*iPAD */
@media (min-device-width:768px) and (max-device-width:1280px){

.bordered_square h2 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding-top: 0px;
    padding-bottom: 10px;
    background: #3498DB none repeat scroll 0% 0%;
    margin-top: 12%;
	line-height: 20px;
}

.bordered_square {
    height: 250px;
    width: 50%;
    margin: 10px auto;
    border: 3px solid #00A0E3;
    border-radius: 0px;
    overflow: hidden;
}

.container-pad {
    padding-top: 120% !important;
}

}


.kategorije{
font-family:'Source Sans Pro', sans-serif;
text-transform:uppercase;
letter-spacing:1px;
color:#FFF !important;
padding:15px 0px 0px 15px;
font-size:20px;
font-weight:300;
z-index:1;
}



	.collapse {
	  display: none;
	}
	.collapse.in {
	  display: block;
	}
	tr.collapse.in {
	  display: table-row;
	}
	tbody.collapse.in {
	  display: table-row-group;
	}
	.collapsing {
	  position: relative;
	  height: 0;
	  overflow: hidden;
	  -webkit-transition-timing-function: ease;
		   -o-transition-timing-function: ease;
			  transition-timing-function: ease;
	  -webkit-transition-duration: .35s;
		   -o-transition-duration: .35s;
			  transition-duration: .35s;
	  -webkit-transition-property: height, visibility;
		   -o-transition-property: height, visibility;
			  transition-property: height, visibility;
	}

	

@media (min-width:1300px) and (max-width:1500px){
.container2 {
    width: 100%;
}

.home-reference {
    width: 1200px;
    margin:0 auto 0 auto;
	float:none;
}
}


@media (min-width:600px){
.alert-warning {
	display:none;	
}
.alert {
    display:none;
}
}



/* maling logo | none + new class */
@media (max-width:1500px){
.maling-logo{
display:none;
}
.logo{
width:300px;
height:130px;
text-align:center;
position: relative;
display:none !important;
margin-left: auto;
margin-right: auto;
z-index: 15;
}
}

.logo{
display:none;
}


/* media for container spb */
@media (max-width:1500px){
.spb{
padding-bottom: 0px !important;
}
.spt {
    padding-top: 600px !important;
}
.unutra {
    z-index: 0;
    padding-bottom: 400px;
    position: relative;
    max-width: 1170px;
    text-align: center;
}
}

@media (max-width:1200px){
.spt {
    padding-top: 500px !important;
}
}

@media (max-width:800px){
.spt {
    padding-top: 350px !important;
}
}

@media (max-width:400px){
.spt {
    padding-top: 200px !important;
}
}

@media (max-width:1000px){
	
	.logo {
    display: block !important;
	}
}

@media (max-width:550px){
	.logo {
    display: block !important;
	top:100px;
	width: 75%;
	padding-bottom: 10%;
	}
}