@font-face {
src: url('/themes/gymnaziumsusice/assets/fonts/Gill-Sans.TTF')
}

@font-face {
font-family: Bodoni;
src: url('/themes/gymnaziumsusice/assets/fonts/bodoni-bd.ttf')
}

html,
body {
    height: 100%;
    background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);
    background-color: rgba(153,0,0,1);
    background-repeat: repeat;
    color: #333;
    font-family: 'Roboto Condensed', sans-serif;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    overflow-x: hidden;
}
footer#footer {
    padding: 1rem;
    bottom: 0;
    position: relative;
    background-color: black;
    color: white;
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
    height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}
.uvodni {width: 100%;position: relative;left: 0px;bottom: 45px;}

video {width: 100%;margin: -2% 0% 0% 0%;}

.rychle-odkazy {
    /*width: 40%;*/
    /*margin: 0% 30%;*/
    position: relative;
    bottom: 50px;
    z-index:1;
}

.prostredni {
    margin: 0% 5%;
}

.bakalari {
background-image: url(/themes/gymnaziumsusice/assets/images/bakalari_nove_cernobile.png);
background-size: 100%;
width: 80px;
height: 80px;
float: left;
margin: 0% 3%;
}

.gmail {
background-image: url(/themes/gymnaziumsusice/assets/images/gmail-cernobile.png);
background-size: 100%;
width: 80px;
height: 80px;
float: left;
margin: 0% 3%;
}

.prijimaci-rizeni {
background-image: url(/themes/gymnaziumsusice/assets/images/prijimaci-rizeni_nove_cernobile.png);
background-size: 100%;
width: 80px;
height: 80px;
float: left;
margin: 0% 3%;
}

.kontakt {
background-image: url(/themes/gymnaziumsusice/assets/images/kontakt_novy_cernobily.png);
background-size: 100%;
width: 80px;
height: 80px;
float: left;
margin: 0% 3%;
}

.classroom {
background-image: url(/storage/app/media/classroom-cernobile.png);
background-size: 100%;
width: 80px;
height: 80px;
float: left;
margin: 0% 3%;
}

.classroom:hover {
animation-name: classroom;
animation-duration: 1s;
background-image: url(/storage/app/media/classroom.png);
}
@keyframes classroom {
        0% {
    background-image: url(/storage/app/media/classroom-cernobile.png);       
  }      
  100% {
    background-image: url(/storage/app/media/classroom.png);   
  }
}

.bakalari:hover {
animation-name: bakalari;
animation-duration: 1s;
background-image: url(/themes/gymnaziumsusice/assets/images/bakalari_nove.png);
}
@keyframes bakalari {
        0% {
    background-image: url(/themes/gymnaziumsusice/assets/images/bakalari_nove_cernobile.png);       
  }      
  100% {
    background-image: url(/themes/gymnaziumsusice/assets/images/bakalari_nove.png);   
  }
}

.prijimaci-rizeni:hover {
animation-name: prijimaci-rizeni;
animation-duration: 1s;
background-image: url(/themes/gymnaziumsusice/assets/images/prijimaci-rizeni_nove.png);
}
@keyframes prijimaci-rizeni {
      0% {
    background-image: url(/themes/gymnaziumsusice/assets/images/prijimaci-rizeni_nove_cernobile.png);       
  }  
          
  100% {
    background-image: url(/themes/gymnaziumsusice/assets/images/prijimaci-rizeni_nove.png);   
  }
}

.kontakt:hover {
animation-name: kontakt;
animation-duration: 1s;
background-image: url(/themes/gymnaziumsusice/assets/images/kontakt_novy.png);
}
@keyframes kontakt {
       0% {
        background-image: url(/themes/gymnaziumsusice/assets/images/kontakt_novy_cernobily.png);    
  }        
  100% {
    background-image: url(/themes/gymnaziumsusice/assets/images/kontakt_novy.png);   
  }
}

.gmail:hover {
animation-name: gmail;
animation-duration: 1s;
background-image: url(/themes/gymnaziumsusice/assets/images/gmail.png);
}
@keyframes gmail {
      0% {
    background-image: url(/themes/gymnaziumsusice/assets/images/gmail-cernobile.png);       
  }        
  100% {
    background-image: url(/themes/gymnaziumsusice/assets/images/gmail.png);   
  }
}
.podtrzeni {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
background-color: #ffffff;
}
.has-sub:hover .podtrzeni {
background-color: rgb(255 255 255);
width:100%;
}
.active:hover .podtrzeni {
background-color: rgb(255 255 255);
width:100%;
}

.podtrzeni {
width: 0%;
height: 3px;
position: relative;
bottom: 10px;
z-index: 1;
}
div#kontakt {background-color: rgba(255,255,255,1);background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);background-repeat: repeat;padding: 2% 5%;}
.sponzori {
border-right: 2px dashed rgb(153,0,0);
}
#sponzori td {
padding: 0% 2%;
}

