/*

	plava: #20c4f4
	crvena: #ed1c24;

*/

html, body {
	width: 100%
	height: 100%;
	margin: 0;
	padding: 0;
}


::selection {
	background: rgba(32,196,244,.75);
    color: #000;
}
::-moz-selection {
	background: rgba(32,196,244,.75);
    color: #000;
}

/* ------------------------------ GRID */

.grid {
	max-width: 900px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 1em;
	margin: auto;
	font-family: 'Muli', sans-serif;

}

/* ------------------------------ TOP */

.top {
	grid-column: 1/9;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
	align-items: center;
	padding-top: 2rem;
	/* box-shadow: 0 10px 20px -20px #000; */
}

	.logo {
		grid-column: 1/2;
	}

	.nav {
		grid-column: 2/4;
		text-align: right;
		/* font-weight: 600;
		font-size: 1rem;
		background-color: #FFF; */
		z-index: 999;
	}

		.nav nav ul {
			overflow: hidden;
		}

		.nav nav ul li {
			display: inline-block;
			padding-left: 1.5rem;
		}

		.nav nav ul li a {
			font-family: 'Teko', sans-serif;
			font-size: 1rem;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.2rem;
			background-image: linear-gradient(180deg,transparent 50%, rgba(42, 196, 244, 0.9) 0);
	    	background-size: 0 100%;
	    	background-repeat: no-repeat;
	    	text-decoration: none;
	    	color: #000;
	    	-webkit-transition: background-size .2s ease;
	    	transition: background-size .2s ease;
	    	padding: 0;
		}

		.nav nav ul li a:hover {
			background-size: 100% 100%;
	    	cursor: pointer;
	    	color: #000;
		}

		/* ul:first-child {
			padding-left: 0;
		}

		ul li:first-child {
			padding-left: 0;
		} */

		.pljeka {
			font-family: 'Teko', sans-serif;
			font-size: 1rem;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.2rem;
			display: none;
			justify-self: end;
		}

		#toggle {
			display: none;
		}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #20c4f4;
}

/* ------------------------------ ZAGLAVLJE */

.head {
	grid-column: 2/8;
	text-align: center;
	padding: 3rem 1rem 0;
}

	.head h1 {
		font-family: 'Teko', sans-serif;
		font-size: 3rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5rem;
		line-height: 3rem;
	}

	.head h2 {
		color: #444;
		font-weight: 400;
		font-size: 1.2rem;
		line-height: 1.5rem;
	}

/* ------------------------------ AUTOMOBIL */

.auto {
	grid-column: 3/7;
	overflow: visible;
	padding-top: 2rem;
}

	#TocakL {
		-webkit-animation: rotation 1500ms infinite linear;
		-moz-animation: rotation 1500ms infinite linear;
		-o-animation: rotation 1500ms infinite linear;
		animation: rotation 1500ms infinite linear;
		/*
		transform-origin: 15.62% 74.51%;
		-webkit-transform-origin: 15.62% 74.51%;
		-moz-transform-origin: 15.62% 74.51%;
		*/
	}

	@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(360deg);}
	to   {-webkit-transform: rotate(0deg);}
	}
	@-moz-keyframes rotation {
	from {-moz-transform: rotate(360deg);}
	to   {-moz-transform: rotate(0deg);}
	}
	@-o-keyframes rotation {
	from {-o-transform: rotate(360deg);}
	to   {-o-transform: rotate(0deg);}
	}
	@keyframes rotation {
	from {transform: rotate(360deg);}
	to   {transform: rotate(0deg);}
	}

	#TocakD {
		-webkit-animation: rotationD 1500ms infinite linear;
		-moz-animation: rotationD 1500ms infinite linear;
		-o-animation: rotationD 1500ms infinite linear;
		animation: rotationD 1500ms infinite linear;
		/* 
		transform-origin: 84.31% 74.51%;
		-webkit-transform-origin: 84.31% 74.51%;
		-moz-transform-origin: 84.31% 74.51%;
		*/
	}

	@-webkit-keyframes rotationD {
	from {-webkit-transform: rotate(360deg);}
	to   {-webkit-transform: rotate(0deg);}
	}
	@-moz-keyframes rotationD {
	from {-moz-transform: rotate(360deg);}
	to   {-moz-transform: rotate(0deg);}
	}
	@-o-keyframes rotationD {
	from {-o-transform: rotate(360deg);}
	to   {-o-transform: rotate(0deg);}
	}
	@keyframes rotationD {
	from {transform: rotate(360deg);}
	to   {transform: rotate(0deg);}
	}

	#Automobil1 {
		-webkit-animation: rotationS 200ms infinite linear;
		-moz-animation: rotationS 200ms infinite linear;
		-o-animation: rotationS 200ms infinite linear;
		animation: rotationS 200ms infinite linear;
		transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
	}

	@-webkit-keyframes rotationS {
	from {-webkit-transform: rotate(0deg);}
	to   {-webkit-transform: rotate(1deg);}
	}
	@-moz-keyframes rotationS {
	from {-moz-transform: rotate(0deg);}
	to   {-moz-transform: rotate(1deg);}
	}
	@-o-keyframes rotationS {
	from {-o-transform: rotate(0deg);}
	to   {-o-transform: rotate(1deg);}
	}
	@keyframes rotationS {
	from {transform: rotate(0deg);}
	to   {transform: rotate(1deg);}
	}


.kontakt {
	padding-bottom: 1rem;
}

.kontakt:last-child {
	padding-bottom: 0rem;
}

