@charset "utf-8";
/* CSS Document */
/*Responsive*/


@media (min-aspect-ratio: 16/9) {
	.fullscreen-bg__video {
		height: 300%;
		top: -100%;
	}
}

@media (max-aspect-ratio: 16/9) {
	.fullscreen-bg__video {
		width: 300%;
		left: -100%;
	}
}

@media (max-width: 767px) {
	.fullscreen-bg {
		background: url(video/zagreb-bcgr.png) center center / cover no-repeat;
	}

	.fullscreen-bg__video {
		display: none;
	}
}


@media screen and (min-width:1260px) and (max-width:1440px) {

	#videoback {
	padding:100px 0;
}

	}

@media screen and (min-width:1024px) and (max-width:1259px) {

	body {
		margin:0;
		padding:0;
		font-family: 'Fjalla One', sans-serif, 'Average Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fjalla One', sans-serif;
		margin:0 0 0.5em;
	}

	p {
		font-family: 'Average Sans', sans-serif;
	}

	.wrapper {
		width:100%;
	}
	.tri {
		width:300px;
		height:257px;
		margin-right:10px;
	}
	.triTekst {
		top:257px;
		width:250px;
	}

	.levi1,
	.levi3,
	.levi5,
	.levi7 {
		background-color:#3498db;
		width:50%;
		height:400px;
		float:left;
		display:inline;
		}

	.desni1,
	.desni3,
	.desni5,
	.desni7 {
		width:50%;
		height:400px;
		float:right;
		display:inline;
	}

	.levi2,
	.levi4,
	.levi6,
	.levi8 {
		background-color:#216694;
		width:50%;
		height:400px;
		float:right;
		display:inline;
	}

	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		width:50%;
		height:400px;
		float:left;
		display:inline;
	}

	.desni1,
	.desni3,
	.desni5,
	.desni7,
	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		padding:70px 20px;
	}

	.desni1 h2, p,
	.desni3 h2, p,
	.desni5 h2, p,
	.desni7 h2, p,
	.desni2 h2, p,
	.desni4 h2, p,
	.desni6 h2, p,
	.desni8 h2, p {
		padding:0 20px 20px 20px;
		text-align:center;
	}

	.program-img h4 {
		width:700px;
	}

	.cd-secondary-nav-trigger {
		border: 1px solid #D8D8D8 !important;
	}

	.cd-secondary-nav-trigger span {
		background: #D8D8D8 !important;
	}

}
@media screen and (min-width:768px) and (max-width:1023px) {

	.wrapper {
		width:100%;
	}

	body {
		margin:0;
		padding:0;
		font-family: 'Fjalla One', sans-serif, 'Average Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fjalla One', sans-serif;
		margin:0 0 0.5em;
	}

	p {
		font-family: 'Average Sans', sans-serif;
	}

	#info-image, #lecturer, #program, #contact-info, #map {
		padding-top: 100px;
	}

	.tri {
		width:auto;
		height:auto;
		margin:40px 0;
		padding:0;
		float:none;
		background:#eee;
	}
	.tri img {
		float:left;
	}
	.triTekst {
		position:relative;
		transition:none;
		top:0;
		left:0;
		float:right;
		width:270px;
	}

	.program-img h4 {
		width:500px;
	}


	.desni1 h2,
	.desni3 h2,
	.desni5 h2,
	.desni7 h2,
	.desni2 h2,
	.desni4 h2,
	.desni6 h2,
	.desni8 h2 {
		font-size:20px;
	}

	.desni1 p,
	.desni3 p,
	.desni5 p,
	.desni7 p,
	.desni2 p,
	.desni4 p,
	.desni6 p,
	.desni8 p {
		font-size:15px
		}

	.desni1,
	.desni3,
	.desni5,
	.desni7,
	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		padding:120px 20px;
	}

	.cd-secondary-nav-trigger {
		border: 1px solid #D8D8D8 !important;
	}

	.cd-secondary-nav-trigger span {
		background: #D8D8D8 !important;
	}

}

