/*HOME PAGE*/

/*--------------------------------*/

/*Big Pic*/

/*.homecap {border: 1px solid red} .homecap h1 {border: 1px solid green} .homecap div {border: 1px solid magenta}
.homecap aside {border: 1px solid yellow}*/

#homepic, #homepic * {box-sizing: border-box;}

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #6E6C67;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 80vw; object-fit: cover; object-position: 50% 50%; display: block;}

.homecap aside {display: table; margin: 40px auto 0 auto; text-align: center;} .homecap aside a {display: inline-block;}
.homecap aside .phlink {color: #FFF !important; cursor: pointer;}

.homecap {position: absolute; left: 5%; right: 5%; text-align: center; top: 60%; transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); z-index: 1; margin: 0 auto; color: var(--color3); max-width: 1400px;}
.homecap div {font-size: 42px; line-height: 1.3; font-weight: 500;}
.homecap div:nth-child(3) {font-size: 1.7em; text-transform: uppercase; letter-spacing: .8px; word-spacing: 2px;}
.homecap h1 {font-family: 'NotoSerif', "Times New Roman", Times, serif; font-weight: 400; font-size: 85px; line-height: 1.15; letter-spacing: 0; text-align: center; color: #FFF; padding-top: 4px; padding-bottom: 8px; margin: 0 auto;}

@media (max-width: 1100px) {#homepic img {height: 800px;} .homecap h1 {font-size: 75px;}}
@media (min-width: 1321px) {.homecap h1 span {display: block;}}
@media (max-width: 1000px) and (min-width: 661px) {
.homecap h1 {font-size: 8vw;} .homecap div:first-child {font-size: 4vw;} .homecap div:nth-child(3) {font-size: 3.5vw;}
}
@media (min-width: 661px) {
#homepic img {max-height: 800px;} .homecap .btn {margin: 40px auto 0 auto;} .homecap .btn a {font-size: 22px;}
.homecap .btn a, .homecap .btn div {padding: 13px 17px 12px 17px;}
}
@media (max-width: 660px) {
#homepic img {height: calc(75vw + 350px);}
.homecap {top: 72%; transform: translateY(-78%); -ms-transform: translateY(-78%); transform: translateY(-78%);}
.homecap h1 {font-size: 10vw;} .homecap div:first-child {font-size: 5.5vw;} .homecap div:nth-child(3) {font-size: 4.8vw;}
.homecap .btn {margin: 25px auto 0 auto;} .homecap .btn a {padding: 10px 16px 9px 16px; font-size: 20px;}
.homecap div:first-child span {display: block;}
}
@media (max-width: 510px) {
#homepic {padding-top: 215px;}
.homecap {top: 84%; transform: translateY(-84%); -ms-transform: translateY(-84%); transform: translateY(-84%);}
.homecap h1 {font-size: 11vw;} .homecap div:first-child {font-size: 6.3vw;} .homecap div:nth-child(3) {font-size: 5.3vw;}
#homepic img {height: calc(80vw + 190px);} .homecap div:nth-child(3) {font-size: 5.5vw;}
}
@media (min-width: 501px) {#homepic img {filter: brightness(50%);}}
@media (max-width: 380px) {.homecap .btn a {padding: 10px 15px 8px 15px; font-size: 19px;}}

.homecap .btn a, .homecap .btn div {display: table; text-decoration: none; background-color: var(--color1); transition: 0.25s; white-space: nowrap; border-radius: 6px; font-weight: 400; line-height: 1.4; color: #FFF;}
.homecap .btn a {border: 1px solid #FFF;}
.homecap .btn a:hover, .homecap .btn div:hover {background-color: var(--color2);}

/*--------------------------------*/

/*Under Pic*/

/*#underpic article {border: 1px solid red} #underpic div {border: 1px solid color2}
#underpic span {border: 1px solid magenta} #underpic p {border: 1px solid #FFF;}*/

#underpic {background-color: var(--color1); color: #FFF;}
#underpic article {display: table; width: 100%; text-align: center; padding: 35px 0; margin: auto; max-width: 1250px; font-size: 18px;}
#underpic div {display: table-cell; width: 33%;} #underpic span {line-height; 1.5;}
#underpic span:not(span span) {display: block; text-transform: uppercase; font-family: 'NotoSerif', "Times New Roman", Times, serif; font-size: 1.5em; margin-top: 15px; color: #FFF;}
#underpic img {width: 47px; height: 47px;}
#underpic p {font-size: .95em; line-height: 1.35; padding: 0 35px; margin-bottom: 0;}

@media (max-width: 1200px) and (min-width: 731px) {#underpic span span {display: block;}}
@media (max-width: 1160px) {
#underpic article {padding: 25px 0;} #underpic span span {display: block; line-height: 1.2} #underpic p {padding: 0 25px;}
}
@media (max-width: 850px) {#underpic span:not(span span) {font-size: 1.35em;} #underpic p {font-size: .85em; padding: 0 20px;}}
@media (max-width: 730px) {
#underpic article {padding: 35px 0 50px 0;}
#underpic span span {display: inline;} #underpic div {display: block; width: auto; padding: 0 20px;}
#underpic span:not(span span) {margin-top: 0;} #underpic div:not(div:first-child) img {margin-top: 30px;}
}
@media (max-width: 415px) {#underpic span span {display: block;}}

/*--------------------------------*/

/*Top Area*/

/*#toparea {border: 1px solid red} #toparea .bodyarea {border: 1px solid blue}
#toparea section {border: 1px solid green} #toparea img {border: 1px solid magenta}*/

#toparea {margin: 40px auto; background-color: #FFF;}
#toparea .bodyarea {padding: 0;}
#toparea .bodyhead {text-align: left;}
#toparea img {width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; align-self: center; border-radius: 6px; object-position: 12% 85%;}
#toparea p {margin-bottom: 0;}

@media (min-width: 1501px) {#toparea .bodyarea {grid-template-columns: 60% 40%;} #toparea section:first-child {padding: 50px 0;}}
@media (max-width: 1500px) and (min-width: 1351px) {#toparea .bodyarea {grid-template-columns: 55% 45%;}}
@media (max-width: 1405px) and (min-width: 1201px),(max-width: 680px) and (min-width: 461px) {#toparea .bodyhead span {display: block;}}
@media (max-width: 1350px) and (min-width: 1201px) {#toparea .bodyarea {grid-template-columns: 50% 50%;} #toparea img {height: 85%;}}

@media (min-width: 1201px) {
#toparea .bodyarea {display: grid; grid-auto-rows: 1fr;}
#toparea section:first-child {margin-right: 20px;} #toparea section:last-child {display: grid; margin-left: 20px;}
}
@media (max-width: 1200px) {
#toparea section:last-child {margin: 30px 0 50px 0;}
#toparea img {height: calc(80px + 45vw); max-height: 450px;}
}
@media (max-width: 680px) {#toparea .bodyhead {text-align: center;}}

/*--------------------------------*/

/*Product category boxes*/

#boxback {background-color: #DCC4A3;}
#boxes a {color: inherit; text-decoration: none; display: block;}
#boxes .box {background-color: #FFF; position: relative; border-radius: 8px; transition: .3s; border: 4px solid #F2EADE;}
#boxes .box .blkhead {margin: 40px auto 10px auto; text-align: center; transition: 0.15s;}
#boxes h2 {font-family: 'NotoSerif', "Times New Roman", Times, serif; margin: 0 auto; font-size: 32px; line-height: 1.2; font-weight: 400 !important; color: var(--color2);}
#boxes span:after {display: inline-block; content: "\276F"; font-size: 27px; margin-left: 12px; transition: transform .15s ease;}
#boxes img {width: 383px; height: 223px; width: 100%; height: calc(8vw + 150px); max-height: 300px; display: block; object-fit: cover; transition: 0.2s; border-radius: 4px 4px 0 0; /*object-position: 50% 50%;*/}
#boxes .box .blkbody {padding: 20px 20px 30px 20px; text-align: center; font-size: 17px; line-height: 1.55;}

#boxes .box:hover {border: 4px solid var(--color1);}
#boxes .box a:hover img {filter: brightness(120%);}
#boxes .box:hover span:after {transform: translateX(3px);}

@media (min-width: 1141px) {
#boxes {grid-template-columns:repeat(6, minmax(0,1fr)); max-width: 1500px; margin: auto; text-align: center; justify-self: center;}

#boxes > .box:nth-child(1) { grid-column: 1 / span 3; }
#boxes > .box:nth-child(2) { grid-column: 4 / span 3; }

#boxes > .box:nth-child(3) { grid-column: 1 / span 2; }
#boxes > .box:nth-child(4) { grid-column: 3 / span 2; }
#boxes > .box:nth-child(5) { grid-column: 5 / span 2; }

/*#boxes > .box:nth-child(1) {grid-column:2 / span 2;}
#boxes > .box:nth-child(2) {grid-column:4 / span 2;}

#boxes > .box:nth-child(3) {grid-column:1 / span 2;}
#boxes > .box:nth-child(4) {grid-column:3 / span 2;}
#boxes > .box:nth-child(5) {grid-column:5 / span 2;}*/
}
@media (max-width: 1140px) {
#boxes {grid-template-columns:repeat(4, minmax(0,1fr)); margin: auto; text-align: center; justify-self: center;}

#boxes > .box:nth-child(1) {grid-column:1 / span 2;}
#boxes > .box:nth-child(2) {grid-column:3 / span 2;}

#boxes > .box:nth-child(3) {grid-column:1 / span 2;}
#boxes > .box:nth-child(4) {grid-column:3 / span 2;}

#boxes > .box:nth-child(5) {grid-column:2 / span 2;}
}

@media (max-width: 1450px) and (min-width: 1141px),(max-width: 1040px) and (min-width: 721px),(max-width: 530px) {#boxes .box:nth-child(3) h2 span, #boxes .box:nth-child(5) h2 span {display: block;}}
@media (max-width: 880px) and (min-width: 721px),(max-width: 415px) {#boxes .box:first-child h2 span {display: block;}}

/*@media (max-width: 1450px) and (min-width: 1141px),(max-width: 930px) and (min-width: 701px),(max-width: 480px) {#boxes h2 span {display: block;}}*/
@media (min-width: 821px) {#boxback {padding: 60px;} #boxes {grid-gap: 30px; gap: 30px;}}
@media (max-width: 820px) {#boxback {padding: 50px 40px;} #boxes {grid-gap: 20px; gap: 20px;}}

@media (min-width: 721px) {#boxes {display:grid;}}
@media (max-width: 720px) {
#boxback {padding: 20px 40px 40px 40px;}
#boxes {max-width: 500px;}
#boxes .box {margin: 40px auto;}
#boxes .box .blkbody {padding: 20px 20px 25px 20px;}
#boxes img {height: calc(18vw + 160px); object-position: 50% 20%;}
#boxes .box .blkhead {margin: 25px auto 0px auto; padding: 0 25px;}
}
@media (max-width: 450px) {#boxback {padding: 20px 25px 25px 25px;} #boxes .box {margin: 30px auto;}}

/*-----------------------------------------------*/

/*Bottom Pic*/

#btmpic {position: relative; overflow: hidden; z-index: 0; background-color: #101312;}
#btmpic img {width: 500px; height: 300px; width: 100%; max-height: 400px; object-fit: cover; object-position: 50% 50%; display: block;}

#btmpic div {position: absolute; display: table-cell; left: 50px; right: 50px; margin: auto; text-align: center; top: 48%; transform: translateY(-48%); -ms-transform: translateY(-48%); transform: translateY(-48%); z-index: 1; font-family: 'NotoSerif', "Times New Roman", Times, serif; font-weight: 400; line-height: 1.3; color: #FFF; text-shadow: 1px 1px 2px #000; max-width: 850px; margin: auto;}

@media (min-width: 986px) {#btmpic img {height: 400px;} #btmpic div {font-size: 42px;}}
@media (max-width: 985px) {#btmpic img {height: 35vw;} #btmpic div {font-size: 4vw;}}
@media (max-width: 615px) {#btmpic div {left: 30px; right: 30px;}}
@media (max-width: 570px) {#btmpic img {height: 52vw;} #btmpic div {font-size: 5vw;}}
@media (max-width: 450px) {#btmpic img {height: 70vw;} #btmpic div {font-size: 6vw;}}
@media (max-width: 350px) {#btmpic img {height: 90vw;} #btmpic div {font-size: 6.5vw;}}
/*@media (min-width: 501px) {#btmpic img {filter: brightness(50%);}}*/

/*-----------------*/