#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 3001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 3002;
}
.myNumber{float:left;color:#40919b;font:normal normal 12px/12px tahoma,arial,verdana;text-align:right;float:left;border:none;outline:none }
.myContainer{float:right;width:100px}
.myContainer input{margin:0}
.myContainer a{display:block;width:20px;text-decoration:none;outline:none;overflow:hidden; }

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome/fontawesome.eot?-ulzwqn');
	src:url('../fonts/fontawesome/fontawesome.eot?#iefix-ulzwqn') format('embedded-opentype'),
		url('../fonts/fontawesome/fontawesome.woff?-ulzwqn') format('woff'),
		url('../fonts/fontawesome/fontawesome.ttf?-ulzwqn') format('truetype'),
		url('../fonts/fontawesome/fontawesome.svg?-ulzwqn#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/app */

/* Style 1 */
.style1 input{
text-align: center;
height: 50px;
width: 50px;
font-size:18px;
border-radius: 4px;
box-shadow: 0 -2px 8px -2px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.1);}
.style1 .btnInc{height:25px;width: 33px;background:url(style-1/btnInc.png) no-repeat 0 0}
.style1 .btnDec{height:25px;width: 33px;background:url(style-1/btnDec.png) no-repeat 0 0}

/* Style 2 */
.style2 input{
text-align: center;
height: 32px;
width: 32px;
font-size:18px;
border-radius: 4px;
box-shadow: 0 -2px 8px -2px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.1);}
.style2 .btnInc{height:16px;width: 20px;background:url(style-2/btnInc.png) no-repeat 0 0}
.style2 .btnDec{height:16px;width: 20px;background:url(style-2/btnDec.png) no-repeat 0 0}


.kosarba {
    background:url(../kellekek/kosarba.png) no-repeat;
border: none; 
	border: 0px;
	height: 50px;
	width: 120px;
	

	
}
.kosarba:hover {
    background:url(../kellekek/kosarba2.png) no-repeat;
	cursor:pointer;
border: none; 
	height: 50px;
	width: 120px;

	 
}

.md-trigger {
    background:url(../kellekek/kosarba.png) no-repeat;
border: none; 
	border: 0px;
	height: 50px;
	width: 120px;
	

	
}
.md-trigger:hover {
    background:url(../kellekek/kosarba2.png) no-repeat;
	cursor:pointer;
border: none; 
	height: 50px;
	width: 120px;

	 
}

@font-face {
	font-family: 'DINPro-Light';
	src:url('../fonts/dinpro.eot');
	src:url('../fonts/dinpro.eot') format('embedded-opentype'),
		url('../fonts/dinpro.woff') format('woff'),
		url('../fonts/dinpro.ttf') format('truetype'),
		url('../fonts/dinpro.svg') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/app */


@font-face {

font-family: "'DINPro-Light'";
src: url('../fonts/dinpro.eot');
src: local('?'), url('../fonts/dinpro.woff') format('woff'), url('../fonts/dinpro.ttf') format('truetype'), url('../fonts/dinpro.svg') format('svg');
font-weight: normal;
font-style: normal;

}

#slider {
width: 960px;
height: 310px;
}
#slider a:hover {
border: none !important ;
}
.chocoslider {
position: relative;
margin-bottom: 50px;
}
.chocoslider img {
position: absolute;
top: 0;
left: 0;
}
.chocoslider a.choco-imageLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 2;
display: none;
}
.choco-slice {
display: block;
position: absolute;
z-index: 1;
height: 100%;
}
.choco-title {
position: absolute;
left: 0;
bottom: 0;
background: #000;
color: #fff;
opacity: 0.800000011920928955078125;
width: 100%;
z-index: 3;
}
.choco-title p {
padding: 5px;
margin: 0;
}
.choco-title a {
display: inline !important ;
}
.choco-html-title {
display: none;
}
.choco-controlNavigation {
position: absolute;
right: 1%;
bottom: -30px;
}
.choco-controlNavigation a {
text-indent: -999999px;
text-transform: uppercase;
text-decoration: none;
height: 20px;
width: 18px;
display: block;
cursor: pointer;
background: url(../kellekek/controlls.gif) center bottom no-repeat transparent;
float: left;
outline: none;
}
.choco-controlNavigation a.active {
background: url(../kellekek/controlls.gif) center top no-repeat transparent;
}




.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
a:link {
color: #ffffff;
font-family: DINPro-Light;
text-decoration: none;
font-size: 18px;
}
a:hover {
	color: #FF9900;
}
a:visited {
	color: #FFFFFF;
}
a:active {
	color: #FF9900;
}

