@charset "utf-8";
/* CSS Document */

body 
{
  position: relative;
  font-family: 'Raleway', sans-serif;
}


.navbar-light .navbar-brand
{
	font: normal normal 700 28px/1.4em raleway,sans-serif;
    color: #092E30;
    white-space: nowrap;
    display: inline-block;
    transition: color 0.4s ease 0s;
	
}


.navbar-light .navbar-brand:hover
{
	color: #CFA13C;
	
}

.nav-right
{
	float: right;
	font-size: 10px;
	margin-right: 2%;
}

a
{
	margin-right: 10px;
	color: #31302c;
}

a:hover 
{
 	 color: #0C88C4;
}

.row
{
	text-align: center;
	
}

p
{
	font-size: 26px;
    line-height: 1.6em;
    text-align: center;
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	font: normal normal normal 20px/1.4em raleway,sans-serif;
    color: #31302C;
}


.slide-right {
    margin-left:auto;
    margin-right:auto;
}

.slide-right p {
  animation: slide-right 10s;
  font-family: 'Raleway', sans-serif;
  
  text-align: center;
    margin-left:auto;
    margin-right:auto;
}

@keyframes slide-right {
  from {
    margin-left: -300%;
    /* 
    width: 300%; 
    */
  }

  to {
    margin-left: 0;
    /*
    width: 100%;
    */
  }
}


@media screen and (max-width: 1240px) {
	.slide-right {
    	max-width: 300px !important;
	}
    .moving_txt {
    	max-width: 300px !important;
	}
}

.vl {
  border-left: 1px solid #5E5E5E;
  height: 80px;
  position: absolute;
  left: 50%;
}

.line
{
	width: inherit;
  	overflow:hidden;
	animation: line 10s;
    text-align: center;
}
.line hr
{
	border: 2px solid #8c93a1;
	border-radius: 5px;
  	overflow:hidden;
    text-align: center;
}

@keyframes line {
  from {
    margin-left: -200%;
  }

  to {
    margin-left: 0%;
    
  }
}

@media only screen and (max-width: 1240px) 
{
	@keyframes line {
	  from {
	    margin-left: -600%;
	  }

	  to {
   	    margin-left: 0%;
	  }
	}
}


/*jssor slider loading skin spin css*/
.jssorl-009-spin img 
{
	animation-name: jssorl-009-spin;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes jssorl-009-spin 
{
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/*jssor slider bullet skin 057 css*/
.jssorb057 .i 
{
	position:absolute;
	cursor:pointer;
}

.jssorb057 .i .b 
{
	fill:none;
	stroke:none; /*pick color to get circles on slider*/
	stroke-width:2000;
	stroke-miterlimit:10;
	stroke-opacity:0.4;
}
					
.jssorb057 .i:hover .b 
{
	stroke-opacity:.7;
}
					
.jssorb057 .iav .b 
{
	stroke-opacity: 1;
}
					
.jssorb057 .i.idn 
{
	opacity:.3;
}

/*jssor slider arrow skin 073 css*/
					
.jssora073 
{
	display:block;
	position:absolute;
	cursor:pointer;
}
					
.jssora073 .a 
{
	fill:#ddd;
	fill-opacity:.7;
	stroke:#000;
	stroke-width:160;
	stroke-miterlimit:10;
	stroke-opacity:.7;
}
					
.jssora073:hover 
{
	opacity:.8;
}
					
.jssora073.jssora073dn 
{
	opacity:.4;
}
					
.jssora073.jssora073ds 
{
	opacity:.3;
	pointer-events:none;
}

#jssor_1
{
	position:relative;
	margin:0 auto;
	top:0px;
	left:0px;
	width:980px;
	height:150px;
	overflow:hidden;
	visibility:hidden;
}

.jssorl-009-spin
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	text-align:center;
	background-color:rgba(0,0,0,0.7);
}

.slider_img
{
	margin-top:-19px;
	position:relative;
	top:50%;
	width:38px;
	height:38px;
}

.jssorb057
{
	position:absolute;
	bottom:12px;
	right:12px;
}

.i
{
	width:16px;
	height:16px;
}

.jssora073
{
	width:50px;
	height:50px;
	top:0px;
	right:30px;
}

#jssor_1
{
	height: 100%;
}

.img {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img:hover img {
  transform: scale(1.5);
}

/*end of slider*/

#about
{
	height: 50px;
}

#portfolio
{
	height: 50px;
}
#clients
{
	height: 50px;
}
.subtitle
{
	font-style: italic;
}

.form-control
{
	
	padding-left: 10px;
	border: 0px;
	margin-left: 25%;
}

.hr_contact
{
	border: 1px solid #cbced3;
	border-radius: 5px;
}

.hr_massage
{
	border: 1px solid #cbced3;
	border-radius: 5px;
	margin-left: 10%;
}

.form-control:hover
{
	border-color: #373b4d;
	box-shadow: 0 0 0 0.2rem rgba(55, 59, 77, 2);
} 



.rectangle
{
  border-style: solid;
  border-color: #cbced3;
  width: auto;
}
.footer
{
	
	position: fixed;
    height: 50px;
    background-color: #f3f2dc;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
	text-align: center;

}

.sn_img img
{
	margin-right: 10px;
	width: 25px;
	padding-top: 10px;
	
}

#button
{
	padding-bottom: 20px;
	margin-left: auto;
    display: contents;
}

.contact_letter
{
	font-family: 'Raleway', sans-serif;
}

p
{
	font-family: 'Raleway', sans-serif;
}

.lb-nav a.lb-next {
  width: 34% !important;
}
/*
.text
{
	margin-left: initial;
}
*/
.slike
{
	width: 100%;
}

hr
{
	max-width: 200px;
}

.slike_sub
{
	width: 105%;
	font-style: italic;
}

.img-fluid {
    /* max-width: 100%; */
    height: auto;
    width: 100vw;
}