/*
Responzivni CSS za Tuzlanski.ba
Autor: Zelimir Graf
*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}

@media (max-width:1180px) {
	.banner-clanak-donji {
		width: 100%;
		box-sizing: border-box;
	}

	#text-24, .banner-izdvojeno, .gornji-banner, #text-2, #text-6, #text-25, #text-19, .banner-kategorija,  #text-20 {
		display: none !important;
	}
	.colophon .wrapper {
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	.utility-banner {
		height: auto;
		padding: 15px 0;
	}
	.utility-banner .wrapper {
		width: 100%;
		padding: 0 25px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
}

.show-on-mob-full-width {
	display: none;
}

.hide-on-mobile {
	display: block;
}



/************************************************************************************************************************
*************************************************************************************************************************
**************************************************od 893px do 1180px*****************************************************
*************************************************************************************************************************/


@media (min-width:893px) and (max-width:1180px) {

/************************************************
*****************glavni container****************
************************************************/

.sakrij-ispod-1180 {
	display: none !important;
}

.cf-za-1180:before, .cf-za-1180:after {
	content: " ";
	display: table;
}
.cf-za-1180:after {
	clear:both;
}

div[role=main] {
	width: 98%;
}

.left-content {
	width: 70%;
}

.sidebar {
	width: 25%;
}

/************************************************
*****************prvi blok**********************
************************************************/


.prvi-blok-izdvojeno, .prvi-blok-izdvojeno img {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin-right: 0;
	height: auto !important;
	float: none;
	clear:both;
	display: block;
}

/************************************************
*****************drugi blok**********************
************************************************/

.drugi-blok-izdvojeno {
	width: 100%;
	margin-top: 15px;
	float: none;
	clear:both;
	display:block;
}

.drugi-blok-prvi-post {
	width: 49%;
	margin-right: 2%;
}

.drugi-blok-drugi-post {
	width: 49%;
}
.drugi-blok-treci-post {
	width: 100%;
	display: block;
	clear:both;
	margin: 15px 0;
	height: auto !important;
}
.drugi-blok-izdvojeno img {
	width: 100%;
}


/************************************************
*****************carsija*************************
************************************************/
.carsija-blok {
	margin-bottom: 25px;
}
.carsija-post-naslovnica {
	width: 32% !important;
}
.carsija-post-naslovnica img {
	width: 100% !important;
}
.carsija-blok .shadow-pozadina {
	width: 100%;
}


/************************************************
***********infoteka i ostalo*********************
************************************************/

.trostruki-blok {
	margin-top: 0px;
}

.ostali-postovi {
	height: 85px;
}
.infoteka-blok, .oko_nas-blok, .ekonomija-blok, .sport-blok, .lifestyle-blok, .zanimljivosti-blok  {
	width: 49%;
	margin-right: 5px;
	margin-bottom: 25px;
}
.oko_nas-blok, .sport-blok, .zanimljivosti-blok {
	margin-right: 0 !important;
}


/************************************************
****************hronika-blok*********************
************************************************/
.hronika-blok {
	margin-top: 0px;
}
.hronika-post-naslovnica, .videonet-post-naslovnica, .maksuzija-post-naslovnica {
	width: 49%;
	margin-bottom: 10px;
	margin-left: 1%;
}
.hronika-post-naslovnica.margina-2, .videonet-post-naslovnica.margina-2, .maksuzija-post-naslovnica.margina-2 { 
	margin-left: 0 !important;
}
.hronika-post-naslovnica.margina-4, .videonet-post-naslovnica.margina-4, .maksuzija-post-naslovnica.margina-4 {
	display: none !important;
}
.hronika-post-naslovnica img, .videonet-post-naslovnica img, .maksuzija-post-naslovnica img {
	width: 100% !important;
}
.maksuzija-blok .shadow-pozadina, .videonet-blok .shadow-pozadina, .hronika-blok .shadow-pozadina {
	width: 100%;
}
.hronika-post-naslovnica .category-crna-hronika a img, .videonet-post-naslovnica .category-video-net a img, .maksuzija-post-naslovnica .category-maksuzija a img {
	border: none !important;
}
.maksuzija-blok .shadow-pozadina, .videonet-blok .shadow-pozadina, .hronika-blok .shadow-pozadina {
	bottom: 0;
}

.category-sport.clanak-0, .category-sport.clanak-1, .category-lifestyle.clanak-0, .category-lifestyle.clanak-1, .category-zanimljivosti.clanak-0, .category-zanimljivosti.clanak-1 {
	padding-bottom: 0px;
}


/************************************************
**********************clanci*********************
************************************************/

.article-left {
	width: 25%;
}
.article-right {
	width: 70%;
}
.fiksiraj {
	width: 14%;
}
.popularni-post img {
	width: 100%;
}
.fb_iframe_widget {
	width: 100%;
	overflow: hidden;
}
.fb_iframe_widget span {
	width: 100% !important;
}
.fb_iframe_widget iframe, .fb_iframe_widget div {
	width: 100% !important;
}
.fbFeedbackContent {
	width: 65% !important;
}
.facebook-komentari, .fb-comments, .fb-comments iframe[style], .fb-comments span {
	width: 100% !important;
}


/************************************************
**********************kategorije*****************
************************************************/

.prvi-blok-izdvojeno-kategorija {
	width: 100%;
	clear:both;
	display: block;
	float:none;
}
.prvi-blok-izdvojeno-kategorija img {
	width: 100%;
}
.drugi-blok-izdvojeno-kategorija {
	width: 100%;
	float:none;
	display: block;
	clear:both;
}
.drugi-blok-treci-post-kategorija {
	width:49%;
	float:left;
	clear:none;
	margin-right: 2%
}
.drugi-blok-treci-post-kategorija img {
	width: 100%;
}
.bez-desne-margine-1180 {
	margin-right: 0 !important;
	clear:right;
}
.bez-desne-margine-1180:before, .bez-desne-margine-1180:after {
	content: " ";
	display:table;
}
.bez-desne-margine-1180:after {
	clear:both;
}

}












