/*SASS page*/

/**variables**/
$lavender: #9592c7;
$blackgrey: #4c4946;
$gold: #d1bc70;
$lightgrey: #A5A5A5;
$sans: 'avenir', sans-serif;
$serif: 'abraham_lincolnregular', serif;
$twenty: 20px;

/* mix-ins for Headlines of text*/
@mixin headlines {
    font-family: 'abraham_lincolnregular';
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@mixin font {
    font-family: 'avenir', sans-serif;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 2em;
    text-transform: uppercase;
    
}

html {scroll-behavior: smooth;}

@import url('font/stylesheet.css');

body {
    font-size: 100%; margin: 0; 
    background-color: #f2f2f2 !important; }
        
img{max-width: 100%;}

a { text-decoration: none !important;}

container { width: 100%; margin: auto; overflow: hidden; max-width: 100%;}






#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}








/*************** ABOVE THE FOLD ******************/
.hero { width: 100%; margin: auto; height:50vw;background-size:100%;
    margin-bottom: 5vw;
}

.hero-tablet {display: none;}

.hero_mobile {display: none;}




/*************** BELOW THE FOLD ******************/


/*** END NAV BAR ***/





/*** INRO ***/

.intro { 
    width: 100%;
    margin: auto;
    background-color: $lavender;
    padding: 15vw 0; box-sizing: border-box;
    text-align: center;
    
    h1 { 
        @include headlines;
        color:#ffffff;
        font-size: 4em;
        margin: 2vw 0; 
        }
    p { width: 30%; margin: auto;
        padding-top: 2vw;
        @include font;
        font-size:1em; 
    }
}

hr {
    width: 35%;
border-top: 3px solid $gold;
border-radius: 5px;
}


/*** GALLERY ***/
#gallery {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 5vw 0;
    
    padding: 2vw 5vw; box-sizing: border-box;
}

#trgallery {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 1vw 0;
    
    padding: 1vw 5vw; box-sizing: border-box;
}


// Each flex item
.item {
    width: 27%; 
    margin: auto;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    margin: 2vw 0;
    
    
    img {
        width: 100%;
        display: block;
        transition:all .3s;
    }
    
}
.item:hover .hover {
    opacity: 95%;
}

.lottie_hover {
    position: absolute;
    width: 100%;
    z-index: 0;
    
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: $blackgrey;
    border-radius: 30px;
    margin: auto;
    text-align: center;
    color: white;
    z-index: 9;
    
    padding-top: 55%; box-sizing: border-box;
    padding-left: 10%;
    padding-right: 10%;
}

.text {
    width: 100%;
    @include headlines;
    text-align: center;
    font-size: 1em;
    
    p {
        @include font;
        font-size: .5em;
    }
}

.beertext {
    width: 100%;
    @include headlines;
    text-align: center;
    font-size: 1em;
    margin-top: 20%;
}






/*** FOOTER ***/
footer {
    width: 100%;
    margin: auto;
    background-color: $lavender;
    padding: 3vw 5vw; box-sizing: border-box;  
}

.footer_logo_mobile {display: none;}

.links { 
    width: 100%;
    margin: auto;
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    
    padding-left: 3vw; box-sizing: border-box;
    
    a {margin: 0; }
    
}

.icon {
    width: 4vw;}
.icon:hover {
    opacity: 70%;
    transition: ease-in .2s;
}

.footer_logo { 
    margin: auto;
    background-image: url(images/footer_logo.svg);
    background-repeat: no-repeat;
    width: 20%; height: 201px;
    transition: .4s;
}
.footer_logo:hover {
    background-image: url(images/footer_logo_hover.svg);
    background-repeat: no-repeat;
}

h3 { 
    width: 100%;
    text-align: center;
    @include font;
    color: #f2f2f2;
    font-size: .6em;
    font-weight: 400;
    letter-spacing: .5em;
    
    margin: auto; 
    padding-top: 10px; box-sizing: border-box;
}


 


// ******* BIO ABOUT PAGE ******* //
#about_header{
    margin: auto;
    width: 80%;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
    align-content: center;
    flex-direction: row-reverse;
    padding: 10vw 0 5vw 0; box-sizing:border-box;
    
    .bio_pic { width: 100%; margin: auto;}
    #bio_mobile {display: none !important;}
    .bio{ width: 55%; margin: auto; text-align:left;
        h1 { 
            @include headlines;
            font-size: 3.5em;
            color: $lavender;
        }
        p { 
            margin: auto;
            font-family: 'avenir', sans-serif;
            font-weight: 500;
            font-size: 1em;
            letter-spacing: .07em;
            line-height: 1.6em;
            color: $blackgrey;
            padding-bottom: 3%;
        }
    }  
}


