html { height: 100%; }
		body { min-height: 100%; position: relative;text-align: center;}
		.displayNone{display: none}
		.line0 {position:absolute;width:2px;height:70vh; background: #000;top:calc(15vh); left:calc(50% - 1px)}
		.line11-25 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(11.25deg);}
		.line22-5 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(22.5deg);}
		.line33-75 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(33.75deg);}
		.line45 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(45deg);}
		.line56-25 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(56.25deg);}
		.line67-5 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(67.5deg);}
		.line78-75 {position:absolute;width:2px;height:70vh; background: #000;top:0vh; left:0vw;transform: rotate(78.75deg);}
		.line90 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;}
		.line101-25 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(11.25deg);}
		.line112-5 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(22.5deg)}
		.line123-75 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(33.75deg);}
		.line135 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(45deg);}	
		.line146-25 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(56.25deg);}
		.line157-5 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(67.5deg);}
		.line168-75 {position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh;transform: rotate(78.75deg);}

		.circle1 {position:absolute;width:4vh;height:4vh; background: #000;top:48vh; left:calc( 50% - 2vh );border-radius:2vh;
			animation-name: circleMove;
			animation-duration: 17s;
		}

		.circle2 {position:absolute;width:4vh;height:4vh; background: #000;top:calc( 50% - 2vh ); left:calc( 50% - 2vh );border-radius:2vh;
			animation-name: circleMove2;
			animation-duration: 17s;
		}
		
		@keyframes circleMove {
			0%   { position:absolute;width:4vh;height:4vh; background: #000;top:48vh; left:calc( 50% - 2vh );border-radius:2vh;}
			50%  { position:absolute;width:4vh;height:4vh; background: #000;top:48vh; left:calc( 50% - 2vh );border-radius:2vh;}
			65%  { position:absolute;width:70vh;height:70vh; background: #000;top:15vh; left:calc( 50% - 35vh );border-radius:35vh;}
			83%  { position:absolute;width:4vh;height:4vh; background: #000;top:48vh; left:calc( 50% - 2vh );border-radius:2vh;}
			100% { position:absolute;width:2px;height:70vh; background: #000;top:calc(15vh); left:50%; }
		}
		
		@keyframes circleMove2 {
			0%   { position:absolute;width:4vh;height:4vh; background: #000;top:calc( 50% - 2vh ); left:calc( 50% - 2vh );border-radius:2vh;}
			85%  { position:absolute;width:4vh;height:4vh; background: #000;top:calc( 50% - 2vh ); left:calc( 50% - 2vh );border-radius:2vh;}
			100% { position:absolute;width:70vh;height:2px; background: #000;top:calc( 50% - 1px ); left:-35vh; }
		}
		
		
		
		/*Prve Dvije Crte*/
		.introLine1{
			animation-name: expandHeight;
			animation-duration: 4s;}
		.introLine2{
			animation-name: expandWidth;
			animation-duration: 4s;}
		
		@keyframes expandWidth {
			from {width:0px;left:0vh}
			to {width:70vh;left:-35vh;}
		}

		@keyframes expandHeight {
			from {height:0px;top:50vh;}
			to {height:70vh;top:15vh;}
		}
		
		/*Druge Dvije Crte*/
		
		.introLine3{
			animation-name: rotate45_line23;
			animation-duration: 5s;
			transform: rotate(45deg);
			}
		
		@keyframes rotate45_line23 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			75%  { transform:rotate(0deg); visibility:hidden;}
			100% { transform: rotate(45deg); visibility:visible;}
		}

		/*Treće  Četiri Crte*/

		.introLine5{
			animation-name: rotate45_line56;
			animation-duration:6s;
			transform: rotate(22deg);
			}
		@keyframes rotate45_line56 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(0deg); visibility:hidden;}
			100% { transform: rotate(22deg); visibility:visible;}
		}

		/*Četvrte  Osam Crta*/

		.introLine9{
			animation-name: rotate45_line0910;
			animation-duration: 7s;
			transform: rotate(11.25deg);
			}

		@keyframes rotate45_line0910 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			0%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(0deg); visibility:hidden;}
			100% { transform: rotate(11.25deg); visibility:visible;}
		}
	
		/*pet 16 Crta*/

		.introLine17{
			animation-name: rotate45_line1718;
			animation-duration: 8s;
			transform: rotate(5.125deg);
			}
			
		.introLine25{
			animation-name: rotate45_line2526;
			animation-duration: 8s;
			transform: rotate(16.125deg);
			}
			
	
		@keyframes rotate45_line1718 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			60%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(0deg); visibility:hidden;}
			100% { transform:rotate(5.125deg); visibility:visible;}
		}
		
		@keyframes rotate45_line2526 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			60%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(11.25deg); visibility:hidden;}
			100% { transform: rotate(16.125deg); visibility:visible;}
		}
		
		/*6 32 Crta*/
	
		.introLine31{
			animation-name: rotate_line31;
			animation-duration: 9s;
			transform: rotate(2.62deg);
			}
	
		.introLine35{
			animation-name: rotate_line35;
			animation-duration: 9s;
			transform: rotate(8.125deg);
			}		
			
			
			
		@keyframes rotate_line31 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			60%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(0deg); visibility:hidden;}
			100% { transform: rotate(2.62deg); visibility:visible;}
		}
		@keyframes rotate_line35 {
			0%   { transform:rotate(0deg); visibility:hidden;}
			60%  { transform:rotate(0deg); visibility:hidden;}
			80%  { transform:rotate(5.125deg); visibility:hidden;}
			100% { transform:rotate(7.785deg); visibility:visible;}
		}


		/*6 64 Crta*/
	
		.introLine36{
			animation-name: rotate_lineA;
			animation-duration: 10s;
			transform: rotate(1.31deg);
			}
		.introLine37{
			animation-name: rotate_lineA;
			animation-duration: 10s;
			transform: rotate(3.93deg);
			}		
		.introLine38{
			animation-name: rotate_lineA;
			animation-duration: 10s;
			transform: rotate(6.55deg);
			}		
		.introLine39{
			animation-name: rotate_lineA;
			animation-duration: 10s;
			transform: rotate(9.55deg);
			}		
	
		@keyframes rotate_lineA {
			0%   { visibility:hidden;}
			60%  { visibility:hidden;opacity: 0}
			80%  { visibility:hidden;opacity: 0}
			100% { visibility:visible;opacity: 1}
		}

		@keyframes rotate_lineA {
			0%   { visibility:hidden;}
			60%  { visibility:hidden;opacity: 0}
			80%  { visibility:hidden;opacity: 0}
			100% { visibility:visible;opacity: 1}
		}
	
	
	
	.wrapper2{
		position:absolute;
		top:27.5vh;
		width:calc(120vh);
		left:calc(50% - 56vh);
		text-align: left;
			
	}
	
	.wrapper1{
		position:absolute;
		top:70vh;
		width:calc(120vh);
		left:calc(50% - 48vh);
		text-align: left;
			
	}
	
		#typed{
			font-family: 'Open Sans', sans-serif;
			font-weight: 800;
			font-size:22vh;
			line-height: 21vh;
			text-align: left;
			/*position:absolute;*/
		}
		
		#typed1{
			font-family: 'Fauna One', sans-serif;
			font-size:8vh;
			text-align: left;
		}
		
		
		.typed-cursor{
			font-family: sans-serif;
			font-size:20vh;
			font-weight: 100;
		}