/*		Default Layout: 1280px      */

body { -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ }

footer .content-box { margin-bottom: 50px; }
footmenu a { margin-left: 10px; }
.infowindow { max-width: 320px; }

.white-popup { width: 600px; }/* */
form { width: 70%; }
/**/
	.satekstom,
	.saslikom {
		display: inline-table;
		vertical-align: middle;
		width: 50%;
		text-align: center;
	}
	.saslikom img {
		padding: 10%;
		width: 80%;
	}

@media only screen and (min-width: 1400px) and (max-width: 3600px) {
	#logo-butterfly {
		display: block;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1500px) {
	ul.pdf-files {
		width: auto !important;
	}
	ul.pdf-files > li {
		float: none;
		text-align: left;
		margin: 30px 0 30px 0;
	}
}

@media only screen and (max-width: 1200px) {
	#posts-list .feature-image.events,
	#posts-list .feature-image.events img {
		width: 100%;
	}
	.promo-img1 {
		margin-left: 10px;
		width: 90%;
	}
	.promo-img2 {
		width: 80%;
	}
}

@media only screen and (max-width: 1120px) {
	nav { 
		display: none;
	}
	#mobile-nav-open { display: block; }
	.mob-nav { display: block; }

	.copy_footer #copyright {
		float: right;
		padding-top: 10px;
		margin-right: 0px;
		width: 100%;
		text-align: right;
	}
/*	#contact-form { width:100%; }	*/
}

@media only screen and (max-width: 620px) {
	footmenu { width: 100%; margin-bottom: 10px; }
	footmenu a { background-color: #A6C6C5; margin-left: 0px; display: block; text-align: center; padding: 10px 0px; }
	footmenu a:hover { opacity:0.7; }
	.copy_footer #copyright { padding-top: 10px; text-align: center; }
}

.pullquote-right.logos {
	width: auto;
	margin-top: 6px;
	padding: 0 20px 0 20px;
}
.pullquote-right.logos a:hover { opacity: 0.5; }
.pullquote-right img.logo-left { height: 150px; }
.pullquote-right img.logo-right { height: 150px; margin-left: 20px; }

/* portfolio */
.project-description.worker { width: 528px; margin-left: 24px; }
.project-info.worker { width: 160px; margin-right: 24px; text-align: left; }

#page-content.project { padding-bottom: 0px; margin-bottom: -20px; }
.project-heading.project { text-align: left; margin-bottom: 40px; }


/*		Tablet Layout: 768px. 	-------------------- prvi prelom -----------------------		*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
	/* main */
	body { font-size: 17px; }

	h1 { font-size: 50px; }
	h2 { font-size: 42px; }
	h3 { font-size: 32px; }
	h4 { font-size: 24px; }
	h5 { font-size: 20px; }
	h6 { font-size: 18px; }

	/* headline */
	.headline h1 { font-size: 40px; }
	.headline h3 { font-size: 24px; }

	/* CIRCLES -----------------------------------------------------------*/
	.circles { width: 90%; }

	.krug > a > div {
		padding: 10%;
	
		font-size: 4.0vw; /* responsive font size */
		line-height: 4.0vw;
	}

	/* columns */
	.one-half { width: 50%; }

	/* images */
	.img1a { width: 60%; }
	.img2 { width: 40%; margin-top: -40px; margin-bottom: 0px; }
	.img2a { margin-top: -40px; }
	
	/* masthead */
	#masthead .subhead { line-height: 34px; }

	/* featured */
	.featured figure { width: calc(30% - 20px); margin:1.65%; }
	.featured figure.four { width: 160px; }
	.featured figure.half { width: 334px; margin-left: 0px; margin-right: 20px; }
	.featured figure.half.right { margin-left: 20px; margin-right: 0px; }

	.featured figure img:hover {
		margin: -3%;
		width: 106%;
		max-width: 106%;
	}

	/*text posts */
	.text-posts li { margin-left: 24px; width: 221px; }
	
	/* home gallery */
	.home-gallery li { margin-left: 24px; width: 221px; }
	.home-gallery.workers li { margin-left: 24px; width: 160px; }

	/* portfolio */
	.project-description { width: 528px; margin-left: 24px; }
	.project-info { width: 160px; margin-right: 24px; }
	
	/* blog */
	#posts-list { width: 100%; }

	#posts-list .feature-image {
		width: 100%;
	}
	#post-content,
	#page-content,
	#page-content.about { width: 440px; }
	#page-content.facebook { width: 416px; }
	#posts-list .feature-image.events { width: 100%; }
	#posts-list .feature-image.events img { width: 100%; }