.suit_of_skills { 
    width: 100%;
    margin: auto;
    text-align: center;
    
    h1 {@include headlines;
            font-size: 3em;
            color: $lavender; }
}

.suit { 
    margin: auto; width: 65%;
    display: flex; flex-wrap:wrap; justify-content: space-between;  align-content: center; text-align: center; flex-direction: column; 
    padding: 1vw 0; box-sizing:border-box;

    
    img {width: 300px; margin: auto; padding: 0;}
    
    
    .copy { width: 50%; margin: auto;
        text-align: center;
        
            h2 { width: 100%; margin: auto; @include headlines; color:$lavender; font-size: 2em;}
        
            p {  margin: auto;

                font-family: 'avenir', sans-serif;
                font-weight: 500;
                font-size: 1em;
                letter-spacing: .07em;
                line-height: 1.5em;
                color: $blackgrey;
                padding: 0; }
    }
    
}


.book, .brush {padding-left: 25%; box-sizing: border-box;}

.pen, .star {padding-right: 25%; box-sizing: border-box;}







// ******* CONTACT PAGE ******* //


#contact_header {
    width: 100%;
    margin: auto; 
    text-align: center;
    padding: 10vw 0 2vw 0; box-sizing:border-box;
    
    h1 { 
        @include headlines;
        font-size: 3.5em;
        margin: 0;
        padding-bottom: 8px;
        color: $lavender;
    }
    
    p {
        margin: auto;
        width: 53%;
        padding: 20px 0; box-sizing:border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 500;
        font-size: 1em;
        letter-spacing: .07em;
        line-height: 1.5em;
        color: $blackgrey;
    }
    
    hr {width: 30%;}
    
    a { color: $lavender;}
    a:hover { color: $gold; transition: ease .3s;}
}

#contact_gallery {
    margin: auto;
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 10vw;
    
    a { padding: 20px; box-sizing: border-box;}
   
}

#contact_mobile {display: none;}



/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
     	left: 0; right: 0; margin: auto;
   
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
   

}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
    left: 0; right: 0; margin: auto;

}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    img {
        width: 100%; height: 100%; position: relative;}
    h1 { 
        position: absolute; z-index: 300; width: 100%; height: 100%;
        left: 0; right: 0; margin: auto; top: 46%;
        font-size: 2.5em;
        text-align: center;
        @include headlines; color: $lavender;
    }
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}













////// ********* PROGJECTS ************////////

#project {
   width: 65%;
    margin: auto;
    align-content: center;
    text-align: center;
    margin-bottom: 5vw; box-sizing: border-box;
    
    h3 { 
        margin-top:50px;
        text-align: center;
        font-family: 'avenir', sans-serif;
        font-weight: 600;
        font-size: 1.3em;
        letter-spacing: .07em;
    }
     
}

#project_header {
    width: 100%;
    margin: auto; 
    text-align: center;
    padding: 10vw 0 2vw 0; box-sizing:border-box;
    
    h1 { 
        @include headlines;
        font-size: 3.5em;
        margin: 0;
        padding-bottom: 8px;
        color: $lavender;
    }
    
    p {
        margin: auto;
        width: 53%;
        padding: 20px 0; box-sizing:border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 500;
        font-size: 1em;
        letter-spacing: .07em;
        line-height: 1.5em;
        color: $blackgrey;
    }
    
    hr {width: 30%;}
    
    a { color: $lavender;}
    a:hover { color: $gold; transition: ease .3s;}
}


.lb_title {
    text-decoration: none !important; 
    @include font;
    font-size: .8em;
    font-weight: 300;
        color: $lightgrey;
    text-align: center; margin: auto;

}

.twos {
    width: 100%;
    margin: auto;
        display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    left: 0; right: 0;
    
   a { width: 50%; margin: auto; text-align: center; padding: .5vw; box-sizing: border-box;}
}

.three {
    width: 100%;
    margin: auto;
        display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    
    a { width: 33%; margin: auto; text-align: center; padding: .5vw; box-sizing: border-box;}
}

