/*Fonts*/ 
@font-face { font-family:brand; font-style:normal; font-weight:normal; src:url("resin.otf"); }
@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.png); background-size: 1vh 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.7; }


/*Images*/
.rm_logo { margin-top:-6vh; width:auto; height:10vh; }
.logo { width:5vh; height:2.5vh; border: 0.1vh solid Grey; border-radius: 1vh; }
.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; }


/*Intro*/
#intro { position:fixed; display:flex; top:0; padding:0; width:100vw; height:94vh; justify-content:center; align-items:center; background-image: linear-gradient(rgba(0,51,153,0.25),rgba(255,255,255,0.25),rgba(0,51,153,0.25)); }
#intro_content {display:flex; width:60vw; justify-content:center; flex-direction:column;}
#intro_elements { display:flex; width:60vw; height:18vh; margin:4vh 0 4vh; justify-content:space-between; flex-direction:row;}
#intro_element { width:18vh; height:18vh; border-radius:50%; background-size:contain; box-shadow:0 1vh 1vh #999; }
#intro_text { display:flex; width:60vw; height:6vh; justify-content:center; align-items:center; }
.intro_element_link {transition: transform 1.5s; }
.intro_element_link:hover { -ms-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); }


/*Mini Top Bar*/
#mini_bar { position:fixed; display:flex; top:0vh; padding:0; width:100vw; height:4vh; justify-content:center; background-color:#003399; }
#mini_contents { display:flex; flex-direction:row; width:60vw; height:4vh; justify-content:space-between; }
#mini_bar_text { display:flex; width:12vw; height:4vh; align-items:center; }
#mini_elements { display:flex; width:6vw; height:4vh; justify-content:space-between; flex-direction:row; }
#mini_element { width:1.75vh; height:1.75vh; border-radius:50%; align-self:center; background-size:contain; }
#social_group { display:flex; width:12vw; height:4vh; justify-content:right; }
.social { width:auto; height:1.75vh; margin:0.5vw 0 0 1vw; }


/*Top Bar*/
#top_bar { position:fixed; display:flex; top:4vh; padding:0; width:100vw; height:18vh; justify-content:center; }
#area { display:flex; width:12vw; height:18vh; justify-content:center; align-items:center; }
#banner { display:flex; width:36vw; height:18vh; justify-content:center; align-items:center; background-image: linear-gradient(rgba(0,51,153,0.25),rgba(255,255,255,0.25),rgba(0,51,153,0.25)); }
#account { display:flex; width:12vw; height:18vh; margin-top:-0.25vh; justify-content:center; align-items:center; }
#area_buttons { display:flex; width:10vw; height:18vh; justify-content:center; flex-direction:column; }


/*Middle Bar*/
#middle_bar { position:fixed; display:flex; top:22vh; padding:0; width:100vw; height:4vh; justify-content:center; }
#middle_contents { display:flex; flex-direction:row; width:60vw; height:4vh; border-radius:1vh; justify-content:space-between; background-color:#003399; }
#middle_bar_text { display:flex; width:12vw; height:4vh; justify-content:center; text-align:center; }
#search { display:flex; justify-content:center; align-items:center; width:30vw; height:4vh; }


/*Main Contents*/
#main_contents { position:fixed; display:flex; top:26vh; padding:0; width:100vw; height:74vh; justify-content:center; }
#contents { display:flex; flex-direction:row; width:60vw; height:74vh; justify-content:space-between; }
#filters { display:flex; width:12vw; height:74vh; justify-content:center; border-right:1px dotted #CCCCCC; overflow-y:auto; }
#filters_holder { display:flex; width:10vw; height:74vh; justify-content:left; flex-direction:column; }
#scales { display:flex; width:12vw; height:74vh; justify-content:center; border-left:1px dotted #CCCCCC;}
#scales_holder { display:flex; width:10vw; height:74vh; justify-content:left; flex-direction:column; overflow-y:auto; }
#content { display:flex; margin:0.5vh 0 0.5vh 0; }


/*Products*/
#technical{ display:flex; width:12vw; height:74vh; justify-content:center; border-right:1px dotted #CCCCCC; overflow-y:auto; }
#technical_holder { display:flex; width:10vw; height:74vh; justify-content:left; flex-direction:column; }
#technical_data { display:flex; margin:0.5vh 0vw 0.5vh 0vw; height:6vh; width:12vw; justify-content:left; }
#text_data { width:15vw; height:auto; }
#text_row { display:flex; flex-direction:row; justify-content:space-between; width:40vw; margin:0.5vh 1vw 0.5vh 1vw; }
#text_column { display:flex; flex-direction:column; justify-content:left;}




#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; }
#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; }



