*{
box-sizing:border-box;
}
html, html a {
    -webkit-font-smoothing: antialiased !important;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.004);
}
a{
	text-decoration:none;
	color:rgba(255,255,255,.3);
	transition: color .3s;
}
a:hover{
	color:rgba(255,255,255, 1);
	
}
body, html{
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	height:100%;
	background-size:cover;
	background-position: center;
	overflow:hidden;
	width:100%;
	font-size:18px;
	line-height:25px;
	font-weight:600;
}

.hidden{
	display:none;
}
#site-logo{
	width:42px;
	height:102px;
	display:block;
	background-size:cover;
}
#main_content{
	height:100%;
}

h1.site-title{
	font-size:3rem;
	font-weight:800;
	
}
h1.site-title a{
	color:#FFF;
	text-decoration:none;
}
/**
 * 2.0 - Genericons
 */

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}

.intro{
	position:absolute;
	width:100%;
	height:100%;
	background:#dedede;
}
.enter{
	width:100px;
	height:100px;
	font-family:genericons;
	font-size:10rem;
	display:block;
	color:#fff;
}
#page{
	width:calc(100% + 17px);
	height:calc(100% + 17px);
	min-height:100%;
	box-sizing:content-box;
	overflow:scroll;
}
.dark{
	background-color:rgba(0,0,0,.5);
	height: calc(100vh - 33px);
}
.bgr1, .bgr2, .bgr3{
	background-attachment:fixed;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-color:#040404;
	background-position:center;
}
.bgr1{
	background-image:url("images/picelj-background-general-3_1024-1024x683.png");
}

.logo, .menu-main-container, .topbar{
	position:fixed;
}
.logo{
	z-index:1000;
	bottom:45px;
	left:25px;
	float:left;
}
.slider{
	position:absolute;
	z-index:2000;
	width:calc(100% + 30px);
	height:calc(100% + 30px);
	background:url(images/slider_bg.png) center center no-repeat;
	background-size: cover;
	display:block;
	top:0;
	overflow:scroll;
}
#slideshow, #placehold{
	height:100%;
	width:1220px;
	position:relative;
	margin:0 auto;
}
#slideshow > div { 
    position: absolute; 
    top: 16px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
	display:none;
}
.control_next .fa-angle-right, .control_prev .fa-angle-left{
	position:relative;
	top:-308px;
}

#slideshow p, #placehold p{
	color:white;
	text-align:left;
	font-size:42px;
	line-height:1.148;
	font-weight:300;
}
.toggled{
	top:-2000px;
	transition: top 0.5s ease-in-out 0s;
	overflow:hidden;
}
button.accordion {
    background-color: transparent;
	-moz-appearance:none;
	appearance:none;
    color: #b3b3b3;
    cursor: pointer;
    padding:0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
	font-family:Open Sans;
	font-weight:600;
    font-size: 18px;
    transition: 0.4s;
}
button.accordion:before{
	content:' ';
	font-family:FontAwesome;
}
button.accordion.active, button.accordion:hover {
    color: #fff; 
}
button.accordion.active{
	padding: 18px 0 0 0;
}
button.accordion.active:first-of-type{
	padding: 0;
}
button.accordion.active:before{
	content:' ';
	font-family:FontAwesome;
}

div.panel {
    display: block;
    max-height:0;
	overflow:hidden;
	transition: max-height 0.4s ease-out;
}
#slider_off_button{
	position:absolute;
	bottom:60px;
	left:calc(50% - 57px);
}	
.down_off{
	font-size:3rem;
	appearence:none;
	border:none;
	color:#FFF;
	background:none;
	cursor:pointer;
}
.leftbar, .centerbar, .rightbar{
	display:block;
	vertical-align:top;
}

.centerbar{
	width:1224px;
	text-align:left;
	color:#fff;
	margin:0 auto;
	position:relative;
	min-height:100%;
}

.gallerylinks, .pagelinks li{
	display:block;
	float:left;
	vertical-align:top;
	margin:4px 4px 0 0;
	background-color:#000;
	overflow:hidden;
	position:relative;
}
.gallerylinks img{
	transition: all 0.3s ease-in-out 0s;
	width:100%;
	height:100%;
} 
.gallerylinks:hover img{
	opacity:.2;
	transition: all 0.3s ease-in-out 0s;
}
.gtext{
	position:absolute;
	color:transparent;
	margin-top:-390px;
	margin-left:16px;
}
.gtext_mali{
	position:absolute;
	color:transparent;
	top:10px;
	margin-left:16px;
	z-index:4000;
}
.gallerylinks:hover .gtext, .gallerylinks:hover .gtext_mali, .pagelinks .page_item a:hover, .pagelinks .cat-item a:hover{
	color:#FFF;
	transition: all 0.3s ease-in-out 0s;
}
.pagelinks .page_item a, .pagelinks .cat-item a{
	display:block;
	text-decoration:none;
	color:#666666;
	background:#444;
	padding-left:10px;
}
.thumb200, .pagelinks li, .page_item a, .cat-item a{
	width:200px;
	height:200px;
}
.thumb400{
	width:404px;
	height:404px;
}

