.slider {
    position: relative;
}


.main-public .slider {
    margin-bottom: 50px;
}

@media screen and ( max-width: 600px )  {
    .main-public .slider {
        margin-bottom: 30px;
    }
}

@media screen and ( max-width: 500px )  {
    .main-public .slider {
        margin-bottom: 15px;
    }
}


.swiper-container {
    width: 100%;
} 

body.login-popup .swiper-slide {
    opacity: .5;
}

body.loading-fade .swiper-slide {
    opacity: .3;
}

body.initial-loading .swiper-slide {
    opacity: 0;
}






.swiper-wrapper {
    height: auto;
}



.swiper-slide {
    width: 725px;
    height: auto;
    transition: opacity ease 300ms;
    -moz-transition: opacity ease 300ms;
    -ms-transition: opacity ease 300ms;
    -webkit-transition: opacity ease 300ms;
}

.slider video.video { width: 725px; }

/*
ajusting font size is a hack to avoid chrome bug
it ignores image max-width and max-height and streches
the image 100% 100%, while must keep aspect its ratio
can be remoed when it become to work normally
chrome 51
*/
@media screen and ( max-width: 800px )  {
    .swiper-slide {
        width: 500px;
        font-size: 17px;
    }

    .slider video.video { width: 500px; }
}


@media screen and ( max-width: 700px )  {
    .swiper-slide {
        width: 400px;
        font-size: 16px;
    }

    .slider video.video { width: 400px; }
}

/*@media screen and ( max-width: 600px )  {
    .swiper-slide {
        width: 100%;
        font-size: 15px;
    }

    .slider video.video { width: 100%; }
}

@media screen and ( max-width: 450px )  {
    .swiper-slide {
        width: 100%;
        font-size: 14px;
    }

    .slider video.video { width: 100%; }
}*/

.swiper-slide .content {
    background-color: #000;
    height: 408px;
    position: relative;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*background-color: #333;*/    
}

.slider video.video { max-height: 408px; }

@media screen and ( max-width: 800px )  {
    .swiper-slide .content {
        height: 281px;
    }
    .slider video.video { max-height: 281px; }
}


@media screen and ( max-width: 700px )  {
    .swiper-slide .content {
        height: 225px;
    }
    .slider video.video { max-height: 225px; }
}

@media screen and ( max-width: 600px )  {
    .swiper-slide .content {
        height: 225px;
        /*margin: 0 32px 15px 32px;*/
    }

    .slider video.video { max-height: 225px; }

    body.no-slides .content {
        margin-left: 15px;
        margin-right: 15px;
    }

}

@media screen and ( max-width: 450px )  {
    .swiper-slide .content {
        height: 197px;
    }

    .slider video.video { max-height: 197px; }
}








.slider img.image {
    max-width: 100%;
    max-height: 100%;
    height: inherit;
    text-align: center;
}

.slider .time-left {
    position: absolute;
    top: 15px;
    left: 15px;
    color: rgba(255,255,255,.6);
}


.slider .place-badge {
    width: 64px;
    height: 84px;
    background-image: url(images/badge.png);
    background-size: contain;
    position: absolute;
    top: 30px;
    left: 30px;
    text-align: center;
    background-repeat: no-repeat;
}

@media screen and ( max-width: 800px )  {
    .slider .place-badge {
        top: 20px;
        left: 20px;
        width: 42px;
        height: 56px;
    }    
}


@media screen and ( max-width: 600px )  {
    .slider .place-badge {
        top: 20px;
        left: 40px;
    }    
}


.slider .place-badge span {
    color: #fff;
    font-size: 19px;
    line-height: 60px;
}

@media screen and ( max-width: 800px )  {
    .slider .place-badge span {
        font-size: 17px;
        line-height: 43px;
    }    
}



.count-badge {
    position: absolute;
    top: 35px;
    right: 35px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 0 10px;
    color: #fff;
}

@media screen and ( max-width: 800px )  {
    .count-badge {
        top: 20px;
        right: 20px;
    }
}

@media screen and ( max-width: 600px )  {
    .count-badge {
        top: 20px;
        right: 50px;
    }
}

.count-badge span.icon {
    display: inline-block;
    vertical-align: middle;
}

.count-badge.best-jobs span.icon {
    width: 24px;
    height: 21px;
    background-image: url(images/heart-white.png);
    background-size: 24px 21px;
    margin-right: 3px;
}

