/* ===== General ===== */

::-moz-selection {
    background-color: #ffcd1f;;
    color: #3e1900;
}

::-webkit-selection {
    background-color: #ffcd1f;
    color: #3e1900;
}

::selection {
    background-color: #ffcd1f;
    color: #3e1900;
}

body {
	background-color: #ffffff;
	height: 100%;
}

html {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

h1 {
	font-size: 2.4em;
 	margin: 0.6em 0;
	font-weight: 300;
	text-transform: uppercase;
	color: #292929;
	border-left: 4px solid #292929;
	padding-left: 8px;
}

p {
	font-size: 1.4em;
	margin: 0.4em 0;
	font-weight: 300;
	color: #454545;
}

.bold {
	font-weight: 400;
}

.orange {
	color: #ffa800;
	border-color: #ffa800;
}

.white {
	color: #ffffff;
}

.wrapper {
	width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
}
.clearer {
	clear: both;
}

img {
    display: block;
	margin: 0 auto;
    height: auto;
    max-width: 100% !important;
}

.video-container {
    position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.remove::after  {
    content: none;
    z-index: 0;
}

.center-txt {
	text-align: center;
}


/* =============================== HEADER + MENU  =============================== */

.logo {
	display: block;
	height: 168px;
	width: 200px;
	position: fixed;
	background-image: url("../images/logo.png");
	background-size: contain;
	top: 30px;
	left: 30px;
	z-index: 60;
}

.menubutton {
	display: block;
	color: white;
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 71;
}

.nav-icon {
	width: 40px;
	height: 34px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	z-index: 71;
}

.nav-icon span {
	display: block;
	position: absolute;
	height: 5px;
	width: 100%;
	background: #ff911a;
	border-radius: 5px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.nav-icon span:nth-child(1) {
	top: 0px;
}

.nav-icon span:nth-child(2), .nav-icon span:nth-child(3) {
	top: 14px;
}

.nav-icon span:nth-child(4) {
	top: 28px;
}

.nav-icon.open span:nth-child(1) {
	top: 14px;
	width: 0%;
	left: 50%;
}

.nav-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-icon.open span:nth-child(4) {
	top: 14px;
	width: 0%;
	left: 50%;
}

.menu {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 70;
	width: auto;
	padding: 40px 20px 20px 20px;
	text-align: center;
	display: none;
	background: rgba(49,49,49,1);
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.4s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.menu li {
	display: block;
	margin: 10px;
}
.menu li.active {
	display: block;
	color: #ffffff;
	text-decoration: underline;
}
.menu li a{
	text-decoration: none;
	color: #ffffff;
}
.menu li a:hover{
	display: block;
	color: #afafaf;
}

.arrow {
	display: block;
	width: 62px;
	height: 30px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin: 0 0 0 -31px;
	z-index: 71;
}

.arrow:hover {
	opacity: 0.6;
}

.arrow span {
	position: absolute;
	display: block;
	width: 62px;
	height: 30px;
	background: url("../images/arrow.png") no-repeat scroll 0 0 transparent;
	-webkit-animation: red-bounce 1s linear infinite;
	        animation: red-bounce 1s linear infinite;
}

.dark-arrow span {
	background: url("../images/arrow-dark.png") no-repeat scroll 0 0 transparent;
}

@-webkit-keyframes red-bounce {
    0% { top: 0%  }
	50% { top: 10% }
    100% { top: 0% }
}

@keyframes red-bounce {
    0% { top: 0%  }
	50% { top: 10% }
    100% { top: 0% }
}



/****** sections ****/

.slide {
	background-position: center center;
	background-size: cover;
}
.slika-1 {
	background-image: url("../images/pozadina-1-l.jpg");	
}

.slika-2 {
	background-image: url("../images/pozadina-2-l.jpg");	
}

.slika-3 {
	background-image: url("../images/pozadina-3-l.jpg");	
}

.sec-2 {
	background: url("../images/beton.jpg") repeat;	
}

.sec-3 {
	background: #000000;	
}

.sec-4 {
	background: url("../images/beton.jpg") repeat;	
}

.sec-5 {
	background: url("../images/beton-svetao.png") repeat;	
}

.sec-6 {
	background: url("../images/beton.jpg") repeat;	
}


.bio-holder {
	margin-bottom: 40px;
}

.three {
	display: inline-block;
	width: 20%;
	vertical-align: top;
	padding: 10px;
	text-align: center;
	position: relative;
}

.three span {
	display: block;
	font-size: 20px;
	margin-top: 6px;
}

.three img {
	border-radius: 50%;
}

.seven {
	display: inline-block;
	width: 80%;
	vertical-align: top;
	padding: 10px;
}

.orange-link {
	font-weight: 400;
	color: #ff8400;
}

.orange-link:hover {
	text-decoration: underline;
}

.bio-ime {
	font-size: 44px;
	font-weight: 400;
	color: #ff8400;
}

.bio-poso {
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 16px;
	color: #ff8400;
	line-height: 22px;
}

.five {
	display: inline-block;
	vertical-align:  middle;
	width: 50%;
	text-align: center;
	padding: 10px;
}

.repertoar {
	font-size: 34px;
	font-weight: 400;
	text-transform: uppercase;
}

.pdf-holder {
	display: inline-block;
	vertical-align:  middle;
	margin-right: 100px;
	text-align: center;
}

.pdf img {
	margin-top: 20px;
}

.pdf:hover {
	opacity: 0.9;
}

.soc {
	display: inline-block;
	vertical-align: middle;
	margin: 10px 20px 0 0;
}

.soc img {
	max-width: 80px!important;
}

.soc:hover {
	opacity: 0.8;
}

.galerija {
	border: 4px solid #ffffff;
}

.galerija:hover {
	opacity: 0.6;
}

.sec-3 p, .sec-3 h1  {
	color: #cccccc;	
}

.video {
	display: inline-block;
	vertical-allign: top;
	margin: 14px;
}

.video:hover {
	opacity: 0.6;
}




/* =============================== KONTAKT  =============================== */

.mail {
	font-weight: 400;
	color: #ffa800;
	text-decoration: none;
}

.mail:hover {
	color: #ff8503;
	text-decoration: underline;
}

.error[generated=true] {
	display: block;
	width: 100%;
	background: #fd4f4f;
    color: #ffffff;
    font-size: 98%;
    padding: 2px 10px;
	position: relative;
}

.error[generated=true]:after {
	top: 100%;
	left: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(253, 79, 792, 0);
	border-top-color: #fd4f4f;
	border-width: 8px;
}

input, textarea {
	color: #454545;
	border: 0px;
	padding: 14px 40px 14px 14px;
	width: 100%;
	display: block;
	margin-bottom: 18px;
	font-size: 1.4em;
	background-color: #ffffff;
	background-repeat: no-repeat;
}

input:focus, textarea:focus {
	outline: none;
	box-shadow: 0 0 0 1px #dddddd inset;
}

textarea {
	width: 100%;
	min-height: 200px;
	height: 200px;
	resize: vertical;
}

input[type=submit] {
	cursor: pointer;
	margin: 0 0 20px 0;
	display: block;
	background: #ffa800;
	color: #ffffff;
	border-bottom: 4px solid #905100;
}

input[type=submit]:hover {
	background: #ff8503;
}

.response {
	display: block; 
}

.response .success {
	padding: 20px 10px;
	font-size: 1.6em;
	background: #65b937;
	margin: 70px 0 20px 0;
	text-align: center;
	display: block;
}

.response .failure {
	padding: 20px 10px;
	font-size: 1.6em;
	background: #fd4f4f;
	margin: 70px 0 20px 0;
	text-align: center;
	display: block;
}

.response .success, .response .failure  {
	color: #ffffff;
}

label {
	font-size: 1.2em;
}


@media only screen and (max-width: 1240px) {
	.wrapper{
		width: 100%;
		margin: 0;
		padding: 60px;
	}
	.three {
		width: 30%;
	}
	.seven {
		width: 70%;
	}	
	h1 {
		font-size: 2.2em;
	}	
	p {
		font-size: 1.2em;
		margin: 0.3em 0;
	}

}

@media only screen and (max-width: 800px) {
	.wrapper {
		padding: 40px;
	}	
	h1 {
		font-size: 2em;
		margin: 0.5em 0;
	}	
	p {
		font-size: 1.1em;
		margin: 0.3em 0;
	}
	.three {
		width: 50%;
	}
	.seven {
		width: 50%;
	}
	.three span {
		font-size: 18px;
	}
}

@media only screen and (max-width: 760px) {
	.logo {
		top: 50px;
		left: 50%;
		margin-left: -100px;
		height: 168px;
		width: 200px;
	}
	.slide {
		background-position: center top;
		background-size: cover;
	}
	.slika-1 {
		background-image: url("../images/pozadina-1-s.jpg");
	}
	.slika-2 {
		background-image: url("../images/pozadina-2-s.jpg");
	}
	.slika-3 {
		background-image: url("../images/pozadina-3-s.jpg");
	}
	.bio-ime {
		font-size: 38px;
		font-weight: 400;
	}
	.bio-poso {
		font-size: 16px;
		text-transform: none;
	}
	.repertoar {
		font-size: 28px;
	}
	.pdf-holder {
		width: 50%;
		margin-right: 0;
	}
	.pdf img {
		max-width: 140px!important;
	}
}

@media only screen and (max-width: 620px) {
	.wrapper {
		padding: 20px;
	}
	h1 {
		font-size: 1.8em;
		margin: 0.4em 0;
	}
	p, .main-kontakt p  {
		font-size: 1em;
		margin: 0.3em 0;
	}
	.three, .seven {
		width: 100%;
	}
	.three img {
		max-width: 260px!important;
	}
	.five {
		width: 100%;
		margin-bottom: 40px;
	}
	.pdf-holder {
		width: 100%;
		margin-bottom: 40px;
	}
	.pdf img {
		margin-top: 10px;
		width: 100px!important;
	}
	input, textarea {
		padding: 8px 36px 8px 8px;
		margin-bottom: 12px;
		font-size: 1.125em;
	}	
	.response .success, .response .failure {
		line-height: 1em;
		font-size: 1.4em;
		margin: 40px 0 10px 0;
	}
}