/*------------------------------------general-----------------------------------------*/
body{
	margin:0;
	padding:0;
	background-color:#F4F3ED;
	overflow-x: hidden;
	overflow-y: scroll;
}	

div{
	margin:0;
	padding:0;
	border:0;
}

img{
	margin:0;
	padding:0;
	border:0;
}

p{
	margin:0;
	padding:0;
	border:0;
}

li{
	list-style:none;
}

a{
	text-decoration:none;
}

/*------------------------------------FONTS-----------------------------------------*/

@font-face{
    font-family:"hhTitle";
    font-style:normal;
	font-weight:normal;
    src: url(http://www.hhdev02.limbosociety.com/fonts/HolderTitle-Regular.otf) format('opentype');
}

.bodyCopy{
	font-family: "europa";
	font-weight: 400;
	font-size:8px;
	letter-spacing: 1px;
	line-height: 16px;
	text-align: justify;
	color:#E86C56;
}

.seeMoreText{
	font-family:"hhTitle";
	font-size:18px;
	letter-spacing:2px;
	color:#E86C56;
}

.textOnPath{
	font-family: "hhTitle";
	fill:#E86C56;
}

.textPath{
	fill:none;
}

.stampTitleHorz{
	font-family:"hhTitle";
	color:#E86C56;
}

/*------------------------------------ANIMS-----------------------------------------*/
@keyframes fadeIn1 {
		0%{opacity:0;}
		100%{opacity:1;}
}

@keyframes bounce1 {	
		0%{transform:translateY(0);}
		50%{transform:translateY(5px);}
		100%{transform:translateY(0px);}	
}

@keyframes bounce2 {	
		0%{transform:translateY(0);}
		50%{transform:translateY(3px);}
		100%{transform:translateY(0px);}	
}

@keyframes bounce3 {	
		0%{transform:translateY(0);}
		50%{transform:translateY(10px);}
		100%{transform:translateY(0px);}	
}


@keyframes fadeScale1 {
	
		0%{opacity:0; transform:scale(0.9,0.9);}
		100%{opacity:1; transform:scale(1.0,1.0);}
	
}



/*------------------------------------NAV-----------------------------------------*/
/*------------------------------------NAV-----------------------------------------*/

#navContainer{
	position:absolute;
	width:100%;
	height: 150px;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
	z-index: 10000;
}

#homeButton{
	position:absolute;
	width:150px;
	height:150px;
	top:0;
	left:0;
	margin:auto;
	background-color:#EBDAB7;
}

#hbText{
	position:absolute;
	transition: 300ms;
}

#hbIcon{
	position:absolute;
	width:90%;
	top: 7px;
    left: 9px;
    transition: 300ms;
}


#homeButton:hover #hbText{
	transform: scale(1.05, 1.05);
}

#homeButton:hover #hbIcon{
	transform: scale(0.95, 0.95);
}

/*#hbText:hover .st0{
	fill:none;
	stroke:#E86C56;
	stroke-miterlimit:10;
}*/

#navList{
	position: absolute;
	top:10px;
	right:-22px;
}

.navItem{
	font-family:"hhTitle";
	display: inline-block;
	color:#E86C56;
	transition: 200ms;
}


.navItem:hover{
	background-color:#E6C98A;
	transform:translateY(2px);
}

.seeMoreLink{
	position:absolute;
	width:120px;
	z-index: 1000;
	transition:200ms;
}

.seeMoreText{
	transition:1000ms cubic-bezier(0.08,0.73,0.42,0.96);
}

.seeMoreArrowSmall{
	position:absolute;
	width:130px;	
	top:8px;
	transition:1000ms cubic-bezier(0.08,0.73,0.42,0.96) 100ms;
}

.seeMoreLink:hover .seeMoreText{
	transform:translateX(5px);
	/*letter-spacing:3px;*/
}

.seeMoreLink:hover .seeMoreArrowSmall{
	transform:translateX(15px);
}