.count-badge.most-viewed span.icon {
    width: 23px;
    height: 16px;
    background-image: url(images/icon-eye.png);
    background-size: 23px 16px;
    margin-right: 3px;
}


.count-badge.most-commented span.icon {
    width: 22px;
    height: 17px;
    background-image: url(images/icon-comments.png);
    background-size: 22px 17px;
    margin-right: 1px;
}

.count-badge.most-shared span.icon {
    width: 20px;
    height: 17px;
    background-image: url(images/icon-share.png);
    background-size: 20px 17px;
    margin-right: 3px;
}



/* desktop arrow buttons */

.slider button.big.left,
.slider button.big.right {
    position: absolute;
    top: 0;
    width: 130px;
    height: 408px;
    z-index: 1;
    background: transparent;
    border: none;
}


@media screen and ( max-width: 800px )  {
    .slider button.big.left,
    .slider button.big.right {
        height: 281px;
    }
}


@media screen and ( max-width: 700px )  {
    .slider button.big.left,
    .slider button.big.right {
        height: 225px;
    }
}

@media screen and ( max-width: 450px )  {
    .slider button.big.left,
    .slider button.big.right {
        height: 197px;
    }
}




body.no-slides .slider button.big.left,
body.no-slides .slider button.big.right {
    display: none;
}



@media screen and ( max-width: 1100px )  {
    .slider button.big.left,
    .slider button.big.right {
        width: 150px;
    }    
}

@media screen and ( max-width: 900px )  {
    .slider button.big.left,
    .slider button.big.right {
        width: 100px;
    }    
}

@media screen and ( max-width: 600px )  {
    .slider button.big.left,
    .slider button.big.right {
        display: none;
    }    
}


.slider button.big.left {
    left: 0;
}

.slider button.big.right {
    right: 0;
}


/* mobile arrow buttons */
.slider button.mobile.left,
.slider button.mobile.right {
    position: absolute;
    top: 0;
    width: 32px;
    height: 225px;
    background-color: rgba(0,0,0,.8);
    display: none;
    z-index: 4;
}

@media screen and ( max-width: 450px )  {
    .slider button.mobile.left,
    .slider button.mobile.right {
        height: 197px;
    }
}


.slider button.mobile.left {
    left: 0;
}

.slider button.mobile.right {
    right: 0;
}

@media screen and ( max-width: 600px )  {
    .slider button.mobile.left,
    .slider button.mobile.right {
        display: block;
    }    

    body.no-slides .slider button.mobile.left,
    body.no-slides .slider button.mobile.right {
        display: none;
    }    



}



/* common arrows on buttons */

.slider-arrow-left,
.slider-arrow-right {
    position: absolute;
    top:50%;
    left: 50%;
    width: 70px;
    height: 70px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 200ms;
}


.slider button.left,
.slider button.right {
    transition: opacity ease 400ms;
}

.slider button.big .slider-arrow-left,
.slider button.big .slider-arrow-right {
    transform: translateX(-50%) translateY(-50%);
}

.slider button.mobile .slider-arrow-left {
    transform: translateX(-45%) translateY(-50%);
}

.slider button.mobile .slider-arrow-right {
    transform: translateX(-55%) translateY(-50%);
}


@media screen and ( max-width: 900px )  {
    .slider-arrow-left,
    .slider-arrow-right {
        width: 65px;
        height: 65px;
    }
}

@media screen and ( max-width: 600px )  {
    .slider-arrow-left,
    .slider-arrow-right {
        width: 30px;
        height: 30px;
    }
}




.slider-arrow-left {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20id%3D%22svg_1%22%20fill%3D%22%23ffffff%22%20d%3D%22m0%2C22l22%2C-22l1%2C1l-21%2C21l21%2C21l-1%2C1l-22%2C-22l0%2C0l0%2C0z%22%2F%3E%3C%2Fsvg%3E");
}

.slider-arrow-right {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20id%3D%22svg_1%22%20fill%3D%22%23ffffff%22%20d%3D%22m27%2C22l0%2C0l-22%2C22l-1%2C-1l21%2C-21l-21%2C-21l1%2C-1l22%2C22l0%2C0z%22%2F%3E%3C%2Fsvg%3E");
}


.slider button.big:hover .slider-arrow-left {
    transform: translateX(-53%) translateY(-50%) scale(1.2,0.9);
    opacity: 1;
}