.gallerylinks img{
	display:block;
	background:#fafafa;
}
.topbar{
	width:calc(50% - 610px);
	z-index:4000;
	top:0;
	left:0;
	text-align:right;
	padding:11px 25px 0 0;
}
.menu-icon{
	border:none;
	background:none;
	appearence:none;
	color:white;
	font-size:1.25em;
	cursor:pointer;
	padding:0;
	margin:0;
}
.dropdown-toggle,
.main-navigation ul .dropdown-toggle.toggled-on,
.menu-toggle,
.site-header .social-navigation,
.site-footer .main-navigation {
	display: none;
	}
.primary-menu, .sub-menu{
	list-style:none;
	display:block;
	font-weight:600;	
	padding:0;
	margin:0;
	position:fixed;
	left:calc(50% + 635px);
}

#site-navigation{
	float:left;
}
.primary-menu{
	top:15px;
}
.sub-menu{
	display:none;
	top:11.6em;
}
.customize-support .sub-menu{
	top:250px;
}
.menu-item a, .menu-item a:visited, .menu-item li a{
	color:rgba(255,255,255,.3);
	text-decoration:none;
	list-style:none;
}
.current-menu-item .sub-menu, .current-page-parent .sub-menu, .current-page-ancestor .sub-menu{
	display:block;
}

.menu-item a:hover, .current-menu-item a, .current-page-parent a, .current-page-parent .sub-menu .current-menu-item a,
.current-page-ancestor a, .current-page-ancestor .sub-menu .current-page-ancestor a{
	color:rgba(255,255,255,1);
	transition: all 0.3s ease-in-out 0s;
}
#social-navigation{
	position:fixed;
	bottom:42px;
	left:calc(50% + 635px);
	z-index:9999;
}
.social-links-menu{
	margin:0;
	padding:0;
}
.social-links-menu li{
	list-style:none;
	display:inline-block;
}
.social-links-menu li a{
	font-size: 23px;
	margin-right:5px;
}
/* PRIJELOM TEKSTA
/*------------------------------------------------------------*/

.titlebar{
	width:260px;
}
.textlist{
	position:relative;
	top:16px;
	left:223px;
	width:404px;
	margin-bottom:73px;
}
.titlebar a, .titlebar a:visited, .metadata a, .metadata a:visited,
.textlist a, .textlist a:visited{
	color:#808080;
}
.titlebar a:hover, .metadata a:hover, .textlist a:hover{
	color:#fff;
}
.titlebar-200{
	width:200px;
}
.post-body, .result-body{
	display:inline-block;
	vertical-align:top;
	margin:0 0 0 200px;
}
.post-body{
	padding:0 0 0 20px;
}
.result-body{
	padding:0 0 50px 4px;
}
.single-work{
	display:block;
	height:100%;
}

.image-body{
	width:100%;
	height:660px;
	display:block;
	padding:0;
	margin:0;
	overflow:hidden;
	position:absolute;
	margin-top:19px;
}
.gallery-item img, .wp-caption img{
	max-width:660px;
	height:auto;
	position:relative;
	/*left:280px;*/
}
.aligncenter{
	clear: both;
	display: block;
	margin:0 auto;
}
.post-body p{
	max-width:608px;
	margin:16px 0;
}
.centered{
	text-align:center;
	padding:0 !important;
}
.entry-title{
	padding-left:20px;
	font-weight:600;
}
.entry-title{
	padding-left:0px;
	font-weight:600;
	margin-top:16px;
	font-size:1em;
}
.pagelinks{
	list-style:none;
	margin:0;
	padding:0;
}
	
.post-edit-link{
	color:red;
	border:red 1px solid;
	padding:5px;
	text-decoration:none;
	display:block;
}
.thin{
	font-weight:300;
}
.metadata {
	position:absolute;
	top:120px;
}
.metadata p, .textlist p{
	color:rgb(127, 127, 127);
	margin:0 0 7px 0;
}