.reader{
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	/*display:none;*/
}


#coordRead{
	position:absolute;
	right:0;
	display:none;
}

.scrollButton{
	position:absolute;
	width:50px;
	height:75px;
	left:0;
	right:0;
	bottom:20px;
	margin:auto;
	
}

.scrollSticker{
	position:absolute;
	width: 100%;
	z-index:1;
	animation:bounce1 2000ms cubic-bezier(0.08,0.73,0.42,0.96)  infinite;
}

.scrollText{
	position:absolute;
	font-family:"hhTitle";
	font-size:8px;
	letter-spacing:5px;
	top:15px;
	left:12px;
	color:#E6C98A;
	z-index:2;
	animation:bounce2 2000ms cubic-bezier(0.08,0.73,0.42,0.96)  infinite;
}

.scrollArrow{
	position:absolute;
	height:35%;
	left:0;
	right:0;
	margin:auto;
	bottom:9px;
	z-index:2;
	animation:bounce3 2000ms cubic-bezier(0.08,0.73,0.42,0.96)  infinite;
}


/*------------------------------------GENERAL-----------------------------------------*/
/*------------------------------------GENERAL-----------------------------------------*/

.wallLine{
	height:1px;
	background-color:#E86C56;
}



/*------------------------------------LOADWINDOW2-----------------------------------------*/
/*------------------------------------LOADWINDOW2-----------------------------------------*/
/*------------------------------------LOADWINDOW2-----------------------------------------*/

#loadWindow2{
	position:fixed;
	width:100vw;
	height:100vh;
	overflow:hidden;
	background-color:#F4F3ED;
	z-index:1000000;	
	display: none;
}

#loadContainer{
	position:absolute;
	width:460px;
	height:440px;
	top:0;
	bottom:0;
	left:40px;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	z-index: 4;
}

#bgLoad2Container{
	position:absolute;
	width:75%;
	height:1px;
	bottom:80px;
	left:0;
	right:0;
	margin:auto;
}

#bgLoad2{
	position:absolute;
	width:100%;
	height:1px;
	background-color:#E86C56;
	transform: scaleX(0);
	transform-origin:0% 0%;
}

.loadTitle{
	font-family:"hhTitle";
	font-size:36px;
	letter-spacing:32px;
	fill:rgba(0,0,0,0);
	stroke-width:1px;
	stroke: #E86C56;
}

#ofPlaceText{
	position:absolute;
	font-family:"hhTitle";
	font-size:28px;
	letter-spacing:26px;
	top:300px;
	left:0;
	right:0;
	margin: auto;
	width:370px;
	-webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: #E86C56;
    transform: translateX(40px);
}

#load2Quote{
	position:absolute;
	width:140px;
	bottom:0;
	left:0;
	right:40px;
	margin:auto;
	text-align:center;
}

#shapersBoard{
	position: absolute;
	width: 61%;
    top: -32px;
    left: 76px;
	background-color:rgba(0,0,0,0.0);
}

.loadTextPath{
	fill:rgba(0,0,0,0.0);
}

.load2Element{
	position:absolute;
	opacity:0;
}

#basker01{
	width:100%;
	top:80px;
	/*transform: translateX(10px);*/
}

#loadCircle{
	width: 120px;
    top:73px;
    left:150px;
    transform: scale(0.9,0.9);
}

.loadScript{
	position:absolute;
}

#loadScript1{
	width: 40px;
    top: -17px;
    left: -39px;
}

#loadScript2{
	width: 40px;
    top: -3px;
    right: -31px;
}

/*------------------------------------LOADWINDOW-----------------------------------------*/
/*------------------------------------LOADWINDOW-----------------------------------------*/
/*------------------------------------LOADWINDOW-----------------------------------------*/


#loadWindow{
	position:fixed;
	width:100vw;
	height:100vh;
	overflow:hidden;
	background-color:#F4F3ED;
	z-index:1000000;	
	/*display: none;*/
}