.four {
   width: 100%;
    margin: auto;
        display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    
    div { width: 25%; margin: auto; text-align: center; padding: .5vw; box-sizing: border-box;}
}





.image {  padding: .5vw; box-sizing: border-box;
    img {width: 100%;}
}


.videos { width: 100%; margin: 0px auto !important;  }
video { 
   margin: 0px auto !important; vertical-align: baseline;
    width: 100%; display: block;  justify-content: center;}




//********** TROEGS **********//
//*** SUB NAV ***//
.beer-sub-nav {
    width: 100%; margin: auto; text-align: center; padding: 5%; box-sizing: border-box;
    
    p { 
    @include font;
    font-size: 1em;
    color:darkgrey;
    font-family: 600;
    
        a{font-size: 1em; color: darkgray;}
        
        a:hover{color: $lavender;}
    }
}

//*** INNER PAGE COPY ***// 
        #tr-copy {
            padding: 3% 0; box-sizing:border-box;
            h2 { 
            text-decoration: none !important; 
            @include font;
            font-size: 1.2em;
            font-weight: 700;
            color: $lightgrey;
            text-align: center; margin: auto;
            padding-bottom: 5px; box-sizing:border-box;
                }
            p {
                margin: auto;
                width: 60%;
        
                font-family: 'avenir', sans-serif;
                font-weight: 500;
                font-size: 1em;
                letter-spacing: .07em;
                line-height: 1.5em;
                color: #A5A5A5;
                }
            } 


.tr-buttons {
    
    width: 100%;
    margin: auto;
        display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
    left: 0; right: 0;
    
    
    .tr-gallerybuttons {
        
        margin: 20px;
        
        button {
        width: 100%;
        border: solid $gold 2px;
        border-radius: 10px;
        padding: 20px; box-sizing: border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 800;
        font-size: .8em;
        letter-spacing: .1em;
        color: $blackgrey;
        text-transform: uppercase;
            text-align: center;}
      
        button:hover {
        background-color: $blackgrey;
        color: $gold;
        border: solid $blackgrey 2px;
        transition: .8s ease;
        } 
    }    
} 

        //********* COLLABs ********//
        

.pillar {width: 30%;}



   //**** EDITORIAL ****//

.mySlides1, .mySlides2 {
    display: none;
     margin-bottom: 10%;
}

img {vertical-align: middle;}
.page {margin: auto; width: 75%; padding-left: 25%; box-sizing: border-box;}



/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: $lightgrey;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: $blackgrey;
}






//**** READING IS BELIEVING ****//
.greenbg {
    padding:  0 15% ; box-sizing:border-box;
}
.bn_video {width: 100%; margin: 0px auto !important; }






.site_button {
    width: 100%; 
    margin: auto;
    margin: 30px 0;
    text-align: center;
        
        button {
        width: 40%;
        border: solid $lavender 2px;
        border-radius: 10px;
        padding: 10px; box-sizing: border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 800;
        font-size: .8em;
        letter-spacing: .1em;
        line-height: 1.5em;
            color: $blackgrey;
       
        background-color: #f2f2f2;
        text-transform: uppercase;
            text-align: center;}
    
    button:hover {
        background-color: $blackgrey;
        color: $gold;
        border: solid $blackgrey 2px;
        transition: .8s ease;
        
    }
}




// *** EXHIBIT **** //

.four_posters { width: 100%; margin: auto;
    
   a { width: 10%; margin: auto; text-align: center; }
}



// ****** DINO ****** //




// *** GIG POSTER  **** //

.gig_poster {  padding: .5vw; box-sizing: border-box;
    img {width: 75%;}}

.four_posters { width: 100%; margin: auto;
    
   a { width: 10%; margin: auto; text-align: center; }}




// **** BFF  **** //

a.bff_claw { margin: auto; width: 21%;}
a.bff_claw_mockup {margin: auto; width: 70%;}
.prize {margin: auto; width: 65%;}
a.tag_front { margin: auto; width: 46%;}






// **** 32  **** //






// *******  LUNAR SHIFT ******* //


#developement {
    width: 65%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    padding-bottom: 5vw; box-sizing: border-box;
    
    a {padding: .5vw; box-sizing: border-box;}
}


