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


/*
Theme Name: Concoction
Theme URI: http://www.concoction.co.nz/
Description: Concoction's Private Template
Author: Tim Eggers
Author URI: http://www.concoction.co.nz/
*/

html, body
{
	background: #FFF;
	margin:0;
	padding:0;
}



p, ul, li, a
{
 font-size:14px;	
 line-height:20px;
 margin:0;
     font-family: "le-monde-livre-std";
	 font-style:italic;


}
.centeredLogo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index:1000;
  width:500px;
  height:178px;
  color:#000;
  background:rgba(255, 255, 255, 0);
  border:4px rgba(154, 125, 49, 0) dashed;
  transition: background 1s, border 1s;
}

.centeredLogo img{
 	width:100%;
	margin-top:50px;

}

.centeredLogo:hover {
	  background: rgba(255, 255, 255, 1);
	  border:10px rgba(154, 125, 49, 1) solid;
}

.centeredLogo:hover p {
	position:absolute;
	top:50%;
	left:50%;
	  transform: translate(-50%, 110%);

}

.centeredLogo:hover p:after {
	content:'~ about us ~';
	transition: content 2s;
}

.panel	{
	display:block;
	width:100%;
	height:auto;
	padding-bottom:70px;
}

.randomObject {
	float:left;
	margin:20px;
	display:block;
}

.randomObject p  {
	display:inline-block;
	position:relative;
	top:250px;
	left:50%;
	transform: translate(-50%, -50%);
	z-index:1;
	padding:10px 30px;
	background:#9A7D30;
	opacity:0;
	color:#000;
	transition: opacity 1s;
}

.randomObject:hover p  {
opacity:1;	
}


.randomObject img {
	width:100%;
	height:auto;
	margin:0;
	position:relative;
}

#object1 {
height:auto;
	width:30%;
	margin-top:180px;
	min-width:200px;	
}


#object2 {
	top:100px;
	right:100px;
	width:30%;
	padding:0;
}

#object3 {
	top:150px;
	right:50px;
	width:20%;
	margin-top:50px;
}

#object4 {
	top:150px;
	right:50px;
	width:30%;
	margin-top:50px;
}

#object5 {
	top:150px;
	right:50px;
	width:30%;
	margin-top:0px;
}

#object6 {
	top:0px;
	right:50px;
	width:30%;
	margin-top:50px;
}

#object7 {
	top:150px;
	right:50px;
	width:30%;
	margin-top:50px;
}

#object8 {
	top:150px;
	right:50px;
	width:30%;
	margin-top:50px;
}

#object9 {
	top:150px;
	right:50px;
	width:50%;
	margin-top:0px;
}

#object10 {
	top:150px;
	right:50px;
	width:20%;
	margin-top:50px;
}

#object11 {
	top:0;
	right:50px;
	width:20%;
	margin-top:50px;
}
#Hcontact
{
	position:fixed;
	bottom:10px;
	right:10px;	
	z-index:1000;
}

#Hlocation
{
	position:fixed;
	bottom:10px;
	left:10px;	
}

#contact
{
	position:fixed;
	bottom:10px;
	right:10px;	
}

#location
{
	position:fixed;
	bottom:10px;
	left:10px;
	z-index:1000;	
}

#slogan
{
	position:fixed;
	top:10px;
	left:10px;	
	z-index:1000;
}

#location a, #Hlocation a
{
	text-decoration:none;
	color:#000;
}

#location a:hover, #Hlocation a:hover
{
	text-decoration:underline;	
}

.grid-item 
{ 
width: 200px; 
background:#345;
}
.grid-item--width2 
{
	 width: 400px; 
	 background:#345;

	 }
	 
	 


/* PORTFOLIO PAGES*/

header {
	position:fixed;
	z-index:1000;
	top:0;
	padding-top:0px;
	display:block;
	background:#FFF;
	height:auto;
	width:100%;	
}

#topLogo {
	margin-top:20px;
	
}

header img
{
	display:block;
	width:500px;
	height:auto;
	margin:0 auto;

}

#mainWrapper
{
	padding-top:150px;	
	position:relative;
		display:block;
		float:left;
        width:100%;
        height: 100%;
        background:#FFF;
}

.leftPanel
{
	 position:static;
		display:block;
		float:left;
        width:35%;
        height: 100%;
		overflow:scroll;
		background:#FFF;
}

