/* GENERAL */
html, body { margin: 0px; padding: 0px; font-size: 17px; color: #3b3738; background-color: #fff; font-family: 'Roboto', sans-serif, 'Open Sans', 'Myriad Pro', arial; line-height: 150%; }
a { text-decoration: none; color: #003d8f; }
h1, h2, h3 { margin: 0px; padding: 0px; line-height: 150%; font-family: 'Times'; }
.fontP { color: #d1c78d; }
.fontS { color: #d4d4d4; }

/* HEADER */
header { display: flex; flex-direction: row; width: 100%; height: 150px; justify-content: center; }
header > a { display: block; background-image:url('img/walkers-main-logo.png'); background-repeat: no-repeat; width: 313px; height: 250px; position: absolute; }
header > a > span { display: none; }
@media (max-width: 600px) {
	header { display: flex; height: 100px; }
	header > a { height: 180px; background-size: contain;  }
}

/* UNIVERSAL: BOX */
section { display: flex; flex-direction: row; width: 100%; justify-content: center; background-color: #fff; }
.ultraWide, .standardWide { width:100%; display: flex; flex-direction: column; }
.standardWide { max-width: 1100px; }
.ultraWide > div { display: flex; flex-direction: row; width: 100%; justify-content: center; }
/* UNIVERSAL: INFO */
section .sInfo { display: flex; flex-direction: column; text-align: center; }
section .sInfo h1, section .sInfo h2 { margin: 10px auto; line-height: 110%; }
section .sInfo p { margin: 0px 20px 20px 20px; }
.ultraWide > div .sInfo { max-width: 800px; }
.ultraWide > div .sInfo > h2 { font-size: 50px; font-weight: 100; margin-top: 50px; }
/* UNIVERSAL: BUTTON */
section .sButton { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 50px auto; }
section .sButton > a { display: flex; flex-direction: column; justify-content: center; width: 225px; height: 60px; background-color: #a02e23; color: #fff; border-radius: 30px; text-align: center; font-size: 20px; }
section .sButton > a:hover { background-color: #821f15; }
/* UNIVERSAL: BANNER */
section .sBanner { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 5px auto; }
section .sBanner > a { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 40vw; max-height: 500px; background-repeat: no-repeat; background-size: contain; background-position: center; }
section .sBanner > a > span { display: none; }

/* HEAD BANNER */
section .headBanner { height: 57vw; max-height: 1000px; background-size: contain; background-repeat:no-repeat; background-position: center; color: #fff; }
section .headBanner .sInfo { margin-top: 30vw; }
section .headBanner .sInfo h1 { font-size: 50px; font-weight: 100; text-shadow: 0px 0px 6px #000; }
section .headBanner .sInfo p { font-size: 25px; line-height: 130%; text-shadow: 0px 0px 6px #000; }
@media (max-width: 1000px) {
	section .headBanner .sInfo { margin-top: 25vw;} 
	section .headBanner .sInfo h1 { font-size: 40px; }
	section .headBanner .sInfo p { font-size: 18px;  }
}
@media (max-width: 600px) {
	section .headBanner .sInfo { margin-top: 10vw;} 
	section .headBanner .sInfo h1 { font-size: 30px; }
	section .headBanner .sInfo p { font-size: 15px;  }
}

/* NAVIGATION: BUTTON */
section .naviPage { display: flex; flex-direction: column; height: 350px; justify-content: center; }
section .naviPage > div { display: flex; flex-direction: row; width: 100%; height: 270px; justify-content: space-around;  flex-flow: wrap; }
section .naviPage > div a { display: flex; width: 225px; height: 270px; background-position: center top; background-repeat: no-repeat; background-size: contain;     flex-direction: column; justify-content: flex-end; text-align: center; color: #000; }
@media (max-width: 1000px){
	section .naviPage { height: 250px; }
	section .naviPage > div { height: 170px; }
	section .naviPage > div a { width: 135px; height: 170px; }
}
@media (max-width: 600px){
	section .naviPage { height: 400px; }
	section .naviPage > div  { height: 400px; }
	section .naviPage > div a { width: 45vw; height: 200px; background-size: 150px 150px }
}
/* NAVIGATION: TITLE */
section .naviTitle {  display: flex; flex-direction: column; }
section .naviTitle h2 > a { color: #000; }

/* HISTORY BANNER */
.ultraBanner { display: block; background-position: center; background-repeat: no-repeat; background-size: contain; width: 100%; height: 300px; }
.b01 { height: 26vw; }
.b02 { height: 26vw; }
.b03 { height: 700px; }
@media (max-width: 1000px){
	.b03 { height: 70vw; }
}
@media (max-width: 600px){
	.b01 { height: 260px; background-position: -300px center; background-size: 160%; }
	.b02 { height: 260px; background-position: -350px center; background-size: 180%; }
}

/* DESCRIPTION: GENERAL */
.stepDesc { font-size: 15px; flex-direction: row; justify-content: center; }
.stepDesc > div { display: flex; width: 90vw; flex-direction: column; justify-content: center; margin-bottom: 50px; }
.stepDesc > div > div { display: flex; flex-direction: row; justify-content: flex-start; }
.stepDesc > div > div > span, .stepDesc > div > div > a { display: block; background-repeat: no-repeat; background-size: contain; background-position: center; }
.stepDesc > div > div > p { display: flex; flex-direction: column; justify-content: center; margin-left: 20px; margin-right: 50px; }
.stepDesc > div > div:nth-child(2n) { flex-direction: row-reverse; text-align: right; }
@media (max-width: 600px){
	.stepDesc > div > div, .stepDesc > div > div:nth-child(2n) { flex-direction: column; text-align: left; }
	.stepDesc > div > div > span, .stepDesc > div > div > a { height: 200px; }
	.stepDesc > div > div > p { text-align: center; font-size: 14px; line-height: 150%; margin: 0px; }
}
/* DESCRIPTION: HISTORY */
.stepDescHistory { margin: 0px 0px 30px 0px; }
.stepDescHistory > div > div { min-height: 150px; margin: 20px 0px 0px 0px;  }
.stepDescHistory > div > div > span, .stepDescHistory > div > div > a { min-width: 240px; }
@media (max-width: 600px){
	.stepDescHistory > div > div > span, .stepDescHistory > div > div > a { height: 160px; }
}
/* DESCRIPTION: LOGO */
.stepDescLogo { margin: 30px 0px; }
.stepDescLogo > div > div { min-height: 100px; margin: 20px 0px 0px 0px;  }
.stepDescLogo > div > div > span, .stepDescLogo > div > div > a { min-width: 300px; background-size: 80%; }
@media (max-width: 800px){
	.stepDescLogo > div > div > span, .stepDescLogo > div > div > a { min-width: 200px; }
}
@media (max-width: 600px){
	.stepDescLogo > div > div > span, .stepDescLogo > div > div > a { height: 80px; background-size: 50%; }
}

/* CATALOG SAMPLE */
.sampleCatalog > div { display: flex; flex-direction: row; justify-content: space-around; text-align: center; }
.sampleCatalog > div > div { display: flex; flex-direction: column; width: 330px; height: 330px; justify-content: space-between; }
.sampleCatalog > div > p { width: 100%; text-align: center; justify-content: center; }
.sampleCatalog > div > div > span { display: block; width: 330px; height: 330px; background-size: contain; background-repeat:no-repeat; background-position: center; }
@media (max-width: 1000px){
	.sampleCatalog > div > div, .sampleCatalog > div > div > span { width:220px; height:220px; }
}
@media (max-width: 700px){
	.sampleCatalog > div > div, .sampleCatalog > div > div > span { width:150px; height:150px; }
}
@media (max-width: 500px){
	.sampleCatalog > div { max-width: 100vw; justify-content: flex-start; overflow: auto;  }
	.sampleCatalog > div > div { margin: 0px 20px; display: block; padding-bottom: 20px; }
	.sampleCatalog > div > div, .sampleCatalog > div > div > span { width:220px; height:220px; margin-right: 20px; }
}

/* COOKIES INSTA */
.cookiesInsta > div { display: flex; flex-direction: row; justify-content: space-around; text-align: center; height: 360px; }
.cookiesInsta > div > div { display: flex; flex-direction: column; width: 330px; height: 330px; justify-content: space-between; }
.cookiesInsta > div > div > span { display: block; width: 330px; height: 330px; background-size: contain; background-repeat:no-repeat; background-position: center; }
@media (max-width: 1000px){
	.cookiesInsta > div { height: 260px; }
	.cookiesInsta > div > div, .cookiesInsta > div > div > span { width:220px; height:220px; }
}
@media (max-width: 700px){
	.cookiesInsta > div { height: 200px; }
	.cookiesInsta > div > div, .cookiesInsta > div > div > span { width:150px; height:150px; }
}
@media (max-width: 500px){
	.cookiesInsta > div { height: 140px; }
	.cookiesInsta > div > div, .cookiesInsta > div > div > span { width:100px; height:100px; }
}

/* ITEMS */
.itemList > div { display: flex; flex-direction: row; justify-content: space-around; text-align: center; max-width: 100vw; justify-content: flex-start; overflow: auto; }
.itemList > div > div { display: flex; flex-direction: column; width: 280px; height: 350px; justify-content: space-between; margin: 0px 20px; display: block; padding-bottom: 20px; }
.itemList > div > div > a > span { display: block; width: 280px; height: 280px; background-size: contain; background-repeat:no-repeat; background-position: center; color: #000;  }
.itemList > div > div > a > p { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 500px){
	.itemList > div > div, .itemList > div > div > a > span { width:200px; height:200px; margin-right: 20px; }
	.itemList > div > div { height: 250px; }
}

/* FOOTER */
footer { display: flex; flex-direction: row; width: 100%; height: 120px; justify-content: center; background-color: #000; }
footer > a { display: block; background-image:url('img/walkers-main-logo.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 193px; height: 120px; }
footer > a > span { display: none; }
@media (max-width: 600px) {
}