#gallery-1 {
  position: relative;
  padding: 0;
  height: 1000px;
  list-style: none;
}

.gallery-item, .wp-caption, .image-body p {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 1220px;
  height: 700px;
  text-align: center;
}
.wp-caption-text{
	position:absolute;
	top:-4px;
	left:16px;
	text-align:left;
	width:240px;
	line-height:1.375em;
	z-index:100000;	
}

#imgCnt{
	text-align:center;
	position:fixed;
	bottom: 45px;
	left:0;
	width:100%;
	font-weight:600;
}
a.control_prev, a.control_next {
  position: absolute;
  z-index: 999;
  display: block;
  line-height:660px;
  width:150px;
  height: auto;
  text-shadow: 2px 2px 3px #666;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0;
  cursor: pointer;
  margin:0 auto;
}
a.control_prev{
	text-align:left;
	padding-left:20px;
}
a.control_next{
	text-align:right;
	padding-right:20px;
}
a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
  left:280px;
}

a.control_next {
  right: 284px;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
}
.placeholder{
	width:calc(100% - 32px);
	height:102%;
}
.biglogo{
	max-width:1000px;
	width:75%;
	margin:0 auto;
	display:block;
	top:22%;
	position:relative;
}
.logged{
	margin-top:32px;
}

.logged .menu-main-container ul.primary-menu{
	margin-top:32px;
}

	
/** 
 *
 *         R E S P O N S I V E   L A Y E R S  
 *
	max 1540px
 */
 @-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

 @media screen and (max-width: 1540px){
	.topbar{
		width:calc(50% - 456px);
	}
	#slideshow, #placehosd, .centerbar{
		width: 912px; 		
	}
	.thumb200{
		width:148px;
		height:148px;
	}
	.thumb400{
		width:300px;
		height:300px;
	}
	.titlebar, .titlebar-200{
		width:148px;
		}
	.gtext{
	margin-top:-290px;
	margin-left:16px;
	}
	.gtext-mali{
	margin-top:-90px;
	margin-left:16px;
	}
	.post-body{
		width:500px;
		margin-left:148px;
	}
	.primary-menu, .sub-menu, #social-navigation{
	left:calc(50% + 472px);
	}
	
	.gallery-item, .wp-caption{
		width:908px;
	}
	#work-slider img{
		width:400px;
		height:auto;
	}
	.wp-caption-text{
		width:200px;
	}
	a.control_prev{
	left:254px;
	height:660px;
	}
	a.control_next{
	right:254px;	
	height:660px;
	}
}


@media screen and (max-width: 1204px){
	
	#slideshow, #placehold, .centerbar{
		width:608px;
	}
	#slideshow p, #placehold p{
		font-size:23px;
	}
	.thumb200{
		width:148px;
		height:148px;
	}
	.thumb400{
		width:300px;
		height:300px;
	}
	.topbar{
		width:calc(50% - 304px);
	}
	
	.gtext{
		position:absolute;
		color:transparent;
		margin-top:-290px;
		margin-left:16px;
	}
	.titlebar, .titlebar-200{
		width:148px;
	}
	.post-body{
		width:400px;
	}
	.primary-menu, .sub-menu, #social-navigation{
		left:calc(50% + 320px);
	}

	.gallery-item, .wp-caption{
		width:604px;
	}
	#work-slider img{
		width:360px;
		height:auto;
		left:50px;
		position:relative;
	}
	#imgCnt{
		padding-left:50px;
	}
	.wp-caption-text {
    width: 148px;
   }
   a.control_prev{
	left:168px;
	height:525px;
	}
	a.control_next{
	right:68px;	
	height:525px;
	}
}

@media screen and (max-width: 874px){
	
	#slideshow, #placehold, .centerbar{
		width:536px;
		padding-bottom:50px;
	}
	#imgCnt{
		width:536px;
		left:80px;
	}
	#slideshow p, #placehold p{
		font-size:23px;
	}
	.thumb200{
		width:148px;
		height:148px;
	}
	.thumb400{
		width:224px;
		height:224px;
	}
	.topbar{
		width:80px;
	}
	.centerbar{
		margin:0 auto 0 80px;
	}
	.gtext{
	position:absolute;
	color:transparent;
	margin-top:-290px;
	margin-left:16px;
	}
	#gallery-1{
		height:425px;
	}
	.gallery-item, .wp-caption {
		width:532px;
		text-align:center;
	}
	#work-slider img{
		width:300px;
		height:auto;
		left:50px;
		position:relative;
	}
	.titlebar, .titlebar-200{
		width:148px;
	}
	.post-body{
		width:400px;
	}
	.primary-menu, .sub-menu, #social-navigation{
	left:calc(50% + 246px);
	}
	a.control_prev{
	left:168px;
	height:425px;
	}
	a.control_next{
	right:68px;	
	height:425px
	}
}
@media screen and (min-width: 769px){
#site-logo{
	background:url(images/picelj_logo.svg) bottom left no-repeat;
	}
	#primary-navigation{
		display:none;
	}
	.titlebar, .titlebar-200{
	vertical-align:top;
	position:fixed;
	padding-left:16px;
	z-index:3000000;
}
}