.slider button.big:hover .slider-arrow-right {
    transform: translateX(-47%) translateY(-50%) scale(1.2,0.9);
    opacity: 1;
}

.slider button.big:active .slider-arrow-left {
    transform: translateX(-53%) translateY(-50%) scale(1.1,0.8);
}

.slider button.big:active .slider-arrow-right {
    transform: translateX(-47%) translateY(-50%) scale(1.1,0.8);
}


.slider button.mobile:active {
    background-color: #000;
}

.slider button.mobile:active .slider-arrow-left {
    opacity: 1;
}

.slider button.mobile:active .slider-arrow-right {
    opacity: 1;
}

.inactive {
    opacity: .1;
    pointer-events: none;
}




.no-slides-storage {
    display: none;
}



body.no-slides .swiper-slide .content {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.2);
    display: block;
}

/*
temp for centering square animation 
body.no-slides .content .vr {
    position: absolute;
    z-index: 100;
    height: 100%;
    width: 1px;
    background-color: red;
    top:0;
    left: 50%;
}


body.no-slides .content .hr {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 1px;
    background-color: red;
    top:50%;
    left: 0;
}
*/


.no-slides-animation {
    width: 34px;
    height: 51px;
    margin: 177px auto 15px auto;
    position: relative;
}


@media screen and ( max-width: 800px )  {
    .no-slides-animation {
        margin: 115px auto 15px auto;
    }
}


@media screen and ( max-width: 700px )  {
    .no-slides-animation {
        margin: 88px auto 15px auto;
        transform: scale(0.7);
    }
}

@media screen and ( max-width: 450px )  {
    .no-slides-animation {
        margin: 73px auto 15px auto;
    }
}



.no-slides-animation:after {
    content: '';
    width: 35px;
    height: 35px;
    background: #fff;
    -webkit-animation: empty-slider 500ms linear infinite;
    animation: empty-slider 500ms linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
}

.no-slides-animation:before {
    content: '';
    width: 35px;
    height: 3px;
    background: #fff;
    animation: empty-slider-shadow 500ms linear infinite;
    -webkit-animation: empty-slider-shadow 500ms linear infinite;
    opacity: 0.5;
    position: absolute;
    top: 47px;
    left: 0;
    border-radius: 50%;
}

@-webkit-keyframes empty-slider {
    17% {
        border-bottom-right-radius: 3px;
    }
    25% {
        transform: translateY(9px) rotate(22.5deg);
    }
    50% {
        transform: scale(1, 0.9) translateY(18px) rotate(45deg);
        border-bottom-right-radius: 25px;
    }
    75% {
        transform: translateY(9px) rotate(67.5deg);
    }
    100% {
        transform: translateY(0) rotate(90deg);
    }
}
@keyframes empty-slider {
    17% { 
        border-bottom-right-radius: 3px;
    }
    25% {
        transform: translateY(9px) rotate(22.5deg);
    }
    50% {
        transform: scale(1, 0.9) translateY(18px) rotate(45deg);
        border-bottom-right-radius: 25px;
    }
    75% {
        transform: translateY(9px) rotate(67.5deg);
    }
    100% {
       transform: translateY(0) rotate(90deg);
   }
}
@-webkit-keyframes empty-slider-shadow {
    50% {
        transform: scale(1.2, 1);
    }
}
@keyframes empty-slider-shadow {
    50% {
        transform: scale(1.2, 1);
    }
}


body.loading-fade .no-slides-animation {
    opacity: 0;
    transition: opacity ease-in-out 500ms;
}

.no-slides-text {
    font-family: 'Open Sans', Arial;
    font-weight: normal;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 1em;
    color: #fff;
    padding: 0 15px;
    box-sizing: border-box;    
    animation: pulsate1 1000ms infinite linear;
    -webkit-animation: pulsate1 1000ms infinite linear;    
}





@keyframes pulsate1 {
    0% { opacity: .6; }
    25%  { opacity: .25; }
    50%  { opacity: .6; }
    100%  { opacity: .6; }
}

@-webkit-keyframes pulsate1 {
    0% { opacity: .6; }
    25%  { opacity: .25; }
    50%  { opacity: .6; }
    100%  { opacity: .6; }
}



body.loading-fade .no-slides-text {
    opacity: 0;
    transition: opacity ease-in-out 500ms;
}

.main-private .no-slides-spacer {
    height: 139px;
}

