body {background-color: #000000; background-image: url(../img/wolny-dzien.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 1; text-align: center; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #e7e7e7;}
* {margin: 0px; padding: 0px; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased;}
img {border: 0px;}
a {text-decoration: none;}
#video-viewport {
    position: fixed;
    top: 0;
    overflow: hidden;
    z-index: -1; /* for accessing the video by click */
}
video {background: transparent url(../img/wolny-dzien.jpg) no-repeat; background-position: center center; background-size: cover; opacity: 1;}
#video-pattern {position: fixed; right: 0px; bottom: 0px; width: auto; min-width: 100vw; height: auto; min-height: 100vh; z-index: 10; background: transparent url(../img/video-pattern.png);}
#video-color {position: fixed; right: 0px; bottom: 0px; width: auto; min-width: 100vw; height: auto; min-height: 100vh; z-index: 5; background: rgba(0,0,0,0.5);}
#content {width: auto; display: inline-block; text-align: center; z-index: 20; position: relative;}
#content *  {display: inline-block;}
#content > img {max-width: 638px; width: 90%; height: auto; margin-top: 90px; opacity: 0.6}
#content .social-media {width: 100%; margin-top: 80px; text-align: center; }
.sound {position: absolute; top: 10px; right: 10px; margin-top: 0px; text-align: right; z-index: 999999;}
#content .social-media > div {white-space: nowrap;}
#content .social-media > div > div {
	width: 150px; height: 150px; overflow: hidden
	/* for Chrome, Safari and Opera */
	/*-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));*/
	/* w3c */
	/*filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));*/
	/* for Firefox */
	/*filter: url(#drop-shadow);*/
	/* for IE7/8/9 */
	/*-ms-filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#888888');
	filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#888888', Positive='true');*/
}
.sound > div {
	float: right; width: 50px; height: 50px; overflow: hidden
}
#content .social-media > div > div svg {}
#content .social-media > div > div .icon-social,
.sound > div .icon-sound {
	opacity: 0.6; cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#content .social-media > div > div:hover .icon-social,
.sound > div:hover .icon-sound {
	opacity: 1.0;
}
#content > p {width: 100%; margin-top: 90px; margin-bottom: 20px; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);}
#content > p > strong {font-size: 22px; font-weight: 700;}
#content > p a {color: #b2ccde;}
#content > p a:hover,
#content > p a:active {color: #84bfe9;}
.breakline {display: none;}


.sound > div.hidden {position: fixed; right: -99999px;}









@media only screen and (max-width: 640px),
only screen and (max-device-width: 640px) {
	.spacer {display: none !important;}
	.breakline {display: inline !important;}
	#content > img {margin-top: 30px;}
	#content .social-media {margin-top: 30px;}
	#content .social-media > div > div {width: 100px; height: 100px;}
	#content > p {margin-top: 30px;}
	
}