/*

Theme Name: DesignVid.cz
Theme URI: https://www.DesignPro.cz
Description: Designed by OLK
Version: 1.2017
Author: DesignPro.cz
Author URI: https://www.DesignPro.cz
	
*/

/* fonty */
@font-face {
    font-family: 'icomoon';
    src:url('https://www.designvid.cz/css/fonts/icomoon.eot?eohfth');
    src:url('https://www.designvid.cz/css/fonts/icomoon.eot?#iefixeohfth') format('embedded-opentype'),
        url('https://www.designvid.cz/css/fonts/icomoon.woff?eohfth') format('woff'),
        url('https://www.designvid.cz/css/fonts/icomoon.ttf?eohfth') format('truetype'),
        url('https://www.designvid.cz/css/fonts/icomoon.svg?eohfth#icons-icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
	 
body {
	margin: 0;
	padding: 0;
	font: normal 18px 'Titillium Web', Arial, Verdana, Sans-Serif;
	background-color: black;}

img {border: none;}

.tucne {font-weight: bold;}
.hidden { display: none; }
.center {text-align: center !important;}
.out { left: -5000px; position: absolute; top: -2000px; }
.no-pad { padding: 0 !important; }

a, a:link { color: #fff; outline: none; }
a:visited { color: #fff; }
a[href]:hover { color: #7c7c7c; text-decoration: none; }

.clear {clear: both;}


#infscr-loading {display:block; clear: both; padding-top:30px;}

* {margin: 0; padding: 0;}

h1,h2,h3 {
	font-weight: normal;
	margin: 3px 0;
	padding: 3px 0;
	border: 0;
	font: normal 24px 'Titillium Web', Arial, Verdana, Sans-Serif; font-weight: 700; }

video {
	width: 100%    !important;
	height: auto   !important;}

h1 {
	font-size: 30px;
	color: white; /* bylo #DDDDDD */
	padding-top:50px;
	padding-bottom:0px;
	text-align: center;}

h2 {
	font-size: 30px;
	color: white;
	padding-top:10px;
	padding-bottom:10px;
	text-align: center;}

h3 {
	color: #e3e1d5;
	padding-top: 0px;
	font: normal 18px 'Titillium Web', Arial, Verdana, Sans-Serif; font-weight: 700; }
	
h6 {
	color: white;
	padding-top: 0px;
	font: normal 30px 'Titillium Web', Arial, Verdana, Sans-Serif; font-weight: 700; }

figure iframe { width: 100% !important;
	 min-height: 380px;}


.container {
	padding: 0 5% 10px;
	min-width:675px;}
	
.propagace { text-align: center; margin: 0 auto 0px; }
.propagace div, .propagace a, .propagace img { margin: 0 auto; max-width: 100% !important; height: auto !important; display: block !important; }
.propagace a:hover {opacity: .7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70); }

/* ul {	min-width:456px;} */

.boxy {	margin-right: -10px;
	margin-top: 5px;
	/* background: transparent url('https://www.designvid.cz/images/more.png') right bottom no-repeat; */}

.boxynomore {	margin-right: -10px;
	margin-top: -35px;
	background: transparent url('https://www.designvid.cz/images/nomore.png') right bottom no-repeat;}

ul.column{
	width: 100%;
	padding: 0;
	margin: 10px 0 50px;
	list-style: none;
	font-size: 0;
	text-align: center;}

ul.column li {
	display: inline-block; *display: inline; *zoom: 1; vertical-align: top;
	width: 227px;
	padding: 0;
	margin: 5px 0;
	position: relative;
	text-align: center;}

ul.column li .blok > div { position: relative; }
ul.column li img { display: block; }

li a span.play { 
	display: block;
	background: url('https://www.designvid.cz/images/play.png') center center no-repeat;	
	position: absolute;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 122px;
	z-index: 100;} 

p {
	padding: auto;
	margin: 15px 0px;
	text-align: center;}

#videoandnav {
	width:100%;
	position:relative;}

figure {
	position: relative;
	margin-top: 20px;
	margin-bottom: -5px;}

#new{	
	height: 100px;
	display:block;
	position: absolute;
	z-index: 50;
	top: 50%;
	margin-top:-50px}

#old{	
	height: 100px;
	display:block;
	position: absolute;
	z-index: 50;
	top: 50%;
	margin-top:-50px}

a #new{
	background: transparent url('https://www.designvid.cz/images/prev-next.gif') center left no-repeat;
	left:-20px;
	width: 20px;
	opacity: .3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);}

