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


/* RESET ************************************************************ */
*{box-sizing:border-box;
margin:0;
padding:0;}

/* PRAVILA ZA OSNOVNO UREĐIVANJE HTML ELEMENATA ******************** */
body, a{background-color:#81B0C1;
color: darkslategrey;
font-family:"Trebuchet MS", sans-serif;}

h1{font-family: 'Titillium Web', sans-serif;
color:darkgray;}

a{text-decoration: none;}

img{max-width:100%;
height:auto;}

/* HELPERS *********************************************************** */
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}


/* LAYOUT ************************************************ */

#page-footer, #content, #menu, #banner1, #banner2{padding: 1rem;}

.wrapper{max-width: 1200px;
margin: 0 auto;}

.row{margin-bottom: 1rem;}
.row:last-child{margin-bottom: 0;}

.col{float: left;
margin-right: 2%;}
.col:last-child{margin-right: 0;}

.col-4{width: 32%;}
.col-8{width: 66%;}
.col-6{width: 49%;}
.col-3{width: 23.5%;}

.clearfix:after{content: "";
clear: both;
display: block;}

p{margin: 1rem;}


/* #MENU ********************************************* */
#menu{position: fixed;
left: 0;
top: 0;
width: 100%;
background: white;
opacity: 60%;
}

/* PSDIZAJN LOGO */
#psdizajn-logo{width: 3rem; 
vertical-align:middle;
}

/* IZBORNIK */

#mobile-button{display: none;}

.dropbtn {
  background-color: #227AA1;
  color: #91E4F6;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #0D4267;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;
font-size:120%;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #558FB8;}

/* BANNER 1 ********************************************/
#banner1{background: url("slike/naslovna1.jpg") center center/cover no-repeat;
height: 60vh;
padding-top: 5rem;
}

#banner1 h1{font-size: 3rem; 
text-shadow: 4px 4px 12px black;
}


/* PAGE_FOOTER*************************************** */
#page-footer a{margin: 0 1rem;} 
#page-footer h1{color: #007F3E; 
font-size: 1.5rem; 
margin-bottom: 0.5rem;
}

#psdizajnlogo{width: 90px;
display: inline-flex;
vertical-align: middle;
margin: 0 3rem;
}


/* MEDIA QUERIES************************************************************ */

@media (min-width:992px){
	#menu ul {display: block !important;}
}

/* uređaji <992px - mobilni uređaji */

@media (max-width: 991px) {
	#banner1 h1{font-size: 2em; padding-top: 0.5rem;}
	
	.col{float:none; margin-right:0;}
	
	.col-3, .col-4, .col-6, .col-8 {width:100%;}
	
	.col-6{margin-bottom: 1rem;}
		
	
	
	/* mobile navigation */
	
	#logo, #mobile-button{float: left;
	width: 50%;
	}
	
	
	#mobile-button{display: block;}
	
	#menu ul {text-align: right;
	display: none;}
	
	#menu li{display:block;
	margin-right:0;}
	
	#menu a {display: block;
	padding: 1rem 0;}
	
	#menu #logo a{padding: 0;}
}

@media (max-width:991px) and (orientation:landscape){
	#banner1 {height: 200vh;}
	#banner2 {height: 100vh;}
}