/*Fonts*/ 
@font-face { font-family:brand; font-style:normal; font-weight:normal; src:url("honeycomb.ttf"); }
@font-face { font-family:myriad; font-style:normal; font-weight:normal; src:url("myriad.ttf"); }


/*Background*/
html { scroll-behavior: smooth; }
body { margin:0; height:100vh; padding:0; background:url(pattern.svg); background-size: 2.5vh auto; background-repeat:repeat; background-attachment:fixed; }
#fade { z-index:-1; position: fixed; display:block; top:0; padding:0; width:100vw; height:100vh; background-color:white; opacity:0.75; }


/*Images*/
.hc_logo { margin-top:-2.5vh; width:auto; height:10vh; }
.logo { width:5vh; height:2.5vh; border: 0.1vh solid Grey; border-radius: 1vh; }
.small_media { width:auto; height:3vh; margin: 0 0.25vw 0 0.25vw; }
.big_media { width:auto; height:6vh; margin: 0 0.5vw 0 0.5vw; }
.qrcode { width:12vw; height:12vw; }
.gallery { width:40vw; height:auto; margin: 0 0.25vw 0 0.25vw; }


/*Top Bar*/
#top_bar { z-index:2; position:fixed; display:block; top:5vh; padding:0; width:100vw; height:5vh; background-color:white; }
#top_contents { display:flex; justify-content:space-between; margin-left:20vw; width:60vw; height:5vh; }
#menu { display:flex; justify-content:space-between; align-items:center; width:48vw; height:5vh; }
#submenu { position:fixed; display:flex; top:11vh; padding:0; justify-content:flex-end; align-items:center; margin-left:31.7vw; width:48vw; height:2.5vh; }
#current { display:flex; justify-content:space-between; align-items:center; width:5vw; height:5vh; }
#top_buttons { display:flex; justify-content:space-between; align-items:center; width:14vw; height:5vh; }
#top_media { position:absolute; display:flex; justify-content:flex-end; margin:-4vh 0 0 66vw; align-items:center; width:14vw; height:3vh; }


/*Main Contents*/
#main_contents { display:flex; top:0; padding:0; flex-direction:column; }
#content { display:flex; padding:0; width:100vw; height:85vh; background-position:center; background-size: cover; }
#content_input { display:flex; justify-content:center; align-items:center; margin-right:2vw; }
#separator { display:flex; padding:0; width:100vw; height:10vh; }
#big_titles { display:flex; margin-left:20vw; align-self:center; width:20vw; flex-direction:column; }
#titles { display:flex; margin-left:20vw; align-self:center; width:20vw; flex-direction:column; }
#gallery_wrapper { display:flex; width:14vw; flex-direction:column; }
#gallery { display:flex; width:14vw; flex-direction:column; }
#social { display:flex; flex-direction:row; align-self:center; width:40vw; max-height:60vh; }
#archive { display:flex; flex-direction:column; align-self:center; width:40vw; height:60vh; }
#texts { display:flex; flex-direction:column; align-self:center; width:40vw; max-height:60vh; }


/*Text Area*/
#text_row { display:flex; flex-direction:row; justify-content:space-between; width:40vw; margin:1vh 0 1vh 0; }
#text_column { display:flex; flex-direction:column; justify-content:center; width:40vw; margin:1vh 0 1vh 0; }
#text_content { display:flex; justify-content:center; align-items:center; margin:2vh 0 2vh 0; flex-wrap:wrap; }
#archive_tabs { display:flex; flex-direction:row; justify-content:space-evenly; width:39vw; height:3vh;}
#archive_titles { display:flex; flex-direction:row; justify-content:space-between; width:39vw; height:5vh;}
#pattern_titles { display:flex; justify-content:flex-start; align-items:center; width:6vw; height:5vh;}
#price_titles { display:flex; justify-content:flex-start; align-items:center; width:3vw; height:5vh; }
#campaign_titles { display:flex; justify-content:flex-start; align-items:center; width:3vw; height:5vh; }
.pattern_area { display:none; flex-direction:column; width:40vw; height:50vh; overflow-y:hidden; }
.price_area { display:none; flex-direction:column; width:40vw; height:50vh; overflow-y:hidden; }
.campaign_area { display:none; flex-direction:column; width:40vw; height:50vh; overflow-y:hidden; }
#archive_row { display:flex; flex-direction:row; justify-content:space-between; width:39vw; }
#pattern_item { display:flex; justify-content:flex-start; align-items:center; width:6vw; }
#price_item { display:flex; justify-content:flex-start; align-items:center; width:3vw; }
#campaign_item { display:flex; justify-content:flex-start; align-items:center; width:3vw; }