a:hover #new{
	left:-40px;
	width: 40px;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);}

a #old{	
	background: transparent url('https://www.designvid.cz/images/prev-next.gif') center right no-repeat;
	right:-20px;
	width: 20px;
	opacity: .3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);}

a:hover #old{
	right:-40px;
	width: 40px;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);}

#clanek {
	padding: 12px 30px 25px 30px; /* 15px 30px 25px 30px */
	background: white;
	font: normal 24px 'Titillium Web', Arial, Verdana, Sans-Serif;
	text-align: center;}

#clanek p {
	text-align: center;
	font: normal 24px 'Titillium Web', Arial, Verdana, Sans-Serif;
	line-height: 32px;
	padding-bottom: 8px;}

.blok {
	height: 255px;
	margin-right: 10px;
	background: white;
	font-size: 15px;
	color: black;
	border:0;
	-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

a .blok {
	background:#fff;
	text-decoration:none;}

a:hover .blok {
	background:grey;
	text-decoration:none;}

a .blok h3 {
	color: black;
	border: 0;
	line-height: 24px;
	text-decoration:none;}

a:hover .blok h3 {
	color: white;
	text-decoration:none;}

.titulek-blok {
	padding: 5px 10px 10px 10px;
	text-align:center;}

a .titulek-blok {
	text-decoration: none;}

.datum-blok {
	text-decoration: none;}

a:hover .datum-blok {
	color: white;
	text-decoration: none;}

.blok img {
	width: 100%;
	min-height: 128px;}

/* footer */
#pagination {
	display:block;
	clear: both;
	text-align: center;}

#footer{
	display:block;
	position:relative;
	font-size: 13px;
	width: 100%;
	height: 235px; /* 116 - 156 - 169 */
	background-color: #232323; /* 161616 */
	color: #808080;
	clear: both;
	top: 15px;
	margin-bottom: 25px;
	cursor: default;}


#footer b{
	color: #808080;}

#footer img{
	margin-bottom: 7px;}

#footer a{
	color: #808080;
	text-decoration: none;
	font-size: 13px;
	}

#footer a:hover img{
	opacity: 0.5;
	filter: alpha(opacity=50);}

#footer a:hover{
	color: white;
	text-decoration: underline;}
	
#footer-logo{
	position:relative;
	float:left;
	padding-top: 95px;
	width: 33%;
	text-align: center;}
	
#footer-info{
	position:relative;
	float:left;
	padding-top: 20px;
	width: 33%;
	text-align: center;}
	
#footer-webdesign{
	position:relative;
	float:left;
	padding-top: 95px;
	width: 33%;
	text-align: center;}
#footer img{ display: inline; }


/* DM a DB feeds */

.dm-db-feed {
	margin: 15px 0 -34px 0;
	background-color: white;}

#dm-promo-klik {
	width: 100%;
	height: 100%;}

#dm-promo {
	margin-right: 425px;
	height: 210px;
	background: white url(https://www.designvid.cz/images/DesignMag.cz.jpg) bottom right no-repeat;}

#dm-feed {
	margin: 15px;
	potition: relative;
	font-weight: bold;
	width: 405px;
	float: right;}

#dm-feed a {
	color: #c4007e;
	font-size: 12px;
	line-height: 18px;}
	
#dm-feed a:hover {
	color: black;
	text-decoration: underline;}

#db-feed {
	margin: 15px;
	potition: relative;
	width: 370px;
	float: left;}

#db-feed a {
	color: #9bb90f;
	font-weight: bold;
	font-size: 12px;}
	
#db-feed a:hover {
	color: black;
	text-decoration: underline;}

.db-feed-odkaz {
	width: 370px;
	height: 14px;
	margin-bottom: 4px;
	position: relative;
	overflow: hidden;}

#db-promo-klik {
	width: 100%;
	height: 100%;}

#db-promo {
	margin-left: 370px;
	height: 210px;
	background: white url(https://www.designvid.cz/images/DesignBuy.cz.jpg) bottom left no-repeat;}


/* #footer {
	background: #484848; 
	clear: both; 
	padding: 10px;
	margin-top:20px} */


/* clanek, facebook etc */

.svislitko {	
	margin: 0px 5px;}

#clanek a {
	text-decoration:underline;
	font-weight: bold;
	color: black;}

#clanek a:hover {
	text-decoration:underline;
	font-weight: bold;
	color: grey;}
	
#clanek-info {
	padding: 0;
	color: #555555;}
	
#clanek-meta {
	padding: 20px 0 10px 0;
	color: #555555;}
	
