﻿/*
 * css reser
 */
ul {list-style-type: none; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 100; margin: 0;}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.hidden {display: none;}
.bs {
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */}

/*
 * overall
 */
html, body {background: #000 url(../Img/bg-noise-02.png); font-family: 'Open Sans', sans-serif; font-weight: 400;}
ul, ol  {margin: 0;}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

.ico-video {background: url(../Img/ico-video.png) no-repeat; display: block; height: 38px; width: 38px;}
.ico-close {background: url(../Img/ico-delete.gif) no-repeat center center; display: block; height: 38px; width: 38px;}

#site-wrapper {height: 610px; overflow: hidden;}

/* 
 * menu
 */
.navbar {height: 44px;}
.navbar-fixed-top {height: 44px; position: fixed; width: 810px; z-index: 10;}
.navbar-fixed-top .brand {background: url(../Img/polskie-radio-pl.png) left -3px; float: left; height: 44px; width: 152px;}
.navbar-fixed-top .nav-collapse {float: left; width: 640px;}
.navbar ul {height: 36px; list-style-type: none; padding-top: 6px;}
.navbar ul li {color: #fff; cursor: pointer; display: block; float: left; font-size: 13px; padding: 9px 11px 10px; text-transform: uppercase;}
.navbar ul li.color-1.active,
.navbar ul li.color-1:hover {background-color: #26285b;}
.navbar ul li.color-2.active,
.navbar ul li.color-2:hover {background-color: #4b6977;}
.navbar ul li.color-3.active,
.navbar ul li.color-3:hover {background-color: #4F281D;}
.navbar ul li.color-4.active,
.navbar ul li.color-4:hover {background-color: #F85417;}
.navbar ul li.color-5.active,
.navbar ul li.color-5:hover {background-color: #89384E;}
.navbar ul li.color-6.active,
.navbar ul li.color-6:hover {background-color: #6c8cad;}
.navbar ul li.color-7.active,
.navbar ul li.color-7:hover {background-color: #b30008;}
.navbar ul li.color-8 {background: url(../Img/ico-home.gif) no-repeat 15px -29px; display: block; height: 18px; width: 18px}
.navbar ul li.color-8.active,
.navbar ul li.color-8:hover {background-color: #4f4f4f;}
.navbar ul li:hover {text-decoration: none;}

/* 
 * containers
 */
#main-container {float: left; padding-top: 44px; overflow: hidden; z-index: 0;}
.container {background-color: #fff; background-image: url(../Img/bg-wall.jpg); background-repeat: no-repeat; background-position: right 0; float: left; height: 566px; min-width: 300px; padding-right: 45px; position: relative; z-index: 1;}
.cont-wrapper {float: left; height: 566px;}

/*
 * headers
 */
.section-header {background: url(../Img/header-arrows.png) no-repeat; height: 55px; position: absolute; top: 12px; left: -8px; width: 300px; z-index: 20;}
#section-06 .section-header {width: 100px;}
.section-header h4 {color: #fff; font-size: 20px; display: inline-block; font-weight: 600; height: 48px; padding: 10px; text-transform: uppercase;}
.wrap-jfk-berlin section header h4 {background: #26285b;}
.wrap-dates section header h4 {background: #4b6977;}
.wrap-town section header h4 {background: #f85417;}
.wrap-wall section header h4 {background: #4f281d;}
.wrap-sounds section header h4 {background: #89384e;}
.wrap-photos section header h4 {background: #6c8cad;}
.wrap-videos section header h4 {background: #b30008;}

.wrap-jfk-berlin .section-header {background-position: 0 48px;}
.wrap-dates .section-header {background-position: 0 -52px;}
.wrap-town .section-header {background-position: 0 -152px;}
.wrap-wall .section-header {background-position: 0 -252px;}
.wrap-sounds .section-header {background-position: 0 -352px;}
.wrap-photos .section-header {background-position: 0 -452px;}
.wrap-videos .section-header {background-position: 0 -552px;}

/*
 *********************** #section-01
 */
.wrap-main-jfk {background: url(../img/bg-jfk-big-5.jpg) no-repeat left top; color: #fff; padding: 0; position: relative; width: 880px;}
.wrap-main-jfk #text-01 {font-size: 16px; font-weight: bold; position: absolute; top: 35px; left: 40px;}
.wrap-main-jfk #text-02 {color: #000; font-size: 55px; font-weight: 600; position: absolute; top: 57px; left: 38px;}
.wrap-main-jfk #text-03 {font-size: 22px; font-weight: 600; position: absolute; top: 114px; left: 51px;}
.wrap-main-jfk #text-04 {xbackground: #222; color: #000; font-weight: bold; font-size: 16px; xpadding: 2px 6px; position: absolute; top: 122px; left: 42px;}

/*
 *********************** #section-02 - JFK w Berlinie
 */
.wrap-jfk-berlin {position: relative; z-index: 1;}
.wrap-jfk-berlin ul {list-style-type: none;}
.wrap-jfk-berlin ul.ul-big {float: left; margin: 84px 60px 0 51px; width: 480px;}
.wrap-jfk-berlin ul.ul-big h3 {font-size: 22px;}
.wrap-jfk-berlin ul.ul-big p {font-size: 14px; line-height: 1.3;}
.wrap-jfk-berlin ul.ul-big iframe {position: relative; z-index: 1;}
.wrap-jfk-berlin ul.ul-big .wrap-img {cursor: pointer; display: block; position: relative; width: 450px;}
.wrap-jfk-berlin ul.ul-big .wrap-img .ico {background-color: rgba(0, 0, 0, .5); position: absolute; top: 110px; left: 210px;}

.wrap-jfk-berlin ul.ul-small {float: left; margin-top: 141px; width: 425px;}
.wrap-jfk-berlin ul.ul-small li {cursor: pointer; margin-top: 15px; width: 420px;}
.wrap-jfk-berlin ul.ul-small li:hover h3 {color: #666;}
.wrap-jfk-berlin ul.ul-small .li-title {cursor: default; font-size: 13px;}
.wrap-jfk-berlin ul.ul-small .wrap-img {background: #f7f7f7; float: left; height: 72px; position: relative; margin: 4px 10px 0 0; width: 130px;}
.wrap-jfk-berlin ul.ul-small .wrap-img .ico {position: absolute; top: 17px; left: 45px;}
.wrap-jfk-berlin ul.ul-small .wrap-text {xbackground: url(../Img/bg-quotes.jpg) no-repeat bottom left; float: left; width: 250px;}
.wrap-jfk-berlin ul.ul-small h3 {font-size: 14px; font-weight: bold;}
.wrap-jfk-berlin ul.ul-small p {font-size: 12px; line-height: 1.5;}
.wrap-jfk-berlin .videoUid {display: none;}

.wrap-jfk-berlin .wrap-articles-hidden li .articleCont {background: #fff; color: #000;}

.wrap-articles-hidden li {float: left; height: 566px;}
.wrap-articles-hidden li .belt {color: #fff; cursor: pointer; float: left; height: 566px; padding: 32px 20px; position: relative; width: 203px;}
.wrap-articles-hidden li .belt .arr {background-position: right bottom; height: 55px; position: absolute; bottom: 0; right: 0; width: 55px; z-index: 6;}
.wrap-articles-hidden li .belt.active .arr {background-position: left bottom; left: 0; right: auto;}
.wrap-articles-hidden li .belt.bg-color-01 .arr {background-image: url(../Img/arr-01.png);}
.wrap-articles-hidden li .belt.bg-color-02 .arr {background-image: url(../Img/arr-02.png);}
.wrap-articles-hidden li .belt.bg-color-03 .arr {background-image: url(../Img/arr-03.png);}
.wrap-articles-hidden li .belt h3 {font-size: 22px;}
.wrap-articles-hidden li .belt p {font-size: 12px; line-height: 1.5;}
.wrap-articles-hidden li .article {display: none; float: left; width: 600px;}
.wrap-articles-hidden li .articleCont {
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    background: #4b6977; color: #fff; float: left; font-size: 14px; height: 566px; line-height: 1.5; overflow-x: hidden; overflow-y: auto; padding: 20px 32px 35px; width: 600px;}
.wrap-articles-hidden li .article p {padding: 0 0 10px;}
.wrap-articles-hidden li .article h3 {font-size: 22px;}
.wrap-articles-hidden li .article .lead {font-size: 14px; font-weight: bold;}
.wrap-articles-hidden li .article img {width: 100%;}

.wrap-articles-hidden li .articleCont .wrap-img.play {cursor: pointer; display: block; position: relative;}
.wrap-articles-hidden li .articleCont .wrap-img.play .ico {position: absolute; top: 100px; left: 240px; z-index: 5;}

.wrap-articles-hidden .bg-color-01 {background: #26285b;}
.wrap-articles-hidden .bg-color-01:hover {background: #2c2e64;}
.wrap-articles-hidden .bg-color-02 {background: #484a75;}
.wrap-articles-hidden .bg-color-02:hover {background: #50527f;}

/*
 *********************** #section-03 - 1945-1989
 */
.wrap-dates .bg-wall {background: url(../Img/bg-calendar-v2.jpg); position: relative; width: 201px;}
.wrap-dates .bg-wall-01 {background-position: -1px top;}
.wrap-dates .bg-wall-02 {background-position: -204px top;}
.wrap-dates .bg-wall-03 {background-position: -408px top;}
.wrap-dates .bg-wall-04 {background-position: -612px top;}
.wrap-dates .bg-wall-05 {background-position: -816px top;}
.wrap-dates .bg-wall .date {background: #273e49; font-size: 28px; height: 77px; padding: 18px 0 0 17px; position: absolute; top: 18px; left: 65px; width: 77px; z-index: 10;}
.wrap-dates .bg-wall .hover {background: url(../Img/bg-hover.png); display: none; height: 566px; position: absolute; top: 0; left: 0; width: 100%; z-index: 5;}
.wrap-dates .bg-wall:hover .hover {display: block;}

/*
 *********************** #section-06 - Dźwięki
 */
.wrap-wall .cont-wrapper {padding-left: 100px;}

/*
 *********************** #section-06 - Dźwięki
 */
.wrap-sounds .bg-01 {background: url(../Img/bg-sounds.jpg) no-repeat; height: 566px; float: left; width: 206px;}
.wrap-sounds .cont-wrapper h4 {color: #ede6cc; font-size: 25px; padding: 30px 0 0;}
.wrap-sounds .bg-color-01 {background: #321912;}
.wrap-sounds .bg-color-02 {background: #2a1009;}

.wrap-sounds .cont-wrapper {color: #fff; padding: 0 36px; width: 520px;}
.list-sounds {color: #fff;}
.list-sounds li {background: url(../Img/ico-sound.png) no-repeat 0 5px; cursor: pointer; margin-top: 27px; padding-left: 48px;}
.list-sounds h3 {font-size: 22px;}
.list-sounds li:hover h3,
.list-sounds li.active h3 {color: #ede6cc;}
.list-sounds p {font-size: 12px; line-height: 1.5; margin: 11px 0 0;}
.list-sounds .audioUid {display: none;}

/*
 *********************** #section-07 - Zdjęcia
 */
.wrap-photos {padding-left: 150px;}
.wrap-gallery {background: url(../Img/bg-photos-01.jpg); height: 566px; margin-right: 1px; overflow: hidden; width: 203px;}
.wrap-gallery.gallery-04 {width: 200px;}
.wrap-gallery h3 {color: #fff; font-size: 22px; line-height: 1.3; padding: 31px 17px 0;}
.wrap-gallery .bg {background: url(../Img/bg-photos-02.jpg) no-repeat; cursor: pointer; height: 566px; width: 203px;}
.wrap-gallery .bg-01 {background-position: 0 120px;}
.wrap-gallery .bg-02 {background-position: -204px 120px;}
.wrap-gallery .bg-03 {background-position: -408px 120px;}
.wrap-gallery .bg-04 {background-position: -616px 120px;}

.wrap-gal {background: rgba(0, 0, 0, .8); display: none; height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
.wrap-gal #gallery {padding-top: 50px;}
.wrap-gal .wrap-paging {color: #fff; padding: 5px 0; text-align: center;}
.wrap-gal .prev,
.wrap-gal .next {cursor: pointer; height: 100%; position: absolute; top: 0; width: 50%; z-index: 4;}
.wrap-gal .prev {left: 0;}
.wrap-gal .next {right: 0;}
.wrap-gal .wrap-img .prev {background: url(../Img/gallery-arrow-prev.gif) no-repeat left center; z-index: 5;}
.wrap-gal .wrap-img .next {background: url(../Img/gallery-arrow-next.gif) no-repeat right center; z-index: 5;}

.wrap-gal .current-img {display: block; margin: 0 auto; max-width: 863px;}
.wrap-gal .desc {color: #fff; font-size: 12px; margin: 5px auto 0; padding: 0 20px; max-width: 663px; text-align: left;}
.wrap-gal .wrap-thumbnails {display: none; height: 60px; overflow: auto; position: absolute; left: 0; bottom: 0; width: 100%;}
.wrap-gal .wrap-thumbnails li {float: left; height: 50px; overflow: hidden; margin: 0 5px 10px; width: 100px;}
.wrap-gal .wrap-photo {text-align: center;}
.wrap-gal .wrap-img {display: inline-block; margin: 0 auto; padding: 0 60px; position: relative; z-index: 6;}
.wrap-gal .close-gallery {background: url(../Img/ico-delete.gif) no-repeat right top; cursor: pointer; height: 50px; position: absolute; top: -50px; right: 0; width: 50px; z-index: 101;}

/*
 *********************** #section-04 - Rozdarte Miasto
 */
.article-first {margin: 84px 60px 0 51px; width: 350px;}
.article-first h3 {font-size: 22px;}
.article-first p {font-size: 14px; line-height: 1.5;}

.wrap-picture {background: url(../Img/bg-picture.jpg) no-repeat right bottom; height: 508px; margin: 23px 13px 0 0; position: relative; width: 797px;}
.wrap-picture img {height: 364px; position: absolute; top: 74px; left: 68px; width: 663px; z-index: 2;}
.wrap-picture .article {background: #89384e; color: #dbd2c9; display: none; height: 364px; padding: 22px 28px; position: absolute; top: 74px; left: 68px; width: 663px; z-index: 3;}
.wrap-picture .article h3 {font-size: 22px;}
.wrap-picture .article p {font-size: 14px; line-height: 1.5;}

/*
 *********************** #section-08 - Film
 */
.wrap-videos {background: #fff url(../Img/bg-cd.jpg) no-repeat right top; padding-right: 805px;}
.article-first .wrap-img {cursor: pointer; display: block; position: relative; width: 350px;}
.article-first .wrap-img img {display: block; width: 350px;}
.article-first .wrap-img .ico {position: absolute; top: 70px; left: 156px;}

/*
 *********************** wrap-player
 */
#wrap-player {background: rgba(0, 0, 0, .8); cursor: pointer; display: none; height: 100%; position: fixed; text-align: center; width: 100%; z-index: 100;}
#wrap-player.sound {height: 85px; position: fixed; bottom: 0; left: 0;}
#wrap-player.sound #player_wrapper {margin: 30px auto 0;}
#wrap-player.http {top: 0; left: 0;}
#wrap-player.http #player_wrapper,
#wrap-player.http #player video {}

div#player,
#player_wrapper {display: inline-block; position: relative; margin-top: 100px;}
#player .ico,
#player_wrapper .ico {position: absolute; top: -38px; right: -38px;}

#wrap-player.sound div#player {margin-top: 30px;}

#videosub {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */ 
    background: #000; color: #fff; font-size: 14px; margin: 0 auto; min-height: 100px; padding: 5px 10px; text-align: center; width: 500px;}
#videosub em {color: #bbb; display: block; padding-top: 10px;}

/*
 *********************** responsive
 */
@media (max-width: 1150px) {
    .wrap-main-jfk {background: url(../img/bg-jfk-big-4.jpg) no-repeat left top;}
}
/*
@media (min-width: 768px) and (max-width: 979px) {
    .navbar-fixed-top {height: 44px; position: relative; width: 810px;}
    #main-container {margin: 0;}
}
*/
@media (max-width: 810px) {}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

/*
 * gallery responsive
 */
@media (max-height: 1300px) {
    .wrap-gal .current-img {max-height: 1000px;}
}
@media (max-height: 1200px) {
    .wrap-gal .current-img {max-height: 900px;}
}
@media (max-height: 1100px) {
    .wrap-gal .current-img {max-height: 800px;}
}
@media (max-height: 1000px) {
    .wrap-gal .current-img {max-height: 700px;}
}
@media (max-height: 900px) {
    .wrap-gal .current-img {max-height: 600px;}
}
@media (max-height: 800px) {
    .wrap-gal .current-img {max-height: 500px;}
}
@media (max-height: 700px) {
    .wrap-gal .current-img {max-height: 400px;}
}
@media (max-height: 600px) {
    .wrap-gal .current-img {max-height: 300px;}
}

@media (max-width: 1000px) {
    .wrap-gal .wrap-img {max-width: 70%;}
    .wrap-gal .current-img {max-width: 100%;}
    .wrap-gal .desc {width: 80%;}
}