/*
-------------------------------
Isabelle CSS v 1.0
Designed and developed by: Simplico d.o.o.
Copyright, December 2015
------------------------------- */

/* gold-dark-#958873; text-#383838; */


	/* Common
	----------------------------------------- */
	
	html { -webkit-font-smoothing: antialiased; }
	body { background: #F3F0EC; }
	* { font-family: "liszt-webfont", sans-serif; font-weight: 500; color: #383838; }
	a { text-decoration:none; outline:none; cursor:pointer; color: #958873; }
	a:hover { text-decoration: none; color: #ccc!important; }
	a:active, a:focus { outline: none; text-decoration: none; color: #ccc; }
	img { border:none; }
	::-moz-selection { background:#958873; color:#fff; }
	::selection { background:#958873; color:#fff; }
	
	h2 { font-size:4em; line-height: 1.2; }
	h3 { font-size:3em; }
	h4 { font-size:1.3em; }
	
	h2, h3 { font-family: "salome-webfont", Arial; color: #958873; }
	
	p { margin-bottom:15px; line-height:1.5em; }
	p a { color:#958873; border-bottom: 2px #958873 solid; }
	a i { color: #958873; }
	p a:hover, li a:hover, a:hover i { color: #ccc; }
	p a:hover { border-bottom-color: #ccc; }
	p, li, dd { font-size: 1.2em; font-weight: 300; -moz-osx-font-smoothing: grayscale; }
	p.lead { font-size: 1.5em; line-height: 1.8; }
	small { font-size: 1em; }
	p small { line-height: 1; }
	strong { font-weight: 500; }
	hr { border-bottom: none; border-top: 1px #E5E5E5 solid; margin-top: 1em; margin-bottom: 1em; }
	blockquote { margin-bottom: 3em; }
	
	.row .col.offset-m1 { margin-left: 8.33333%; }
    
    /* The content
    -------------------------------------------------- */
    
    header.topbar { background: #fff; position: relative; }
		
	.main-content { padding: 0; }
	
		.main-content ul { margin: 1em 4em 1em 2em; }
		.main-content li { margin-bottom: 0.5em; text-indent: -0.55em; }
		.main-content li i { color: #958873; }
		.main-content .nav-inline { margin: 0; }
		.main-content .nav-inline li { margin-bottom: 0; text-indent: 0; }
		.main-content h4 { color: #958873; }
		.main-content aside ul { margin-right: 0; }
	
		.slider-intro { background-size: cover; padding: 1.5em; }
		.slider-intro .slider-wrapper { border:2px #fff solid; padding: 3em 3em 5em; }
		.slider-intro h2 { margin-top: 0; font-size: 5em; line-height: 1; }
		.slider-intro p { font-size: 1.8em; }
		.slider-intro h2, .slider-intro p, .slider-intro a { color: #F3F0EC; }
		.slider-intro .cta { border-color: #F3F0EC; }
		
		article .media { width: 50%; }
		article .media.right { margin-left: 2rem; }
		article .media.left { margin-right: 2rem; }
		article .media img { border:4px #fff solid; }
		
		article.preview { margin-bottom: 3em; }
		article.preview .media { width: 30%; }
		article.preview a { display:block; }
		article.preview a:hover { opacity: .7; }
		.preview.general img { width: 100%; }
		
		.main-article .media { width: 100%; }
		
		.product-listing { margin-top: 3em; }
		.product-listing { text-align: center; }
		.product-listing img { width: 100%; }
		.product-listing p { color: #958873; font-weight: 500; margin: 0.5em; }
		.product-listing a:hover { opacity: .7; }
		
		.news-list { margin:1em 0!important; }
		.news-list li { font-size: 1em; text-indent: 0!important; }
		.news-list p { margin-bottom: 0.5em; }
		.news-list time, time { color: #958873; }
		.news-list a:hover { opacity: .7; }
		.news-list a { display: block; }
		aside .news-list a { margin-top: 2em; }
		
		.media { margin-left: 0; margin-right: 0; }
		.media img { width: 100%; }
		
		.main-content ul.collapsible { margin: 0; }
		.collapsible-header { background: none; padding-left: 2rem; padding-top: 1.14rem; }
		.collapsible.popout > li { margin-bottom: 1em; }
		.collapsible.popout > li, .collapsible.popout > li.active { box-shadow: none; border:2px #958873 solid; }
		.collapsible-body { border-bottom: none; padding: 2rem; }
		.collapsible-body p { padding: 0; text-indent: 0; }
		.collapsible.popout p, .collapsible.popout li { font-size: 1.1em; }
		.collapsible.popout p, .collapsible.popout h4 { margin-bottom: 1em; }
		.collapsible-header:hover { background: #958873; border-color: #958873; }
		.collapsible-header h4 { margin-top: 0; }
		.collapsible-header:hover h4 { color: #fff!important; }
    
    footer { background: #958873; padding-bottom: 3em; }
    	footer .row { margin-bottom: 0; }
    
    	footer h3, footer p, footer a, footer .cta, footer i { color: #F3F0EC; }
    	footer h3 { font-size: 2.5em; }
    	footer .cta { border-color: #F3F0EC; margin-top: 2em; }
    	footer .cta:hover { background-color: #F3F0EC; border-color: #F3F0EC; color: #958873!important; }
    	footer input { border-color: #F3F0EC!important; height: 60px!important; 
	    	font-size: 1.4em!important; color: #F3F0EC!important; padding-top: 1.2em!important; }
		footer .social { padding-top: 1.8em; }
			footer .social li { font-size: 2em; margin-left: 0.5em; }
	    	footer .social a { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; 
		    	border-radius: 50%; border:2px #F3F0EC solid; }
			footer .social a:hover { background: #F3F0EC; }
		    footer .social a:hover i { color: #958873!important; }
		    
		footer .lower { padding-top: 3em; }
    
    	.simplico { width: 50px; height: 50px; margin-top: 1em;
	   		background: url(../img/simplico-wh.png); background-size: 50px 50px;
			text-indent: -9999px; display: inline-block; opacity: .5; border-bottom: none!important; }
			.simplico:hover { opacity: 1!important; }
    
    
    /* Common elements
    -------------------------------------------------- */
    
    .cta { font-size: 1.2em; padding: 0.5em 1em; border: 2px #958873 solid; margin-top: 1em; display: inline-block; }
    .cta:hover { background: #958873; border-color: #958873; color: #fff!important; }
    
    .nav-inline li { display: inline; }
    
    .modal { max-height: 100%; }
    .modal-content .modal-close { font-size: 0.9em; line-height: 1; }
    .owl-content h4 { margin-top: 10px; margin-bottom: 0; }
    
    .badge-banner { color: #958873; display: inline-block; padding: 1em 3em; border:4px #958873 solid; font-size: 1.6em; font-weight: 600; }
    
    .pagination { margin-left: 0!important; }
    .pagination li { text-indent: 0; }
    .pagination li a { color: #958873; border: 2px #958873 solid; text-align: center; width: 50px; height: 50px; line-height: 50px; display: inline-block; }
    .pagination li a:hover, .pagination li a.active { color: #fff!important; background: #958873; }
        
    #map-canvas { width: 100%; height: 650px; margin: 1em 0; opacity: .8; border:4px #fff solid; }
    .map-icon-label i { font-size: 24px; color: #FFFFFF; line-height: 48px; text-align: center; white-space: nowrap;
	    position: absolute; left: 0; top: 0; }
    
    
    /*.gm-style div .marker-label { z-index: 99; position: absolute; display: block;
    	width: 50px; height: 50px; white-space: nowrap; text-align: center; }
    	.gm-style div .marker-label img { width: 80%; margin-top: 3px; }*/
    	   
    /* Navigation
    -------------------------------------------------- */
    
    nav { background: none!important; box-shadow: none!important; line-height: 1!important; }
    nav ul a { font-size: 1em; padding: 0.7em 0.7em; }
    nav ul a:hover { background: none!important; }
    nav ul li a.active { color: #ccc!important; }
    
    nav .button-collapse { float: right; }
    
    .nav-wrapper .col { position: relative; }
    .main-nav { position: absolute; top: 120px; left: 0; right: 0; }
    .main-nav li { text-transform: uppercase; }
    .main-nav li a { color:#958873; }
    .main-nav li a.active, .main-nav li a.active i { color: #383838!important; }
    .main-nav li i { float: left; font-size: 1em; line-height: 1; margin-right: 0.6em; }
    .main-nav li.align-right { float: right!important; }
    
    footer .nav-inline { text-transform: uppercase; }
    footer .lower .nav-inline li { margin-right: 0.6em; }
    footer .lower .nav-inline li a { margin-bottom: 1em; display: inline-block; }

	#footer-menu-2 a{ font-size:0.75em; }
    
    .brand-logo { display: inline-block; text-indent: -9999px; 
    	background: url('../img/logo.png') no-repeat; background-size: 100%; }
		.brand-logo:hover { opacity: .6; }
		
	.kolekcije .nav-inline { padding-top: 2.5em; }
	.kolekcije .nav-inline li { }
	.kolekcije .nav-inline li a { color: #958873; padding: 0.5em; }
	.kolekcije .nav-inline li a.active { border:2px #958873 solid; }
	
	.owl-buttons { text-align: center; margin-bottom: 10px;  }
	.owl-buttons a { font-size: 0.9em; height: 25px; line-height: 21px; }
	.owl-close { position: absolute; top: 30px; right: 0; }

	.side-nav li:hover, .side-nav li.active, .side-nav li a:hover, .side-nav li a.active { background: none; color: #958873!important; }

	.collapsible-header i { float: right; }
	.side-nav .collapsible-body { padding: 0!important; }
.side-nav .collapsible-body li a { margin-right: 0px;}
    /* Forms
    --------------------------------------------------  */
    
    input[type="text"]:focus, input[type="email"]:focus, textarea.materialize-textarea:focus { 
	    box-shadow: none; border-bottom:1px #958873 solid!important; }
    .input-field input[type="text"]:focus + label, .input-field input[type="email"]:focus + label, 
    .input-field textarea.materialize-textarea:focus + label { color: #958873!important; }
    
    .btn { box-shadow: none; border:2px #958873 solid; background: none; color: #958873; border-radius: 0;
	    text-transform: none; font-size: 1.2em; height: 50px; line-height: 46px; }
    .btn:hover { box-shadow: none; background: #958873; border-color: #958873; color: #fff!important; }
    
    input:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { box-shadow: none!important; }
    
	
    /* Media queries
    -------------------------------------------------- */

    @media (min-width: 1200px) {
    	
    	.brand-logo { width: 239px!important; height: 85px!important; margin-top: 20px; margin-left: 40%; }
    	
    	header > nav { height: 170px; }
    	
    }
    
    @media (max-width: 1200px) {
	    
	    header > nav { height: 120px; }
	    .main-nav { top: 70px; }
	    
	    .brand-logo { width: 120px!important; height: 43px!important; margin-top: 15px; margin-left: 40%; }
	    
	    .slider-intro { width: 100%; background-position: center top; padding: 1em; }
		.slider-intro .slider-wrapper { padding: 2em; }
		.slider-intro h2 { font-size: 2.5em; text-shadow: 0 1px 0 #000; }
		.slider-intro p { font-size: 1.4em; text-shadow: 0 1px 0 #000; }
		.slider-intro a {  text-shadow: 0 1px 0 #000; }
    	
    }
    
    @media (max-width: 992px) {
	    
	    .brand-logo { width: 120px!important; height: 43px!important; margin-top: 15px; margin-left: 0; }
	    header > nav { height: 70px; }
	    .brand-logo { margin-top: 10px; }
    	
    }
    
    @media (min-width: 600px) {
	    
	    .container { width: 100%; }
	    
	}
    
    @media (max-width: 600px) {
	    
	    .container { width: 95%; }
	    
	    article .media { width: 100%; }
	    .main-content ul { margin-right: 1em; }
		.banner h2 { margin-bottom: 0; font-size: 3em; }
		.main-content h3, footer h3 { font-size: 1.8em; }
		article.preview .media { width: 100%; }
		article .media.right { margin-left: 1.5rem; }
		article .media.left { margin-right: 1.5rem; }
	    
	    .offset-s0 { margin-left: 0!important; }
	    
	    .owl-buttons { text-align: left;  }
		.owl-buttons a { padding-left: 1em; padding-right: 1em; }
		.owl-item img { width: 100%; }
	    
	    footer .right-align { text-align: left; }
	    
	}
	
	/*
        ColorBox Core Style:
        The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
    
    /* 
        User Style:
        Change the following styles to modify the appearance of ColorBox.  They are
        ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    
    
    
    #cboxOverlay{background:#fff; background: rgba(0,0,0,0.8);}
    #colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible;}
    #cboxError{padding:50px; border:1px solid #fff;}
    #cboxLoadedContent{background:#000000; padding:1px;}
    #cboxLoadingGraphic{background:url(http://static.tumblr.com/fftf9xi/rkklqu1ni/loading.gif) no-repeat center center;}
    #cboxLoadingOverlay{background:#000000;}
    #cboxTitle{position:absolute; top:-22px; left:0; color:#ffffff; text-shadow:none;}
    #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
    
    /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
    #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
    
    /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
    #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
    
    #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(http://static.tumblr.com/fftf9xi/1dslqu1o1/controls.png) no-repeat 0 0;}
    #cboxPrevious{background-position:0 0; right:44px;}
    #cboxPrevious.hover{background-position:0 -25px;}
    #cboxNext{background-position:-25px 0; right:22px;}
    #cboxNext.hover{background-position:-25px -25px;}
    #cboxClose{background-position:-50px 0; right:0;}
    #cboxClose.hover{background-position:-50px -25px;}
    .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
    .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
    .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
    .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0; right:44px;}
    .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}
    
    .photoset-grid-lightbox { margin: 2em 0; }
    
    
    
    /* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
	.custom-select {
	  position: relative;
	  display:block;
	  margin-top:0.5em;
	  margin-bottom: 1em;
	  padding:0;
	  height: 50px;
	  border: 1px #ccc solid;
	}
	
	
	/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
	.custom-select select {
	  width:100%;
	  margin:0;
	  background:#fff;
	  outline: none;
	  /* Prefixed box-sizing rules necessary for older browsers */
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  /* Remove select styling */
	  appearance: none;
	  -webkit-appearance: none;
	  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
	  font-size:16px;
	  padding: .6em 1.9em .5em .8em;
	  border: none;
	  cursor: pointer;
	  border-radius: 2px;
	  height: 48px;
	}
	
	
	/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
	    
	.custom-select::after {
	  content: "";
	  position: absolute;
	  width: 9px;
	  height: 8px;
	  top: 50%;
	  right: 1em;
	  margin-top:-4px;
		background: url(http://filamentgroup.com/files/select-arrow.png) no-repeat;
		background-size: 100%;
	  z-index: 2;
	  /* This hack make the select behind the arrow clickable in some browsers */
	  pointer-events:none;
	}
	
	/* Focus style */
	.custom-select select:focus {
	  outline:none;
	  color: #222;
	}
	
	/* Set options to normal weight */
	.custom-select option {
	  font-weight:normal;
	}
	
	/* ------------------------------------  */
	/* START OF UGLY BROWSER-SPECIFIC HACKS */
	/* ----------------------------------  */
	
	/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
	/*
	x:-o-prefocus, .custom-select::after {
	  display:none;
	}

	*/
	 /* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
	/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	  .custom-select select::-ms-expand {
	    display: none;
	  }
	  .custom-select select:focus::-ms-value {
	    background: transparent;
	    color: #222;
	  }
	}  
	
	
	/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
	/* Show only the native arrow */
	@-moz-document url-prefix() { 
	  .custom-select {
	    overflow: hidden;
	  }
	  .custom-select select {
	    width: 120%;
	    width: -moz-calc(100% + 3em);
	    width: calc(100% + 3em);
	  }
	  
	}
	
	/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
	.custom-select select:-moz-focusring {
	  color: transparent;
	  text-shadow: 0 0 0 #000;
	}
	
	
	
	/* ------------------------------------  */
	/*  END OF UGLY BROWSER-SPECIFIC HACKS  */
	/* ------------------------------------  */

    
    /* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	text-align: center; float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(../img/grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/

.owl-theme .owl-controls{
	text-align: center; 
	
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
	color: #958873;
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	border:2px #958873 solid;
	
	}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
	
	text-decoration: none;
	background: #958873;
	color: #fff;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(../img/AjaxLoader.gif) no-repeat center center
}