@font-face {
    font-family: 'Karasuma Gothic Regular';
    src: url('../fonts/KarasumaGothic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/*    font-display: swap;
*/}

@font-face {
    font-family: 'Karasuma Gothic Light';
    src: url('../fonts/KarasumaGothic-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
/*    font-display: swap;
*/}


:root {
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
}

@media (max-width: 320px) {
    :root {
        font-size: 14px; /* Fixed minimum size */
    }
}

@media (min-width: 1600px) {
    :root {
        font-size: 20px; /* Fixed maximum size */
    }
}

body {
    font-family: 'Karasuma Gothic Light', Helvetica, Arial, Sans-serif;
    font-size: 1rem;
    line-height: 1.6; 
    background-color: #2E2E2E;
    color: #F3EFEE;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-smooth: always;
    opacity: 0; 
    animation: fadeInAnimation ease 2s; 
    animation-fill-mode: forwards;
}


@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

h1,h2,h3,h4,h5{
    padding: 0;
    margin: 0;
}
h1 {
    font-size: 2.25rem; 
    line-height: 100%;

    font-weight: normal;
    padding-right: 20%;
    margin-bottom: 2rem;

    position: relative;
    top: -.5rem;
}
h2 {
    font-size: 1.375rem; 
    line-height: 110%;
    font-weight: normal;
    font-family: 'Karasuma Gothic Regular', Helvetica, Arial, Sans-serif;
    padding-right: 25%;
    margin-bottom: 1rem;
    position: relative;
    top: -.075rem;

}
.header, .text.lg{
    font-size: 1.125rem;
    line-height: 120%;

}
.text.md{
    font-size: 0.875rem;
    line-height: 125%;
}
.text.sm{
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 0.625rem;
    line-height: 120%;

}
#footer{
    font-size:  .75rem;
    line-height: 130%;
}

a,a:active,a:visited,a:hover {
    text-decoration: none;
    color: #F3EFEE;;
}

/*:not(.button) a:hover{
*/    /*text-decoration: underline;*/
/*    margin-bottom: 4px;
    border-bottom: 1px solid #F3EFEE;
}*/
.bold{
    font-weight: bold
}





#content{
    padding: 5rem;
}

#footer{
    background-color: #222020;
    color: #bebbbb;
    padding: 2.5rem 5rem;
}
#footer a,a:active,a:visited {
    text-decoration: none;
    color: #bebbbb;
}
#footer a:hover {
    text-decoration: underline;
}
#footer img{
    opacity: .7;
    height: 50px;
    width: auto;
    margin-bottom: 1rem;
}
#footer .block{
    justify-content: center;
/*    align-items: center;
*/}



.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 10000;
    justify-content: space-between;
    padding: 1rem;
    box-sizing: border-box;
}
.header.sticky {
    position: fixed;
    top: -100%; 
    transition: top 0.3s; 
    z-index: 2000; 
    background-color: #222020;
}

.menuLogo img {
    height: 50px;
    width: auto;
}
.menuLinks{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuLinks div{
    margin-left: 1rem;
    cursor: pointer;
}
.menuLinks div:not(.button){
    border-bottom: 1px solid #f3efee00;
    font-weight: normal;
}


@media (min-width: 750px) {
    .button{
        font-size: .75rem;
        border: 2px solid #F3EFEE;
        text-transform: uppercase;
        letter-spacing: .075rem;
        padding: 7px 13px;
        border-radius: 4px;
        text-shadow:.25px 0 0 currentColor, 
        .25px 0 0 currentColor,
        .25px 0 0 currentColor, 
        .25px 0 0 currentColor;
    }
    .button:hover{
        color: #fff;
        border-color: #fff;
    }


    .menuLinks div:not(.button):hover{
        border-bottom: 1px solid #F3EFEE;
            font-weight: normal;

    }
    .menuLinks .button{
        transition: all .1s;
    }
    .menuLinks .button:hover{
        transform: scale(1.02);
        opacity: .85;
    }
}
@media (max-width: 750px) {
    .menuLogo{display: none;}
    .menuLinks{
        width: 100%;
        justify-content: space-between;
    }
}

#content .block:not(.images){
    padding-bottom: 12rem;
}
#content .images.block{
    padding-bottom: 2.5rem;
}
.subBlock{
    padding-bottom: 5rem;
    border-bottom: 1px solid #F3EFEE;
    margin-bottom: 1.5rem;
}
.subBlock:last-child{
    border-bottom: none;
}



.name{
    font-weight: bold;
}





/*.block{
    padding-left: 5rem;
    padding-right: 5rem;
}
*/
/*#content .block{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#content #images.block{
    padding-top: 5rem;
    padding-bottom: 0rem;
}

#footer .block{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
*/




/* Desktop Only Cols */
.cols{
    columns: 2;
    column-gap: 20px;
}
.block, .bioColWrap, #practice .subBlock
{
    display: flex;
    justify-content: space-between;
    gap: 20px;

}

#content .blockCol, .bioCol, #practice .subBlock > *{
    width: 50%;
}
#footer .blockCol{
    width: 25%;
}
#content .blockCol:last-child, #footer .blockCol:last-child,{
    clear: both;
}





