/*  I N D E X
________________________________________________

- document
- text
- decorative
- borders
________________________________________________
*/


/*  - document
------------------------>>  */
html {
 font-family: "Montserrat", sans-serif;
 font-size:18px;
 font-weight:400;
 font-style:normal;
 line-height:1.8rem;
 letter-spacing:.03rem;
 color:hsl(var(--black));
 background-color: var(--middark);
}
.mrseaves {font-family: "MrsEaves", "Libre Baskerville"}

html, body, main, section {
 flex-direction:column;
 align-items:center;
 position:relative;
 width:100%;
 margin:0;
}
section, .container, div.section {
 display:flex;
 height:auto;
}
html, body, main {
 height:100%;
 width:100%;
}
.container {
 position:relative;
 width:100%; max-width:900px;
 flex-direction:column;
 padding:3rem;
}

/*  - text
------------------------>>  */
h1 {
 font-weight:200;
}
h1 svg {height:;width:auto;
}
h2 {
 font-size:2rem;
}
h2 svg {height:;width:auto;
}
h3 light {
 font-size:1.2rem;
 font-weight:400;
}
h3 svg {height:1.2rem;width:auto;}
h3 svg.logo {height:4.2rem;width:auto;}

p {
 margin-block-start:.25rem;
}
p.sm {
 font-size:.9rem;
 font-weight:100;
}
p.link {text-decoration:underline;
}
p svg {
 height:1rem;width:auto;
}
p.lead {
 font-size: 1.2rem;
 font-weight:400;
 text-align: center;
}
p.script {
 font-family:"MrsEaves", "Libre Baskerville";
 font-style:italic;
 text-align:center;
}


nav {
 width:100%;
}

section.header {
 width:100%;
 align-items: center;
}
section header {
 padding:2rem;
 width:100%;
 max-width:1120px;
 color:var(--light);
}
section header * {
 width:100%;
}
div.section {
 padding:2.4rem 0;
}
figure img {
 width:100%;height:auto;
}
figure figcaption {
 padding:.25rem 0 1rem .5rem;
 font-size: .857rem;
 text-transform: uppercase;
 font-weight: 400;
 letter-spacing:0;
}

figure.frame {
 border:1px solid #DDD;
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
 border-radius:12px;
 /*padding:.5rem;*/
}
figure.frame img {
 /*border-radius:1rem;
 border:1px solid #aaa;
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);*/
}
a.button {
 width:auto;height:auto;
 align-self:center;
 margin:0;
 padding:1.5rem 2.4rem;
 text-align:center;
 font-weight:bold;
 border-radius:.82rem;
 overflow:hidden;
 text-transform:uppercase;
 letter-spacing:.1rem;
 text-shadow: 2px 2px 0 hsla(0,0%,0%,.24);
}
a.button.dark, a.button.darker, a.button.black {
 color:hsl(var(--light));
}
a.button.xprnt.light {
 text-shadow:none;
 background-color:hsla(0,0%,100%,.30)

}

a.button::before {
 content:"";
 position:absolute;
 inset:0;
 background-color:hsl(var(--COLOUR));
 mix-blend-mode:color;
 pointer-events:none;
}
a.button.shadow {
 border:1px solid hsla(0,0%,0%,.39);
 box-shadow: .18rem .18rem 3px hsla(0,0%,0%,.3);
}
code {
 position:relative;
 font-size:.72rem;
 margin:1rem 0;
 padding:2.4rem;
 color:hsl(var(--light));
 background-color: hsl(var(--black));
 border:1px solid hsl(var(--midlight));
}
code::before {
 content:"";
 position:absolute;
 inset:0;
 background-color:hsl(var(--COLOUR));
 mix-blend-mode:color;
}
code p {margin:0;}




section#about {
 height:auto;
 background-color:var(--middark);
}
section#about h2 {
 margin-top:6rem;
 text-align: center;
}
section#about h3 {
 margin-top:3rem;
}







div.line.vertical {
 border-left:2px solid transparent; height:100%;}
div.line.horizontal {
 border-bottom:2px solid transparent; width:100%;}

div.line.white {border-color:hsl(var(--white));}
div.line.lighter {border-color:hsl(var(--lighter));}
div.line.light {border-color:hsl(var(--light));}
div.line.midlight {border-color:hsl(var(--midlight));}
div.line.neurtal {border-color:hsl(var(--neutral));}
div.line.middark {border-color:hsl(var(--middark));}
div.line.dark {border-color:hsl(var(--dark));}
div.line.darker {border-color:hsl(var(--darker));}
div.line.black {border-color:hsl(var(--black));}






.svg-container {
 position:relative;
 pointer-events:auto; /* Allow interactions */
 display:flex;
 justify-content:center;align-items:center;
 height:100%;
}
.svg-container svg {
 width:100%!important;height:auto;
 max-height: none !important;
}

.overlay-texture {
 position:absolute;
 left:0;right:0;top:0;bottom:0;
 background-color:transparent;
 background-repeat:repeat;
 width:100%;height:100%;
}
.overlay-texture#t01 {
 background-image: url('/D/texture/01.png');
 background-size:200px 196px;
}

section#intro #logo-area div, ul {
 box-sizing:border-box;
}
section#intro #logo-area {
 width:100%;height:66%;
}
section#intro #logo-area .disk {
 width:144px;height:144px;
 background-color:#A5A085;
 border:2px solid #BCB79C;
 border-radius:50%;
}
section#intro #logo-area .disk .border {
 border-radius:50%;
}
section#intro #logo-area .disk .border#outer {
 width:120px;height:120px;
 border:1px solid #797459;
}
section#intro #logo-area .disk .border#inner {
 width:100%;height:100%;
 border:1px solid #C3BEA3;
}

#contact-area {
 top:calc(66% + 100px + 0%);
 width:100%;height:72px;
}
#contact-area img {
 height:18px;
}
#contact-area #bg {
 width:100%;height:100%;
 border-top:1px solid white;
 border-bottom:1px solid white;
 background:linear-gradient(to right, #3D3D3D 0%, #3D3D3D 100%);
 opacity:0.1;
}

section#intro #title-area {
 top:66%;
 width:100%;
 color:#FFFFFF;
 text-align:center;
}

.circle_tab {
 position:absolute;
 left:50%;
 transform: translate(-50%, -50%);
 width:100px;height:100px;
 border-radius:50%;
}
.circle_tab#border {
 border:1px solid var(--light);
 width:101px;height:101px;
}
.circle_tab#fill {
 background-color: var(--middark);
 width:99px;height:99px;
}


/*  - decorative
------------------------>>  */

.separation-text {
 width:50%;margin-left:25%;
 margin-top:2rem;
 margin-bottom:2rem;
 border-bottom:1px solid #EEE;
}

section header .separation-text {
 margin-top:.12rem;
 margin-bottom:.12rem;
 margin-left:0;
 width:100%;
}





/* - text */

span.bold {font-weight:700; }

span.dark {color:var(--dark); }













@media (min-width: 768px) { /* - break.md */

 .overlay-7D785D#cover {
  height:30%;
 }

 section#intro #title-area {
  top:69%;
  width:90%;max-width:1060px;
  color:#FFFFFF;
  text-align:center;
 }

 #contact-area {
  top:calc(79% + 100px + 0%);
  width:100%;height:72px;
 }

} /* 768 */






@media (min-width: 992px) { /* - break.lg */

} /* break.lg */






@media (min-width: 1200px) { /* - break.xl */

} /* break.xl */






@media (min-width: 1400px) { /* - break.xxl */


} /* break.xxl */