/* ----------------------- Basic ---------------- */
@font-face {
        font-family: MyFont;
        src: url(bpfont.ttf);
        }
        
body {
    margin: 0;
    font-family: MyFont, Arial, Helvetica, sans-serif;
}

/* ------------------------- Navigation ------------------------*/
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  /*padding: 16px;*/
  text-decoration: none;
  font-size: 21px;
}


.topnav a:not(:first-child) {
padding-top: 30px;
padding-right: 15px;
padding-bottom: 28px;
padding-left: 15px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #333;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 760 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 760px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 760px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.responsive {
  width: 100%;
  height: auto;
}

/* ------------------------------------------------ Slider ----------------------------------------------------------------- */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: auto;
  position: relative;
  margin: auto;
}

/* Hide the images by default 
.mySlides {
  display: none;
}
*/

#secondSlide, #thirdSlide {
    display: none;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */

h1 {
text-align: center;
}
#middle {
margin-left: 2%;
margin-right: 2%;
}

.row {
margin-top: 30px;
}

.indextext {
    font-size: 22px;
    text-align: justify;
}



.responsive-photo-month {
    width: 100%;
    max-width: 700px;
    height: auto;
    //border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}

  

/* ------------------------------------------------------------------------------------------------- */
/* Dvě řady na úvodní obrazovku - osamostatnit */
/*
.row::after {
     content: "";
     clear: both;
     display: table;
    }
    
    .col-6 {
     display: table-cell;
     float: left;
     padding: 10px;
     border: 5px solid white;
     background-color: white;
    }
    */
    
       /*Nastavení podle velikosti obrazovky umístit až na konec .css souboru!!!*/
    /* Malé obrazovky (např. telefony) */
   /* .col-6 {
     width: 100%;
    }
    
    @media only screen and (min-width: 925px) {
    
    /* Větší obrazovky */
   /* .col-6 {width: 50%;
    
    }
    */
/* --------------------------------------- Selections ---------------------------------------------*/
.responsive-photo-article {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin-right: 15px;
    margin-bottom: 15px;
    //border-radius: 10px;
    float:left;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    // rgba(50, 50, 93, 0.25)
    
}

.importantpic {
    box-shadow: rgba(190, 0, 40, 0.25) 0px 13px 27px -5px, rgba(190, 0, 40, 0.3) 0px 8px 16px -8px;
}

.articlesource {
    clear: both;
    margin-bottom: 0;
    font-size: 15px;
    color: #929394;

}

.articleheading {
    margin-top: 0px;
}

.article {
    //background-color: #f2f0f0;
    padding: 10px;
    margin-bottom: 15px;
    border-bottom: solid #929394;
    

}

.article::after {
  content: "";
  clear: both;
  display: table;
}

/* ------------------------------------ Containers with girls -------------------------------------*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;	
  background-color: white;
}

.flex-container > div {
  //background-color: #f7f5f5;
  width: 300px;
  margin: 10px;
  text-align: center;
  //line-height: 75px;
  //font-size: 30px;
  text-align: left;
  padding: 15px;
  //border-radius: 15px;
  border-bottom: solid #929394;
}

.responsive-photo {
    width: 100%;
    max-width: 600px;
    height: auto;
    //border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}


.psinfo {
    margin-top: 10px;
    margin-bottom: 5px;
}

.psname {
    font-size: 28px;
    color: #be0028;

}

.photosource {
    font-size: 15px;
    color: #929394;
}

/* ------------------------------------ Recently added models -------------------------------------*/
.recent-models {
  display: grid;
  gap: 10px; /* Mezera mezi prvky */
  justify-content: center; /* Vycentrování */
  background-color: white;
  overflow: hidden;
}

/* Styl pro jednotlivé položky */
.recent-models > div {
  max-width: 250px;
  width: 100%; /* Zajištění, že se položky přizpůsobí šířce */
  height: auto;
  max-height: 425.125px;
  margin: 10px;
  text-align: left;
  padding: 5px;
}

/* Zlomové body pro počet sloupců podle šířky obrazovky */
@media (min-width: 2532px) {
  .recent-models {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 2250px) and (max-width: 2531px) {
  .recent-models {
    grid-template-columns: repeat(8, 1fr);
  }
    #rm9 {
    display: none;
  }
}

@media (min-width: 1969px) and (max-width: 2249px) {
  .recent-models {
    grid-template-columns: repeat(7, 1fr);
  }
    #rm9, #rm8 {
    display: none;
  }
}

@media (min-width: 1688px) and (max-width: 1968px) {
  .recent-models {
    grid-template-columns: repeat(6, 1fr);
  }
    #rm9, #rm8, #rm7 {
    display: none;
  }
}

