/*
Author  : Boon
URL     : http://builtbyboon.com
Twitter	: http://twitter.com/mattberridge
---------------------------------------*/
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
	font: 1em/1.10 serif;
  }

.strip {
	color: #333;
	padding: .5em 5%;
}
  .strip p {
    text-align: left;
    font-size: 1.2em;
	}

.container {
	width: 80%;
	margin: .25em auto;
	padding-top: 12px;
}

p {
	margin: 0 0 1.5em 0;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

a {
	color: #666633;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
h1 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, sans serif;
	font-size: 1.15em;
	font-style: normal;
	line-height: 110%;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #333;
}

h2 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin-top: 0;
	font-size: 1.05em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #333;
}
.quote {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: .75em;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666;
	text-decoration: none;
}
.box {
	width:70%;
	height:auto;
	background:#FFF;
	margin:40px auto;
}
	
.effect7
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect7:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}
img {
  display: block;
    margin-left: auto;
    margin-right: auto;
	max-width: 100%;
	height: auto;
	width: auto\9;
	text-decoration:none; }
/* -- Begin grids
------------------------------------------------------------- */
/* -- Use this wrapper if you want to divide your columns -- */
.sky-mega-menu li:hover > div{
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em; }

/* -- Use this wrapper if you want to block-out a column with padding 
Taken from http://csswizardry.com/2011/10/the-island-object/) -- */
.island {
	/* [disabled]margin-left: -3em; */
	margin-right: -3em;
	padding-top: 1em;
	padding-right: 0em;
	padding-bottom: 1em;
	padding-left: 0em;
}
  .island :last-child {
    margin-bottom: 0; }

/* -- Setup grids with base class -- */
.grid-wrap {
  margin-left: -1em;
  overflow: hidden;
  clear: both; }

.grid-col {
	float: left;
	padding-left: .5em;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}

.large-gutter {
  margin-left: -6em; }
  .large-gutter .grid-col {
    padding-left: 6em; }

.half-gutter {
  margin-left: -1.5em; }
  .half-gutter .grid-col {
    padding-left: 1.5em; }

.no-gutter {
  margin-left: 0; }
  .no-gutter .grid-col {
    padding-left: 0; }

.reset-gutter {
  margin-left: -3em; }
  .reset-gutter .grid-col {
    padding-left: 3em; }

ul.grid-wrap,
ol.grid-wrap {
  padding-left: 0;
  list-style: none; }

li.grid-col {
  margin-left: 0;
  margin-bottom: 0; }

.col-full,
.col-set-full .grid-col {
  width: 80%; }

.col-one-half,
.col-set-one-half .grid-col {
  width: 50%; }

.col-one-third,
.col-set-one-third .grid-col {
  width: 33.333%; }

.col-one-quarter,
.col-set-one-quarter .grid-col {
  width: 25%; }

.col-two-thirds {
  width: 66.666%; }

.col-three-quarters {
  width: 75%; }

/* -- Breakpoint (.bp1)
------------------------------------------------------------- */
@media only screen and (min-width: 30em) {
  .bp1-col-full,
  .bp1-col-set-full .grid-col {
    width: 100%; }

  .bp1-col-one-half,
  .bp1-col-set-one-half .grid-col {
    width: 100%; }

  .bp1-col-one-third,
  .bp1-col-set-one-third .grid-col {
    width: 33.333%; }

  .bp1-col-one-quarter,
  .bp1-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp1-col-two-thirds {
    width: 66.666%; }

  .bp1-col-three-quarters {
    width: 75%; } }
/* -- Breakpoint 2 (.bp2)
------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .bp2-col-full,
  .bp2-col-set-full .grid-col {
    width: 80%; }

  .bp2-col-one-half,
  .bp2-col-set-one-half .grid-col {
    width: 50%; }

  .bp2-col-one-third,
  .bp2-col-set-one-third .grid-col {
	width: 33.333%;
	font-family: sans-serif;
}

  .bp2-col-one-quarter,
  .bp2-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp2-col-two-thirds {
    width: 66.666%; }

  .bp2-col-three-quarters {
    width: 75%; } }
/* -- Breakpoint 3 (.bp3)
------------------------------------------------------------- */
@media only screen and (min-width: 60em) {
  .bp3-col-full,
  .bp3-col-set-full .grid-col {
    width: 70%; }

  .bp3-col-one-half,
  .bp3-col-set-one-half .grid-col {
    width: 50%; }

  .bp3-col-one-third,
  .bp3-col-set-one-third .grid-col {
    width: 33.333%; }

  .bp3-col-one-quarter,
  .bp3-col-set-one-quarter .grid-col {
    width: 25%; }

  .bp3-col-two-thirds {
    width: 66.666%; }

  .bp3-col-three-quarters {
    width: 75%; } }
/* --Navigational Menu
-------------------------------------------------------------- */

/*--------------------------------
Functional Styles (Required)
---------------------------------*/

