* { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*,*:before,*:after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }

body { background: #363f4c; color: #778899; font-weight: normal; font-family: 'Roboto', Arial, Verdana, Tahoma; font-weight: 300; font-size: 100%; width:100%; line-height: 1.42857143; text-align:center; }

#page { background:#fff; }

.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw600 {font-weight: 600;}

.blue { color: #009fd9; }
.darkblue { color: #002664; }
.orange { color: #ff5801; }
.green { color: #84bf02; }
.gray { color: #778899; }

.header {  }
.header ul { margin:0; padding:0; list-style:none; overflow:hidden; background: #009fd9;}
.header li a { display: block; padding: 1.1em 1em; color: #fff; border-bottom: 1px solid #80cfec; text-decoration: none; font-size: 115%; text-transform: uppercase; } 
.header li a:hover, .header .menu-btn:hover { background: #12B9F4; }
.header .logo { display:block; float:left; width: 133px; height: 28px; margin: 23px 0 0 23px; text-decoration:none; background: url('/images/kariera/logo-ceske-drahy.svg') 0 0 no-repeat; background-size: 133px 28px; }
.header .logo span { display: none; }

.header .menu { clear:both; max-height: 0; transition: max-height .2s ease-out; }
.header .menu-icon { cursor:pointer; display:inline-block; float:right; padding: 34px 26px; position:relative;  user-select:none;}
.header .menu-icon .navicon { background: #0c2760; display: block; height:2px; position:relative; transition:background .2s ease-out; width:24px; }
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background:#0c2760; content:''; display:block; height:100%; position:absolute; transition:all .2s ease-out; width:100%; }
.header .menu-icon .navicon:before { top:6px; }
.header .menu-icon .navicon:after { top:-6px; }
.header .menu-btn { display:none; }
.header .menu-btn:checked ~ label { background: #009fd9; }
.header .menu-btn:checked ~ .menu { max-height: 300px; }
.header .menu-btn:checked ~ .menu-icon .navicon { background:transparent; }
.header .menu-btn:checked ~ .menu-icon .navicon:before { transform:rotate(-45deg); background: #fff; }
.header .menu-btn:checked ~ .menu-icon .navicon:after { transform:rotate(45deg); background: #fff; }
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top:0; }

#stripe { }

#stripe.hp { background: url('/images/kariera/stripe-hp.jpg') center center no-repeat; }
#stripe.zaci { background: url('/images/kariera/stripe-zaci2.jpg') center center no-repeat; }
#stripe.stredni { background: url('/images/kariera/stripe-stredni.jpg') center center no-repeat; }
#stripe.absolventi { background: url('/images/kariera/stripe-absolventi.jpg') center center no-repeat; }
#stripe.stipendijni { background: url('/images/kariera/stripe-stipendijni.jpg') center center no-repeat; }
#stripe.exkurze { background: url('/images/kariera/exkurze5.jpg') center center no-repeat; }
#stripe.skoly { background: url('/images/kariera/stripe-skoly.jpg') center center no-repeat; }
#stripe.ucitele { background: url('/images/kariera/stripe-ucitele.jpg') center center no-repeat; }
#stripe.seminare { background: url('/images/kariera/stripe-seminare.jpg') center center no-repeat; }

#stripe .inbox { height: 510px; position: relative; }
#stripe.hp .inbox { height: 530px; }

#stripe .claim { position: absolute; bottom: 0; left: 0; padding: 30px; text-align: left; }
#stripe .claimbox { background: rgba(255,255,255,0.9); padding: 30px; }
#stripe .claimbox .title { font-size: 220%; font-weight: 700; color: #0c2760; line-height: 1; }
#stripe .claimbox .text { font-weight: 400; padding-top: 1em; }
#stripe .claimbox .link { padding-top: 1em; }
#stripe .claimbox .button { display: inline-block; padding: 0.5em 3em; }

#toptextbanner { background: #fff;  }
#toptextbanner .inbox { background: #84bf02; color: #fff; padding: 1.5em; }
#toptextbanner a { color: #fff; }
#toptextbanner strong { font-weight: 700; }

.main { background: #fff; padding: 0 1em; }
.main .inbox { position: relative; }

.main p { padding: 1em 0; }
.main p.thinp { padding: 0.5em 0; }
.main p.nopadding { padding: 0; }
.h1title, .h2title { color: #009fda; font-weight: 400; font-size: 110%; }

p + h1, p + h2 { padding-top: 0; }
.submenu + h1 { padding-top: 1.5em; }

.mainadd { border-top: 1px solid #e3e7eb; border-bottom: 1px solid #e3e7eb; margin: 2em -1em 0 -1em; }
.mainadd.v2 { border: none; margin: 0; }
.mainadd .inbox { padding: 2em 0 0 0; }


h1 { color: #002664; font-size: 270%; font-weight: 700; line-height: 1; padding: 0.35em 0; }
h2 { color: #002664; font-size: 210%; font-weight: 700; line-height: 1; padding: 1em 0; }

ul.submenu { padding: 1.5em 1em; font-size: 125%; border-bottom: 1px solid #e3e7eb; }
.submenu li { list-style-type: none; display: block; }
.submenu a { color: #009fd9; display: block; padding: 0.05em 1.5em; margin: 0.5em 0; }
.submenu a:hover { color: #002664; }
.submenu li:first-child a { border: none; }

.items { padding-bottom: 3em; }
.items .item { display: inline-block; vertical-align: top; width: 275px; margin: 3em 0; padding: 0 1em; }
.items .item a { text-decoration: none; color: #009fda; }
.items .item span.ilu { display: inline-block; width: 170px; height: 170px; margin-bottom: 1em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #f8f8f8; }
.items .item span.ilu.fatstroke { background: url('/images/kariera/bgicon.jpg') center center no-repeat; }
.items .item span.text { display: block; font-size: 130%; font-weight: 400; }
.items .item span.text.small { font-size: 100%; }

.evenodlist { }
.evenodlist .item { padding: 1.5em 0; position: relative;}
.evenodlist .item a{ 
    display: block;
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    cursor: pointer;
}
.evenodlist .item h3 { color: #009fda; font-size: 150%; padding-top: 0.625em; }

.grguide { padding: 1em 0; }
.grguide .item { padding: 0 0 2em 0; }
.grguide .item span { display: block; }
.grguide .item .title { color: #009fd9; font-weight: 700; font-size: 140%; padding-top: 0.5m; }
.grguide .item .text { padding: 1em 0; }
.grguide .item .ilu { height: 250px; background-repeat: no-repeat; background-position: center top; }
.grguide .item .icon { display: inline-block; width: 170px; height: 170px; margin-top: -135px; border-radius: 50%; background-color: #f8f8f8; }

.guidebox { padding: 1em 0 3em 0; }
.boxes { padding: 1em 0 2em 0; }

.banner { display: inline-block; position: relative; width: 100%; max-width: 635px; height: 400px; overflow: hidden; border: none; }
.banner .inner { position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%;  }
.banner .inner .inniner { background: rgba(255,255,255,0.9); padding: 1em 1.5em 1.5em 1.5em; }

/* pozice pozadi vnitrniho boxu modre sikme*/
.banner .inner .inninerNew {
    background: url(/images/kariera/bannery/pozice-pozadi.png) no-repeat;
    padding: 1.3em 1.5em 1.1em 1.5em;
    color: #ffff;
    opacity: 0.93;
}
.banner .inner .inninerNew h3{
    color: #ffff;
}
.banner .inner .inninerNew p.akalink {
    color: #ffff !important;
    border-bottom: 1px solid #ffff;
}

.banner .background { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-position: center top; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; transition-duration: 0.5s; }
.banner:hover .background { transform: scale(1.05); }
.banner h3 { color: #002664; font-weight: 700; font-size: 140%; }
.banner p.akalink { display: inline-block; padding: 0.25em 0 0 0; color: #009fda; border-bottom: 1px solid #009fda; }
.banner a { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; }

.solobanner { padding: 1em; }
.solobanner .combibanner { position: relative; background: url('/images/kariera/bannery/bannerbg.jpg') center center no-repeat; }
.solobanner .combibanner { position: relative; background: url('/images/kariera/bannery/bannerv2.jpg') center center no-repeat; }

.solobanner .combibanner2 {position: relative; background: url(/images/kariera/bannery/bannerPraxe.jpg) center center no-repeat;}

.solobanner .combibanner .ingr { height: 290px; background: url('/images/kariera/bannery/praxe.png') center top no-repeat; background-size: 351px 291px; }
.combibanner .content {  padding: 0 1.5em 1.5em 1.5em; }
.combibanner2 .content {  padding: 0 1.5em 1.5em 1.5em; }
.combibanner.v2 .content {  padding: 1.5em; }  
.content .contentab { background: #009fda; color: #fff; padding: 1em 1.5em; text-transform: uppercase; }
.content .contentext { background: rgba(255,255,255,0.9); padding: 1em 1.5em 1.5em 1.5em; }
.content .contentext h4 { color: #002664; font-size: 200%; font-weight: 700; line-height: 1; padding: 0; }
.content .contentext p { padding: 1.5em 0 0 0; }

.highlightstripe { background: #e3e7eb; }
.highlightstripe.v1 { background-image: url('/images/kariera/bannery/hgstripev1b.jpg'); background-position: center bottom; background-repeat: no-repeat; }
.highlightstripe.v2 { background-image: url('/images/kariera/bg3b.jpg'); background-position: center top; background-repeat: no-repeat; }
.highlightstripe.v1new { background-image: url('/images/kariera/bannery/hgstripev1b2.jpg'); background-position: center bottom; background-repeat: no-repeat; }
.highlightstripe.v1newGallery { background-image: url('/images/kariera/bannery/bannerGallery.jpg'); background-position: center bottom; background-repeat: no-repeat; }

.highlightstripe.v1newNoImg { background-image: none; background-position: center bottom; background-repeat: no-repeat; }
.highlightstripe .inbox { padding: 0 1em; position: relative; }
.highlightstripe .inbox.v1newGallery { background-image: url('/images/kariera/bannery/bannerGallery.jpg'); background-position: center bottom; background-repeat: no-repeat; }

.topslideitems { padding: 80px 0 4em 0;  }
.topslideitem { display: inline-block; vertical-align: top; text-align: center; width: 250px; }
.topslideitem a { display: inline-block; background: url('/images/kariera/svg/bubble-hran-white.svg') center center no-repeat; width: 250px; height: 151px; padding-top: 18px; text-decoration: none; font-weight: 700; }
.topslideitem a:hover { background-image: url('/images/kariera/svg/bubble-hran-blue.svg'); }  
.topslideitem img { width: 105px; height: 105px; margin: 0 auto 1em auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.topslideitem span { display: block; padding-bottom: 1em; }
.topslideitem span:last-child { color: #002664; font-size: 110%; }
.topslideitem a:hover span:last-child { color: #009fda; }

.slider div { background-repeat: no-repeat; background-position: top; padding-top: 340px; display: flexbox; }
.slider .title { color: #002664; font-size: 130%; font-weight: 700; }
.slider .megabuble { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; text-align: center; font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 150%; max-width: 504px; min-height: 222px; color: #fff; padding: 1em 1.5em; margin: 1em auto 0 auto; background: url('/images/kariera/megabuble.svg'); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%; }

.tophighlightstripe { background: #002664; }
.tophighlightstripe.top140 { margin-top: 140px; }
.tophighlightstripe .inbox { max-width: 60em !important; padding: 4em; }
.tophighlightstripe p { color: #009fda; font-weight: 700; font-size: 120%; }
.tophighlightstripe p.grtitle { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 200%; color: #fff; padding-bottom: 0.6em; }
.tophighlightstripe p.icon { margin-top: -200px; }
.tophighlightstripe p.title { font-size: 180%; }
.tophighlightstripe p.subtitle { color: #fff; padding-top: 1em; }

.mainadd .icon span { display: inline-block; width: 170px; height: 170px; margin-bottom: 1em; border-radius: 50%; background: #f8f8f8; }

.icon { position: relative; z-index: 1; }
  
.numboxes { margin-top: -3em; position: relative; z-index: 10; color: #333f4d; }
.numboxes span { color: #333f4d; text-decoration: none; font-weight: 700; font-size: 110%; }
.numboxes .box { display: block; margin-bottom: 2em; }
.numboxes .box .num { display: block; width: 85px; height: 100px; margin: 0 auto 1em auto; }
.numboxes .box .num1 { background: url('/images/kariera/num1.gif') center top no-repeat; }
.numboxes .box .num2 { background: url('/images/kariera/num2.gif') center top no-repeat; }
.numboxes .box .num3 { background: url('/images/kariera/num3.gif') center top no-repeat; }
.numboxes a { font-family: 'Roboto Slab', serif; font-weight: 300; color: #ff5801; }

.jobitems { margin: 1em 0; }
.jobitems .item { background: #e3e7eb; margin-bottom: 5px; font-size: 120%; font-weight: 700; }
.jobitems .item a { padding: 1em; display: block; text-decoration: none; background: url('/images/kariera/smallarrblue.png') right no-repeat }
.jobitems span { display: block; }
.jobitems .name { color: #009fd9; }
.jobitems .ilu { margin: 0.6em 0 0.3em 0; }
.jobitems .location { color: #333f4d; }

.faqpanel {  }
.faq-line { padding: 1em; margin-bottom: 2px; background: #e3e7eb; text-align: left; }
.faqpanel h2 { padding-top: 0; }

.faq-question { padding: 1em; }
.faq-question a { color: #009ED9; text-decoration: none; display: block; font-size: 120%; font-weight: 700; padding: 0 50px 0 1em; background: url('/images/kariera/arr-down.png') right no-repeat; }
.faq-question a:hover { color: #000f57; }
.faq-question a.active { color: #000f57; background: url('/images/kariera/arr-up.png') right no-repeat; }
.faq-question a span { color: #778899; font-size: 90%; font-weight: 300; display: inline-block; padding-top: 10px; }
.faq-open { background: #f1f3f5; }
.faq-answer { padding: 0 50px 1em 1em; }
.faq-answer.collapse { display: none; }
.faq-answer p, .faq-answer ul { line-height: 1.25; padding: 13px 0 0 1em; color: #031425; }
.faq-answer ul li { padding: 0.25em; margin-left: 1em; }
.faq-answer p.solo { padding: 1em 0; }

.faqbox { background: rgba(255,255,255,0.9); padding: 1em; margin-right: -35px; margin-bottom: 5px; }
.faqbox h3 { padding-top: 1.5em; }
.faqbox .toh3ilu, .faqbox .withilu { display: block; margin: 0 auto; text-align: center; }
.faqbox .withilu { color: #009fda; padding-top: 0.5em; }
.paragraphs { color: #333f4d; }
.paragraphs p { padding: 1em 0.5em; line-height: 1.6; }
.paragraphs strong { font-weight: 700; }   
.faqbox ul, .faqbox ol { padding: 1em 1em 1em 2em; }
.faqbox ul li, .faqbox ol li { padding: 0.5em; color: #333f4d; font-weight: 700; }

.main p.labelpen { padding: 0; margin-top: -2em; }

footer { color: #7b8897; }
footer .col { border-bottom: 1px solid #7b8897; padding: 1em; }
  footer .col.socials li { display: inline-block; }
  footer .col.socials a { display: inline-block; width: 55px; height: 55px; margin: 0 3px; }
  footer .col.socials a.pp { display: inline-block; width: 100%; height: 100%; margin: 0 3px; }
  footer .col.socials .facebook a { background: url('/images/kariera/icon-facebook.png') center center no-repeat; }
  footer .col.socials .facebook a:hover { background: url('/images/kariera/icon-facebook-over.png') center center no-repeat; }
  footer .col.socials .twitter a { background: url('/images/kariera/icon-twitter.png') center center no-repeat; }
  footer .col.socials .twitter a:hover { background: url('/images/kariera/icon-twitter-over.png') center center no-repeat; }
  footer .col.socials .youtube a { background: url('/images/kariera/icon-youtube.png') center center no-repeat; }
  footer .col.socials .youtube a:hover { background: url('/images/kariera/icon-youtube-over.png') center center no-repeat; }
  footer .col.socials .instagram a { background: url('/images/kariera/icon-instagram.png') center center no-repeat; }
  footer .col.socials .instagram a:hover { background: url('/images/kariera/icon-instagram-over.png') center center no-repeat; }
footer .copyright { padding: 1em; }
footer .title { color: #fff; }
footer ul { padding: 1em 0 0 0; }
footer li { list-style-type: none; }
footer a { color: #7b8897; text-decoration: none; }
footer a:hover { color: #fff; }

.reset { display: block; overflow: hidden; height: 1px; clear: both; }
.button { display: inline-block; padding: 0.9em 3em; font-size: 100%; font-weight: 700; background: #009fd9; color: #fff; cursor: pointer; text-decoration: none; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.button.x2 { font-size: 120%; }
.button.x3 { font-size: 130%; }
.button.x4 { font-size: 140%; }
.button.x5 { font-size: 150%; }
.fullcolorbg { background: #fff; }
.center { text-align: center !important; }
img { border: none; max-width: 100%; }

.button.blue { background: #009fd9; }
.button.blue:hover { background: #0083b3; }
.button.darkblue { background: #002664; }
.button.darkblue:hover { background: #00124B; }
.button.orange { background: #ff5801; }
.button.orange:hover { background: #E64401; }
.button.green { background: #84bf02; }
.button.green:hover { background: #579202; }
.button.gray { background: #778899; }
.button.gray:hover { background: #68798A; }

.button.blueover { background: transparent; border: 1px solid #009fd9; color: #009fd9; }
.button.darkblueover { background: transparent; border: 1px solid #002664; color: #002664; }
.button.orangeover { background: transparent; border: 1px solid #ff5801; color: #ff5801; }
.button.greenover { background: transparent; border: 1px solid #84bf02; color: #84bf02; }
.button.grayover { background: transparent; border: 1px solid #778899; color: #778899; }

.button.green.bMarks {position: relative; padding: 0.7em; margin: 0.6em 0.1em;}

form { padding: 2em 0 0 0; text-align: left; }
form .row { padding-bottom: 1em; }
form div.cell { display: block; text-align: left; padding: 0.5em 0.625em; }
form div.error { color: #ff5801; }
form div.cell:last-child { display: none; }
form .row.error div.cell:last-child { display: block; }

input[type=text], input[type=email], textarea { background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #3e3e3e; border:solid 1px #dbdbdb;  box-sizing:border-box;  clear:both;  cursor:pointer;  display:block;  float:left;  font-family:inherit;  min-height:44px; outline:none;  padding-left:18px;  padding-right:35px; margin-bottom: 1em; position:relative;  text-align:left !important; margin-right: 1em; width: 93%; -webkit-transition:all 0.2s ease-in-out;  transition:all 0.2s ease-in-out; }
input[type=checkbox] { /*width: 25px; height: 25px;*/ }
input[type=submit] { display: inline-block; border: 0; padding: 0.7em 3em; font-size: 100%; font-weight: 400; background: #84bf02; color: #fff; cursor: pointer; text-decoration: none; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; }
input[type=submit]:hover { background: #579202; }
textarea { padding: 1em;  }

form a { color: #ff5801; }

.nice-select { width: 93% !important; margin-right: 1em; margin-bottom: 1em; } 

.formreset { display: block; overflow: hidden; height: 1px; clear: both; }

/* nice select */
.nice-select{ -webkit-tap-highlight-color:transparent;  background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #3e3e3e; border:solid 1px #dbdbdb;  box-sizing:border-box;  clear:both;  cursor:pointer;  display:block;  float:left;  font-family:inherit;  min-height:44px;  line-height:42px;  outline:none;  padding-left:18px;  padding-right:35px;  position:relative;  text-align:left !important; -webkit-transition:all 0.2s ease-in-out;  transition:all 0.2s ease-in-out;  -webkit-user-select:none;     -moz-user-select:none; -ms-user-select:none; user-select:none;  white-space:nowrap;  width:auto; }
.nice-select:hover{border-color:#BDBDBD; }
.nice-select:active,.nice-select.open,.nice-select:focus{border-color:#dbdbdb; }
.nice-select:after{border-bottom:2px solid #dbdbdb; border-right:2px solid #dbdbdb;    content:''; display:block; height:10px; margin-top:-8px; pointer-events:none; position:absolute; right:12px; top:50%; -webkit-transform-origin:66% 66%; -ms-transform-origin:66% 66%; transform-origin:66% 66%; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:all 0.15s ease-in-out;    transition:all 0.15s ease-in-out;    width:10px; }
.nice-select.open:after{-webkit-transform:rotate(-135deg); -ms-transform:rotate(-135deg);  transform:rotate(-135deg); }
.nice-select.open .list{opacity:1; pointer-events:auto; -webkit-transform:scale(1) translateY(0); -ms-transform:scale(1) translateY(0); transform:scale(1) translateY(0); }
.nice-select.disabled{border-color:#dbdbdb;    color:#999;    pointer-events:none; }
.nice-select.disabled:after{border-color:#dbdbdb; }
.nice-select.wide{ width:100%; }
.nice-select.wide .list{left:0 !important; right:0 !important; }
.nice-select.right{float:right; }
.nice-select.right .list{left:auto; right:0; }
.nice-select.small{font-size:12px; height:36px; line-height:34px; }
.nice-select.small:after{height:4px; width:4px; }
.nice-select.small .option{line-height:34px; min-height:34px; }
.nice-select .list{background:#fff; width: 100%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #3e3e3e; box-shadow:0 0 0 1px rgba(68,68,68,0.11); box-sizing:border-box; margin-top:1px; opacity:0; overflow:hidden; padding:0; pointer-events:none; position:absolute; top:100%; left:0; -webkit-transform-origin:50% 0; -ms-transform-origin:50% 0; transform-origin:50% 0; -webkit-transform:scale(0.75) translateY(-21px); -ms-transform:scale(0.75) translateY(-21px); transform:scale(0.75) translateY(-21px); -webkit-transition:all 0.2s cubic-bezier(0.5,0,0,1.25),opacity 0.15s ease-out; transition:all 0.2s cubic-bezier(0.5,0,0,1.25),opacity 0.15s ease-out; z-index:9; }
.nice-select .list:hover .option:not(:hover){background:transparent !important; }
.nice-select .option{ background:#fff; cursor:pointer; font-weight:400; font-size: 85%; line-height:32px; list-style:none; min-height:32px; outline:none; padding-left:18px; padding-right:29px; text-align:left; -webkit-transition:all 0.2s; transition:all 0.2s; }
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background:#f6f6f6; }
.nice-select .option.selected{ font-weight:bold; }
.nice-select .option.disabled{background:transparent; color:#999; cursor:default; }
.no-csspointerevents .nice-select .list{display:none; }
.no-csspointerevents .nice-select.open .list{display:block; }
.nice-select .current { font-size: 85%; } 



/* ZARADIT */

/* icons in bubble */
.bubble {display: flex; flex-direction: column; height: 100%;}
.ilu img {margin: auto; width: 95px; height: 95px;}
div.ilu { display: inline-block; width: 170px; height: 170px; margin-bottom: 1em; border-radius: 50%; background: #f8f8f8; }

/* zaci ss sou img v bubline */
.imgcent { background-repeat: no-repeat; background-position-x: 50%; background-position-y: 50%;}



/* RESPONS */
@media screen and (min-width:35em){
   
  .slider .megabuble { font-size: 180%; padding: 1em 2.5em;  }
  
}

@media screen and (min-width:50em){
   
  .header { padding: 2em 1em; }
  .header .logo { margin: 0; width: 199px; height: 42px; background-size: 199px 42px;  }
  .header ul { background: #fff; }
  .header li { float: left; }
  .header li a { padding: 0.25em 1em; color: #009fd9; border-bottom: none; border-left: 1px solid #009fd9; text-transform: none; }
  .header li:first-child a { border-left: none ; }
  .header li a:hover, .header .menu-btn:hover{ background: #fff; color: #000f57; }
  .header .menu { clear: none; float: right; max-height: none; }
  .header .menu-icon { display: none; } 

  .submenu li { display: inline-block; }
  .submenu a { display: inline-block; border: none; border-left: 1px solid #009fd9; }
  .submenu li:first-child a { border: none; }

  .faqbox .toh3ilu, .faqbox .withilu { display: inline-block; vertical-align: middle; margin: 0; }
  .faqbox .withilu { padding: 0; padding-left: 0.5em; }
  .paragraphs p { display: inline-block; vertical-align: top; width: 48.5%; padding: 1em 1em 1em 0; }
  
}

@media screen and (min-width:70em){
  
  .inbox { max-width: 70em; margin: 0 auto; }
  
  #stripe .claim { bottom: 160px; padding: 0; }
  
  #toptextbanner { background: transparent; margin-top: -2.2em; padding-bottom: 3em; }

  .main.bg2a { background-image: url('/images/kariera/bg2.jpg'); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 80px; }
  .main.bg2b { background-image: url('/images/kariera/bg2b.jpg'); background-position: center top; background-repeat: no-repeat; padding: 80px 0 50px 0; }
  .main.bg2bnew { background-image: none; background-position: center top; background-repeat: no-repeat; padding: 80px 0 50px 0; }
  .main.bg3 { background-image: url('/images/kariera/bg3.jpg'); background-position: center -10px; background-repeat: no-repeat; }
  .main.bg4 { background-image: url('/images/kariera/bg4.jpg'); background-position: center -10px; background-repeat: no-repeat; padding-bottom: 180px; }
  .main.bg9 { background-image: url('/images/kariera/bg9.jpg'); background-position: center 100px; background-repeat: no-repeat; }
  .main.bgjobs { background-image: url('/images/kariera/bgjobs.jpg'); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 130px; }
  
  .mainadd { background-image: url('/images/kariera/bgstart.png'); background-position: center bottom; background-repeat: no-repeat; }
  .mainadd.v2 { background-image: url('/images/kariera/bg4b.jpg'); background-position: center top; background-repeat: no-repeat; padding-top: 20px; }
  
  .main.v8 { background-image: url('/images/kariera/bg8.jpg'); background-position: center top; background-repeat: no-repeat; padding-top: 20px; }

  .tophighlightstripe { background-image: url('/images/kariera/bg4ab.jpg'); background-position: center bottom; background-repeat: no-repeat; }

  .faqpanel { background-image: url('/images/kariera/bg4bc.jpg'); background-position: center bottom; background-repeat: no-repeat; }

  .faqpanel.noBgImage{ background-image: none; }

  .main.v4cd { background-image: url('/images/kariera/bg4cd.jpg'); background-position: center bottom; background-repeat: no-repeat; padding: 70px 0 35px 0; }

  .nobgunder { display: inline-block; background: #fff; padding: 0 4em; }
  .nobgunder2 { display: inline-block; background: #fff; padding: 1em 4em; }

  .guidebox { max-width: 1920px; margin: 0 auto; }
  .guidebox .box { display: inline-block; vertical-align: top; width: 33%; }
  .guidebox .box.nabor { display: inline-block; vertical-align: top; width: 24%; }
  .halfbox { height: 298px; overflow: hidden; }
  .halfbox:first-child { margin-bottom: 4px; }
  .quarterbox { width: 49.3%; display: inline-block; }
  .quarterbox:first-child { float: left; }
  .quarterbox:last-child { float: right; }
  .banner { height: 600px; }
  .banner.nabor { height: 400px; }
  .halfbox .banner { height: 298px; }
  .banner .inner { padding: 1.5em; }

  .rounded { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

  .grguide .item { display: inline-block; vertical-align: top; width: 30%; max-width: 375px; }
  .grguide .item:first-child { float: left; }
  .grguide .item:last-child { float: right; }

  .items.v2 .item { width: 33%; }

  .evenodlist { display: flexbox; }
  .evenodlist .texts { padding: 0 0 0 2em; width: 35%; }
  .evenodlist .item { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; text-align: left; margin-bottom: 2em; }
  .evenodlist .item:nth-child(2) .ilu2 { order: 2; }
  .evenodlist .item:nth-child(2) .texts { order: 1; padding: 0 2em 0 0; }
  .evenodlist .item:nth-child(4) .ilu2 { order: 2; }
  .evenodlist .item:nth-child(4) .texts { order: 1; padding: 0 2em 0 0; }

  .solobanner { padding: 1em 0 2em 0; }
    .combibanner { height: 400px; text-align: right; }
    .combibanner.v2 { text-align: left; }
    .combibanner .ingr { position: absolute; right: 0; bottom: 0; height: 400px; width: 500px; background: url('/images/kariera/bannery/praxe.png') center bottom no-repeat; background-size: 468px 388px; z-index: 5; }
    .combibanner .content { position: absolute; left: 60px; bottom: 60px; z-index: 10; }
    .combibanner.v2 .content { left: 560px; bottom: 10px; }
    .combibanner.v3 .content { left: 0; bottom: 10px; }
    .content .contentab { display: inline-block; }
    .content .contentext { padding: 2.5em; text-align: left; max-width: 550px; }  

    /* combibanner2 pro odborný vycvik a praxe*/
    .combibanner2 { height: 400px; text-align: right; }
    .combibanner2 .content { position: absolute; left: 60px; bottom: 60px; z-index: 10; }
    .combibanner2.v2 .content { left: 560px; bottom: 10px; }
    .combibanner2.v3 .content { left: 0; bottom: 10px; }
    .content .contentab { display: inline-block; }
    .content .contentext { padding: 2.5em; text-align: left; max-width: 550px; }  

    /* uprava solobaner new */
    .combibanner .contentNew { position: absolute; right: 60px; bottom: 100px; z-index: 10; }
    .combibanner.v2 .contentNew { left: 560px; bottom: 10px; }
    .combibanner.v3 .contentNew { left: 0; bottom: 10px; }
    .contentNew .contentab { display: inline-block; }
    .contentNew .contentext { padding: 2.5em; text-align: left; max-width: 550px; }  
    
  /*.highlightstripe.v1 { background-image: url('/images/kariera/bannery/hgstripev1.jpg'); background-position: center bottom; background-repeat: no-repeat; }*/
  
  .numboxes { background: url('/images/kariera/bgboxes.gif') center top no-repeat; }
  .numboxes .box { display: inline-block; vertical-align: top; width: 33%; padding: 0 5%; }
  
  .jobitems { padding-bottom: 3em; }
  .jobitems span { display: inline-block; vertical-align: middle; width: 33%; }
  .jobitems .name { text-align: left; }
  .jobitems .ilu { margin: -0.5em 0 -0.9em 0; }
  .jobitems .location { text-align: right; padding-right: 1.5em; }  
  
  .main p.labelpen { position: absolute; top: -20px; left: 0; }

  .slider { margin: 0 50px; }
  .slider div { background-repeat: no-repeat; background-position: left; padding: 1em 80px 0 450px; text-align: left; }
  .slider .title { display: block; padding-left: 80px; }
  .slider .megabuble {  }

  form { }
  form strong { color: #fff; } 
  form .row { padding-bottom: 0; }
  form div.cell { display: inline-block; vertical-align: middle; width: 50%; }
  form div.cell:first-child { width: 22%; text-align: right; }
  form div.cell:last-child { width: 25%; display: none; }
  form .row.error div.cell:last-child { display: inline-block; padding-top: 0.625em; }
  input[type=text], input[type=email], .nice-select, textarea { width: 90% !important; margin-bottom: 0; }   
  
  footer .col { border: none; display: inline-block; vertical-align: top; width: 33%; text-align: left; padding-left: 0; }
  footer .col:first-child { }
  footer .col p, footer .col ul { display: block; }
  footer .col.socials li { display: inline-block; }
  footer .col.socials .facebook a { margin-left: 0; }
  
  footer .copyright { border-top: 1px solid #7b8897; }
  
} 

@media screen and (min-width:100em){
 
  .quarterbox { width: 49.5%; }

}


/* DAN test Kariera NEW */
    .tooltip {  
           
          position: relative;
                    
        }

               
        .tooltip .tooltiptext {
          visibility: hidden;
          width: 230px;
          max-width: 230px;
          background-color: #fff;
          color: #009fda;
          text-align: center;
          border: 1px solid #009fda;
          border-radius: 3px;
          padding: 0;
          position: absolute;
          z-index: 1;
          left: 50%;
          margin-left: -120px;
          opacity: 0;
          transition: opacity 0.6s;
        }

        .tooltip .tooltiptext h2 {
         background: #009fda;
         color: #fff;
         margin: 0;
         padding: 0.3em ;
         font-size: 120%;
        }

        .tooltip .tooltiptext p {
         font-size: 16px;
         padding: 0.5em;
        }
          
        .tooltip:hover .tooltiptext {
          visibility: visible;
          opacity: 1;
          z-index: 4;
        }

/* banner horni na hp */
#stripe.hp2 {
    background: url(/images/kariera/stripe-hp3.jpg) center center no-repeat;
}

#stripe.hp3 {
    background: url(/images/kariera/nabor_strojvedouci.jpg) center center no-repeat;
}


/* banner horni strojvedouci*/
#stripe.strojvedouci {
    background: #fff;
    margin-bottom: 3em;
}

@media screen and (min-width: 70em)
#stripe.strojvedouci .claim {
    bottom: 160px;
    padding: 0;
    right: 60px;
}

#stripe.strojvedouci .claim {
    position: absolute;
    /*bottom: 0;*/
    /*right: 60px;*/
    padding-left: 30px;
    text-align: left;
}

/* pozice pozadi vnitrniho boxu modre sikme*/
/*
.banner .inner .inninerNew {
    background: url(/images/kariera/bannery/pozice-pozadi.png) no-repeat;
    padding: 1em 1.5em 1.5em 1.5em;
    color: #fff;
}
.banner .inner .inninerNew h3{
    color: #fff;
}
.banner .inner .inninerNew p.akalink {
    color: #fff !important;
}

*/

/* spodni banner new */

.contentNew .contentext {
    background: rgba(255,255,255,0.9);
    padding: 1em 1.5em 1.5em 1.5em;
}

.contentNew .contentext h4 {
    color: #009fda;
    font-size: 200%;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

.contentNew .contentext p {
    padding: 1.5em 0 0 0;
}

.items .item.box {
    margin: 0;
}
.items .item.box p {
    color: #009fd9;
    border-radius: 4px;
    /*background-image: linear-gradient(rgba(0,159,217,0.05), transparent);*/
    font-weight: 400;
    border: 1px solid #002664;
    padding: 1em;
}

@media screen and (max-width: 600px){
    .items .item.box{
    width: 100%;
    padding: 0;	
	}
}


/****************/
/* tooltip uprava pozadi */

.tooltip .tooltiptext {
    visibility: hidden;
    width: 230px;
    max-width: 230px;
    background-color: #009fda;
    color: #fff;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 0.2em;
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -120px;
    opacity: 0;
    transition: opacity 0.7s;
    font-weight: 400;
}

.inbox.dayInWork {
    padding-bottom: 2.5em;
}
.inbox.virtual {
    padding-bottom: 3em;
}
.inbox.virtual a{
    text-decoration: none;
}
.inbox.virtual.pohled {
    margin-top: -65px;
}
.kombinator.virtual {
    background: url(/images/kariera/bannery/banner4.jpg) center center no-repeat;
    min-height: 400px;
}


.kombinator.virtual {
    position: relative;
    padding-left: 30px;
    margin: 0 auto;
}

.kombinator.virtual .obsah {
    position: absolute;
    top: 30px;
    max-width: 300px;
}
.kombinator.virtual .obsah .obsahtext {
    background: rgba(255,255,255,0.9);
    padding: 1.5em;
}

.kombinator.virtual .obsah .obsahtext img {
    border: none;
    max-width: 100%;
    display: flow-root;
    padding-bottom: 1em;
}

.kombinator.virtual .obsah .obsahtext p{
    padding: 0;
}

.inbox.pohled {
    padding-bottom: 3em;
}
.inbox.pohled a{
    text-decoration: none;
}

.kombinator.pohled {
    background: url(/images/kariera/bannery/zVlaku.jpg) center center no-repeat;
    min-height: 280px;
}


.kombinator.pohled {
    position: relative;
    padding-left: 30px;
    margin: 0 auto;
}

.kombinator.pohled .obsah {
    position: absolute;
    top: 160px;
    max-width: 300px;
}
.kombinator.pohled .obsah .obsahtext {
    background: rgba(255,255,255,0.9);
    padding: 1.5em;
}

.kombinator.pohled .obsah .obsahtext img {
    border: none;
    max-width: 100%;
    display: flow-root;
    padding-bottom: 1em;
}

.kombinator.pohled .obsah .obsahtext p{
    padding: 0;
}

/* baner pro žáky a učitele new */
#stripe.zaci.new {
    background: url(/images/kariera/stripe-zaci5.jpg) center center no-repeat;
}

/* baner pro vlak pracovnich prilezitosti */
#stripe.vlakPri.new {
    background: url(/images/kariera/stripe-vlakPrac2.jpg) center center no-repeat;
}

/* baner pro naborovy prispevek */
#stripe.naborPri.new {
    background: url(/images/kariera/nabor_strojvedouci.jpg) center center no-repeat;
}

.grguideNew {
    padding: 1em 0;
}

.grguideNew .itemNew {
    /*padding: 0 0 2em 0;*/
    position: relative;
}

.grguideNew .itemNew a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    cursor: pointer;
    text-decoration: none;
}

/*.grguideNew .itemNew .title{
    transition: 1s ease;
}*/

.grguideNew .itemNew:hover .title{
    text-decoration: underline;
}

.grguideNew .itemNew .ilu {
    height: 250px;
    background-repeat: no-repeat;
    background-position: center top;
}

.grguideNew .itemNew .icon {
    display: inline-block;
    width: 170px;
    height: 170px;
    margin-top: -135px;
    border-radius: 50%;
    background-color: #f8f8f8;
}

.grguideNew .itemNew .title {
    color: #009fd9;
    font-weight: 700;
    font-size: 140%;
    padding-top: 0.5em;
}

.grguideNew .itemNew span {
    display: block;
}
/* kariera studenti zneviditelní fragment*/
.displayMobil {
  display: visible;
  }

.displayPC {
  display: none;
  }

@media screen and (min-width: 70em){
    .grguideNew {
        padding: 1em 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .grguideNew .itemNew {
        display: inline-block;
        vertical-align: top;
        width: 23%;
        max-width: 375px;
    }

    /* kariera studenti zneviditelní fragment*/
    .displayMobil {
    display: none;
    }
    .displayPC {
    display: block;
    }
}

.inbox.cedes  {
    padding: 1em 1em 2em;
    margin-bottom: 1em;
}
.inbox.cedes p {
    margin-bottom: 1em;
}
.inbox.cedes a {
    margin-bottom: 1em;
}
.inbox.cedes div {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 1em 0;
}
.inbox.cedes div a {
    margin-bottom: 1em;
}

#stripe.zaci.new .claim {

}
#stripe.zaci.new .claim a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    cursor: pointer;
}

#stripe.vlakPri.new .claim {

}
/* #stripe.vlakPri.new .claim a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    cursor: pointer;
} */

/* main news */
.news {background-color: white; border-bottom: 1px solid lightgray; position: relative;}
.news div {padding: 2rem;}
.news a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10;}
.news:hover p{text-decoration: underline;}
.news span{font-size: 75%;}
.news h3 {color: #009FDA; padding: 0.5rem 0;}
.news img { display: none; }
.news p { text-align: justify; }

form.new{ 
    padding: 0;
    text-align: left;
}
form.new div{
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
}

form.new div div{
    width: 100%;
}

@media screen and (min-width: 70em){
    form.new div div{
        width: 48%;
    }
}    

form.new input[type=text], form.new input[type=email], form.new .nice-select, form.new textarea {
    border-radius: 3px;
    color: #3e3e3e;
    border: solid 1px #dbdbdb;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    min-height: 44px;
    outline: none;
    width: 100% !important;
    margin-bottom: 1em;
    margin-right: 0em;
    text-align: left !important;
} 

form.new textarea {
    height: 85%;
}

form.new input[type=submit] {
    display: inline-block;
    border: 0;
    padding: 0.7em 3em;
    font-size: 100%;
    font-weight: 400;
    background: #84bf02;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    margin: 1.5em 0 1em;
}
@media screen and (min-width: 70em){
    form.new input[type=submit] {
       margin: 1em 0 1.5em;
    }
} 


/* seznam aktuality na stránce pro studenty */

.aktualityList {
    padding: 1em 0 2em;
    max-width: 670px;
    margin: 0 auto;
    text-align: left;
}
.aktualityList .main{
    border-bottom: 1px solid lightgray;
    padding-bottom: 0.5em; 
}
.aktualityList .main:last-child {
    border-bottom: none;
}
.aktualityList p {
    padding: 0;
}
.aktualityList .button.green {
    margin: 2.3em 0 1em;
}
.aktualityList .more {
    text-decoration: none;
    color: #009fd9;
    font-size: 110%;
}
.aktualityList .main .inbox span {
    font-size: 75%;
    color: #000;
    display: block;
    padding-top: 1em;
}
.aktualityList .main .inbox h3 {
    /* padding-top: 0.5em; */
}
.aktualityList .main .inbox h3 a {
    text-decoration: none;
    color: #009fd9;
}
.aktualityList .main .inbox h3 a:hover {
    text-decoration: underline;
}
 
/* stránka vybrané aktuality */

.aktuality {
  padding-bottom: 2em; 
}
.aktuality p{
  margin: 0 auto;
  max-width: 62em;
  text-align: justify;
  padding-bottom: 1.5em;
}
.aktuality.galerie p{
  margin: 0 auto;
  max-width: 62em;
  text-align: center;
  padding-bottom: 1.5em;
}

.aktuality .gallery {
  padding: 0.8em 0 0.5em;
}


.aktuality .gallery a {
  padding: 0.5em 0.6em;
  display: inline-block;
}
/*
.aktuality .gallery a {
    padding: 0.5em;
    display: inline-block;
    border: 1px solid lightgray;
    margin: 0.2em;
    background-color: black;
} */

/* poslední aktualita pod bannerem */
.inbox.lastNews h3 {
  display: inline-block;
}
.inbox.lastNews p {
  display: inline-block;
}

/* vlakvedouci */
.vlakvedouci {
    text-align:left;
    padding-bottom: 1em;
}

.vlakvedouci ul li {
    line-height: 2;
    padding-left: 30px;
    list-style: none;
    background: url(/images/kariera/svg/chMark.svg) left 4px no-repeat !important;
    padding-bottom: 1em;
}


/* odborný výcvik a praxe */
.boxVycvik  {
    padding: 1em 0 3em;
    display: inline-block;
    justify-content: space-evenly;
}
.boxVycvik .boxes {
    width: 100%;
    padding: 1em;
}
.boxVycvik .boxes h3{
    padding-bottom: 0.5em;
}
.boxVycvik .boxes ul{
    text-align: left;
}
.boxVycvik .boxes ul li {
    line-height: 2;
    padding-left: 17px;
    list-style: none;
    background: url(https://www.cd.cz/images/cdosn/arrow/blue-right.svg) left 7px no-repeat !important;
}
.boxVycvik .boxes ul ul{
    padding-left: 1.2em;
}
.boxVycvik .boxes ul.none li {
    background-image: none !important;
    list-style: circle;
    margin-left: 30px;
    padding-left: 0px;
}


@media screen and (min-width:50em){
    .boxVycvik  {
        padding: 1em 0 5em;
        display: flex;
        justify-content: space-evenly;
    }
    .boxVycvik .boxes {
        width: 40%;
        padding: 1.6em;
        box-shadow: 0px 1px 12px #42555d40;
        border-radius: 5px;
    }
    .boxVycvik .boxes  h2 {
        color: #fff;
        padding: 0.8em 0;
        background-color: #009ED9;
        border-radius: 5px;
    }

}

/* roletky na studenti */

#togle1 p, #togle2 p {
  text-align:center;
}

.faq-line.students {
    padding: 1em 0 1.4em;
    /* margin-bottom: 2px; */
    background: #fff;
}

.faq-line.students p{
    padding: 0;
}

.faq-line.students .faq-question {
    padding: 0;
}

.faq-line.students .faq-question a{
    padding: 0;
    background: none;
}

.faq-line.students .faq-question a.active {
    background: none;
}

.faq-line.students .faq-answer {
    box-shadow: 0px 7px 5px lightgrey;
    padding: 0.8em 0.6em 0.1em;
    text-align: center;
}

.faq-line.students .faq-answer p{
    line-height: 1.30; 
    padding: 0;
    color: #031425;
}



/* kontakty pro studenty */    
    .contactStudents {
        text-align: left;
        margin: 0 auto; 
        padding-bottom: 2em;
    }
    .contactStudents .boxes {
        display: block;
        justify-content: center; 
        margin-bottom: 1em;
        padding: 0 !important;
    }
    .contactStudents .boxes .box1{
        width: 100%; 
        padding: 1em; 
        background-color: #009ED9; 
        color: #fff; 
        text-align: center; 
        display: grid;
        align-items: center;
        border-radius: 5px;
    }
    .contactStudents .boxes .box1 span{
        font-size: 80%;
    }
    .contactStudents .boxes .box2{
        width: 100%; 
        padding: 1em; 
        border: 1px solid #009ED9; 
        border-radius: 5px;
    }
    .contactStudents .boxes .box2 span{
        display: block; 
        padding-bottom: 0.5em;
    }
    .contactStudents .boxes .box2 span:last-child{
        padding-bottom: 0;
    }

    @media screen and (min-width:50em){
    .faq-line.students {
         padding: 1em 0 0;
    }
    .faq-line.students .faq-answer {
         /* padding: 0; */
         text-align: left;
    }
    .contactStudents .boxes {
         display: flex;
    }
    .contactStudents .boxes .box1{
        width: 30%; 
        
    }
    .contactStudents .boxes .box2{
        width: 30%; 
        
    }
}



/* TEST záložky str studenti new */
.cards {
  position:relative;
  background: #fff;
  }
.card {
  background: #fff;
  display: none;
  }
.actives{
  z-index:100; 
  background: #f8f8f8;
}

.active{
  z-index:100; 
  background: #f8f8f8;
  display: block;
  padding: 0 0.5em;
}


/* fotogalerie stránka seznam */
.fotoGalerie .box {
  display: inline-block;
  padding: 1em;
}
.fotoGalerie .box a{
  text-decoration: none;
  color: #009fd9;
} 
.fotoGalerie .box span{
  display: block;
  padding-bottom: 0.5em;
} 
.fotoGalerie .box img{
  max-width: 100%;
} 

    @media screen and (min-width:50em){
   .fotoGalerie {
   display: flex;
   flex-wrap: wrap;
   padding-bottom: 1em;
   }
   .fotoGalerie .box {
    display: flex;
    background-color: #009fd9;
    margin: 0.4em;
    padding: 0;
   }
   .fotoGalerie .box * {
   display: flex;
   flex-direction:column;
   justify-content:space-between;
   }

   .fotoGalerie .box span{
    max-width: 200px;
    color: #ffffff;
    padding: 0.8em 0.2em;
    margin: 0 auto;
    font-size: smaller;
    } 
    .fotoGalerie .box img{
    max-height: 140px;
    } 

}