@import url("animate.css");
@import url("wallop.css");
@import url("wallop--fade.css");
@import url("../../includes/css/bootstrap-glyphicons.css");
@import url("../../bootstrap/css/bootstrap.min.css");


/*

Naš CSS
=============

Autor: Dino Ladika i Siniša Botić
Tvrtka: Insideo Services
Godina: 2015

Sadržaj:

Layout
Logo 
Typography
Slider top
Navigacija
SVG ikone
Footer
*/


/* --------------------------------------
   Layout
   -------------------------------------- */
   body {
      color: #3E4F59;
      font-family: 'Raleway', sans-serif;

   }
   
   h1 {
      font-size: 40px;
      text-align: center;
      padding:30px;
      text-transform: uppercase;
      font-family: 'Raleway', sans-serif;
   }


   .head {
      background-color: white;
      height:216px;
      border-top: 8px solid #DC3515;
   }
   
   #moreClients {
	   text-align: center;
	   text-transform: lowercase;
   }

   
   .about h1 {
      font-size: 30px;
	    font-family: 'Raleway', sans-serif;
      text-align: center;
      padding:30px;
      text-transform: uppercase;
	    color: #3E4F59;
   }
   
   #form-messages {
	  
	  padding: 15px;
	  height: 60px;
	  margin-top: 70px;
	  margin-bottom: 20px;
	  border: 1px solid transparent;
	  border-radius: 4px;
	  color: #666;
	  font: 300 26px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px; 
   }
   
   
   
   .reference h1, .radovi-gall h1 {
      font-size: 30px;
	    font-family: 'Raleway', sans-serif;
      text-align: center;
      padding:30px;
      text-transform: uppercase;
	    color: #3E4F59;
   }
   
   .alert {
	   display: none;
   }
   
   .contact h1 {
      font-size: 30px;
	    font-family: 'Raleway', sans-serif;
      text-align: center;
      padding:30px;
      text-transform: uppercase;
	    color: #3E4F59;
   }
   
   .comment {
	color: #777;
	font: 300 16px/25px "Hind",sans-serif;
	letter-spacing: 0.25px;  
   }
   
   
   .about p {
    padding: 10px 0px 10px 10px;
	color: #777;
	font: 300 16px/25px "Hind",sans-serif;
	letter-spacing: 0.25px;
   }

   .about button {
      width: 100%;
      text-align: left;
      border: none;
      background-color: #F5F5F5;
      padding-top: 8px;
      padding-bottom: 8px;
   }
   
   .about-btn-plus {
      float:right;
   }

   #about-img {
      width: 100%;
      padding: 10px;
   }

   .icon-section {
      padding: 50px;
      margin-top: 60px;
      text-align: center;
   }

   .icon-section h4{
      text-transform: uppercase;
   }

   .para p{
      /* border-bottom: 1px solid #E5E5E5; */
      padding-bottom: 30px;
   }

   .para-icn {
      font-size: 50px;
      color: black;

   }

   .partneri {
      text-align: center;
      margin-bottom: 90px;
   }

   .partneri h3 {
      line-height: 28px;
      font-weight: bold;
   }

   .partneri h3 li{
      list-style-type: square;
      color: #DC3515;
      font-size: 26px;
      vertical-align: top;
   }

   .partneri h3 li span {
      font-size: 14px;
      vertical-align: middle;
      color: #3E4F59;
      line-height: 28px;
      font-weight: normal;
   }

   .partneri p {
      text-align: left;
      padding-top: 20px;
      padding-left: 50px;
      color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
   }

   .partneri img {
      width: 100%;
      padding :20px;
   }

   .reference {
	  font-family: Arial, sans-serif; 
      font-size: 14px;
	  color: white;
	  text-transform: uppercase;
	  margin-bottom: 30px;
	  
   }

   .reference ul {
      list-style-type: none;
      line-height: 30px;
   }

   .contact {
      text-align: center;
      margin-bottom: 100px;
   }
   

   .contact span {
      color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
   }

   .cont-icn {
      margin-top: 40px;
      margin-bottom: 50px;
      min-height: 120px;
      
   }
   
   .cont-icn p {
      margin-top: 15px;
      padding-bottom: 50px;
      color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
   }
   

   .inputs input {
      text-indent: 20px;
      border: 1px solid #CCCDCE;
   }

   .inputs input[type="text"]{
      width: 100%;
      height: 50px;
      margin-top: 5px;
	  color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
   }
   
   .inputs h2 {
      text-transform: uppercase;
   }

   .frm-btt {
      float: left;
      height: 40px;
      width: 80px;
      margin-top: 18px;
      background-color: #fff;
      border:1px solid #CCCDCE;
	  color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
   }
   
   .frm-btt:hover {
      background-color: red;
	  color: white;
   }

   .txt-area {
      width: 100%;
      height: 218px;
      margin-top: 30px;
      text-indent: 20px;
      border: 1px solid #CCCDCE;
	  color: #777;
	  font: 300 16px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
	  padding-top: 10px;
   }
   
   .refs {
      
      border-top: 1px solid #F0F0F0;
      background: url('../../images/bg.png') center center fixed;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
   }


   .inner-img {
      
   }

   .r {
      margin-left: 50px;
   }

	#kontakt h3 {
	line-height: 28px;
	font-weight: bold;
	text-transform: uppercase;
	}
   
   