#sponzori {
margin-bottom: 5%;
}
@media screen and (max-width: 600px) {
    .col-md-2.partner, .col-md-3.partner {
    border-right: 0px dashed rgb(153,0,0);
     text-align: center;
}
    .row.odstavec {padding-top:0px;}
    .header {position:absolute;}
}

@media screen and (min-width: 700px) {
         .col-md-2.partner, .col-md-3.partner {
    border-right: 2px dashed rgb(153,0,0);
     text-align: center;
}
 .header {position:fixed;}
.row.odstavec {padding-top:50px;}
   }
   .logogs {
    width: 40px;
    height: 40px;
    background-image: url(/themes/gymnaziumsusice/assets/images/logo_gymnazium.png);
    background-size: 100%;
    background-repeat: no-repeat;
    float: left;
    margin: -10px;
    margin-right: 10px;
}
.facebook, .instagram  {
width: 40%;
padding: 2% 5%;
text-align: center;
}
.cld-main{
  width: 70%;
  padding-top: 2%;
  margin: 0% 15%;
  margin-bottom: 35px;
}

.cld-main a{
  color: #333;
  font-weight: bold;
}
  .cld-datetime{
    position: relative;
    width: 66%;
    min-width: 100px;
    max-width: 300px;
    margin: auto;
    margin-bottom: 30px;
    overflow: hidden;
  }
  .cld-datetime .today{
    position: relative;
    float: left;
    width: calc(100% - 40px);
    margin: auto;
    text-align: center;
    font-weight: bold;
    color: rgb(153,0,0);
  }
  .cld-nav{
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }
  .cld-nav:hover{
    cursor: pointer;
  }
  .cld-nav:hover svg{
      fill: #666;
  }
  .cld-rwd{
    float: left;
  }
  .cld-fwd{
    float: right;
  }
    .cld-nav svg:hover{

    }
#caleandar > div > ul.cld-days{
    text-align: left;
}
.cld-labels, .cld-days{
  padding-left: 0;
}
  .cld-label, .cld-day{
    display: inline-block;
    width: 14.28%;
    text-align: center;
    cursor: default;
  }
  .cld-day.today .cld-number{
    display: inline-block;
    height: 30px;
    width: 30px;
    /* border-radius: 50px; */
    background: #666;
    color: #fff;
  }
  .cld-day.disableDay{
    opacity: 0.5;
  }
  .cld-day.nextMonth, .cld-day.prevMonth{
    opacity: 0.33;
  }
    .cld-number{
      position: relative;
      margin: 5px;
      text-align: center;
      padding: 5px;
    }
      .cld-title{
        position: absolute;
        z-index: 5;
        display: none;
        top: 30px;
        left: 0;
        padding: 5px 10px;
        background: #fff;
        white-space: nowrap;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 12px;
        max-width: 300px;
      }
      .cld-number:hover .cld-title{
        display: block;
      }
      .cld-title::before{
        content: '';
        position: absolute;
        top: -7.5px; left: 7.5px;
        width: 0;
        height: 0;
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;

        border-bottom: 7.5px solid #ccc;
      }
      .cld-number.eventday{
        display: inline-block;
        height: 32px;
        width: 35px;
        /* border-radius: 50px; */
        border: 1px solid #999;
      }
      .cld-number.eventday:hover{
        cursor: pointer;
        background: #eee;
      }
      .today .cld-number.eventday:hover{
        background: #888;
      }
.svg-inline--fa.fa-w-14 {
    color: rgb(153,0,0);
}
.svg-inline--fa.fa-w-16 {
      color: rgb(153,0,0);
}
.fullscreen-bg.hidden-xs.hidden-sm {
    margin-bottom: -145px;
}
div#aktuality-kalendar {
text-align:center;width:100%;background:white;margin-bottom:50px;background-color: rgba(255,255,255,1);background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);background-repeat: repeat;padding: 2% 5%;
}
div#paticka {
text-align:center;width:100%;background:white;margin-top:50px;background-color: rgba(255,255,255,1);background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);background-repeat: repeat;padding: 2% 5%;
}
div#partneri {
background:white;margin-top:50px;background-color: rgba(255,255,255,1);background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);background-repeat: repeat;padding: 2% 5%;
}
div#footera {text-align:center;width:100%;background:black;margin-top:50px;overflow:hidden;color:white;line-height:35px;position: inherit;bottom: 0;}
div#stranka {
background:white;margin-top:50px;background-color: rgba(255,255,255,1);background-image: url(/themes/gymnaziumsusice/assets/images/web_pozadi.png);background-repeat: repeat;padding: 2% 5%;
}  
a.kontakt-odkaz {
    color: #333;
    border-bottom: 2px dashed rgb(153,0,0);
    text-decoration: none;
}
a.kontakt-odkaz:hover {
    color: rgba(153,0,0,1);
}
.header.ostatni {
    background-color: black;
    background-color: rgb(35,35,40,0.8);
}