.header { position: relative; }
#toggle, .toggle { display: none; }
.menu > li { list-style: none; float:left;	}

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 768px){
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.menu > li { display: block; width: 100%; margin: 0; }
.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#toggle:checked + div .menu { display: block; opacity: 1;}
}


/*--------------------------------
Presentation Styles (Editable)
---------------------------------*/
.header{
min-height: 100px;
height: 100%;
padding: 0 20px;
background: #FFFFFF;
}

.header > h1 {
float: left;
padding: 30px 0 0;	
font-style: italic;
font-family: Georgia;
font-size: 28px;
color: #DFDFDF;
}

.nav{
display: block;
float: right;
}

.nav, .menu, .menu > li, .menu > li > a{
height: 100%;
}

.menu > li > a{
display: block;
padding: 42px 20px;
text-decoration: none;
font-weight: normal;
font-size: 16px;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}

.menu > li > a:hover, .menu > li > a:focus{
background: #F2F2F2;
box-shadow: inset 0px 5px #51C1F1;
color: #51C1F1;
padding: 50px 20px 34px;
}

.toggle{
z-index: 2;
}

#cardcontainer {
	position: relative;
	height:272px;
	width: 192px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	float:centre;
	padding:inherit;
	padding-right:17px;
	overflow: hidden;

}

#cardcontainer div {
	position:absolute;
	left:0;
	top:0;
	width:184px;
	height: 264px;
	padding:8px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: 1.5s ease-in-out;
	-moz-transition: 1.5s ease-in-out;
	-ms-transition: 1.5s ease-in-out;
	-o-transition: 1.5s ease-in-out;
	transition: 1.5s ease-in-out;
	background: url(../images/backgrounds/frontcard.png);
	border: thin solid #333;
}

#cardcontainer div.lower {font-family: 'latomedium', verdana, arial, sans-serif;

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-transform: perspective(800px) rotateY(180deg);

-webkit-transform: perspective(800px) rotateY(180deg);

transform: perspective(800px) rotateY(180deg);

}

#cardcontainer div.lower img {
	float:left;
	margin-top:-10px;
	margin-left:-5px;
	}

#cardcontainer div.lower h1 {font-size:.8em; padding:0; text-align:center; margin:0; color:#ooo; line-height:1.2em; font-family: 'latolight', verdana, arial, sans-serif;}

#cardcontainer div.lower p {font-size:13px; padding:0; margin:0; color:#333333; line-height:16px;}

#cardcontainer div.lower h2 {font-size:10px; text-align: center; text-decoration:none; padding:0; margin:0; color:#339900; line-height:12px;}

#cardcontainer div.lower h3 {font-size:.6em; padding:0; text-align:center; margin:0; color:#339900; line-height:1.2em; font-family: 'latolight', verdana, arial, sans-serif;}

#cardcontainer div.lower a {color:#ff0;}



#cardcontainer div.upper {
	min-height: 1em;
	padding-top:8px;
	display: table-cell;
	vertical-align: middle;
	font-size: 1em;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: perspective(800px) rotateY(0deg);
	-webkit-transform: perspective(800px) rotateY(0deg);
	transform: perspective(800px) rotateY(0deg);
	background-image:url(../images/backgrounds/bwcard.png);
}

#cardcontainer div.upper img {
	float:left;
	margin-left:-4px;
	margin-top:-4px;
	}

#cardcontainer div.upper h1 {font-size:.8em; padding:0; text-align:center; margin:0; color:#ooo; line-height:1.2em; font-family: 'latolight', verdana, arial, sans-serif;}

#cardcontainer div.upper p {
	font-size:13px;
	padding:0;
	margin:0;
	color:#333333;
	line-height:16px;
}

#cardcontainer div.upper h2 {
	font-size:11px;
	text-align: center;
	text-decoration:underline;
	padding:.5em,0,0,0;
	margin:0;
	color:#993300;
	line-height: 16px;
}


#cardcontainer:hover div.lower {

-moz-transform: perspective(800px) rotateY(0);

-webkit-transform: perspective(800px) rotateY(0);

transform: perspective(800px) rotateY(0);

}

#cardcontainer:hover div.upper {

-webkit-transform: perspective(800px) rotateY(-179.9deg);

-moz-transform: perspective(800px) rotateY(-179.9deg);

transform: perspective(800px) rotateY(-179.9deg);

}

/*--------------------------------
Product Box (Editable)
---------------------------------*/
 .product, .product-img {
  width:240px;
  height:260px;
  position:relative;
  transition:.7s;
  -webkit-transition:.7s;
  z-index:2;
}

.product-actions {
  width:240px;
  height:260px;
  position:relative;
  overflow: hidden;
  margin-top:-263px;
  transition:.7s;
  -webkit-transition:.7s;
  z-index:2;
}

.product {
  margin: 20px auto;
  -webkit-box-shadow: -2px 3px 2px rgba(0,0,0,0.5);
          box-shadow: -2px 3px 2px rgba(0,0,0,0.5);
  background:#000;
}

.sale, .info-block, .product-title, .product-description, .product-sale, .product-prize, .button-buy, .play, .more, .nav, .add {
  position:absolute;
  z-index:3;
}

