/* concept.newsbox */

/* concept.newsbox */

/*  !!!! MUST */
.newsbox-container {border-radius: 10px; width:100%;position:relative;float:left;background-color:white;min-height: 480px;}
.newsbox-container .slide-shaper {display:none;}
.newsbox-container .zajawka {border-radius: 10px; top:0;width:100%;display:block;float:left;position:absolute;opacity:0;margin: 0px !important;}
.newsbox-container .zajawka:nth-child(1) {position:relative;}
.newsbox-container .zajawka a {display:block;     border-radius: 10px;}
.newsbox-container .zajawka.in-row .box-left, .newsbox-container .zajawka.in-row .box-right {display:inline-block;}

/*  !!!! MUST */
/*	animations	*/
.newsbox-container .zajawka.active {
    z-index:10;
 
    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%;
}

.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;
    right: 50%;
    top: 27px;
    z-index: 10;
    transform: translateX(50%);
}
.newsbox-container .pager-button {
    margin-left: 23px;
    width: 22px;
    height: 22px;
    display: block;
    float: left;
    color: #fff;
    background: #ec1d25;
    cursor: pointer;
    border-radius: 0px;
    font-size: 0px;
}
.newsbox-container .pager-button.active {
    background:#3b63ac;
    cursor:auto;
}
.newsbox-container .pager-button:hover,
.newsbox-container .pager-button:focus
{
    background:#3b63ac;
}


.newsbox-container .pager > span:first-child{
    margin-left: 0px;
}

.nav-arrows
{
    display:block;
    position: absolute;
    right: 5px;
    bottom: 10px;
    z-index: 10;
}

.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.prev
{ background:#fff url('../../images/common/sprites.png') no-repeat 7px -287px; }


.newsbox-container .box-left {
    display:block;
    float:right;
    max-width:100%;	
	border-radius: 10px;
}
.newsbox-container .box-right {
    padding-left:20px;
    box-sizing:border-box;
    display:block;
    float:left;
    width:32.5%;	
}

.newsbox.component div, .newsbox.component span {
    border-radius: 10px;
}

.newsbox-container .box-right > span {
    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;
	border-radius: 10px;
}

.nb-read-more {}

.newsbox-container .zajawka .box-left
{
    /*float: right!important;    */
}

.newsbox-container .zajawka .box-right
{
    padding: 0 !important;
    color: #000;
    position: absolute;
    bottom:49px;
    text-align: center;
    width: 100%;
    
}

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

.newsbox-container .box-right > span.title {
    background: #046c93;
    color: white;
    padding: 10px 47px 12px 47px;
    text-align: center;
    display: inline-block;
    margin: auto;
    font-family: Lato;
    font-weight: normal;
    font-size: 224%;
    width: auto;
    margin-bottom: 1px;
}

.newsbox-container .box-right > span.tresc {
    background: black;
    color: white;
    padding: 20px;
    text-align: center;
    display: inline-block;
    margin: auto;
    font-family: Lato;
    font-weight: normal;
    font-size: 114%;
    width: auto;
    max-width: 88%;
    opacity: 1;
    position: relative;
    top: auto;
    height: auto;
}

.newsbox-container .box-right > span.info{
    display:none;
}

.newsbox-container .box-right > span.title:hover,
.newsbox-container .box-right > span.tresc:hover{
    background: red;
}