#loadBorder{
	position:absolute;
	width:100vw;
	height:100vh;
	box-sizing: border-box;
	border: 80px solid #E86C56;
	display: none;
}

#bgLoad{
	position:absolute;
	width:80%;
	height:1px;
	bottom:50px;
	left:0;
	right:0;
	margin:auto;
	background-color:#E86C56;
	transform: scaleX(0);
	transform-origin:0% 0%;
}

#logoContainer{
	position:absolute;
	width:260px;
	height:325px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	z-index:4;
}

.logoElement{
	position:absolute;
	height:100%;
	opacity:0;
	transform:scale(0.9,0.9);
}

/*#logoBorder{
	animation:fadeScale1 1000ms ease-out 100ms forwards;
}

#logoTitleArch{
	animation:fadeScale1 1000ms ease-out 200ms forwards;
}

#logoSubs{
	animation:fadeScale1 1000ms ease-out 300ms forwards;
}

#logoPrickles{
	animation:fadeScale1 1000ms ease-out 400ms forwards;
}*/

#loadTextBlock{
	position:absolute;
	width:100px;
	height:73px;
	background-color:#EBDAB7;
	left:0;
	right:0;
	bottom:0px;
	margin:auto;
	z-index:4;
	display: none;
}

#loadText{
	font-family:"hhTitle";
	font-size:24px; 
	color:#E86C56;
	padding:21px 0px 0px 23px;
}

#loadQuote{
	position:absolute;
	width:140px;
	height:80px;
	top:50px;
	bottom:0;
	left:0;
	right:-520px;
	margin:auto;
	opacity:0;
	/*animation:fadeIn1 1s ease-in forwards;*/
}

/*------------------------------------HOMEPAGE-----------------------------------------*/
/*------------------------------------HOMEPAGE-----------------------------------------*/
/*------------------------------------HOMEPAGE-----------------------------------------*/

.noOverflow{
	overflow:hidden;
}

#entrySection{
	position: relative;
	width:100vw;
	height:100vh;
	will-change:transform;
}

#hoverReader{
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	display:none;
}

#entryBox{
	position:absolute;
	width:95%;
	height:88%;
	top:0;
	bottom:10px;
	left:10px;
	right:0;
	margin:auto;
	z-index: 10;
	
}

#halfParch{
	position:absolute;
	width:58%;
	height:100%;
	right:-4%;
	background-color:#EBDAB7;
	will-change:transform;
}

.entryHalf{
	position:absolute;
	width:50%;
	height:100%;
	top:0;
	bottom:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
	will-change:transform;
}

#wallLine01{
	position:absolute;
	width:100%;
	height:93%;
	top:0;
	right:-5%;
	border-left:1px solid #E86C56;
	border-bottom:1px solid #E86C56;
	background-color:rgba(0,0,0,0.0);
	will-change:transform;
}

#entryDiag01{
	position:absolute;
	width:500px;
	left:-500px;
	bottom:-1px;
	transform: rotate(-26deg);
	transform-origin: 100% 50%;
}

#leftHalf{
	left:0;
}

#rightHalf{
	right:0;
}

#amper{
	font-family: "hhTitle";
    font-size: 110px;
	position:absolute;
	width:72px;
    height:120px;
	top:-60px;
	bottom:0;
	left:20px;
	right:0;
	margin:auto;
	color: #E86C56;
	will-change:transform;
}

.entryContentBlock{
	position:absolute;
	width:80%;
	height:80%;
	top:30px;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

.entryTitle{
	font-family: "hhTitle";
    font-size: 62px;
    letter-spacing: 18px;
    position: relative;
    width: 100%;
    height: 60px;
    color: #E86C56;
    text-align: center;
}

.entryDescript{
	position:relative;
	width:400px;
	left:0;
	right:0;
	margin:20px auto;
}

.entrySeeMoreLink{
	left:0;
	right:0;
	margin:auto;
}

#entryMaria{
	position:relative;
	width:50%;
	left:-10px;
	display: block;
	margin:0 auto;
}