a.szurke:link {
color: #dddddd;
font-family: DINPro-Light;
text-decoration: none;
font-size: 1em;
}
a.szurke:visited {color: #dddddd}
a.szurke:hover {color: #ff0000}
a.szurke:active {color: #dddddd}

a.fekete:link {color: #000000}
a.fekete:visited {color: #000000}
a.fekete:hover {color: #ff0000}
a.fekete:active {color: #000000}

a.feher:link {color: #ffffff}
a.feher:visited {color: #ffffff}
a.feher:hover {color: #F58634}
a.feher:active {color: #ffffff}

a.menu:link {color: #000000}
a.menu:visited {color: #000000}
a.menu:hover {color: #ffffff}
a.menu:active {color: #000000}

a.hirek:link {color: #000000;text-transform: uppercase;font-size: 22px;font-weight: bold;}
a.hirek:visited {color: #000000;text-transform: uppercase;font-size: 22px;font-weight: bold;}
a.hirek:hover {color: #FF9900;text-transform: uppercase;font-size: 22px;font-weight: bold;}
a.hirek:active {color: #000000;text-transform: uppercase;font-size: 22px;font-weight: bold;}


a.hirek2:link {color: #000000;font-size: 15px;font-weight: bold;}
a.hirek2:visited {color: #000000;font-size: 15px;font-weight: bold;}
a.hirek2:hover {color: #FF9900;font-size: 15px;font-weight: bold;}
a.hirek2:active {color: #000000;font-size: 15px;font-weight: bold;}

body,td,th {
	font-family: DINPro-Light, Times New Roman, Times, serif;

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

}

.piros {
font-family: arial;
color: #FF0000;
font-size: 22px;
}
.feher {
font-family: DINPro-Light, "Times New Roman", Times, serif;

color: #FFFFFF;
font-size: 15px;
}
.fekete {
font-family: DINPro-Light, "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
font-size: 13px;
}
.container {
width: 100%;
position: relative;
}
.clr {
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.container > header, .main {
font-family: DINPro-Light;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.container > header {
font-family: DINPro-Light;
padding: 30px 25px 50px 25px;
}
.container > header h1 {
font-family: DINPro-Light;
font-size: 18px;
margin: 0;
font-weight: 700;
color: #666;
float: left;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
display: inline-block;
width: 50%;
min-width: 120px;
}
.container > header h1 span {
font-family: DINPro-Light;
display: block;
font-size: 15px;
font-weight: 300;
}
.codrops-top {
font-family: DINPro-Light;
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 3999;
position: relative;
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
}
.codrops-top a {
font-family: DINPro-Light;
padding: 0 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
font-family: DINPro-Light;
background: rgba(255, 255, 255, 0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.codrops-demos {
display: inline-block;
padding-top: 5px;
text-align: right;
width: 50%;
min-width: 320px;
}
.codrops-demos a {
display: inline-block;
margin: 10px 20px 0 0;
color: #666;
font-weight: 700;
padding-bottom: 5px;
border-bottom: 4px solid transparent;
}
.codrops-demos a:last-child {
margin-right: 0;
}
.codrops-demos a:hover {
color: #000;
border-color: #000;
}
.codrops-demos a.current-demo, .codrops-demos a.current-demo:hover {
color: #aaa;
border-color: #aaa;
}
.support-note {
clear: both;
}
.support-note span {
color: #ac375d;
font-size: 16px;
display: none;
padding: 20px;
font-weight: bold;
text-align: center;
}
@media screen and (max-width:640px) {
.codrops-demos {
text-align: left;
}
}

@font-face {

font-family: "'twcen'";
src: url('../../fonts/twcen.eot');
src: local('?'), url('fonts/twcen.woff') format('woff'), url('fonts/twcen.ttf') format('truetype'), url('fonts/twcen.svg') format('svg');
font-weight: normal;
font-style: normal;

}
.nagy2 {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 25px;
color: #000000;
}
.nagy3 {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
}
.szoveg {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
}
.szoveg_fekete {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 15px;
color: #000000;
}
.szoveg_piros {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 15px;
color: #FF0000;
}
.szoveg_zold {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 15px;
color: #006600;
}
.szoveg_fekete_bold {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 15px;
color: #000000;
}
.szoveg_fekete_nagy {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 25px;
color: #000000;
}
.szoveg_fekete_kozepes {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
.szoveg_feher_kozepes {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
}
.style1 {
font-family: "twcen", "Century Gothic", Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
.szamok_nagy {
font-size: 60px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.szamok_nagy2 {
font-size: 60px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #990000;
}
H111 {
font-weight: bold;
}
.szoveg_fekete_nagy {
font-family: "twcen", arial, "Century Gothic", Helvetica, sans-serif;
font-size: 20px;
color: #000000;
}
.szoveg_fekete_kozepes {
font-family: "twcen", arial, "Century Gothic", Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
.szoveg_feher_kozepes {
font-family: "twcen", arial, "Century Gothic", Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
}
.szoveg_piros_nagy {
font-family: "twcen", arial, "Century Gothic", Helvetica, sans-serif;
font-size: 20px;
color: #990000;
}
.szamok_nagy {
font-size: 60px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.szamok_nagy2 {
font-size: 60px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #990000;
}
#menucsik {
width: 100%;

z-index: 2000;
}
.mattblacktabs {
overflow: hidden;
width: 100%;

}
.mattblacktabs ul {
margin: 0 auto;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li {
display: inline;
margin: 0 auto;
}
.mattblacktabs li a {
float: left;
display: block;
text-decoration: none;
margin: 0 auto;
padding: 20px 15px;
border-right: 1px solid black;
color: black;
}
.mattblacktabs li a:visited {
color: black;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a {
background: black;
}
.docked {

margin: 0 auto 0 auto;
z-index: 2500;
}
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
color: black;
}
.treeview ul {
color: black;
margin-top: 4px;
}
.treeview .hitarea {
background: url(../kellekek/treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
color: black;
}
* html .hitarea {
display: inline;
float: none;
color: black;
}
.treeview li {
margin: 0;
padding: 3px 0 3px 16px;
color: black;
}
.treeview a.selected {
color: red;
font-size: 10px;
font-family: arial, "Century Gothic", Helvetica, sans-serif;
}
.treeview a:link {
color: black;
font-size: 10px;
font-family: arial, "Century Gothic", Helvetica, sans-serif;
}
.treeview a:hover {
color: red;
font-size: 10px;
font-family: arial, "Century Gothic", Helvetica, sans-serif;
}
.treeview a {
color: black;
font-size: 10px;
font-family: arial, "Century Gothic", Helvetica, sans-serif;
}
.treeview a:active {
color: yellow;
font-size: 10px;
font-family: arial, "Century Gothic", Helvetica, sans-serif;
}
#treecontrol {
margin: 1em 0;
display: none;
color: black;
}
.treeview .hover {
color: red;
cursor: pointer;
}
.treeview li {
background: url(../kellekek/treeview-default-line.gif) 0 0 no-repeat;
color: black;
}
.treeview li.collapsable, .treeview li.expandable {
background-position: 0 -176px;
color: black;
}
.treeview .expandable-hitarea {
background-position: -80px -3px;
color: black;
}
.treeview li.last {
background-position: 0 -1766px;
color: black;
}
.treeview li.lastCollapsable, .treeview li.lastExpandable {
background-image: url(images/treeview-default.gif);
color: black;
}
.treeview li.lastCollapsable {
background-position: 0 -111px;
color: black;
}
.treeview li.lastExpandable {
background-position: -32px -67px;
color: black;
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
background-position: 0;
color: black;
}
.treeview-red li {
background-image: url(images/treeview-red-line.gif);
color: black;
}
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable {
background-image: url(images/treeview-red.gif);
color: black;
}
.treeview-black li {
background-image: url(images/treeview-black-line.gif);
color: black;
}
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {
background-image: url(images/treeview-black.gif);
color: black;
}
.treeview-gray li {
background-image: url(images/treeview-gray-line.gif);
}
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable {
background-image: url(images/treeview-gray.gif);
color: black;
}
.treeview-famfamfam li {
background-image: url(images/treeview-famfamfam-line.gif);
color: black;
}
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable {
background-image: url(images/treeview-famfamfam.gif);
color: black;
}
.treeview .placeholder {
background: url(images/ajax-loader.gif) 0 0 no-repeat;
height: 16px;
width: 16px;
display: block;
color: black;
}
.filetree li {
padding: 3px 0 2px 16px;
color: black;
}
.filetree span.folder, .filetree span.file {
padding: 1px 0 1px 16px;
display: block;
color: black;
}
.filetree span.folder {
background: url(images/folder.gif) 0 0 no-repeat;
color: black;
}
.filetree li.expandable span.folder {
background: url(images/folder-closed.gif) 0 0 no-repeat;
color: black;
}
.filetree span.file {
background: url(images/file.gif) 0 0 no-repeat;
color: black;
}
#container {
clear: left;
float: left;
overflow: hidden;
width: 100%;
height: 100%;
}
#left_column {
position: relative;
float: left;
background-color: fuchsia;
width: 150px;
overflow: hidden;
}
#right_column {
position: relative;
float: left;
background-color: fuchsia;
width: 150px;
overflow: hidden;
}
#center_column {
position: relative;
left: 150px;
float: left;
overflow: hidden;
background-color: blue;
width: auto;
}



/*****************************************/
/* Slide it */
/*****************************************/

.fxSlideIt li {
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.fxSlideIt .navOutNext {
	-webkit-animation: slideOutLeft 0.5s forwards;
	animation: slideOutLeft 0.5s forwards;
}

.fxSlideIt .navInNext {
	-webkit-animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out;
	animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out;
}

.fxSlideIt .navOutPrev {
	-webkit-animation: slideOutRight 0.5s forwards;
	animation: slideOutRight 0.5s forwards;
}

.fxSlideIt .navInPrev {
	-webkit-animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out;
	animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out;
}

@-webkit-keyframes slideOutLeft {
	100% {
		-webkit-transform: translateX(-400%);
		opacity: 0;
	}
}

@keyframes slideOutLeft {
	100% {
		transform: translateX(-400%);
		opacity: 0;
	}
}

@-webkit-keyframes rotateSlideInRight {
	0% {
		-webkit-transform: translateX(100%) rotate(20deg);
	}
	35% {
		-webkit-transform: rotate(-8deg);
	}
	55% {
		-webkit-transform: rotate(6deg);
	}
	70% {
		-webkit-transform: rotate(-4deg);
	}
	85% {
		-webkit-transform: rotate(2deg);
	}
	95% {
		-webkit-transform: rotate(-1deg);
	}
	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes rotateSlideInRight {
	0% {
		transform: translateX(100%) rotate(20deg);
	}
	35% {
		transform: rotate(-8deg);
	}
	55% {
		transform: rotate(6deg);
	}
	70% {
		transform: rotate(-4deg);
	}
	85% {
		transform: rotate(2deg);
	}
	95% {
		transform: rotate(-1deg);
	}
	100% {
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes slideOutRight {
	100% {
		-webkit-transform: translateX(400%);
		opacity: 0;
	}
}

@keyframes slideOutRight {
	100% {
		transform: translateX(400%);
		opacity: 0;
	}
}

@-webkit-keyframes rotateSlideInLeft {
	0% {
		-webkit-transform: translateX(-100%) rotate(-20deg);
	}
	35% {
		-webkit-transform: rotate(8deg);
	}
	55% {
		-webkit-transform: rotate(-6deg);
	}
	70% {
		-webkit-transform: rotate(4deg);
	}
	85% {
		-webkit-transform: rotate(-2deg);
	}
	95% {
		-webkit-transform: rotate(1deg);
	}
	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes rotateSlideInLeft {
	0% {
		transform: translateX(-100%) rotate(-20deg);
	}
	35% {
		transform: rotate(8deg);
	}
	55% {
		transform: rotate(-6deg);
	}
	70% {
		transform: rotate(4deg);
	}
	85% {
		transform: rotate(-2deg);
	}
	95% {
		transform: rotate(1deg);
	}
	100% {
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}



.container {
	overflow: hidden;
}

/* This is the style for the dummy image slider. Animations are in fx[type].css */

.component {
	margin: 0 auto;
	position: relative;
	margin-bottom: 40px;
	max-width: 90%;
}

.component-small {
	width: 650px;
	height: 240px;
}

.component-fullwidth {
	width: 100%;
	
	margin-bottom: 0;
	background: #333;
}

.component-transparent {
	width: 100%;
	height: 400px;
}

.component > ul {
	width: 100%;
	max-width: 100%;
	height: 100%;
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.component-small > ul {
	width: 450px;
}

.component-fullwidth > ul {
	overflow: hidden;
}

.component-transparent > ul {
	width: 70%;

}

.component li {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 999;
}

.component-fullwidth li {
	overflow: hidden;
}

.component .current {
	opacity: 1;
	pointer-events: auto;
	z-index: 1000;
}

.component li img {
	display: block;
	height: 400px;
	max-width: 100%;
}

.component-fullwidth li img {
	min-height: 300px;
	max-width: none;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.component nav a {
	position: absolute;
	width: 60px;
	height: 60px;
	color: #5b4c5c;
	outline: none;
	overflow: hidden;
	text-align: center;
	line-height: 200px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.component-small nav a.prev,
.component-transparent nav a.prev {
	left: 0px;
}

.component-small nav a.next,
.component-transparent nav a.next {
	right: 0px;
}

.component-fullwidth nav a {
	top: 100%;
	margin-top: 25px;
	left: 50%;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

.component-fullwidth nav a.prev {
	margin-left: -80px;
}

.component-fullwidth nav a.next {
	margin-left: 20px;
}

.component nav a::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	line-height: 60px;
	height: 100%;
	font-family: 'fontawesome';
	font-size: 60px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	opacity: 0.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.component nav a:hover::before {
	opacity: 1;
}

a.prev::before {
	content: "\e601";
}

a.next::before {
	content: "\e600";
}

@media screen and (max-width: 35.5em) {
	.component-small nav a {
		top: 100%;
		margin-top: 10px;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}

	.component-small nav a.prev {
		left: 50%;
		margin-left: -80px;
	}

	.component-small nav a.next {
		margin-left: 20px;
		right: auto;
		left: 50%;
	}
}

/* webshop */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.grid {
	padding: 20px 20px 100px 20px;
	max-width: 100%;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid li {
	display: inline-block;
	width: 25%;
	margin: 0;
	padding: 10px;
	text-align: left;
	position: relative;
}

.grid figure {
	margin: 0;
	position: relative;
}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #44362B;
	color: #ed4e6e;
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
}

.grid figcaption span:before {
	content: 'by ';
}

.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #ed4e6e;
	color: #fff;
}

/* Individual Caption Styles */

/* Caption Style 6 */
.cs-style-6 figure img {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
	-webkit-transform: translateY(-70px) scale(1);
	-moz-transform: translateY(-70px) scale(1);
	-ms-transform: translateY(-70px) scale(1);
	transform: translateY(-70px) scale(1);
}

.cs-style-6 figcaption {
	height: 100%;
	width: 100%;
}

.cs-style-6 figcaption h3 {
	margin-top: 50%;
}

.cs-style-6 figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}


@media screen and (max-width: 31.5em) {
	.grid {
		padding: 10px 10px 100px 10px;
	}
	.grid li {
		width: 100%;
		min-width: 300px;
	}
}


/* tab */
.tab {
    position: relative;
	margin: 40px auto;
	width: 100%;
}

.tab input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tab input#tab-2{
	left: 150px;
}
.tab input#tab-3{
	left: 300px;
}
.tab input#tab-4{
	left: 450px;
}

.tab label {
	background: #cc0000;
	background: -moz-linear-gradient(top, #cc0000 0%, #990000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc0000), color-stop(100%,#990000));
	background: -webkit-linear-gradient(top, #cc0000 0%,#990000 100%);
	background: -o-linear-gradient(top, #cc0000 0%,#990000 100%);
	background: -ms-linear-gradient(top, #cc0000 0%,#990000 100%);
	background: linear-gradient(top, #cc0000 0%,#990000 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 150px;
	color: #ffffff;
	top: 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tab label:after {
    content: '';
	background: #ffffff;
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 8px;
	display: block;
}

.tab input:hover + label {
	background: #990000;
	top: -8px;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}
.tab input:hover + label:after{
	background: #990000;
}
.tab input:hover + label ~ .clear-shadow {
    top: -8px;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}

.tab input:checked:hover + label {
    top: 0;
}
.tabs input:checked:hover + label:after{
	background: #fff;
	
}
.tab input:checked:hover + label ~ .clear-shadow {
    top: 0;
	background: #fff;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

.tab input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{
    z-index: 3;
}

.tab input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
    z-index: 2;
}

.tab input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
    z-index: 1;
}

.tab input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
    z-index: 0;
}
.tab label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

.tab input:checked + label {
    background: #fff;
	color: #cc0000;
	z-index: 6;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}

.clear-shadow {
    background: #990000;
	position: relative;
	top: 0;
    height: 10px;
	margin-bottom: -10px;
    clear: both;
	z-index: -2;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);
    border-radius: 3px;
}

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
	overflow-y: auto;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	bottom: 100%;
	padding: 10px 40px;
	overflow-y: auto;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    transition: all linear 0.1s;
}

.tab input.tab-selector-1:checked ~ .content .content-1,
.tab input.tab-selector-2:checked ~ .content .content-2,
.tab input.tab-selector-3:checked ~ .content .content-3,
.tab input.tab-selector-4:checked ~ .content .content-4 {
	bottom: 0px;
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.2s;
    -moz-transition: all ease-out 0.2s 0.2s;
    -o-transition: all ease-out 0.2s 0.2s;
    -ms-transition: all ease-out 0.2s 0.2s;
    transition: all ease-out 0.2s 0.2s;
}

.content div h2,
.content div h3{
	font-family: DINPro-Light, Cambria, Georgia, serif;
	color: #990000;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: DINPro-Light, Cambria, Georgia, serif;
	border-left: 8px solid rgba(153,0,0, 0.1);
}