div#intro-menu {font-family: Trajan pro; width:100%; height:50px; background: rgba(0,0,0, .50); border-bottom: 1px solid rgba(0,0,0,.33); text-align:center; color:#fff; opacity:0; backdrop-filter: blur(3px); box-shadow: 0px 10px 50px #000;}

div#intro-menu2 {/*position:fixed; z-index:100;*/ font-family: Trajan pro; width:100%; height:50px; background: rgba(0,0,0, .50); border-bottom: 1px solid rgba(0,0,0,.33); text-align:center; color:#fff; opacity:1; backdrop-filter: blur(3px); box-shadow: 0px 10px 50px #000;}


div#footer {width:100%; min-height:60px; background: rgba(0,0,0, .60);  padding: .1em .5em .1em .5em; font-size:1em; color:#fff; backdrop-filter: blur(10px); /*box-shadow: 0px -2px 4px #222;*/}

div#footer p {text-align:center;}
div#footer a {color:#fff}


div.menu-odkazy-center {
                  min-height: 50px;
				  position: relative;
				  display: flex; 
				  justify-content: center;
				  align-items: center;
				  flex-wrap: wrap; 
				  margin-right:30px;
				  text-shadow: 1px 1px 1px #444
}


.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  text-align: center;
  position: relative;
  margin-right: 30px;
  cursor:pointer;
}

a.menu{
  text-transform: uppercase;
  text-decoration: none;
  color: #e2d390;
  transition: color .5s;
  font-size: 20px;
}

a.menu:hover{
  color: #e2d390;
  transition: color .5s;
}




.menu-home{width: 70px;} 
.menu-home::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-home:hover:before, .active::before{width:100%;}


.menu-about{width: 78px;} 
.menu-about::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-about:hover:before, .active::before{width:100%;}

.menu-news{width: 65px;} 
.menu-news::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-news:hover:before, .active::before{width:100%;}

.menu-our-scotties{width: 162px;} 
.menu-our-scotties::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-our-scotties:hover:before, .active::before{width:100%;}

.menu-puppies{width: 85px;} 
.menu-puppies::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-puppies:hover:before, .active::before{width:100%;}

.menu-offspring{width: 125px;} 
.menu-offspring::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-offspring:hover:before, .active::before{width:100%;}

.menu-links{width: 65px;} 
.menu-links::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-links:hover:before, .active::before{width:100%;}

.menu-contact{width: 110px;} 
.menu-contact::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-contact:hover:before, .active::before{width:100%;}

.menu-old-website{width: 150px;} 
.menu-old-website::before{content:"";width: 0%;height: 1px;position: absolute;background: #e2d390; bottom: -3px;transition: width 200ms ease-in;}
.menu-old-website:hover:before, .active::before{width:100%;}

         
div#intro {
          background: url('../img/black-20.png'), url('../img/img1.jpg');
          background-position: center bottom, center center;
          background-repeat: repeat, no-repeat;
          background-size: 100%, cover;
          background-attachment: fixed, fixed;        
          padding:0px; width:100%; min-height: 100%; min-height: 100vh; opacity:0;          
          }                
		  
div#head-bg { 
          padding:0px 0px 50px 0px; width:100%;  min-height: 100vh;          
          }          		           

div.obal-section {margin:auto; width:100%; padding-bottom: 50px; padding-top: 100px; min-height: 100vh; }
div.section {margin:auto; /*width:75%;*/ background: rgba(0,0,0, .50); backdrop-filter: blur(2px); min-height: 80vh; padding: 2em 2em 2em 2em; border: 1px solid rgba(0,0,0,.20);  box-shadow: 0px 0px 20px #222; }

img#hamburger {display:none}

#hamburgermenu{
    z-index:199;
    min-width: 200px;
    min-height: 100px;
    padding: 0.8em;
    background: #e2d390;
    text-align: left;
    font-weight: normal;
    box-shadow: -5px 5px 10px #444;
}

