#title_area {
	background-image:url(../../image/product/classic/classic_csik_hatter.jpg);
}

#introduction_area {
	width:100%;
	box-sizing:border-box;
}
#introduction {
	padding-top:30px;
	width:100%;
	max-width:1200px;
	margin:0px auto;
}
#introduction .flex1 {
	width:100%;
	max-width:1200px;
	display:inline-flex;
	margin:0px auto;
	flex-wrap:wrap;
}
#introduction .left {
	width:63%;
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#616161;
	text-align:justify;
	line-height:30px;
	padding-right:20px;
	box-sizing:border-box;
}
#introduction .right {
	width:37%;
	text-align:center;
	align-self:center;
}
#introduction .right button {
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#dddddd;
	background-color:#6b6b6b;
	border:0px;
	border-radius:15px;
	text-transform:uppercase;
	padding:12px 40px 13px 40px;
}
#introduction .right button:hover {
	background-color:#f47c2a;
	cursor:pointer;
	
}
#introduction .line {
	margin:20px 0px;
	width:100%;
	height:1px;
	background-color:#e6e6e6;
}
#introduction .flex2 {
	width:100%;
	max-width:1200px;
	display:inline-flex;
	margin:0px auto;
	flex-wrap:wrap;
}
#introduction .flex2 .column {
	width:33.333333%;
	font-family:"Titillium Web Regular";
	font-size:30px;
	color:#f47c2a;
	text-align:center;
	text-transform:uppercase;
}
#introduction .flex2 .column img {
	display:inline-block;
	height:100%;
	width:50%;
	object-fit:cover;
}
#introduction .flex3 {
	width:100%;
	max-width:1200px;
	display:inline-flex;
	margin:0px auto;
}
#introduction .flex3 .column {
	width:50%;
	font-family:"Titillium Web SemiBold";
	font-size:30px;
	color:#f47c2a;
	text-align:left;
	text-transform:uppercase;
}
#introduction .flex3 .column img {
	width:100%;
	margin-top:10px;
	max-width:530px;
	height:240px;
	border-radius:10px;
	margin-bottom:30px;
	object-fit: cover;
}
#introduction h2 {
	font-family:"Titillium Web Regular";
	font-size:18px;
	color:#616161;
	text-align:justify;
	line-height:30px;
	margin-bottom:40px;
}
#introduction .flex4 {
	margin:10px 0px 30px;
	width:100%;
	display:inline-flex;
	align-items:center;
}
#introduction .flex4 .left {
	width:25px;
}
#introduction .flex4 .center {
	width:calc(100% - 50px);
	height:240px;
	overflow:hidden;
	text-align:left;
	border-radius:10px;
}
#introduction .flex4 .center div {
	margin-left:0%;
	height:100%;
	transition: margin-left 2s;
	width:200%;
}
#introduction .flex4 .right {
	width:25px;
}
#introduction .flex4 .left button {
	width:17px;
	height:31px;
	border:0px;
	background:url(../../image/product/nyil_balra_inaktiv.svg);
	background-size: cover;
}
#introduction .flex4 .left button:hover {
	background:url(../../image/product/nyil_balra_aktiv.svg);
	cursor:pointer;
}
#introduction .flex4 .right button {
	width:17px;
	height:31px;
	border:0px;
	background:url(../../image/product/nyil_jobbra_inaktiv.svg);
	background-size:cover;
	padding:0px;
	border-radius:0px;
}
#introduction .flex4 .right button:hover {
	background:url(../../image/product/nyil_jobbra_aktiv.svg);
	cursor:pointer;
}

#product_area {
	width:100%;
	background:url(../../image/products/Background.png);
	background-position:center;
}
#product {
	width:100%;
	max-width:1200px;
	margin:0px auto;
}

