/* concept.newsbox */

/*  !!!! MUST */
.newsbox-container {
	width:100%;
	height: 350px;
	position:relative;
	float:left;
	overflow: hidden;
	margin-bottom: 25px;
}
.newsbox-container .zajawka,
.newsbox-container .zajawka-shaper {
	top:0;
	width:100%;
	display:block;
	float:left;
	position:absolute;
	
	opacity:0;
}
.newsbox-container .zajawka a {
	float:left;
	display:block;
}


/*  !!!! MUST */
/*	animations	*/
.newsbox-container .zajawka.active {
	z-index: 4;
	
	animation: .3s fadeIn 1 forwards;
	-webkit-animation: .3s fadeIn 1 forwards;
}
@keyframes fadeIn {
	100% {opacity:1}
}
/*
W3C sends regards...
@-webkit-keyframes fadeIn {
	100% {opacity:1}
}*/
.newsbox-container .zajawka:not(.active) {
	animation: .3s fadeOut 1 forwards;
	-webkit-animation: .3s fadeOut 1 forwards;
}
@keyframes fadeOut {
	0%{opacity:1}
	100% {opacity:0}
}
/*
W3C sends regards...
@-webkit-keyframes fadeOut {
	0%{opacity:1}
	100% {opacity:0}
}
*/

/*  !!!! SHOULD */
/*	utrzymuje proporcje element�w */
.newsbox-container .slide-shaper {
	position:relative;
	float:left;
	display:block;
	width:100%;
	z-index:-1;
}
.newsbox-container .slide-shaper .box-left {
    max-width:803px;
}
.newsbox-container .zajawka.in-row + .slide-shaper .box-right {
    display:none;
}

.newsbox-container .nb-shaper-image {
	width:100%;
	padding-bottom:43.5%; /* definiuje aspect ratio - dla szeroko�ci 100 px wysoko�� to warto�� padding-bottom - przeliczy� dla ka�dego newsboxa */
	display:block;
}
.newsbox-container .nb-shaper-text {
	width:100%;
	padding-bottom:20%;
	display:block;
}


/*  STYLE ONLY */

/*	timer */
.timer {
	display:block;
	width:100%;
	height:5px;
	background:#ccc;
	position:relative;
	float:left;
	
	margin-bottom:10px;
	margin-top:5px;
}

/*	pager */
.newsbox-container .pager {
	display:block;
	position: absolute;
	left: 20px;
    bottom: 10px;
    z-index: 4;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
}
.newsbox-container .pager-button {	
	width:16px;
	height:16px;
	display:block;
    float: left; 
	color:#fff;
	background:#e7e7e7;
	cursor:pointer;
    border-radius: 8px;
}

.newsbox-container .pager-button + .pager-button
{
    margin-left:10px;
}

.newsbox-container .pager-button.active {
	background:#8dc63f;
	cursor:auto;
}
.newsbox-container .pager-button:hover,
.newsbox-container .pager-button:focus
{
    background:#da251d;
}
.nav-arrows
{
    display:block;
	position: absolute;
	right: 5px;
    bottom: 10px;
    z-index:4;
}

.nav-arrow 
{
	margin-right:5px;
	height:30px;
	width:30px;
	display:inline-block;
	color:#000;
	background:#fff url('../../images/common/sprites.png') no-repeat 9px -255px;
	cursor:pointer;
	font-size: 0;
}

.nav-arrow:hover
{ background-color: #8dc63f !important; }

.nav-arrow.prev
{ background:#fff url('../../images/common/sprites.png') no-repeat 7px -287px; }


.newsbox-container .box-left {
	display:block;
	float:left;
	width:67.5%;	
}
.newsbox-container .box-right {
	padding-left:20px;
	box-sizing:border-box;
	display:block;
	float:left;
	width:32.5%;	
}
.newsbox-container .box-right > span {
	display:block;
	width:100%;
}
.newsbox-container .nb-title {
	font-weight: bold;
	margin-bottom:1em;
}
.newsbox-container .nb-excerpt {
	margin-bottom:1em;
}
	
.newsbox-container .zajawka .box-left img {
	width:100%;
	height:auto;
}

.nb-read-more {}

.newsbox-container .zajawka.in-row .box-left
{
    float: right!important;    
}

.newsbox-container .zajawka.in-column .box-left
{
    margin: 0 auto;
    float: none;
}

.newsbox-container .zajawka .box-right
{
    padding: 30px 20px 40px 20px !important;
    color: #000;
}

.newsbox-container .zajawka .link
{ display: none; }