// Top Level Styles
@heading: 'Open Sans', sans-serif;
@tertiary: #3c3c3c;

//Override CSS
div.alert-box.info{
  border-radius: 1em;
   background: url('../img/testdark.png');
  color: #E5E5E5;
  border-color: #484848;

  p{
    color: #E5E5E5;
  }

}

input[type="submit"]{
  background: #47b558 !important;
}

.button.tiny{
  background: #ee1a26;
}

.cartwrap.wrapper, .cart-review.wrapper{

  .large-8{
    background: #E0E0E0;
    border-radius: 1em;
    .boxshad;
  }

  .large-4.supplier-page, .large-3.supplier-page, {
        min-height: 800px;  
        padding-right: 0em;
  }

  .partial-checkout{background: #484848;
    padding: 1em 0.5em 1em 0.5em;
    border-radius: 1em;
    .boxshad;

    .right.button{
      background: #47b558 !important;
    }
  }
 // background: #E0E0E0;
}
@font-face{

font-family: 'Sosa';
src: url("../fonts/sosa.eot");
src: local('?'), url('../fonts/sosa.woff') format('woff'), url('../fonts/sosa.ttf') format('truetype'), url('../fonts/sosa.svg') format('svg');
}

//Clearing Floats
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.pad-this:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.pad-this { display: inline-block; }
/* start commented backslash hack \*/
* html .pad-this { height: 1%; }
.pad-this { display: block; }
//------------------------------------

