@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
*{
	padding: 0px;
	margin: 0px;
}
html, body{
	width: 100%;
	height: 100%;
}
body{
	background-image: url("../img/bg2.jpg");
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

a{
	text-decoration: none;
}
#wrapper{
	width: 100%;
	height: 100%;
	display: block;
}

nav{
	height: 100px;
	width: 100%;
	background-color: white;

	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0px 0px 20px black;
}
	nav > a{
		font-family: Montserrat, sans-serif;
		font-size: 32px;
		color: #F77A4C;
		transition: 0.3s all ease-in;
	}
		nav > a:hover{
			text-shadow: 0px 0px 1px #F77A4C;
		}
	nav #logo{
		height: 125px;
		transition: 0.3s all ease-in;
	}
		nav #logo:hover{
			filter: drop-shadow(0px 0px 10px black);
		}

	nav ul li{
		display: inline-block;
		margin: 0px 20px;
		height: 100%;
	}
		nav ul li a{
			font-size: 18px;
			font-family: Montserrat, sans-serif;
			display: inline-block;
			color: black;
			border-bottom: 3px solid transparent;
			text-transform: uppercase;
			transition: 0.3s all ease-in;
			padding-bottom: 5px;
		}
			nav ul li a:hover, .active{
				border-color: #F77A4C;
				color: #F77A4C;
			}
header{
	width: 100%;
	min-height: 70%;
	display: flex;
	align-items: center;

}
	header .text{
		padding: 20px;
		background-color: rgba(237,108,66,0.75);
		width: 40%;
		margin-left: 75px;
		color: white;
	}
		header .text h1{
			font-size: 50px;
			font-family: Montserrat, sans-serif;
			text-transform: uppercase;
		}
		header .text ul{
			font-size: 28px;
			font-family: Montserrat, sans-serif;
			list-style-image: url("../img/cube.png");
			margin-left: 60px;
		}

article{
	width: 100%;
	background-color: white;
	box-shadow: 0px 0px 20px black;

	transform: skewY(-5deg);
	padding-bottom: 60px;
}
	article > *{
		transform: skewY(5deg);
	}
	article h1{
		text-align: center;
		font-size: 40px;
		font-family: Montserrat, sans-serif;
		text-transform: uppercase;
		padding-top: 80px;
		margin-bottom: 50px;
		color: #F77A4C;
	}
	article h1:before, article h1:after{
		content: "";
		background-color: #F77A4C;
		height: 4px;
		width: 15vw;
		display: inline-block;
		margin: 15px 50px;
	}
	article h2{
		font-size: 26px;
		font-family: Montserrat, sans-serif;
		text-transform: uppercase;
		color: #F77A4C;
		margin-left: 8%;
		margin-top: 20px;
		padding-top: 10px;
	}
		article h2::after{
			content: "";
			background-color: #F77A4C;
			height: 5px;
			width: 5vw;
			display: block;
			margin: 5px 0;
			clear: both;
		}
	article h3{
		font-size: 20px;
		font-family: Georgia, sans-serif;
		color: black;
		margin-left: 9%;
		margin-top: 20px;
		margin-bottom: 5px;
	}
	article .imageLink{
		margin-right: 25px;
	}
	article .imageLink img{
		height: 150px;
		float: right;
		display: inline-block;
		margin: 20px 20px 20px 20px;
		border-right:7px solid #F77A4C;
		border-bottom:7px solid #F77A4C;
		transition: 0.3s all ease-in;
		transform: skewY(5deg);
		position: relative;
		z-index: 90;
	}
		article .imageLink img:hover{
			filter:contrast(300%);
		}
	article p, article ul{
		font-family: Georgia, serif;
		font-size: 18px;
		text-align: justify;
		line-height: 29px;
		text-justify: inter-word;

		width: 80%;
		margin: 0px auto;
		padding: 10px;
		
		text-indent: 40px;
	}
		article p > br{
			display: block;
			margin: 4px 0;
		}

		article p a{
			color: #F77A4C;
			text-decoration: underline;
		}
	article p.none{
		text-indent: 0px;
		margin-bottom: -15px;
	}
	article ul{
		text-align: left;
		list-style-position: inside;
		text-indent: 0;
	}
		article ul li{
			margin: 10px 0;
		}
	article hr{
		border: 2px solid #F77A4C;
		width: 40%;
		margin: 10px auto;
	}

table{
	width: 80%;
	margin: 10px auto;
	border-collapse: collapse;
}
	table tr td{
		border: 1px solid black;	
		padding: 10px 10px 10px 20px;
		font-family: Georgia, serif;
		font-size: 18px;
		line-height: 160%;
	}
	table tr td:first-child{
		background-color: #F77A4C;
		color: white;
		font-weight: bold;
		text-align: center;
	}

.gallery{
	text-align: center;
	width: 80%;
	margin: 0px auto;
}
	.gallery img{
		/*width: calc(25% - 20px);*/
		height: 180px;
		margin: 10px 10px; 
		transition: 0.3s all ease-in;
		box-shadow: 0px 0px 5px black;
	}
		.gallery img:hover{
			transform: scale(1.5) ;
		}

.logos{
	text-align: left;
	width: 80%;
	margin: 0px 10%;
}
	.logos img{
		margin: 50px;
	}
	
	.logos span{
		float: left;
		color: black;
		font-family: Montserrat, sans-serif;
		font-size: 32px;
		margin: 116px 20px;
		display: inline;
		clear: left;
	}

footer{
	height: 50px;
	line-height: 50px;
	width: 100%;
	background-color: white;
	margin-top: 250px;
	text-align: center;
	font-family: Montserrat, sans-serif;
	color: #F77A4C;
}
	footer::before{
		content: "";
		display: block;
		position: absolute;
		background-color: white;
		height: 50px;
		width: 100%;
		z-index: -1;
		transform: skewY(-1.5deg);
		margin-top: -20px;
		box-shadow: 0px 0px 20px black;
	}

.error{
	text-align: center;
}

/* RESPONZIVITA */
@media screen and (max-width: 1040px) {
	header{
		justify-content: center;
	}
	header .text{
		width: 80%;
		margin: 0;
	}
	nav{
		height: auto;
		padding-bottom: 10px;
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 740px) {
	nav ul a:hover{
		border-color: #F77A4C;
	}
}
@media screen and (max-width: 560px) {
	article h1:before, article h1:after{
		margin: 15px 20px;
	}
	nav ul li{
		width: 100%;
		display: block;
		clear: both;
		text-align: center;
		padding: 0;
		margin: 10px 0;
	}
		nav ul li a:hover{
			border-color: #F77A4C;
		}
	article h2::after{
		width: 15vw;
	}
}
@media screen and (max-width: 460px) {
	article h1:before, article h1:after{
		margin: 15px 5px;
	}
	header .text h1{
		font-size: 40px;
	}
	header .text{
		width: 100%;
	}
}
@media screen and (max-width: 300px) {
	article h1:before, article h1:after{
		display: none;
	}
	header .text h1{
		font-size: 28px;
	}
}


.center{
	text-align: center;
	margin: 0px auto;
	text-indent: 0px;
}

.maximg{
	width: 40%;
	border: 2px solid #F77A4C;
}

video, iframe{
	height: 200px;
}

.videodiv{
	margin: 0px auto;
	text-align: center;
	width: 80%;
}

.smallmargin img{
	margin: 10px;
}

.file{
	padding: 10px 20px;
	background-color: #F77A4C;
	text-decoration: none;
	color: white;
	margin: 10px;
	transition: 0.3s all ease-in;
}
	.file:hover{
		background-color: #D5582A;
	}