#development {
    width: 65%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    padding-bottom: 2vw; box-sizing: border-box;
    
    
    
    h2 { @include headlines;
        font-size: 2.5em;
        margin: 0;
        padding-bottom: 8px;
        color: $lavender;}
}
.pdf_button {
     width: 100%; 
     margin: auto;
    margin: 20px 0 55px 0;
    text-align: center;
        
    
        button {
        width: 15%;
        border: solid $lavender 2px;
        border-radius: 10px;
        padding: 20px; box-sizing: border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 800;
        font-size: .8em;
        letter-spacing: .1em;
        line-height: 1.5em;
            color: #f2f2f2;
       
        background-color: $lavender;
        text-transform: uppercase;
            text-align: center;}
    
    button:hover {
        background-color: $blackgrey;
        color: $gold;
        border: solid $blackgrey 2px;
       transition: .8s ease;
        
    }
}




// **** CAMPBELLS  **** //




// **** UP  **** //
.up_poster {  padding: .5vw; box-sizing: border-box;
    img {width: 65%;}}


.monogram { img {width: 60%;}}  



// *** WHEEL *** //

#wheel_project {
   width: 50%;
    margin: auto;
    align-content: center;
    text-align: center;
    margin-bottom: 5vw; box-sizing: border-box;
    
    
    
    h3 { 
        margin-top:50px;
        text-align: center;
        font-family: 'avenir', sans-serif;
        font-weight: 600;
        font-size: 1.3em;
        letter-spacing: .07em;
    }
     
}












///******* PROJECT END OF PAGE **********///

.gallery_button {
    width: 100%; 
    margin: auto;
    margin: 70px 0; 
    text-align: center;
    padding: 0 40px ; box-sizing: border-box;
    
        button {
            width: 25%;
        border: solid $gold 2px;
        border-radius: 10px;
        padding: 20px; box-sizing: border-box;
        
        font-family: 'avenir', sans-serif;
        font-weight: 800;
        font-size: .8em;
        letter-spacing: .1em;
        color: $blackgrey;
        text-transform: uppercase;
            text-align: center;}
      
        button:hover {
        background-color: $blackgrey;
        color: $gold;
        border: solid $blackgrey 2px;
        transition: .8s ease;
        } 
} 




.suggestion { 
    width: 75%;
    margin: auto;
    text-align: center;
    padding-bottom: 8vw; box-sizing: border-box;
    
    h2 {
        @include headlines;
        color: $lavender;
        font-size: 2.5em;
    }
}
.three_projects {
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 1vw;
    
    padding: 2vw 5vw; box-sizing: border-box;
    
    h1 {font-size: 1em;}
}




  
////***************************      TABLET       ***************************////
@media screen and (max-width: 900px) and (min-width: 500px) {
    
body {}
    .videos {width: 100%; height: 460px;}
    
    .hero {display: none;}
    
    .hero-tablet {
        display: block;
        width: 100%;
        margin: auto;
        
    }
    
    
    /*** INRO ***/
.intro { 
    h1 { font-size: 3em; }
     p { width: 35%;
        font-size: .8em;}
}
hr {
    width: 35%;
}
    
    
    

/*** GALLERY ***/
#gallery {}
    .item {
        width: 45%;
    }
    
#trgallery {}
    
/*** FOOTER ***/  
    footer {
        padding: 4vw 5vw 2vw 5vw;
    }

    .links { }
    .icon img { width: 45px;}
    .footer_logo {width: 195px;}
    h3 {font-size: .45em;}
    

    
    
    
    
// ********** ABOUT PAGE *********** //
#about_header{
    width: 90%;
    padding: 10vw 0 5vw 0; 
    
    .flipper { display: none !important;}
    
    #bio_mobile {    
    display: block !important;           
    
    .bio_image img { display: block; margin: auto; width: 300px;
	height: 460px;}
    }
    .bio { width: 55%; margin: auto; text-align:left;
        h1 { 
            @include headlines;
            font-size: 2.75em;
            color: $lavender;
        }
        p { 
            margin: auto;

            
            font-size: .9em;
            color: $blackgrey;}
    }  
}
    





.suit_of_skills { 
    
    h1 {font-size: 2.5em; }
}

.suit { 
    padding: 2.5vw 0; 
    
    img {width: 250px; margin: auto; padding: 0;}

    .copy { width: 55%; 
        h2 { font-size: 1.7em;}
         p{ font-size: .8em;}
    }
    
}

.book, .brush {padding-left: 0; }
.pen, .star {padding-right: 0; }



    
// ****** CONTACT PAGE ********* //
       #contact_header {
        padding-top: 17%;
        h1 {}
        p {width: 70%;}
        hr {width: 50%;}   
    }
    
    #contact_gallery {display: none !important;}