/* --------------------------------------
   Logo
   -------------------------------------- */   
	.logo-image {
      padding-top: 70px;
   }
   
/* --------------------------------------
   Typography
   -------------------------------------- */
	
 
 .heading-line {
	width: 80px;
	height: 2px;
	display: inline-block;
	background: #FAB702 none repeat scroll 0% 0%;
 }
 
	

/* --------------------------------------
   Navigacija
   -------------------------------------- */
   .top-navigation {
      float: right;
   }

   .top-navigation ul li {
      list-style-type: none;
      display: inline;
      padding-left: 10px;
   }

   .top-navigation ul li a {
      color:#DC3515;
      text-transform: uppercase;
      font-size: 10px;
	  text-decoration: none;
      font-family: arial;
   }

   .main-navigation ul{
      background-color:#ed1c24;
      min-height: 75px;
      padding: 0px;
      text-align: center;
      margin-bottom: 30px;
   }

   .main-navigation ul li{
      display: inline-block;
      padding-left: 0px; 
      height: 75px;
      min-width:185px; 
      list-style-type: none;
      border-right: 1px solid rgba(255,255,255,0.4);

   }

   .main-navigation ul li:last-child{border-right: none;}
   
   .main-navigation ul li a {
      text-transform: uppercase;
      text-align: center;
      display: block;
      color: white;
      padding-top: 25px;
	    text-decoration: none;
      height: 100%;
   }
   
   .main-navigation ul li a:hover {
      text-decoration: none;
	  color: black;
   
   }
   
   .icon-menu {
      display: inline-block;
      background-image: none;
      text-align: right;
      cursor: pointer;
   }

   .icon-menu i {
      display: block;
      color: white;
      text-align: right;
      display: none;
      margin-top: 10px;
   }         
   
   
/* --------------------------------------
   Slider top
   -------------------------------------- */
	.main-slider {
     background: transparent url("../../images/body-bg2.jpg")
   }

   .slider-image {
      width:100%;
   }
   
   .slide-btns {
     position: relative;
	  bottom: 80px;
     float: right;
	  margin-right: 143px;
	  z-index: 999;
   }

   .slide-btns2 {
     position: relative;
     padding-top: 50%;
     margin-left: 40%;
     z-index: 2;
   }
   
   .slide-next {
    margin-left: 63px;
    position: absolute;
    background-color: #ed1c24;
    width: 60px;
    height: 60px;
    cursor: pointer;
    color: white;
}

   .slide-prev {
      position: absolute;
      background-color: #ed1c24;
      width: 60px;
      height: 60px;
      cursor: pointer;
      color: white;
   }
   
   #slide2, #slide3 {
      display: none;
   }
   
   #slide2-2 {
      display: none;
   }

   #slide2-1, #slide2-2 {
       height: auto;
   }
   

   #slide2-1 img, #slide2-2 img{
      width:33%;
      height: auto;
      float: left;
	  filter: grayscale(100%) opacity(50%);
	  filter: alpha(opacity=50); /* For IE8 and earlier */ 
	  -webkit-filter: grayscale(100%) opacity(50%);
   }
   
   #slide2-1 img:hover, #slide2-2 img:hover{
      
	  filter: none;
	  -webkit-filter: none;
   }


/* --------------------------------------
   Ikone SVG
   -------------------------------------- */
	#ikone_svg1 {
    color: #7C0D9C;
    width: 70px;
    height: 70px;
	}
	
	
