/* RESPONSIVE WEB DESIGN /////////////////////////////////////////////////////////// */


/* Smartphones  ----------- */
@media only screen and (max-width: 800px) { 

	html {
		-webkit-text-size-adjust: none;  
	}	
	
	.web {
		display:none;
	}
	
	.mobile {
		display:block;
	}
	hr {
		margin:0px 0 10px 0;	
	}
	
	/* HEADER ////////////////////////////////////////////////////////// */
	
	header h1 {
		display:none;	
	}
	
	header {
		background-position:top;
		height:90px;
		
	}
	
	.logo {
		width:170px;
		height:44px;
	}
	
	/* SLAJDER SA SLIKAMA ////////////////////////////////////////////////// */

	
	.flexslider {
		padding-top:90px;
		border-bottom:5px #323534 solid;
	}
	
	.flexslider .slides img {
		max-width:200%;	
	}
	

	.flex-direction-nav li a {
		background-size:60px 60px;
		height: 60px;
		margin: 10px 0 0;
		width:30px;
		
	}
	
	.flex-direction-nav li .prev {
		left: 5px;
	}
	
	.flex-direction-nav li .next {
		background-position: -30px 0;
		right: 5px;
	}
		
	/* SADRŽAJ //////////////////////////////////////////////////////////// */
	
	.contentHome {
		padding:10px;
		padding-top:3%;
		padding-bottom:0px;
		text-align:center;
		
	
	}
	
	.contentHome article {
		width:99%;
		
	}
	
	.content {
		padding:10px;
		padding-top:110px;
		padding-bottom:0px;
		text-align:center;
		
		
	}
	
	.content img {
		margin:0 auto 20px auto;
		float:none;
	
	}
	
	.content  article {
		width:99%;
		margin-right:none;
		margin-bottom:10px;
		margin-top:10px;
		
	}
	
	.content article img {
		width:100%;
		
	}
	
	.contentHome article a, .frase a,.content  a {
		margin:20px auto;
		background:url(../img/boton.mobil.png) no-repeat;
		text-align:center;
		width:186px;
		padding-left:0;	
	}
	
	.contentHome article a:hover, .frase a:hover, .content  a:hover { 
		background:url(../img/boton.mobil.png) no-repeat 0 -28px;
		
	}
	
	.frase  {
		font-size:14px;
		padding-bottom:35px;
		margin-bottom:15px;
		line-height:19px;
		

	}

	.frase p {
		font-size:20px;
		line-height:27px;	
	}
	
	.frase span {
		font-size:17px;
		line-height:22px;
		
	}
	
	.frase img {
		display: none;	
	}
	
	.frase .especial {
		display:block;
		width:100%;
		margin-top:0px;
	}
	
	#reservationMob a {
		margin:20px auto;
		background:url(../img/boton.mobil.png) no-repeat;
		text-align:center;
		width:186px;
		padding-left:0;		
		
	}
	
	#reservationMob a:hover {
		background:url(../img/boton.mobil.png) no-repeat 0 -28px;
	
	}
	
	#reservationMob p{font-size:16px;}
	#reservationMob h2{font-size:28px;}


	.redi {
		width:100%;
		
	}
	
	.content .carta {
	width:100%;
	margin-right:0px;	
}
	
	
	/* SLIKE SMJEŠTAJ ////////////////////////////////////////////////////*/
	
	
	#apps article {
		width:99%;
		margin-right:none;
		margin-bottom:10px;
		margin-top:10px;
		
	}
	
	#apps article img {
	margin-top:10px;
	width:80%;
	}
	
	
	
	/* FOTO GALERIJA ////////////////////////////////////*/
	
	#galeria {
		width:100%;
		background:#FFFFFF url(../img/bg.claro.jpg) repeat;
		padding-top:1px;
		
	}
	
	#galeria img {
			width:30%;
			margin:5px 5px 10px 5px;
	
	}
	
	
	/* SCROLL  ////////////////////////////////////*/
	
	
	#scrollup {
		padding-top:20px;
		width:62px;
		margin:0 auto;
		
	}
	
	#scrollup a {
		display:block;
		width:62px;
		height:26px;
		background:url(../img/boton.up.png) no-repeat bottom;
		background-size:62px 26px;
	
	}
	
	/*FOOTER  ////////////////////////////////////////////////////////*/


	footer {
		text-align:center;
		margin:0 auto;
	
	}
	
	footer article {
		width:100%;
		
	}
	
	footer .about {
		padding-top:30px;
		
	}
	footer .about a {
		padding-top:0px;
		float:none;
	
	}

	/*FORME  ////////////////////////////////////////////////////////*/

	form input[type=text]  {
		
		width:250px;
	}
	
	
	textarea  {
		width:250px;
		
	}
	
	
}

@media only screen and (max-width: 800px) and (orientation:landscape) {
	
	.contentHome {
		text-align:center;
		margin:0 auto;
	}
	
	#galeria img {
		width:30%;
		margin:8px 8px 15px 8px;

	}

.lista li{
	list-style:none;
	margin:0 auto;
	font-style:underline;
	}