@media screen and (max-width: 767px) {
    .vid-overlay .info {
        bottom: calc(.04 * 100vw);
    }
    
    .vid-overlay .icon img, .vid-overlay .icon svg {
        width: 25px;
        height: auto;
        fill: #C1FF03;
    }
    
    
    
}


@media screen and (min-width: 1500px) {
    


    

}

/*-----------------------------------------------------------
    Header / Footer
-------------------------------------------------------------*/
@media screen and (min-width: 769px) {
.proj-splash, .introduction {
    /* min-height: -webkit-fill-available;
    height: -webkit-fill-available;
    max-height: -webkit-fill-available; */
}

    #my-name a, #nav span, #my-name span {
        font-size: 1em;
    } 

    #spinner #line, #spinner #gear {
        bottom: calc(var(--margsX) + 1px);
    }
}


/*-----------------------------------------------------------
    Proj Page
-------------------------------------------------------------*/
@media screen and (min-width: 769px) {
    .proj-intro ul {
        display: none;
    }

    body {
        max-width: 1000vw;
    }

}


@media screen and (max-width: 768px) {



    
/*-----------------------------------------------------------
    Proj Intro
-------------------------------------------------------------*/
   

    .proj-splash {
        /* height: 87vh; */
    }

    .information-container {
        width: 100vw;
    }

    .introduction {
        /* height: auto; */
        padding-bottom: 0;
        min-height: 0;
        padding-bottom: 5vw;
    }

    .information-links {
        padding-top: 6vw;
    }

    .splash-box {
        width: 100%;
        height: 90vh;
    }

    .proj-splash .splash-img img {
        /* width: 100%;
        height: 100%; */
    }

    .splash-text {
        /* display: none; */
    }

    .splash-text {
    
    }

    .splash-text div {
        position: absolute;
        bottom: var(--margsX);
        line-height: 1em;
    }

    .splash-text div:first-child {
        left: calc(var(--margsX) / 2);
        font-size: 2.5em;
    }

    .splash-text div:nth-child(2) {
        /* right: 0;
        font-size: 2.2em;
        width: auto; */
        display: none;
    }

    /* introduction */

    .introduction {
        grid-template-columns: 1fr;
        padding-top: 2.5em;
    }

    .proj-intro {
        padding: 0;
    }

    .proj-name {
        display: none;
    }

    .proj-brief {
        padding-bottom: 3em;
    }

    .proj-brief p {
        font-size: 1.25em;
        line-height: 1.5em;
    }

    #ludlow .proj-sub.down.moau .uno {
        width: auto;
        align-self: flex-end;
    }

    .proj-intro ul {
        text-align: right;
        margin-left: auto;
    }

    span.blk {
        display: block;
    }

    span.comma {
        display: none;
    }




    


 
/*-----------------------------------------------------------
    Blocks
-------------------------------------------------------------*/

    .block {
        width: 100%;
        /* margin: -1em auto 1em auto; */
        /* padding-left: var(--margsX);
        padding-right: var(--margsX); */
    }

    .block.first {
        margin-top: 1em;
    }

    .text {
        width: 100%;
        padding: 3em var(--margsX) 0 var(--margsX);
    }

    .block > .text:first-child {
        padding: 0 var(--margsX) 3rem var(--margsX);
    }

    .block-double, .block-2c {
        grid-template-columns: 1fr;
    }

    .proj-pic {
        margin-top: calc(var(--margsX) * 2);
    }

    .proj-pic img:not(:first-of-type) {
        margin-top: calc(var(--margsX) * 2);
    }

    .pix .tit {
        width: 100%;
        padding: 0;
    }


.tit.secondary h3 {
    font-size: 1.5em;
    font-family: var(--body-fam);
    letter-spacing: 2px;
    color: var(--intro-bg);
}

.tex img {
    margin-top: 5vw;
}

div.rule {
    display: none;
}

.model-head {
    margin: 0 2.5vw;
}




   



/*-----------------------------------------------------------
    Specific
-------------------------------------------------------------*/

#ludlow .proj-splash .splash-img {
    /* width: 100%;
    max-width: 100%; */
    height: 82vh;
    margin-top: 9vh;
}

.proj-splash .splash-img {
    /* width: 100%; */
    max-width: 100%;
    height: 82vh;
    margin-top: 9vh;
    object-fit: cover;
}

#rack .splash-img-wrapper {
    max-width: 96vw;
    max-height: 82vw;
    margin: 0 auto
}

#rack .proj-splash .splash-img {
    /* width: 100%; */
    max-width: 100%;
    /* height: 82vh;
    margin-top: 9vh; */
    height: 75vh;
    margin-top: 12.5vh;
    object-fit: cover;
    /* background-color: #e4e4e4; */
}



#rack .proj-splash .splash-img img, .proj-splash .splash-img img {
    /* width: 100%;
    height: auto; */
}

/* #rack .splash-box .splash-img-wrapper {
    background-color: #e4e4e4;
} */

#rack .block.first {
    margin: 0;
}

#rack .block.second {
    margin: 0;
}

#rack .intro-model {
    height: 65vh;
}

#fmp .block > .text:first-child {
    padding: none;
    padding-bottom: 6em;
}

#fmp .block-2c .text p {
    width: 100%;
}