#material_area {
	width:100%;
	box-sizing:border-box;
}
#material {
	padding-top:30px;
	width:100%;
	max-width:1200px;
	margin:0px auto;
}
#material .flex {
	width:100%;
	max-width:1200px;
	display:inline-flex;
	margin:0px auto;
	text-transform:uppercase;
	font-family:"Titillium Web Regular";
	font-size:15px;
	flex-wrap:wrap;
}
#material .flex .column_type1 {
	background-color:#ffffff;
	color:#616161;
	padding:10px 15px;
	box-sizing:border-box;
}
#material .flex .column_type2 {
	background-color:#616161;
	color:#ffffff;
	text-align:center;
	padding:10px 15px;
	box-sizing:border-box;
	margin:0px 2px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
#material .flex .column_type2:hover {
	background-color:#f47c2a;
	cursor:pointer;
}
#material .flex .active {
	background-color:#f47c2a;
}
#material .flex .column1 {
	width:15%;
	text-align:right;
}
#material .flex .column2 {
	
}
#material .flex .column3 {
	
}
#material .flex .column4 {
	
}
#material .flex .column5 {
	
}
#material .flex .column6 {
	
}
#material .flex .column7 {
	
}
#material .flex2 {
	width:100%;
	max-width:1200px;
	display:inline-flex;
	margin:0px auto;
	font-family:"Titillium Web Regular";
	font-size:15px;
	border:1px solid silver;
	box-sizing:border-box;
	margin-bottom:30px;
	flex-wrap:wrap;
}
#material  .flex2 .column1 {
	width:50%;
	text-align:right;
	padding:15px 31px;
	box-sizing:border-box;
}
#material  .flex2 .column1 img {
	max-width:536px;
}
#material  .flex2 .column2 {
	width:25%;
	font-family: "Titillium Web Regular";
	font-size: 18px;
	color: #616161;
	line-height: 30px;
	padding:15px;
	box-sizing:border-box;
}
#material  .flex2 .column2 button {
	width:100%;
	padding:10px;
	border:0px;
	border-radius:5px;
	background-color:#f47c2a;
	color:#ffffff;
	box-sizing:border-box;
	text-align:center;
	text-transform:uppercase;
}
#material  .flex2 .column3 {
	width:25%;
	font-family: "Titillium Web Regular";
	font-size: 18px;
	color: #616161;
	line-height: 30px;
	padding:15px;
	box-sizing:border-box;
}
#material  .flex2 h4 {
	font-weight:bold;
	margin:5px 0px;
	text-align:center;
}

#slider {
	position:relative;
	margin-top:10px;
	width:100%;
	height:56px;
	overflow:hidden;
	text-align:left;
}
#slider .images {
	height:56px;
}
#slider img {
	height:56px;
	opacity:0.9;
}
#slider img:hover {
	opacity:1;
	/*filter:sepia(100%);*/
	cursor:pointer;
}
#slider button.left {
	position:absolute;
	left:10px;
	top:13px;
	width:30px;
	height:30px;
	border:0px;
	background:url(../../image/product/kornyil_balra_inaktiv.svg);
}
#slider button.left:hover {
	background:url(../../image/product/kornyil_balra_aktiv.svg);
	cursor:pointer;
}
#slider button.right {
	position:absolute;
	right:10px;
	top:13px;
	width:30px;
	height:30px;
	border:0px;
	background:url(../../image/product/kornyil_jobbra_inaktiv.svg);
}
#slider button.right:hover {
	background:url(../../image/product/kornyil_jobbra_aktiv.svg);
	cursor:pointer;
}