#clanek-info a, #clanek-meta a {
	text-decoration: none;
	font-weight: normal;
	color: #555555;}

#clanek-info a:hover, #clanek-meta a:hover {
	text-decoration:underline;
	font-weight: normal;
	color: black;}

#clanek iframe {
	 /* width: 50% !important; */
	min-height: 17px;}

#facebook-like-block {
	height:17px;}

#facebook-like-block b {
	display:block;
	float:left;
	position:relative;}

#facebook-like {
	border:none;
	background-image:none;
	overflow:hidden;
	width:400px;
	height:20px;
	left: 3px;
	top: -3px;
	float:left;
	position:relative;
	display: block;}

.share > a { height: 24px; width: 80px; margin-right: 30px; margin-bottom: 10px; display: inline-block; }
.share > a:last-child { margin-right: 0px; }
.share > a svg { transition: opacity 0.3s ease; opacity: 1; display: inline-block; vertical-align: middle;}
.share > a:hover svg { opacity: 0.6 !important;}

/*
.share { margin-top: 25px; }
.share > iframe, .share > div, .share > span, .share > a { margin-bottom: 10px !important; vertical-align: middle !important; text-decoration: none !important; }
.share > a { height: 20px; display: inline-block; }
.share > a svg { top: 0; position: relative; display: block; }
.share .twitter-share-button, .share > span { margin-right: 30px; }
.share .IN-widget { padding-left: 36px !important; line-height: 0 !important; }


.share > iframe, .main-content .share > div, .main-content .share > span, .main-content .share > a { margin-bottom: 16px !important; vertical-align: middle !important; }
.share > a { height: 20px; display: inline-block; }
.share > a svg { top: 0; position: relative; display: block; }
.share .twitter-share-button, .main-content .share > span { margin-right: 35px; }

*/

/*	
#video-sdileni {
	margin: 25px 0px 0px 0px;
	height: 30px;
	width: 100%;}
	
#video-sdileni iframe{
	background: none;
	width: auto !important;
	max-width: 120px !important;}
	
#video-sdileni iframe:first-child{
	background: none;
	width: auto !important;
	max-width: 210px !important;}
*/

.sdilet-odkaz {
	position:relative;
	top:2px;}
	
.sdilet-odkaz a img{
	border: 0;
	cursor: pointer;}
	
.sdilet-odkaz a:hover img{
	border: 0;
	cursor: pointer;}
	
#namail {
	margin-left: 40px;}
	
#namail:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);}

/* paginace */

#strankovani {
	width: 100%;
	height: 33px;
	margin: 20px 0px 50px 0px;}

.novejsi {
	background: #383838 url(https://www.designvid.cz/images/button-novejsi.gif) bottom right no-repeat;
	width: 50%;
	height: 33px;
	position: relative;
	float: right;}

.novejsi a{
	background: white url(https://www.designvid.cz/images/button-novejsi.gif) top right no-repeat;
	font: normal 16px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 700;
	text-transform: uppercase;
	width: 100%;
	height: 28px;
	text-align: center;
	color: #383838;
	position: relative;
	float: right;
	display:block;
	padding-top:5px;
	transition: all 0s ease-out 0s;
	text-decoration: none;}
	
.novejsi a:hover {
	background: #cacaca url(https://www.designvid.cz/images/button-novejsi.gif) center right no-repeat;
	color: black;
	cursor: pointer;
	text-decoration: none;}

.starsi {
	background: #383838 url(https://www.designvid.cz/images/button-starsi.gif) bottom left no-repeat;
	width: 50%;
	height: 33px;
	position: relative;
	text-decoration: none;}

.starsi a {
	background: white url(https://www.designvid.cz/images/button-starsi.gif) top left no-repeat;
	font: normal 16px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 700;
	text-transform: uppercase;
	width: 100%;
	height: 28px;
	text-align: center;
	color: #383838;
	position: relative;
	display:block;
	padding-top:5px;
	transition: all 0s ease-out 0s;
	text-decoration: none;}
	
.starsi a:hover {
	background: #cacaca url(https://www.designvid.cz/images/button-starsi.gif) center left no-repeat;
	color: black;
	cursor: pointer;
	text-decoration: none;}

/* Facebook fan box */

#facebook-fans-box {
	border:none;	
	height:225px;
	background-color: white;
	padding:15px 13px 18px 0px;
	margin-top: 15px;
	margin-bottom: 5px}

#facebook-fans {
	border:none;
	overflow:hidden;
	width:395px;
	height:200px;
	position: relative;
	float: right;}

