@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

body {
	background-color: #eee;
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: light;
	color: #333;
	font-size: 20px;
	line-height: 26px;
	margin: 0;
	padding: 0;
}

/*gsap shit*/
.panel {
	height: 100vh;
	top: 0;
	will-change: transform;
  }
/*end gsap shit */

.intro {
	display: table;
	height: 100vh;
	width: 99vw;
	margin: 0 auto;
	position: relative;
	background-color: #333;
	background-image: url(img/noise.gif);
	background-repeat: repeat;
}
.intro-cell{
	display: table-cell; /* table-cell display*/
  	vertical-align: middle; /* vertical align*/
 	text-align: center;
	width: 100%;
	padding-top:0;
}


.conditional-linebreak{
	display: none;
}

@media (max-width: 620px) {
	.conditional-linebreak{
		display: block;
	}
}

.design-portfolio{
	font-size: 60px;	
	line-height: 60px;
	font-weight: 100;
	color: #fff;
	margin: 0;
	animation: designportfolio 1.5s 1;
}

@keyframes designportfolio {
    0% { font-size: 0px;}
	70% { font-size: 65px;}
	100% { font-size: 60px;}
}

@media (orientation: portrait) {
	.design-portfolio{
		margin: -80px 0 0 0;
		font-size: 50px;	
		line-height: 60px;
	}
	@keyframes designportfolio {
		0% { font-size: 0px;}
		70% { font-size: 55px;}
		100% { font-size: 50px;}
	}
}

.by-vt{
	font-size: 30px;
	line-height: 60px;
	font-weight: 200;
	color: #fff;
	margin: 0;
	animation: byvt 2s 1;
	animation-delay: 1.3s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes byvt {
    0% { opacity: 0}
	100% { opacity: 1}
}

@media (orientation: portrait) {
	.by-vt{
		font-size: 20px;
		line-height: 50px;
	}
}
.scrollarrow-container{
	width: 100%;
	height: 81px;
	position: absolute;
	bottom: -100px;
	animation: scroll-enter 1s 1;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
@keyframes scroll-enter {
    0% { bottom: -81px; }
	100% { bottom: 120px;}
}

.scrollarrow {
	width: 100%;
	height: 64px;
	background-image: url(img/scrolldown.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	animation: scrollupdown 2s infinite;
}

@keyframes scrollupdown {
    0% { height: 64px;}
	50% { height: 81px;}
	100% { height: 64px;}
}

.slider-container {
	width: 99vw;
	height: 100vh;
	position: relative;
	margin: 0 auto;
}

.slider {
	background-color: #CCC;
	height: 99vh;
	width: 99vw;
	position: relative;
	margin: 0 auto;
}

.singleslide {
	width: 99vw;
	height: 99vh;
	background-size: cover;
	background-position: center;
	position: relative;
}

.singleslide a:link,
.singleslide a:active,
.singleslide a:visited{
	display: block;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	cursor: url(img/enter.png), auto !important;
	position: relative;
	z-index: 11;
}

.slide1 {
	background-image: url(radovi/ProstorIgre.jpg);
}
.slide2 {
	background-image: url(radovi/EtnoJazz2024.jpg);
}
.slide3 {
	background-image: url(radovi/Arena-Spot.jpg);
}
.slideshowvid {
	width: 99vw;
	height: 99vh;
	position: absolute;
	object-fit: cover;
	z-index: 10;
  }

.slide4 {
	background-image: url(radovi/Sensa.jpg);
}
.slide5 {
	background-image: url(radovi/Liberdance-Labirint.jpg);
}
.slide6 {
	background-image: url(radovi/FoodMarket.jpg);
}
.slide7 {
	background-image: url(radovi/CCOne.jpg);
}
.slide8 {
	background-image: url(radovi/GourmetKuharica.jpg);
}
.slide9 {
	background-image: url(radovi/OPlesu.jpg);
}
.slide10 {
	background-image: url(radovi/Sola.jpg);
}
.slide11 {
	background-image: url(radovi/Liberdance-MalaPlesna.jpg);
}
.slide12 {
	background-image: url(radovi/TSP-billboards.gif);
}



  
.enter-top{
	position: absolute;
	top: 90px;
	width: 90%;
	padding: 10px 5%;
	font-size: 11px;
	letter-spacing: 1px;
	text-align: center;
	color: #333;
}

.enter-arrow-down{
	width: 20px;
	height: 11px;
	background-image: url(img/enter-down.png);
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto; 
	margin-bottom: 0;
	animation: enterdown 1s infinite;
}
@keyframes enterdown {
    0% { margin-top: 5px;}
	50% { margin-top: 10px;}
	100% { margin-top: 5px;}
}


.enter-bottom{
	position: absolute;
	bottom: 90px;
	width: 90%;
	padding: 10px 5%;
	font-size: 11px;
	letter-spacing: 1px;
	text-align: center;
	color: #333;
}

.enter-arrow-up{
	width: 20px;
	height: 11px;
	background-image: url(img/enter-up.png);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto; 
	margin-bottom: 5px;
	animation: enterup 1s infinite;
}
@keyframes enterup {
    0% { margin-bottom: 5px;}
	50% { margin-bottom: 10px;}
	100% { margin-bottom: 5px;}
}  

@media (pointer:fine) {
	.enter-top, .enter-bottom {
		display: none;
	}
}

.outro {
	display: table;
	height: 100vh;
	width: 99vw;
	margin: 0 auto;
	position: relative;
	background-color: #333;
	background-image: url(img/noise.gif);
	background-repeat: repeat;
	color: #fff;
}
.outro-cell{
	display: table-cell; /* table-cell display*/
  	vertical-align: middle; /* vertical align*/
 	text-align: center;
	width: 100%;
}