/*Show Case*/
#showcase { display:flex; width:36vw; height:68vh; flex-direction:column; overflow-y:scroll; }
#showcase_model { display:flex; margin:2vh 1vw 2vh 1vw; width:34vw; height:23vw; align-content:center; flex-direction:column; background-color:white; border:1px solid #999999; border-radius:1vh; }
#showcase_photo { display:flex; margin:2vh 1vw 1vh 1vw; width:32vw; height:18vw; border-radius:1vh; background-size:cover }
#showcase_title { display:flex; margin:0.5vh 1vw 0.5vh 1vw; width:32vw; height:auto; justify-content:center; text-align:center;}
#showcase_class { display:flex; margin:0.5vh 1vw 2vh 1vw; width:32vw; height:2.5vh; justify-content:center; }
#showcase_history { display:flex; margin:0.5vh 1vw 0.5vh 1vw; width:32vw; justify-content:space-between; }




/*Text Area*/


#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:94vh; padding:0; width:100vw; height:6vh; border-top: 0.2vh solid #003399; background-color:white; }
#bottom_contents { display:flex; justify-content:center; align-items: center; margin-left:20vw; width:60vw; height:6vh; }
#main_links { display:flex; justify-content:space-between; width:14vw; }


/*Texts*/
.giant_brand { font-family:brand; margin:0.5vh 0; font-size:2.5vh; letter-spacing:1vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.medium_brand { font-family:brand; margin:0.5vh 0; font-size:1vh; letter-spacing:0.25vh; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.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:1.75vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }
.small_text { color:#999999; font-family:myriad; font-size:1.5vh; text-align: justify; text-justify:inter-word; font-variant-ligatures: no-common-ligatures; }




.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:#999999; font-family:brand; font-size:1.5vh; letter-spacing:1vh; }




.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_content { display:flex; justify-content:center; align-items:center; margin:2vh 0 2vh 0; }
.inputs { height:2.5vh; border:1px solid #999999; border-radius: 1vh; padding-top:1vh; text-align:center; font-family:myriad; font-size:1.25vh; }
.inputs:read-only { background:#DDDDDD; }
.inputs:required { border-color:#FF0000; }
.inputs_label { position:absolute; display:block; height:1.5vh; margin-top:-3.75vh; padding:0.25vh 0.5vw 0.25vh 0.5vw; background-color:#999999; border-radius:1vh; color:white; text-align:center; font-family:myriad; font-size:1.25vh; line-height:1.4; }
.long_inputs { width:100%; border:1px solid #999999; border-radius: 1vh; padding-top:1vh; font-family:myriad; font-size:1.25vh; resize:none; }
.long_inputs:read-only { background:#DDDDDD; }
.long_inputs:required { border-color:#FF0000; }
.search_text { height:2.25vh; padding-right:1.25vw; border: 1px solid white; border-radius:1vh 0 0 1vh; text-align:center; font-family:myriad; font-size:1vh; }
#radio_content { display:flex; margin:0.5vh 0 0.5vh 0; }
input[type="radio"] { appearance: none; width:1.5vh; height:1.5vh; border-radius:0.5vh; background-color:#006600; }
input[type="radio"]:checked { background-color:#FF0000; }
.radio_label { position:relative; display:table-cell; height:auto; margin-top:0vh; margin-left:0.25vw; color:#999999; text-align:left; font-family:myriad; font-size:1.5vh; }



/*Account*/
#account_form { display:flex; width:20vw; height:18vh; margin-top:1vh; justify-content:center; flex-direction:column; }
#account_info { display:flex; width:10vw; height:16vh; margin-top:1vh; justify-content:center; flex-direction:column; }
#login_area { display:flex; width:20vw; flex-direction:row; justify-content:space-around; }
#account_area { display:flex; width:10vw; margin:1vh 0 1vh 0; flex-direction:row; justify-content:space-between; }


/*Buttons*/
button { width:10vw; height:4vh; margin:1vh 0 1vh 0; background-color:white; border-radius:1vh; border:1px solid #006600; color:#006600; text-align:center; font-family:myriad; letter-spacing:0.25vh; font-size:1.5vh; cursor:pointer; }
button.selected, button.selected:hover { color:#FF0000; border:1px solid #FF0000; }
button:hover { color:#003399; border:1px solid #003399; }
.search_button { width:2.6vh; height:2.6vh; background:white; border-radius: 0 1vh 1vh 0; border: 1px solid white; text-align:center; color:white; font-family:myriad; font-size:1vh; cursor:pointer; }




.buttons { width:10vw; height:4vh; margin:1vh 0 1vh 0; background-color:white; border-radius:1vh; border:1px solid #006600; color:#006600; text-align:center; font-family:myriad; letter-spacing:0.25vh; font-size:1.5vh; 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:#003399; font-family:myriad; font-size:1,5vh; }
a.current:link, a.current:visited { font-family:myriad; font-size:1.5vh; color:#003399; 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; }