.sale-tile {
  width: 50px;
  height: 100px;
  background: #e74c3c;
  position: absolute;
  top: -45px;
  right: -10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index:2;
}

.sale {
  font-size:11px;
  color:#fff;
  -webkit-transform:rotate(45deg);
  top:52px;
  left:2px;
}

.info-block {
  height:130px;
  width:240px;
  background:rgba(255,255,255,.85);
  bottom:0px;
  margin-bottom:-70px;
  transition:.7s;
}

.product-title {
  color:#222;
  font-size:1em:
  font-weight:400;
  top:12px;
  left:15px;
}

.product-description {
  width:228px;
  top:32px;
  left:16px;
  font-family: 'helvetica neue';
  font-size: 0.8em;
  font-weight: 400;
  color: #7d7d7d;
  border-bottom:1px solid #dadada;
  padding-bottom:15px;
}

.product-sale {
  color: #e74c3c;
  font-size: 1em;
  font-weight: 700;
  font-family: 'helvetica neue';
  right:15px;
  top:12px;
}

.product-prize {
  color:#7d7d7d;
  font-size:0.8em;
  font-weight:400;
  font-family:'helvetica neue';
  right:17px;
  top:32px;
}

.button-buy {
  background: #e74c3c;
  text-align: center;
  line-height: 46px;
  font-weight: 700;
  color: #fff;
  border: 0px solid #c0392b;
  border-bottom-width: 2px;
  width:170px;
  height:44px;
  bottom:15px;
  left:15px;
  cursor:pointer;
  transition:.4s;
}

.button-buy:hover {
  background:#c0392b;
}

.add {
  background: #2ecc71;
  text-align: center;
  line-height: 46px;
  font-weight: 700;
  color: #fff;
  border: 0px solid #27ae60;
  border-bottom-width: 2px;
  width:50px;
  height:44px;
  bottom:15px;
  right:15px;
  cursor:pointer;
  transition:.4s;
}

.add:hover {
  background:#27ae60;
}

.product:hover .info-block {
  margin-bottom:0;
}

.product:hover input[name="play"] + label span {
  opacity:1;
}

.product:hover .more {
  opacity:1;
}

.more {
  background-color: #4f4f4f;
  top: 50px;
  left: 15px;
  background-image: url(http://webstudios.dk/resources/img/share-img.png);
  width: 30px;
  height: 30px;
  cursor:pointer;
  opacity:0;
  transition:.7s;
  z-index:2;
}

.more:hover {
  background-color: #3f3f3f;
  background-image: url(http://webstudios.dk/resources/img/share-img.png);
}


.nav {
  background: #4f4f4f;
  height:250px;
  margin-left:0;
  top:5px;
  width:250px;
  z-index:-4;
  font-weight:700;
  color:#fff;
  font-size:12px;
  transition:.4s ease-out .1s;
}

.nav ul li {
  padding:13px 10px;
  width:50px;
  background:#333;
  border-bottom:1px solid #444;
  cursor:pointer;
  list-style: none;
}

.nav ul {
  margin-left: -35px;
}

.nav ul li:hover {
  background:#222;
}

.more:hover ~ .nav {
  margin-left:-80px;
  transition:.4s;
}

.nav:hover {
  margin-left:-80px;
}

.nav:hover .info-block {
  margin-bottom:0;
}

input[type="checkbox"] {
  display:none;
}

input[name="play"] + label span {
  opacity:0;
  position:absolute;
  background-color: #e74c3c;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  cursor:pointer;
  background-image: url(http://webstudios.dk/resources/img/play-img.png);
  transition:.7s;
  z-index:99;
}
input[name="play"]:checked + label span {
  background:#c0392b;
  z-index:9999;
}

.video {
  text-align:center;
  font-size:11px;
  width:260px;
  height:260px;
  position:absolute;
  background:#fff;
  line-height:260px;
  top:0;
  z-index:-9;
}

input[name="play"]:checked ~ .video {
  z-index:999;
}

@media only screen and (max-width: 768px){
.menu{
background: #FFFFFF;
border-top: 1px solid #51C1F1;
}

.menu, .menu > li, .menu > li > a{
height: auto;
}

.menu > li > a{
padding: 15px 15px;
}

.menu > li > a:hover, .menu > li > a:focus{
background: #F2F2F2;
box-shadow: inset 5px 0px #51C1F1;
padding: 15px 15px 15px 25px;
}

.toggle:after {
content: attr(data-open);
display: block;
width: 200px;
margin: 33px 0;
padding: 10px 50px;
background: #51C1F1;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #FFFFFF;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.toggle:hover:after{
background: #45ABD6;
}

#toggle:checked + div .toggle:after{
content: attr(data-close);
}
}

@media only screen and (max-width: 479px){
.header > h1 {
text-align: center;
}
.header > h1, .nav, .toggle:after{
float: none;
}
.toggle:after {
text-align: center; width: 100%;
}
}
.green {
	color: #41B911;
}