/*Accordion*/
.accordion-wrapper { width:40vw; }
.accordion-outer { margin-bottom:2vh; }
.accordion-heading { background-color:rgba(255, 255, 255, 0.25); padding:0.5vh 0.5vw; border-radius:1vh; font-family:myriad; font-size:2vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; cursor:pointer; position:relative; color:white; text-shadow: 2px 2px #999999; }
.accordion-heading:hover { background-color:rgba(255, 255, 255, 0.75); }
.accordion-heading:after { position:absolute; font-family:myriad; font-size:2vh; right:0.5vw; content:"\25BA"; }
.accordion-outer.is-open .accordion-heading:after { content: "\25BC"; }
.accordion-content { padding:1vh 1vw; background-color:rgba(0, 0, 0, 0.5); border-radius:1vh; display:none; }


/*Index Promotions*/
#promotion-wrapper { width:20vw; align-self:flex-end; }
#promotion-heading { background-color:rgba(255, 255, 255, 0.75); padding:0.5vh 0.5vw; border-radius:1vh; font-family:myriad; font-size:2vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; position:relative; content: "\25BC"; color:white; text-shadow: 2px 2px #999999; }
#promotion-content { padding:1vh 1vw; background-color:rgba(0, 0, 0, 0.5); border-radius:1vh; }


/*Gallery*/
.product-small-image { display:flex; flex-direction: column; height:60vh; width:14vw; overflow-y:hidden; }
.product-small-image img { margin-bottom:0.5vh; }
.product-small-image img:hover { cursor:pointer; }
.product-small-image img.active { transform:scale(0.9); filter:none; border-style:solid; border-color:#05A0FD; }
.hvr-shrink { display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration:0.7s; -webkit-transition-property: transform; transition-property: transform; }
.product-big-image { width:40vw; height:22vw; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.product-big-image img { height:100%; width:100%; object-fit:cover; opacity:1; transition:opacity 0.5s ease-in-out; }
.product-big-image img.fade-out { opacity:0; }


/*Bottom Bar*/
#bottom_bar{ z-index:2; position:fixed; display:block; top:95vh; padding:0; width:100vw; height:5vh; border-top: 0.5vh solid #FA5F02; background-color:white; }
#bottom_contents { display:flex; justify-content:space-between; align-items: center; margin-left:20vw; width:60vw; height:5vh; }
#main_links { display:flex; justify-content:space-between; width:14vw; }


/*Texts*/
.logo_big { font-family:brand; margin:1vh 0; font-size:4vh; letter-spacing:1.75vh; }
.logo_medium { font-family:brand; margin:1vh 0; font-size:2.5vh; letter-spacing:1.5vh; }
.logo_brand { color:#FA5F02; font-family:brand; font-size:1.5vh; letter-spacing:1vh; }
.big_text { font-family:myriad; margin:0.5vh 0; font-size:2.5vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.medium_text { font-family:myriad; margin:0.5vh 0; font-size:2vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.normal_text { color:#999999; font-family:myriad; font-size:2vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.small_text { color:#999999; font-family:myriad; font-size:1.75vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.mini_text { color:#999999; font-family:myriad; font-size:1.5vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.micro_text { color:#999999; font-family:myriad; font-size:1vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.text_brand { color:#FA5F02; font-family:myriad; font-size:2vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.menu_text { margin-left:-2vh; color:black; font-family:myriad, monospace; font-size:2vh; font-weight:300; font-variant-ligatures: no-common-ligatures; letter-spacing:0.1vw; }
.copyright { margin-left:9.3vh; color:#999; font-family:myriad; font-size:1.25vh; }


/*Inputs*/
.inputs { height:4vh; border:1px solid #999999; border-radius: 1vh; padding-top:1vh; text-align:center; font-family:myriad; font-size:1.75vh; }
.inputs:read-only { background:#DDDDDD; }
label { position:absolute; display:block; height:2vh; margin-top:-5vh; padding:0.5vh 0.5vw 0 0.5vw; background-color:#999; border-radius:2vh; color:white; text-align:center; font-family:myriad; font-size:1.5vh; line-height:1.4; }


/*Buttons*/
.buttons { width:20vw; height:5vh; background:#FA5F02; border-radius:1vh; border:1px solid #FA5F02; text-align:center; color:white; font-family:myriad; font-size:2vh; cursor:pointer; }
#archive_tabs button { width:5vw; height:3vh; background-color:rgba(0, 0, 0, 0); border-color:white; border-style:solid; border-radius:1vh; align-content:space-around; color:white; font-family:myriad; font-size:1.75vh; cursor:pointer; }
#archive_tabs button:hover { border-color:#05A0FD; }
#archive_tabs button.active { color:#FA5F02; }
#titles button { margin:2vh 0; width:3vh; height:3vh; align-self:center; background-color:#EEEEEE; border-color:white; border-style:solid; border-radius:1vh; align-content:space-around; color:#05A0FD; font-family:myriad; font-size:1.75vh; cursor:pointer; }
#titles button:hover { color:#FA5F02; }


/*Main Links*/
a.intro:link, a.intro:visited { font-family:myriad; margin:0.5vh 0; font-size:2vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
a.intro:hover { text-decoration:underline; text-underline-position:under; }
a.menu:link, a.sub_menu:visited { text-align:center; font-family:myriad; font-size:2vh; color:#FA5F02; text-decoration:none; cursor:pointer; }
a.menu:link, a.menu:visited { color:#FA5F02; }
a.menu:hover { text-decoration:underline; text-underline-position:under; }
a.menu.active { text-decoration:underline; text-underline-position:under; text-decoration-style:double; }
a.sub_menu:link, a.sub_menu:visited { margin-left:1.6vw; height:1.75vh; padding:0.5vh 0.5vh; background-color:#EEEEEE; border-radius:0.5vh; border-style:solid; border-width:medium; border-color:white; text-align:center; font-family:myriad; font-size:1.25vh; color:black; text-decoration:none; cursor:pointer; }
a.sub_menu:hover { border-color:#05A0FD; text-decoration:underline; text-underline-position:under; }
a.sub_menu.active { border-color:#FA5F02; text-decoration:underline; text-underline-position:under; text-decoration-style:double; }
a.bottom:link, a.bottom:visited { text-decoration:none; color:#999999; font-family:myriad; font-size:1.75vh; }
a.bottom:hover { text-decoration: underline; text-underline-position:under; }
a.bottom.active { text-decoration: underline; text-underline-position:under; text-decoration-style:double; }


/*Links*/
a { text-decoration:none; color:#05A0FD; font-family:myriad; font-size:1,5vh; }
a.current:link, a.current:visited { font-family:myriad; font-size:1.5vh; color:#05A0FD; text-decoration:none; cursor:pointer; }
a.account:link, a.account:visited { width:6vw; height:2.5vh; padding-top:0.5vh; border-radius:1vh; text-align:center; font-family:myriad; font-size:1.5vh; color:white; text-decoration:none; cursor:pointer; }
a.knowmore:link, a.knowmore:visited { margin-top:2vh; width:8vw; height:3vh; padding-top:1vh; border-radius:1vh; background:white; text-align:center; font-family:myriad; font-size:1.75vh; text-decoration:none; cursor:pointer; }