#entryPrickles{
	position:relative;
	width:50%;
	left:-10px;
	display: block;
	margin:0 auto;
}

.goldenCircle{
	position:absolute;
	width:110px;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	opacity:0;
}

#mariaCircle{
	top: -310px;
    left: -230px;
}

#pricklesCircle{
	top: -210px;
    left: -90px;
}

#vase01{
	position:absolute;
	width:auto;
	height:120px;
	left:20px;
	bottom:-20px;
}

/*------------------------------------ABOUT-----------------------------------------*/
/*------------------------------------ABOUT-----------------------------------------*/
/*------------------------------------ABOUT-----------------------------------------*/

#aboutSection{
	position: relative;
	width:100vw;
	height:100vh;
	margin:0 0 0 0;
	opacity:0;
	transform:translateY(20px);
	will-change:transform;
}


#aboutContent{
	position:absolute;
	width:820px;
    height:440px;
	top:0;
	bottom:0;
	left:60px;
	margin:auto;
	background-color:rgba(0,0,0,0.0);
}

#tinBryan{
	position:absolute;
	width:auto;
	height:100%;
	z-index:2;
	top:60px;
}

#shapersContainer{
	position:absolute;
	width:320px;
	height:250px;
	top:0;
	left:430px;
	background-color:rgba(0,0,0,0.0);
}

.ab-arch{
	position:absolute;
	width:100%;
}

#ab-parchArch01{
	top:-2px;
	right:-2px;
	z-index:1;
}

#ab-outlineArch01{
	z-index:3;
}

.aboutText{
	position:absolute;
    width:410px;
    height:80px;
    top:280px;
    left:400px;
}

#abSeeMore{
	position:absolute;
	left:531px;
    bottom:35px;
}

#aboutWalls{
	position:absolute;
	width:100%;
    height:500px;
    top:260px;
    bottom:0;
    right:120px;
	margin:auto;
	z-index:1;
	border-right:1px solid #E86C56;
	border-bottom:1px solid #E86C56;
	background-color:rgba(0,0,0,0.0);
}

#aboutDiag01{
	position:absolute;
	width:500px;
	right: -500px;
    bottom: -1px;
    transform: rotate(26deg);
    transform-origin: 0% 50%;
}

#ladyWrapper{
	position:absolute;
	width:101px;
	height: 150px;
	right: 80px;
    bottom: -40px;
}

#aboutLady{
	position:absolute;
	width:auto;
	height:100%;
}

#aboutLadyBG{
	position:absolute;
	width:auto;
	height: 123px;
    top: 31px;
    left: 2px;
    /*display: none;*/
}

/*-------------------------------SERVICES-----------------------------------------*/
/*-------------------------------SERVICES-----------------------------------------*/
/*-------------------------------SERVICES-----------------------------------------*/

#servSection{
	position: relative;
	width:100vw;
	height:100vh;
	max-height:525px;
	margin:200px 0 0 0;
	background-color:rgba(0,0,0,0.0);
}

#servTitleContainer{
	position:absolute;
	width:100vw;
	height:200px;
	background-color:rgba(0,0,0,0.0);
	overflow:hidden;
}

#servicesTitle{
	position:absolute;
	width:101%;
	left:-9px;
	opacity:0;
	transform:scale(0.8,0.8);
	will-change:transform;
}

#servBlocksCon{
	position:relative;
	width:auto;
	height:330px;
	top:180px;
	left:0;
	right:0;
	margin:auto;
	text-align: center;
	background-color:rgba(0,0,0,0.0);
}

.servBlock{
	position:relative;
	width: 220px;
    height: 330px;
    margin: 0 35px;
	display: inline-block;
	vertical-align:top;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	transform:translateY(40px);
	will-change:transform;
}