@media (min-width: 1406px) and (max-width: 1687px) {
  .recent-models {
    grid-template-columns: repeat(5, 1fr);
  }
  #rm9, #rm8, #rm7, #rm6 {
    display: none;
  }
}

@media (min-width: 1125px) and (max-width: 1405px) {
  .recent-models {
    grid-template-columns: repeat(4, 1fr);
  }
    #rm9, #rm8, #rm7, #rm6, #rm5 {
    display: none;
  }
}

@media (min-width: 844px) and (max-width: 1124px) {
  .recent-models {
    grid-template-columns: repeat(3, 1fr);
  }
    #rm9, #rm8, #rm7, #rm6, #rm5, #rm4 {
    display: none;
  }
}

@media (max-width: 843px) {
  .recent-models {
    grid-template-columns: repeat(2, 1fr);
  }
      #rm9, #rm8, #rm7, #rm6, #rm5, #rm4, #rm3 {
    display: none;
  }
}

/* Styl pro text v položkách */
.psname_r {
    font-size: 20px;
    color: #be0028;
}


/* ------------------------------------ Add star form -------------------------------------*/

form {
    width: 500px; /* Nastavte šířku formuláře podle vašich potřeb */
    padding: 20px;
    padding-left: 0px;
    padding-top: 5px;
    margin-left: 0; /* Zrušení odsazení formuláře zleva */
    border-top: 1px solid black;
  }
  
    @media (max-width: 520px) {
    #formdiv form {
      width: 100%;
    }
  }
  
    input[type="text"],textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 0;
      box-sizing: border-box;
      margin-bottom: 15px;
    }
  
  input[type="submit"] {
    /* margin-top: 10px;  Zvětšení mezeru mezi posledním textovým polem a tlačítkem */
    padding: 15px 25px; /* Zvětšení tlačítka submit */
    background-color: #be0028; /* Změna barvy tlačítka submit */
    color: white;
    border: none;
    border-radius: 0; /* Odstraňte zakulacené rohy */
    cursor: pointer;
    font-size: 18.8467px; /* Nastavení velikosti textu tlačítka */
    margin: 5px;
  }
  
  input[type="submit"]:hover {
    background-color: #85001c; /* Změna barvy tlačítka submit při přejetí myší */
  }
  
  label {
    font-size: 16px; /* Nastavení velikosti textu popisku polí */
  }
  
#formdiv {
  background-color: #e9ecef;
  padding-right: 2%;
  padding-left: 2%;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --------------------------------------- Footer ---------------------------------------------*/
 footer {
    background-color: #333333;
    color: white;
  }

  footer div {
    display: flex;
    padding-right: 2%;
    padding-left: 2%;
    padding-bottom: 10px;
  }
  
  .first-column {
    flex-direction: column;
  }

  footer div div {
    width: 33%;
  }
  
  .footer-row {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-column {
    flex: 1 0 33%;
  }
  
  @media (max-width: 700px) {
    .footer-column {
      flex-basis: 50%;
      max-width: 50%;
    }
  }

  @media (max-width: 443px) {
    .footer-column {
      flex-basis: 100%;
      max-width: 100%;
    }
  }


  footer ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  footer ul li a {
    color: white;
    text-decoration: none;
  }
  
  footer ul li a:hover {
    text-decoration: underline;
  }
  
  footer p.centered-text {
    text-align: center;
    padding-right: 2%;
    padding-left: 2%;
    margin: auto;
  }


/* --------------------------------------- Share icons ---------------------------------------------*/
        @font-face {
        font-family: ShareIcon;
        src: url(social_media.otf);
        }
        
      .shareicon {
        font-family: ShareIcon;
        font-size: 30px;
        text-decoration: none;
        color: black;
      }
      
      #twitter:hover {
        color: #00acee;
      }
      
      #facebook:hover {
        color: #3b5998;
      }
      
      #clipboard:hover {
        color: red;
      }
      
      #clipboard1:hover {
        color: red;
      }

/* --------------------------------------- Crypto donate --------------------------------------------*/

     .pcrypto {
      display: flex;
      align-items: center;
    }
    
    .big-letter {
      font-size: 40px;
    }
    
    .small-text {
      font-size: 16px;
      padding-left: 5px;
    }
    
    @media (max-width: 836px) {
  .cryptoadress {
    display: none;
  }
}

/* --------------------------------------- Crypto show QR codes --------------------------------------------*/

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  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: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 600px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 600px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}


/* --------------------------------------- Top Banner --------------------------------------------*/
/* Styl pro displeje o šířce 667px nebo menší */
@media (max-width: 667px) {
  .topbanner {
    display: block; /* Zobrazí obrázek */
  }
}

/* Styl pro displeje o šířce větší než 667px */
@media (min-width: 668px) {
  .topbanner {
    display: none; /* Skryje obrázek */
  }
}