.rightPanel
{ 
	position:static;
		display:block;
		padding-bottom:100px;
		float:left;
        width:65%;
        height: 100%;
				background:#FFF;

}

.images
{
	display:block;
	margin:20px;
	height:auto;
	background:#FFF;	
}

.images img
{
	width:100%;
}

.videos
{
	position: relative;
		margin:20px;

    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;	
}

.videos iframe
{
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.description 
{
	poistion:fixed;
	padding:0 40px;	
}

h1 
{
	    font-family: "le-monde-livre-std";
	 font-style:italic;
	font-weight:bold;
	font-size:20px;
	margin:20px 0;
}

.description h2 
{
	    font-family: "le-monde-livre-std";
	 font-style:italic;
	font-weight:bold;
	font-size:16px;
	font-weight:bold;
	margin:0 0 -25px 0;

}

.description p 
{
	font-size:14px;
	margin-bottom:30px;
	
}

.description a 
{
	font-size:14px;
	margin-bottom:30px;
	color:#000;
	text-decoration:underline;
	
}

#bottomInfo
{
	position:absolute;
	top:40px;
	left:10%;
	width:25px;
	margin:0 auto;
}

#bottomInfo img
{
	width:100%;	
}

.bottomPanel {
	display: block;
	width: 100%;
	margin: 0 0 60px 0;
	padding: 20px;
	
}

.bottomPanel a {
	color:#000;
	
}

.backtoProjects {
	display: block;
	float:left;
	width:50%;
	padding-left:20px;
}

.toTop {
	display: block;
	float:left;
	width:40%;
	
}

.toTop a, .backtoProjects a  {
	color:#000;
	
}


#mobileBack {
	position:relative;
	top:0;
	margin:0;
	display:none;
	width:100%;
	height:460px;
	background:#345;
	color:#FFF;
}

#mobileBack p {
	text-align:center;
	padding:20px;
}

#mobileBack a {
	width:100%;
	color:#FFF;
	text-align:center;
	text-decoration:none;
}
/*ABOUT PAGE*/

.about 
{
	position:fixed;
	background:#FFF;
	z-index:500;
	width:50%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	padding:40px;	
	margin:50px 0 100px 0;
	border:10px solid #9A7D30;

}

.Aboutpanel	{
	display:block;
	width:100%;
	height:auto;
	padding-bottom:70px;
}

.about p 
{
	font-size:12px;
	margin-bottom:30px;
	
}



.about h2 
{
	    font-family: nuevaFont;

	font-size:14px;
	font-weight:bold;
	margin:0 0 -25px 0;

}

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

}

@media screen and (max-width: 728px) {
#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8, #object9, #object10, #object11 {
	width:90%;
}

#mobileBack {
	display:block;
	width:100%;
	height:50px;
	background:#000;	
	
}

header img
{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;

}

#object1 {
	margin-top:20px;
	
}

.leftPanel
{
	position:relative;
	float:none;
	width:100%;	
}

.rightPanel
{
	float:none;
	width:100%;	
	margin-left:0;
}

#location
{

}

#contact
{
 position:static;	
 margin:0 0 20px 20px;
}

.rightPanel
{
	padding-bottom:0;	
}

.Aboutpanel
{
	padding-bottom:70px;
	max-height:800px;
	overflow:hidden;
}

.about 
{
	position:absolute;
		top:20%;
		left:50%;
		transform:translate(-50%,0);
		margin-top:0;
		margin-bottom:100px;
}

.separater
{
	height:100px;	
}

.randomObject p  {
opacity:1;	
}

#bottomInfo
{
	display:none;
}

@media screen and (max-width: 468px) {
#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8, #object9, #object10, #object11 {
	width:90%;
}

#object1 {
	margin-top:20px;
	
}

.leftPanel
{
	float:none;
	width:100%;	
}

.rightPanel
{
	float:none;
	width:100%;	
}

header img
{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;

}

.centeredLogo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index:1000;
  width:500px;
  height:60px;
  overflow:hidden;
  color:#000;
  background:rgba(255, 255, 255, 0);
  border:none;
  transition: background 1s, border 1s;
}

.centeredLogo img{
 	width:100%;
position: fixed;
  top: -10%;
  margin-top:0px;

}

.centeredLogo:hover {
	  background: none;
	  border:none;
}

.centeredLogo:hover p:after {
	content:'';
}
}