div#scroll-buttons-up, div#scroll-buttons-down, div.scroll-buttons-up, div.scroll-buttons-down {display:none}



a.hmenu{
    font-size: 20px;
    letter-spacing: 1px;
    padding: 0px 0px 5px 0px;
    margin: 12px 0px 0px 10px;
    color:#365632;
    text-decoration:none;
    display:inline-block;
}


.invisible2{
    position: fixed;
    top: 62px;
    right: -460px;
    transition: right .5s;
    }

.visible2{
    position: fixed;
    top: 62px;
    right: 0px;
    transition: right .5s;
    }



div#logo-big {position: absolute; 
  top: 85%; left: 0; 
  bottom: 15%; right: 0; 
  margin: auto;
  width: 400px;
  height: 208px; 
  cursor:pointer;
  background: url('../img/logo.png');
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: background .5s;
  opacity:0;
  } 
  
div#logo-small {
  display:none;
  }
    


h1 {font-family: Trajan pro; color: #e2d390; font-size: 1.8em; font-weight: normal; /*font-family: Trajan pro Bold;*/ margin:0px 0px 2em 0px; text-shadow: 1px 1px 1px #444}
h2 {color: #f8edd6; font-size: 1.4em; font-weight: normal; font-family: Pala Bold; text-shadow: 1px 1px 1px #444}
h3 {color: #f5e0b3; font-size: 1.2em; font-weight: normal; font-family: Pala Bold; text-shadow: 1px 1px 1px #444}

a[name] {position:relative; top:-20px}

.shadow-dark {background: rgba(50, 123, 10); box-shadow: 1px 1px 2px #000;}
.shadow-light {background: rgba(255, 150, 0, 1); box-shadow: 1px 1px 2px #888;}

 
  p, li {font-family: Pala; color: #f8edd6; font-size: 1.2em; text-align:left; text-shadow: 1px 1px 1px #444; line-height: 1.4em}
  
  
  b {font-family: Pala Bold; font-weight:normal; color: #f8edd6; text-shadow: 1px 1px 1px #444}
  strong, .grn {font-family: Pala Bold; font-weight:normal; color: #f5e0b3; text-shadow: 1px 1px 1px #444}
  
  strong.zvyrazneni {font-family: Pala Bold; font-weight:normal; background:#ffe3aa;color:#000;text-shadow:none;padding:3px 6px;border-radius:3px;opacity:.90;box-shadow: 1px 1px 3px #444}

p.name {font-size:1.1em; margin-top:10px!important; margin-bottom: 3px}  
   
  ul{display:inline-block;margin:auto;text-align:left;text-indent:0;}
  ol{display:inline-block;margin:auto;text-align:left;text-indent:0;}
  
  ol.seznam {margin-left:100px}
  
  ul li {list-style-type: none; }
  
  div.titles {width:100%; margin-bottom: 1.6em; padding: .5em; border: 1px solid rgba(248, 237, 214, .15); /*background: rgba(255, 255, 255, .05);*/ transition: background .35s}
  div.titles:hover {background: rgba(255, 255, 255, .10); transition: background .35s}
  div.titles h3 {margin:0 0 .5em 0}
  
 
table#gen {border-collapse:collapse; width:100%; margin-bottom: 1.6em; padding:0; background: rgba(0, 0, 0, .20)}  
th.gen {margin:0; padding: .5em; font-size: 1.1em;  border: 1px solid rgba(248, 237, 214, .30); font-family: Pala Bold; font-weight:normal; color: #f5e0b3; text-shadow: 1px 1px 1px #444; transition: background .35s}
td.gen {margin:0; padding: .5em; font-size: 1.1em;  border: 1px solid rgba(248, 237, 214, .30); color: rgba(248, 237, 214, 1); text-shadow: 1px 1px 1px #444; transition: background .35s}
th.gen:hover, td.gen:hover {background: rgba(255, 255, 255, .10); transition: background .35s}

  
a.img img {border: 1px solid rgba(248, 237, 214, .75);margin-bottom: 10px;margin-right:5px; height:175px; width: auto}
a.img { filter: contrast(90%) brightness(90%);  transition: filter .25s}
a.img:hover {filter: contrast(100%) brightness(100%);  transition: filter .25s}

/*  
ul li {list-style-type: square;  color: #fff; font-size: 1em; text-align:left; text-shadow: 1px 1px 1px #444; line-height: 1.5em; text-indent:0;}
  
ul ul li {list-style-type: '- ';}
ol ul li {list-style-type: '- ';  }

ol li {list-style-type: decimal;  color: #fff; font-size: 1em; text-align:left; text-shadow: 1px 1px 1px #444; line-height: 1.5em; padding-left:10px; text-indent:0;} 

ul li.vop { color: #fff; font-size: 1em; text-align:left; text-shadow: 1px 1px 1px #444; line-height: 1.5em; padding-left:10px; letter-spacing: 2px; text-indent:0;} 

ol li span, ul li.vop span { letter-spacing: 0px}
*/
  
  .hidden{height:0;overflow:hidden;/*margin-top:10px;margin-left:20px;margin-bottom:20px;*/}
  .active-hidden {margin-top:0;}

#down {position: absolute; 
  left: 0; 
  bottom: 5%; right: 0; 
  margin: auto;
  height: 30px; width: 30px; cursor:pointer;
  color: #fff;
  text-shadow: 2px 2px 5px #444;
  opacity:0;
   }
   
div#upstairs {position:fixed; bottom: 3%; right: 3%; z-index:10;} 

.invisible{
    position: fixed;
    top: 129px;
    right: -499px;
    transition: right .5s;
    }

.visible{
    position: fixed;
    top: 129px;
    right: 0px;
    transition: right .5s;
    }


.visible3 {opacity: 1; cursor: pointer; transition: opacity 1s}
.invisible3 { opacity: 0; cursor: text; transition: opacity 1s}

a.down-orange {/*text-shadow: 1px 1px 1px #444;*/ text-decoration: none; color: rgba(255, 150, 0, 1);/* transition: color .5s*/}
a#to_home, a.down-white {/*text-shadow: 1px 1px 1px #444;*/ text-decoration: none; color: rgba(255, 255, 255, 1);/* transition: color .5s*/}

img#up {width:40px; height:auto; border: none}

a, .neodkaz {text-decoration: underline; color: rgb(255,227,170,1); cursor:pointer; transition: color .25s}
a:hover, .neodkaz:hover {text-decoration: none; color: rgb(255,227,170,1); transition: color .25s}

div.grid{
    margin-bottom:30px;
	display:grid;
	grid-template-columns: 40% auto; grid-template-rows: auto;
    column-gap: 1em;
	}
	
div.grid div:first-child {align-self: start; padding:0; }


div.grid div.height {   align-self: start; 
                        justify-self: center;   
                        padding:0;
                        background:  url('../img/black-20.png');
                        background-position: center; 
                        background-repeat: repeat;
                        background-size: 100%;
                        border: 1px solid rgba(248, 237, 214, .5);
                        width:100%;
                        margin:auto;
                        text-align:center;
                        }

div.grid div.height img {width:auto;border:none!important;}

div.grid div:last-child {align-self: start; font-family: Pala; color: #f8edd6; font-size: 1.2em; text-align:left; text-shadow: 1px 1px 1px #444; line-height: 1.4em}

//div.flexbox p {line-height:auto; margin-top: 0px; font-family: Pala; }

img {border: 1px solid rgba(248, 237, 214, .5); }


div.grid2{
    width:100%;
    margin-bottom:30px;
	display:grid;
	grid-template-columns: 50% 50%; grid-template-rows: auto;
    justify-items: center;
    column-gap: 1em;
	}


div.clean-15 {width:100%; height:15px; clear:both}
div.clean-30 {width:100%; height:30px; clear:both}
div.clean-50 {width:100%; height:50px; clear:both}

img.high-contrast {filter: contrast(120%) brightness(95%); border: 1px solid #ccc; /*box-shadow: 2px 2px 2px #ccc;*/}   

div.flexbox{
    margin-bottom:30px;
	display:flex;
	flex-flow: row wrap;
    //flex-direction: row-reverse;
	justify-content: space-between;
    row-gap:5em;
    column-gap:5em;
    padding: 1em 3em 3em 3em;
	}
	
div.flexbox div {width: 300px; height: 234px; margin:auto;  text-align:center; padding:0; border: 1px solid rgba(248, 237, 214, .5); cursor:pointer;}
div.flexbox div a {width: 100%; position:absolute;  left: 0; margin-top: 220px; padding-top: 20px}

div.flexbox div h2 {width: 100%; position:absolute;  left: 0; margin-top: 280px; font-family: Trajan pro; color: #e2d390; font-size: 1.6em; font-weight: normal; text-shadow: 1px 1px 1px #444}

div.flexbox2{
    //margin-bottom:30px;
	display:flex;
	flex-flow: row wrap;
    //flex-direction: row-reverse;
	justify-content: space-evenly;
    row-gap:1em;
    column-gap:1em;
    //padding: 1em 3em 3em 3em;
	}
    
div.flexbox3{
    //margin-bottom:30px;
	display:flex;
	flex-flow: row wrap;
    //flex-direction: row-reverse;
	justify-content: space-between;
    row-gap:.5em;
    column-gap:.5em;
    //padding: 1em 3em 3em 3em;
	}
    
div.width-30 {width:29%;text-align:center}
div.width-70 {width:69%}       

div#at-home {
    width: 355px; height: 274px;
    border:none;
    background: url('../img/scotties/at-home6.png') center no-repeat;  
    background-size: 340px 258px;
    filter: contrast(90%) brightness(90%);
    transition: background .35s, filter .35s;
}


div#at-home:hover {
    filter: contrast(110%) brightness(110%);
    background-size: 355px 274px;
    transition: background .35s, filter .35s;
}


div#in-memory {
    width: 360px; height: 285px;
    border:none;
    background: url('../img/scotties/in-memory.png') center no-repeat;
    background-size: 340px 269px;
    filter: contrast(90%) brightness(90%) grayscale(100%);
    transition: background .35s, filter .35s;
}



div#in-memory:hover {
    filter: contrast(110%) brightness(110%) grayscale(0%);
    background-size: 360px 285px;
    transition: background .35s, filter .35s;
}


div#actual-litter {
    width: 360px; height: 272px;
    border:none;
    background: url('../img/scotties/actual-litter.png') center no-repeat;
    background-size: 340px 257px;
    filter: contrast(90%) brightness(90%);
    transition: background .35s, filter .35s;
}


div#actual-litter:hover {
    filter: contrast(110%) brightness(110%);
    background-size: 360px 272px;
    transition: background .35s, filter .35s;
}


div#offspring {
    width: 360px; height: 274px;
    border:none;
    background: url('../img/scotties/offspring.png') center no-repeat;
    background-size: 340px 259px;
    filter: contrast(90%) brightness(90%);
    transition: background .35s, filter .35s;
}


div#offspring:hover {
    filter: contrast(110%) brightness(110%);
    background-size: 360px 274px;
    transition: background .35s, filter .35s;
}




p.nav {float:right; margin:0; font-size: 1em}

a.back {text-decoration:none;writing-mode: vertical-lr; transform: rotate(270deg);}




p.date {width:100%; margin-top: 2.5em; margin-bottom:10px; padding: .5em; border: 1px solid rgba(248, 237, 214, .15); background: rgba(255, 255, 255, .10); font-family: Pala Bold; font-weight:normal; color: #e2d390; text-shadow: 1px 1px 1px #444}

//strong.zvyrazneni {font-family: Pala Bold; font-weight:normal; background:#ffe3aa;color:#000;text-shadow:none;padding:3px 6px;border-radius:3px;opacity:.90;box-shadow: 1px 1px 3px #444}

p.major {width:100%; margin-top: 2.5em; margin-bottom:10px; font-family: Pala Bold; font-weight:normal; background:#ffe3aa;color:#000;text-shadow:none;padding:3px 6px;border-radius:3px;opacity:.90;box-shadow: 1px 1px 3px #444}

p.major a{color:#000}

p.date2 {width:100%; margin-top: 2.5em; margin-bottom:10px; padding: .5em; border: 1px solid rgba(255, 255, 255, 1); background: rgba(0, 0, 0, .45); font-family: Pala Bold; font-weight:normal; color: #fff; text-shadow: 1px 1px 1px #444}

div.news {width:100%; margin-bottom: 1.6em; padding: 1em; border: 1px solid rgba(248, 237, 214, 0); transition: background .35s, border .35s;}
div.news2 {width:100%; margin-bottom: 1.6em; padding: 1em; border: 1px solid rgba(248, 237, 214, 0); display: flex; justify-content: flex-start; align-items: flex-start; gap:2em; flex-wrap: wrap; transition: background .35s, border .35s}

div.offspring {width:100%; margin-bottom: 1.6em; padding: 1em; border: 1px solid rgba(248, 237, 214, 0); display: flex; justify-content: center; align-items: flex-start; gap:3em; flex-wrap: wrap; transition: background .35s, border .35s}

div.offspring p{margin:0}

div.news:hover, div.news2:hover, div.offspring:hover {border: 1px solid rgba(248, 237, 214, .15); background: rgba(255, 255, 255, .10); transition: background .35s, border .35s;}

div.news2 div._33_ {width:30%;}
div.news2 div._50_ {width:47%; }
div.news2 div._100_ {width:98%; }

div.__50__ {width:47%; 
            display: flex; 
			justify-content: space-between;
			align-items: flex-start;
            gap:.5em;
			flex-wrap: wrap; }
            
div.__50__ p {width:47%;}
div.__50__ p span{font-family: Pala Bold;text-decoration:underline;line-height:50px}
div.__50__ img.img {margin-top:10px} 

div.pedigree {height:0;overflow:hidden;margin-top:10px;margin-bottom:20px;}           

div.news p, div.news2 p {margin-top:0}

p.news-links {float:none;clear:both;margin:0;text-align:center}

li.links {list-style-type: square; color: #e2d390}
li.links span{color: #fff}


.unknown {opacity: .33; font-size: .8em; letter-spacing: 2px;}
.unknown td {text-align:center!important; margin:auto}

img#znak-euri-escot {border:0; width: 175px; height: auto; /*opacity: .75*/}

/*
img#znak-euri-escot-intro {position: absolute; 
  top: 83%; left: 0; 
  bottom: 17%; right: 0; 
  margin: auto;border:0; width: 200px; height: auto; opacity: .75*}

a.img { filter: contrast(85%) brightness(85%);  transition: filter .25s}
a.img:hover {filter: contrast(110%) brightness(110%);  transition: filter .25s}
*/

img.img-pf {float:left;}
p.p-pf  {text-indent:0px;position:relative;top:-25px;left:10px}








		




div.obal-table {width:48%; }
table.cenik {width: 100%; margin-bottom:27px}

table.cenik th {color:#f8edd6; text-align: left; border-bottom: 1px solid #f8edd6; text-shadow: 1px 1px 1px #444}
table.cenik td:first-child {color:#fff; text-align: left; border-bottom: 1px dotted #f8edd6; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.cenik td:last-child {color:#fff; text-align: right; border-bottom: 1px dotted #f8edd6; vertical-align: top; text-shadow: 1px 1px 1px #444}

.note {margin:0; font-size:.8em; text-shadow: 1px 1px 1px #444}

p.navigace {margin:0; float:right; font-size:.8em; opacity: .5; transition: opacity .5s}
p.navigace:hover {opacity: 1; transition: opacity .5s}

div.kontakt{
	display:flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	}
	
div.kontakt div {width: 30%}

iframe {width: 100%; height: 200px; border:1px solid #fff; }
iframe.mapa {width: 100%; height: 600px; border:1px solid #e2d390; }

/*
input.sluzba { font-size: 1em; padding: .7em .7em; width: 200px; background: rgb(248,237,214);
background: linear-gradient(180deg, rgba(251,217,145,1) 0%, rgba(255,235,195,1) 100%); border: 0; margin-right: 50px; box-shadow: 5px 5px 5px #666; cursor:pointer; transition: background 1s}
*/

input.tlacitko {text-align:center;  font-size: 1em; padding: .7em .7em;  background: rgb(248,237,214,1); border: 0; box-shadow: 5px 5px 5px #666; cursor:pointer;  transition: background .75s}

input.tlacitko2 {text-align:center;  font-size: 1em; padding: .7em .7em;  background: #444; color: rgb(255,250,234,1)!important; border: 0; /*box-shadow: 5px 5px 5px #666;*/ cursor:pointer;  transition: background .75s}
		

input.tlacitko:hover {background: rgb(255,227,170,1); transition: background .5s}

input.sluzba {width: 200px;}
input.submit {width: 300px;}

input.uppercase { text-transform: uppercase; }



table.poptavka {text-align:center; margin:auto; width: 80%; margin-top:30px; margin-bottom:20px} 
table.poptavka th {font-weight: normal;  color:#fff; text-align: left; height: 50px; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.poptavka td {color:#fff; text-align: left; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.poptavka td:first-child {padding-top:15px}

table.form {text-align:center; margin:auto; margin-top:30px; margin-bottom:20px} 
table.form th {font-weight: normal;  color:#fff; text-align: left; height: 50px; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.form td {color:#fff; text-align: left; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.form td:first-child {padding-top:15px}

table.adminform {text-align:center; margin:auto; width: 80%; margin-top:30px; margin-bottom:0px} 
table.adminform th {font-weight: normal;  color:#fff; text-align: left; height: 50px; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.adminform td {color:#fff; text-align: left; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.adminform td:first-child {text-align: right; padding-top:12px; width:33%}

table.adminform2 {margin-top:30px; margin-bottom:0px; margin-left:243px} 
table.adminform2 th {font-weight: normal;  color:#fff; text-align: left; height: 50px; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.adminform2 td {color:#fff; text-align: left; vertical-align: top; text-shadow: 1px 1px 1px #444}
table.adminform2 td:first-child {text-align: left; padding-top:7px;}

label {cursor:pointer}


div.polozky2  {margin:auto; text-align: center}

div.polozka span{color:#fff; text-align: left; text-shadow: 1px 1px 1px #444}
.odebrat {position:relative; top:5px;  font-size:30px; font-weight: bold; color: #ffd800; cursor:pointer; }

::placeholder {color:#aaa; font-style: italic; }

select, input[type=text], input[type=password], input[type=file], input[type=number], textarea {font-family: Librefranklin Regular; font-size: 1em; padding: .5em .5em;  background: #eee; width: 100%; margin-bottom: 5px; border:none}

select.num {width:auto!important;margin-bottom:0;font-family: Librefranklin Regular; font-size: 1em; padding: .5em .5em;  background: #eee;}

input[type=file] {color: #222}
input[type=checkbox] {width: 20px; height: 20px; margin:0; position:relative; top: 3px}

select:focus, input[type=text]:focus, input[type=file]:focus, input[type=checkbox]:focus, textarea:focus {outline:none; background: rgb(248,237,214,1)}

input:disabled, select:disabled {background: rgba(255,255,255,.25);}

textarea{
resize:vertical;
}

p.msgr {width:100%;  font-size: 1em; padding: .5em .5em; background: rgb(248,237,214,1); color: #222; text-shadow:none; text-align:center}
p.msgf {width:100%;  font-size: 1em; padding: .5em .5em; background: #b00; color: #fff; text-shadow:none; text-align:center}