@media screen and (min-width:350px) and (max-width:767px) {

	body {
		margin:0;
		padding:0;
		font-family: 'Fjalla One', sans-serif, 'Average Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fjalla One', sans-serif;
		margin:0 0 0.5em;
	}

	p {
		font-family: 'Average Sans', sans-serif;
	}

		#info-image, #lecturer, #program, #contact-info, #map {
		padding-top: 50px;
	}

	.tri { /* vracamo sve u normalni tok za ovu rezoluciju */
		width:auto;
		height:auto;
		margin:40px 0;
		padding:0;
		float:none;
		background:#eee;
	}
	.tri img {
		float:none;
	}
	.triTekst {
		position:relative;
		transition:none;
		top:0;
		left:0;
		float:right;
		width:auto;
		height:auto;
		display:block;
	}

	#icons-info {
		width:auto;
		height:auto;
		margin:0 auto;
		padding:50px 0 0 0;
	}

	#videoback {
		padding: 50px 0;
	}

	.jumbotron p {
		font-size: 30px;
		color: #fff;
		padding-bottom: 0px;
	}

	#icons-info {
		width:100%;
		height:auto;
		margin:0 auto;
		padding:50px 0 0 0;
	}

	.icon1, .icon2 {
		float: left;
		width: 315px;
		height: auto;
		text-align: center;
		margin: 0 125px auto;
	}

	.icon1 {
		padding-bottom:40px;
	}

	.icon1 img, .icon2 img {
		width:60px;
		height:auto;
	}

	.info-vreme1 p {
		display:inline-block;
		padding:0;
		float:left;
		font-size:50px;
	}
	.info-vreme2 p {
		display:inline-block;
		padding:0;
		float:left;
		font-size:50px;
	}

	.program {
		padding-top: 100px;
	}

	.program-img h4 {
		width:300px;
	}

	.program-img h4, .program-img1 h4 {
		border:none;
		width:auto;
	}


	.levi1,
	.levi3,
	.levi5,
	.levi7 {
		background-color:#3498db;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni1,
	.desni3,
	.desni5,
	.desni7 {
		width:auto;
		height:auto;
		float:right;
		display:block;
	}

	.levi2,
	.levi4,
	.levi6,
	.levi8 {
		background-color:#3498db;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		width:auto;
		height:auto;
		float:right;
		display:block;
	}

	.jumbotron h1 {
		padding-top:60px;
		font-size:80px;
		color:#000;
	}

	.jumbotron h2 {
		color:#000;
		}

	#countdown {
		width: 350px;
		height: auto;
		margin: 0 auto;
		font-size: 50px;
	}

	#clock-text p {
		font-size:20px;
		letter-spacing:4px;
		padding-left:20px;
	}

	#map {
		height:300px;
		width:auto;
    }

	iframe {
	width:100%;
	height:1000px;
	}

	.btn-1e {
    padding: 25px 40px;
	}

	#detalji {
		height: 6250px;
		padding: 0;
	}

	.cd-secondary-nav-trigger {
		border: 1px solid #D8D8D8 !important;
	}

	.cd-secondary-nav-trigger span {
		background: #D8D8D8 !important;
	}

}

@media screen and (min-width:500px) and (max-width:767px) {

	body {
		margin:0;
		padding:0;
		font-family: 'Fjalla One', sans-serif, 'Average Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fjalla One', sans-serif;
		margin:0 0 0.5em;
	}

	p {
		font-family: 'Average Sans', sans-serif;
	}

	#cd-logo img {
    	width:70%;
	}

	.icon1, .icon2 {
		width:100%;
		margin:0 auto;
	}

	.info-vreme1 p, .info-vreme2 p {
		float:none;
		}

	.program-img h4 {
		border:none;
		width:auto;
	}

	.program-img1 h4 {
		border:none;
		width: 200px;
    	margin-left: -100px;
		}

	.levi1,
	.levi3,
	.levi5,
	.levi7 {
		background-color:#3498db;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni1,
	.desni3,
	.desni5,
	.desni7 {
		width:auto;
		height:auto;
		float:right;
		display:block;
	}

	.levi2,
	.levi4,
	.levi6,
	.levi8 {
		background-color:#216694;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		width:100%;
		height:auto;
		float:right;
		display:block;
	}

	.jumbotron h1 {
		font-size:60px;
		color:#fff;
		padding-top:50px;
	}

	.jumbotron h2 {
		font-size:28px;
		color:#fff;
		}

	#countdown {
		width: 100%;
		height: auto;
		margin: 0 auto;
		font-size: 50px;
	}

	#clock-text p {
		font-size:20px;
		letter-spacing:4px;
		padding-left:20px;
	}

	#map {
		height:300px;
		width:auto;
    }

	#detalji {
		height: 6250px;
		padding: 0;
	}

	.cd-secondary-nav-trigger {
		border: 1px solid #D8D8D8 !important;
	}

	.cd-secondary-nav-trigger span {
		background: #D8D8D8 !important;
	}

}

@media screen and (min-width:200px) and (max-width:499px) {

	body {
		margin:0;
		padding:0;
		font-family: 'Fjalla One', sans-serif, 'Average Sans', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Fjalla One', sans-serif;
		margin:0 0 0.5em;
	}

	p {
		font-family: 'Average Sans', sans-serif;
	}

	#cd-logo img {
    	width:70%;
	}

	.icon1, .icon2 {
		width:100%;
		margin:0 auto;
	}

	.info-vreme1 p, .info-vreme2 p {
		float:none;
		}

	.program-img h4 {
		border:none;
		width:250px;
		margin: 30px -70px;
    display: block;
	}

	.program-img1 h4 {
		border:none;
		width: 250px;
		margin: 30px -85px;
		display: block;
		}

	.levi1,
	.levi3,
	.levi5,
	.levi7 {
		background-color:#3498db;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni1,
	.desni3,
	.desni5,
	.desni7 {
		width:100%;
		height:auto;
		float:right;
		display:block;
	}

	.levi2,
	.levi4,
	.levi6,
	.levi8 {
		background-color:#216694;
		width:100%;
		height:400px;
		float:left;
		display:block;
	}

	.desni2,
	.desni4,
	.desni6,
	.desni8 {
		width:100%;
		height:auto;
		float:right;
		display:block;
	}

	.jumbotron h1 {
		font-size:60px;
		color:#fff;
		padding-top:50px;
	}

	.jumbotron h2 {
		font-size:28px;
		color:#fff;
		}

	#countdown {
		width: 100%;
		height: auto;
		margin: 0 auto;
		font-size: 50px;
	}

	#clock-text p {
		font-size:20px;
		letter-spacing:4px;
		padding-left:20px;
	}

	#map {
		height:300px;
		width:auto;
    }

	#detalji {
		height: auto;
		padding: 0;
	}

	.cd-secondary-nav-trigger {
		border: 1px solid #D8D8D8 !important;
	}

	.cd-secondary-nav-trigger span {
		background: #D8D8D8 !important;
	}

}

/*Aleksandar Sterijev*/