@media screen and (max-width: 768px){
	.hidden{
		display:block;
	}
	.centerbar{
		width:calc(100vw - 17px);
		margin:0 0 50px 0;
		padding:20px 20px 47px 20px;
		position:static;
	}
	
	#site-logo{
	background:url(images/picelj_logo_h.svg) top left no-repeat;
	width:102px;
	height:42px;
	}
	.logo{
	position:static;
	float:none;
	margin:20px 0 0 20px;
	display:inline-block;
}
.menu-toggle{
	display:block;
	color:#fff;
	border:none;
	font-size:24px;
	appearance:none;
	-moz-appearance:none;
	background:transparent;
	display:inline-block;
	float:right;
	margin:20px 52px 0 0;
	cursor:pointer;
}
/**
 * 6.2 - Menus
 */

.site-header-menu {
	display:block;
	height:0;
	transition:height .8s;
	position:relative;
	overflow:hidden;
	background:#000;
	z-index:99999999999;
}

.site-header-menu.toggled-on,
.no-js .site-header-menu {
	display:block;
	min-height:auto;
	height:1000px;
	transition:height .8s;
	margin:0.875em 0;
}
.menu-main-container{
	position:static;
}
.main-navigation {
	/*font-family: Montserrat, "Helvetica Neue", sans-serif;*/
	width:100%;
}

.site-footer .main-navigation {
	margin-bottom: 1.75em;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
}

.main-navigation li {
	border-top: 1px solid #d1d1d1;
	position: relative;
	padding-left:16px;

}

.main-navigation a {
	color: rgba(255, 255, 255, .5);
	display: block;
	line-height: 1.3125;
	outline-offset: -1px;
	padding: 0.84375em 0;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: #FFF;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	font-weight: 700;
}

.main-navigation ul ul {
	display: none;
	margin-left: 0.875em;
}

.no-js .main-navigation ul ul {
	display: block;
}

.main-navigation ul .toggled-on {
	display: block;
}

.main-navigation .primary-menu {
	border-bottom: 1px solid #d1d1d1;
	position:static;
	left:20px;
	width:calc(100% - 65px);
	background:#000;
	top:0;
}
.sub-menu{
	position:static;

}
.main-navigation a{
	height:50px;
	top:0;
	transition:height .3s;
}

.main-navigation .menu-item-has-children > a {
	margin-right: 56px;
}

.dropdown-toggle {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: #fff;
	content: "";
	height: 48px;
	padding: 0;
	position: relative;
	text-transform: none;
	top: -50px;
	width: 48px;
	display:block !important;
	float:right;
}
.screen-reader-text{
	display:none;
	}

.dropdown-toggle:after {
	border: 0 solid #f1f1f1;
	border-left-width: 1px;
	content: "\f431";
	font-size: 24px;
	left: 1px;
	position: relative;
	width: 48px;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
	background-color: transparent;
	color: #007acc;
}

.dropdown-toggle:focus {
	outline: thin dotted;
	outline-offset: -1px;
}

.dropdown-toggle:focus:after {
	border-color: transparent;
}

.dropdown-toggle.toggled-on:after {
	content: "\f432";
}

.site-header .main-navigation + .social-navigation {
	margin-top: 1.75em;
}

.site-footer .social-navigation {
	margin-bottom: 1.75em;
}

.social-navigation ul {
	list-style: none;
	margin: 0 0 -0.4375em;
}

.social-navigation li {
	float: left;
	margin: 0 0.4375em 0.4375em 0;
}

.social-navigation a {
	border: 1px solid #d1d1d1;
	border-radius: 50%;
	color: #FFF;
	display: block;
	height: 35px;
	position: relative;
	width: 35px;
}

.social-navigation a:before {
	content: "\f415";
	height: 33px;
	line-height: 33px;
	text-align: center;
	width: 33px;
}

