body{
	text-align: center;
	margin:0;
	color: #c8d8d7;
	background-color:  #e7542b;
}



/* BACKGROUNDS */

	#pageLBlue{
		background-color: #30B3FE;
	}

	#pageOrange{
		opacity: 0;
		background-color: #c8d8d7;
	}

	#pageGrey{
		background-color: #576F6F;
	}

	#pageDblue{
		background-color: #06779E;
	}

	.FullBg{
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	}


/* FONT STYLES */

	.MajorFont{
	font-family: 'Major Mono Display', monospace;
	}

	.headline{
		font-size: 100px;
		text-align: left;		
		color: #c8d8d7;
	}

	.bodyText{		
		position: relative;
		font-size: 30px;
		text-align: left;
		color: #c8d8d7;
		width: 100%;
		max-width: 800px;
		margin-top: 100px;
		line-height: 1.3;
	}

	.smallerbodyText{
		position: relative;
		font-size: 20px;
		text-align: left;
		color: #c8d8d7;
		max-width: 800px;
		width: 100%;
		margin-top: 100px;
		line-height: 1.3;
	}

/* INTRO */

	#IntroLogo{
		top:50%;
		margin-top: -300px;
		position: relative;
		display: inline-block;
		width: 350px;
		height: auto;
	}

	#IntroTranzicija{
		left: 0;
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	#introWrapper{
		position: absolute;
		overflow: hidden;
		width: 100%;
		height: 100%;
		text-align: center;
	}
/* ALL SEGMENTS */ 

.segment{
	overflow: hidden;
	vertical-align:top;
}



/* HOMEPAGE */

	#HomePageWrapper{

		height: 100vh;

	}


	.leftColumn{
		float: left;
		flex: 250px;
		max-width: 250px;
		height: 250px;

	}

	#MainWrapper{
		display: flex;
		position: absolute;
		overflow: hidden;
		width: 100%;
		height: 100%;
		text-align: center;

	}


	#homeHeadline{

		position: relative;
		display: block;		
		width: 100%;
		max-width: 800px;
		height: auto;
	}





	.ContWrapper{
		display: flex;		
		position: fixed;
		top: 150px;				
		text-align: left;			
		width: 100%;
		height: 100%;
				
	}

	.innerContWrapper{
		/*padding-right:80px; */
		float: left;
		/*padding:20px;*/
		display: inline-block;
		position: relative;				
		width: 100%;
		max-width: 800px;
		
	}

	.innerFormWrapper{
		/*padding-right:80px; */
		float: left;
		/*padding:20px;*/
		display: inline-block;
		position: relative;				
		width: 100%;
		max-width: 800px;
		
	}

	#sliderWrapp{
		
		display: inline-block;
		position: relative;
		width: 100%;
		max-width: 800px;
		padding: 30px;
	}

	#sliderWrapp{
		
		opacity: 0;
		
	}

	.Slider{
		display: inline-block;
		width: 100%;	
		max-width: 700px;
		height: 180px;
		
	}
	.logoSlides{
		-webkit-tap-highlight-color: rgba(0,0,0,0);
   		-webkit-tap-highlight-color: transparent;
   		outline: none;
		 cursor: move; /* fallback if grab cursor is unsupported */
	    cursor: grab;
	    cursor: -moz-grab;
	    cursor: -webkit-grab;
	}
	
	#LogoSlide1{
	
		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos1.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide2{
	
		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos2.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide3{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos3.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide4{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos4.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide5{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos5.png") repeat-x center center;
		background-size: contain;

	}


	#LogoSlide6{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos6.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide7{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos7.png") repeat-x center center;
		background-size: contain;

	}

	#LogoSlide8{

		/*width: 700px;*/
		height: 180px;
		background: url("../assets/logos8.png") repeat-x center center;
		background-size: contain;

	}



/* PRINT SEGMENT */

	#printSegmentWrapper{

	overflow: hidden;
	width: 100%;
	height: 1000px;
	top:	100vh;
	
	margin: 0;
	padding:0;
	background-color:  #e7542b;
	position: relative;

	}
/*
	#printContent{
		margin-left: 240px;

	}*/

	#PrintHeadline{
		position: relative;
		display: block;
		margin-top: 200px;		
		width: 100%;
		max-width: 800px;
		height: auto;
	}


/* WEB SEGMENT */



	#webSegmentWrapper{
		overflow: hidden;
		width: 100%;
		height: 1000px;
		top:100vh;		
		position: relative;
		background-color:  #576F6F;
		position: relative;

	}

	#webContent{
		

	}

	#webHeadline{
		position: relative;
		display: block;
		margin-top: 200px;		
		width: 100%;
		max-width: 800px;
		height: auto;
	}


/* MULTIMEDIA */

	#multiSegmentWrapper{
		overflow: hidden;
		width: 100%;
		height: 1000px;
		top:100vh;			
		background-color:  #06779e;
		position: relative;
	}

	#multiContent{
		
	}

	#multiHeadline{
		overflow: hidden;
		white-space: nowrap;
		position: relative;
		display: block;
		margin-top: 200px;		
		width: 100%;
		max-width: 800px;
		height: auto;
	}