/*	#contact-form { width:100%; }	*/

	/* project */
	#page-content.project { width: 100%; margin: 0px; }
	#page-content.project #showslide li.height {
		height: 510px;
	}

	#commentform textarea,
	#contact-form textarea {
		width: 424px;
	}


	/* aside */
	aside.retractil { top: 70px; }
	
	/* sidebar */
	#sidebar,
	#sidebar.reference { width: 340px; }
	#sidebar.project { width: 680px; text-align: center; }
		
	/* widgets */
	.recent-post .post-head { width: 162px; }

	.popup_format { /* margine [-(height/2)px 0 0 -(width/2] */
		width: 600px;
		margin-left: -300px;
	}

	.infowindow { max-width: 260px; }

	.pullquote-right img.logo-left { height: 150px; }
	.pullquote-right img.logo-right { height: 150px; }

	footer .content-box { margin-bottom: 50px; }

}


@media only screen and (min-width: 440px) and (max-width: 767px) {
	#logo-butterfly {
		width: 130px;
		display: block;
	}
}
/*		Wide Mobile Layout: 480px. 	---------------- drugi prelom -------------------		*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body { font-size: 17px; }

	.main-box.event { width: 484px; }

	/* CIRCLES -----------------------------------------------------------*/
	.circles { width: 90%; }

	.krug > a > div {
		padding: 10%;
	
		font-size: 5.0vw; /* responsive font size */
		line-height: 5.0vw;
	}

	#login-btn, #logout-btn { margin-right: 24px; }
	#topnav { margin-right: 10px; }

	header { height: 90px; }

	h1 { font-size: 46px; }
	h2 { font-size: 36px; }
	h3 { font-size: 28px; }
	h4 { font-size: 22px; }
	h5 { font-size: 20px; }
	h6 { font-size: 18px; }

	.publi.heading {
		float: none;
		position: absolute;
		top: 0px;
	}

	#logo {
		height: 90px;
	}

	/* headline */
	.headline { font-size: 18px; padding: 10px 20px 10px 20px; }
	.headline h1, .headline h3 { font-size: 20px; }

	.reg-log { float: left;	}
	nav { display: none; }
	
	ul.pdf-files {
		width: 100% !important;
		margin-bottom: 30px;
		margin-left: 0px;
	}
	ul.pdf-files > li {
		float: none;
		text-align: center;
		margin: 30px 0 30px 0;
	}
	
	#phone { position: absolute; right: 70px; }
	#phone a { right: 108px; }
	#phone img { right: 110px; width: 36px; }

	#mobile-nav-open { display: block; margin-top:25px; }
	.mob-nav { display: block; }
	.mob-nav a { font-size: 16px; }

	/* columns */
	.one-half { width: 100%; }
	.one-third { width: 30.30%; margin-right: 4.54%; }

	.sameheight { display: table; }
	.col-left, .col-right { width: 100%; }

	.satekstom {
		float: none;
		width: 100%;
		display: table-footer-group;
	/*	background-color: #FFFFFF;	*/
	}
	.saslikom {
		float: none;
		width: 100%;
		display: table-header-group;
	}

	#resitve2a table,
	#resitve3a table { border: none; }
	#resitve3a .satekstom { float:left; border-top:1px solid #333; }

	/*.slika { display: table; padding:0; height:300px; }	*/
	/*.text { display: table; }	*/

	/* images */
	.img1a { width: 80%; }
	.img2 { width: 33%; margin-top: 0px; }
	.img2a { width: 150px; margin-top: -40px; }
	
	.fullbutton .vertical { font-size: 16px; }

	/* masthead */
	#masthead .head { font-size: 21px; }
	
	.city {
		width: 436px;
		margin: 0 auto;
	/*	padding: 20 24px 20px 24px;	*/
	}
	.city label { margin-left: 0px; }
	.city input { margin-left: 20px; }
/*	.city input[type="button"] { float: right; margin-left: 0px; }	*/

	/* featured */
	.featured figure { 	width: calc(45% - 30px); margin:2.5%; }
	.featured figure.four { width: 203px; }
	.featured figure.half { width: 430px; margin-left: 0px; margin-right: 0px; }
	.featured figure.half.right { margin-left: 0px; margin-right: 0px; }

	.featured figure img:hover {
		margin: -2%;
		width: 104%;
		max-width: 104%;
	}

	/* featured portfolio-list */
	.featured.related-projects figure img,
	.featured.portfolio-list figure img { width: 100%; }
	.featured.related-projects figure .link,
	.featured.portfolio-list figure .link { margin-right: 0px; }

	/*text posts */
	.text-posts li { margin-left: 24px; width: 207px; }
	
	/* home gallery */
	.home-gallery li { margin-left: 24px; width: 206px; }
	.home-gallery.workers li {  margin-left: 24px; width: 129px; }
	
	/* aside */
	aside.retractil { top: 72px; }
	
	/* sidebar */
	#sidebar,
	#sidebar.reference { float:none; width:100%; }
	#sidebar.facebook { float:left; width:436px; text-align:center; }

	#sidebar { display:table-header-group; }
	.page-content { display:table-footer-group; }

	.sidebar-content { margin-left:0px; }
	.sidebar-content.left {
		margin-left: 0;
		margin-right: 0;
	}
	
	/* portfolio */
	.project-description { width: 436px; margin-left: 24px; clear: both; }
	.project-info { float: left; width: 436px; margin-right: 24px; text-align: left; }
	
	.project-description.worker { width: 252px; margin-left: 24px; clear: both; }
	.project-info.worker { width: 160px; margin-right: 24px; }
	
	/* blog & about */

	#post-content,