.social-navigation a:hover:before,
.social-navigation a:focus:before {
	color: #007acc;
}

.social-navigation a[href*="codepen.io"]:before {
	content: "\f216";
}

.social-navigation a[href*="digg.com"]:before {
	content: "\f221";
}

.social-navigation a[href*="dribbble.com"]:before {
	content: "\f201";
}

.social-navigation a[href*="dropbox.com"]:before {
	content: "\f225";
}

.social-navigation a[href*="facebook.com"]:before {
	content: "\f203";
}

.social-navigation a[href*="flickr.com"]:before {
	content: "\f211";
}

.social-navigation a[href*="foursquare.com"]:before {
	content: "\f226";
}

.social-navigation a[href*="plus.google.com"]:before {
	content: "\f206";
}

.social-navigation a[href*="github.com"]:before {
	content: "\f200";
}

.social-navigation a[href*="instagram.com"]:before {
	content: "\f215";
}

.social-navigation a[href*="linkedin.com"]:before {
	content: "\f208";
}

.social-navigation a[href*="path.com"]:before {
	content: "\f219";
}

.social-navigation a[href*="pinterest.com"]:before {
	content: "\f210";
}

.social-navigation a[href*="getpocket.com"]:before {
	content: "\f224";
}

.social-navigation a[href*="polldaddy.com"]:before {
	content: "\f217";
}

.social-navigation a[href*="reddit.com"]:before {
	content: "\f222";
}

.social-navigation a[href*="skype.com"]:before {
	content: "\f220";
}

.social-navigation a[href*="stumbleupon.com"]:before {
	content: "\f223";
}

.social-navigation a[href*="tumblr.com"]:before {
	content: "\f214";
}

.social-navigation a[href*="twitter.com"]:before {
	content: "\f202";
}

.social-navigation a[href*="vimeo.com"]:before {
	content: "\f212";
}

.social-navigation a[href*="wordpress.com"]:before,
.social-navigation a[href*="wordpress.org"]:before {
	content: "\f205";
}

.social-navigation a[href*="youtube.com"]:before {
	content: "\f213";
}

.social-navigation a[href^="mailto:"]:before {
	content: "\f410";
}

.social-navigation a[href*="spotify.com"]:before {
	content: "\f515";
}

.social-navigation a[href*="twitch.tv"]:before {
	content: "\f516";
}

.social-navigation a[href$="/feed/"]:before {
	content: "\f413";
}
	
	#slider{
		display:none;
	}
	.thumb200, .thumb400{
		width:175px;
		height:175px;
	}
	
	.textlist, .post-body {
    top: 16px;
	position:static;
    margin-left: 30%;
	margin-bottom:50px;
    width: 70%;
	padding-right:20px;
	display:block;
}
	.titlebar, .titlebar-200{
	padding-left:0;
	width:calc(30% - 20px);
}
	.titlebar-200 h1{
	margin-top:0;
	}

	.gtext{
	position:absolute;
	color:rgba(255, 255, 255, .3);
	margin-top:-160px;
	margin-left:16px;
	text-shadow: 0 0 0 #999;
	}
	.titlebar{
		width:148px;
	}
	.primary-menu, .sub-menu{
	left:0;
}
/* ----- WORKS SLIDER -----*/
	.dark{
		height:auto;
		}
	a.control_prev, a.control_next, #imgCnt{
	display:none;
		}
	.wp-caption-text{
		position:static;
		text-align:center;
		width:initial;
		line-height:1.375em;
		margin-bottom:30px;
}
	.image-body{
		margin:0 auto;
		position:static;
		height:auto;
	}
	.tall, .tall .gallery-item, .tall .wp-caption{
		width:calc(100vw - 40px) !important;
		height:auto !important;
		margin:0 auto !important;
	}
	.wide, .wide figure{
		width:100vw;
		height:auto;
		max-width:auto;
	}
	.tall figure img, .tall p img{
		width:calc(100vw - 40px) !important;
		height:auto;
		margin:0 auto !important;
		position:static !important;
	}
	.wide figure img, .wide p img{
		height:calc(100vh - 40px) !important;
		width:auto !important;
		margin:0 auto;
		position:static !important;
	}
	.metadata{
		position:static;
		width:auto;
		margin:20px auto 56px;
		text-align:center;
	}
	.titlebar, .titlebar-200{
		position:static;
		width:auto;
	}
}

@media screen and (max-width:399px){
	.titlebar, .titlebar-200{
	width:auto;
	}
	.post-body{
		margin:0;
		padding:0;
		width:auto;
	}

}