/*
	Theme Name:Apartment Andredor responsive
	Author:Dorja Lončar
	Description:Tema namijenjena web stranicama iznajmljivača apartmana 'Apartment Andredor'
	Version:1.0
*/

/* Apartment Andredor CSS */

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

/* osnovno uređivanje HTML elemenata ************** */
body{background-color:#FFF;
font-family:'Trebuchet MS',sans-serif;
font-size:16px;
color:#555;}
ul{list-style-type:none;
padding:0;}
a{text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-family: 'Racing Sans One', cursive;
font-weight:lighter;}
img{max-width:100%;
height:auto;}
h1,h2,h3,h4,h5,h6,p,ul,ol{margin-bottom:1em;}
/* layout ****************************************** */
#menu, #content, #sidebar, #page-footer{padding:1em;}
#menu, #page-footer{background-color:#fccaa4;
color:#FFF;}
.wrapper{width:100%;
max-width:1200px;
margin:1em auto;}
.clearfix:after{content:" ";
display:block;
clear:both;}
.col{float:left;
padding-right:1em;}
.col:last-child{padding-right:0;}
.col3-12{width:25%;}
.col4-12{width:33.33%;}
.col6-12{width:50%;}
.col8-12{width:66.66%;}
.dot {height: 7px;width: 7px;background-color: #555;
border-radius: 50%;display: inline-block;margin-right:1em;}
/* HEADER ******************************************** */
/* Navigacija ****************** */
#mobile-button{display:none;}
#menu .wrapper{margin:0 auto;}
#menu ul{margin-bottom:0}
/* Izbornik ***** */
#menu li{display:inline;
margin-right:2em;}
#menu a{font-size:20px;
color:#FFF;
/*text-transform:uppercase*/}
#menu a:visited{color:#777;}
#menu a:hover{color:#000;}
/* Banner ******************** */
#banner{height:480px;
color:#FFF;
display:flex;
background:url(slike/header.jpg) no-repeat center bottom/cover;}
#banner .wrapper{margin:auto;/* centriranje za FF, Chrome, Opera, Safari */
align-self:center; /* IE */}
#banner h1,#banner p{margin-bottom:0;text-shadow:3px 3px 3px #000;}
#banner h1{font-size:96px;}
#banner p{font-size:36px;font-family: 'Sedgwick Ave', cursive;color:#fff;}

/* MAIN *********************************************************** */
#bottom-menu li{display:inline;margin-right:1em;}
.post{border-bottom:1px solid #CCC;
padding-bottom:1em;
margin-bottom:1em;}
a{color:#555;}
a:visited{color:#777;}
a:hover{color:#000;}

/* ASIDE *********************************************************** */
#sidebar a{color:#555;
border-bottom:1px solid #CCC;
display:block;
padding-bottom:5px;
margin-bottom:10px;}
#sidebar a:visited{color:#777;}
#sidebar a:hover{color:#000;}

/* FOOTER ***************************************************************** */
#page-footer h1{font-size:22px;}
#page-footer a{color:#555;
display:inline-block;
margin-bottom:1em;}
#page-footer a:visited{color:#777;}
#page-footer a:hover{color:#000;}
#page-footer i{font-size:2em;
vertical-align:middle;
margin-right:0.5em;}
#contact,#copyright{border-top:1px solid #555;
padding:1em 0;}
#copyright{text-align:right;}

/* GALLERY ******************************************************************* */
 /* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 0px 7px 3px 0px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries ************************************************************** */

/*mali desktop monitori i tableti u landscape orijentaciji*/
@media (max-width:1199px){
	
	.col6-12{width:100%;}
	.post img{margin-bottom:1em;}
	#banner .wrapper{width:90%;}

}
/*svi mobilni uređaji (tableti u vertikalnoj, smartphones i mobiteli u obje orijentacije*/
@media (max-width:1023px){
	
	.col{float:none;
	padding-right:0;}
	.col3-12,.col4-12,.col6-12,.col8-12{width:100%;}
	.column {float: none; width: 100%; padding-right: 0;}
	
	#banner{height:320px}
	#banner h1{font-size:64px;}
	#banner p{font-size:32px;}
	
	#sidebar a,#page-footer a, #menu a{margin-bottom:0.5em;
	padding:1em 0;}	
	#page-footer a,#menu a{display:block;}
	#page-footer .col:last-child a{display:inline-block;}
			
	/* Mobile menu*/
	#mobile-button{display:block;}
	#mobile-button i{font-size:2em;}
	#menu li{display:block;
	text-align:center;}
	#menu ul{display:none;}	
}
/* mali mobilni uređaji(smartphones, mobiteli) u vertikalnoj orijentaciji */
@media (max-width:479px){
	
	#banner{height:180px;}
	#banner h1{font-size:32px;}
	#banner p{font-size:16px;}
	.column {float: none; width: 100%; padding-right: 0;}
}