/*	#page-content,	*/
	#page-content.facebook,
	#page-content.about {
		width: 436px;
		margin-left: 24px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}

	#posts-list .feature-image.events { width: 100%; }

	/* project */
	#page-content.project { width: 100%; margin: 0px; padding-bottom: 10px; }
	#posts-list .feature-image { width: 100%; }

	.white-popup { width: auto; }
/*	#contact-form { width:100%; }	*/
	form input[type="button"] { width: 100% }

	#commentform label {
	/*	margin-top: auto;
		margin-top: -16px;	*/
		margin-bottom: auto;
		display: inline;
	}
		
	/* footer */
	footer .content-box { margin-bottom: 0px; }
	#footer-cols>li.first-col { width: 48%; padding-right: 2%; }
	#footer-cols>li.second-col { width: 48%; padding-left: 2%; padding-right: 0; }
	#footer-cols>li.third-col { width: 100%; padding: 0; float: left; margin-top: -20px; margin-bottom: 100px; height: 800px;}

	/* widgets */
	.recent-post .post-head { width: 140px; }
	
	.popup_format { /* margine [-(height/2)px 0 0 -(width/2] */
		width: 400px;
		margin-left: -200px;
	}

	.infowindow { max-width: 260px; }

	.pullquote-right.logos { text-align: right; }
	.pullquote-right img.logo-left { height: 110px; }
	.pullquote-right img.logo-right {
		height: 100px;
		display: block;
		margin-left: 0px;
		margin-top: 20px;
	}

}



/*		Mobile Layout: 320px. 	----------------- treci prelom ---------------------		*/
@media only screen and (max-width: 479px) {

	body { font-size: 16px; }

	.main-box.event { width: 320px; }
	.cont-box { margin: 0 10px; }

	/* CIRCLES -----------------------------------------------------------*/
	.circles { width: 90%; }
	.circles > a > div { padding: 30%; margin: 5% 20%; }
	.circles > a > div > div > div > div {
		font-size: 7.0vw;
		line-height: 7.0vw;
	}

	.krug > a > div {
		padding: 10%;
	
		font-size: 6.0vw; /* responsive font size */
		line-height: 6.0vw;
	}

	.fullbutton .vertical { 
		margin-left:10px;
		margin-right:10px;
		font-size: 14px;
		line-height: 16px;
	}

	header { height: 90px;}

	h1 { font-size: 36px; }
	h2 { font-size: 28px; }
	h3 { font-size: 24px; }
	h4 { font-size: 20px; }
	h5 { font-size: 16px; }
	h6 { font-size: 14px; }

	.publi.heading {
		float: none;
		position: absolute;
		top: 0px;
	}

	#logo {
		height: 90px;
	}

	.headline h1, .headline h3 { font-size: 16px; }

	.newparking h2 { line-height: 30px; }
	
	#info { margin-left: 0; }

	.reg-log { float: left;	}
	nav { display: none; }

	ul.pdf-files {
		width: 100% !important;
		margin-bottom: 30px;
		margin-left: 0px;
	}
	ul.pdf-files > li {
		float: none;
		text-align: center;
		margin: 30px 0 30px 0;
	}
		
	#phone { position: absolute; right: 68px; margin-top: 2px; }
	#phone a {
		background-size: 32px auto;
		right: -36px;
		margin-top: 2px;
		}
	#phone img {
		width: 32px;
		right: -32px;
		margin-top: 2px;
	}
	.phone-txt { margin-top: 16px; }

	#mobile-nav-open { display: block; margin-top:25px; }
	.mob-nav { display: block; }
	.mob-nav a { font-size: 16px; }

	.home-block-heading {
		font-size: 30px;
		margin-left: 24px;
		margin-right: 24px;
	}
	
	/* columns */
	.one-half { width: 100%; }
	.one-third { width: 100%; margin-right: 0px; }

	.sameheight { display: table; }
	.col-left, .col-right { width: 100%; }

	.satekstom {
		float: none;
		width: 100%;
		display: table-footer-group;
	/*	background-color: #FFFFFF;	*/
	}
	.saslikom {
		float: none;
		width: 100%;
		display: table-header-group;
	}

	#resitve2a table,
	#resitve3a table { border: none; }
	#resitve3a .satekstom { float:left; border-top:1px solid #333; }

	/*.tekst { padding: 40px 0 20px 0; }
	.slika { display: table; padding: 0; height: 200px; }	*/

	/* main */
	
	/* images */
	.img0 { width: 100px; }
	.img1a { width: 100%; }
	.img2a { width: 120px; margin-top: -20px; }

	/* masthead */