/*      */
/*      */
/*      */
/*      */
/* HERO */
/*      */
/*      */
/*      */
/*      */





#hero {
  width: 100%; /* Adjust based on your layout */
  height: 90vh; /* Adjust based on your layout */
  position: relative;
  overflow: hidden;
}

.backgroundWrap, #logoWrap, .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.backgroundWrap .bg{
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-repeat: no-repeat;
  z-index: 100;

}
#logoWrap{
    z-index: 105;
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 3vh;
}
#logoWrap img{
    height: 65%;
    width: auto;
    max-width: 80%;
/*    width: 40%;
    height: auto;*/
}
#hero .bg:nth-child(1) {
    opacity: 1;
    z-index: 100;

}
#hero .bg:nth-child(2) {
    z-index: 101;
/*    animation-delay: 3s; 
*/    animation: anim-2 12s linear infinite
}
#hero .bg:nth-child(3) { 
    z-index: 102;
/*    animation-delay: 8s; 
*/    animation: anim-1 12s linear infinite
 }

.images {
    display: flex;
    justify-content: space-between;
    gap: 20px;
       width: 100%;
       height: 75vh;
}
.imageWrap {
    width:  50%;
    height: 100%;
    position: relative;
    background-color: #2E2E2E;
}

.images.desktop, .backgroundWrap.desktop{display: flex}
.images.mobile, .backgroundWrap.mobile{display: none}
@media (max-width: 750px) {
.images.desktop, .backgroundWrap.desktop{display: none}
.images.mobile, .backgroundWrap.mobile{display: flex}
}
.images .bg{
      background-size: cover;
/*          background-size: auto 101%;
*/      background-position: center;
      opacity: 0;
      background-repeat: no-repeat;
      z-index: 100;
}

.images .bg:nth-child(1) {
      opacity: 1;
      z-index: 100;
}
.images .imageWrap:nth-child(1) .bg:nth-child(2) {
    z-index: 101;
    animation: anim-2 10s linear infinite
}
.images .imageWrap:nth-child(1) .bg:nth-child(3) { 
    z-index: 102;
    animation: anim-1 10s linear infinite
 }
.images .imageWrap:nth-child(2) .bg:nth-child(2) {
    z-index: 101;
    animation: anim-2 12s linear infinite
}
.images .imageWrap:nth-child(2) .bg:nth-child(3) { 
    z-index: 102;
    animation: anim-1 12s linear infinite
 }





@keyframes anim-1 {
    from, 17% { 
       opacity: 1;
    }
    33%,83%{
       opacity: 0;
    }
    to{
       opacity: 1;
    }
}

@keyframes anim-2 {
    from, 50% { 
       opacity: 1;
    }
    66%,to{
       opacity: 0;
    }
}






/*
@keyframes anim-1 {
    from, 30% { 
       opacity: 1;
    }
    33%,96%{
       opacity: 0;
    }
    to{
       opacity: 1;
    }
}

@keyframes anim-2 {
    from, 63% { 
       opacity: 1;
    }
    66%,to{
       opacity: 0;
    }
}


*/







@media (max-width: 1500px) {
      .cols{
        columns: 1;
    }  
}






/* Undo Cols */
@media (max-width: 1100px) {
    .images .bg{
      background-size: cover;
          background-size: auto 101%;
    }
    #content, #footer {
        padding: 3rem;
        padding-top: 4rem;

    }
    #content{
        padding-top: 4rem;
    }
/*    .cols{
        columns: 1;
    }*/
    .bioColWrap, #practice .subBlock{
        display: block;
    }
    .bioCol, #practice .subBlock > *{
        width: 100%;
    }
    #footer .block{
        gap: 0px;
        flex-direction: column;
    }
    .images{
        height: 60vh;
                gap: 10px;

    }
    #footer .blockCol{
        width: 100%;
    }
    #copyright{
        margin-top: 1rem;
    }
}

@media (max-width: 750px) {
    .header{
           font-family: 'Karasuma Gothic Regular', Helvetica, Arial, Sans-serif;
    }
    h1{
        padding-right: 8%;
    }
    h2 {
        font-size: 1.25rem;
    }
    .text.md{
        font-size: 1rem;
    }
    .text.sm{
        font-size: .75rem;
    }
    #content, #footer {
        padding: 1.2rem;
        padding-top: 4rem;
    }

    #content{
        
    }
    #content .block:not(.images){
        padding-bottom: 0;
    }
    .subBlock{
        padding-bottom: 1.5rem;
    }
    .block{
        display: block;
    }
    #content .blockCol{
        width: 100%;
        margin-top: 3rem;
    }
    .images{
        flex-direction: column;
        gap: 5px;
        height: 500px;
    }
    .imageWrap{
        width: 100%;
        height: 50%;
    }
     .backgroundWrap .bg {
        background-attachment: scroll;
        background-size: auto 101%;
      }
     .imageWrap .bg {
        background-attachment: scroll;
        background-size: 102% auto;
      }
}