/*GLOBAL DEFINITIONS
**By Joshua Robison
**2022/08/23
*************************/

/*EXTENSION MODULES*/
@import "EXTheader.css";
@import "EXTfooter.css";
@import "EXTnavigation.css";
@import "EXTgalleryframe.css";
@import "EXThalfheader.css";
@import "EXTsections.css";

:root{
/*DEVICE SIZES*/
--screenS: 650px;
--screenM: 750px;
--screenL: 950px;
/* FONT SIZES */
--FNT04: 2.9em;
--FNT03: 2em;
--FNT02: 1.5em;
--FNT01: 1.1em;
--FNT00: .85em;/*.85*/
--FNT-1: .75em;
--FNT-2: .65em;
--FNT-3: .55em;

/*COLORS
**rgba(var(--black1).5);
*************************/
--black0:   0,0,0,;
--black1:   50,50,50,;
--black2:   100,100,100,;
--white0:   255,255,255,;
--white1:   238,238,238,;
--tint1:    136, 96, 208,;/*#8860d0*/
--tint2:    90, 185, 234,;/*#5ab9ea*/
}

/*FONT DEF
**sans,serif,cursive,
**fantasy,monospace
**regular,light,heavy
*************************/
@font-face {
font-family: 'sans-regular';
src: url('../font/biryaniregular.woff');
src: url('../font/biryaniregular.woff') format('woff');
}
@font-face {
font-family: 'sans-light';
src: url('../font/biryanilight.woff');
src: url('../font/biryaniultralight.woff') format('woff');
}
@font-face {
font-family: 'sans-heavy';
src: url('../font/biryaniextrabold.woff');
src: url('../font/biryaniextrabold.woff') format('woff');
}
@font-face {
font-family: 'fantasy';
src: url('../font/destroy.woff');
src: url('../font/destroy.woff') format('woff');
}
@font-face {
font-family: 'monolight';
src: url('../font/monocondensed.woff');
src: url('../font/monocondensed.woff') format('woff');
}


/*GREAT RESET
************************/
* {
margin:0;padding:0;
}

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
transition: all ease-in-out .2s;
}

body{
display: flex;
flex-direction: column;
overflow-x: hidden;
min-height: 100vh;
font-size: 95%;
line-height: 1.4em;
/*     ---     */
font-family: 'sans-regular';
color: rgba(var(--black1)1);
}

a,a:visited {
text-decoration: none;
color: inherit;
}

img,svg{
width: 100%;
height: inherit;
object-fit: fill;
}








/*INDEX TWEAKS
************************/
.FRAME⦘GALLERY.TWEAK⦘INDEX,
.FRAME⦘GALLERY.TWEAK⦘BIO,
.FRAME⦘GALLERY.TWEAK⦘CLASSES{
font-family: "sans-heavy";
    }
    .FRAME⦘GALLERY.TWEAK⦘INDEX h1,
    .FRAME⦘GALLERY.TWEAK⦘CLASSES h1,
    .FRAME⦘GALLERY.TWEAK⦘BIO h1,
    .FRAME⦘GALLERY.TWEAK⦘BLOG h1{
    position: relative;
    margin-bottom: 1.5em;
    font-family: 'fantasy';
    font-size: clamp(1.2em,min(7vw,4vh),2.8em);
    line-height: 1.1em;
    }.FRAME⦘GALLERY.TWEAK⦘INDEX h1::after,
    .FRAME⦘GALLERY.TWEAK⦘CLASSES h1::after,
    .FRAME⦘GALLERY.TWEAK⦘BIO h1::after,
    .FRAME⦘GALLERY.TWEAK⦘BLOG h1::after{
    content: "";
    position: absolute;
    bottom:-.4em;left:0;
    border-bottom:
    5px solid rgba(var(--white1)1);
    width: 100px;
    }

.FRAME⦘GALLERY.TWEAK⦘INDEX > div:nth-child(1){
background-image: url("../img/locations1.jpg");
}
.FRAME⦘GALLERY.TWEAK⦘INDEX > div:nth-child(2){
background-image: url("../img/voice1.jpg");
}
.FRAME⦘GALLERY.TWEAK⦘INDEX > div:nth-child(3){
background-image: url("../img/bio1.jpg");
}





/*CLASSES TWEAKS
************************/
.IMG⦘CLASSES{
background-image:
url("../img/training3.jpg");
background-position: bottom;
}
@media screen and (min-width: 720px){

.IMG⦘CLASSES{
background-position: center;
}

}