#fmp .product .block {
    margin: 0;
}

#fmp .product .block > div {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 0 3vw;
    margin-bottom: 6em;
    margin-top: 1em;

}

#fmp .product .block > div.first {
    margin-bottom: 2em;
}

#fmp .product .block > div.first .text {
    margin-bottom: 1.5em;
}

#fmp .product .block > div .text {
    order: -1;
    margin-bottom: 3em;
}

#fmp .product .block .text {
    padding: 0 3vw;
    margin-top: 3em;

}

#fmp .pages .block {
    grid-template-columns: 1fr;
}

#fmp .break {
    height: 200px;
}



/*-----------------------------------------------------------
    Scroll Margs
-------------------------------------------------------------*/
.scroll-rule-mobile {
	border-style: solid;
	border-width: 0.5px;
	border-color: hsla(0, 0%, 100%, 0.3);
	border-radius: 0.5px;
	margin-bottom: 20px;
    width: 100vw;
}

	.scrollpage .scroll-info {
		width: 100%;
	}

	.scrollpage .scroll-pix, #threeD .scroll-pix {
		width: 100%;
		padding-left: 0;
		margin-top: 20px;
	}

    .buttons {
        margin-bottom: 1em;
    }

    .scroll-rule, #threeD .scroll-rule {
        margin-bottom: 20px;
        display: none;
    }

    .rule {
        display: none;
    }


    .radio .two-full {
        min-height: 70vw;
    }

    #misc .scroll-pix {
        margin-top: calc(var(--margsX) * 4);
    }

    .head {
        width: 100%;
        margin-left: 2.5vw;
    }

    .grid-three {
        grid-template-columns: 1fr 1fr;
    }


/*-----------------------------------------------------------
    flx
-------------------------------------------------------------*/

.flx, .flx.dwn {
    padding: 0 5vw;
    flex-direction: column;
}

.flx.transition {
    margin: 0;
}

.tit, .tex, .wide .tex, .wide .tit {
    width: 100%;
    max-width: 100%;
}




#rail .block {
    margin: 0;
    margin-top: 1.1em;
}


.scroll {
    flex-direction: column-reverse;
}

.scrollpage .scroll-pix, #threeD .scroll-pix {
    margin-top: 0;
    margin-bottom: calc(var(--margsX) * 2);
}

.buttons {
    margin-top: calc(var(--margsX) * 2);
}

#woodworking .scroll-info {
    margin-top: calc(var(--margsX) * 2);
}

/*-----------------------------------------------------------
    HALT
-------------------------------------------------------------*/

#halt .scroll {
    flex-direction: row;
}

#halt .popup {
    margin: 1em 0 2.25em 0;
    font-style: italic;
}

#halt .popup:hover {
    color: #D7CEBB;
}

/* end 768px */
}



/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
/* @media (min-width:641px)  {
    .splash-text {
        position: absolute;
        bottom: 2em;
    }

    .splash-text div:nth-child(1) {
        position: absolute;
        left: 0;
    }

    .splash-text div:nth-child(2) {
        position: absolute;
        right: 0;
    }

    body#halt {
        --intro-bg: blue;  
    }
} */


/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
/* @media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1024px) 
and (orientation: portrait)  {
.splash-text div {
position: absolute;
bottom: 2em;
}

.splash-text div:nth-child(1) {
left: 0;
}

.splash-text div:nth-child(2) {
right: 0;
}
} */

/* @media screen and (min-width: 990px) {

.splash-text div {
    position: absolute;
    bottom: var(--margsX);
    line-height: 1em;
}

.splash-text div:first-child {
    left: calc(var(--margsX) / 2);
    font-size: 2.5em;
}

.splash-text div:nth-child(2) {
    display: none;
}

} */



@media  only screen 
    and (min-device-width: 800px) 
    and (max-device-height: 2000px) 
    and (-webkit-min-device-pixel-ratio: 2)  
    and (orientation: portrait)  {

        .intr0 {
            padding-bottom: 5vw;
        }

        .splash-img { 
            /* max-width: auto; */
            width: 100vw;

        }


    .splash-text div {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
        left: 2em;
        line-height: 1em;
    }
    
    .splash-text div:first-child {
        left: calc(var(--margsX) / 2);
        font-size: 2.5em;
        margin-bottom: 5vw;
    }
    
    .splash-text div:nth-child(2) {
        /* right: 0;
        font-size: 2.2em;
        width: auto; */
        display: none;
    }


.proj-name h1 {
    font-size: 2.5em;
}

.introduction {
    margin: -2em var(--margsX) 0 0;
    padding: 0 var(--margsX) 10vw var(--margsX);
    /* grid-template-columns: 30% 70%; */
    min-height: 0;
}

.proj-name h1 {
    display: none;
}

.introduction ul li, .proj-intro {
    margin-left: calc(1.1em - var(--nargsX) - 1em);
}

.tit h4 {
    margin-top: 1em;
}

.proj-subsection {
    padding-bottom: 12vw;
}


}

@media  only screen 
    and (max-device-width: 699px) {

        .splash-text div {
            margin-bottom: 10em;
        }

        section.introduction {
            grid-template-columns: 1fr;

        }

        .splash-text div:first-child {
            margin-bottom: 10vw;
        }
    }