/*  I N D E X
________________________________________________

- text
- decorative
- borders

- Intro
- Qualifications
- Menu
- About

- Projects
________________________________________________
*/




.txt-light {color:var(--light);}
.fill {width:100%;height:100%;}


html {
 font-size:15px;
 font-family: "Montserrat", sans-serif;
 font-weight:300;
 font-style: normal;
 line-height:1.8rem;
 letter-spacing:.03rem;
 background-color: var(--middark);
}
.Exo {font-family:"Exo 2", "Exo 2.0"}
.Montserrat {font-family: "Montserrat", sans-serif;}
.Baskerville { font-family: "Baskerville"}

html, body, main, section {
 flex-direction:column;
 position:relative;
 width:100%;
}
section, .CTNR {
 display:flex;
 height:auto;
}
.CTNR {
 position:relative;
 width:100%;
}
html, body {
 height:100%;
}

nav.top {
 color:hsl(var(--white));
 font-weight:300;
 letter-spacing:.1rem;
 background-color:hsla(var(--aCOLOUR),.78);
}
nav.top .logo {
 width:.72rem;
 margin:2rem;
}
nav.top li {padding:0 1rem 0 1rem;}

h1 img.Exo {height:5rem;width:auto;max-width:900px;}
h2 img.Exo {height:2rem;width:auto;max-width:900px;}

h1 img.MrsEaves {height:9rem;width:auto;max-width:900px;}
h2 img.MrsEaves {height:2rem;width:auto;max-width:900px;}

h1, h2 {font-weight:200;}

h3 svg {height:2.7rem;width:auto;}
span svg {height:1.5rem;width:auto;}
svg {
 position:relative;
 pointer-events:auto; /* Allow interactions */
}
#logo {
 position:relative;left:.24rem;top:.12rem;
}
section.shadow {box-shadow:0 12px 9px 0 hsl(60 18% 24%);}

.card.shadow{box-shadow:1px 2px 12px 1px hsla(var(--ablack),.27);}

section.CTNReader {
 width:100%;
 align-items: center;
}
section header {
 padding:2rem;
 width:100%;
 max-width:1120px;
 color:var(--light);
}
section header * {
 width:100%;
}
section#intro,
section#contact,
section#qual,
section#menu {z-index:10;}

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);*/
}

div.line.vertical {
 border-left:2px solid transparent; height:100%;}
div.line.CTNRorizontal {
 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));}


section#intro #title img.Exo {display:none;}
section#intro #title.MrsEaves {display:flex;}


/*

- QUALIFICATIONS

------------------------>>  */
section#qual #header #date,
section#qual #header #edu {flex:0 0 auto;} /* width by content */
section#qual #header #dash {flex:1 1 auto;} /* fill space */
section#qual .field.label {color:hsl(var(--dark));}
section#qual #adjust.field {
 position:relative;top:-.5rem;
 line-height:1.5rem;
}
section#qual #body #dynamic {width:200%;}
section#qual #body #dynamic a {
 text-decoration:underline;
 text-underline-offset:4px;
 text-decoration-thickness:2px;
}


.field.input,
.field.label {
 padding:calc(var(--spacer)*.5) var(--spacer); /* p-2 p-3 */
 margin-bottom:4px;
 border:2px solid transparent;

}
.field.input {
 color:hsl(var(--white));
 background-color: hsl(var(--black));
 border-radius:4px;
 border-color:hsl(var(--white));
}



section#menu a {
 position:relative;
 z-index:10;
}
section#menu #logo {
 top:2.4rem;
}
section#menu #logo svg path {
 fill:hsl(var(--light))!important;
}
section#menu ul {
 padding:0 9% 0 9%;
}
section#menu ul li {
 padding:6% 0 6% 0;
}
section#menu ul li svg {
 display:block;
 width:100%;max-width:450px;
 height:auto;
}
section#menu ul li svg path {
 fill:hsl(var(--light))!important;
}
section#menu ul a:hover li svg path {
 fill:hsl(var(--white))!important;
}

section#about {
 height:auto;
 background-color:var(--middark);
 border-top:1px solid var(--light);
 border-bottom:1px solid var(--light);
}
section#about h3 {padding-top:50px;}
/* Dependencies <–– circle_tab */


section#projects figure .thumb {
 box-shadow:0 0 .3rem 0 rgba(0, 0, 0, 0.2);
}
section#projects figure figcaption {
 margin-top:.6rem;
}

section#projects .thumb {
 width:100%;
 aspect-ratio: 16 / 9;
 border:1px solid var(--light);
 border-radius:12px;
}
section#projects figure {
 margin:1rem 1rem 0 1rem;
}





section.project {
 align-items: center;
}
section.project .CTNR {
 max-width:1120px;
 margin-bottom: 6rem;
 padding-bottom:6rem;
 align-items: center;
 border-radius:12px;
 overflow: hidden;
 box-shadow:0 0 1rem 0 rgba(0, 0, 0, 0.2);
}

section.project figure {
 width:100%;
 margin:0;
}
section.project figure.frame {
 width:calc(100% - 2rem);
 margin:1rem;
}

section.project img {
 width:100%;
}
section.project .slide .spacing {
 padding-top:2rem;
 padding-bottom:3rem;
 background-color:transparent;
 border:none;box-shadow:none;
}

section.project figure {
 overflow: hidden;

}
section.project .slide {
 padding:4rem;
 width:100%;max-width:900px;
 border:none;
 box-shadow:none;
}
section.project .slide.pop {
 max-width:none;
}



.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-centre {
 position:absolute;z-index:0;
 bottom:50%;right:50%;
 transform:translate(50%,50%);
 background-repeat:no-repeat;
}


.lens.MULTI-dark {
 mix-blend-mode:multiply;
 background-color: hsl(var(--dark));
}

.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;
}
.lens#rays {
 background-size:200%;
 background-position: center;
}

section#intro #logo-area {
 width:144px;height:144px;
}
section#intro #contact {
 top:calc(66% + 100px + 0%);
 width:100%;height:72px;
}
section#intro #contact img {
 height:18px;
}
section#intro #contact #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;
}


.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); }





/* - Projects */
/*

- aplokinshp
- drivingreport

*/

section.project#aplokinshp .CTNR {
 background-color:#7A9FC7;
 color:#FFF;
}



section.project#drivingreport h1,
section.project#drivingreport h2,
section.project#drivingreport h3 {
 padding-top:4rem;
}

section.project#drivingreport h1 {}
section.project#drivingreport h2 {
 width:90%;
 font-weight:700;
 padding-bottom:1.2rem;
 border-bottom:2px solid #000;
}
section.project#drivingreport h3 {}
section.project#drivingreport .slide.pop h2 {
 border-bottom:none;
}
section.project#drivingreport {
 font-weight:300;
}
section.project#drivingreport .CTNR {
 background-color:#FFF;
}
section.project#drivingreport .slide.pop {
 color: #DDD;
 background-color: #2B317F;
}
section.project#drivingreport .bar {
 padding:.5px;
}
section.project#drivingreport figure {
 background-color: #B3B5D1;
}








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

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

 section#about {display:none}

 section#projects a {width:50%;}


} /* 768 */






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


 section#intro h1 img {
  width:80%;max-width:890px;
 }

 section#projects a {
  width:33%;
 }

} /* break.lg */






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



} /* break.xl */






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

 section#projects a {
  width:25%;
 }

} /* break.xxl */