/* ORIGINAL IMAGE MARKERS START */
/** 
 *
 * CSS file for PW Module InputfieldImageMarker.
 *
 * @author Francis Otieno (Kongondo) <kongondo@gmail.com>.
 * @author Helder Cervantes (heldercervantes).

 * @credits: Roland Toth (tpr).
 * @credits Ryan Cramer.
 *
 * https://github.com/kongondo/FieldtypeImageMarker
 * Created March 2015
 *
 */

/* -- COORDINATES' TABLE -- */
table.InputfieldImageMarkers {width: 100%;}
.InputfieldImageMarkers table tr {border: none;}
.InputfieldImageMarkers th {padding-bottom: 0; font-weight: bold;}
.InputfieldImageMarkers tr:not(.uk-alert-danger):hover td {background: #EEE;}

.InputfieldImageMarkers input[type=number],
.InputfieldImageMarkers input[type=number],
.InputfieldImageMarkers input[type=text] {
	width: 100%;
}

.InputfieldImageMarkers th,
.InputfieldImageMarkers td {
	padding: 6px 2px;
	border-bottom: 1px solid #DDD;
}

.InputfieldImageMarkers .ImageMarkerInfo {width: 45%;}
.InputfieldImageMarkers .ImageMarkerCoords_X {width: 25%; text-align: right;}
.InputfieldImageMarkers .ImageMarkerCoords_Y {width: 25%; text-align: right;}
.InputfieldImageMarkers th.ImageMarkerDel {width: 5%; padding-right: 0;}
.InputfieldImageMarkers a.ImageMarkerDel {width: 1.5em; display: block;}
.InputfieldImageMarkers .uk-alert-danger td input {text-decoration: line-through;}

tr a.ImageMarkerDel {padding-left: 15px;}

/* @note: for div.marker */
tr.highlighted {background: #D1F468;}
/*@TODO: delete if not in use?
tr.highlighted:hover td {background: #93BF0D !important;}*/

input[type=text].coords_x, input[type=text].coords_y {text-align: right;}

/* @note: to stop flash of 'long' non-paginated table before pagination kicks in on js-side (we show table using js) */
table.InputfieldImageMarkers {display: none;}

/* -- Marker table pagination -- */

div.pagination_wrapper {margin: 1em 0;}
span.limit_select {float: right; margin-right: 2em;}
div.pager {margin: 1em 0;}

/* -- MARKER STYLES -- */

/* @hc (circle+teardrop), @tpr(callout), @kongondo (minor mods)*/

/* shared styles */
div.fieldContainer {position: relative;	display: inline-block; border: 2px solid #ccc;}
div.fieldContainer img {vertical-align: bottom;	width: 100%; height: auto;}

.about-content-main.pad-common {
    height: 100%;
}

div.marker span {
	transform: translate(-50%, -50%);
	position: absolute;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	cursor: move;
	display: block;
	z-index: 3;
}

/* marker style: circular */
div.circle {
	position: absolute;
	width: 1px;
	height: 1px;
	background: red;
	z-index: 2;
	cursor: pointer;
}

div.circle::before {
	content: '';
	position: absolute;
	z-index: 2;
	background: red;
	border-radius: 20px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255,255,255,.5);
	box-sizing: border-box;
	width: 2em;
	height: 2em;
}

div.circle.highlighted::before {background: green;}
div.circle span {top: 0px; left: 0px; transform: translate(-50%, -50%);}

/* marker style: tear drop (gmap) style */
div.teardrop {
	position: absolute;
	width: 1px;
	height: 1px;
	background: red;
	z-index: 2;
	cursor: pointer;
}

div.teardrop::before {
	content: '';
	position: absolute;
	z-index: 2;
	background: red;
	border-radius: 20px 20px 20px 0;
	transform: rotate(-45deg) translate(14px, -35px);
	border: 1px solid rgba(255,255,255,.5);
	box-sizing: border-box;
	width: 2em;
	height: 2em;
}

div.teardrop.highlighted::before {background: green;}
div.teardrop span {top: 0px; left: 0px;	transform: translate(-50%, -31px);}

/* marker style: callout */
div.callout {
	position: absolute;
	width: 1px;
	height: 1px;
	z-index: 2;
	cursor: pointer;
}

div.callout span {
	background: red;
	line-height: 1.33;
	max-width: 6em;
	position: absolute;
	font-weight: bold;
	transform: translate3d(-49%, -100%, 0);
	margin-top: -0.5em;
	z-index: 2;
	border: 1px solid rgba(255,255,255,.5);
	max-width: none;
	white-space: nowrap;
	padding: 0.25em 0.35em;
	height: 2em;
}

div.callout.highlighted span {background: green;}
div.callout.highlighted::after {border-top-color: green;}

div.callout:after {
	content: "";
	border: 0.5em solid transparent;
	border-top-color: red;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
}

div.callout:before {border-top-color: #FFF;	margin-top: 2px;}

/* ALL marker styles: highlighted markers */
div.fieldContainer div.highlighted {z-index: 4;}
/* ORIGINAL IMAGE MARKERS END */


/* IMAGE MARKERS MOJ START */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 /*  text-align: center; */
}

.map {
  margin:10px;
  border:3px solid red;
  position: relative;
  display: inline-block;

}

h3 span {
    font-size: 24px;
}
h4 span {
    font-size: 18px;
}

.map img {
  max-width:100%;
  display: block;
}

.box {
  width:8%;
  height:8%;
  background-image:   url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}



.box:hover > .pin-text {
  display: block;
}

.pin-text {
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  left:75%;
  white-space:nowrap;
  display: none;
}

.pin-text h3 {
    color:white;
    text-shadow: 1px 1px 1px #000;
}

/* IMAGE MARKERS END */

/* SLIDER STILS ORIGINAL START */
.swiper-container {
  text-align: center;
}
.swiper-slide gallery-slide gallery-slide0 {
  padding: 0px;
  background: #fff;
}
.swiper-slide gallery-slide gallery-slide0 > img{
display: inline-block;
float: left;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-scrollbar {
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: 1;
}
.swiper-scrollbar-drag{
}
/* SLIDER STILS ORIGINAL END */
article.col-md-4.text-left.foot {
    display: -webkit-inline-box;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.bg-barva {
    background-color: #ffffffe8;
    padding: 10px;
    color: black;
}
.novica-home {
	padding: 0 !important;
    height: 100% !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
	
}
.novica-home h1 {
	font-size: 20px;
}
.news-title {font-weight:bold;}
.news-summary {
	margin: 10px 0 0 0;
	font-size: 12px;
	color:white;
}
a.item-title {
    color: white;
}
.zoom {
  transition: transform .1s; /* Animation */
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transition: transform .1s; /* Animation */
}
.main-bg {
	background-color: #eee;
}
img.align_left {
	float: left;
    margin: 5px 10px 5px 0px;
}
img.align_right {
    
    float: right;
    margin: 5px 5px 5px 10px;
}
.qrkoda {
	float:right;
	margin: -63px 27px 0 0;
}
.qrkoda img {
    width: 90px !important;
}
.add-top-half ul,
.add-top-half ol {
  margin-left: 30px;
}

/* (Optional) if you also want to style each <li> directly: */
.add-top-half li {
  /* e.g. extra spacing between items */
  margin-bottom: 5px;
}

.list {
  display: flex;
  flex-wrap: wrap;
}
.homeimg {
	height:200px;
	border: 1px solid black;
}
.gal-imgs {
	height: 200px;
}
.my-padding {
    padding: 15px 50px 10px 50px;
}
.my-padding2 {
    padding: 50px 50px 10px 50px;
}
img.upor-foto  {
	max-height: 310px;
	width:100%;
	object-fit: cover;
}
td.osiskaznica {
    padding: 5px 15px 3px 5px;
    border-top: 1px solid #da152e;
    border-bottom: 1px solid #da152e;
	word-break: normal;
    word-wrap: break-word;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 30px;
}
li {
    font-family: courier new;
	line-height: 20px;
    margin: 0 0 20px 0px;
}
li.objekti-list {
    color: black;
    font-size: 17px;
    line-height: 6px;
    font-weight: 600;
}
li.objekti-list a {
    color: #e03047;
	transition: all .4s ease-in-out;
}
li.objekti-list a:hover {
    color: #4a3e3f;
	transition: all .4s ease-in-out;
}
.title-list {
    padding: 10px 50px 10px 50px;
	background-color: #b3b3b3;
}
.title-text {
	margin: 0 0 -10px 0;
}
nav.d-flex.justify-content-start {
    text-align: center;
}

/* SOCIAL MENU START */
.footsocial {
    float: right;
	margin-left: 100px !important;
}
.social-menu {
	display: flex;
	list-style-type: none;
	/* margin-left: -40px; */
	justify-content: flex-start;
}
 
.social-menu i {
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 25px;
	margin-right: 10px;
	transition: all 0.2s ease-in-out;
	display: flex;
	justify-content: center;
}

.social-menu i:before {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.social-menu a {
	text-decoration: none;
}

.social-menu i:hover {
	opacity: .7;
	border-radius: 0;
}
.fa-facebook {
	background:#3b5998
} 

.fa-linkedin {
	background:#007bb6
}

.fa-twitter {
	background:#00aced
}

.fa-instagram {
	background:#3f729b
}

.fa-youtube {
	background:#c4302b
}
.fa-youtube-play {background:#c4302b}
/* SOCIAL MENU END */

/* COUNTER START */
.counter
{
    background-color: #eaecf0;
    text-align: center;
}
.employees,.customer,.design,.order
{
    margin-top: 70px;
    margin-bottom: 70px;
}
.counter-count
{
    font-size: 18px;
    background-color: #db152d;
    border-radius: 50%;
    position: relative;
    color: #ffffff;
    text-align: center;
	font-weight: 700;
    line-height: 92px;
    width: 92px;
    height: 92px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;
}

.employee-p,.customer-p,.order-p,.design-p
{
    font-size: 24px;
    
    line-height: 34px;
}
/* COUNTER END */

iframe {
  width: 100% !important;
 /*  height: auto !important; */
      padding-bottom: 30px;
    padding-top: 10px;
}
/* RESPONSIVE STYLES */
@media screen and (max-width: 600px)  {
.gal-imgs {
    height: 160px;
    object-fit: cover;
}
}