#contact_mobile { 
    display: block !important;
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 10vw;
    
    a {  margin: auto; padding: 20px; box-sizing: border-box;}
    
    .mobile_contact_image img { display: block; margin: auto; width: 300px;
	height: 460px;}
    
   }
    
    
  
    
//********** !!! PROJECTS !!! **********//
    #project_header {
        padding-top: 17%;
        h1 {}
        p {width: 70%;}
        hr {width: 50%;}   
    }
    hr {width: 50%;}


#project {
    width: 85%;
}
    
//********** TROEGS **********//

        #tr-copy {
            padding-bottom: 5%;
            h2 { 
            font-size: 1.1em;
            padding-bottom: 4px;
                }
            p {
                width: 60%;
                font-size: .9em;
                line-height: 1.4em;
                }
            } 


.tr-buttons {
    .tr-gallerybuttons {
        width: 35%;
        button {}
    }    
} 
    

    
    
// *******  MORTON MAGIC ******* //
    
    
// ******* B & N ********//
    .green_bg { padding: 0 20px;}
    
    .site_button {
        margin: 20px 0;
        
        button {
        width: 50%;
        padding: 10px; box-sizing: border-box;
      
       }
}



//***** BFF ******//
   
    .iframe {iframe {height: 400px;}}
    

// ****  APP  **** //
    .figma {display: none;}  
    

 // *******  LUNAR SHIFT ******* //
    
    
      #development {
    width: 85%; }
    
    .pdf_button {
        button { width: 25%;}
    }
    
  

// ****** WHEEL ***** //
    
#wheel_project {
    width: 85%;
}



//******* PROJECT END OF PAGE **********//
    .gallery_button {
        button {width: 40%;}
    }
    
 
    
    
    
    
    
    
} 
    




/********************        MOBILE       ***********************/
@media screen and (max-width: 801px) {

    
// ********** ABOUT PAGE *********** //
#about_header{
    padding-top: 15%;
    flex-direction: column-reverse;
    
    .bio{ width: 85%; margin: auto; text-align: center; 

        h1 { 
            @include headlines;
            font-size: 2.5em;
            color: $lavender;
        }
        p { 
            font-size: .85em;}
    }  
}





  
}




/********************        MOBILE       ***********************/
@media screen and (max-width: 501px) {
    
    body {}
    
    .hero {display: none;}
    .hero-tablet {display: none;}
    
    .hero_mobile { display: block; margin: auto; width: 75%; padding: 15% 0; box-sizing: border-box;}
    
    
/*** INRO ***/

.intro { 
    padding-top: 15vw;
    text-align: center;
    h1 { 
        font-size: 2.5em;
        margin: 2.5vw 0; }
    p { width: 50%; 
        font-size: .8em;}
    }
hr {
    width: 65%;}
    

  /*** GALLERY ***/
#gallery {}
    .item {
        width: 80%;
    }  
    
/*** FOOTER ***/  
    footer {
        padding:7vw 5vw;
    }

    .links {
        a { padding: 0vw 0; box-sizing: border-box;}
    }
    .footer_logo {display: none;}
    .email {}
    .insta {}
    .linkedin {}
    .behance {}
      .icon {
    width: 8.25vw;}
    
  

    
    .footer_logo_mobile {
        display: block;
        background-image: url(images/footer_logo.svg);
        background-repeat: no-repeat;
        margin: auto;
        width: 50%; height: 160px ;
        text-align: center;
        margin-bottom: 20px;
        padding: 0vw 0; box-sizing: border-box;
        transition: .4s;
    }
    .footer_logo_mobile:hover {
        background-image: url(images/footer_logo_hover.svg);
        background-repeat: no-repeat;
    }
    
    
    h3 {font-size: .3em;}
    
    
    
    // ********** ABOUT PAGE *********** //
#about_header{
    padding-top: 30%;
    flex-direction: column-reverse;

    
    #bio_mobile {display: block;}
    
    .bio { width: 85%; margin: auto; text-align: center; 

        h1 { 
            @include headlines;
            font-size: 2.5em;
            color: $lavender;
        }
        p { 
            font-size: .85em;}
    }  
}


.suit_of_skills { 
    
    margin: 100px 0;
    h1 {font-size: 2.25em; }
    
}

