body{
    background-color:  rgb(26, 46, 63);
    background-image: url('Obrazky/1458572742_preview_Circuits.jpg');
    background-size: cover;
    
    height: 100vh;
      background-position: center;
    
}
.C .S  {
  margin-inline: 300px; 
}


@media (max-width: 1100px) {
  .C .S {
    margin-inline: 0;
  }

  .C {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
  }

}
.SU {
  margin-right: 300px;
  margin-left: 0;
}

@media (max-width: 1100px) {
  .SU {
    margin: 0;
  }
}
.TextP{
  font-size: 20px;
  
}
.BB{
 background-color: #222222;
 border-color:#444 ;
}
		





.NavbarText{
    text-decoration:solid;
    color: white;
    font-size: 25px;
    font-weight: bold;
}    
.NavbarText:hover{
    color: rgb(192, 192, 192);
}
.NavbarText:focus{
    color: white
}
.NavbarText1{
    text-decoration:solid;
    color: white;
    font-size: 40px;
    padding-right: 50px ;
}.NavbarText1:hover{
    color: rgb(255, 255, 255);
}
.First{
    border-bottom: 7px solid rgb(0, 140, 255);
    border-radius: 7px;
    padding-bottom: 0px ;
    font-weight: bold;
    font-size: 25px;
    color: rgb(0, 140, 255);
}
.First:hover{ 
    color: rgb(0, 140, 255);
}
.First:focus{
    color: rgb(0, 140, 255);
}
.White{
    color: white
}
.G{
   
}


.bottom-right-text {
  position: absolute;
  bottom: 0px;
  padding: 5px 15px;
  padding-bottom: 5px ;
  font-size: 30px;
  
}
.Sleva{
  background-color: rgb(91, 153, 34); /* poloprůhledné pozadí */
  color: rgb(145, 255, 0);
  font-weight: bold;
  padding: 0px 10px;
}
.NeSleva{
  background-color: rgb(58, 58, 58); /* poloprůhledné pozadí */
  color: rgb(255, 255, 255);
  font-weight: bold;
  padding: 0px 10px;
}
.BezSleva{
  background-color: rgb(58, 58, 58); /* poloprůhledné pozadí */
  color: rgb(156, 156, 156);
  font-weight: bold;
  text-decoration: line-through;
  padding: 0px 10px;
}
.Cena{
  background-color: rgb(58, 58, 58); /* poloprůhledné pozadí */
  color: rgb(145, 255, 0);
  font-weight: bold;
  padding: 0px 10px;
}
.SK{
  background-color: rgb(60, 82, 99);
}
.K{
  background-color: rgb(45, 185, 45);
  border-color:rgb(45, 185, 45);
}
.K:hover {
  background-color: rgb(46, 241, 46);
  border-color:rgb(46, 241, 46) ;
}
.I{
 background-color: rgb(24, 105, 255);
 border-color:rgb(24, 105, 255) ;
}
.I:hover {
background-color: rgb(35, 138, 255);
border-color:rgb(35, 138, 255) ;
}
.SS{
  margin: 125px;
}
@media (max-width: 1100px) {
 .SS {
    margin: 0;
  }

}

.SNB{
  right: 248px;
}
@media (max-width: 1300px) {
 .SNB {
    right: 158px;
  }

}
@media (max-width: 1100px) {
 .SNB {
    right: 68px;
  }

}
@media (max-width: 1000px) {
 .SNB {
    right: 0px;
  }

}
.PC {
  perspective: 1200px;
}

.CC {
  transform-style: preserve-3d;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  will-change: transform;
}

.PC:hover .CC {
  transform-origin: top center; /* změněno */
  transform: rotateX(10deg) translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}

.SK {
  position: relative;
  overflow: hidden;
  transform-origin: top;
}

.SE {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.SE::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
}


.SK:hover .SE::before {
  animation: shine 1s ease-in-out;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}










.main-container {
			width: 795px;
			margin: 2rem auto;
		}

		/* Styl editoru */
		.ck.ck-editor__main > .ck-editor__editable {
			background-color: #000;
			color: #fff;
			border-radius: 10px;
			padding: 1rem;
		}

		
		.ck.ck-toolbar {
			border-radius: 10px 10px 0 0;
			background-color: #1a1a1a;
			color: #fff;
		}
.main-container {
			max-width: 700px;
      width: 100%;
			margin: 2rem auto;
		}

		
		.ck.ck-editor__main > .ck-editor__editable {
			background-color: #383838 !important;
			color: #ffffff !important;
			border-radius: 10px;
			padding: 1rem;
      min-height: 400px;
    max-height: none;
    overflow-y: auto;
		}

		
		.ck.ck-toolbar {
			background-color: #1e1e1e !important;
			color: #ffffff !important;
			border-radius: 10px 10px 0 0;
			border: none;
		}

		
		.ck.ck-toolbar .ck-button {
			color: #ffffff !important;
			background: transparent !important;
		}
		.ck.ck-toolbar .ck-button:hover {
			background-color: #333333 !important;
		}

		
		.ck.ck-dropdown__panel,
		.ck.ck-list__item,
		.ck.ck-color-grid__tile {
			background-color: #1e1e1e !important;
			color: #ffffff !important;
		}

		
		.ck.ck-toolbar .ck-button.ck-on {
			background-color: #444444 !important;
		}
    .CA {
      background-color: #1e1e1e;
      border-radius: 10px;
      border: 1px solid #333;
      margin-bottom: 1rem;
    }
    .CH {
      background-color: #2c2c2c;
      border-radius: 10px 10px 0 0;
      padding: 0;
    }
    .CH .BTN {
      color: #eee;
      text-align: left;
      display: block;
      width: 100%;
      padding: 1rem 1.25rem;
      font-weight: 600;
      background: none;
      border: none;
    }
    .CH .BTN:hover,
    .CH .BTN:focus {
      background-color: #444;
      color: #fff;
      outline: none;
      text-decoration: none;
    }
    .CB {
      background-color: #2a2a2a;
      color: #ddd;
      border-radius: 0 0 10px 10px;
      padding: 1rem 1.25rem;
    }
    .nav-tabs {
  border-bottom: 1px solid #444;
}


.NT .NL {
  color: #aaa;
  background-color: transparent;
  border: 1px solid transparent;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-right: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}


.NT .NL:hover {
  color: #fff;
  background-color: #333;
  border-color: #555 #555 transparent;
}


.NT .NL.active {
  color: #fff;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-bottom-color: transparent;
}