@media screen and ( max-width: 600px )  {
    .main-private .no-slides-spacer {
        height: 99px;
    }    
}

@media screen and ( max-width: 420px )  {
    .main-private .no-slides-spacer {
        height: 132px;
    }    
}

.main-public .no-slides-spacer {
    height: 31px;
}








.slider .video-hover {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}


body.mobile .video-hover {
    display: inherit;
}


.swiper-slide.playing .video-hover {
    display: none;
}



.slider button[data-action=make-thumb] {
    position: absolute;
    bottom: 50px;
    left: 30px;
    padding: 10px;
    cursor: pointer;
    background-color: rgba(0,0,0,.5);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 20px;
}

.slider button[data-action=make-thumb]:hover {
    color: rgba(255,255,255,1);
    border: 1px solid rgba(255,255,255,1);
}




.slider iframe {
    height: 100%;
    width: 100%;
}









.slider .play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 60px;
    border-color: transparent transparent transparent #ffffff;
    position: absolute;
    top: 50%; 
    left: 51%;
    transform: translateX(-50%) translateY(-50%);
    transition: all 150ms;
}

.main-public .slider .play-icon {
    top: 50%; 
}


@media screen and ( max-width: 800px )  {
    .slider .play-icon {
        top: 50%; 
    }
}


@media screen and ( max-width: 600px )  {
    .slider .play-icon {
        top: 50%; 
        transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
}


.slider .play-icon:hover {
    border-color: transparent transparent transparent #000000;
    transform: translateX(-50%) translateY(-50%) scale(1.5);
}


@media screen and ( max-width: 600px )  {
    .slider .play-icon:hover {
        border-color: transparent transparent transparent #000000;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}


.slider .hidden-meta {
    display: none;
}



.media-info-bar {
    background-color: rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.2);
    width: 100%;
    height: 30px;
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin-bottom: 30px;
    opacity: 0;
    transition: opacity ease 300ms;
}

.single-media .media-info-bar {
    opacity: 1;
}

.main-public .slider .media-info-bar {
    margin-bottom: 0;
}


.swiper-slide-active .media-info-bar {
    opacity: 1;
}

@media screen and ( max-width: 600px )  {
    .media-info-bar {
        background-color: transparent;
        margin-bottom: 15px;
    }
}


.media-info-bar .name {
    text-align: left;
    line-height: 30px;
    margin-right: 110px;
}

.no-dec-link {
    color: inherit;
    text-decoration: none;
}

.media-info-bar .name-inner {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 15px;
    color: inherit;
}

.media-info-bar .size {
    float: right;
    line-height: 30px;
    text-align: right;
}

.media-info-bar .size-box {
    padding: 0 15px;
    float: right;
    border-left: 1px solid rgba(255,255,255,.2);
}


.slider .action-bar {
    color: rgba(255,255,255,.6);
    margin-bottom: 40px;
    opacity: 0;
    transition: opacity ease 300ms;
}

.swiper-slide-active .action-bar {
    opacity: 1;
}


@media screen and ( max-width: 600px )  {
    .slider .action-bar {
        margin: 15px;
    }
}




div.like, div.like_detached {
    float: left;
}

@media screen and ( max-width: 400px )  {
    div.like.in_slider, div.like_detached.slider {
        float: none;
    }
}


button.like, button.like_detached {
    background-color: transparent;
    overflow: hidden;
    display: inline-block;
    color: #fff;
    opacity: .7;
    margin-right: 5px;
    border-radius: 6px;
}

button.like:active, button.like_detached:active {
    position: relative;
    top: 1px;
    left: 1px;
}

button.like:hover, button.like_detached:hover {
    background-color: rgba(255,255,255,.1);
    opacity: 1;
}

button.like.on, button.like_detached.on {
    background-color: #d34a42; /**#6A1F1D**/
    opacity: 1;
}

button.like.on.weeklies.dark-red, button.like_detached.on.weeklies.dark-red {
    background-color:#6A1F1D;
    opacity: 1;
}

button.like.on .left,
button.like.on .right,
button.like.on .center,
button.like_detached.on .left,
button.like_detached.on .right,
button.like_detached.on .center {
    background: none;
}


button.like.on:hover, button.like_detached.on:hover {
    filter: brightness(1.1);
    -webkit-filter: brightness(1.1);
    -moz-filter: brightness(1.1);
    -ms-filter: brightness(1.1);
}






button.like .left, button.like_detached .left {
    background-image: url(images/like-sprites.png);
    background-position: 0 0;
    background-size: 15px 187px;
    height: 37px;
    width: 8px;
    float: left;
}

button.like .center, button.like_detached .center {
    background-image: url(images/like-sprites.png);
    background-position: 0 -50px;
    background-size: 15px 187px;
    height: 37px;
    line-height: 37px;
    float: left;
    padding: 0 7px;
}

button.like .heart, button.like_detached .heart {
    display: inline-block;
    width: 24px;
    height: 21px;
    background-image: url(images/heart-white.png);
    background-size: 24px 21px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 3px;
}

button.like .right, button.like_detached .right {
    background-image: url(images/like-sprites.png);
    background-position: 8px -100px;
    background-size: 15px 187px;
    height: 37px;
    width: 8px;
    float: left;
}

div.like-count {
    display: inline-block;
    opacity: .7;
}


div.like-count .left {
    background-image: url(images/like-sprites.png);
    background-position: 0 -150px;
    background-size: 15px 187px;
    height: 37px;
    width: 15px;
    float: left;
}

div.like-count .center {
    background-image: url(images/like-sprites.png);
    background-position: 0 -50px;
    background-size: 15px 187px;
    height: 37px;
    line-height: 37px;
    float: left;
}

div.like-count .right {
    background-image: url(images/like-sprites.png);
    background-position: 8px -100px;
    background-size: 15px 187px;
    height: 37px;
    width: 8px;
    float: left;
}


.action-bar > .right {
    float: right;
    line-height: 32px;
}

@media screen and ( max-width: 400px )  {
    .action-bar > .right {
        float: none;
    }
}


.action-bar .share {
    margin-right: 20px;
    text-decoration: none;
    color: #fff;
    opacity: .6;
}


.action-bar .share:hover {
    opacity: 1;
}

.action-bar .share img {
    width: 16px;
    vertical-align: middle;
}


.action-bar .share span {
    vertical-align: middle;
}

@media screen and ( max-width: 700px )  {
    .action-bar .share span:last-of-type {
        display: none;
    }
}

.action-bar a {
    text-decoration: none;
}

.action-bar a.download {
    margin-right: 20px;
}

.action-bar button.download,
.action-bar button.direct-link {
    margin-right: 15px;
}


.action-bar button.download,
.action-bar button.direct-link,
.action-bar button.report {
    background-color: transparent;
    border: none;
    opacity: .7;
    cursor: pointer;
}

.action-bar button.download:active,
.action-bar button.direct-link:active,
.action-bar button.report:active {
    position: relative;
    top: 1px;
    left: 1px;
}

.action-bar button.download:hover,
.action-bar button.direct-link:hover,
.action-bar button.report:hover {
    opacity: 1;
}


.action-bar button.direct-link span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-image: url(images/link.png);
    background-size: 20px 20px;
}


.action-bar button.download span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-image: url(images/download.png);
    background-size: 20px 20px;
}