/************************************************************************************************************************
*************************************************************************************************************************
********************************************************do 892px*********************************************************
*************************************************************************************************************************/

/************************************************
*****************glavni container****************
************************************************/

@media (max-width:892px) {



/************************************************
****************navigacija***********************
************************************************/

.utility-banner ul.header-menu {
	width: auto;
}




.sakrij-ispod-893 {
	display: none !important;
}

div[role=main] {
	width: 98%;
}
.left-content {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.sidebar {
	width: 100%;
	padding: 20px 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/************************************************
*****************prvi blok**********************
************************************************/

.prvi-blok-izdvojeno, .prvi-blok-izdvojeno img {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin-right: 0;
	height: auto !important;
	display: block;
	clear: both;
	float: none;
}


/************************************************
*****************drugi blok**********************
************************************************/


.drugi-blok-izdvojeno {
	width: 100%;
	margin-top: 15px;
	float: none;
	clear:both;
	display:block;
}
.drugi-blok-izdvojeno img {
	width: 100%;
}
.drugi-blok-prvi-post {
	width: 49%;
	margin-right: 2%;
}

.drugi-blok-drugi-post {
	width: 49%;
}
.drugi-blok-treci-post {
	width: 100%;
	display: block;
	clear:both;
	height: auto !important;
	margin: 15px 0;
}

/************************************************
*****************carsija*************************
************************************************/
.carsija-blok {
	margin-bottom: 25px;
}
.carsija-post-naslovnica {
	width: 100% !important;
	margin-left: 0 !important;
	display: block !important;
	float:none !important;
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}
.carsija-post-naslovnica img {
	width: 100% !important;
}
.carsija-blok .shadow-pozadina {
	width: 100%;
}


/************************************************
***********infoteka i ostalo*********************
************************************************/

.trostruki-blok {
	margin-top: 0px;
}

.ostali-postovi {
	height: auto !important;
}
.infoteka-blok, .oko_nas-blok, .ekonomija-blok, .sport-blok, .lifestyle-blok, .zanimljivosti-blok  {
	width: 100% !important;
	margin-right: 0px !important;
	margin-bottom: 25px;
}


/************************************************
****************hronika-blok*********************
************************************************/
.hronika-blok {
	margin-top: 0px;
}
.hronika-post-naslovnica, .videonet-post-naslovnica, .maksuzija-post-naslovnica {
	width: 49%;
	margin-bottom: 10px;
	margin-left: 1%;
}
.hronika-post-naslovnica.margina-2, .videonet-post-naslovnica.margina-2, .maksuzija-post-naslovnica.margina-2 { 
	margin-left: 0 !important;
}
.hronika-post-naslovnica.margina-4, .videonet-post-naslovnica.margina-4, .maksuzija-post-naslovnica.margina-4 {
	display: none !important;
}
.hronika-post-naslovnica img, .videonet-post-naslovnica img, .maksuzija-post-naslovnica img {
	width: 100% !important;
}
.maksuzija-blok .shadow-pozadina, .videonet-blok .shadow-pozadina, .hronika-blok .shadow-pozadina {
	width: 100%;
}
.hronika-post-naslovnica .category-crna-hronika a img, .videonet-post-naslovnica .category-video-net a img, .maksuzija-post-naslovnica .category-maksuzija a img {
	border: none !important;
}
.maksuzija-blok .shadow-pozadina, .videonet-blok .shadow-pozadina, .hronika-blok .shadow-pozadina {
	bottom: 0;
}

.category-sport.clanak-0, .category-sport.clanak-1, .category-lifestyle.clanak-0, .category-lifestyle.clanak-1, .category-zanimljivosti.clanak-0, .category-zanimljivosti.clanak-1 {
	padding-bottom: 0px;
}


/************************************************
****************clanci***************************
************************************************/

.article-left {
	display: none !important;
}
.article-right {
	width: 100%;
	float:none;
	display:block;
	clear:both;
}

.fb_iframe_widget {
	width: 100%;
	overflow: hidden;
}
.fb_iframe_widget span {
	width: 100% !important;
}
.fb_iframe_widget iframe, .fb_iframe_widget div {
	width: 100% !important;
}
.fbFeedbackContent {
	width: 65% !important;
}
.facebook-komentari, .fb-comments, .fb-comments iframe[style], .fb-comments span {
	width: 100% !important;
}

.article-wrapper .articleImage img {
	height: 205px !important;
}


/************************************************
**********************kategorije*****************
************************************************/

.prvi-blok-izdvojeno-kategorija {
	width: 100%;
	clear:both;
	display: block;
	float:none;
}
.prvi-blok-izdvojeno-kategorija img {
	width: 100%;
}
.drugi-blok-izdvojeno-kategorija {
	width: 100%;
	float:none;
	display: block;
	clear:both;
}
.drugi-blok-treci-post-kategorija {
	width:100%;
	float:left;
	clear:none;
	margin-right: 0
}
.drugi-blok-treci-post-kategorija img {
	width: 100%;
}
.bez-desne-margine-1180 {
	margin-right: 0 !important;
	clear:both;
}
.bez-desne-margine-1180:before, .bez-desne-margine-1180:after {
	content: " ";
	display:table;
}
.bez-desne-margine-1180:after {
	clear:both;
}

div.show-on-mob-full-width {
	display: block;
}

.hide-on-mobile {
	display: none;
}

}

/***************utility banner********************/
@media (max-width:892px) {
	.datum, #menu-gornji-meni, .main-nav {
		display: none !important;
	}
	.utility-banner .pretraga {
		display:none;
	}

	/*************skrivanje widgeta***************/
	.weatherslider_widget, #polls-widget-3, body.home #webizradae_widget-2, #webizradavrijeme_widget-2, #polls-widget-2, #text-12  {
		display: none !important;
	}
	.colophon  {
		display:none;
	}



}



