body {
  margin: 0px;
  padding: 0px;
  font-family: "Asap", sans-serif;
  background-color: #303134;
}
* {
  box-sizing: border-box;
}
.header-video-container{
  position: fixed;
  display: flex;
  top: 0px;
  width: 100%;
  height: 60px;
  z-index: 2;
  /* right: 0; */
  /* bottom: 0; */
  object-fit: cover;
  justify-content: center;
}

.body-video-container{
  position: fixed;
  width: 100%;
  /* top: 30vh; */
  height: 100vh;
  z-index: 1;
  /* right: 0; */
  /* bottom: -21px; */
  /* object-fit: cover; */
  overflow: hidden;
  background-color: aqua;
}


/* VIDEO */
#heder-Video{
	/* width: 100%; */
	/* text-align: center; */
	height: 125px;
	object-fit: cover;
}
#mainBody-Video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#detach-button-host{
  display: none;
}
.login_IN{
  position: absolute;
  display: flex;
  width: 380px;
  height: 154px;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background-color: beige; */
  z-index: 60;
  align-items: center;
  justify-content: center;
}
.LinkLogin_IN{
  position: absolute;
  color: blanchedalmond;
  font-size: 2rem;
  text-decoration: none;
  transition: all 1s;
  font-weight: bold;
}
.LinkLogin_IN:hover{
  color: #FF5722;
}
/* ____________________  MAIN CARD_______________________ */

.CardContainer{
  position: fixed;
  display: flex;
  bottom: -15px;
  width: 100%;
  height: 400px;
  /*background-color: aqua;*/
  z-index: 3;
}
.CardItem{
  position: relative;
  display: flex;
  /* background-color: blue; */
  height: 380px;
  /* left: 0px; */
  /* width: 642px; */
  /* margin: 10px; */
  border: 1px solid #607d8b63;
  flex: 1;
  transition: 1s;
  border-top-left-radius: 16px 16px;
  border-top-right-radius: 16px 16px;
  border-bottom-left-radius: 16px 16px;
  overflow: hidden;
}
.CardItem.active{
  background-color: #1c1d1f;
  flex: 3;
}
.CardItem:hover{
  cursor: pointer;
}

.cardVelikiNaslov{
  position: relative;
  display: flex;
  min-width: 50px;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* text-align: center; */
  /* text-align: justify; */
  align-items: center;
  justify-content: flex-start;
  padding-top: 30px;
  flex-wrap: nowrap;
  white-space: nowrap;
  background: linear-gradient(to right, #28363d, #607D8B);/*_________ Veliki naslov backround ___________________*/
  background-size: 100% 100%;
  color: antiquewhite;
}
.inerCard{
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: black; */
}
.cardNaslov{
  display: none;
}
.cardMalaSlika{
  position: absolute;
  height: 60px;
  width: 60px;
  top: 0px;
  background-color: chocolate;
  left: -6px;
  z-index: 1;
}
.Malaslika{
  box-shadow: 3px 3px 6px 0px #000;
}
.cardOpis{
  position: relative;
  display: flex;
  width: 100%;
  height: 337px;
  background-color: #0000001a;
  color: antiquewhite;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}
.cardDugmici{
	position: relative;
	display: flex;
	width: 100%;
	height: 40px;
	background-color: #1110122b;
	justify-content: center;
	align-items: center;
}
.cardDugmici .Dugme{
  position: relative;
  width: 33%;
  height: 95%;
  border: none;
  background-color: transparent;
  display: none;
  color: blanchedalmond;
  cursor: pointer;
}
.cardDugmici .Dugme:hover{
  color: #FF9800;
}
.cardDugmici .Dugme::before{
  position: absolute;
  content: '';
  border-top: #607d8b63 solid 1px;
  border-left: #607d8b63 solid 1px;
  width: 10%;
  height: 30%;
  top: -1px;
  left: 5px;
  color: aliceblue;
  transition: 0.5s all ease-in-out;
}
.cardDugmici .Dugme::after{
  position: absolute;
  content: '';
  border-bottom: #607d8b63 solid 1px;
  border-right: #607d8b63 solid 1px;
  width: 10%;
  height: 30%;
  bottom: 2px;
  right: 1px;
  color: aliceblue;
  transition: 0.5s all ease-in-out;
}
.cardDugmici .Dugme:hover:before, .cardDugmici .Dugme:hover:after{
  width: 91%;
  height: 73%;
  border-color: #FF5722;
}














/*  _______________________________ RESPONSIVE ________________________________  */
@media(max-width: 760px){
  /* ____________________  MAIN CARD_______________________ */

.CardContainer{
  position: relative;
  display: flex;
  top: 12vh;
  width: 100%;
  height: 88vh;
  /*background-color: aqua;*/
  z-index: 3;
  flex-direction: column;
}
.CardItem{
  position: relative;
  display: flex;
  /* background-color: blue; */
  height: 380px;
  /* left: 0px; */
  /* width: 642px; */
  /* margin: 10px; */
  border: 1px solid #747579;
  flex: 1;
  transition: 1s;
  border-top-left-radius: 16px 16px;
  border-bottom-left-radius: 16px 16px;
  overflow: hidden;
  font-size: 0.8rem;
}


.cardVelikiNaslov{
  display: none;
}
.inerCard{
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: #8f2e2e; */
}
.cardNaslov{
  position: relative;
  display: flex;
  width: 100%;
  height: 40px;
  top: 0px;
  align-items: center;
  justify-content: center;
  color: burlywood;
  background: linear-gradient(to top, #28363d, #607D8B);
  background-size: 100% 100%;
}
.cardMalaSlika{
  position: absolute;
  height: 60px;
  width: 60px;
  top: 0px;
  background-color: chocolate;
  left: -6px;
  z-index: 1;
}
.Malaslika{
  width: 60px;
  height: 60px;
}
.cardOpis{
  position: relative;
  display: flex;
  width: 100%;
  height: 77%;
  background-color: #0000001a;
  color: antiquewhite;
  align-items: center;
  justify-content: center;
  /* flex-wrap: nowrap; */
  white-space: nowrap;
  overflow: hidden;
}
.cardDugmici{
	position: relative;
	display: flex;
	width: 100%;
	height: 10%;
	/* background-color: blue; */
	justify-content: center;
	align-items: center;
}
}

@media(max-width: 460px){
}

@media(max-width: 360px){
}