#facebook-fans iframe {
	border:none;
	overflow:hidden;
	width:395px;
	height:258px;
	background: none;
	position:relative;
	top: 0px;
	left:0px;}

#fb-promo-klik {
	width: 100%;
	height: 100%;}

#fb-promo {
	margin-right: 445px;
	height: 225px;
	background: white url(https://www.designvid.cz/images/Facebook.jpg) bottom right no-repeat;}

#social {
	float:right;
	width:110px;
	height:200px;
	text-align:center;
	font-weight:bold;
	margin-top: 15px;
	display: none;}

#social a img {
	margin-top: 5px;}

#social a:hover img {
	margin-top: 5px;
	opacity: 0.5;
	filter: alpha(opacity=50);}


/* DESIGNBUY pod videem */

#pdw {
	margin: 0 auto;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	background-color: white;}
	
#pdw img { display: block; max-width: 100%; }
	
#pdw a:hover img{
	opacity: 0.5;
	filter: alpha(opacity=50);}
	
#db-vanocni {
	font: normal 18px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 600;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #9ab910;
	width: 100%;
	color: white;
	margin-bottom: 20px;}


#db-vanocni a {
	font: normal 18px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 600;
	color: white;
	text-decoration: underline;}

#db-vanocni a:hover {
	color: black;}


/* DESIGNBUY zbozi */

#designbuy-video {
	margin-top:60px;
	font: normal 14px 'Titillium Web', Verdana, Arial, Sans-Serif;}
	
#designbuy-video h2 {
	margin:20px 0px 5px 0px;}
	
#designbuy-blok {
	width: 100%;
	height: 270px;
	margin-top: 10px;
	padding: 20px 0px;
	background-color: white;}

#designbuy-vypis {
	height: 260px;
	padding: 2px 10px;
	text-align: center;
	overflow: hidden;}	

.designbuy-nazev {
	font: normal 15px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 600;
	text-align: center;
	padding:0px 5px 0px 5px;
	margin-top: 5px;
	line-height: 19px;
	/* 
	height:  43px ;
	overflow: hidden;
	*/
	color: black;
	cursor: pointer;}	
	
a:hover .designbuy-nazev {
	color: White;}

.designbuy-cena {
	font: normal 15px 'Titillium Web', Verdana, Arial, Sans-Serif; font-weight: 600;
	text-align:center;
	color:#9ab90f; 
	margin-top:4px;
	cursor: default;}
	
#designbuy-blok a {
	text-decoration: none !important;}
	
.designbuy-prod-last {
	position:relative;
	float:left;
	width:165px;
	height: 100%;
	border:1px solid white;
	background: white url(https://www.designmagazin.cz/images/db-ikona.jpg) top center no-repeat;}
	
.designbuy-prod {
	position:relative;
	vertical-align: top;
	display: inline-block;
	width:165px;
	height: 100%;
	border:1px solid white;
	margin-left:18px;
	background: white url(https://www.designmagazin.cz/images/db-ikona.jpg) top center no-repeat;}
	
.designbuy-prod:hover, .designbuy-prod-last:hover, #designbuy-clanek .designbuy-prod:hover {
	border:1px solid #9ab90f;
	background-color: #9ab90f;
	color: white;
	background-image: none;}
	
.designbuy-prod:hover .designbuy-cena, .designbuy-prod-last:hover .designbuy-cena, .designbuy-prod:hover {
	color: black;
	cursor: pointer;}
	
#designbuy-link {
	text-align:center;
	margin-bottom:60px;
	font-size: 18px;
	font-weight: bold;
	background-color: white;
	height: 45px;}
	
#designbuy-link a {
	color: black;
	text-decoration: underline;}
	
#designbuy-link a:hover {
	color: #9AB90F;}
	
	
/* social patička */

#social-paticka {
	width: 260px;
	margin: 0 auto;
	position: relative;
	padding-top: 20px;
	text-align: center;
	font: normal 18px 'Titillium Web', serif;
	color: white;}
	
#social-icons {
	height: 98px;
	width: 220px;
	margin: 0 auto;
	position: relative;
	text-align: center;}
	
#social-icons a {
	width: 43px;
	height: 42px;
	margin: 15px;
	float: left;
	position: relative;
	text-indent: -500px;
	overflow: hidden;
	-webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -ms-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out;}
	
