@charset "utf-8";
/* CSS Document */
@keyframes FadeIn{
	to{
		opacity: 1;
		}
}
#fade-In{
	opacity: 0;
	animation: fadeIn 1s ease-in-out forwards;
}
#glavniGrid{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	align-content: center;
	object-fit: fill;
	width: 100vw;
	height: 100vh;
	border-bottom:#EF3C23;
	border-bottom-style: solid;
	border-bottom-width: medium;
	padding: 0;
}
#infobox1{
	background-image: url("../images/Pattern1.png");
	background-size: cover;
	background-size: 5%;
	background-repeat: repeat;
	text-align: left;
	display: flex;
	flex-flow: wrap;
	position: absolute;
	padding: 14px;
	background-color: rgba(56, 70, 73,0.9);
    top: 0;
	width: 100%;
	border-bottom: 4px solid #ef3c23;
	height: 80px;
	}
#infobox2{
	background-image: url("../images/Pattern1.png");
	background-size: cover;
	background-size: 5%;
	background-repeat: repeat;
	text-align: left;
	display: flex;
	flex-flow: wrap;
	position: absolute;
	padding: 14px;
	background-color: rgba(56, 70, 73,0.9);
    top: 0%;
	width: 100%;
	border-bottom: 4px solid #ef3c23;
	height: 80px;
	}
#Txt {
	font-size: 1.2em;
	font-family: "Nunito Sans";
	font-weight: lighter;
	alignment-baseline: baseline;
	line-height: 1.2;
	color: #ecf5f4;
	display: flex;
	text-align: left;
	text-decoration: none;
}
#BoxTxt {
	display: flex;
	padding-left: 1.1em;
	text-align: left;
	border-left: 2px solid #EF3C23;
}
#reel {
	display: flex;
	position: relative;
	width: 20%;
	min-width: 30%;
	margin-top: 0%;
	align-self:auto;
	opacity: 0;
	animation: FadeIn 1s ease-in-out forwards;
}
#reelBox {
	display: flex;
	background-color: transparent;
	position: inherit;
	top: 20%;
	right: 0;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 10;
}
#ReelTxt {
	font-size: 1em;
	font-family: "Nunito Sans";
	font-weight: lighter;
	alignment-baseline: baseline;
	line-height: 1.2;
	color: #fff;
	display: flex;
	padding-left: 1.1em;
	text-align: left;
}
#markica{
	display: block;
	position: absolute;
	left:50%;
	top:50%;
	width: 200px;
	height: 200px;
	min-height: 60px;
	transform: translate(-50%, -50%);
	z-index: 2;
}
#temp{
	display: block;
	width: 100vw;
	height: auto;
}
#myVideo{
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -50;
}
#myVideoContainer{
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -50;
}
#prvikvadrat{
	alicn-content: center;
	display: flex;
	width:100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
}
#projekti{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#projekti:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display: flex;
	width:100vw;
	height: auto;
	transform: scale(1.05);
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#projekti_1{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#hpm{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	background-image: url("../images/Ostrige.jpg");
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#hpm:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display: flex;
	width:100vw;
	height: auto;
	transform: scale(1.05);
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#augmented{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: inherit;
	display:flex;
	flex-flow: row;
	width: 100vw;
	min-height: 100px;
	margin: 0;
	padding: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#augmented1{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: inherit;
	display:flex;
	flex-flow: row;
	width:100%;
	min-height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding:0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#augmented1:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position:inherit;
	display:flex;
	flex-flow: row;
	width: 100%;
	min-height: 100px;
	margin: 0;
	padding:0;
	border-bottom: 4px solid #ecf5f4;
	transform: scale(1.2);
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#HT{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: row;
	width:100%;
	min-height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding:0;
	background-color: #E20074;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#HT:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: row;
	width:100%;
	min-height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding:0;
	background-color: #E20074;
	transform: scale(1.02);
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#MB{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: row;
	width:100%;
	min-height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding:0;
	background-color: #000000;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#MB:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: row;
	width:100%;
	min-height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding:0;
	background-color: #000000;
	transform: scale(1.02);
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 100;
}
#hidden-div {
	width: 100%;
    display: block;
    background-color: salmon;
    color: white;
      }
#Header{
	display: inline-flex;
	position: absolute;
	width: 100vw;
	height: 50px;
	background-color: #ecf5f4;
	border-bottom: #ef3c23;
	border-bottom-style: solid;
	z-index: 1;
	}

@media screen and (max-width:600px){
  .left, .main, .right {
    width: 100%;
 }
#glavniGrid{

	}
#myVideo{

	}
#myVideoContainer{

	}
#markica{
	display: block;
	position: absolute;
	left:50%;
	top:50%;
	width: 100px;
	height: 100px;
	min-width: 100px;
	min-height: 100px;
	transform: translate(-50%, -50%);
	z-index: 2;
}
#tricetiri{
	align-content: center;
	display: flex;
	flex-flow: column;
	width: 100vw;
	height: auto;
	}
#prvikvadrat{
	justify-content: center;
    position: relative;
	display: block;
	width:100vw;
	max-width: 576px;
	height: auto;
}
#reel {
	width: 60%;

}
#reelBox {
	top:0;
}
#ReelTxt {
}
#DesnaStrana{
	background-image: url("../images/SarenaPodloga_v2.png");
	flex-flow: column;
	border-top: 8px solid #ef3c23;
	width: 100vw;
	height: 900px;
	}
#projekti{
	object-fit:fill;
	display: block;
	align-content: center;
	justify-content: center;
    position: relative;
	flex-flow: column;
	width:100vw;
	height: auto;
	min-height: 100px;
	max-width: 576px;
	transform: translate(0%, 0%);
}
#augmented{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: column;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;

}
#augmented1{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: column;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
}
#augmented1:hover{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: column;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;

}
#projekti_1{
	cursor: pointer;
	justify-content: center;
	align-content: center;
	position: relative;
	display:flex;
	flex-flow: column;
	width:100vw;
	height: auto;
	padding: 0;
	margin: 0;
	transition: transform 0.2s ease;
	opacity: 0;
	animation: FadeIn 0.2s ease-in-out forwards;
	animation-delay: 0;
	z-index: 10;
}
#hidden-div {
	width: 100%;
    display: block;
    background-color: salmon;
    color: white;
      }
 }