/* ------------------------------ MAPA */

#map {
		grid-column: 1/9;
        position: relative;
        padding-bottom: 50%; // Ovo je aspect ratio
        height: 0;
        overflow: hidden;
}

    #map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/* ------------------------------ SEKCIJE */

.sekcija{
	grid-column: 2/8;
	text-align: center;
	padding: 3rem 1rem;
	border-top: 1px #aaa dashed;
}

	.sekcija h1 {
		font-family: 'Teko', sans-serif;
		font-size: 2rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		line-height: 1.5rem;
	}

	.sekcija h2 {
		font-family: 'Teko', sans-serif;
		font-size: 1.5rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		line-height: 0rem;
	}

	.sekcija .titula {
		font-family: 'Teko', sans-serif;
		font-size: 1.2rem;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		color: #444;
		padding-top: 2rem;
	}

	 p {
		color: #444;
		font-weight: 400;
		font-size: 1.05rem;
		line-height: 1.8rem;
		letter-spacing: 0.03rem;
	}

	.sekcija a {
		font-family: 'Teko', sans-serif;
		font-size: 1.2rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.2rem;
		background-image: linear-gradient(180deg,transparent 50%, rgba(42, 196, 244, 0.9) 0);
    	background-size: 0 100%;
    	background-repeat: no-repeat;
    	text-decoration: none;
    	color: #000;
    	-webkit-transition: background-size .2s ease;
    	transition: background-size .2s ease;
    	padding: 0 0.5em;
	}

	.sekcija a:hover {
		background-size: 100% 100%;
    	cursor: pointer;
    	color: #000;
	}

/* ------------------------------ GALERIJA */

.gal {
	grid-column: 1/9;
	background-color: #eee;
}


.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}
.gallery-item {
    flex-basis: 33.3%;
    margin-bottom: 1px;
    opacity: .85;
    cursor: pointer;
}
.gallery-item:hover {
    opacity: 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-content {
    font-size: .8em;
}

.lightbox {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
    left: 0;
}
.lightbox-content {
    position: relative;
    width: 70%;
    /* height: 70%; */
    margin: 5% auto;
}
.lightbox-content img {
    border-radius: 2rem;
    box-shadow: 0 0 3px 0 rgba(225, 225, 225, 0);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 1rem;
    top: 45%;
    cursor: pointer;
}
.lightbox-prev {
    left: 0;
}
.lightbox-next {
    right: 0;
}
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: .8;
}

@media (max-width: 767px) {
    .gallery-container {
        width: 100%;
    }
    .gallery-item {
        flex-basis: 49.80%;
        margin-bottom: 3px;
    }
    .lightbox-content {
        width: 80%;
        height: 60%;
        margin: 15% auto;
    }
}
@media (max-width: 480px) {
    .gallery-item {
        flex-basis: 100%;
        margin-bottom: 1px;
    }
    .lightbox-content {
        width: 90%;
        margin: 20% auto;
    }
}

/* ------------------------------ FUTER */

.footer {
	grid-column: 1/9;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-areas: 
	"flijevi fmid fdesni"
	padding-top: 2rem;
	align-items: center;
	font-size: 0.8em;
	font-weight: 600;
	color: #888;
	letter-spacing: 0.05em;
	padding: 2rem 0;
	border-top: 1px #aaa dashed;
}

	.footer nav ul {
			overflow: hidden;
			padding: 0;
		}

	.footer nav ul li {
		display: inline-block;
		padding: 1rem 1rem;
	}

	.footer a {
		color: #888;
	}

	.footer a:hover {
		color: #20c4f4;
	}

	.fmid {
		grid-area: fmid;
		grid-column: 5/6;
		text-align: center;
	}

	.flijevi {
		grid-area: flijevi;
		grid-column: 1/5;
		text-align: left;
	}

	.fdesni {
		grid-area: fdesni;
		grid-column: 6/10;
		text-align: right;
	}

	.imglogo {
		height: 35px;
	}





/* ------------------------------ ZA MOB */


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

	.imglogo {
		height: 30px;
	}

	.pljeka {
		grid-column: 2/4;
		display: block;
		cursor: pointer;
		padding-right: 1rem;
	}

	label {
		cursor: pointer;
		font-size: 1.5rem;
	}

	.logo {
		padding-left: 1rem;
	}

	#toggle:checked + nav {
		display: block;
	}

	.nav nav {
		text-align: left;
		display: none;
	}

	.nav nav ul {
		padding: 0rem 2rem;
	}

	.nav nav ul li {
		display: block;
		padding-bottom: 1.5rem;
		padding-left: 0;

	}

	.nav {
		grid-column: 1/4;
		box-shadow: 0 10px 20px -20px #000;
		padding-top: 0;
	}

    .auto {
    	grid-column: 2/8;
    }

    .head {
    	grid-column: 1/9;
    }

    .sekcija {
    	grid-column: 1/9;
    	text-align: left;
    }

    .sekcija a {
    	padding: 0;
    }

    .footer {
    	grid-template-areas: 
		"fmid"
		"flijevi"
		"fdesni";
    }

    .footer nav ul {
    	margin: 0;
    }

    .footer nav ul li {
    	display: block;
    	margin: 0;
    	
    }

    .flijevi, .fdesni {
    	grid-column: 1/10;
    	text-align: center;
    	padding: 0 ;
    }


    .fdesni {
    	grid-row: 3;
    	
    }

    .fmid {
    	padding: 1rem;
    }

    #map {
        padding-bottom: 150%; // This is the aspect ratio
	}

}