/************************************************************************************************************************
*************************************************************************************************************************
********************************************************tabovi***********************************************************
*************************************************************************************************************************/

@media (min-width:600px) and (max-width:1180px) {

	.tabovi-blok-lijevo {
		margin-bottom: 15px;
		border-right: none;
		width: 100%;
		clear:both;
		display:block;
		float:none;
	}
	.fotka-tab-lijevo {
		width: 50%;
	}
	.tab-desno {
		width: 48%;
		margin-left: 2%;
	}
	.ui-widget-content a.tabovi-prvi-clanak-fotka {
		width: 100%;
	}
	.tabovi-desno  {
		width: 100%; 
		float:none;
		margin-bottom: 20px;
	}
	.ui-tabs .ui-tabs-nav li {
		margin: 1px 7px 5px 0;
		width: 31%;
	}

}


@media  (max-width:980px) {

	.socijalne-ikone {
		margin: 5px auto 2px;
		clear:both;
		display:block;
		float:none;
	}

	.pretraga {display:none;}

}

@media (max-width:599px) {


	.tabovi-blok-lijevo {
		margin-bottom: 15px;
		border-right: none;
		width: 100%;
		clear:both;
		display:block;
		float:none;
	}

	.fotka-tab-lijevo {
		width: 100%;
		float:none;
		clear:both;
		display:block;
	}
	.fotka-tab-lijevo img {
		width: 100%;
	}
	.ui-widget-content a.tabovi-prvi-clanak-fotka {
		width: 100%;
		margin-bottom: 15px;
	}
	.tab-desno {
		display:block;
		clear:both;
		margin-left:0;
		width:100%;
	}
	.tabovi-desno  {
		width: 100%; 
		float:none;
		margin-bottom: 20px;
	}
	.ui-tabs .ui-tabs-nav li {
		margin: 1px 7px 5px 0;
		width: 45%;
	}

	.post-header h1 {
		font-size: 22px;
		line-height: 27px;
		color: white;
		padding-right: 10px;
		display: block;
		padding-left: 10px;
		padding-bottom: 25px;
		padding-top: 20px;
	}

	.article-wrapper h1.headlineAboveImage {
		font-size: 2.0em;
	}


}


