@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
/* CSS Document */

/* ========= Preload page =========== */
.preloader {position: fixed; width:100%; height: 100%; text-align: center; top:20%; left:0px; z-index: 0;}
#preloaderImage {display: inline-block; margin-top: 10px;}
/* ========= Preload page end =========== */

html, body, div, span, 
h1, h2, p, img, strong, ul, li {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

p {
	font-size:14pt;
	line-height: 15pt;
	margin-top: 15px;
	
}
h1, h2, p {
font-family: 'PT Sans Narrow', sans-serif;
	font-weight: normal;
	color:#fff;
}
h1 {
	font-size:16pt;
	line-height: 16pt;
	margin-bottom: 2px;
}
h2 {
	font-size:15pt;
	line-height: 14pt;
}
body {
	font-size:12px;
	margin:0;
	text-align:center;
	background: #e3e3e5;
	overflow-x: hidden; overflow-y: hidden;
}


a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none;}
a img { border:0; }
.clear { clear:both; }

#page_home { z-index:10000; background-color: #2c2c2c; }


/*--------------MENU-----------------------*/
#menu {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index:7000;
	text-align: center;	
}

ul#navi {
    list-style: none;
    display: inline-block;
}
ul#navi li {
	width: 23px;
	height: 23px;
	float: left;
}
ul#navi li a {
    display: block;
    width: 23px;
    height: 23px;
}

ul#navi .home a,
ul#navi .my_unique a,
ul#navi .my_inspirations a,
ul#navi .my_budapest a,
ul#navi .my_contact a,
ul#navi .copyright a { background: url(../images/menu_icons_tablet.png); background-repeat: no-repeat;}

.hide {
	visibility: hidden;
}
.show {
	visibility: visible;
}

/*-------------------- GALLERY -----------------------------------------*/
#page_my_budapest { 
	overflow: hidden;
}

.wrapbox {
	/*overflow: hidden;*/
	margin-top: 5%;
	margin-left: 10%;
	margin-right: 10%;
	background: url(../images/bg_my_budapest.png) no-repeat top;
 	background-size: contain; 
 	height: 500px; 
}
.box {
  float: left;
  position: relative;
  width: 10%;
  padding-bottom: 10%;
}
.boxInner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
  z-index: 100;
}
.boxInner_hover {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}


.boxInner img, .boxInner_hover img {
  width: 100%;
 -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
  margin-bottom: 0;
}


/*-----------------------imagemapper-------------------------------*/
.imagemapper-wrapper { margin: 0 auto; }
.pin-style {
	z-index: 10; 
	cursor: pointer; 
	position: absolute; 
	box-shadow: none !important;
	top: -77px; 
	left: -39.5px;
}
.imapper-pin-wrapper {
	height: 0px;
	transform-origin:0% 0%;
	-webkit-transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-ms-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;
}
.imagemapper-wrapper {
	position:relative;
	visibility:hidden;
	margin: 0 auto;
	/*text-align: left !important;*/
}
/*------------------ MEDIA -----------------------------*/


@media only screen and (max-width : 350px) {
  /* Smartphone view: 1 tile */
	.wrapbox {
		margin-top: 10%;
		margin-left: 5%;
		margin-right: 5%;
	}  
  .box {
	 width: 20%;
	 padding-bottom: 20%;
  }
  #page_my_contact {padding-top: 10%;}
}	
@media only screen and (max-width : 480px) and (min-width : 351px){
  /* Smartphone view: 1 tile */
	.wrapbox {
		margin-top: 10%;
		margin-left: 5%;
		margin-right: 5%;
	} 
  .box {
	 width: 15%;
	 padding-bottom: 15%;
  }
  	#page_my_contact {padding-top: 10%;}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
  /* Tablet view: 7 tiles */
	.wrapbox {
		margin-top: 10%;
		margin-left: 5%;
		margin-right: 5%;
	}   
  
  .box {
	 width: 14%;
	 padding-bottom: 14%;
  }
	#page_my_contact {padding-top: 8%;}
}
@media only screen and (max-width : 800px) and (min-width : 651px) {
  /* Small desktop / ipad view: 8 tiles */
  .box {
	 width: 12%;
	 padding-bottom: 12%;
  }
	#page_my_contact {padding-top: 5%;}  
}
@media only screen and (max-width : 1050px) and (min-width : 801px) {
  /* Small desktop / ipad view: 8 tiles */
  .box {
	 width: 12%;
	 padding-bottom: 12%;
  }
	#page_my_contact {padding-top: 3%;}  
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
  /* Medium desktop: 9 tiles */
  .box {
	 width: 11%;
	 padding-bottom: 11%;
  }
	#page_my_contact {padding-top: 2.5%;}  
}
@media only screen and (max-width : 1900px) and (min-width : 1291px) {
	#page_my_contact {padding-top: 1.5%;}  
}