.FRAME⦘GALLERY.TWEAK⦘CLASSES > div{
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
background-position: bottom;
min-height: 50vh;
gap:1em;
}
.FRAME⦘GALLERY.TWEAK⦘CLASSES > div > span{
align-self: end;
}
.FRAME⦘GALLERY.TWEAK⦘CLASSES form{
display: none;
flex-direction: column;
gap: 1em;
font-size: var(--big);
cursor: default;
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES input,
    .FRAME⦘GALLERY.TWEAK⦘CLASSES button,
    .FRAME⦘GALLERY.TWEAK⦘CLASSES form a{
    padding: .6em;
    border-radius: .5em;
    font-size: inherit;
    background-color: rgba(var(--white0).7);
    border: 1px solid rgba(var(--tint1)1);
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES form a{
    text-decoration: none;
    font-size: var(--normal);
    color: rgba(var(--black1)1);
    }



.TWEAK⦘CLASSES div.clicked form{
display: flex !important;
}

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

.TWEAK⦘CLASSES div.clicked{
flex-direction: row;
grid-column: auto / span 2;
}

}


.FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(1){
    background-position: right;
    background-image: url("../img/area1b.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(2){
    background-image: url("../img/area2.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(3){
    background-image: url("../img/area3.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(4){
    background-position: right;
    background-image: url("../img/area4.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(5){
    background-image: url("../img/area5.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLASSES > div:nth-child(6){
    background-image: url("../img/area6.jpg");
    }
    
    








/*BIO TWEAKS
************************/
.IMG⦘BIO{
    background-image:
    url("../img/training3.jpg");
    background-position: bottom;
    }
    @media screen and (min-width: 720px){
    
    .IMG⦘BIO{
    background-position: center;
    }
    
    }
    
    
    .FRAME⦘GALLERY.TWEAK⦘BIO > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background-position: bottom;
    min-height: 50vh;
    gap:1em;
    }
    .FRAME⦘GALLERY.TWEAK⦘BIO > div > span{
    align-self: end;
    }
    .FRAME⦘GALLERY.TWEAK⦘BIO p{
    display: none;
    flex-direction: column;
    gap: 1em;
    font-size: var(--big);
    cursor: default;
        }
        .FRAME⦘GALLERY.TWEAK⦘BIO p a{
        padding: .6em;
        border-radius: .5em;
        background-color: rgba(var(--white0).7);
        border: 1px solid rgba(var(--tint1)1);
        text-decoration: none;
        font-size: var(--normal);
        color: rgba(var(--black1)1);
        }

.FRAME⦘ARTICLE::before{
content: " ";
position: absolute;
left: 0;
width: 100%;
height: 100vw;
background-image:
linear-gradient(180deg,
rgba(var(--tint2)0),
rgba(var(--tint1)1));
}
    
    .TWEAK⦘BIO div.clicked p{
    display: flex !important;
    }
    
    @media screen and (min-width: 720px){
    
    .TWEAK⦘BIO div.clicked{
    flex-direction: row;
    grid-column: auto / span 2;
    }
    
    }

















/*CLIENTS TWEAKS
************************/
.IMG⦘CLIENTS{
background-image:
url("../img/voice2.jpg");
}
@media screen and (min-width: 720px){

.IMG⦘CLIENTS{
background-position: 0px -80px;
}

}


.TWEAK⦘CLIENTS{
font-family: "sans-heavy";
}
.TWEAK⦘CLIENTS > div{
cursor: pointer;
gap:2em;
}
.TWEAK⦘CLIENTS figure{
display:flex;
font-family: 'sans-heavy';
font-size: 1.2em;
align-items: center;
margin-bottom: 2rem;
}
.TWEAK⦘CLIENTS img{
height:auto;width:auto;
padding: 2.5rem;
border-radius: 5rem;
border: 7px solid white;
background-size: contain;
margin-right: 1.5rem;
}
.TWEAK⦘CLIENTS blockquote{
display: none;
}
.TWEAK⦘CLIENTS p{
margin-bottom: 2em;
}


.TWEAK⦘CLIENTS div.clicked blockquote{
display: block !important;
}
.TWEAK⦘CLIENTS div.clicked q{
display: none !important;
}


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

.TWEAK⦘CLIENTS div.clicked{
grid-column: auto / span 2;
}

}


/*BACKGROUND IMAGES*/
.FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(1){
background-position: right bottom;
background-image: url("../img/dana-voice.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(1) img{
    background-image:
    url("../img/dana-icn.jpg");
    }
.FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(2){
background-position: left;
background-image: url("../img/feriba-voice.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(2) img{
    background-image:
    url("../img/feriba-icn.jpg");
    }
.FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(3){
background-image: url("../img/shahirah-voice.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(3) img{
    background-image:
    url("../img/shahirah-icn.jpg");
    }
.FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(4){
background-image: url("../img/ryan-voice.jpg");
    }
    .FRAME⦘GALLERY.TWEAK⦘CLIENTS > div:nth-child(4) img{
    background-image:
    url("../img/ryan-icn.jpg");
    }










/*BLOG TWEAKS
************************/
.IMG⦘BLOG{
background-image:
url("../img/clients.jpeg");
}
@media screen and (min-width: 720px){

.IMG⦘BLOG{
background-position: 0px -80px;
}

}


.TWEAK⦘BLOG{
font-family: "sans-heavy";
}
.TWEAK⦘BLOG > div{
cursor: pointer;
display: flex;
flex-direction: column;
place-items: inherit;
justify-content: flex-end;
align-content: flex-start;
text-align: left;
padding-top: 30vh;
min-height: 80vh;
}
.TWEAK⦘BLOG h1{
margin-bottom: .8em !important;
}
.TWEAK⦘BLOG time{
margin-bottom: 2.5em;
}
.TWEAK⦘BLOG blockquote{
display: none;
}


.TWEAK⦘BLOG div.clicked blockquote{
display: block !important;
}
.TWEAK⦘BLOG div.clicked span{
display: none !important;
}

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

.TWEAK⦘BLOG > div.clicked{
grid-column: auto / span 3;
}

}


/*BACKGROUND IMAGES*/
.FRAME⦘GALLERY.TWEAK⦘BLOG > div:nth-child(1){
background-position: center;
background-image: url("../img/beachbod.jpeg");
}
.FRAME⦘GALLERY.TWEAK⦘BLOG > div:nth-child(2){
background-image: url("../img/followafter.jpeg");
}
.FRAME⦘GALLERY.TWEAK⦘BLOG > div:nth-child(3){
background-image: url("../img/blog-h1.jpeg");
}




/*END OF PAGE*/