@media (max-width:514px) {

	.mapaSlika {display:none;}

	.widget_totalpoll {display:none;}

	#text-41 {display:none;}

	#text-39 {display:none;}

	.datum {
		float:none;
		text-align:center;
		clear:both;
		display: block;
	}

	.utility-banner ul.header-menu {
		float:none;
		margin: 0 auto;
		width: 100%;
		text-align:center;
	}
	.utility-banner li {
		float: none;
		position: relative;
		display: inline-block;
	}

	.pretraga {
		margin: 0 auto 15px;;
		clear:both;
		float:none;
		display:block;
		margin-right: auto;
	}

	.socijalne-ikone {
		margin: 5px auto 2px;
		clear:both;
		display:block;
		float:none;
	}

	.facebook-tipke {
		margin-top: 20px;
		margin-bottom: 10px;
		position: static;
		top: 0;
	}

	#preuzmi-cjenovnik, #preuzmi-logo, #kontaktirajte-nas, #posalji-vijest {
		width: 100%;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.textwidget iframe {
		width: 100% !important;
		overflow: hidden;
	}

/************************************************
********************fontovi*********************
************************************************/

.prvi-blok-izdvojeno-kategorija h3 a {
	font-size: 17px;
}
body.category h2.post-title {
	font-size: 16px;
	line-height: 21px;
}
.drugi-blok-prvi-post h3 a, .drugi-blok-drugi-post h3 a {
	font-size: 13px;
	color: white;
	line-height: 16px;
}
.breadcrumbs-kategorija span a, body.search span.breadcrumb_last {
	font-size: 11px;
}








}


/************************************************************************************************************************
*************************************************************************************************************************
**********************************************glavna navigacija*********************************************************
*************************************************************************************************************************/

@media (min-width:892px) and (max-width:1180px) {
	.main-nav {
		height: auto;
	}
	.logotip-tuzlanski {
		display: block;
		clear:both;
		float:none;
		margin:0 auto;
		text-align:center;
	}

	.main-nav .wrapper {
		width: 100%;
		float: none;
		margin: 0 auto;
		text-align: center;
	}

	.main-nav li {
		float:none;
		display: inline-block;
	}
	.main-nav ul {
		text-align:center;
	}

	.menu-wrapper {
		width:100%;
	}

}

@media (min-width:892px) and (max-width:1005px) {

	.main-nav li a, .main-nav li a:visited {
		padding: 13px 10px;
	}
}

@media (max-width:1180px) {
	.menu-wrapper {
		width: 100%;
	}
	.logotip-tuzlanski {
		display: block;
		clear:both;
		float:none;
		margin:0 auto;
		text-align:center;
	}
}