#social-facebook a {
	background: black url(https://www.designvid.cz/images/social/iko-facebook.png) top center no-repeat;}
	
#social-facebook a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-facebook.png) bottom center no-repeat;}
	
#social-twitter a {
	background: black url(https://www.designvid.cz/images/social/iko-twitter.png) top center no-repeat;}
	
#social-twitter a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-twitter.png) bottom center no-repeat;}
	
#social-google a {
	background: black url(https://www.designvid.cz/images/social/iko-google.png) top center no-repeat;}
	
#social-google a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-google.png) bottom center no-repeat;}
	
#social-instagram a {
	background: black url(https://www.designvid.cz/images/social/iko-instagram.png) top center no-repeat;}
	
#social-instagram a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-instagram.png) bottom center no-repeat;}
	
#social-youtube a {
	background: black url(https://www.designvid.cz/images/social/iko-youtube.png) top center no-repeat;}
	
#social-youtube a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-youtube.png) bottom center no-repeat;}
	
#social-pinterest a {
	background: black url(https://www.designvid.cz/images/social/iko-pinterest.png) top center no-repeat;}
	
#social-pinterest a:hover {
	background: black url(https://www.designvid.cz/images/social/iko-pinterest.png) bottom center no-repeat;}
	
	
@media screen and (max-width: 1600px) {

#clanek p {	font-size: 22px; line-height: 28px;}
#clanek-info, #clanek-meta { font-size: 22px; line-height: 28px;}

}


@media screen and (max-width: 1200px) {

#clanek p {	font-size: 21px; line-height: 27px;}
#clanek-info, #clanek-meta { font-size: 21px; line-height: 27px;}

}


@media screen and (max-width: 990px) {

#clanek p {	font-size: 20px; line-height: 24px;}
#clanek-info, #clanek-meta { font-size: 20px; line-height: 24px;}

h1 {
	font-weight: normal;
	margin: 40px 0 3px 0;
	padding: 8px 0 12px 0;
	border: 0;
	font: normal 26px 'Titillium Web', Arial, Verdana, Sans-Serif; font-weight: 700; }
}
	
	
@media screen and (max-width: 970px) {

html { min-width: 0; }
img { max-width: 100%; height: auto; }

.container { min-width: 0; }
.boxy { margin-top: -10px; display: inline-block; vertical-align: top; *display: inline; *zoom: 1; }
.boxy ul.column { min-width: 0; }

}


@media screen and (max-width: 790px) {

#facebook-fans-box { padding-left: 0; padding-right: 0; }
#facebook-fans { width: auto; margin: 0 auto; float: none; text-align: center; }
#facebook-fans iframe { display: inline-block; vertical-align: top; *display: inline; *zoom: 1; }
#fb-promo { display: none; }
#db-vanocni { min-height: 22px; height: auto; padding: 10px 20px; width: auto; }
#video-sdileni { height: auto; }
#video-sdileni > iframe, #video-sdileni > div, #video-sdileni > a { display: block !important; margin-bottom: 10px !important; }
#video-sdileni #namail { margin: 5px 0px 0px 0px; }
#clanek { padding: 12px 20px 25px; }
a:hover #new { left:-30px; }
a:hover #old { right:-30px; }

#clanek p {	font-size: 20px; line-height: 26px;}
#clanek-info, #clanek-meta { font-size: 20px; line-height: 24px;}

}


@media screen and (max-width: 744px) {

#footer { height: auto; padding: 0 0 25px; }
#footer-logo, #footer-info, #footer-webdesign { width: 100%; float: none; display: inline-block; vertical-align: top; *display: inline; *zoom: 1; padding-top: 25px; }

#clanek p {	font-size: 18px; line-height: 22px;}
#clanek-info, #clanek-meta { font-size: 16px; line-height: 22px;}
}


@media screen and (max-width: 600px) {

a:hover #new { left:-20px; }
a:hover #old { right:-20px; }

}


@media screen and (max-width: 492px) {

.blok { height: auto; }
ul.column { width: 100% !important; }
ul.column li { display: block; float: none; margin: 5px 0 0; padding: 0 0 10px; width: 100% !important; }

h1 {
	font-weight: normal;
	margin: 40px 0 3px 0;
	padding: 8px 0 12px 0;
	border: 0;
	font: normal 22px 'Titillium Web', Arial, Verdana, Sans-Serif; font-weight: 700; }
	
}


@media screen and (max-width: 450px) {

#facebook-fans-box { display: none; }
.novejsi a, .starsi a { font-size: 12px; line-height: 25px; }
a #new { left:-10px; }
a #old { right:-10px; }
a:hover #new { left:-10px; }
a:hover #old { right:-10px; }

	
}