/*

	Theme Name: Rostfrei

	Theme URI: http://rostfrei.si

	Description: Rostfrei WordPress Theme from HTML5 Blank

	Version: 1.4.3

	Author: Rostfrei

	Tags: Blank, HTML5, CSS3



	License: MIT

	License URI: http://opensource.org/licenses/mit-license.php

*/



/*------------------------------------*\

    MAIN

\*------------------------------------*/



/* This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php */





/* Color Legend */


:root {
	--pri-color: silver;
	--link-color:#cec0b3;
	--hover-color: #928ca3;
	--bcg-color: black;
	--txt-color: #cec0b3;

  }




/* Reset */

* {
	margin: 0;
	padding: 0;
}
/* Text Elements */
p, li a, span, ul.kategorije li a {
	color: var(--pri-color) ;
}
.bold {
	font-weight: normal;
	color: var(--link-color);
}
.light {
	font-weight: normal;
}
html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bcg-color);
	font-size: 1rem;
	font-family: 'Montserrat', sans-serif;

}
.wrapper {
	
	margin: auto;
	max-width: 100%;
}
header {
	position: sticky;
	top: 0;
	padding: 1rem;
	background-color: var(--bcg-color);
	z-index: 1000;
}
.header {
	display: flex;
	align-items: center;
}
.logo {
	height: 100%;
	margin-bottom: 1rem;
	margin-right: 2.5rem;

	overflow: hidden;
}
.logo-img {
	width: 250px;
}
.logo-img:hover {
	opacity: 0.7;
}
.glava {
	display: flex;
	align-items: center;
}
ul.kategorije {
	display: flex;
}
ul.kategorije li,
nav ul li {
	padding-right: 1rem;
	text-transform: uppercase;

}
ul.kategorije li a {
	text-decoration: none;
}
.left ul.grid {
	display: grid;
	grid-template-columns: 1fr;
	direction: ltr;
  text-align: right;
}
main {
	background-color: var(--bcg-color);
	display: grid;
	grid-template-columns: 1fr;
}
.about p {
	padding-left: 5%;
	padding-right: 5%;
}
nav ul {
	display: flex;
	margin-bottom: 1rem;
}
nav ul li {
	list-style: none;
	padding-right: 2rem;
	text-transform: uppercase;
}
nav ul li a:link {
	text-decoration: none;
	color: var(--link-color);
}
nav ul li a:hover {
	color:var(--hover-color);
}

img {
	max-width: 100%;
	height: auto;
}
.left {
	padding: 0 1rem;
}
ul.kategorije {
	display: flex;
}
.left ul#menu-sidebar-menu li {
	white-space: nowrap;
	padding-right: 1rem;
	text-transform: uppercase;
}
/* Gallery */

section.gallery {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	gap: .7rem;
}

article.project-single,
.projects-home,
article.projekti {
	height: 400px;
	min-width: 200px;
	overflow: hidden;
	width: fit-content;
	position: relative;
	flex: auto;
}

.gallery img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

a h3.project-title {
	font-weight: lighter;
	color:var(--pri-color);
	position: absolute;
	width: 100%;
	margin: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: .7s ease all;
	top: 0;
}

a h3.project-title:hover {
	opacity: 1;
}

.left li {
	padding-bottom: 0.5rem;
}

.left li a {
	text-decoration: none;
	text-transform: uppercase;
	color: black;
}

.left li a:hover,
.left li a:active,
.left li a:focus {
	color:var(--hover-color);

}

nav .current_page_item a,
ul.kategorije li.current-menu-item a {
	color: var(--link-color);
}

ol,
ul {
	list-style: none;
}

img {
	width: 100%;
}
.wp-video {
	max-width: 100vw !important;
  	max-height: calc(100vh - 120px) !important;
}
.copyright {
	font-size: .8rem;
}


.textwidget a:link,
.textwidget a:visited, 
.copyright a {
	color: var(--link-color);
	text-decoration: none;
}
.textwidget a:hover, 
.copyright a:hover, .copyright a:active {
	color: var(--hover-color);

}
.textwidget {
	padding-bottom: 2rem;
}
footer {
	padding: 1.5rem;
}
/* For devices bigger than 900px */
@media only screen and (min-width: 900px) {
	main {
		display: grid;
		grid-template-columns: auto auto;
    direction: rtl;
  }
  
}
/* For devices bigger than 700px */
@media only screen and (min-width: 700px) {
	
	header {
		display: grid;
		grid-template-columns: 1fr;
	}
	main.template-about {
		display: grid;
		grid-template-columns: minmax(auto, 1200px);
		justify-content: left;
	}
	section.about {
		display: flex;
		gap: 1.3rem;
		padding: 0 5%;
	}
	.about p {
		padding-left: 0;
		padding-right: 0;
	}
	.single-projekti main {
	flex-direction: row-reverse;
	}
	
}
@media only screen and (max-width: 500px) {
	.header {
	display: block;	
	padding-bottom: 0;
	}
	.logo {
		margin-bottom: 0;
	}
}
@media only screen and (max-width: 400px) {
	.left ul#menu-sidebar-menu li {
		white-space: inherit;
	}
}