.action-bar button.report span {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    background-image: url(images/report.png);
    background-size: 22px 22px;
}




.slider-years-hr {
    border-top: 1px solid rgba(255,255,255,.2);
    height: 1px;
}

.slider-years-container {
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
}

.slider-years {
    margin: 0 auto;
}

.slider-weeks {
    overflow: hidden;
}


.slider-weeks a,
.slider-years a {
    padding: 2px 0;
    margin-right: 10px;
    border-radius: 11px;
    display: block;
    float: left;
    text-align: center;
    width: 90px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #d6d6d6;
}

.slider-weeks a.empty,
.slider-years a.empty {
    opacity: .2;
}

.slider-weeks a.current,
.slider-years a.current {
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(0,0,0,.9);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.11);
}

.slider-weeks a:hover,
.slider-years a:hover {
    background: rgba(255,255,255,.2);
}

.slider-weeks a.current:hover,
.slider-years a.current:hover {
    background: rgba(255,255,255,.8);
}

.slider-weeks-line {
    position: relative;
}






.single-media {
    margin-bottom: 50px;
}

@media screen and ( max-width: 550px )  {
    .single-media {
        margin-bottom: 15px;
    }
}

.single-media img.image {
    max-width: 100%;
    vertical-align: middle;
}

.single-media video {
    width: 100%;
    height: auto;
    vertical-align: middle;
}