.servBlockTitleBlock{
	position:relative;
	width:220px;
	height:200px;
	margin:0 0 10px 0;
	background-color:rgba(0,0,0,0.0);
}

.svgBoard{
	width:100%;
}


#servArchTitle01{
	font-size:30px;
	letter-spacing:4px;
}

#servArchTitle02{
	font-size:30px;
	letter-spacing:4px;
}

#servArchTitle03{
	font-size:30px;
	letter-spacing:4px;
}

#servArchTitle04{
	font-size:28px;
	letter-spacing:8px;
}

.servStampTitle{
	position:absolute;
	top:160px;
	text-align: center;
	width:100%;
}

/*.actualTextPath{
	
}*/

#servStampTitle01{
	font-size:34px;
	letter-spacing:18px;
}

#servStampTitle02{
	font-size:34px;
	letter-spacing:18px;
}

#servStampTitle03{
	font-size:34px;
	letter-spacing:18px;
}

#servStampTitle04{
	font-size:24px;
	letter-spacing:4px;
}

.servBlockText{
	position:relative;
	width:100%;
}

.servIcon{
	position:absolute;
	width:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

#servIcon01{
	height:90px;
}

#servIcon02{
	height:75px;
}

#servIcon03{
	height:105px;
}

#servIcon04{
	height:55px;
}

.servBGNumber{
	font-family: "hhTitle";
	font-size:240px;
	position:absolute;
	top:-40px;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	color:#ebdab7;
}

#servSeeMore{
	position:absolute;
	top:490px;
	left:0;
	right:0;
	margin:auto;
}


/*--------------BLANKETBLOCK----------------------------*/

#blanketWallBlock{
	position:relative;
	width:100vw;
	height:400px;
	margin:-50px 0 100px 0;
	background-color:rgba(0,0,0,0.0);
	overflow: hidden;
}

#blanketWall{
	position:absolute;
	width:100%;
	height:200px;
	bottom:0px;
	right:250px;
	border-top:1px solid #E86C56;
	border-right:1px solid #E86C56;
	background-color:rgba(0,0,0,0.0);
}

#blanketDiag01{
	position:absolute;
	width:700px;
	right:-700px;
	top:-1px;
	transform: rotate(-26deg);
	transform-origin: 0% 50%;
}

#rug01{
	position:absolute;
	width:auto;
	height:120px;
    top:-44px;
    right:18px;
}

#sunbather01{
	position: absolute;
    width: 260px;
    height: auto;
    top: -141px;
    right: -89px;
}

/*-------------------------------SHOP-----------------------------------------*/
/*-------------------------------SHOP-----------------------------------------*/
/*-------------------------------SHOP-----------------------------------------*/

#shopSection{
	position:relative;
	width:100vw;
	height:400px;
	background-color:rgba(0,0,0,0.0);
}

#shopIMGblock{
	position:relative;
	width:400px;
	height:400px;
	margin:0 20px;
	overflow:hidden;
	display:inline-block;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	transform:translateY(40px);
	will-change:transform;
}

#shopIMG{
	position:absolute;
	width:auto;
	height:100%;
	left:-60px;
}

#shopTextBlock{
	position:relative;
	width:400px;
	height:400px;
	margin:0 20px;
	display:inline-block;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	transform:translateY(40px);
	will-change:transform;
}

.shopText{
	position:absolute;
	width:auto;
	height:100%;
}

#shopTextShadow{
	opacity:0;
}

#shopArrowBlock{
	position:relative;
	width:250px;
    height:100px;
    top:-100px;
    bottom:0px;
    margin:auto 0px;
	display:inline-block;
	overflow:hidden;
	background-color:rgba(0,0,0,0.0);
	opacity:0;
	transform:translateY(60px);
	will-change:transform;
}

#shopArrow{
	position:relative;
	width:100%;
	left:-100px;
}

