/* CSS Document */

* {
	margin: 0;
	padding:0;
	scroll-behavior: smooth;
}

@font-face {
	font-family: font1;
	src: url(fonts/BebasNeue.otf);
}

@font-face {
	font-family: font2;
	src: url(fonts/PRISTINA.TTF);
}



body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #0E0E0E;
}

p {
	margin: 10px;
	color:white;
	font-family: font2;
	font-size: 14pt;



}
/*Prazni divovi*/
.clear {
	clear: both;
}

/*HEADER*/

a {
	text-decoration: none;
}


.wrapper:first-child {
	background-color: #0E0E0E;/*da bi header bio fiksiran*/
	position: fixed;
	left: 0;
	top: 0;
	height: 100px;
	z-index: 999;
}

  header, main {
	max-width: 1200px;
	margin: 0 auto;
	background-color: #0E0E0E;
}

header h1 {
	padding-top: 20px;
	float: left;
}

header h1 a {
	font-family: font1;
	font-size: 50px;
	font-weight: normal;
	text-transform: uppercase;
	color: white;

}

header nav {
	padding-top: 50px;
	float: right;
	font-family: font1;

}

header nav a {
	margin-left: 15px;
	padding: 40px 10px;
	font-size: 18px;
	text-transform: uppercase;
	color: white;
	transition: 0.5s;
	text-decoration: none;
}

.logo{
	background: url(images/logo-med.jpg.png);
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	animation: logo-fade 2s ;
}

@keyframes logo-fade {

  	0%   {opacity: 0;}
	100% {opacity: 1;}

}

header nav a:hover {
	color: #C77D1E;
	transition: 0.8s;

}


/*NASLOVI*/



section h2 {
	padding-top: 100px; /*da bi spustili naslove kod skrola*/
	text-align: center;
	border-bottom: 2px solid white;
	font-family: font1;
	font-size: 40px;
	font-weight: normal;
	text-transform: uppercase;
	color: white;
	margin-bottom: 100px;

}

h2:hover{
font-size: 45px;
color: #C77D1E;
transition: 0.2s;
transition-delay: 0.5s;
transition-timing-function: ease;
border-bottom: 2px solid #C77D1E;

}




section article {
	overflow: auto;
	margin-top: 40px;
	float: left;
	position: relative;
	padding: 10px;
	box-sizing: border-box;

}

.artikl{
width: 300px;
height: 300px;
text-align: center;

}

.izbor{
	filter: grayscale(0.9)
}

.izbor:hover {
	filter: none;
}

section article img {
	width: 100%;
}

section article p {  /*tekstovi pod artiklima*/
	padding: 10px;
	font-family: font2;
	font-size: 20px;
	position: absolute;
	bottom: 20px;
	right: 10px;
	margin: 0;

}

/*FOOTER*/


footer {
	font-family: font1;
	height: 70px;
	padding-top: 15px;
	text-align: center;
	background-color: #3E1A04;
	animation: footer-boja 10s infinite;
}

@keyframes footer-boja {

  	0%   {background-color: #252323;}
	50%  {background-color: #C77D1E;}
  	100% {background-color: #252323;}

}


/*FORMA*/

label, input[type="submit"] {
	font-family: font1;
	font-size: 20px;
}

label, input, textarea {
	display: block;
	text-align: center;
	margin-bottom: 5px;
	box-sizing: border-box;
	color: white;
	background-color: #0E0E0E;
	border-radius: 10px;

}



input, textarea {
	margin-bottom: 30px;
	padding: 10px;
	font-family: Arial, sans-serif;
}

/*DUGME FROME*/

input[type="submit"] {
	text-align: center;
	border: 1px solid #666;
	background-color: white;
	color: #191d21;
	letter-spacing: 1px;
	transition: 0.5s;
}

input[type="submit"]:hover {
	background-color: #1D0F04;
	transition: 0.2s;
	transition-timing-function: ease-out;
	color: white;
	cursor: pointer;
}

textarea {
	resize: none;
	color: white;
	background-color: #0E0E0E;
	border-radius: 10px;

}

section#kontakt {
	overflow: auto;
}


/*DESKTOP*/

	[class*="col-"] {
    	float: left;
	}


    .col-l-6 {width: 50%;}
    .col-l-12 {width: 100%;}



/*TABLET*/
@media screen and (max-width: 960px) {


    .col-m-6 {width: 50%;}
    .col-m-12 {width: 100%;}


	header, main {
		width: 96%;
	}

	.wrapper:first-child {

		position: fixed;
		height: 200px;


	}


	header h1, header nav {

		float: inherit;
		text-align: center;
	}

	header nav {

	padding: 10px 0;

	}

	header h1 {
	margin: 0 auto;

	}


}


/*MOBILNI*/

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


    .col-s-12 {width: 100%;}


    header nav {
    	padding-top: 0;
    }


    header nav a {
    	display: block;
    	padding: 5px 0;
    	margin-left: 0;
	    }

    .wrapper:first-child {
		position: static;
    	height: 280px;

    }

	header h1 {

	margin: 0 auto;

	}

}