body{

	color: black;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:bolder;
	
}
h1, h2, h3, h4, h5, h6{
	font-weight:bolder;
	font-family: Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.0em 0;
	
	padding:0;
} 


/* odkazy */
a,
a:visited,
a:active{color: black;}
a:hover{ color:white; text-decoration:none;}


/*  http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}

  

.wide_top { 
   
   
    background: #99288d;
   
    padding-top: 15px
    width: 100%;
    min-height: 50px;
    height: auto;
}	
	
	
.wrapper{
	width: 100%; 
	margin: 0 0;
}
header{ 
	padding:15px 0;
}
#banner{ 
	text-align:center;
}
	
#hero,
#page-header{
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:20px 0;
}
#hero h1{ 
	line-height:1.2em;
	margin-top:0px;
	margin-bottom:10px;}

.flexslider{
	display:none;
}

#content {  
	margin:40px 0;
}

aside { 
	margin:40px 0;
}

p{ margin:0 0 1.5em;}


/* RESPONSIVE IMAGES */
img{ max-width:94%; height:auto;}





.row-text{
    margin-top: 30px;
    width: 100%;
    background-color: #660171; /* farba pozadia pasiku s textom*/
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/


.mriezka1,
.mriezka2,
.mriezka3,
.mriezka3_main,
.mriezka4,

.mriezka5,
.mriezka6,
.mriezka7,
.mriezka8,
.mriezka9,
.mriezka10,
.mriezka11,
.mriezka12 {
	margin-bottom:0px;
	margin-top: 0px;
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
   
   
    text-align: center;
}

.mriezka2,
.mriezka3,
.mriezka3_main {
 color: #000000;
 background-color: #b65bcd;
 margin-top: 10px;	
}

.mriezka2
{
	padding-left: 5px;
	text-align: left;
}

.mriezka3-dve-vedla-seba {
	width: 47%; height: 262px; overflow: hidden;
	float: left;
	display: block;

	margin: 5px;
}


.right {
   position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

.left {
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: #b0e0e6;
}


/*FOOTER*/
footer{  
	clear:both;
	font-size:80%;
	padding:20px 0;
}
footer ul{
	margin:0;
	padding:0;
}

/*colors and backgrounds*/
body{
	background: #e4a6f4;	
}


h1, h2, h3, h4, h5, h6{
	color:#333; 
}

footer{ 
	background:#333;
	color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{ 
	color:#CCC; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}

a.buttonlink{ 
	background:#0099ff; 
	border-radius:7px; 
	color:#000;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:10px;
	text-decoration:none;
}
a.buttonlink:hover{
	background:#8dbc01;
}
.greenelement{
	background:#5ec79e;
	color:#fff;
}
.violetelement{
	background:#887dc2;
	color:#fff;
}



/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}


/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
}


} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {
body{
/*	background: #000000 url("images/bg.png")  repeat-x;	*/
}

.wrapper{
	max-width: 1200px; 
	margin: 0 auto;
}

#banner{ 
	float:left; 
	text-align:left;
	margin-bottom:0px;
}
header{
	padding:0;
}
#content {  
	float:left;
	width:65%;
}
#content.wide-content{
	float:none;
	width:100%;
}

.flexslider{
display:block;
/*demo 1 slider theme*/	
margin: 0 0 60px; 
background: #fff; 
border: 4px solid #fff; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
-o-border-radius: 4px; 
border-radius: 4px; 
box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
}


aside { 
	float:right;
	width:30%;
}




/*GRID*/
/*
 & Columns : 12 

 */
 .row{
	 margin-left: 0px;
     margin-right: 0px;
}


 
.mriezka1 { width: 8.33333333%; }
.mriezka2 { width: 12.66666667%; }
.mriezka3 { width: 19%; height: 262px; overflow: hidden;}
.mriezka3_main { width: 19%; }
.mriezka4  { width: 25.33333333%; }
.logo { width: 25.33333333%; }
.mriezka5 { width: 40.66666667%; }
.mriezka6 { width: 50%; }
.mriezka7 { width: 57.33333333%;  }
.mriezka8 { width: 66.66666667%;  }
.mriezka9 { width: 75%; }
.mriezka10 { width: 83.33333333%; }
.mriezka11 { width: 91.66666667%; }
.mriezka12 { width: 98%; }

.mriezka1,
.mriezka2,
.mriezka3,
.mriezka3_main,
.mriezka4,

.mriezka5,
.mriezka6,
.mriezka7,
.mriezka8,
.mriezka9,
.mriezka10,
.mriezka11,
.mriezka12 {

	float: left;
	display: block;

	margin: 5px;
}


.logo{
	float: left;
	display: block;
   text-align: center;
	margin: 0px;
}

.rightfloat{float:right;}
/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
 */
 
#hero [class*="mriezka"] { margin-bottom:-20px;}

}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

---------------------------------------------------------------------------------------------------------------------
/** RATING STARS **/
#rater-stars {
  position: absolute;
  top: 2px;
  left: 0px;
  z-index: 1;
}

.rater-div {
  position: absolute;
  width: 19.6px;
  height: 30px;
  top: 2px;
  left: 0px;
  background-color: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
  z-index: 30;
  cursor: pointer;
}

#rater-text {
  position: absolute;
  top: 5px;
  left: 100px;
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}









.pagination, a.pagination, a.pagination:visited, a.pagination:hover
{
	color: #6a1000;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:bolder;
	padding-left: 2px;
	padding-right: 2px;
	text-decoration: none;
}

.pagination, a.pagination:hover
{
	color: white;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:bolder;
	padding-left: 2px;
	padding-right: 2px;
	text-decoration: none;
}


.video-thumb {

border: 2px solid #464646;
}


.video-thumb:hover {
border: 2px solid #6c6c6c;	

}



  
.popular,a.popular:visited, a.popular:active{color:white; font-weight: bold;}
a.popular:hover{ color:white; text-decoration:none;}




@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  font-size: 18px;
  line-height: 15px;
  text-transform: uppercase;
  text-align: right;
  z-index: 100;
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  
 
  z-index: 100;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */
z-index: 100;
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  z-index: 100;
  text-align: left;
}
#cssmenu > ul li.right {
  float: right;
  z-index: 100;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #660171 url('images/caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: black;
  
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #660171;
  color: #fff;

}
@media (max-width: 600px) {
  
  #cssmenu > ul {
    width: 100%;
    background-color: #660171;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('images/menu.png') no-repeat;
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #660171;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}

.table_order {
	width: 98%;
	color: #000000;
	text-align: center;
   margin-left: 5px;
	background-color: #FF8A75;
}


#play {
    background: url('images/play_button.png') center center no-repeat;
    margin: -350px 10px 0 0;
    height: 250px;
    position: relative;
    z-index: 10;
    
}