.suit { 
    padding: 3.5vw 0; 
    
    img {width: 200px; }

    .copy { width: 90%; 
        h2 { font-size: 1.6em;}
         p{ font-size: .8em;}
    }
    
}
    
    
    // *********** CONTACT PAGE *********** //
    
 
       #contact_header {
        padding-top: 30%;
        h1 {font-size: 2.5em; }
        p {width: 85%; font-size: .75em; letter-spacing: .03; padding: 15px 0 25px 0;} 
        hr {width: 55%;}
    }    
    


#contact_gallery {display: none !important;}

#contact_mobile { 
    display: block !important;}



    
// ****  !!! PROJECTS !!! **** //
    #project_header {
        padding-top: 30%;
        h1 {font-size: 2.5em; }
        p {width: 85%; font-size: .75em; letter-spacing: .03; padding: 15px 0 25px 0;} 
        hr {width: 55%;}
    }
    hr {width: 60%;}


#project {
    width: 90%;    
}
    .three {
        flex-direction: column;
        width: 100%;
        padding: .4vw 0;
        a { width: 100%;}
    }
    
    .twos {
        flex-direction: column;
        a { width: 100%;}
    }
    
    .four { flex-direction: column;
        div { width: 100%;}}
    .lb_title {font-size: .5em;}
    
    
    
// *** TROEGS ***//   
        #tr-copy {
            padding: 5% 0;
            box-sizing: border-box;
            h2 { 
            font-size: 1em;
            padding-bottom: 0px;
                }
            p {
                width: 80%;
                font-size: .8em;
                line-height: 1.3em;
                }
            } 


.tr-buttons {
    .tr-gallerybuttons {
        width: 35%;
        button {}
    }    
}    
  
.pillar {width: 50%;}    
    
    
    
// *** MORTON MAGIC *** //    
    .m {
        .m-reading {display: none;}
        .m-poster {display: none;}
    }
    
    
// ****  B & N  **** //
    
    .site_button {
        margin: 25px 0;
        
        button {
        width: 70%;
        padding: 10px; box-sizing: border-box;
      
       }
}
    
    .r {
        .r-morton {display: none;}
        .r-dino {display: none;}
    }
    
    
// ****  Exhibit Poster **** //
    .ex {
        .ex-bff {display: none;}
        .ex-poster {display: none;}
    }
    
    
// ****  Dino  **** //
    .dino {
        
        .d-bff {display: none;}
        .d-gig {display: none;}
    
    }
    
    
    
// ****  Gig Poster **** //
    .gig_poster {   padding:0vw; box-sizing: border-box;
    img {width: 99%;}}


    .gig {
        
        .g-campbells {display: none;}
        .g-app {display: none;}
    
    }
    
    

    
//***** BFF ******//
    .prize {margin: auto; width: 98%;}
    .iframe {iframe {height: 300px;}}
    
    a.bff_claw { margin: auto; width: 55%;}
//a.bff_claw_mockup {margin: auto; width: 70%;}
    
    
    .bff {
        .b-morton {display: none;}
        .b-wheel {display: none;}
        
    }
    
    
    
// ****  APP  **** //
    .figma {display: none;}
    .app {
        
        .a-wheel {display: none;}
        .a-campbells {display: none;}
    
    }    
    
    
// *******  LUNAR SHIFT ******* //
    
     #development {
        width: 99%; 
         
         h2 {font-size: 2em;}
         
    }
    
    .pdf_button { 
       
        button {width: 60%;}
    }
    
    
    .lunarshift { display: block;
        .l-morton {display: none;}
        .l-nonprofit {display: none;}
    }
    
    
    
// ******* CAMPBELLS ********//
    
        
    .noods { display: block;
        .noods-lunar {display: none;}
        .noods-wheel {display: none;}
    }
    
    
    
    // **** UP  **** //
.up_poster {  padding:0vw; box-sizing: border-box;
    img {width: 99%;}}    

 
    
    .up { display: block;
        .u-app {display: none;}
        .u-campbells {display: none;}
    }
    
    
    
    
    
// ****** WHEEL ***** //
    
#wheel_project {
    width: 100%;
}

    
        
    .wheel { display: block;
        .wheel_app {display: none;}
        .wheel_bn {display: none;}
    }
    
        
    
    
    
    
 //******* PROJECT END OF PAGE **********//
    .gallery_button {
        margin: 70px 0;
        button {width: 100%;}
    }  
    
    .suggestion {
        h2 {font-size: 2em;}
    }
    
}