/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/
* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

}
@font-face{ 
	font-family: 'promocyja';
	src: url('promocyja-webfont.woff') format('woff');  
}

@font-face{ 
	font-family: 'lmroman10-bold-webfont';
	src: url('lmroman10-bold-webfont.woff') format('woff');  
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


body {
      background-image: url("font de page_480x293.JPG");
      margin:0;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-color: #000000;
      background-position: center top; 
}

.audioplayer {
    width: 120px;
    height: 12px;
    margin-top: 25px ;
    margin: 55px;
    position: relative;
    left: 200px;
    top: 100px;
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    -moz-box-shadow: 2px 2px 4px 0px #83855d;
    -webkit-box-shadow:  2px 2px 4px 0px #83855d;
    box-shadow: 2px 2px 4px 0px #83855d;
    -moz-border-radius:7px 7px 7px 7px ;
    -webkit-border-radius:7px 7px 7px 7px ;
    border-radius:7px 7px 7px 7px ;
    background: #ffeaa4;
    animation : fadein 18s;
}


.timeline {
    width: 80px;
    height: 4px;
    margin-top: 4px;
    float: left;
    border-radius: 15px;
    background: #b4d3f0;
}


.playbutton {
    height: 25px;
    width: 25px;
    margin-top: -6px;
    border: none;
    float: left;
    outline: none;
}

.play {
    background: url("play_c.png");
}

.pause {
    background: url("pause_b.png");
}

.play,.pause {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.playhead {
    width: 8px;
    height: 6px;
    border-radius: 50%;
    margin-top: -1px;
    background: #000000;
    cursor: pointer;
}

h1 {
    display: block;
    font-family: 'promocyja';
    font-size: 3.10em;
    color: #e5af1c;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight:normal;
    position: fixed;
    top: 200;
    left: 95;
    animation : fadein 6s;
} 

h2 {
    display: block;
    font-size: 1.0em;
    color: #e9b663;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight:normal;
    position: fixed;
    top: 10;
    left: 120;
    animation : fadein 10s;
}

h3 {
    display: block;
    font-family: 'promocyja';
    font-size: 0.67em;
    text-align: center;
    color: #e9b663;
    #margin-top: 0.67em;
    #margin-bottom: 0.67em;
    #margin-left: 0;
    #margin-right: 0;
    font-weight: normal;
    position: fixed;
    top: 170;
    left: 280;
    animation : fadein 10s;
}

      

nav {
      width: 45%;
      height: 35px;
      position: fixed; /* Make it stick, even on scroll */
      top: 330;
      left: 100px;
      animation: fadein 8s;
      
}
      

#top-ul {height: 25px; margin:0;}

li {
    float: left;
    padding-right: 22px;
    list-style-type: none;
    height: 34px;
     
}

a {
    display: block;
    font-family: "lmroman10-bold-webfont", serif;
    font-size: 0.65em;
    font-style: normal;
    font-weight: normal;
    color: #ffeaa4;
    text-decoration:none;
    animation : fadein 2s;
}

.sub {
    position:  absolute;
    display:none;
    background-color: transparent;
    #top: 38px;
    padding-left: 2px;
    font-family: deja-vu; sans-serif;
    font-size: 0.15em;
    border-radius: 2px;
    #float: left;
    #height: auto;

}
#//.sub a {
    
#//    color: black;

}

#.sub a:hover {
     
     
#    background-color: black;

}

.sub li {
    #height: auto; 
    #max-width: 40px; 
    #max-height: 115px;
    position: relative;
    #display: inline-block;
    width: 60%;
    height: 5%;
    padding-top: 3px;
    padding-right: 5px;
    padding-left: 200px;
    bottom: 85px;
}

.image1, .image2, .image3, .image4, .image5,.image6, .image7,.image8, .image9, .image10, .image11
{
width:48px;
height:48px;
}

#.image2
#{ 
#width:48px;
#height:48px;
#}

.main {
     margin-top:5px;
     height:35px;
}


.main:hover > ul {
    
    margin-top: 0px;
    display: block;
    left: 0px;
}