/* bootstrap framework */
@import url("bootstrap.css");
@import url("bootstrap-responsive.css");




.cookies
{
color:white; text-align:center
}

.cookies span
{
color:yellow; 
}



.id-color,
 a, a:visited
{
	color:#F86E4E;
	text-decoration:none;
}



.feature-box
{

}
.inner
{
  padding: 20px 20px 20px 20px;
  border: 2px solid gray;
  border-radius: 25px;
  background-color:white;
}




h1 {
color: black;
font-family: "Kaushan Script",Arial, sans-serif;
}
      h1 span{
      color:orange;
    }  
.toplist
{
position:absolute;top:0px ; left:-10000px; display:none;
}








  
  
body{
    margin:0;
    min-height:100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        ),
        url('bulharsko.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}  
  

.teploty{
    display:flex;
    justify-content:center;
    gap:25px;
    margin:30px 0;
    flex-wrap:wrap;
}

.karta{
    min-width:180px;
    padding:20px 30px;
    border-radius:18px;
    text-align:center;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    transition:all .2s ease;

}



.karta:hover{
    transform:translateY(-5px);
}

.vzduch{
    background:linear-gradient(135deg,#ffb347,#ff7e5f);
 /*   backdrop-filter: blur(10px);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);*/
}

.voda{
    background:linear-gradient(135deg,#0077be,#00c6ff);
/*    backdrop-filter: blur(10px);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);*/
}

.ikona{
    font-size:36px;
    margin-bottom:10px;
}

.nazev{
    font-size:9px;
    letter-spacing:2px;
    opacity:0.9;
}

.hodnota{
    font-size:42px;
    font-weight:700;
    margin-top:5px;
}


    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:  Arial, sans-serif;
      color:#222;
      padding:0px 0px;
      margin: 0;
    }

    h1{
      text-align:center;
      margin-top:25px;
      margin-bottom:35px;
      font-size:34px;
      color:white;
    }
    h2{
      text-align:center;
      margin-bottom:10px;
      font-size:24px;
      line-height:24px;
    }



    /* hlavní kontejner */
    .container{
      max-width:1200px;
      margin:0 auto;
    }

    /* grid videí */
    .video-grid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:25px;
    }

    /* karta */
.video-card{
  background:#fff;
  border-radius:16px 16px 16px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  padding-bottom:10px;
}


    /* nadpis */
    .video-title{

/*    
    background-image:
        url('live.png'),
        url('ip-camera-icon.png');


    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
    left 25px top 10px,
    right 30px top 10px;


    background-size:
        48px 24px,
        24px 24px;
*/    
    
    
      padding:15px;
      text-align:center;
      font-size:28px;
      font-weight:bold;
      font-family: "Kaushan Script",Arial, sans-serif;
    }
    
     .video-title span{
      font-size:20px;
      color:orange;
    }

    /* wrapper videa */
.video-wrapper{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  max-height:320px;
}

    /* iframe */
    .video-wrapper iframe{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      border:0;
      transition:transform 0.3s ease;
      transform:scale(0.95);
    }

    /* hover pouze na video */
    .video-wrapper:hover iframe{
      transform:scale(0.95);
    }

    /* tablet */
    @media (max-width:900px){

      .container{
        max-width:900px;
      }

    }

    /* mobil */
    @media (max-width:768px){

      body{
        padding:25px 15px;
      }

      .video-grid{
        grid-template-columns:1fr;
      }

      h1{
        font-size:28px;
        font-family: "Kaushan Script",Arial, sans-serif;
      }

      h1 span{
      color:orange;
    }  


      .video-title{
        font-size:24px;
      }

       .video-title span{
      font-size:20px;
      color:orange;
    }  

    }
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.footer a {
    color: #fff;
    text-decoration: none;
}
  
#toTopBtn {
    position: fixed;
    bottom: 50px;
    right: 25px;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 123, 255, 0.85);
    color: white;

    font-size: 24px;
    cursor: pointer;

    display: none;
    z-index: 9999;

    transition: all 0.3s ease;
}

#toTopBtn:hover {
    transform: translateY(-3px);
    background: rgba(0, 123, 255, 1);
}


.imgcornerborder {
  width:100%;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
  -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  display: block;
  transition: transform 0.4s ease;
}

.cornerborder {
   background-color:white;
   padding: 10px 10px 5px 10px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
  -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
  display: block;
  transition: transform 0.4s ease;
}

.cornerborder1 {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
}