/*	#masthead .breadcrumbs { display: none; }	*/
	#masthead .head { font-size: 18px; }
	#masthead .subhead { display: none; }
	
	/* forms */
	
	#commentform { margin-bottom: 20px; }

	#respond .cancel-comment-reply a { margin-bottom: 20px; }
	
	.white-popup { width: auto; }
	form { width: 100%; }
	form input[type="button"] { width: 100% }

	#login input[type="email"],
	#login input[type="password"],
	#commentform input[type="text"],
	#commentform input[type="email"],
	#commentform textarea { width: 90%; }

	#login-btn, #logout-btn { margin-right: 0; padding-right: 0; }
/*
	form input[type="submit"],
	form input[type="reset"],
	.login-form input[name="cancel"] { width: 90%; padding-left: 0px; padding-right: 0px; }
*/
	form select[id="country1"] { width: 100%; }

	.infowindow { max-width: 140px; }

	.city {
		margin: 0 auto;
		width: 272px;
		padding: 10px 24px 20px 24px;
		text-align: center;
	}
	.city label {
		padding: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 5px;
		margin-bottom: 10px;
		line-height: 20px;
	}
	.city input {
		width: 100%;
		margin-right: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.city input[type="button"] {
		width: 30%;
		margin: 0 auto;
	}

	/* featured */
	.featured figure { width: calc(100% - 60px); margin:0 0 10% 0; }
	.featured figure .link { margin-right: 0px; }

	.featured figure.four { width: 124px; }
	#heading-box { padding: 10px 20px; }
	#heading-box .vertical { font-size: 14px; line-height: 16px; }

	.featured figure.half { width: 272px; margin-left: 0px; margin-right: 0px; }
	.featured figure.half.right { margin-left: 0px; }

	.featured figure img:hover {
		margin: -2%;
		width: 104%;
		max-width: 104%;
	}

	/* aside */
	aside.retractil { top: 69px; }
	
	/* sidebar */
	#sidebar,
	#sidebar.reference { float:none; width:100%; margin:0; }
	#sidebar.facebook { width: 272px; }
	
	#sidebar { display:table-header-group; }
	.page-content { display:table-footer-group; }

	.sidebar-content { margin-left:0px; }
	.sidebar-content.left {
		margin-left: 0;
		margin-right: 0;
	}

	/* portfolio */
	.project-description { width: 272px; margin-left: 24px; clear: both; }
	.project-info { float: left; width: 272px; margin-right: 24px; text-align: left; }
	.project-heading h1 { font-size: 28px; }
	
	.project-description.worker { width: 272px; clear: both; }
	.project-info.worker { float: left; width: 272px; }
	
	/* blog */
	#post-content,
	#page-content, 
	#page-content.facebook, 
	#page-content.about { 
		width: 272px;
		margin-left: 24px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}

	#posts-list .feature-image.events { width: 100%; }

	/* project */
	#page-content.project { width: 100%; margin: 0px; padding-bottom: 10px; }
	#posts-list .feature-image { width: 100%; }

	form h1 { font-size: 28px; }
	form label { display: block; }
	.popup_format { /* margine [-(height/2)px 0 0 -(width/2] */
		width: 280px;
		margin-left: -140px;
	}
	.cancel-align { float: right; }
	.reset-align { float: left; margin-left: 0px; }

	/* footer */
	footer .content-box { margin-bottom: 0px; }
	#footer-cols>li.first-col { width: 100%; padding: 0; margin-bottom: 20px;}
	#footer-cols>li.second-col { width: 100%; padding: 0; }
	#footer-cols>li.third-col { width: 100%; padding: 0; float: left; margin-top: -20px; margin-bottom: 200px; height: 700px;}

	/* widgets */
	.recent-post .post-head { width: 185px; }
	
	/* headline */
	.headline { padding: 10px 20px 10px 20px; }

	/*text posts */
	.text-posts li { margin-left: 24px; width: 272px; }
	
	/* home gallery */
	.home-gallery li { margin-left: 24px; width: 272px; }
	.home-gallery.workers li { margin-left: 24px; width: 124px; }

	.pullquote-right.logos {
		width: 100%;
		text-align: left;
		margin-top: 0px;
		padding: 0 20px 0 20px;
	}
	.pullquote-right img.logo-left {
		float: left;
		height: 90px;
		padding-left: 20px;
	}
	.pullquote-right img.logo-right {
		float: right;
		height: 90px;
		margin-left: 20px;
	}

}