/* --------------------------------------
   Footer
   -------------------------------------- */	
	.foot {
      height: auto;
      background-color: #3E4F59;
      color: white;
      padding:50px;
      font-weight: bold;
   }
   
   .foot ul {
      list-style-type: none;
      padding-left: 0px;
      line-height: 20px;
   }

   .foot .foot-li {
      list-style-type: square;
      color: #F44336;
      font-size: 26px;
      vertical-align: top;
      margin-bottom: 40px;
      margin-left: 15px;
	  font-family: Calibri, sans-serif; 
      font-size: 13px;
	  
   }
   
   .lnks {
      padding-left: 50px;
   }

   .foot .insta-img img{
      width: 80px;
      height: 80px;
      padding: 4px;
   }
   
   .foot .foot-logo {
      list-style-type: none;
      margin-bottom: 10px;

   }
   
   .foot-logo img {
      width: 100%;
      height: auto;
      margin-left: -15px;
   }

   .foot li span {
      font-size: 16px;
      vertical-align: middle;
      line-height: 28px;
      font-weight: bold;
      color: white;
   }

   .foot p {
      font-weight: normal;
	  font-family: Arial, sans-serif; 
      font-size: 12px;
	  color: #999;
   }
   
   .adrss li{
      line-height: 20px;
	  font-weight: normal;
	  color: #fff;
	  font: 300 14px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
	  text-decoration: none;
   }

   .foot-bottom {
      min-height: 50px; 
      background-color: #1F2A31;
      text-align: center;
      
   }
   
   .foot-bottom p {
      padding-top: 20px;
	  font: 300 13px/25px "Hind",sans-serif;
	  letter-spacing: 0.25px;
      width: 100%;
      color: #445057;
   }
   
   .reff {
	   color: #fff!important;
   }

   .tst {
      margin-right: 0px;
   }
   

   .red-box {
      width: 100px;
      height: 100px;
      background-color: #ed1c24;
      border-radius: 5px;
      text-align: center;
      margin: 0 auto;
   }
   
   .title_head {
	position: relative;
	margin-top: 30px;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   }
   
   .title_head:before {
	position: absolute;
	content: "";
	background-color: #F44336;
	height: 3px;
	width: 30px;
	bottom: -1px;
	left: 0px;
   }

   .red-box i {
      padding-top: 10px;
      color: white;
   }

   .social-icon {
      text-align: center;
   }
   
   .red-box > img {
	   margin-top: 20px;
   }
   
   .social-icon i {
      background-color: #3E4F59;
      padding:6px;
      width:26px;
      height: 26px;
      margin-left: 2px;
      color: #fff;
      cursor: pointer;
   }
   
   .totop {
	width: 35px;
	height: 30px;
	filter: opacity(70%);
	-webkit-filter: opacity(50%);
	position: fixed;
	bottom: 5px;
	right: 10px;
	background: transparent url("../../images/totop.png") no-repeat ;
	z-index: 999;
   }
   
   .totop:hover {
	   filter: opacity(100);
	   -webkit-filter: none;
   }
   
   .twocol a {
	  padding: 0px 0 0 15px;
	  color: #fff;
	font: 300 14px/25px "Hind",sans-serif;
	letter-spacing: 0.25px;
	  text-decoration: none;
   }
   
   .footer-social {
    float: left;
    padding: 10px 18.5px;
    color: #FFF;
    background: #1f2a31 none repeat scroll 0% 0%;
    margin-top: -65px;
    position: relative;
}
.footer-social label {
    font-size: 13px;
    margin-right: 10px;
    color: #white;
}

.footer-social a {
    margin-right: 3px;
	text-decoration: none;
}

.footer-social a i {
    padding: 0px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1.6em;
    height: 1.8em;
    width: 1.8em;
    text-align: center;
    border: none;
    color: #fff;
}

.footer-social::after {
    border-right: 9px solid #777;
    border-top: 16px solid transparent;
    content: "";
    display: block;
    height: 0px;
    left: -9px;
    position: absolute;
    top: 0px;
}

.galerija {
 margin-top: 10px;
}

.galerija img {
  width: 100%;
  max-height: auto;
  float: left;
  margin-top: 20px;
  cursor: zoom-in;
  padding-left:0px;
  overflow: hidden;
}

.row {
  margin-right: 0;
}

.portf {
  float: left;
  margin-left: calc(50% - 60px);
  margin-top: 100px;
}


#gall-2 {
  display: none;
}

.ref-list li{
  text-align: left;
}


/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {
    .ref-list{float: left;}
    .rg{float: right;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
	
	.foot .foot-li {
	margin-bottom:10px;	
	}
	
	.foot li span {
      font-size: 22px;
   }
	
	.adrss li{
    font-size: 90%;
	  padding-left: 25px;
   }
   
   .twocol a {
	   padding-left: 25px;
   }

	
	.logo-image {
    padding-top: 20px;
}

	.reference {
		font-size: 12px;
	}

	.ref-list{
    float: left;
  }

	#slider-top {
		display: none;
	}

	.frm-btt {
		margin-left: 15px;
	}
   
   .main-navigation ul li{
      display: none;
      width: 100%;
   }

   .icon-menu i {
      display: block;
      padding-top: 10px;
      padding-bottom: 10px;
   }
   
   .slide-btns2 {
     position: relative;
     margin-left: 40%;
     z-index: 2;
   } 

   .galerija img {
    width: 50%;
    padding: 15px;
   }
 
   
   .lnks {padding-left: 0;width: 100%;}
   .adss {float: left;padding: 0px;width: 100%;}
   .inst {width: 100%;position:relative;margin-top:200px;padding:0px;}
   .prt-img img {margin-top: 50px;}
}



/* Tableti sa većom rezolucijom */
@media (max-width: 1200px) {
     
 .r{margin-left:2px;}

 .main-navigation ul li{
      display: none;
      width: 100%;

   }

   .icon-menu i {
      display: block;
      padding-top: 10px;
      padding-bottom: 10px;
   }

   .slide-btns2 {
     position: relative;
     margin-left: 40%;
     z-index: 2;
   } 
}
/* Desktop računala */
@media (min-width: 1200px) {

   .main-navigation ul li {
      display:inline-block;
   }
}