nav.navbar.navbar-inverse.navbar-fixed-top.jn {
    background: rgba(35,35,40,0.8);
}

ul .odrazka {
    line-height: 30px;
}


ul > li {
    list-style-type: square;
    margin-left: 2em;
}

li > ul > li {
    list-style-type: disc;
    margin-left: 4em;
}


#post-list > li {
    list-style:none;
    margin-left: 0em;
}

#caleandar > div > ul.cld-labels > li {
     list-style:none;
     margin-left: 0em;
}

#caleandar > div > ul.cld-days > li {
    list-style:none;
    margin-left: 0em;
}

.odrazka {
    list-style-type: square;
    margin-left: 2em;
} 

.pododrazka {
    list-style-type: disc;
    margin-left: 4em;
}

 
.qrkod {
     width: 60%;  
     margin-top: 20%;
    }  
    
.paticka {
    text-align: center;
} 

a.nadpis-odkaz:hover {
    border-bottom: 2px dashed rgb(153,0,0);
    text-decoration: none;
    color: #333;
}
div#footerb {
    text-align: center;
    width:100%;
    background:black;
    margin-top:50px;
    overflow:hidden;
    color:white;
    line-height:35px;
    position: absolute;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0 0 0); /* Fallback color */
  background-color: rgb(0 0 0 / 81%); /* black w/ opacity */
  z-index:11111111;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #000;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.nazev.album {
      text-align: center;
    height: 60px;
    padding-top: 10px;
}

table.radek1 {
    background: #ececec;
  width: 100%;
}

table.radek1 strong {
 color: rgb(153,0,0);
}
@media(min-width:768px) {
.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

}
.container.gallery-container {
        background-color: #fff;
        color: #35373a;
        min-height: 100vh;
        padding: 30px 50px;
    }

    .gallery-container h1 {
        text-align: center;
        margin-top: 50px;
        font-family: 'Droid Sans', sans-serif;
        font-weight: bold;
    }

    .gallery-container p.page-description {
        text-align: center;
        margin: 25px auto;
        font-size: 18px;
        color: #999;
    }

    .tz-gallery {
        padding: 40px;
    }

    /* Override bootstrap column paddings */
    .tz-gallery .row > div {
        padding: 2px;
    }

    .tz-gallery .lightbox img {
        max-width: 100%;
        object-fit: contain;
  position: relative;
  height: 180px;
        border-radius: 0;
        padding: 3%;
    }

    .tz-gallery .lightbox:before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -13px;
        margin-left: -13px;
        opacity: 0;
        color: #fff;
        font-size: 26px;
        font-family: 'Glyphicons Halflings';
        content: '';
        pointer-events: none;
        z-index: 9000;
        transition: 0.4s;
        margin: 6%;
    }
    .uvnitrf {
    text-align: center;
    /* padding: 4px; */
}


    .tz-gallery .lightbox:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: rgb(166 35 37 / 44%);
        background-image: url(/themes/gymnaziumsusice/assets/images/logo_gymnazium.png);
        background-size: 120px 120px;
        background-repeat:no-repeat;
        background-position:center;
        content: '';
        transition: 0.4s;
    }

    .tz-gallery .lightbox:hover:after,
    .tz-gallery .lightbox:hover:before {
        opacity: 1;
    }

    .baguetteBox-button {
        background-color: transparent !important;
    }
    
    .fotky-akce {
        width: 96%;
        margin: 5% 2%;
    }
    
    .fotky-aktivity {
        width: 60%;
        margin: 0% 20%;
        margin-bottom: 5%;
    }
    .udalost {
    font-size: 15px;
    font-weight: bold;
}

#myInput {
  background-image: url('/themes/gymnaziumsusice/assets/images/searchicon.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 8px 20px 8px 40px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li {
  text-decoration: none;
  display: block
}
.container1{
    width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.col {
    flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        }

ol li {
    list-style-type: decimal;
    margin-left: 40px;
}

.radek-1 {
  background-color:     rgb(153,0,0);
  color:                #FFFFFF;
  padding:              10px;
}

.radek1 {
 padding: 10px;   
}

.akce {
    color: rgb(153,0,0);
    padding: 10px 20px;
    font-weight: bold;
}

.datum {
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

.telocvik {
    background-color: rgba(69,69,69,0.5);
}

.telocvik.barva {
    background-color: rgb(153,0,0);
}
.iframekcenter {
    text-align: center;
}

#fotogalerie img {
    width: 13.75%;
    margin: 0.25% 0.1%;
}

body > div.container > div > div > div.col-lg-9 > div > div.col-lg-8 > p > img {
    width: 100%;
}

.col-md-3.DOD {
    color: rgb(153,0,0);
}

.DODcas {
    width: 20%;
    color: rgb(153,0,0);
    vertical-align: top;
    }
.DODinfo {
    width: 80%;}