/* Version: 1.0 */
/* Document name: main */
/* Used for: http://www.southgate.cz */
/* Author: Jan Junek - jan@pixelplay.cz */
/* Media: screen, projection */


/* obecne definice */

body {margin:0px; padding:0px; color:#343434; line-height:120%; font-family:Arial, Helvetica, sans-serif; background:#f3f3f3; font-size:14px}

/* img, a img {border:none; margin:0px; background:none !important} */

p {line-height:180%; margin:0 0 15px 0} 

h1, h2, h3, h4 {color:#000}
h2 {font-size:24px}
h3 {font-size:18px}
h4 {font-size:14px}

ul {list-style:none; margin:0 0 15px 20px; padding:0}
	li {margin:0 0 12px 0; padding:0 0 0 30px}
	
strong {color:#000; font-weight:bold}

.grey {color:#7e7d7d}
.white {color:#fff}
.black {color:#000}

.cleaner {clear:both}

.kotva {visibility:hidden; display:block; height:0px}

a {color:#649606; text-decoration:underline}
a:hover {color:#2d4d00}



	
		/* stranka */
		.stranka {}
		
		
		
		
			/* hlavicka */
			.hlavicka {margin:0 auto; width:1000px; height:190px; position:relative}
			.podstranka .hlavicka {height:220px}
			
			
				/* logotyp */
				.logo-textove {position:absolute; top:0; left:0; height:190px; width:360px; text-align:left}
					.logo-textove h1 {margin:60px 0 0 40px}
					.logo-textove a, .logo-textove a:hover {color:#000; text-decoration:none; font-size:48px; line-height:40px; letter-spacing:-2px}
				.logo-obrazkove {position:absolute; top:0; left:0; height:190px; width:360px; background:url('../img/logo.png')}
					.logo-obrazkove a img {width:360px; height:190px; _height:185px}
					
				/* rychle kontakty */
				.kontakty {position:absolute; top:15px; right:40px; color:#7e7d7d; font-size:12px; text-align:right}
					.kontakty strong, .kontakty a {font-weight:normal; color:#000; text-decoration:none}
					.kontakty a:hover {text-decoration:underline}
					
				/* menu */
				ul.menu {position:absolute; top:112px; right:25px; margin:0; padding:0}
					ul.menu li {display:inline; font-size:18px; float:left; margin:0; padding:0; margin-left:20px}
					ul.menu li a, ul.menu li span {padding:12px 5px 10px 5px; background:none; color:#000; text-decoration:none}
					ul.menu li a:hover, ul.menu li span:hover {background:#000; color:#fff; text-decoration:none}
					ul.menu li.active a, ul.menu li.active span {background:#5c8b03; color:#e2fe96}
                                        ul.menu li span {cursor: default};
					
				/* submenu */
				ul.submenu {position:absolute; top:160px; right:30px; margin:0; padding:0}
					ul.submenu li {display:inline; font-size:14px; float:left; margin:0; padding:0; margin-left:15px}
					ul.submenu li a {padding:8px 10px 6px 10px; background:none; color:#000; text-decoration:none}
					ul.submenu li a:hover {background:#000; color:#fff; text-decoration:none}
					ul.submenu li.active a {background:#5c8b03; color:#e2fe96}
                                        
                                        
                                
									
			
			/* promo */
			.promo {margin:0 auto; width:100%; height:390px; background:#5c8b03 url('../img/back-promo-wide.jpg') 50% 0 no-repeat}	
				.promo-obsah {margin:0 auto; width:660px; height:330px; background:url('../img/back-promo.png') no-repeat; position:relative; padding:60px 300px 0 40px}	
					.promo h1 {margin:0px; color:#2c4b00; background:#b9e92b; margin-left:-20px; padding:0 20px; font-size:30px; line-height:200%; display:inline-block}
					.promo p {margin:20px 0 40px 0; padding-right:40px; color:#cdf070; font-size:15px}
					.promo a.button-grey {display:block; height:27px; width:170px; background:url('../img/button-grey.gif') no-repeat 0 0; color:#292321; text-decoration:none; text-align:center; font-size:16px; padding-top:8px; margin-left:220px}
					.promo a.button-grey:hover {background:url('../img/button-grey.gif') no-repeat 0 -35px}
			.podstranka .promo {background:#5c8b03 url('../img/back-promo2-wide.jpg') 50% 0 no-repeat; height:240px}
				.podstranka .promo-obsah {background:#5c8b03 url('../img/back-promo2.jpg') no-repeat; height:180px}
					  
                                
			/* tarify */
			.tarify {margin:0 auto; width:100%; height:380px; background:#111111 url('../img/back-tarify-wide.jpg') 50% 0 no-repeat}	
				.tarify-obsah {margin:0 auto; width:1000px; height:380px; background:url('../img/back-tarify.jpg') no-repeat; position:relative; padding:40px 0 0 0}	
					.tarify-obsah .tarif {float:left; width:270px; margin-left:40px; _margin-left:25px; padding:20px 5px 0 5px}
						.tarify .center {text-align:center}
						.tarify h2 {color:#6a6a6a; font-size:24px; margin:10px 0 15px 0}
						.tarify strong {font-size:18px; color:#fff}
						.tarify ul {list-style:none; margin:40px 0 40px 10px; padding:0; color:#8d8c8c; font-size:14px}
						.tarify li {margin:0 0 12px 0; padding:0 0 0 20px; background:url('../img/odrazka-bila.gif') 0 50% no-repeat}
						.tarify a.button {display:block; height:24px; width:114px; background:url('../img/button-small.gif') no-repeat 0 0; color:#e1ff98; text-decoration:none; text-align:center; font-size:14px; padding-top:6px; margin-left:78px}
						.tarify a.button:hover {background:url('../img/button-small.gif') no-repeat 0 -30px; color:#f7ffe4}
						
				
                        /* MOJE TELO */
                        
                            .telo a {
                                color: #5c8b03;
                                text-decoration: none;
                            }    
                            .telo a:hover {
                                text-decoration: underline;
                            } 
                            
			/* telo */
			.telo {margin:0 auto; width:1000px; padding:40px 0 100px 0}
				.telo ul {list-style:none; margin:30px 0 40px 30px; padding:0; line-height:160%}
				.telo li {margin:0 0 12px 0; padding:0 0 0 20px; background:url('../img/odrazka-zelena.gif') 0 50% no-repeat}
				
				.levy {float:left; margin-left:40px; width:580px}
				.pravy {float:right; margin-right:40px; width:280px; font-size:12px; color:#7c7c7c}
					.pravy h3, .pravy h4 {color:#565656}
			
				.slogan {color:#000; font-size:24px; text-align:center; line-height:120%}			
				p.large {text-align:center; color:#656565; font-size:18px; padding:0px 40px}
				.postup {height:140px; width:920px; background:url('../img/postup.gif') no-repeat top; position:relative; margin:50px 40px 0 40px}
					.postup .krok1 {position:absolute; top:90px; left:35px; font-size:30px}
					.postup .krok2 {position:absolute; top:90px; left:270px; font-size:30px}
					.postup .krok3 {position:absolute; top:90px; left:520px; font-size:30px}
					.postup .krok4 {position:absolute; top:90px; left:720px; font-size:30px}
				.telo a.button {display:inline-block; height:34px; width:139px; background:#689a06 url('../img/button.gif') no-repeat 0 0; color:#f2ffb5; text-decoration:none; text-align:center; font-size:16px; padding-top:1px; margin-left:20px; font-family:Arial, Helvetica, sans-serif !important}
				.telo a.button:hover {background:#477603 url('../img/button.gif') no-repeat 0 -35px; color:#f2ffb5}
				
				.linka-wide {width:920px; height:1px; background:#d3d3d3; margin:50px 0 60px 40px; _background:none; _border-bottom:1px solid #d3d3d3}
				
				.aktualita {width:280px; float:left; margin-left:40px}
				a.vyrazny {background:#649606; color:#f6ffc9; padding:5px 7px; text-decoration:none}
				a.vyrazny:hover {background:#437202}
				
				.tarify-podrobne {width:1000px}
					.tarify-podrobne .tarif {float:left; margin-left:40px; width:280px}
						.tarify-podrobne .tarif h2 {text-align:center}
						.tarify-podrobne .tarif .cena {text-align:center; width:280px; height:100px; background:#d9f092; padding-top:10px; font-size:18px; color:#5c8b03}
						.tarify-podrobne .tarif .cena2 {text-align:center; width:280px; height:100px; background:#e4e4e4; padding-top:10px; font-size:18px; color:#7b7b7b}
							.cena .cislo, .cena2 .cislo {font-size:60px; letter-spacing:-2px; line-height:normal}
						.tarify-podrobne ul {list-style:none; margin:30px 0 30px 10px; padding:0; line-height:160%}
						.tarify-podrobne li {margin:0 0 12px 0; padding:0 0 0 20px; background:url('../img/odrazka-zelena.gif') 0 50% no-repeat}
				.poznamky {width:1000px}
					.poznamka {float:left; width:280px; margin-left:40px; border-top:1px solid #c9c9c9; color:#7c7c7c; font-size:12px; text-align:center; padding-top:15px; margin-bottom:70px}
					
				
				
				/* cleaner */
				.cleaner {clear:both}
					
					
					
			/* paticka */
			.paticka {margin:0 auto; width:100%; height:360px; background:#111111 url('../img/back-paticka-wide.jpg') 50% 0 no-repeat; font-size:12px}
				.paticka-obsah {margin:0 auto; width:1000px; height:300px; padding-top:60px; background:url('../img/back-paticka.jpg'); position:relative}
					.paticka-levy {float:left; width:650px}
						.paticka-levy .sloupec1 {float:left; margin-left:40px; _margin-left:30px; width:120px}
						.paticka-levy .sloupec2 {float:left; margin-left:40px; _margin-left:30px; width:120px}
						.paticka-levy .sloupec3 {float:left; margin-left:40px; _margin-left:30px; width:120px}
						.paticka-levy .sloupec4 {float:left; margin-left:40px; _margin-left:30px; width:120px}
							.paticka-levy a.headlink, .paticka-levy a.headlink strong {color:#fff; font-size:18px; text-decoration:none; font-weight:normal}
							.paticka-levy a.headlink:hover {text-decoration:underline}
						
						.paticka-levy ul {list-style:none; margin:25px 0 0 0; padding:0}
						.paticka-levy li {margin:0 0 8px 0; padding:0 0 0 0}
							.paticka-levy ul a {text-decoration:none; color:#868585; display:block}
							.paticka-levy ul a:hover {text-decoration:underline; color:#fff}
							
					.paticka-pravy {float:right; width:280px; margin-right:40px; color:#868585}
						.paticka-pravy strong {font-size:18px; font-weight:normal; color:#868585}
						.paticka-pravy .white {margin-top:25px}
						.paticka-pravy .white a {color:#fff; text-decoration:none}
						.paticka-pravy .white a:hover {text-decoration:underline}
						
					.dodatek {width:1000px; margin-top:50px; text-align:center; color:#525151}
						.dodatek a {color:#525151}
						.dodatek a:hover {color:#fff}
						
					.linka-vertikalni {height:200px; width:1px; background:#323232; position:absolute; top:40px; right:360px}
				
				
				
/* definice pisma */

.museo300 {font-family:'Museo300'; font-weight:normal; font-style:normal}
.museo500 {font-family:'Museo500'; font-weight:normal; font-style:normal}
.museo700 {font-family:'Museo700'; font-weight:normal; font-style:normal}
.odkaz {color:#cdf070; text-decoration:underline}
				
		
					
/* MOJE */
.stranka .hlavicka{
    height:220px;
}
.logo-obrazkove, .logo-textove{
    z-index: 10000;
}
ul.menu {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    right: 0;
    padding-left: 400px;
    padding-bottom: 100px;
}       
ul.menu li.active ul.submenu li a {background:none; color:black;}
ul.menu li.active ul.submenu li a:hover {background:#000; color:#fff;}
ul.submenu li.active a {background:#5c8b03 !important; color:#e2fe96 !important;}
ul.submenu {
    display: none;
    position:absolute;
    right: 190px;
    top: 0;
    padding-top: 20px;
    margin-top: 28px; 
    color: black;
    padding-bottom: 32px;
    background-color: #F3F3EF;
}
ul.submenu li:first-of-type{
    padding-left: 342px;
}

ul.menu li:hover ul{   
    display: block;
    overflow: visible;
    z-index: 20;
}
ul.menu li.active ul{   
    display: block;
    overflow: visible;
    z-index: 10;
}
.kontakty {
    right:15px;
}
.promo p a{
    color: #cdf070;
}
.promo p a:hover{
    color: white;
}
.promo strong {
    color: #cdf070;
}

.telo img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
} 

.telo ul {
   margin-bottom: 1em;
   margin-top: 1em;
} 

.telo h2 {
   margin-bottom: 1em;
   margin-top: 2em;
} 

.telo h2:first-of-type {
   margin-top: 1em;
} 

.telo h3 {
   margin-bottom: 1em;
   margin-top: 1.5em;
} 

table.new{
    text-align: center;
    vertical-align: middle;
    border-collapse: collapse;
    margin: 1.5em 0;
}

table.new tr th, table.new td{
    padding: .5em 1em;
    border-right: 1px dashed black;
}

table.new tr th:last-of-type, table.new td:last-of-type{
    border-right: none;
}

table.new tr th:first-of-type{
    border-right: 1px dashed black;
}


table.new tr th:first-of-type{
    text-align: left;
}

table.new tr:nth-of-type(2n){
    background-color: #c9c9c9;
}

table.new tr:first-of-type th{
    background-color: #649606;
    color: #cdf070;
}

table.new tr:first-of-type th:first-of-type{
    background-color: transparent;
}

ul.inline{
     margin-top: 1em;
}

ul.inline li{
     display: inline; 
     margin-right: 5px;
}


/* GALERIE 
   ========================================================= */
   

label[for] { cursor: pointer; }

input[type="checkbox"] { display: none; }

.lightbox {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  z-index: 10000000;
  overflow: auto;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .75s ease-out;
  transition: transform .75s ease-out;
}

.lightbox img {   
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  max-height: 96%;
  max-width: 96%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

input[type="checkbox"]:checked + .lightbox{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

input[type="checkbox"]:checked ~ .grid { opacity: .125; }

.grid {
  width: 100%;  /*
  height: 100%;
  z-index: 0;           
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;   
  padding: 16px;               */
  text-align: left;
  -webkit-transition: opacity .75s;
  transition: opacity .75s;
  /*margin-bottom: 35px;*/
}

.grid .grid-item {
  width: 100%;
  opacity: .75;
  display: inline-block;
  padding: 14px;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  /*-moz-box-sizing: border-box;
  box-sizing: border-box;*/
}

.grid .grid-item:hover { opacity: 1; }
@media screen and (max-width: 1024px) {

.grid .grid-item { width: calc(100% - 32px) }
}
@media screen and (max-width: 480px) {

.grid .grid-item { width: calc(100% - 32px); }
}

.grid img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}