/* CONTACT */
#submitbtt{
		clear: both;
		display: inline-block;
		width: 400px;
		margin-top: 20px;	
		
}

#SubmitButton{
		
		
		display: inline-block;
		position: absolute;
		right: 32px;
	    border: none;
	    
	    margin: 0;
	    text-decoration: none;
	    background: #415151;
	    color: #ffffff;
	    
	    font-size: 1.2rem;
	    cursor: pointer;
	    text-align: center;
	    transition: background 250ms ease-in-out, 
	    transform 150ms ease;
	    -webkit-appearance: none;
	    -moz-appearance: none;
}

#SubmitButton:hover
{
	background-color: #ff0036;
	opacity:1;
	color: white;
	z-index: 98;
	
}	

#SubmitButton::after
{		

	display: inline-block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;	
	background-color: #ff3e32 !important;
	z-index: -1;
	transition: 0.25s;
	opacity: 1;
}

#SubmitButton:hover:after
{		
	
	width: 100%;
	color: white;
	background-color: #ff3e32 !important;
}


	#contactSegmentWrapper{
		overflow: hidden;
		width: 100%;
		height: 1300px;
		top:100vh;	
		background-color:  #9061c2;
		position: relative;
	}

	#contactContent{
		
	}

	#contactHeadline{
		position: relative;
		display: block;
		margin-top: 200px;		
		width: 100%;
		max-width: 800px;
		height: auto;
	}

	#ContactFormArea{
		margin-top: 50px;
		text-align: left;
		width: auto;
	}


	input{
		height: 35px;
		width: 320px;
	   	border: 1px solid #be80ff;
	    background-image:none;
	    background-color:transparent;
	    -webkit-box-shadow: none;
	    -moz-box-shadow: none;
	    box-shadow: none;

	}

	textarea{
		padding-top: 30px !important;
	   	border: 1px solid #be80ff;
	    background-image:none;
	    background-color:transparent;
	    -webkit-box-shadow: none;
	    -moz-box-shadow: none;
	    box-shadow: none;
	    line-height: 1.3;


	}
	#leftForm{
		margin-top: 30px;
	}

	#rightForm{

		display: inline-block; position:relative;  vertical-align: top;
		margin-top: 30px;
		width: 439px;
	}

/* FORM EFFECTS */

		.form-group {
		  position:relative;  

		  & + .form-group {
		    
		  }
		}

		.form-label {
		  padding: 10px;
		  position: absolute;
		  left: 0;
		  top: 10px;
		  color: #c8d8d7;
		  
		  z-index: 10;
		  transition: transform 150ms ease-out, font-size 150ms ease-out;
		  pointer-events: none;
		}

		.focused .form-label {
		  transform: translateY(-50%);
		  font-size: .75em;
		}

		.form-input {
		  position: relative;
		  color: #c8d8d7;
		  font-family: 'Major Mono Display', monospace;
		  padding: 12px 0px 5px 0;
		  padding-left: 10px;
		  max-width: 90%;   
		  transition: box-shadow 150ms ease-out;
		  
		  &:focus {
		    box-shadow: 0 2px 0 0 blue;
		  }
		}

		.form-input.filled {
		  box-shadow: 0 2px 0 0 lightgreen;
		}


/* NAVIGACIJA */

		#MainLogoWrapper{
			cursor: pointer;
			opacity: 0;
			position: fixed;
			left: 0px;
			margin-top: -20px;
			width: 120px;
			height: 120px;
			z-index: 999;

		}

		#navigacijaWrapper{
			
			z-index: 999;
			position: fixed;
			bottom: 40px;
			left: 55px;
			margin-left: 20px;
			width: 670px;
			transform: rotate(-90deg);
			transform-origin: left bottom 0;

		}

		.noSelect{
			/* -webkit-touch-callout: none;*/
		    -webkit-user-select: none;
		    -khtml-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		}

		.menuTekst{
			 display: inline-block;
			 font-size: 20px;
			 height: 22px;
			 /* fix za flicker */
			     -webkit-backface-visibility: hidden;
                 -webkit-transform: translateZ(0) scale(1.0, 1.0);
                 transform: translateZ(0);
		}

		.menuitem{
			height: 20px;
			opacity: 0;
			cursor: pointer;
			display: inline-block;
			color: #c8d8d7;				
			background-color: rgba(0, 0, 0, 0);
		}

		.strelicaMenu{
			/*margin-right: 4px;*/
			width: 10px;
			height: 14px;
			background: url("../assets/strelicaD.png") repeat-x center center;
			background-size: 10px;
			display: inline-block;
		}


@media only screen and (max-width: 1070px) {

	#sliderWrapp{
		max-width: 500px;
	}

}


@media only screen and (max-width: 820px) {

	#sliderWrapp{
		max-width: 430px;
	}

	#navigacijaWrapper{
		left: 30px;
	}


	.leftColumn{
		display: none;
	}

	.innerContWrapper{
		padding-left: 100px;
		padding-right: 30px;
	}

	.innerFormWrapper{
		padding-left: 100px;
		padding-right: 30px;
	}

	#HomePageWrapper
	{
		top:25%;
	}

	.bodyText{		
	font-size: 25px;
	}

}