.rnd{
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.outline{
	outline: 1px @tertiary solid;
	min-height: 150px;
}

a{
	color: #444;
}

.striking{
    color: #1e1d27;
    font-size: 1.5em;
    font-family: @heading;
    margin-bottom: 0.1em;
  }

//-----------------
.cart-review{
  .logoupload{
    background: #E0E0E0; 
    border-radius: 1em;

    fieldset{
      padding-left: 0;margin-left: 0;
    }
  }

  .wrapit{
        padding: 1em 0.5em 1em 0.5em;

  }
}
header{
	background: url('../img/header_bglight.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
	min-height: 130px;

		nav{
		background: white;
		margin: 36px 0px;
		.rnd;

		.home-logo{
			float: left;
			display: block;
			img{
				margin: 25px 15px;
			}
		}

		.navigate{
			float: right;
			position: relative;
			margin: 30px 30px 0 0;
		}


		ul{

			li{
				display: inline-block;

				a:after{
					width: 5px;
					height: 3px;
					color: white;
					display: block;
					content: "";
					position: absolute;
					right: 0;
					top: 7px;
				}
				

				a{
					font-family: @heading;
					text-transform: uppercase;
					font-size: 12px;
					line-height: 18px;
					text-decoration: none;
					color: @tertiary;
					position: relative;
					font-weight: 600;
				}

				.subtitle{
					font-size: 11px;
					color: #999;
				}
			}


			li > div{
				border-right: 1px solid #dbdbdb;
				padding: 10px 30px;
				min-height: 30px
			}

			li:last-child div{
				border-right: 0px #FFF solid;

			}


		}

	}
}

.wrapper{
	margin-top: 0px;
	//background: #EBEBEB;
	h1{
		margin-top: 0.5em;
		font-size: 24px;
		line-height: 24px;
		font-family: @heading;
		text-align: center;
		color: #3c3c3c;
		font-weight: 400;
	}

	p{
		color: #444;
		font-family: @heading;
		font-size: 14px;
		line-height: 22px;
		//text-align: center;
		margin-bottom: 0.5em
	}

  .pagination{
    margin-top: 0.5em;
  }

}


.stretch.stretch-alert{
  padding-bottom: 0em;

  .alert-box{
    margin-bottom: 0em !important;
  }
}

.stretch{
	//background: url('../img/browsepattern.png');
	background-repeat: repeat;
	padding: 1em 0em;

	.browsebrands{
	margin-bottom: 0.5em !important;


  button:before{
    color: white;
  }



  button{
    background: #1e1d27;
}

button:before{
  color: white;
}

  .slick-prev{left: 0; height: 30px; width:30px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
  .slick-prev:before{content: '‹'; font-family: 'Sosa';}
  .slick-next:before{content: '›'; font-family: 'Sosa';}
  .slick-next{right: 0; height: 30px; width:30px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}

	

  .boxshad{
    .rnd;
  }
	background: white;

	.slick-slide{
		padding-right:4em;

	}
	}
}

.service-outside{

  .service-welcome .columns{
    padding-top: 2em;

  }





  .service-icon, .thumbnail{
    display: block;
    margin: 0 auto;

  }

  .service-icon{
    opacity: .7;
  }

  .service-icon:hover{
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  }

  .service-icon:hover + h1{
    font-weight: bold;
        -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;

  }


}


//Browse Page Example

.browse-nav{
padding: 1em;
border-radius: 0.3em;
   /* 
border: 1px solid #780000;
background: #9E0C0F;
background: -moz-linear-gradient(top, #9E0C0F 0%, #780000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9E0C0F), color-stop(100%, #780000));
background: -webkit-linear-gradient(top, #9E0C0F 0%, #780000 100%);
background: -o-linear-gradient(top, #9E0C0F 0%, #780000 100%);
background: -ms-linear-gradient(top, #9E0C0F 0%, #780000 100%);
background: linear-gradient(to bottom, #9E0C0F 0%, #780000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9E0C0F', endColorstr='#780000', GradientType=0);
  */
  /*background: url('../img/test.png');*/
  background: #484848;

  a{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 18px;
    color: white !important;
  //  border-right: 1px #ffb2b5 solid;
  }

  dd:last-child a{
  //  border-right: 0px #ffb2b5 solid;
  }

  a:hover{

    text-decoration: underline !important;
  }

  .active, .active a{

    color: white !important;
    background: transparent !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }

}
.checkout{
  margin-top: 1em;
}
.partial-checkout{

}

.browse-nav.fixed{
  .boxshad;
}



.cart-products li img, .cart-products li button{

  display: block;

  margin: 0 auto;

}

.cart-products li img{
  border-radius: 0.75em;
	max-height: 150px;
}

.cart-products .prod-details{

  padding: 0.5em 1em;

  display: block;

}



.product{

  display: block;

  padding: 0.5em 1em;

   img:hover{
        opacity: 0.5;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        cursor: pointer;

      }

}

.prod-details{
	h5{
		font-family: @heading;
		font-size: 0.8em;
	}

	button.button{
		padding: 0.5em;
		background: #666;
		.rnd;
	}

  button.button:hover,button.button:focus{
    background-color: black;
  }
}

.cart-products li .product:first-of-type{

  //min-height: 170px;

}



.product-image{

  max-width: 100px;

  outline: 1px #eee solid;

  margin: 0 auto;

  display: block;

}



.checkout{

margin-bottom: 1.5em;

}

.cart-products{
  margin-top: 1.25em;
}

.cart-products li{

    margin-bottom: 1.5em;

}



.cart-products p{

  text-align: center;

}

.checkout{
	h5{
		font-size: 1em;
	}
}

// Contact Page
.slick-map{
  min-height: 400px;
}

.contactwrap{
  .columns{
    padding-top: 1.5em;
  }
}

.map-wrap{
  border: 0.5em white solid;
  border-bottom-width: 1em;
  //outline: 1px #444 solid;
  background: white;
  margin: 1em 0em 1em 0em;
  box-shadow: 0 0 3px rgba(34,34,34,.6)
}


.gry-block{
  background: #f2f2f2;

  .upload-artwork{
    margin-top: 2em;
  }

   p{
      margin: 0.2em 0.25em;
      font-size: 0.85em;
      color: black;
      font-family: 'Maven Pro', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }



}
    .thumbnail{
      line-height: 0;
display: inline-block;
border: solid 4px white;
max-width: 100%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
transition: all 200ms ease-out;
    }

    .thumbnail:hover{
      box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5);
    }

.boxes{
	.columns{
		padding: 0em 0.5em
	}
	.large-8{
			//background: #e5e5e5;
			min-height: 427px;
			
	}

	.large-4{
			//background: #e5e5e5;
	}
}

.slidingslick{
  background: #e5e5e5;
	width: 100%;
  margin-bottom: 0em !important;
  overflow: hidden;


	button{

		background: transparent;

	}

  button:before{
    color: white;
  }



  button:hover{
    background: #1e1d27;
}

button:hover:before{
  color: white;
}

	.slick-prev{left: 0; height: 40px; width:40px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
	.slick-prev:before{content: '‹'; font-family: 'Sosa';}
	.slick-next:before{content: '›'; font-family: 'Sosa';}
	.slick-next{right: 0; height: 40px; width:40px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}

  a, img{
    display: block;
    margin: 0 auto;
  }


}



.fb-like-box{
	display:block;
	margin: 0 auto !important;
}

.fb-wrap{
	display: block;
	padding: 0em 2em;
}

.right-panel{
	min-height: 427px;
	background: url(http://www.manukau.ac.nz/__data/assets/image/0009/166167/rightHero.jpg) no-repeat center center !important;
}


.alert-box.info{
  h2{
    font-family: @heading;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  }
}



  .upload-artwork{
    margin: 0 auto;
    display: block;

    img{
        display:block;
        margin: 0 auto;
        max-height: 150px;
        outline: 5px white solid; 
        border-radius: 5px;
      }
  }
//Additional Homepage Styles 28/10 

.secondary-content{
  color: #ffffff;
border: 1px solid #cccccc;
background: #F2F2F2;
background: -moz-linear-gradient(top, #F2F2F2 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #cccccc));
background: -webkit-linear-gradient(top, #F2F2F2 0%, #cccccc 100%);
background: -o-linear-gradient(top, #F2F2F2 0%, #cccccc 100%);
background: -ms-linear-gradient(top, #F2F2F2 0%, #cccccc 100%);
background: linear-gradient(to bottom, #F2F2F2 0%, #cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#cccccc', GradientType=0);

  .columns{
    padding: 0em 0.5em;
    //min-height: 380px;
  }

  .quote-artwork{

    .quote-img{
      max-height: 350px;
      margin: 0 auto;
      display: block;
    }

    .img-center{
      display:block;
      a{
        margin: 0 auto;
        display: block;
      }
    }
  }



  .quote-artwork, .upload-artwork{

    h2{
      text-align: center;
      font-size: 1.1em;
      font-family: @heading;
      padding: 0.5em;
      color: white;
      background: -moz-linear-gradient(top, #c4c4c4 0%, #9e9e9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c4c4c4), color-stop(100%, #9e9e9e));
background: -webkit-linear-gradient(top, #c4c4c4 0%, #9e9e9e 100%);
background: -o-linear-gradient(top, #c4c4c4 0%, #9e9e9e 100%);
background: -ms-linear-gradient(top, #c4c4c4 0%, #9e9e9e 100%);
background: linear-gradient(to bottom, #c4c4c4 0%, #9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4c4c4', endColorstr='#9e9e9e', GradientType=0);margin-bottom: 0.5em;
    }

    .fadeart-centre{
      margin: 0 2em;
      display:block;
    }

    .fadeart{
      margin-top: 1.5em;
      img{
        display:block;
        margin: 0 auto;
        max-height: 150px;
        outline: 5px white solid; 
        border-radius: 5px;
      }
    }
  }


  .focal{
    padding: 0.5em 1em;

    h1, p{
      text-align: right;
    }

    h1{
      font-size: 2.1em;
      font-family: @heading;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 0.4em 0.25em;
    }

    p{
      margin: 0.2em 0.25em;
      font-size: 0.85em;
      color: black;
      font-family: 'Maven Pro', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .img-space{
      margin-top: 1em;
      img{
        border-radius: 5px;

      }

      img:hover{
        opacity: 0.5;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        cursor: pointer;

      }



    }
  }

  .large-8{
     background: white;

      
  }


}



body{
  background: url('../img/cream_dust.png') repeat;
}
.home-wrapper{
margin: 1em 0em;

}

.boxshad{
    -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);


}

.brd-top{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; 
}


.brd-btm{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.slidingslick{

  //Hovering Test

  div.effect-chico{
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;

        position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
  }
  div{

    img{
      position: relative;
      display: block;
      min-height: 100%;
      opacity: 0.8;
    }

    .figcaption{


      font-size: 1em;
      color: black;
      font-family: 'Maven Pro', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      padding: 1em;
      color: #fff;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .figcaption::before,
    .figcaption::after {
      pointer-events: none;
    }

    .figcaption,
    .figcaption a{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .figcaption a{
      z-index: 1000;
      text-indent: 200%;
      white-space: nowrap;
      font-size: 0;
      opacity: 0;
    }

    .figcaption h2{
      text-transform: uppercase;
      word-spacing: -0.15em;
      font-weight: 300;
      color: #fff;
    }

    .figcaption h2 span{
      font-weight: 800;
    }

    .figcaption h2,
    .figcaption p {
      margin: 0;
    }

    .figcaption p {
      letter-spacing: 1px;
      font-size: 80.5%;
    }




div.effect-chico img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
}

div.effect-chico:hover img, div.effect-chico.active img {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

div.effect-chico .figcaption {
  //padding: 3em;
}

div.effect-chico .figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 1px solid #fff;
  content: '';
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

div.effect-chico .figcaption::before,
div.effect-chico p {
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

div.effect-chico h2 {
  padding: 15% 0 20px 0;
}

div.effect-chico p {
  margin: 0 auto;
  max-width: 450px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

div.effect-chico:hover .figcaption::before,
div.effect-chico:hover p, div.effect-chico.active .figcaption::before,
div.effect-chico.active p,  {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


  }



}


//Ifix Footer
.foot-square{
  h2{
    color: white;
    font-size: 1.5em;
    font-family: @heading;
    margin-bottom: 0.1em;
  }

  p{
    color: white;
    margin-bottom: 0.1em;
    font-size: 0.95em;
    .ico{
      font-size: 1.4em;
      font-style: normal;
      font-family: 'Sosa';
      padding-right: 0.5em;

    }

  }
}

footer{

border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/*box-shadow*/


background: #1e1d27;

min-height:80px;

padding:1em 0em;

}




.under-slider{
  padding: 1em 0em;
  .focal{
    background: white;
    margin: 0 0.5em;
    display: block;
    border-radius: 5px;
    border: 1px #e5e5e5 solid;



    p{
      text-align: left;
    }

    h2.striking{
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 0.5em;
    }

    .button{
      border-radius: 5px;
      margin: 0.5em 0em;
  background: url('../img/test.png') !important;
    }

  }


}
.embedding-box{
padding: 0 !important;
}
iframe.embed{
  background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
  top: 0;
  left: 0;
   display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
 min-height: 1800px;
}