#lockstitch_area {
	width:100%;
	box-sizing:border-box;
}
#lockstitch {
	padding-top:30px;
	width:100%;
	max-width:1200px;
	margin:0px auto 20px;
}
#lockstitch h1 {
	width:280px;
	padding:10px;
	border:0px;
	border-radius:0px;
	background-color:#f47c2a;
	color:#ffffff;
	box-sizing: border-box;
	text-align: center;
	text-transform: uppercase;
	margin:0px auto;
	font-family:"Titillium Web Regular";
	font-size:16px;
	line-height:30px;
}
#slider2 {
	position:relative;
	margin-top:0px;
	width:100%;
	height:100px;
	overflow:hidden;
	text-align:left;
	padding:10px 0px;
	box-sizing:border-box;
	border:1px solid silver;
}
#slider2 .images {
	height:60px;
	width:3976px;
}
#slider2 img {
	height:60px;
}
/*#slider2 img:hover {
	opacity:1;
	cursor:pointer;
}*/
#slider2 div div {
	position:relative;
	float:left;
	margin:0px 1px;
}
#slider2 div div h2 {
	position:absolute;
	left:0px;
	top:46px;
	font-family:"Titillium Web Regular";
	font-size:13px;
	text-align:center;
	background-color:#f0f0f0;
	padding:3px 0px;
	width:100%;
	box-sizing:border-box;
}
#slider2 button.left {
	position:absolute;
	left:58px;
	top:38px;
	width:30px;
	height:30px;
	border:0px;
	background:url(../../image/product/kornyil_balra_inaktiv.svg);
}
#slider2 button.left:hover {
	background:url(../../image/product/kornyil_balra_aktiv.svg);
	cursor:pointer;
}
#slider2 button.right {
	position:absolute;
	right:58px;
	top:38px;
	width:30px;
	height:30px;
	border:0px;
	background:url(../../image/product/kornyil_jobbra_inaktiv.svg);
}
#slider2 button.right:hover {
	background:url(../../image/product/kornyil_jobbra_aktiv.svg);
	cursor:pointer;
}

#product_area {
	width:100%;
	box-sizing:border-box;
	margin-bottom:30px;
}
#product {
	position:relative;
	width:100%;
	height:370px;
	max-width:1200px;
	margin:0px auto;
	overflow:hidden;
}
#product .toyota {
    width:100%;
	height:350px;
    background-attachment:fixed;
	background-image:url(../../image/product/classic/toyota_rav4_01.jpg);
    background-size:cover;
	border:1px solid #9d9d9d;
	border-radius:15px;
	box-sizing: border-box;   
}

@media only screen and (max-width: 1024px) {
#introduction {
	padding:30px 15px 0px 15px;
	box-sizing:border-box;
}
#material {
	padding:30px 15px 0px 15px;
	box-sizing:border-box;
}
#material .flex2 .column1 img {
	max-width:434px;
}
#lockstitch {
    padding:30px 15px 0px 15px;
	box-sizing:border-box;
}
#product {
	padding:0px 15px;
	box-sizing:border-box;
}
}

@media only screen and (max-width: 834px) {
#material .flex2 .column1 img {
	max-width:339px;
}
#material .flex2 .column2 img {
	width:100%;
}
}

@media only screen and (max-width: 768px) {
#material .flex2 .column1 img {
	max-width:306px;
}
}

@media only screen and (max-width: 600px) {
#introduction .flex2 .column {
	width:100%;
}
#material .flex2 .column1 img {
	max-width:506px;
}
#material .flex2 .column1 {
	width:100%;
}
#material .flex2 .column2 {
	width:50%;
}
#material .flex2 .column3 {
	width:50%;
}
#material .flex .column1 {
	width:100%;
	text-align:center;
}
#material .flex .column5 {
	width:100%;
	text-align:center;
}
}

@media only screen and (max-width: 414px) {
#material .flex2 .column1 img {
	max-width:320px;
}
#material .flex2 .column2 {
    width:100%;
}
#material .flex2 .column3 {
    width:100%;
}
}

@media only screen and (max-width: 375px) {
#material .flex2 .column1 img {
	max-width:281px;
}
#introduction .left {
    width: 100%;
}
#introduction .right {
    width: 100%;
}
}

@media only screen and (max-width: 360px) {
#material .flex2 .column1 img {
	max-width:266px;
}
}

@media only screen and (max-width: 320px) {
#material .flex2 .column1 img {
	max-width:226px;
}
}