#shopQuote{
	width:140px;
}


/*-------------------------------footer-----------------------------------------*/
/*-------------------------------footer-----------------------------------------*/
/*-------------------------------footer-----------------------------------------*/

#footerContainer{
	position:relative;
	width:100vw;
	height:400px;
	margin:250px 0 0 0;
	opacity:0;
}

/*-------------------------------scrollshit-----------------------------------------*/
/*-------------------------------scrollshit-----------------------------------------*/
/*-------------------------------scrollshit-----------------------------------------*/

/*.viewport {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scroll-container {  
  position: fixed;  
  overflow: hidden;
  z-index: 10;
  display: flex;
  justify-content: center;  
  backface-visibility: hidden;
  transform-style: preserve-3d;
}


.content {
 	
}*/







/*-----------------------------------------MEDIAQS---------------------------------------------------*/
/*-----------------------------------------MEDIAQS---------------------------------------------------*/
/*-----------------------------------------MEDIAQS---------------------------------------------------*/
/*-----------------------------------------MEDIAQS---------------------------------------------------*/
/*-----------------------------------------MEDIAQS---------------------------------------------------*/
/*-----------------------------------------MEDIAQS---------------------------------------------------*/


@media (min-width:1201px){

.navItem{
	font-size:26px;
	line-height:24px;
	letter-spacing:10px;
	margin:0 20px;
}
}

@media (min-width:1081px) and (max-width:1200px){
.navItem{
	font-size: 20px;
    line-height: 20px;
    letter-spacing: 6px;
    margin: 0 15px;
}
}


/*-------------------------------880-1080-----------------------------------------*/
/*-------------------------------880-1080-----------------------------------------*/
/*-------------------------------880-1080-----------------------------------------*/



@media (min-width:880px) and (max-width:1080px){

#navList{
	right:-10px;
}

.navItem{
	letter-spacing: 4px;
	margin: 0 15px;
}
}

/*------------------------ENTRY-------------------------------*/

@media (min-width:881px) and (max-width:1080px){


.entryTitle{
    font-size:48px;
    letter-spacing:14px;
    height:50px;
}

.entryDescript{
	width:300px;
}

#entryMaria{
	width:60%;
}

#entryPrickles{
	width:60%;
}

.goldenCircle{
	width:220px;
}

#amper{
	font-size:90px;
    width:62px;
}

}


/*----------------------ABOUT---------------------------*/

@media (min-width:881px) and (max-width:1080px){

#aboutReader{
	/*display: none;*/
}

#aboutContent{
	width:760px;
	height:400px;
	left: 20px;
	background-color:rgba(0,0,0,0.0);
}

#shapersContainer{
	width: 290px;
    height: 220px;
    left:400px;
}

.aboutText{
	width: 350px;
    height: 95px;
    top: 250px;
    left: 370px;
}

#abSeeMore{
    left: 490px;
    bottom: 0px;

}

#aboutWalls{
	right:0px;
}

}


/*-------------------SERVICES---------------------------*/

@media (min-width:881px) and (max-width:1080px){

#servBlocksCon {
    position: relative;
    width: 660px;
    height: 640px;
}

#servSection {
    height: 850px;
    max-height: 850px;
}   

.servBlock{
	margin: 15px 40px;
}

#servSeeMore {
	top:auto;
    bottom: 0;
}

#blanketWallBlock{
	margin: 0px 0 100px 0;
}         

}


/*-------------------SHOP---------------------------*/

@media (min-width:881px) and (max-width:1080px){

#shopSection{
	margin: 0 0 340px 0;
}

#shopArrowBlock{
	position:absolute;
	top:auto;
	bottom:-140px;
    right:-30px;
}

}



/*-------------------------------660-880-----------------------------------------*/
/*-------------------------------660-880-----------------------------------------*/
/*-------------------------------660-880-----------------------------------------*/